var selectedPortfolioPiece = 0;
var switchImage;
var switchThumbImage;
//var BASE_URL = "/metrik"; //BETA
var BASE_URL = ""; //LIVE

window.onload = initPortfolio;

function initPortfolio(){

	var nav = document.getElementById('PortfolioNav');
	var aTags = nav.getElementsByTagName('a');
	for (var i=0;i<aTags.length;i++)
	{
		aTags[i].onclick = loadPortfolioPiece;
	}
}

function loadPortfolioPiece(){

	projectID = String(this.id);
	projectID = projectID.replace("Item","");
	projectID = projectID.replace("Link","");

	//Don't do anything if the clicked item is already selected.
	if (document.getElementById("Item"+projectID+"Link").className == "selected")
	{
		return false;
	}
	else
	{
		var http = new createRequestObject();

		http.open("GET", BASE_URL+"/getcustomworkpiece.php?id="+projectID);
		http.onreadystatechange = displayPortfolioPiece;
		http.send(null);

		selectedPortfolioPiece = projectID;
	}

	function displayPortfolioPiece(){
		if (http.readyState == 4)
		{
			//'De-select' the current portfolio item
			var nav = document.getElementById('PortfolioNav');
			var liTags = nav.getElementsByTagName('li');

			for (i=0; i<liTags.length; i++)
			{
				liTags[i].className = "";
				//Reset the innerHTML to make sure there's a link.
				currentInnerHTML = String(liTags[i].innerHTML);

				if (String(currentInnerHTML.toLowerCase()).indexOf('<a') < 0 )
				{
					//Get the ID of the Selected LI
					liID = liTags[i].id;
					projectNumber = String(liID).replace("ListItem", "");
					document.getElementById(liID).innerHTML = '<a href="'+BASE_URL+'/custom-work/projects/'+projectNumber+'/" id="Item'+projectNumber+'Link"><span id="Item'+projectNumber+'Desc" class="outerSpan">'+currentInnerHTML+'<span class="innerSpan"></span></span></a>';

					//Give the newly created a tag an onclick handler;
					document.getElementById('Item'+projectNumber+'Link').onclick = loadPortfolioPiece;
				}
			}

			parts = String(http.responseText).split("##--##");

			//Change the class to selected for the selected portfolio piece and make sure there's only text in the list item.
			document.getElementById("ListItem"+projectID).innerHTML = "";
			document.getElementById("ListItem"+projectID).className = "selected";

			//If the dark text variable is set, set the class on the Description layer.
			if (parseInt(parts[6]) == 1)
			{
				document.getElementById("PortfolioDescription").className = "darktext";
			}
			else
			{
				//If not, make sure there is no class name
				document.getElementById("PortfolioDescription").className = "";
			}

			//Replace the text...
			document.getElementById("PortfolioDescription").innerHTML = "<h2>"+parts[0]+"</h2>\n"
				+ "<p>"+parts[1]+"</p>\n"
				+ "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\">\n"
				+ "<tr>\n"
				+ "<td class=\"leftcol\"><strong>Materials:</strong></td>\n"
				+ "<td>"+parts[2]+"</td>\n"
				+ "</tr>\n"
				+ "</table>\n"
				+ "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\">\n"
				+ "<tr>\n"
				+ "<td class=\"leftcol\"><strong>Price:</strong></td>\n"
				+ "<td>"+parts[3]+"</td>\n"
				+ "</tr>\n"
				+ "</table>\n";

			//Fade out the images:
			new Effect.Fade('PortfolioThumb', {duration:.25, queue: {scope: 'port_fade'}});
			new Effect.Fade("PortfolioImage", {duration: .5, queue: {scope: 'port_fade', position: 'end'}});

			//Show the portfolio thumb
			switchThumbeImage = setTimeout("displayThumbImage('"+parts[4]+"');", 1000);
			switchImage = setTimeout("displayLargeImage('"+parts[5]+"');", 1200);

			//Put the text back into the Selected List Item
			document.getElementById("ListItem"+projectID).innerHTML = parts[0];
		}
	}

	return false;
}

function displayThumbImage(smallImage){
	//Replace the thumbnail...
	document.getElementById("PortfolioThumb").innerHTML = "<img src=\""+BASE_URL+"/images/custom-work/small/"+smallImage+"\" alt=\""+parts[0]+"\" />\n";

	//Fade in
	new Effect.Appear('PortfolioThumb', {duration:.25, queue: {scope: 'port_thumb_appear'}});
}
function displayLargeImage(largeImage){
	//Replace the large image
	document.getElementById("PortfolioImage").innerHTML = "<img src=\""+BASE_URL+"/images/custom-work/large/"+largeImage+"\" alt=\"\" width=\"932\" height=\"576\" />\n";
	
	//Fade in
	new Effect.Appear("PortfolioImage", {duration:.5, queue: {scope: 'port_image_appear'}});
}

function createRequestObject(){
	var ro;

	try
	{
		ro = new XMLHttpRequest();
	}
	catch (error)
	{
		try
		{
			ro = new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch (error)
		{
			return false;
		}
	}

	return ro;
}