var SLIDE_MARGIN	= 24,
	NAV_HEIGHT		= 30,
	OUT_ALPHA		= .15,
	TYPE_SLIDE		= 'typeSlide',
	TYPE_FADE		= 'typeFade',
	IE_TWEEN_TIME	= 500,
	IE_EASE			= Fx.Transitions.Quad.easeOut,
	COVER_CLASS		= 'slideCover',
	VIMEO_CONTROLS_HEIGHT = 45;

var Slideshow = new Class({
	Implements: [Events],
	Binds: ['navClicked', 'nextClicked', 'prevClicked'],
	initialize: function(__element, _type) {
		this.el		= __element;
		this.type	= _type ? _type : TYPE_SLIDE;
		
		this.setup();
	},
	
	numSlides		: 0,
	slideWidth		: 0,
	slideHeight		: 0,
	scrollable		: '',
	currentSlide	: -1,
	slidesArray		: [],
	navArray		: [],
	headerArray		: [],
	touchStartPos	: {x:0, y:0},
	touchCurrentPos	: {x:0, y:0},
	touchDir		: '',
	ccLink			: 0,
	fileLink		: 0,
	hasVimeo		: false,
	
	setup: function() {
		var slides		= this.el.getElements('.slide');
		this.numSlides	= slides.length;
		
		var height		= 0,
			array		= [],
			hasVid		= false;
		this.el.getElements('.slide').each(function(el){
			array.push(el);
			el.setStyle('opacity', OUT_ALPHA);
			
			if (isIE) {
				el.set('tween', {
					duration: IE_TWEEN_TIME,
					transition: IE_EASE
				});
			}
			
			//check if slideshow contains any videos, then change the ipad sliding
			var iframe	= el.getChildren('iframe');
			if (iframe.length > 0) {
				hasVid = true;
			}
			
			if (height < el.getSize().y) height = el.getSize().y; //set height from tallest slide
		});
		
		this.hasVimeo		= hasVid;
		this.slideHeight	= height;
		this.slideWidth		= slides[0].getSize().x;
		this.setDimensions(); //function to override in other classes with fixed sizes
		
		this.slidesArray	= array;
		this.slidesArray[0].setStyle('margin-left', '0'); //IE fix
		
		//this.slideHeight= slides[0].getSize().y;
		var fullWidth	= Math.round( (this.numSlides * this.slideWidth) + ((this.numSlides-1) * SLIDE_MARGIN) );
		
		this.scrollable	= this.el.getElements('.scrollable');
		this.scrollable.setStyle('width', fullWidth + 'px').setStyle('height', this.slideHeight + 'px');
		this.el.setStyle('width', this.slideWidth + 'px').setStyle('height', this.slideHeight + NAV_HEIGHT + 'px');
		
		if (this.type == TYPE_FADE) {
			//this.el.setStyle('width', this.slideWidth + 'px').setStyle('height', this.slideHeight + 'px');
			this.el.setStyle('width', this.slideWidth + 'px').setStyle('height', this.slideHeight + 0 + 'px');
			this.el.getElements('.slidesholder').setStyle('overflow', 'hidden').setStyle('width', this.slideWidth + 'px').setStyle('height', this.slideHeight + 'px');
			
			//fix video slides for ipad
			if (isIpad && this.hasVimeo) {
				this.scrollable.setStyle('-webkit-transition-property', 'left');
			}
			
			var array		= [];
			this.el.getPrevious('.titleHolder').getChildren('h2').each(function(el){
				array.push(el);
				el.setStyle('opacity', 0);
				el.setStyle('position', 'absolute');
				//el.setStyle('top', '58px');
				
			});
			
			this.headerArray	= array;
			this.headerArray[0].setStyle('opacity', 1);
		}
		
		if (isIE) { //need to swap isIE to !supportCSS if we change isIE to include IE9
			this.scrollable.set('tween', {
				duration: IE_TWEEN_TIME,
				transition: IE_EASE
			});
		}
		
		this.addCovers();
		
		this.addNav();
		this.createTouchEvents();
		//this.gotoSlide(0);
		this.iniWithFirstSlide();
	},
	
	iniWithFirstSlide: function() {
		this.gotoSlide(0);
	},
	
	setDimensions: function () {
		if (this.type == TYPE_FADE) {
			this.slideWidth		= 460;
			this.slideHeight	= 307;
		}
	},
	
	addCovers: function() {
		if (this.type != TYPE_FADE) {
			//add transparent div to avoid clicking elements in inactive slides
			for (var i=0; i<this.slidesArray.length; i++) {
				var slide	= this.slidesArray[i],
					size	= slide.getSize(),
					div		= '<div class="' + COVER_CLASS + '" style="position:absolute;top:0;width:' + size.x + 'px;height:' + size.y + 'px"></div>';
				
				slide.set('html', slide.get('html') + div);
			}
		}
		
		this.addVimeoCovers();
	},
	
	addVimeoCovers: function() {
		if (isIpad) {
			//add special iframe cover to be able to swipe
			for (var i=0; i<this.slidesArray.length; i++) {
				var slide	= this.slidesArray[i],
					player	= slide.getElement('iframe');
					
				if (player) {
					var size	= slide.getSize(),
						//div		= '<div class="vimeoCover" style="background:rgba(200, 0, 0, .5);position:absolute;top:0;width:' + size.x + 'px;height:' + (size.y - VIMEO_CONTROLS_HEIGHT) + 'px"></div>';
						div		= '<div class="vimeoCover" style="position:absolute;top:0;width:' + size.x + 'px;height:' + (size.y - VIMEO_CONTROLS_HEIGHT) + 'px"></div>';
					
					slide.set('html', slide.get('html') + div);
				}
			}
		}
	},
	
	/*removeVimeoCover: function(_slide) {
		if (isIpad) {
			var slide	= this.slidesArray[_slide],
				player	= slide.getElement('iframe');
					
			if (player) {
				var div	= slide.getChildren('.vimeoCover');
				div.dispose();
			}
		}
	},*/
	
	addNav: function() {
		var navDiv		= this.el.getElements('.slidenav');
		var html		= '';
		
		if (this.type == TYPE_FADE) {
			//navDiv.setStyle('padding-top', this.slideHeight + 95 + 'px');
			//navDiv.setStyle('padding-top', this.slideHeight + 125 + 'px'); //set in css instead
			
			//fix for IE7
			var article		= this.el.getParent('article');
			var fullHeight	= this.slideHeight + 125 + NAV_HEIGHT;
			//article.setStyle('height', fullHeight + 'px');
			
		} else {
			navDiv.setStyle('padding-top', this.slideHeight + 'px');
		}
		
		if (this.numSlides > 1) {
			html += '<ul>';
			for (var i=0; i<this.numSlides; i++) {
				html += '<li><a href="slide-' + i + '" class="' + i + '"></a></li>';
			}
			
			html += '</ul>';
		}
		
		if (this.type != TYPE_FADE) {
			//add license links
			html += '<a href="#" target="_blank" class="cc"></a><a href="#" target="_blank" class="filelink"></a>';
		}
		
		navDiv.set('html', html);
		
		var array		= [];
		navDiv.getElements('ul a')[0].each(function(el){
			array.push(el);
		});
		this.navArray	= array;
		
		navDiv.getElements('ul a')[0].addEvent('click', this.navClicked);
		
		this.ccLink		= navDiv.getElement('.cc');
		this.fileLink	= navDiv.getElement('.filelink');
	},
	
	createTouchEvents: function() {
		log('createTouchEvents();');
		if (isIpad && this.numSlides > 1) {
			var thisRef	= this;
			var minDis	= 50;
			
			this.el.addEvent('touchstart',function(e) {
				thisRef.touchStartPos.x		= e.touches[0].pageX;
				thisRef.touchStartPos.y		= e.touches[0].pageY;
			});
			
			this.el.addEvent('touchmove', function(e) {
				thisRef.touchCurrentPos.x	= e.touches[0].pageX;
				thisRef.touchCurrentPos.y	= e.touches[0].pageY;
				
				var diff	= thisRef.touchCurrentPos.x - thisRef.touchStartPos.x;
				if (Math.abs(diff) >= 10) e.preventDefault();
				
				if (Math.abs(diff) >= minDis) {
					thisRef.touchDir	= 'right';
					if (diff < 0) thisRef.touchDir = 'left';
				}
				
			});
			
			this.el.addEvent('touchend', function(e) {
				if (thisRef.touchDir == 'left')		thisRef.nextClicked();
				if (thisRef.touchDir == 'right')	thisRef.prevClicked();
				
				thisRef.touchDir		= '';
				thisRef.touchStartPos	= {x:0, y:0};
				thisRef.touchCurrentPos	= {x:0, y:0};
				
				/*var pos		= thisRef.touchCurrentPos.x;
				var diff	= pos - thisRef.touchStartPos.x;
				
				if (Math.abs(diff) >= minDis) {
					var dir	= 'rigth';
					if (diff < 0) dir = 'left';
					
					if (dir == 'left')	thisRef.nextClicked();
					else				thisRef.prevClicked();
				}
				
				thisRef.touchStartPos	= {x:0, y:0};
				thisRef.touchCurrentPos	= {x:0, y:0};*/
			});
			
		}
	},
	
	nextClicked: function() {
		if (this.currentSlide < this.numSlides-1) {
			this.gotoSlide(this.currentSlide+1);
		}
	},
	
	prevClicked: function() {
		if (this.currentSlide > 0) {
			this.gotoSlide(this.currentSlide-1);
		}
	},
	
	navClicked: function(e) {
		//var toSlide	= e.target.get('class')[0];
		var str		= e.target.toString();
		var toSlide = str.charAt( str.length-1 );
		
		this.gotoSlide(toSlide * 1);
		return false;
	},
	
	gotoSlide: function(_i) {
		
		if (this.currentSlide != _i) {
			if (this.currentSlide > -1) {
				if (isIE)	this.slidesArray[this.currentSlide].tween('opacity', OUT_ALPHA);
				else 		this.slidesArray[this.currentSlide].setStyle('opacity', OUT_ALPHA);
				
				if (this.type == TYPE_FADE) {
					//this.headerArray[this.currentSlide].setStyle('-webkit-transition-duration', '0').setStyle('opacity', 0);
					setCSSTransition(this.headerArray[this.currentSlide], '0s');
					this.headerArray[this.currentSlide].setStyle('opacity', 0);
					
					
				} else {
					//remove next/prev events from slides
					var nextSlide	= this.slidesArray[this.currentSlide+1];
					var prevSlide	= this.slidesArray[this.currentSlide-1];
					
					if (nextSlide) {
						nextSlide.removeEvent('click', this.nextClicked);
						nextSlide.setStyle('cursor', 'default');
					}
					if (prevSlide) {
						prevSlide.removeEvent('click', this.prevClicked);
						prevSlide.setStyle('cursor', 'default');
					}
					
					if (this.currentSlide > -1) {
						//add cover div back
						this.slidesArray[this.currentSlide].getChildren('.' + COVER_CLASS).setStyle('display', 'block');
					}
				}
				
				if (this.currentSlide > -1) {
					var oldslide	= this.slidesArray[this.currentSlide];
					var player		= oldslide.getElement('iframe');
					if (player) {
						var vimId		= player.get('id');
						var froogaloop 	= $f(vimId);
						froogaloop.api('pause');
						//document.getElementById('vimeo_player').pause();
						/*setTimeout(function() {
							oldslide.set('html', oldslide.get('html'));
						}, slidetime);*/
						//var froogaloop = $f(player.get('id'));
						
						//this.removeVimeoCover(this.currentSlide);
					}
				}
			}
			
			
			
			
			var prevSlide		= this.currentSlide;
			this.currentSlide	= _i;
			
			var toLeft			= (this.slideWidth + SLIDE_MARGIN) * _i;
			
			/*if ($(document.html).hasClass('csstransforms3d')) {
			element.setStyle(vendorPrefix + "transform", "translate3d(-" + toMargin + "px, 0, 0)");
		} else if ($(document.html).hasClass('csstransforms')) {
			element.setStyle(vendorPrefix + "transform", "translate(-" + toMargin + "px, 0)");
		} else {
			if (slideTween) slideTween.cancel();
			slideTween 		= new Fx.Tween(element, {duration: SLIDE_SPEED, transition: SLIDE_EASE});
			slideTween.start('margin-left', '-' + toMargin);
		}*/
			
			if (isIE) {
				this.scrollable.tween('left', '-' + toLeft + 'px');
				this.slidesArray[_i].tween('opacity', '1');
			} else {
				this.slidesArray[_i].setStyle('opacity', '1');
				if (isIpad) {
					if (!this.hasVimeo) this.scrollable.setStyle('-webkit-transform', 'translateX(-' + toLeft + 'px)');
					else 				this.scrollable.setStyle('left', '-' + toLeft + 'px');
				} else {
					this.scrollable.setStyle('left', '-' + toLeft + 'px');
				}
			}
			
			this.updateNav(prevSlide);
			
			if (this.type == TYPE_FADE) {
				//this.headerArray[_i].setStyle('-webkit-transition-duration', '.5s').setStyle('opacity', 1);
				setCSSTransition(this.headerArray[_i], '.5s');
				this.headerArray[_i].setStyle('opacity', 1);
			} else {
				//add events to next/prev slides
				var nextSlide	= this.slidesArray[this.currentSlide+1];
				var prevSlide	= this.slidesArray[this.currentSlide-1];
				
				if (nextSlide) {
					nextSlide.addEvent('click', this.nextClicked);
					nextSlide.setStyle('cursor', 'pointer');
				}
				if (prevSlide) {
					prevSlide.addEvent('click', this.prevClicked);
					prevSlide.setStyle('cursor', 'pointer');
				}
				
				this.slidesArray[this.currentSlide].getChildren('.' + COVER_CLASS).setStyle('display', 'none');
				
			}
			
		}
	},
	
	updateNav: function(_prevslide) {
		if (this.numSlides > 1) {
			if (_prevslide > -1) this.navArray[_prevslide].removeClass('current');
			
			this.navArray[this.currentSlide].addClass('current');
		}
		
		if (this.type != TYPE_FADE) {
			//set license links
			
			var ccDiv		= this.slidesArray[this.currentSlide].getChildren('.linksinfo .cclink'),
				linkDiv		= this.slidesArray[this.currentSlide].getChildren('.linksinfo .file');
			
			if (ccDiv.length > 0) {
				var ccHref		= ccDiv.get('text')[0].toString();
				this.ccLink.set('href', ccHref);
				this.ccLink.setStyle('display', 'block');
			} else {
				this.ccLink.setStyle('display', 'none');
			}
			
			if (linkDiv.length > 0) {
				var fileHref	= linkDiv.get('text')[0].toString();
				this.fileLink.set('href', fileHref);
				
				this.fileLink.setStyle('display', 'block');
			} else {
				this.fileLink.setStyle('display', 'none');
			}
		}
	}
	
});
