/**
 * @author frank
 * 
 * Slideshow
 * versie 1.0
 */

var Slideshow = new Class ({

	Implements: [Events, Options],
	options: {
		'items':		  'figure',
		'selectors':	  'div.selectors',
		'selected': 	  0,
		'slideshow': 	  true,
		'autoStart':      true,
		'timer':		  6000,
		'useSelector':    true,
		'fx': 		  	  'fade', // slide, fade, swipe
		'mode': 		  'horizontaal', // verticaal, horizontaal
		'transition': 	  Fx.Transitions.Expo.easeIn,
		'mobiel':         {
							'use': 			true,
							'fx': 			'swipe',
							'mode': 		null,
							'transition': 	null
						  }	
	},
	
	initialize: function(container, options){
		this.container = $(container);
		this.setOptions(options);
		
		this.items = Array();
		this.selectors = Array();
		
		
		if(this.options.mobiel.use && (Browser.Platform.name == 'ios' || Browser.Platform.name == 'android')){
			this.options.fx 		= this.options.mobiel.fx;
			this.options.mode 		= (this.options.mobiel.mode != null?this.options.mobiel.mode:this.options.mode);
			this.options.transition = (this.options.mobiel.transition != null?this.options.mobiel.transition:this.options.transition);
		} 
		
		switch(this.options.fx){
			case 'slide': 	this.initSlide(); break;
			case 'fade': 	this.initFade(); break;
			case 'swipe': 	this.initSwipe(); break;
		}
	},
	
	initFade: function(){
		this.container.getElements(this.options.items).each(function(item, i){
			item.setStyle('opacity', 0);
			item.fx = new Fx.Morph(item, {
				duration: 500,
				transition: this.options.transition
			});
			this.items[i] = item;
			this.createSelector(i);
		}.bind(this));
		
		this.start();
	},
	
	initSlide: function(){
		switch(this.options.mode){
			case 'horizontaal':
				var width  = 10000;
				var height = this.container.getSize().y.toInt();
				break;
			case 'verticaal':
				var width  = this.container.getSize().x.toInt();
				var height = 10000;
				break;
		}
		
		this.container.setStyle('overflow', 'hidden');
		
		var wrapper = new Element('div', {
			'class': 'wrapper',
			styles: {
				position: 'absolute',
				top: 0,
				left: 0,
				width: 	width,
				height: height
			}
		}).inject(this.container, 'top');

		var top = 0;
		var left = 0;
		this.container.getElements(this.options.items).each(function(item, i){
			item.setStyles({
				'position': 'relative',
				'float': 'left'
			});
			
			item.top  = top;
			item.left = left;
			
			wrapper.adopt(item);
			this.items[i] = item;
			this.createSelector(i);
			
			top  -= item.getSize().x.toInt() + item.getStyle('margin-top').toInt() + item.getStyle('margin-bottom').toInt() + item.getStyle('padding-top').toInt() + item.getStyle('padding-bottom').toInt();
			left -= item.getSize().x.toInt() + item.getStyle('margin-left').toInt() + item.getStyle('margin-right').toInt() + item.getStyle('padding-left').toInt() + item.getStyle('padding-right').toInt();
		}.bind(this));

		this.slider = new Fx.Morph(wrapper, {
			duration: 500,
			transition: this.options.transition,
			fps: 2000,
			onComplete: function(){
				//this.cloneItem();
			}.bind(this)
		});
		
		this.start();
	},
	
	
	// Swip => iOS / Android
	initSwipe: function(){
		Asset.javascript('/js/libraries/powertools.js', {
			onLoad: function(){
				this.initSlide();
				this.items.each(function(item, i){
					item.addEvent('swipe', function(swipe){
					    switch(swipe.direction){
					    	case 'left':  
					    		clearInterval(this.periodical);
					    		var it = (this.options.selected+1);
								if(it < this.items.length) this.slideIn(it);;
					    		break;
					    	case 'right': 
					    		clearInterval(this.periodical);
					    		var it = (this.options.selected-1);
								if(it >= 0) this.slideIn(it);
					    		break;
					    }
					}.bind(this));
				}.bind(this));
			}.bind(this)
		});
	},
	
	createSelector: function(i){
		if(this.options.useSelector){
			var selector = new Element('div', {
				'class': 'item',
				events: {
					'mouseenter': function(){			
						if (i != this.options.selected) {
							this.options.startSlideshow = false;
							this.slideIn(i);
						}
						clearInterval(this.periodical);
					}.bind(this),
					'mouseleave': function(){
						this.options.startSlideshow = true;
						this.slideshow();
					}.bind(this)
				}
			}).inject(this.container.getElement(this.options.selectors));
			
			this.selectors[i] = selector;
		}
	},
	
	start: function(){
		if(this.options.autoStart) this.slideshow();
		this.slideIn(0);
	},
	
	slideIn: function(item){
		this.slideOut();
		this.options.selected = item;
		if(this.options.useSelector) this.selectors[item].addClass('selected');
		
		
		if(this.options.fx == 'fade'){
			this.items[item].fx.cancel();
			this.items[item].fx.start({'opacity': [0, 1]});
		}else if(this.options.fx == 'slide' || this.options.fx == 'swipe'){
			this.slider.cancel();
			
			switch(this.options.mode){
				case 'horizontaal':
					this.slider.start({ 'left': this.items[item].left});
					break;
				case 'verticaal':
					this.slider.start({ 'top': this.items[item].top});
					break;
			}
			
		}
	},
	
	slideOut: function(item){
		if(typeof(item)=='undefined') item = this.options.selected;
		if(this.options.useSelector) this.selectors[item].removeClass('selected');
		
		if(this.options.fx == 'fade'){
			this.items[item].fx.cancel();
			this.items[item].fx.start({'opacity': [1, 0]});
		}
	},
	
	slideshow: function(){
		if (this.options.autoStart) {
			this.periodical = (function(){
				var item = (this.options.selected+1);
				if(item >= this.items.length) item = 0;
				this.slideIn(item);
			}.bind(this)).periodical(this.options.timer);
		}
	}
});