var gHostName;

// define class to load store data into xml via ajax
function loadStoreEO() 
{
	//this.gHostNameEO = 'http;'
	getHostName();
	this.gHostNameEO = gHostName;
	this.gFileNameEO = '/data/actors.xml'; // change this back to /data/actors.xml for DS site
	//this.gFileNameEO = '/pla/data/actors.xml'; // change this back to /data/actors.xml for DS site Look Here XXX GR
	this.outfitsArray;
	this.totalOutfits;
	this.initialInstructionsToCustomer;
	this.leftThumbnailIndex = -1;
	this.selectedOutfitIndex = -1;	// the outfit index from the outfitsArray
	this.thumbnailBorderColor = "#444444";
	this.thumbnailSelectedBorderColor = "#ff3333";
	this.autoThumbnailSelected = 1;
	this.continueAutoPlay = false; // set to false now since video may be present, let user show the pictures at their speed
}


// load the data from the server into a hashtable with key being counter (0,1,.. numOutfits-1)
loadStoreEO.prototype.loadServerXMLDataIntoStoreArray = function(xmlData)
{
	this.outfitsArray = new Array();
	
	//var store = xmlData.getElementsByTagName("pictures");
	var inventory = xmlData.getElementsByTagName("inventory");
	var pictures = inventory[0].getElementsByTagName("picture"); 
	var tmpName, tmpDesc,tmpThumbnailimage,tmpActorimage;

	for(var ii=0; ii < pictures.length; ii++)
	{
		tmpName = convertXMLCheckForNull(pictures[ii].getElementsByTagName("caption")[0].childNodes[0]);
		if (tmpName.trim().length == 0)
			tmpName = "&nbsp;"
		tmpDesc = convertXMLCheckForNull(pictures[ii].getElementsByTagName("description")[0].childNodes[0]);
		tmpThumbnailimage = convertXMLCheckForNull(pictures[ii].getElementsByTagName("thumbnailimage")[0].childNodes[0]);
		tmpActorimage = convertXMLCheckForNull(pictures[ii].getElementsByTagName("actorimage")[0].childNodes[0]);
		this.outfitsArray[ii] = {"name" : tmpName, "thumbnailimage": tmpThumbnailimage, "actorimage": tmpActorimage};
	}
	
	// initialize into outfitsArray
	this.totalOutfits = this.outfitsArray.length;
	this.leftThumbnailIndex = 0; 
	this.showThumbnails();
	this.autoPlay();
	this.displayOutfit(0,1);
};

loadStoreEO.prototype.autoPlay = function()
{
	if (this.continueAutoPlay == true)
	{
		if (this.autoThumbnailSelected > 6)
		{
			this.changeThumbnails('advance');
			this.autoThumbnailSelected = 1;
		}
		var tmpBorderName = 'thumbtable' + this.autoThumbnailSelected;
		var theBorder = document.getElementById(tmpBorderName);
		this.displayOutfit(parseInt(this.autoThumbnailSelected)-1,theBorder);
		this.autoThumbnailSelected = parseInt(this.autoThumbnailSelected) + 1;
		
		setTimeout('myLoadStoreEO.autoPlay()',7000);
	}
	
}

loadStoreEO.prototype.stopAutoPlay = function()
{
	this.continueAutoPlay = false;
}


loadStoreEO.prototype.showThumbnails = function()
{
	var ii, tmpSrc, tmpName, indexOutfitsArray;
	
	for (ii=0;ii<6;ii++)
	{
		tmpSrc = document.getElementById("thumb" + (ii+1) + "image");
		indexOutfitsArray = (ii + this.leftThumbnailIndex) % this.totalOutfits;
		tmpSrc.src = "images/" + this.outfitsArray[indexOutfitsArray].thumbnailimage;
		if (indexOutfitsArray == this.selectedOutfitIndex)
		{
			document.getElementById('thumbtable'+(ii+1)).style.borderColor = this.thumbnailSelectedBorderColor;
			document.getElementById('thumbtable'+(ii+1)).style.borderWidth = "2px";
		}
		tmpName = document.getElementById("thumb" + (ii+1) + "name");
		tmpName.innerHTML = this.outfitsArray[indexOutfitsArray].name;
	}	
}

loadStoreEO.prototype.resetThumbnailBorders = function()
{
		document.getElementById('thumbtable1').style.borderColor = this.thumbnailBorderColor;
		document.getElementById('thumbtable2').style.borderColor = this.thumbnailBorderColor;
		document.getElementById('thumbtable3').style.borderColor = this.thumbnailBorderColor;
		document.getElementById('thumbtable4').style.borderColor = this.thumbnailBorderColor;
		document.getElementById('thumbtable5').style.borderColor = this.thumbnailBorderColor;
		document.getElementById('thumbtable6').style.borderColor = this.thumbnailBorderColor;
		
		document.getElementById('thumbtable1').style.borderWidth = "2px";
		document.getElementById('thumbtable2').style.borderWidth = "2px";
		document.getElementById('thumbtable3').style.borderWidth = "2px";
		document.getElementById('thumbtable4').style.borderWidth = "2px";
		document.getElementById('thumbtable5').style.borderWidth = "2px";
		document.getElementById('thumbtable6').style.borderWidth = "2px";
		

}


loadStoreEO.prototype.changeThumbnails = function(theDirection)
{
	if (theDirection == 'advance')
	{
		this.leftThumbnailIndex = this.leftThumbnailIndex + 6;
	}
	else
	{
		this.leftThumbnailIndex = this.leftThumbnailIndex - 6;
	}
	this.resetThumbnailBorders();
	this.showThumbnails();
	
}

// shows the large image on the stage
loadStoreEO.prototype.displayOutfit = function(placeHolderIndex,thumbnailBorderIndex)
{
	this.selectedOutfitIndex = (placeHolderIndex + this.leftThumbnailIndex) % this.totalOutfits;
	this.resetThumbnailBorders();

	var tmpThumbnailTable = document.getElementById("thumbtable" + thumbnailBorderIndex);
	tmpThumbnailTable .style.borderColor = this.thumbnailSelectedBorderColor
	tmpThumbnailTable .style.borderWidth = "2px";

	if (this.outfitsArray[this.selectedOutfitIndex].actorimage.indexOf(".") > -1) // see if image or YouTube id
	{
		document.getElementById('movieDiv').innerHTML = "";
		document.getElementById('actorimage').style.display = "block";
		document.getElementById('actorimage').src = "images/" + this.outfitsArray[this.selectedOutfitIndex].actorimage;
	}
	else
	{
		document.getElementById('actorimage').style.display = "none";
		var movieDiv = document.getElementById('movieDiv');

		movieDiv.innerHTML = '<embed src="http://www.youtube.com/v/' + this.outfitsArray[this.selectedOutfitIndex].actorimage + '&autoplay=1&loop=1" type="application/x-shockwave-flash" width="425" height="350"> </embed> ';

		
	}

};



// Utility to check if the XML value is empty
function convertXMLCheckForNull(sXMLValue){
	var sReturnValue = "";
	try{
		sReturnValue = sXMLValue.nodeValue;
	}
	catch(e){}	
	return(sReturnValue);
}

function changeSource(theFile)
{
	document.getElementById('theFrame').src = theFile;

	if (theFile == "workshopschedules.htm")
	{
		document.getElementById('workshoplink1').style.color = "red";
		document.getElementById('workshoplink2').style.color = "white";
	}
	if (theFile == "workshopdescription.htm")
	{
		document.getElementById('workshoplink1').style.color = "white";
		document.getElementById('workshoplink2').style.color = "red";
	}
	if (theFile == "nextperformances.htm")
	{
		document.getElementById('workshoplink1').style.color = "red";
		document.getElementById('workshoplink2').style.color = "white";
	}
	if (theFile == "pastperformances.htm")
	{
		document.getElementById('workshoplink1').style.color = "white";
		document.getElementById('workshoplink2').style.color = "red";
	}
	
}

function showMap(theSpan)
{
//alert(theSpan);
//theSpan.innerHTML = "Loading map ...";
document.getElementById('mapArea').innerHTML = '<iframe width="525" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;hl=en&amp;geocode=&amp;q=3035+Talbot+Street,+Point+Loma+san+diego+ca&amp;sll=37.0625,-95.677068&amp;sspn=32.939885,59.765625&amp;ie=UTF8&amp;s=AARTsJpgqc71W0cN-B8zNuu4UqX0Hbv41A&amp;ll=32.72296,-117.232103&amp;spn=0.025273,0.036478&amp;z=14&amp;output=embed"></iframe><br /><small><br><br>';
}

function getHostName()
{
	// determine Hostname, include port number if applicable
	gHostName = window.location.protocol + "//" + window.location.hostname;
	var tmpPort = window.location.port;
	if (tmpPort.length > 0)
		gHostName = gHostName + ":" + tmpPort
		
	return(gHostName);
}


// utility to trim white spaces
String.prototype.trim = function()
{
	return this.replace(/^\s+|\s+$/g, "");
}


function setStageSize()
{
	var browserHeight = document.body.clientWidth;
	//alert(browserHeight);
	
	if (browserHeight > 950)
	{
		document.getElementById('portletStageTall').className = "portletStageTallTall";
		document.getElementById('theFrame').height = "600px";
	}
	else
	{
		document.getElementById('portletStageTall').className = "portletStageTall";
		document.getElementById('theFrame').height = "400px";
	}
	
}