/*
PORTFOLIO section image navigation.

Dynamically implements image navigation based on structure of the document.
Parses document for div tags with sequential ids: img1, img2, ... img10
e.g., <div id="img1"></div>
Images are named sequentially, i1.jpg, i2.jpg, ... i10.jpg 
and located in the "small_images" and "big_images" folders.

As images load their corresponding nav element becomes active.
If an image fails to load, its nav element remains inactive.

Uses hash of the url to decide which image to display when page is loaded,
e.g. index.html#3 would show img3 first.
This provides a means of communication between the index.html and the images.html pages.
Whichever image is visible when you click "View Larger Images" will be displayed in images.html
when it loads, and vice versa.
*/
var ImgObjs;
var imgTarg;
var cIndex; 
cIndex = window.location.hash.substr(1);

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

function gotoHash(){
	window.location = "images.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);	
	//this.divs.push([who,index]);	// NOT SUPPORTED BY IE ON MAC!!!!!
}
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 = "#e9c4be";
	this.borderColorOff = "#f6e4cd";
	this.bgColorOn = "#d4891d";
	this.bgColorOff = "#eeca9c";
	this.img;
	this.init();
}
ImgObj.prototype.init = function (){
	this.img = new Image();
	this.img.src = "small_images/i" + this.index + "_" + document.getElementById("ImgTitle").value + ".jpg";
	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(); };
	}
}

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 (){
	if(this.index !=1) this.div.style.display = "none";
}
ImgObj.prototype.activate = function (){
	if(this.index !=1) this.unset();
	this.div.style.cursor = "pointer";
	this.div.obj = this;
	this.div.onmouseover = function(){
		this.obj.set();	
	}
}


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