var SLIDE_BTN_WIDTH		= 12,
	SLIDE_BTN_MARGIN	= 10,
	BTN_ID				= 'navBtnId',
	Z_INDEX_LOW			= 23,
	Z_INDEX_HIGH		= 24,
	FADE_SPEED			= 400,
	FADE_EASE			= 'ease-in-out';

var SlideshowBase = new Class({
	Implements: [Events],
	Binds: ['navClicked', 'onMouseMove', 'enterFrame', 'onKeyUp'],
	initialize: function(__element) {
		this.el		= __element;
		this.setup();
	},
	
	numSlides		: 0,
	slideHeight		: 0,
	slideWidth		: 0,
	slideArray		: [],
	navArray		: [],
	navDiv			: 0,
	counterDiv		: 0,
	currentSlide	: 0,
	visibleHeight	: 0,
	visibleWidth	: 0,
	mouseArea		: {x:0, y:0, width:0, height:0},
	mouseX			: 0,
	mouseY			: 0,
	
	//touch properties
	touchStartPos	: {x:0, y:0},
	touchCurrentPos	: {x:0, y:0},
	touchDir		: '',
	
	setup: function() {
		var t	= this;
		
		this.el.getElements('.slide').each(function(el, i) {
			t.slideArray.push(el);
			el.setAnimationProperties(['opacity'], [FADE_SPEED], [FADE_EASE], [0]);
				
			if (i == 0) {
				el.setStyle('z-index', Z_INDEX_HIGH);
			} else {
				el.setStyle('z-index', Z_INDEX_LOW);
			}
			
			if (!SUPPORT_OPACITY) {
				
				if (i == 0) {
					el.setStyle('opacity', 1);
				}
				else {
					el.setStyle('opacity', 0);
				}
			}
			
			t.numSlides++;
		});
		
		this.visibleWidth	= this.el.getSize().x;
		this.visibleHeight	= this.el.getSize().y;
		this.mouseArea		= {x:this.el.getPosition().x, y:this.el.getPosition().y, width:this.visibleWidth, height:this.visibleHeight};
		
		this.navDiv			= this.el.getElement('.nav_bar');
		
		this.createNav();
		this.createTouchEvents();
		this.setupSizes();
		
		document.addEvent('mousemove', this.onMouseMove);
		document.addEvent('keyup', this.onKeyUp);
		
		this.updateCounter();
		this.enterFrame();
	},
	
	createTouchEvents: function() {
		//log('createTouchEvents()');
		
		if (isEventSupported('touchstart') && this.numSlides > 1) {
			var thisRef	= this;
			var minDis	= 70;
			
			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';
				} else {
					e.preventDefault();
					//drag up/down to move images around
					var touchX	= thisRef.touchCurrentPos.x - thisRef.mouseArea.x,
						touchY	= thisRef.touchCurrentPos.y - thisRef.mouseArea.y;
					
					if (touchX < 0) touchX = 0;
					if (touchX > thisRef.mouseArea.width) touchX = thisRef.mouseArea.width;
					if (touchY < 0) touchY = 0;
					if (touchY > thisRef.mouseArea.height) touchY = thisRef.mouseArea.height;
					
					//TODO: make this more like a drag
					thisRef.mouseX	= touchX;
					thisRef.mouseY	= -touchY + thisRef.slideHeight;
				}
				
			});
			
			this.el.addEvent('touchend', function(e) {
				if (thisRef.touchDir == 'left')		thisRef.nextSlide();
				if (thisRef.touchDir == 'right')	thisRef.prevSlide();
				
				thisRef.touchDir		= '';
				thisRef.touchStartPos	= {x:0, y:0};
				thisRef.touchCurrentPos	= {x:0, y:0};
			});
			
		}
	},
	
	createNav: function () {
		if (this.numSlides > 1) {
			//var html	= '<div class="nav_buttons"><div id="prevBtn" class="slide_nav_button"></div><div class="slide_counter"></div><div id="nextBtn" class="slide_nav_button"></div></div>';
			var html	= '<div class="slide_counter"></div>';
			
			this.navDiv.set('html', html);
			this.counterDiv	= this.navDiv.getElements('.slide_counter')[0];
			
			this.el.getElements('.slide_nav_button').addEvent('click', this.navClicked);
		}
	},
	
	setupSizes: function() {
		var size			= this.el.getSize();
		this.slideWidth		= size.x;
		this.slideHeight	= size.y;
	},
	
	navClicked: function(e) {
		var id			= e.target.id;
		if (id == 'nextSlideBtn') this.nextSlide();
		else this.prevSlide();
		
		return false;
	},
	
	onKeyUp: function(e) {
		if (e.code == 39) {
			//right key
			this.nextSlide();
		}
		else if (e.code == 37) {
			//left key
			this.prevSlide();
		}
	},
	
	nextSlide: function() {
		var newSlide	= this.currentSlide + 1;
		if (newSlide > this.slideArray.length-1) newSlide = 0;
		this.gotoSlide(newSlide);
	},
	prevSlide: function() {
		var newSlide	= this.currentSlide - 1;
		if (newSlide < 0) newSlide = this.slideArray.length-1;
		this.gotoSlide(newSlide);
	},
	
	gotoSlide: function(_slide) {
		if (_slide != this.currentSlide) {
			this.hideCurrentSlide();
			this.currentSlide	= _slide;
			
			var newslide	= this.slideArray[this.currentSlide];
			
			newslide.setStyle('z-index', Z_INDEX_HIGH);
			newslide.animateStyle('opacity', 1);
			
			this.updateCounter();
		}
	},
	
	updateCounter: function() {
		if (this.numSlides > 0) { // otherwise counterDiv == null
			var html	= '<p>' + (this.currentSlide+1) + ' / ' + this.numSlides + '</p>';
			this.counterDiv.set('html', html);
		}
	},
	
	hideCurrentSlide: function() {
		var lastslide	= this.slideArray[this.currentSlide];
		lastslide.setStyle('z-index', Z_INDEX_LOW);
		lastslide.animateStyle('opacity', 0);
		
	},
	
	enterFrame: function() {
		var slide	= this.slideArray[this.currentSlide],
			image	= slide.getChildren('img')[0],
			imgPos	= image.getPosition(),
			imgSize	= image.getSize(),
			percX	= this.mouseX / this.mouseArea.width,
			percY	= this.mouseY / this.mouseArea.height,
			toX		= -Math.round(percX * (imgSize.x - this.visibleWidth)),
			toY		= -Math.round(percY * (imgSize.y - this.visibleHeight)),
			currentX= image.getStyle('left').replace('px', '') * 1,
			currentY= image.getStyle('top').replace('px', '') * 1,
			friction= .4;
		
		currentX	= currentX + (toX - currentX) * friction;
		currentY	= currentY + (toY - currentY) * friction;
		
		if (Math.abs(toX - currentX) < .05) currentX = toX;
		if (Math.abs(toY - currentY) < .05) currentY = toY;
		
		image.setStyle('left', Math.round(currentX) + 'px');
		image.setStyle('top', Math.round(currentY) + 'px');
		
		var delay	= 1000 / 30;
		setTimeout(this.enterFrame, delay);
	},
	
	onMouseMove: function(e) {
		//log('moousemove');
		//move images inside slides
		var mouseX	= e.client.x - this.mouseArea.x,
			mouseY	= e.client.y - this.mouseArea.y;
		
		if (mouseX < 0) mouseX = 0;
		if (mouseX > this.mouseArea.width) mouseX = this.mouseArea.width;
		if (mouseY < 0) mouseY = 0;
		if (mouseY > this.mouseArea.height) mouseY = this.mouseArea.height;
		
		this.mouseX	= mouseX;
		this.mouseY	= mouseY;
	},
	
	resize: function(_w, _h) {
		this.visibleWidth	= this.el.getSize().x;
		this.visibleHeight	= this.el.getSize().y;
		this.mouseArea		= {x:this.el.getPosition().x, y:this.el.getPosition().y, width:this.visibleWidth, height:this.visibleHeight};
		
		//decide if images should fill height or width
		var contRatio		= this.visibleWidth / this.visibleHeight;
		
		for (var i=0; i<this.slideArray.length; i++) {
			var slide		= this.slideArray[i],
				image		= slide.getElement('img')
				imgSize		= image.getSize(),
				imgRatio	= imgSize.x / imgSize.y;
				
			if (contRatio > imgRatio) {
				//fill width
				image.setStyle('width', '100%');
				image.setStyle('height', 'auto');
			} else {
				//fill height
				image.setStyle('width', 'auto');
				image.setStyle('height', '100%');
			}
		}
	}
	
});