// FILENAME RELATED VARIABLES (must be global)
thumbSuffix = "_thumb.gif";
fullSuffix = "_full.jpg";


var keyword = "mandish";
var specialPort = "design.html";


// Nested Portfolio section arrays (calling from portfolioArrayTxt.js)
var portArray = new Array ();
portArray["Illustration"] = new Array (illustration_filenames, illustration_titles, illustration_descriptions);
portArray["Design"] = new Array (design_filenames, design_titles, design_descriptions);
portArray["Identity"] = new Array (identity_filenames, identity_titles, identity_descriptions);
portArray["Prints"] = new Array (prints_filenames, prints_titles, prints_descriptions);



///// FUNCTION THAT PERFORMS NAVIGATION AND LINK GENERATION FOR ENTIRE PORTFOLIO 
function browseFolio(picnum) {

if (portSection=="Illustration") { 
		portPath="port/illus/"; 
		document.images['portIllus'].src = "img/gui/bttn_port_illustration_on.gif";
}

if (portSection=="Design") { 
		portPath="port/design/"; 
		document.images['portDesign'].src = "img/gui/bttn_port_design_on.gif";
}

if (portSection=="Identity") { 
		portPath="port/id/"; 
		document.images['portIdentity'].src = "img/gui/bttn_port_identity_on.gif";
}

if (portSection=="Prints") { 
		portPath="port/prints/"; 
		document.images['portPrints'].src = "img/gui/bttn_port_prints_on.gif";
}


// COUNTER AND IF-STATEMENTS FOR NUMBER LINKS	
	i = "";
	i = (parseFloat(picnum)-1);

// VARIABLES TO FILL IN DIV CONTENT WITH INNER HTML	
	var imgBaseSrc = "img/" + portPath + portArray[portSection][0][i] + fullSuffix;
	var imgLink = "<a href=\"javascript:detailPop('" + imgBaseSrc + "');\">";
	if (portSection == "Identity") { 
		var imgPath = "<img name=\"portThumb\" class=\"portItem\" src=\"img/" + portPath + portArray[portSection][0][i] + thumbSuffix + "\">";
	} else {
		var imgPath = "<img name=\"portThumb\" class=\"portItem\" src=\"img/" + portPath + portArray[portSection][0][i] + thumbSuffix + "\" onMouseOver=\"thumbStatus('show');\" onMouseOut=\"thumbStatus('hide');\">";
		}
	var imgDesc = portArray[portSection][2][i];
	
	imgDesc = imgDesc.replace(/#Q/g,"\""); // string handling (change #Q to double quote)
	imgDesc = imgDesc.replace(/#q/g,"\'"); // string handling (change #q to single quote)
	
	zeroi = (parseFloat(i)+1);
	if (portSection == "Identity") {
		document.getElementById("portItemImg").innerHTML = "<div class=\"portItem\">" + imgPath + "</div>";
	} else { 
		document.getElementById("portItemImg").innerHTML = "<div class=\"portItem\">" + imgLink + imgPath + "</a></div>";
		}
	document.getElementById("portDesc").innerHTML = imgDesc;
}

function thumbStatus(visibility) {
	if (visibility == "show") document.getElementById("thumbFooter").innerHTML = "Click thumbnail to enlarge";
	if (visibility == "hide") document.getElementById("thumbFooter").innerHTML = "";
}

// FUNCTION THAT GENERATES THE NUMBER LINKS TO BROWSE THUMBNAILS
function writeThumbNav() {
	var itemCount = portArray[portSection][0].length;
	var markup;
	markup = "<table class=\"portNums\">\n";
	markup += "<tr><td>\n";
		for (i=1; i <= itemCount; i++) {
			if (i<10) {ii="0"+i} else {ii=i};
			markup +="<a id=\"thumb" + ii + "\" href=\"#\" class=\"\" onclick=\"browseFolio(" + ii + ");linkFlag(this);\">" + ii + "</a>\n";
		}
	markup += "</td></tr>\n";
	markup += "</table>";
	document.getElementById("portImgNav").innerHTML = markup;
}

// function to flag the numbers that have been clicked on
function linkFlag(linkName) {
	linkName.style.color='#999999';
}



// FUNCTION GENERATES NEW POP UP WINDOW FOR IMAGE
function detailPop(src) {

// must replace slashes and dots from string in order to use
// src variable as the window name when window.open() is called

	src = src.replace(/\//g,"SLSH");
	src = src.replace(/.jpg/,"DOTJPEG");

	galleryItem = window.open("portpopup.html", src ,"width=700,height=500,status=0,toolbar=0,scrollbars=0,resizable=0");
	galleryItem.window.focus();

}