/* General
------------------------------------------------------------------------------------------ */

var paneArray;

var NEXT_PANE = {
			top: 210, 
			left: 450, 
			size: 10, 
			padding: 3.125, 
			fontSize: 0.165, 
			opacity: 0,
			zIndex: 2
		};

var TOP_PANE = { 
			top: 60, 
			left: 0, 
			size: 300, 
			padding: 25, 
			fontSize: 1, 
			opacity: 1,
			zIndex: 3
		};

var MIDDLE_PANE = { 
			top: 135, 
			left: -250, 
			size: 175, 
			padding: 12.5, 
			fontSize: 0.66, 
			opacity: 0.66,
			zIndex: 2
		};

var BOTTOM_PANE = { 
			top: 175, 
			left: -340, 
			size: 112.5, 
			padding: 6.25, 
			fontSize: 0.42, 
			opacity: 0.33,
			zIndex: 1
		};

var NON_PANE = {
			top: 210, 
			left: -385, 
			size: 10, 
			padding: 3.125, 
			fontSize: 0.165, 
			opacity: 0 ,
			zIndex: 1
		};

var PANE_ORDER = new Array (NEXT_PANE, TOP_PANE, MIDDLE_PANE, BOTTOM_PANE, NON_PANE);






window.onload = function () {init ();}


function init ()
{
	var home = document.getElementById ("home");
	home.onclick = paneClickHandler;

	paneArray = [home];

	updateAjaxLinks ();
}


function updateAjaxLinks ()
{
	var links = document.getElementsByTagName ("a");

	for (var count = 0; count < links.length; count++)
	{
		var classArr = links[count].className.split (" ");
		var init = "";

		if (classArr.inArray ("ajax"))
		{
			if (links[count].href != "")
			{
				var query = links[count].href.substring((links[count].href.indexOf('?')) + 1);
				var pairs = query.split ("&");
				var queryData = [];
				var index = -1;

				for (var pairCount = 0; pairCount < pairs.length; pairCount++)
				{
					if (pairs[pairCount].substring(0, 6) == "panes=")
					{
						index = pairCount;
					} else
					{
						queryData.push (pairs[pairCount]);
					}
				}

				if (index >= 0)
				{
					var data = pairs[index].split ("=");
					var pos = data[1].lastIndexOf (":");

					eval ("links[count].onclick = function (e) { openLink (this, \"" + data[1].substring (pos + 1) + "\", \"" + queryData.join ('&') + "\", e); return false; }");
				}
			}
		}
	}
}


Array.prototype.inArray = function (value)
{
	for (var count = 0; count < this.length; count++)
	{
		if (this[count] === value) return true;
	}

	return false;
};


function openLink (link, location, data, e)
{
	if (YAHOO.util.Dom.isAncestor (paneArray[paneArray.length - 1], link))
	{
		// If link is click in top pane..
		newPane (location, data);

	} else if (YAHOO.util.Dom.isAncestor (paneArray[paneArray.length - 2], link))
	{
		// If link is click in middle pane..
		updatePane (paneArray[paneArray.length - 1], location, data)
	} else
	{
		return;
	}

	if (!e)
	{
		e = window.event;	// IE!
		e.cancelBubble = true;
	} else
	{
		e.stopPropagation ();
	}
}


function newPane (location, data)
{
	var pane = document.createElement ('div');
	pane.id = location;
	pane.className = 'box';
	pane.style.position = 'absolute';
	pane.style.width = NEXT_PANE.size + 'px';
	pane.style.height = NEXT_PANE.size + 'px';
	pane.style.left = NEXT_PANE.left + 'px';
	pane.style.top = NEXT_PANE.top + 'px';
	pane.style.opacity = NEXT_PANE.opacity;
	pane.style.backgroundImage = 'url("./images/loading.gif")';
	pane.style.backgroundColor = '#ffffff';
	pane.onclick = paneClickHandler;

	var wrap = document.getElementById ("wrap");
	wrap.appendChild (pane);

	var url = './pages/_' + location + '.php';
	if (data) url += '?' + data;

	YAHOO.util.Connect.asyncRequest ('GET', url, { success: function (o) { paneLoadHandler (pane, o); } }, null); 

	paneArray.push (pane);
	animPanes = [];

	for (count = paneArray.length - 1; count >= 0 && animPanes.length < 5; count--)
	{
		animPanes.push (paneArray[count]); 
	}

	animatePanes (PANE_ORDER.slice (0, paneArray.length + 1), animPanes);
}


function updatePane (pane, location, data)
{
	pane.id = location;
	pane.innerHTML = '';
	pane.style.backgroundImage = 'url("./images/loading.gif")';

	var url = './pages/_' + location + '.php';
	if (data) url += '?' + data;

	YAHOO.util.Connect.asyncRequest ('GET', url, { success: function (o) { paneLoadHandler (pane, o); } }, null); 	
}


function paneLoadHandler (pane, response)
{
	pane.innerHTML = response.responseText; 
	pane.style.backgroundImage = 'none';

	updateAjaxLinks (); 
}


function paneClickHandler (e)
{
	var element;

	if (!e) 
	{
		e = window.event;	// For IE!
		element = e.srcElement;
	} else
	{
		element = e.target;
	}		

	if (element == paneArray[paneArray.length - 2] || YAHOO.util.Dom.isAncestor (paneArray[paneArray.length - 2], element))
	{
		// If middle pane is clicked..
		bringToFront (paneArray[paneArray.length - 2]);

	} else if (element == paneArray[paneArray.length - 3] || YAHOO.util.Dom.isAncestor (paneArray[paneArray.length - 3], element))
	{
		// If bottom pane is clicked..
		bringToFront (paneArray[paneArray.length - 3]);
	}
}


function animatePanes (paneOrder, panes, step, duration, callbackArray)
{
	if (!step) step = 1;
	if (!duration) duration = 0.2

	for (var count = 0; count < paneOrder.length - step; count++)
	{
		var attributes = 
		{ 
			top: { from: paneOrder[count].top, to: paneOrder[count + step].top },
			left: { from: paneOrder[count].left, to: paneOrder[count + step].left },
			width: { from: paneOrder[count].size, to: paneOrder[count + step].size },
			height: { from: paneOrder[count].size, to: paneOrder[count + step].size },
			paddingTop: { from: paneOrder[count].padding, to: paneOrder[count + step].padding },
			paddingLeft: { from: paneOrder[count].padding, to: paneOrder[count + step].padding },
			paddingBottom: { from: paneOrder[count].padding, to: paneOrder[count + step].padding },
			paddingRight: { from: paneOrder[count].padding, to: paneOrder[count + step].padding },
			fontSize: { from: paneOrder[count].fontSize, to: paneOrder[count + step].fontSize, unit: 'em' },
			lineHeight: { from: paneOrder[count].fontSize * 2, to: paneOrder[count + step].fontSize * 2, unit: 'em' },
			opacity: { from: paneOrder[count].opacity, to: paneOrder[count + step].opacity }
		};

		var anim = new YAHOO.util.Motion(panes[count].id, attributes);
		anim.duration = duration;

		if (callbackArray && callbackArray[count]) anim.onComplete.subscribe (callbackArray[count]);

		eval ("var changeZIndex = function () { document.getElementById ('" + panes[count].id + "').style.zIndex = " + paneOrder[count + step].zIndex + " }");
		anim.onComplete.subscribe (changeZIndex);

		anim.animate ();
	}
}
	

function bringToFront (pane)
{
	animPanes = (paneArray.length < 5)? paneArray : paneArray.slice (-4);
	//alert(animPanes.length);
	//alert(paneArray.length);

	var paneOrder = PANE_ORDER.slice (0, animPanes.length + 1);
	paneOrder.reverse ();

	var step;

	if (pane == paneArray[paneArray.length - 2])
	{
		step = 1;
	} else
	{
		step = 2;

		if (paneArray.length > 4) 
		{
			animPanes = paneArray.slice (-5, 6)
			paneOrder = new Array (NON_PANE).concat (paneOrder);
		}

		paneOrder.push (NEXT_PANE);
	}

	var removePane = function () 
	{
		for (count = 0; count < step; count++)
		{
			var p = paneArray.pop ();
			p.parentNode.removeChild (p);
		}
	};

	callbackArray = [];
	callbackArray[animPanes.length - step] = removePane;

	animatePanes (paneOrder, animPanes, step, 0.2 * step, callbackArray);
}