/*
PORTFOLIO section image navigation.
see imgNav.js
*/
var ImgObjs;
var imgTarg;
var cIndex; 
cIndex = window.location.hash.substr(1);

if(!window.location.hash){
	cIndex = 1;
}

function gotoHash(){
	window.location = "index.html#" + cIndex;
}

function init(){
	imgTarg = document.getElementById("imgTarget");
	ImgObjs = new ImgNavObject();
	var i=1;	
	var who = document.getElementById("img"+i);
	if(who == null) return; 
	while(who != null){
		ImgObjs.addObj(who, i)
		i++;
		who = document.getElementById("img"+i);
	}
	ImgObjs.init();
}

/// Wrapper Object for nav objects
function ImgNavObject(){
	this.divs = new Array();
	this.objs = new Array();
	this.active = null;
}
ImgNavObject.prototype.addObj = function(who,index){
	this.divs[this.divs.length] = new Array(who,index);	
}
ImgNavObject.prototype.init = function(){
	for(var i = cIndex - 1; i < this.divs.length; i++){
		this.objs[i] = new ImgObj(this, this.divs[i]);
	}
	for(var i = 0; i < cIndex; i++){
		this.objs[i] = new ImgObj(this, this.divs[i]);
	}
	this.objs[0].unset();
	this.active = this.objs[cIndex-1];	
	this.objs[cIndex-1].set();
}
ImgNavObject.prototype.set = function(who){
	if(this.active != who){
		this.active.unset();
		this.active = who;
	}
}

//// Nav Object
function ImgObj(parent, what){
	this.toString = function() { return  "ImgObj["+ this.index +"]" ; }
	this.parent = parent;
	this.div = what[0];
	this.index = what[1];
	this.borderColorOn = "#ffffff";
	this.borderColorOff = "#b8bc9b";
	this.bgColorOn = "#434c1e";
	this.bgColorOff = "#122506";

	this.init();
}
ImgObj.prototype.init = function (){
	this.img = new Image();
	this.img.obj = this;
	
	// Safari's onload is screwed up for off-screen images; fix.
	// test for img.width let's me know if image is already loaded/cached.
	if (navigator.userAgent.toLowerCase().indexOf('safari') != - 1 || this.img.width) {
		this.activate();
	} else {
		this.img.onload = function(){ this.obj.onloaded(); };
		this.img.onerror = function(){ this.obj.onerred(); };
	}	
	this.img.src = "big_images/i" + this.index + "_" + document.getElementById("ImgTitle").value + ".jpg";
}

ImgObj.prototype.set = function (){
	this.parent.set(this);
	imgTarg.src = this.img.src;
	this.div.style.borderColor = this.borderColorOn;
	this.div.style.backgroundColor = this.bgColorOn;
	
	cIndex = this.index;
}
ImgObj.prototype.unset = function (){
	this.div.style.borderColor = this.borderColorOff;
	this.div.style.backgroundColor = this.bgColorOff;
}

ImgObj.prototype.onloaded = function (){
	this.activate();
}
ImgObj.prototype.onerred = function (){
	this.div.style.display = "none";
}
ImgObj.prototype.activate = function (){
	if(this.index != cIndex) this.unset();
	this.div.style.cursor = "pointer";
	this.div.obj = this;
	this.div.onmouseover = function(){
		this.obj.set();	
	}
}


window.onload = function() { init();};