var SlideShow = new Class({
	
	Implements: [Options, Events],
	options: {
		height: null
	},
	
	current: 0,
	slideCount: 0,
	slideSize: 0,
	slideOk: true,
	
	initialize: function(id,options){
		this.setOptions(options);
		
		this.wrapEl = document.id(id);
		this.classes = this.wrapEl.getElementById('classes').getChildren('li').get('html');
		this.backgrounds = this.wrapEl.getElementById('bgs').getChildren('li').get('html');
		this.captions = this.wrapEl.getElementById('captions').getChildren('li').get('html');
		this.heroes = this.wrapEl.getElementById('heroes').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');
		
		if (this.options.height) {
			this.wrapEl.setStyles({'height':this.options.height})
		}
		
		this.slideCount = this.backgrounds.length;
		
		this.firstSlide();
		
		this.attachEvents();
		
		this.autoSlide = function() {
			this.next();
		}.bind(this).periodical(8000);
		
	},
	
	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));
		
		this.wrapEl.addEvent('swipe', function(event){
			if (event.direction == 'left') {
				this.next();
			} else if (event.direction == 'right') {
				this.previous();
			}
			clearInterval(this.autoSlide);
		}.bind(this));
		
	},
	
	calculate: function(){
		this.slideSize = this.wrapEl.getScrollSize().x;
	},
	
	controler: function(box){
		
		var controls = new Element('div',{
			'class':'controls'
		}).inject(box,'top');
		
		var link = new Element('a',{
			'class':'link',
			'href': this.links[this.current],
			'html': 'Skoða'
		}).inject(controls);
		
		var arrowLeft = new Element('div',{
			'class':'arrow left',
			events: {
				click: function() {
					this.previous();
					clearInterval(this.autoSlide);
				}.bind(this)
			}
		}).inject(controls);
		
		var arrowRight = new Element('div',{
			'class':'arrow right',
			events: {
				click: function() {
					this.next();
					clearInterval(this.autoSlide);
				}.bind(this)
			}
		}).inject(controls);
		
	},
	
	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 ' + this.classes[this.current];
		
		var makeSlide = function(){
			newBg.inject(newSlide,'top');
			
			var slideIn = new Fx.Morph(newSlide,{'link':'cancel','duration':300});
			var slideOut = new Fx.Morph(currentSlide,{'link':'cancel','duration':300});
			
			var captionIn = new Fx.Morph(caption,{'link':'cancel','duration':400,transition: Fx.Transitions.Back.easeOut});
			var heroIn = new Fx.Morph(hero,{'link':'cancel','duration':400,transition: Fx.Transitions.Back.easeOut});
			var textBoxIn = new Fx.Morph(textBox,{'link':'cancel','duration':400,transition: Fx.Transitions.Back.easeOut});
			
			var showContent = function(){
				var staggerFirst = function() {
					captionIn.start({'top':30});
				}.delay(0);
				var staggerSecond = function() {
					heroIn.start({'top':60});
				}.delay(200);
				var staggerThird = function() {
					textBoxIn.start({'bottom':30});
				}.delay(100);
			};
			
			slideOut.addEvent('complete',function(){
				currentSlide.destroy();
				showContent();
				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,
				'height':this.options.height
			}
		}).inject(this.wrapEl,'top');
		
		var caption = new Element ('div',{
			'class':'caption',
			'html':this.captions[this.current],
			styles: {
				'top':-1200
			}
		}).inject(newSlide);
		var hero = new Element ('div',{
			'class':'hero',
			'html':'',
			styles: {
				'top':-1200
			}
		}).inject(newSlide);
		var textBox = new Element ('div',{
			'class':'textbox',
			'html': this.headlines[this.current] + this.texts[this.current],
			styles: {
				'bottom':1200
			}
		}).inject(newSlide);
		
		this.controler(textBox);
		
		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 ' + this.classes[this.current];
		
		var makeSlide = function(){
			newBg.inject(newSlide,'top');
			
			var slideIn = new Fx.Morph(newSlide,{'link':'cancel','duration':300});
			var slideOut = new Fx.Morph(currentSlide,{'link':'cancel','duration':300});
			
			var captionIn = new Fx.Morph(caption,{'link':'cancel','duration':400,transition: Fx.Transitions.Back.easeOut});
			var heroIn = new Fx.Morph(hero,{'link':'cancel','duration':400,transition: Fx.Transitions.Back.easeOut});
			var textBoxIn = new Fx.Morph(textBox,{'link':'cancel','duration':400,transition: Fx.Transitions.Back.easeOut});
			
			var showContent = function(){
				var staggerFirst = function() {
					captionIn.start({'top':30});
				}.delay(0);
				var staggerSecond = function() {
					heroIn.start({'top':60});
				}.delay(200);
				var staggerThird = function() {
					textBoxIn.start({'bottom':30});
				}.delay(100);
			};
			
			slideOut.addEvent('complete',function(){
				currentSlide.destroy();
				showContent();
				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,
				'height':this.options.height
			}
		}).inject(this.wrapEl,'top');
		
		var caption = new Element ('div',{
			'class':'caption',
			'html':this.captions[this.current],
			styles: {
				'top':-1200
			}
		}).inject(newSlide);
		
		var hero = new Element ('div',{
			'class':'hero',
			'html':'',
			styles: {
				'top':-1200
			}
		}).inject(newSlide);
		
		var textBox = new Element ('div',{
			'class':'textbox',
			'html': this.headlines[this.current] + this.texts[this.current],
			styles: {
				'bottom':1200
			}
		}).inject(newSlide);
		
		this.controler(textBox);
		
		var newBg = Asset.image(this.backgrounds[this.current], {
			'class': 'bgimage',
			onLoad: makeSlide
		});
		
	},
	
	firstSlide: function() {
		
		this.calculate();
		
		var className = 'item ' + this.classes[this.current];
		
		var makeSlide = function(){
			newBg.inject(newSlide,'top');
			
			var captionIn = new Fx.Morph(caption,{'link':'cancel','duration':'400',transition: Fx.Transitions.Back.easeOut});
			var heroIn = new Fx.Morph(hero,{'link':'cancel','duration':'400',transition: Fx.Transitions.Back.easeOut});
			var textBoxIn = new Fx.Morph(textBox,{'link':'cancel','duration':'400',transition: Fx.Transitions.Back.easeOut});
			
			var lolbot = function() {
				var staggerFirst = function() {
					captionIn.start({'top':30});
				}.delay(0);
				var staggerSecond = function() {
					heroIn.start({'top':60});
				}.delay(200);
				var staggerThird = function() {
					textBoxIn.start({'bottom':30});
				}.delay(100);
			}.delay(700);
		};
		
		var newSlide = new Element ('div',{
			'class': className,
			styles: {
				'height':this.options.height
			}
		}).inject(this.wrapEl,'top');
		
		var caption = new Element ('div',{
			'class':'caption',
			'html':this.captions[this.current],
			styles: {
				'top':-1200
			}
		}).inject(newSlide);
		
		var hero = new Element ('div',{
			'class':'hero',
			'html':'',
			styles: {
				'top':-1200
			}
		}).inject(newSlide);
		
		var textBox = new Element ('div',{
			'class':'textbox',
			'html': this.headlines[this.current] + this.texts[this.current],
			styles: {
				'bottom':1200
			}
		}).inject(newSlide);
		
		this.controler(textBox);
		
		var newBg = Asset.image(this.backgrounds[this.current], {
			'class': 'bgimage',
			onLoad: makeSlide
		});
		
	}
	
});