var itemMax=data.length-1;
var itemLim=data.length;
var photoList = new Array();
var thumbList = new Array();
var photoStyle = new Array();
var photoInfo = new Array();
var thumbStyle = new Array();
var currentPhoto = 0;
var currentThumb = 0;
var imgPath;
var portfLayout;
var containerWidth  = 495-8;  // Photo container width  (border of 4px by 2 sides)
var containerHeight;  				//   "       "     height     "   "   "   " "   "   Nominally: 380-8
var thumbContainer  = 162-8;  // Thumbnail container width  (border of 4px by 2 sides)
var photoCurrent = -1;
var photoNode;
var area;
var commonNameNode;
var scientificNameNode;
var photographerNameNode;
var commonNode;
var scientificNode;
var photographerNode;
var captionNode;
var titleNode;
var copyNode;
var thumb0Area;
var thumb1Area;
var thumb2Area;
var thumb3Area;
var thumb4Area;
var thumb0img;
var thumb1img;
var thumb2img;
var thumb3img;
var thumb4img;
var thumbPrevNode;
var thumbNextNode;
// Thumbnail position management
var thumbMin = 0;
var thumbMax = itemLim-5;
var thumbCurrent = 0;

// Preload the photos and thumbnails
function imagePreLoad() {
	for (i=0; i<data.length; i++) {
		// Portfolio photos
		photoList[i]	= new Image(data[i].photoWidth, data[i].photoHeight);
		photoList[i].src = imgPath + data[i].photoName;
		// Portfolio thumbnails
		thumbList[i] = new Image(data[i].thumbWidth, data[i].thumbHeight);
		thumbList[i].src = imgPath + data[i].thumbName;
		// Photo and thumbnail styles
		photoStyle[i]= new Array();
		thumbStyle[i]= new Array();
		photoInfo[i]= new Array();
		photoStyle[i].top   = Math.floor((containerHeight- data[i].photoHeight)/2)+"px";
		photoStyle[i].left  = Math.floor((containerWidth - data[i].photoWidth)/2)+"px";
		photoStyle[i].width = data[i].photoWidth+"px";
		photoStyle[i].height= data[i].photoHeight+"px";
		thumbStyle[i].top   = Math.floor((thumbContainer - data[i].thumbHeight)/2)+"px";
		thumbStyle[i].left  = Math.floor((thumbContainer - data[i].thumbWidth)/2)+"px";
		thumbStyle[i].width = data[i].thumbWidth+"px";
		thumbStyle[i].height= data[i].thumbHeight+"px";
		// The photo information
		photoInfo[i].commonName = data[i].commonName;
		photoInfo[i].scientificName = data[i].scientificName;
		photoInfo[i].caption = data[i].caption;
		photoInfo[i].title = data[i].title;
		photoInfo[i].copy = data[i].copy;
		photoInfo[i].photographer = data[i].photographer;
	}
}

function prevLayer() {
	var prev = (photoCurrent==0) ? itemMax : photoCurrent-1;
	debug("prevLayer() photoCurrent = "+photoCurrent);
	display(prev);
}

function nextLayer() {
	var next = (photoCurrent==itemMax) ? 0 : photoCurrent+1;
	debug("nextLayer(): photoCurrent = "+photoCurrent);
	display(next);
}

function displayThumb(thumbNail) {
	var photo = thumbNail+thumbCurrent;
	//debug("mouseover 0: photo = "+photo);
	display(photo);
}

function prevThumb() {
	if (thumbCurrent == thumbMin) return;
	thumbCurrent-=5;
	if (thumbCurrent<thumbMin) thumbCurrent=thumbMin;
	//debug("prevThumb(): thumbCurrent="+thumbCurrent);
	displayThumbs();
}

function nextThumb() {
	if (thumbCurrent == thumbMax) return;
	thumbCurrent+=5;
	if (thumbCurrent>thumbMax) thumbCurrent=thumbMax;
	// debug("nextThumb(): thumbCurrent="+thumbCurrent);
	displayThumbs();
}

function highlightThumb() {
	thumb0Area.style.border=(photoCurrent==thumbCurrent)     ? '2px solid red':'2px solid #C0C0C0';
	thumb1Area.style.border=(photoCurrent==(thumbCurrent+1)) ? '2px solid red':'2px solid #C0C0C0';
	thumb2Area.style.border=(photoCurrent==(thumbCurrent+2)) ? '2px solid red':'2px solid #C0C0C0';
	thumb3Area.style.border=(photoCurrent==(thumbCurrent+3)) ? '2px solid red':'2px solid #C0C0C0';
	thumb4Area.style.border=(photoCurrent==(thumbCurrent+4)) ? '2px solid red':'2px solid #C0C0C0';
}

function display(item) {
	if (photoCurrent == item) return;
	photoCurrent = item;
	if (this.onload) this.onload();
	area.style.top = photoStyle[item].top;
	area.style.left = photoStyle[item].left;
	area.style.width = photoStyle[item].width;
	area.style.height= photoStyle[item].height;
	photoNode.src=photoList[item].src;
	photoNode.width=photoList[item].width;
	photoNode.height=photoList[item].height;
	// Photo information display box update
	if (portfLayout=='nature') {
		commonNameNode.data=(photoInfo[item].commonName=="") ? "" : "Common Name:";
		scientificNameNode.data=(photoInfo[item].scientificName=='') ? '' : 'Scientific Name:';
		photographerNameNode.data=(photoInfo[item].photographer=='') ? '' : 'Photographer:';
		commonNode.data=photoInfo[item].commonName;
		scientificNode.data=photoInfo[item].scientificName;
		photographerNode.data = photoInfo[item].photographer;
		captionNode.data = photoInfo[item].caption;
	} else if (portfLayout=='general') {
		titleNode.data = photoInfo[item].title;
		copyNode.data = photoInfo[item].copy;
		photographerNameNode.data=(photoInfo[item].photographer=='') ? '' : 'Photographer:';
		photographerNode.data = photoInfo[item].photographer;
	}
	highlightThumb();
}

function displayThumbs() {
	thumbPrevNode.style.visibility = (thumbCurrent==thumbMin) ? 'hidden' : 'visible';
	thumbNextNode.style.visibility = (thumbCurrent==thumbMax) ? 'hidden' : 'visible';
	if (this.onload) this.onload();
	thumb0Area.style.top = thumbStyle[thumbCurrent].top;
	thumb0Area.style.left = thumbStyle[thumbCurrent].left;
	thumb0Area.style.width = thumbStyle[thumbCurrent].width;
	thumb0Area.style.height= thumbStyle[thumbCurrent].height;
	thumb0img.src=thumbList[thumbCurrent].src;
	thumb0img.width=thumbList[thumbCurrent].width;
	thumb0img.height=thumbList[thumbCurrent].height;
	thumb1Area.style.top = thumbStyle[thumbCurrent+1].top;
	thumb1Area.style.left = thumbStyle[thumbCurrent+1].left;
	thumb1Area.style.width = thumbStyle[thumbCurrent+1].width;
	thumb1Area.style.height= thumbStyle[thumbCurrent+1].height;
	thumb1img.src=thumbList[thumbCurrent+1].src;
	thumb1img.width=thumbList[thumbCurrent+1].width;
	thumb1img.height=thumbList[thumbCurrent+1].height;
	thumb2Area.style.top = thumbStyle[thumbCurrent+2].top;
	thumb2Area.style.left = thumbStyle[thumbCurrent+2].left;
	thumb2Area.style.width = thumbStyle[thumbCurrent+2].width;
	thumb2Area.style.height= thumbStyle[thumbCurrent+2].height;
	thumb2img.src=thumbList[thumbCurrent+2].src;
	thumb2img.width=thumbList[thumbCurrent+2].width;
	thumb2img.height=thumbList[thumbCurrent+2].height;
	thumb3Area.style.top = thumbStyle[thumbCurrent+3].top;
	thumb3Area.style.left = thumbStyle[thumbCurrent+3].left;
	thumb3Area.style.width = thumbStyle[thumbCurrent+3].width;
	thumb3Area.style.height= thumbStyle[thumbCurrent+3].height;
	thumb3img.src=thumbList[thumbCurrent+3].src;
	thumb3img.width=thumbList[thumbCurrent+3].width;
	thumb3img.height=thumbList[thumbCurrent+3].height;
	thumb4Area.style.top = thumbStyle[thumbCurrent+4].top;
	thumb4Area.style.left = thumbStyle[thumbCurrent+4].left;
	thumb4Area.style.width = thumbStyle[thumbCurrent+4].width;
	thumb4Area.style.height= thumbStyle[thumbCurrent+4].height;
	thumb4img.src=thumbList[thumbCurrent+4].src;
	thumb4img.width=thumbList[thumbCurrent+4].width;
	thumb4img.height=thumbList[thumbCurrent+4].height;
	highlightThumb();
}

function init(portfolio,layout,height) {
	var cnh;
	var snh;
	var pnh;
	var photographerName;
	imgPath = "images/"+portfolio+"/";
	portfLayout=layout;
	containerHeight=height-8;
	imagePreLoad();
	thumbPrevNode = document.getElementById('thumbPrev');
	thumbNextNode = document.getElementById('thumbNext');
	// Portfolio photo (1 ea.)
	var img= document.createElement('img');
	var container  =document.createElement('div');
	container.style.position = 'relative';
	area = document.getElementById('photoArea');
	area.className = 'photoArea photoAreaActive';
	area.appendChild(container);
	photoNode = container.appendChild(img);
	// Portfolio thumbnails (5 ea.)
	var thumbImg0=document.createElement('img');
	thumb0Area=document.getElementById('thumb0');
	thumb0img=thumb0Area.appendChild(thumbImg0);
	var thumbImg1=document.createElement('img');
	thumb1Area=document.getElementById('thumb1');
	thumb1img=thumb1Area.appendChild(thumbImg1);
	var thumbImg2=document.createElement('img');
	thumb2Area=document.getElementById('thumb2');
	thumb2img=thumb2Area.appendChild(thumbImg2);
	var thumbImg3=document.createElement('img');
	thumb3Area=document.getElementById('thumb3');
	thumb3img = thumb3Area.appendChild(thumbImg3);
	var thumbImg4= document.createElement('img');
	thumb4Area=document.getElementById('thumb4');
	thumb4img = thumb4Area.appendChild(thumbImg4);
	// Photo information display box inits
	if (portfLayout=='nature') {
		cnh=document.getElementById('commonNameHeading');
		commonNameNode=cnh.appendChild(document.createTextNode("Common Name:"));
		snh=document.getElementById('scientificNameHeading');
		scientificNameNode=snh.appendChild(document.createTextNode("Scientific Name:"));
		pnh=document.getElementById('photographerNameHeading');
		photographerNameNode=pnh.appendChild(document.createTextNode("Photographer:"));
		var commonName=document.getElementById('commonNameText');
		commonNode=commonName.appendChild(document.createTextNode("common"));
		var scientificName=document.getElementById('scientificNameText');
		scientificNode=scientificName.appendChild(document.createTextNode("scientific"));
		photographerName=document.getElementById('photographerNameText');
		photographerNode=photographerName.appendChild(document.createTextNode("photographer"));
		var captionName=document.getElementById('captionText');
		captionNode=captionName.appendChild(document.createTextNode("caption"));
	} else if (portfLayout=='general') {
		var titleName=document.getElementById('titleText');
		titleNode=titleName.appendChild(document.createTextNode("title"));
		var copyName=document.getElementById('copyText');
		copyNode=copyName.appendChild(document.createTextNode("copy"));
		pnh=document.getElementById('photographerNameHeading');
		photographerNameNode=pnh.appendChild(document.createTextNode("Photographer:"));
		photographerName=document.getElementById('photographerNameText-g');
		photographerNode=photographerName.appendChild(document.createTextNode("photographer"));
	}
	// Now its okay to display the photos and thumbnails
	displayThumbs(thumbCurrent);
	display(0);
	// Activate the events....
	addEvent(thumbPrevNode,'click',new Function('prevThumb(); return false'));
	addEvent(thumbNextNode,'click',new Function('nextThumb(); return false'));
	addEvent(thumb0img,'mouseover',new Function('displayThumb(0); return false'));
	addEvent(thumb1img,'mouseover',new Function('displayThumb(1); return false'));
	addEvent(thumb2img,'mouseover',new Function('displayThumb(2); return false'));
	addEvent(thumb3img,'mouseover',new Function('displayThumb(3); return false'));
	addEvent(thumb4img,'mouseover',new Function('displayThumb(4); return false'));
}

// This is a standard event-adding function.....
//  o = object to which we're attaching an event.
//  i = identifier of event, without the 'on' prefix, e.g. 'click' or 'mouseover'.
//  f = function reference, to run on the event.
//  l = whether to capture events in NS4 (true/false).
function addEvent(o, n, f, l) {
	var a = 'addEventListener', h = 'on'+n;
	if (o[a] && !l) return o[a](n, f, false);
	if (o[h]) {
		o._c |= 0;
		var b = '_b' + (++o._c);
		o[b] = o[h];
	}
	o[h] = function(e)
	{
	e = e || self.event;
	var r = true;
	if (o[b]) r = o[b](e) != false && r;
	o._f = f;
	r = o._f(e) != false && r;
	return r;
	}
};