/* product_feature.js
 * based on imgNav.js
 * dependencies: prototype.js (1.5.1)
 */
 
Event.observe(window, 'load', imgNavInit, false);

function imgNavClass(){
	this.currImg = 1;
	this.imgSetLength = $$('div#imgContainer img').length;
	this.animating = false;
	
	this.goNext = function(){
		if((this.currImg) < this.imgSetLength && this.animating==false){
			this.animating=true;
			this.nextIdx = this.currImg + 1
			this.pointA = "img_feat_" + this.currImg;
			this.pointB = "img_feat_" + this.nextIdx;
			this.moveIt(this.pointA,this.pointB);
			this.updateDesc(this.nextIdx);
			this.currImg++;
			this.updateNavIdx();
			this.updateThumbState();
		}
	}
	
	this.goBack = function(){
		if(this.currImg > 1 && this.animating==false){
			this.animating=true;
			this.nextIdx = this.currImg - 1
			this.pointA = "img_feat_" + this.currImg;
			this.pointB = "img_feat_" + this.nextIdx;
			this.moveIt(this.pointA,this.pointB);
			this.updateDesc(this.nextIdx);
			this.currImg--;
			this.updateNavIdx();
			this.updateThumbState();
		}
	}
	
	this.jumpTo = function(destImgIdx){
		if(this.animating==false){
			this.animating=true;
			this.pointA = "img_feat_" + this.currImg;
			this.pointB = "img_feat_" + destImgIdx;
			this.moveIt(this.pointA,this.pointB);
			this.updateDesc(destImgIdx);
			this.currImg = destImgIdx;
			this.updateNavIdx();
			this.updateThumbState();
		}
	}
	
	this.getRange = function(a,b){
		return ($(a).offsetLeft - $(b).offsetLeft);
	}
	
	this.moveIt = function(a,b){
		new Effect.Move('imgContainer',{x:this.getRange(a,b),y:0, mode:'relative', afterFinish: this.holdIt.bind(this)});
	}
	
	this.holdIt = function(){
		this.animating=false;
	}
	
	this.updateDesc = function (theIdx) {
		this.descID = "desc" + theIdx;
		$('descs').style.top = ($(this.descID).offsetTop * -1) + "px";
	}
	
	this.updateNavIdx = function (){
		$('displayCount').innerHTML = (this.currImg) + "/" + this.imgSetLength;
	}
	
	this.updateThumbState = function(){
		this.thumbs = $$('div#nav_thumbs div');
		for (var i = this.thumbs.length - 1; i >= 0; i--){
			this.thumbs[i].removeClassName('down');
		}
		this.thumbs[this.currImg - 1].addClassName('down');
	}
	
	this.fakeHoverOver = function(idx){
		this.thumbs = $$('div#nav_thumbs div');
		this.thumbs[idx].addClassName('over');
	}
	
	this.fakeHoverOut = function(idx){
		this.thumbs = $$('div#nav_thumbs div');
		this.thumbs[idx].removeClassName('over');
	}
}

function imgNavInit () {
	imgNav = new imgNavClass();
}