$(document).ready(function() {
 
 	//$('#mask-gallery, #gallery li').width($('#slider').width());   
    //$('#gallery').width($('#slider').width() * $('#gallery li').length);
    //$('#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height($('#slider').height());
	
	$('.slider').each(function(index)
	{
		gallery = new Slider(this);
 	});

	//$(".headerDiv img").hide();
	//$(".headerDiv img").bind("load", function () { $(this).fadeIn(1000); });

	/*var element = document.getElementById("gallery");
	gallery = new Slider(element);
	*/
});

function Slider(sliderElement)
{
	this.sliderElement = sliderElement;
	this.element = sliderElement.getElementsByClassName("gallery")[0];
	
	sliderElement.onload = function()
	{
		alert("DONE")
	}
		
	// the element which will have code applied to it!
	// figure out our transformMode...
	if(Modernizr.csstransforms3d)
	{
		this.transformMode = 0;
	}
	else// if(Modernizr.csstransforms)
	{
		this.transformMode = 2;
	}
//	else
//	{
//		this.transformMode = 2;
//	}
	
	//this.transformMode = 0;
	//alert(this.transformMode);
	
	this.totalImages = this.element.children.length;
	
	this.imageWidth = 700;
	
	this.easePosition = 0;
	this.spring = new Spring();
	this.position = 0;
	this.previousPosition = 0;
	this.speed = 0;
	
	this.dragOffset = 0;
	this.dragging = false;
	
	this.currentSelected = 2;
	this.buttons = [];
	
//	this.debuggerx = document.createElement('a');
	//this.debuggerx.style.color = "#FFFFFF";
	//this.debuggerx.innerHTML = "HELLO!"
	//alert(debuggerx)
	//document.body.appendChild(this.debuggerx);
	
	this.init = function()
	{
		if (this.totalImages > 1) 
		{
			this.element.ondragstart = function(){
				return false;
			}
			this.element.onmousedown = $.proxy(this.onMouseDown, this);
			
			// not forgetting touchs!
			this.element.ontouchstart = $.proxy(this.onTouchStart, this);
			this.element.style.width = this.totalImages * this.imageWidth + "px";
			
			/// BUILD THE BUTTONS! ////
			var control = document.createElement('div');
			control.className = "buttonNav";
			
			for (var i = 0; i < this.totalImages; i++) {
				var button = document.createElement('a');
				applyButton(button);
				
				this.buttons[i] = button;
				
				button.innerHTML = "<img src='images/button.png'/>"
				button.rel = i;
				button.className = "button";
				
				button.onclick = $.proxy(this.onButtonPressed, this);
				
				control.appendChild(button);
				
			// fade in the images!
			
			}
			
			this.currentSelected = 0;
			this.buttons[this.currentSelected].select();
			this.sliderElement.appendChild(control);
		}
	}
	
	
	//// touches
	this.onButtonPressed = function(event)
	{
		var id = event.target.parentNode.rel;
		if(isNaN(id)) id = 0;
		event.target.parentNode.seleted = true;
		
		if(this.spring.tx == -id * this.imageWidth) return;
		
		this.spring.tx = -id * this.imageWidth;
		this.spring.x = this.position;
		this.spring.dx = 0//this.speed;
		
		this.updateButtons(id);
		this.startUpdating();
	}
	
	this.updateButtons = function(id)
	{
		this.buttons[this.currentSelected].deselect();
		this.currentSelected = id;
		this.buttons[this.currentSelected].select();	
	}
	
	this.onTouchStart = function(event)
	{
		this.startUpdating();
		
		ev = event || window.event;
		
	 	document.ontouchmove = $.proxy(this.onTouchMove, this);
		document.ontouchend = $.proxy(this.onTouchEnd, this);
		
		var x = event.touches[0].clientX;
		//if(isNaN(x))x = 0;
		//if(isNaN x == NaN)x = 0;
		this.dragging = true;
		this.dragOffset = x - this.position;
//		if(dragOffset == NaN)dragOffset = 0;
	}
	
	this.onTouchEnd = function(event)
	{
		document.ontouchmove = null;
		document.ontouchend = null;
		this.dragging = false;
		
		var remainder = (this.position/this.imageWidth) % this.imageWidth;
		remainder %= 1;
		var targetPosition =  Math.round(this.position/this.imageWidth) * this.imageWidth;
		
		if(this.speed > 10) 
		{
			if(remainder < -0.5)
			{
				targetPosition += this.imageWidth;
			}
		}
		else if(this.speed < -10)
		{
			if(remainder > -0.5)
			{
				targetPosition -= this.imageWidth;
			}
		}
		
		var tempNumber = targetPosition;
		tempNumber = Math.max(tempNumber, -(this.totalImages-1) * this.imageWidth);
		tempNumber = Math.min(tempNumber, 0);
		//if(isNaN(tempNumber))tempNumber = 0;
		if(isNaN(this.speed))this.speed = 0;
		
		this.spring.tx = tempNumber;
		this.spring.x = this.position;
		this.spring.dx = this.speed;
		
		var id = tempNumber / -this.imageWidth;
		this.updateButtons(id);
	}

	this.onTouchMove = function(event)
	{
		var x = event.touches[0].clientX;
		this.position = (x - this.dragOffset);
		
		if (this.position > 0) 
		{
			this.position -= (this.position - 0) / 2;
		}
		else if (this.position < -(this.totalImages-1)*this.imageWidth) 
		{
			this.position += (-(this.totalImages-1)*this.imageWidth - this.position) / 1.5;
		}
		
		this.setElementPosition();
	}
	
	////
	
	this.onMouseDown = function(event)
	{
		this.startUpdating();
		
		ev = event || window.event;
		var x = ev.pageX;
	//	if(x == NaN)x = 0;
		
		document.onmousemove = $.proxy(this.onMouseMove, this);	;
		document.onmouseup = $.proxy(this.onMouseUp, this);	
		
		this.dragging = true;
		this.dragOffset = x - this.position;
	}
	
	this.onMouseUp = function(event)
	{
		document.onmousemove = null;
		document.onmouseup = null;
		this.dragging = false;
		
		var remainder = (this.position/this.imageWidth) % this.imageWidth;
		remainder %= 1;
		var targetPosition =  Math.round(this.position/this.imageWidth) * this.imageWidth;
		
		if(this.speed > 10) 
		{
			if(remainder < -0.5)
			{
				targetPosition += this.imageWidth;
			}
		}
		else if(this.speed < -10)
		{
			if(remainder > -0.5)
			{
				targetPosition -= this.imageWidth;
			}
		}
		
		
		var tempNumber = targetPosition;
		tempNumber = Math.max(tempNumber, -(this.totalImages-1) * this.imageWidth);
		tempNumber = Math.min(tempNumber, 0);
		
		this.spring.tx = tempNumber;
		this.spring.x = this.position;
		this.spring.dx = this.speed;
		
		var id = tempNumber / -this.imageWidth;
		this.updateButtons(id);	
	}

	this.onMouseMove = function(event)
	{
		var ev = event || window.event;
		
		var x = ev.pageX;
		
		this.position = (x - this.dragOffset);
		
		if (this.position > 0) 
		{
			this.position -= (this.position - 0) / 2;
		}
		else if (this.position < -(this.totalImages-1)*this.imageWidth) 
		{
			this.position += (-(this.totalImages-1)*this.imageWidth - this.position) / 1.5;
		}
	
	}
	
	this.update = function ()
	{
		if(this.dragging)
		{
			this.speed = this.position - this.prevPosition;
			this.prevPosition = this.position;
		
		}
		else
		{
			this.spring.update();
			this.position += (this.spring.x - this.position ) * 0.3;
			
			if (Math.abs(this.position - this.easePosition) < 1) 
			{
				this.easePosition = this.position
				if (this.spring.isIdle()) 
				{
					this.stopUpdating();
				}
			}
		}
		
		//this.debuggerx.innerHTML = this.spring.tx + " : " + this.spring.x + " : " + this.spring.dx + " " +  this.dragOffset + " : " + this.position;
		
		
		this.setElementPosition();
	}
	
	this.setElementPosition = function()
	{
		this.easePosition += (this.position-this.easePosition)*0.3;
		
		switch(this.transformMode)
		{
			case 0:
				this.element.style["-webkit-transform"] = this.element.style["-moz-transform"] = "translate3d("+this.easePosition+"px, 0px, 0px)";
				break;
			case 1:
				this.element.style["-webkit-transform"] = this.element.style["-moz-transform"] = "translate("+this.easePosition+"px, 0px)";
			case 2:
				this.element.style.left = this.easePosition+"px";
		}
	}
	
	this.startUpdating = function()
	{
		if(isNaN(this.intervalID))this.intervalID = setInterval($.proxy(this.update, this), 1000/50);
	}
	
	this.stopUpdating = function()
	{
		clearInterval(this.intervalID);	
		this.intervalID = NaN;
	}
	
	this.init();
}

// SPRING CLASS!! WOOOOO
function Spring()
{
	this.x = 0;
	this.ax = 0;
	
	this.dx = 0;
	this.tx = 0;
	
	this.damp = 0.65;
	this.springiness = 0.08;
		
	this.update = function()
	{
		this.ax=(this.tx-this.x)*this.springiness;
		this.dx+=this.ax;
		this.dx*=this.damp; 
		this.x+=this.dx; 
	}
	
	this.isIdle = function()
	{
		if(Math.abs(this.x - this.tx) > 0.001)return false;
		if(Math.abs(this.ax) > 0.001)return false;
		if(Math.abs(this.dx) > 0.001)return false;
		
		return true;
	}
}

// BUTTON CLASS! 
function applyButton(element)
{
	this.element = element;
	this.element.selected = false;
	
	element.onmouseover = function()
	{
		this.style.opacity = 1;
	}
	
	element.onmouseout = function()
	{
		if(this.selected)return;
		this.style.opacity = 0.7;
	}
	
	element.select = function()
	{
		this.selected = true;
		this.style.opacity = 1;
	}
	
	element.deselect = function()
	{
		this.selected = false;
		this.style.opacity = 0.7;
	}
}