var ProjectsSlideShow = 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.backgrounds = this.wrapEl.getElementById('bgs').getChildren('li').get('html');
		this.captions = this.wrapEl.getElementById('captions').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.controler();
		
		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(){
		
		var arrowLeft = new Element('div',{
			'class':'greyarrow left',
			styles: {
				'opacity':0
			},
			events: {
				click: function() {
					this.previous();
					clearInterval(this.autoSlide);
				}.bind(this)
			}
		});
		
		var arrowRight = new Element('div',{
			'class':'greyarrow right',
			styles: {
				'opacity':0
			},
			events: {
				click: function() {
					this.next();
					clearInterval(this.autoSlide);
				}.bind(this)
			}
		});
		
		var slideLeft = new Fx.Morph(arrowLeft,{'duration':150,'link':'cancel'});
		var slideRight = new Fx.Morph(arrowRight,{'duration':150,'link':'cancel'});
		
		var arrowWrapLeft = new Element('div',{
			'class':'arrowWrapLeft',
			styles: {
				'position':'absolute',
				'top':0,
				'left':0,
				'height':'100%',
				'width':'50%',
				'background-image':'url(/img/transparent.png)'
			},
			events: {
				mouseenter: function() {
					slideLeft.start({'opacity':1});
				}.bind(this),
				mouseleave: function() {
					slideLeft.start({'opacity':0});
				}.bind(this)
			}
		}).inject(this.wrapEl);
		
		var arrowWrapRight = new Element('div',{
			'class':'arrowWrapRight',
			styles: {
				'position':'absolute',
				'top':0,
				'right':0,
				'height':'100%',
				'width':'50%',
				'background-image':'url(/img/transparent.png)'
			},
			events: {
				mouseenter: function() {
					slideRight.start({'opacity':1});
				}.bind(this),
				mouseleave: function() {
					slideRight.start({'opacity':0});
				}.bind(this)
			}
		}).inject(this.wrapEl);
		
		var shadowTop = new Element('div',{
			'class':'shadowTop',
			styles: {
				'position':'absolute',
				'top':0,
				'right':0,
				'height':50,
				'width':'100%',
				'background-image':'url(/img/transparent.png)',
				'box-shadow': 'inset 0px 2px 0px 0px rgba(0,0,0,0.1)'
			}
		}).inject(this.wrapEl);
		
		arrowLeft.inject(arrowWrapLeft)
		arrowRight.inject(arrowWrapRight)
		
	},
	
	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');
			
			var slideIn = new Fx.Morph(newSlide,{'link':'cancel','duration':300});
			var slideOut = new Fx.Morph(currentSlide,{'link':'cancel','duration':300});
			
			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,
				'height':this.options.height
			}
		}).inject(this.wrapEl,'top');
		
		var textBox = new Element ('div',{
			'class':'cap',
			'html': this.captions[this.current]
		}).inject(newSlide);
		
		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');
			
			var slideIn = new Fx.Morph(newSlide,{'link':'cancel','duration':300});
			var slideOut = new Fx.Morph(currentSlide,{'link':'cancel','duration':300});
			
			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,
				'height':this.options.height
			}
		}).inject(this.wrapEl,'top');
		
		var textBox = new Element ('div',{
			'class':'cap',
			'html': this.captions[this.current]
		}).inject(newSlide);
		
		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,
			styles: {
				'height':this.options.height
			}
		}).inject(this.wrapEl,'top');
		
		var textBox = new Element ('div',{
			'class':'cap',
			'html': this.captions[this.current]
		}).inject(newSlide);
		
		var newBg = Asset.image(this.backgrounds[this.current], {
			'class': 'bgimage',
			onLoad: makeSlide
		});
		
	}
	
});