// JavaScript Document
function MagicScroller(targetObj , prev , next){
	this.height = 90;
	this.width = 661;
	this.xIconSpacing = 0;
	this.errorReporting = false;
	// 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.onItemMouseOver = null;
	this.onItemMouseOut = null;
	this.onInitialised = null;
	
	this.iconScrollSpeed = 0;
	this.iconScrollMultiplier = 8;
	// How quickly setinterval fires
	this.iconUpdateSpeed = 40;
	// 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 = 1;
	// the highest the speed will get to (negative too)
	this.fastSpeed = 8;

	var scrollInt;
	var productsMC = targetObj;
	var prevButton = prev;
	var nextButton = next;
	var products; // array
	var initCalled;
	var numLoaders = 0;
	var numLoaded = 0;
	var initFinished;
	
	this.init = function(){
		if(initCalled){return;}
		initCalled = true;
		
		var host = this;
		var imgArr = targetObj.getElementsByTagName("img");
		var cImage;
		
		// Loads the images in.. Safari 3 gets get clientWidth / offsetWidth wrong on divs with unloaded images (even if they have an explicit width attribute)
		
		
		for(var a = 0; a < imgArr.length; a++){
			cImage = imgArr[a];
			
			if(!cImage.complete){
				numLoaders++;
				
				imgArr[a].onload = function(){
					host.imgLoaded();
				}
			}
		}
		
		if(numLoaders == 0){
			host.begin();
		}
	
	}
	
	this.imgLoaded = function(){
		var host = this;
		
		numLoaded++;
		
		if(numLoaded == numLoaders){
			host.begin();
		}
	}
	
	this.begin = 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'] = parseInt(cNode.offsetWidth);
				
				// abstract these into addeventlisteners
				if(this.onItemMouseOver){
					cNode.onmouseover = function(){ host.onItemMouseOver(this); };
				}
				
				if(this.onItemMouseOut){
					cNode.onmouseout = function(){ host.onItemMouseOut(this); }
				}
			
			}
		}
		// Event Handlers
		if(prevButton){
			prevButton.onmouseover = function(){host.startScrolling();host.makeSpeedFast(false);};
			prevButton.onmouseout = function(){host.makeSpeedSlow(false);};
																			   
		}
		
		if(nextButton){
			
			nextButton.onmouseover = function(){host.startScrolling();host.makeSpeedFast(true);};
			nextButton.onmouseout = function(){host.makeSpeedSlow(true);};
		}
		
		
		this.layoutIcons();
	}
	
	
	this.layoutIcons = function(){
		var cumX = 0;
		var cMc;
		
		for(var a = 0; a < products.length; a++){
			
			cMc = products[a]['o'];
			this._sX(a , cumX)
			cumX += this._gWidth(a) + this.xIconSpacing;
			
		}
		initFinished = true;
		
		if(this.onInitialised){
			this.onInitialised(this);
		}
	}
	
	this.stopScrolling = function(){
		window.clearInterval(scrollInt);
		//iconScrollSpeed - targetSpeed;
	}
	
	this.scrollIcons = function(){
		if(!initFinished){ return; }
		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) + this.xIconSpacing) <= 0){
					this._sX(a ,  this._gX(lIconNum) + this._gWidth(lIconNum) + this.xIconSpacing);
				}
			}else{
				// left to right
				if(this._gX(a) >= this.width){
					this._sX(a , this._gX(lIconNum) - this._gWidth(a) - this.xIconSpacing);
				}
			}
			
			lIcon = cIcon;
			lIconNum = a;
		
		}
		
	}
		
		this._gX = function(num){
			return parseInt(products[num]['x']);
		}
		
		this._gWidth = function(num){
			
			return parseInt(products[num]['o'].offsetWidth);
		}
		
		this._sX = function(num , v){
			var obj = products[num]['o'];
			
			products[num]['x'] = v;
			
			try{
				obj.style.left = (v + "px");
			}catch(e){
				this.doError('couldn\'t set left property ' + v); 
			}
		}
		
		this._sWidth = function(num , v){
			var obj = products[num]['o'];
			products[num]['width'] = v;
			
			try{
				obj.style.width = (v + "px");
			}catch(e){
				this.doError('couldn\'t set width property ' + v); 
			}
		}
		
		
	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(){
		if(!initFinished){ return; }
		this.stopScrolling();
		var host = this;
		scrollInt = window.setInterval(function(){host.scrollIcons();} , this.iconUpdateSpeed);
	}
	
	this.doError = function(msg){
		if(!this.errorReporting){ return; }
		
		alert(msg);
	}
}