var SlidePointer = new Class({
	_initialize : function(p){
		if (p){ this.extend(p); }
		
		var n = new Element('div', {className: 'slidepointer'});		
		
		this.extend({
			_observer: new Observer({
				autostart: true,
				properties: {caption: '', selected: false},
				actions: {
					caption: function(){ this.innerHTML = this.caption; },
					selected: function(){ this.className = this.selected ? 'slidepointer selected' : 'slidepointer'; }
				}
			})
		});
		
		return n;
	},
	
	_type: 'slidepointer',
	
	caption : '',
	
	selected : false
});

var SlideScene = new Class({
	_initialize : function(p){
		if (p){ this.extend(p); }

		var n = new Element('div', {className: 'slidescene'});
		
		this.extend({
			_pointer: new SlidePointer(),
			_observer: new Observer({
				autostart: true,
				properties: {image: '', caption: ''},
				actions: {
					image: function(){ this.style.backgroundImage = 'url(' + this.image + ')'; },
					caption: function(){ this._pointer.title = this.title = this.caption; }
				}
			})
		});
		
		return n;
	},
	
	_type : 'slidescene',
	
	image : '',
	
	caption : ''
});

var SlideView = new Class({
	_initialize : function(p){
		if (p){ this.extend(p); }
		
		var n = new Element('div', {className: 'slideview'});
		
		var html = '';
		html += '<div class="scenes"></div>';
		html += '<div class="pointers">';
		html += '	<div class="left"></div>';
		html += '	<div class="right"></div>';
		html += '</div>';
		
		n.innerHTML = html;
		
		this.extend({
			_observer: new Observer({
				autostart : true,
				properties: {width: 0, height: 0, currentscene: null},
				protection: {currentscene: true},
				actions: {
					width: function(){ this.style.width = this.width + 'px'; },
					height: function(){ this.style.height = this.height + 'px'; }
				}
			}),
			scenes: new Collection({
				types: ['slidescene'],
				onadd: function(x){
					x._owner = this;
					Effects.hide(x);
					x.create(this.getelement({className: 'scenes'}));
					x._pointer.extend({
						caption: this.scenes.length,
						onclick: function(){ this._owner._owner._enter(this._owner); }
					});
					x._pointer.create(this.getelement({className: 'pointers'}), this.scenes.length);
					
					if (this.scenes.length > 1 && this.autostart && this._intervalid == -1){
						this.start();
					}
				},
				onremove: function(x){
					x._pointer.remove();
					x.remove();
					
					if (this.scenes.length <= 1 && this._intervalid != -1){
						this.stop();
					}
				}
			})
		});
		
		_extend(n.getelement({className: 'left'}), {
			_owner: n,
			onclick: function(){
				this._owner.back();
			}
		});		
		_extend(n.getelement({className: 'right'}), {
			_owner: n,
			onclick: function(){
				this._owner.next();
			}
		});
		
		return n;
	},
	
	_type : 'slideview',
	
	_intervalid : -1,
	
	_busy : false,
	
	_turn : true,
		
	width : 300,
	
	height : 200,
	
	
	
	autostart: true,
	
	scenes : null,
	
	currentscene : null,
	
	interval : 5000,
	
	_enter : function(x){
		if (this.scenes.contains(x) && x != this.currentscene && !this._busy){			
			this._busy = true;
			
			var t = this;
			var c;
			if (this.currentscene){
				var y = this.currentscene;
				
				Effects.setdepth(y, 0);				
				y._pointer.selected = false;
				
				c = function(){
					Effects.hide(y);
					t._busy = false;
				}
				
				Effects.fadein(y, 200);
			} else {
				c = function(){
					t._busy = false;
				}
			}
			
			x._pointer.selected = true;
			Effects.setopacity(x, 0);
			Effects.setdepth(x, 1);
			Effects.show(x);
			Effects.fadeout(x, 200, c);
			
			this._observer.breakonce({currentscene: x});
			
			if (!this._turn){
				this.stop();
				this.start();
			} else {
				this._turn = false;
			}
		}
	},
	
	next : function(){
		if (this.scenes.length > 0){
			var i = this.scenes.indexof(this.currentscene) + 1;
			if (i >= this.scenes.length){ i = 0; }
			this._enter(this.scenes[i]);
		}
	},
	
	back : function(){
		if (this.scenes.length > 0){
			var i = this.scenes.indexof(this.currentscene) - 1;
			if (i < 0){ i = this.scenes.length - 1; }
			this._enter(this.scenes[i]);
		}
	},
	
	showscene : function(i){
		if (i >= 0 && i < this.scenes.length){
			this._enter(this.scenes[i]);
		}
	},
	
	start : function(){
		if (this.scenes.length > 0 && this._intervalid == -1){
			(x = this).next();
			this._intervalid = setInterval(function(){ x._turn = true; x.next(); }, this.interval);
		}
	},
	
	stop : function(){
		if (this._intervalid != -1){
			clearInterval(this._intervalid);
			this._intervalid = -1;
		}
	}
});