var SlideShow = new Class({
	
	Implements: [Options, Events],
	options: {
		flerbert: 0
	},
	
	current: 0,
	slideCount: 0,
	slideSize: 0,
	slideOk: true,
	
	initialize: function(id,options){
		this.setOptions(options);
		
		this.wrapEl = document.id(id)
		
		this.backgrounds = this.wrapEl.getElementById('bgs').getChildren('li').get('html');
		this.headlines = this.wrapEl.getElementById('headlines').getChildren('li').get('html');
		this.texts = this.wrapEl.getElementById('texts').getChildren('li').get('html');
		this.links = this.wrapEl.getElementById('links').getChildren('li').get('html');
		this.linklabels = this.wrapEl.getElementById('linklabels').getChildren('li').get('html');
		
		this.slideCount = this.backgrounds.length;
		
		this.firstSlide();
		
		this.attachEvents();
		
		this.autoSlide = function() {
			this.next();
		}.bind(this).periodical(5000);
		
		this.controler();
		
	},
	
	attachEvents: function(){
		document.addEvent('keydown',function(event){
			if (event.key === 'right') {
				this.next();
				clearInterval(this.autoSlide);
			} else if (event.key === 'left') {
				this.previous();
				clearInterval(this.autoSlide);
			}
		}.bind(this));
	},
	
	calculate: function(){
		this.slideSize = this.wrapEl.getScrollSize().x;
	},
	
	controler: function(){
		
		var arrowLeft = new Element('div',{
			'class':'arrow left',
			events: {
				click: function() {
					this.previous();
					clearInterval(this.autoSlide);
				}.bind(this)
			}
		}).inject(this.wrapEl);
		
		var arrowRight = new Element('div',{
			'class':'arrow right',
			events: {
				click: function() {
					this.next();
					clearInterval(this.autoSlide);
				}.bind(this)
			}
		}).inject(this.wrapEl);
		
	},
	
	next: function(){
		
		if(!this.slideOk) {
			return;
		}
		this.slideOk = false;
		
		this.calculate();
		
		var currentSlide = this.wrapEl.getElement('.item');
		
		this.current++;
		if (this.current >= this.slideCount) {
			this.current = 0;
		}
		
		var className = 'item ';
		
		var makeSlide = function(){
			newBg.inject(newSlide,'top');
			Cufon.replace('h2');
			
			var slideIn = new Fx.Morph(newSlide,{'link':'cancel','duration':500});
			var slideOut = new Fx.Morph(currentSlide,{'link':'cancel','duration':500});
			
			slideOut.addEvent('complete',function(){
				currentSlide.destroy();
				this.slideOk = true;
			}.bind(this));
			
			slideIn.start({'left':0});
			slideOut.start({'left':(-this.slideSize)});
			
		}.bind(this);
		
		var newSlide = new Element ('div',{
			'class': className,
			styles: {
				'left':this.slideSize
			}
		}).inject(this.wrapEl);
		
		var textBox = new Element ('div',{
			'class':'textbox',
			'html': this.headlines[this.current] + this.texts[this.current]
		}).inject(newSlide);
		
		var link = new Element ('a',{
			'href': this.links[this.current],
			'class':'link',
			'html': this.linklabels[this.current]
		}).inject(textBox,'bottom');
		
		var newBg = Asset.image(this.backgrounds[this.current], {
			'class': 'bgimage',
			onLoad: makeSlide
		});
		
	},
	
	previous: function(){
		
		if(!this.slideOk) {
			return;
		}
		this.slideOk = false;
		
		this.calculate();
		
		var currentSlide = this.wrapEl.getElement('.item');
		
		this.current--;
		if (this.current < 0) {
			this.current = this.slideCount-1;
		}
		
		var className = 'item ';
		
		var makeSlide = function(){
			newBg.inject(newSlide,'top');
			Cufon.replace('h2');
			
			var slideIn = new Fx.Morph(newSlide,{'link':'cancel','duration':500});
			var slideOut = new Fx.Morph(currentSlide,{'link':'cancel','duration':500});
			
			slideOut.addEvent('complete',function(){
				currentSlide.destroy();
				this.slideOk = true;
			}.bind(this));
			
			slideIn.start({'left':0});
			slideOut.start({'left':this.slideSize});
			
		}.bind(this);
		
		var newSlide = new Element ('div',{
			'class': className,
			styles: {
				'left':-this.slideSize
			}
		}).inject(this.wrapEl);
		
		var textBox = new Element ('div',{
			'class':'textbox',
			'html': this.headlines[this.current] + this.texts[this.current]
		}).inject(newSlide);
		
		var link = new Element ('a',{
			'href': this.links[this.current],
			'class':'link',
			'html': this.linklabels[this.current]
		}).inject(textBox,'bottom');
		
		var newBg = Asset.image(this.backgrounds[this.current], {
			'class': 'bgimage',
			onLoad: makeSlide
		});
		
	},
	
	firstSlide: function() {
		
		this.calculate();
		
		var className = 'item ';
		
		var makeSlide = function(){
			newBg.inject(newSlide,'top');
		};
		
		var newSlide = new Element ('div',{
			'class': className
		}).inject(this.wrapEl);
		
		var textBox = new Element ('div',{
			'class':'textbox',
			'html': this.headlines[this.current] + this.texts[this.current]
		}).inject(newSlide);
		
		var link = new Element ('a',{
			'href': this.links[this.current],
			'class':'link',
			'html': this.linklabels[this.current]
		}).inject(textBox,'bottom');
		
		var newBg = Asset.image(this.backgrounds[this.current], {
			'class': 'bgimage',
			onLoad: makeSlide
		});
		
	}
	
});