$(document).ready(function() {

// adds class to body for js specific styling	
	$("body").addClass("js");

// cycle images
	$('#images').cycle({ 
    	fx:    'fade', 
    	speed:  2500,
		random:  1
	});
	
	$('#artwork').cycle({ 
    	fx:    'fade', 
    	speed:  2000,
		random:  1
	});

// ticker settings
	magScroller = new MagicScroller(document.getElementById("ticker") , null , null);
	// The place the first element will be (set it to the width to have them scroll on completely)
	magScroller.initialX = 300;
	magScroller.width = 300;
	magScroller.height = 20;
	magScroller.iconUpdateSpeed = 20;
	magScroller.xIconSpacing = 20;
	
	magScroller.init();
	magScroller.startScrolling();
	
});

// Magic Scroller, by Dave Preece.
function MagicScroller(targetObj , prev , next){
	this.height = 90;
	this.width = 610;
	this.xIconSpacing = 40;
	this.initialX = 0;
	// products is an indexed array of associative arrays.  Each position has three values - o (object), x (left) and width
	// x and width are kept here instead of using Moo's get stlye because getComputedStyle is quite slow for some reason.
	// So we cache the values here.
	
	this.iconScrollSpeed = 1;
	this.iconScrollMultiplier = 8;
	// How quickly setinterval fires
	this.iconUpdateSpeed = 20;
	// Careful about putting the speed adjuster below 1... there's an odd rounding issue
	this.speedAdjuster = 1;
	// The speed we're aiming for
	this.targetSpeed = 1;
	// The minimum the speed will get to (negative too)
	this.slowSpeed = 0;
	// the highest the speed will get to (negative too)
	this.fastSpeed = 8;
	this.onFirstScrollComplete = null;
	this.firstScrollCalled = false;
	var scrollInt;
	var productsMC = targetObj;
	var prevButton = prev;
	var nextButton = next;
	var products; // array
	
	this.init = function(){
		var host = this;
		
		products = new Array();
	
		var cNode
		var len
		
		for(a = 0; a < targetObj.childNodes.length; a++){
			cNode = targetObj.childNodes[a];
			
			// We only want nodes type 1
			if(cNode.nodeType == 1){
				products.push(new Array());
				len = products.length - 1;
				products[len]['o'] = cNode;
			
				products[len]['width'] = cNode.clientWidth;
			}
		}
		
		
		// Event Handlers
		
		if(prevButton){
			prevButton.addEvent('mousedown' , function(){host.startScrolling();host.makeSpeedFast(false);});
			prevButton.addEvent('mouseup' , function(){host.makeSpeedSlow(false);});
																			   
		}
			
		if(nextButton){
			nextButton.addEvent('mousedown' , function(){host.startScrolling();host.makeSpeedFast(true);});
			nextButton.addEvent('mouseup' , function(){host.makeSpeedSlow(true);});
		}
	
		
		this.layoutIcons();
	}
	
	this.checkonFirstScrollComplete = function(){
		// WARNING! THIS WILL ONLY WORK IF THE DIRECTION OF SCROLL IS LEFT! ***************
		if(this.firstScrollCalled || !this.onFirstScrollComplete){
			return;
		}
		
		if(this._gX(products.length - 1) + this._gWidth(products.length - 1) <= 5){
			this.onFirstScrollComplete();
			this.firstScrollCalled = true;
		}
		
	}
	
	this.layoutIcons = function(){
		var cumX = this.initialX;
		var cMc;
		
		for(var a = 0; a < products.length; a++){
			
			cMc = products[a]['o'];
			this._sX(a , cumX)
			cumX += this._gWidth(a) + this.xIconSpacing;
			
		}
		
	}
	
	this.stopScrolling = function(){
		window.clearInterval(scrollInt);
		//iconScrollSpeed - targetSpeed;
	}
	
	this.scrollIcons = function(){
		if(this.iconScrollSpeed > this.targetSpeed){ this.iconScrollSpeed = Math.max(this.targetSpeed , this.iconScrollSpeed - this.speedAdjuster); }
		if(this.iconScrollSpeed < this.targetSpeed){ this.iconScrollSpeed = Math.min(this.targetSpeed , this.iconScrollSpeed + this.speedAdjuster); }
		
		var lIcon = this.iconScrollSpeed > 0 ? products[products.length - 1]['o'] : products[0]['o'];
		var lIconNum = this.iconScrollSpeed > 0 ? products.length - 1 : 0;
		
		var cIcon;
		var sPoint = this.iconScrollSpeed > 0 ? 0 : products.length - 1 ;
		var ePoint = this.iconScrollSpeed > 0 ? products.length + 1  : 0;
		var increment = this.iconScrollSpeed > 0 ? 1 : -1;
		
		
		for(var a = sPoint; a != ePoint - 1; a += increment){
			cIcon = products[a]['o'];
			
			
			this._sX(a , this._gX(a) - this.iconScrollSpeed);
			
			
			if(this.iconScrollSpeed > 0){
				
				// Right to left
				if(this._gX(a) + (this._gWidth(a)) <= 0){
					this._sX(a ,  Math.max(this.width , this._gX(lIconNum) + this._gWidth(lIconNum) + this.xIconSpacing));
				}
			}else{
				// left to right
				if(this._gX(a) >= this.width){
					this._sX(a , Math.min(-this._gX(a) , this._gX(lIconNum) - this._gWidth(a) - this.xIconSpacing));
				}
			}
			
			lIcon = cIcon;
			lIconNum = a;
		

		}
		this.checkonFirstScrollComplete();
	}
		
		this._gX = function(num){
			return parseInt(products[num]['x']);
		}
		
		this._gWidth = function(num){
			return parseInt(products[num]['width']);
		}
		
		this._sX = function(num , v){
			products[num]['x'] = v;
			products[num]['o'].style.left =  v + 'px';
		}
		
		this._sWidth = function(num , v){
			products[num]['width'] = v;
			products[num]['o'].style.width = v + 'px';
		}
		
		
	this.makeSpeedFast = function(dir){
		if(dir){
			this.targetSpeed = this.fastSpeed;
			return;
		}
		this.targetSpeed = -this.fastSpeed;
	}
	
	this.makeSpeedSlow = function(dir){
		if(dir){
			this.targetSpeed = this.slowSpeed;
			return;
		}
		this.targetSpeed = -this.slowSpeed;
	}
	
	this.startScrolling = function(){
		this.stopScrolling();
		var host = this;
		scrollInt = window.setInterval(function(){host.scrollIcons();} , this.iconUpdateSpeed);
	}

}