//=======================================
//Globals
//=======================================
var currentTab = "";
var startingTab = "about";
var tempDiv;
var xmlPath = "./xml/smoovepod.xml";
//var xmlPath = "http://www.consumption.net/user/greeze/resume/xml/smoovepod.xml"; //uncomment when testing locally with IE
var htmlBlocks = [];
var zooming = false;
var zoomQueue = [];
var xmlDoc;
var zoomAnims = false; //whether to animate the div zooming when new text is placed

//=======================================
//Init
//=======================================
function init()
{
	tempDiv = document.getElementById("tempDiv");
	importXML(xmlPath,"receivedXML");
}

function receivedXML(doc)
{
	xmlDoc = doc;
	parseBlocks();
	initRolloverImages();
	initTabs();
}

function parseBlocks()
{
	var root = xmlDoc.getElementsByTagName("smoovepod")[0];
	var blockMajors = root.getElementsByTagName("blockMajor");
	for (var i = 0; i < blockMajors.length; i++)
	{
		var blockName = "";
		var blockHTML = "";
		var blockNameElem = blockMajors[i].getElementsByTagName("name")[0];
		if (blockNameElem.hasChildNodes())
		{
			blockName = blockNameElem.firstChild.nodeValue;
		}
		var blockMinors = blockMajors[i].getElementsByTagName("blockMinor");
		for (var j = 0; j < blockMinors.length; j++)
		{
			var headerLeft = "";
			var headerRight = "";
			var headerCenter = "";
			var headerLeftElem = blockMinors[j].getElementsByTagName("headerLeft")[0];
			var headerRightElem = blockMinors[j].getElementsByTagName("headerRight")[0];
			var headerCenterElem = blockMinors[j].getElementsByTagName("headerCenter")[0];
			var contentElem = blockMinors[j].getElementsByTagName("content")[0];
			var contentHTML = parseContent(contentElem);
			if (headerLeftElem.hasChildNodes())
			{
				headerLeft = headerLeftElem.firstChild.nodeValue;
			}
			if (headerRightElem.hasChildNodes())
			{
				var headerRight = headerRightElem.firstChild.nodeValue;
			}
			if (headerCenterElem.hasChildNodes())
			{
				var headerCenter = headerCenterElem.firstChild.nodeValue;
			}
			blockHTML += createBlock(headerLeft,headerRight,headerCenter,contentHTML);
		}
		htmlBlocks[blockName] = blockHTML;
	}
}

function placeBlock(htmlBlock)
{
	tempDiv.innerHTML = htmlBlock;
	var desiredHeight = tempDiv.offsetHeight;
	if (!zooming)
	{
		zoomHeight("contentMiddle",desiredHeight,1);
	}
	else
	{
		zoomQueue=["contentMiddle",desiredHeight,1,htmlBlock];
	}
}

function parseContent(contentElement)
{
	var contentHTML = "";
	var bulletElems = contentElement.getElementsByTagName("bullet");
	if (bulletElems.length == 0) //No bullet items -- only text
	{
		var textElem = contentElement.getElementsByTagName("text")[0];
		if (textElem.hasChildNodes())
		{
			contentHTML = textElem.firstChild.nodeValue;
		}
	}
	else
	{
		for (var i = 0; i < bulletElems.length; i++)
		{
			var thisBulletText = bulletElems[i].getElementsByTagName("text")[0].firstChild.nodeValue;
			var thisBulletLinkRef = "";
			var thisBulletLinkText = "";
			if (bulletElems[i].getElementsByTagName("linkRef").length > 0)
			{
				thisBulletLinkRef = bulletElems[i].getElementsByTagName("linkRef")[0].firstChild.nodeValue;
				thisBulletLinkText = bulletElems[i].getElementsByTagName("linkText")[0].firstChild.nodeValue;
				thisBulletText += ' <a class=link href ="' + thisBulletLinkRef + '" target="_blank">' + thisBulletLinkText + '</a>';
			}
			thisBulletText = '<li>' + thisBulletText + '</li>';
			contentHTML += thisBulletText;
		}
	}
	return contentHTML;
}
//=======================================
//Content Blocks and Zoom Anims
//=======================================
function createBlock(leftHeader,rightHeader,centerHeader,contents) //returns the html for a textblock
{
	if (leftHeader==null) {leftHeader="";}
	if (rightHeader==null) {rightHeader="";}
	if (centerHeader==null) {centerHeader="";}
	if (contents==null) {contents="";}
	
	//Create the divs
	var blockWrapper = document.createElement("div");
	var blockHeaderWrapper = document.createElement("div");
	var blockHeaderLeft = document.createElement("div");
	var blockHeaderRight = document.createElement("div");
	var blockHeaderCenter = document.createElement("div");
	var blockTop = document.createElement("div");
	var blockMiddle = document.createElement("div");
	var blockContent = document.createElement("div");
	var blockBottom = document.createElement("div");
	
	//Assign classes to the divs
	blockHeaderWrapper.className = "blockHeaderWrapper";
	blockHeaderLeft.className = "blockHeaderLeft";
	blockHeaderRight.className = "blockHeaderRight";
	blockHeaderCenter.className = "blockHeaderCenter";
	blockTop.className = "blockTop";
	blockMiddle.className = "blockMiddle";
	blockContent.className = "blockContent";
	blockBottom.className = "blockBottom";
	
	//Create the hierarchy for the divs
	blockWrapper.appendChild(blockHeaderWrapper);
	blockHeaderWrapper.appendChild(blockHeaderLeft);
	blockHeaderWrapper.appendChild(blockHeaderRight);
	blockHeaderWrapper.appendChild(blockHeaderCenter);
	blockWrapper.appendChild(blockTop);
	blockWrapper.appendChild(blockMiddle);
	blockMiddle.appendChild(blockContent);
	blockWrapper.appendChild(blockBottom);
	
	//Populate divs with content
	blockHeaderLeft.innerHTML = leftHeader;
	blockHeaderRight.innerHTML = rightHeader;
	blockHeaderCenter.innerHTML = centerHeader;
	blockContent.innerHTML = contents;

	//Return textblock html
	return blockWrapper.innerHTML;
}

function zoomHeight(id,desiredHeight,stepDelay) //stepDelay is the delay between steps.  Smaller numbers are faster animations
{
	var elem = document.getElementById(id);
	if (zoomAnims==false)
	{
		elem.style.height = desiredHeight + "px";
		zoomComplete(elem);
		return;
	}
	zooming=true;
	if (stepDelay==null) {stepDelay = 15;}
	elem.innerHTML = "";
	currentHeight = elem.offsetHeight;
	if (currentHeight==desiredHeight) //if the size is right, then populate the div with whatever's in the temp div
	{
		zoomComplete(elem);
		return;
	}
	
	var newHeight = desiredHeight;
	if (currentHeight < desiredHeight) //zooming larger
	{
		newHeight = currentHeight + 30;
		if (newHeight > desiredHeight) {newHeight = desiredHeight;}
	}
	else if (currentHeight > desiredHeight) //zooming smaller
	{
		newHeight = currentHeight - 30;
		if (newHeight < desiredHeight) {newHeight = desiredHeight;}
	}
	elem.style.height = newHeight + "px";
	
	window.setTimeout("zoomHeight('"+id+"',"+desiredHeight+","+stepDelay+")",stepDelay);
}
function zoomComplete(elem)
{
	elem.innerHTML = tempDiv.innerHTML;
	tempDiv.innerHTML = "";
	zooming = false;
	if (zoomQueue.length>0)
	{
		tempDiv.innerHTML = zoomQueue[3];
		zoomHeight(zoomQueue[0],zoomQueue[1],zoomQueue[2]);
		zoomQueue = [];
	}
}

//=======================================
//Tab Buttons
//=======================================
function initTabs()
{
	//Someone set us up the tabs.
	var myTabs=getElementsByClass("tabButtonImage",document,'img');
	var rLen = myTabs.length;
	var thisElement;
	for (var i=0; i < rLen; i++){
		thisElement=myTabs[i];
		//If one of the tabs is the startingTab then set it as the initially-selected tab
		var selectedTab = false;
		thisElement.blockName = thisElement.id;
		if (thisElement.id==startingTab)
		{
			selectedTab = true;
		}
		thisElement.id = "tabButtonImage" + i;
		if (selectedTab)
		{
			setOpacity(thisElement,0);
			selectTab(thisElement.id,thisElement.blockName);
		}
		//Assign event handlers
		thisElement.onmouseover = function() {if (currentTab != this.id) {fadeOut(this.id,100);}} //fade out so we can see the rollover state in the background
		thisElement.onmouseout = function() {if (currentTab!=this.id) {fadeIn(this.id,0);}} //fade in to hide the rollover state
		thisElement.onclick = function() {selectTab(this.id,this.blockName);}
	}
}
function selectTab(id,blockName)
{
	if (currentTab != id)
	{
		if (currentTab != "")
		{
			fadeIn(currentTab,0); //Hide the rollover for the previously-selected tab
		}
		currentTab = id; //This tab is the new currently-selected tab
		placeBlock(htmlBlocks[blockName]);
	}
}

//=======================================
//ROLLOVERS
//=======================================
function initRolloverImages()
{
	//Someone set us up the rollovers.
	//Give them id's and "on..." events
	var myRollovers=getElementsByClass("rolloverImage",document,'img');
	var rLen = myRollovers.length;
	var thisElement;
	for (var i=0; i < rLen; i++){
		thisElement=myRollovers[i];
		thisElement.id = "rolloverImage" + i;
		thisElement.onmouseover = function() {fadeOut(this.id,100);} //fade out so we can see the rollover state in the background
		thisElement.onmouseout = function() {fadeIn(this.id,0);} //fade in to hide the rollover state
	}
}
function fadeOut(id,currentOpacity) //we use id instead of an element object because setTimeout takes a string 
{
	if (currentOpacity > 0)
	{
		currentOpacity -= 10;
		var elem = document.getElementById(id);
		setOpacity(elem,currentOpacity);
		window.setTimeout("fadeOut('"+id+"',"+currentOpacity+")",15);
	}
}
function fadeIn(id,currentOpacity)
{
	if (currentOpacity < 100)
	{
		currentOpacity += 10;
		var elem = document.getElementById(id);
		setOpacity(elem,currentOpacity);
		window.setTimeout("fadeIn('"+id+"',"+currentOpacity+")",15);
	}
}
//swiped from http://clagnut.com/sandbox/imagefades/
function setOpacity(obj, opacity) {
	opacity = (opacity == 100)?99.999:opacity;
	// IE/Win
	obj.style.filter = "alpha(opacity:"+opacity+")";
	// Safari<1.2, Konqueror
	obj.style.KHTMLOpacity = opacity/100;
	// Older Mozilla and Firefox
	obj.style.MozOpacity = opacity/100;
	// Safari 1.2, newer Firefox and Mozilla, CSS3
	obj.style.opacity = opacity/100;
}