var banner_slideshow = new Class({
	Implements: [Options],
		
	options: {
		'elementSelector': 'div.list_row',
		'size':{
			'width': 665,
			'height': 200
		},
		'offset':{
			'x': 100,
			'y': 100
		},
		'duration':{
			'slide': 5000,
			'opacity': 2000
		},
		'random': false,
		'transition':{
			'slide': null,
			'opacity': null
		}
	},
	
	initialize: function(el, options){
		this.setOptions(options);
		
		this.handler = $(el);
		this.corner = this.options.random?$random(0,3):0;
		this.fx = null;
		
		this.elements = this.handler.getElements(this.options.elementSelector);
		if(this.elements){
			this.elements.setStyles({
				'position': 'absolute',
				'display': 'none'
			});
			new Asset.images([this.handler.getElement('img').getProperty('src')],{
				'onComplete': function(){
					this.slide(0);
				}.bind(this)
			});
		}
	},
	
	
	slide: function(idx){
		idx = this.elements.length > idx ? idx : 0;
		this.elements.setStyle('display', 'none');
		
		switch(this.corner%4){
			case 3:
				var top = 0;
				var left = -1*this.options.offset.x;
				var totop = -1*this.options.offset.y;
				var toleft = 0;
				break;
				break;
			case 2:
				var top = 0;
				var left = 0;
				var totop = -1*this.options.offset.y;
				var toleft = -1*this.options.offset.x;
				break;
			case 1:
				var top = -1*this.options.offset.y;
				var left = 0;
				var totop = 0;
				var toleft = -1*this.options.offset.x;
				break;
			case 0:
			default:
				var top = -1*this.options.offset.y;
				var left = -1*this.options.offset.x;
				var totop = 0;
				var toleft = 0;
				break;
		}
		
		this.elements[idx].setStyles({
			'top': top,
			'left': left,
			'display': 'block'
		});
		if(this.fx) $clear(this.fx);
		this.fx = new Fx.Morph(this.elements[idx], {
			'duration' : this.options.duration.slide,
			'onComplete' : function(){
				this.next(idx);
			}.bind(this)
		}).start({
			'top': [top,totop],
			'left': [left,toleft]
		});
	},
	
	position: function(idx){
		this.corner = this.options.random?$random(0,3):this.corner+1;
		switch(this.corner%4){
			case 3:
				var top = 0;
				var left = -1*this.options.offset.x;
				break;
				break;
			case 2:
				var top = 0;
				var left = 0;
				break;
			case 1:
				var top = -1*this.options.offset.y;
				var left = 0;
				break;
			case 0:
			default:
				var top = -1*this.options.offset.y;
				var left = -1*this.options.offset.x;
				break;
		}
		this.elements[idx].setStyles({
			'top': top,
			'left': left,
			'display': 'block'
		});
	},
	
	next: function(idx){
		var nextIdx = this.elements.length > idx+1 ? idx+1 : 0;
		this.elements.setStyle('z-index', '0');
		this.elements[nextIdx].setStyle('z-index', '1');
		this.position(nextIdx);
		this.elements[idx].setStyle('z-index', '2');
		new Fx.Morph(this.elements[idx], {
			'duration': this.options.duration.opacity
		}).start({'opacity':[1,0]});
		new Fx.Morph(this.elements[nextIdx], {
			'duration': this.options.duration.opacity,
			'onComplete': function(){
				this.slide(idx+1);
			}.bind(this)
		}).start({'opacity':[0,1]});
	}
});

window.addEvent('domready', function(){	
	var banner = new banner_slideshow($('header_picture'));
});