var PANEL_NORMAL_CLASS    = "panel";
var PANEL_COLLAPSED_CLASS = "panelcollapsed";
var PANEL_HEADING_TAG     = "h2";
var PANEL_CONTENT_CLASS   = "panelcontent";
var PANEL_COOKIE_NAME     = "panels";
var PANEL_ANIMATION_DELAY = 20; /*ms*/
var PANEL_ANIMATION_STEPS = 10;


function setUpPanels()
{

    //loadSettings();

	var headingTags = document.getElementsByTagName(PANEL_HEADING_TAG);
 
	for (var i=0; i < headingTags.length; i++)
	{
		var el = headingTags[i];
		if (el.parentNode.parentNode.className != PANEL_NORMAL_CLASS && el.parentNode.parentNode.className != PANEL_COLLAPSED_CLASS)
			continue;
        // get the text value of the tag
		var name = el.firstChild.nodeValue;
		el.onclick = function()
		{
			var target    = this.parentNode.parentNode;
			var name      = this.firstChild.nodeValue;
            //alert("target.className " + target.className);
			var collapsed = target.className == PANEL_COLLAPSED_CLASS;
			//saveSettings(name, collapsed?"true":"false");
			
			animateTogglePanel(target, collapsed);

		};
	}
}
 
// Register setUpPanels to be executed on load
if (window.addEventListener)
	window.addEventListener("load", setUpPanels, false);
else
if (window.attachEvent)
	window.attachEvent("onload", setUpPanels);



function animateTogglePanel(panel, expanding)
{
	var elements = panel.getElementsByTagName("div");
	var panelContent = null;
	for (var i=0; i < elements.length; i++)
	{
		if (elements[i].className == PANEL_CONTENT_CLASS)
		{
			panelContent = elements[i];
			break;
		}
	}
 
	panelContent.style.display = "block";
	var contentHeight = panelContent.offsetHeight;
 
	if (expanding)
		panelContent.style.height = "0px";
 
	var stepHeight = contentHeight / PANEL_ANIMATION_STEPS;
	var direction = (!expanding ? -1 : 1);
 
	setTimeout(function(){animateStep(panelContent,1,stepHeight,direction)}, PANEL_ANIMATION_DELAY);
}

function animateStep(panelContent, iteration, stepHeight, direction)
{
	if (iteration < PANEL_ANIMATION_STEPS)
	{
		panelContent.style.height = Math.round(((direction > 0) ? iteration : PANEL_ANIMATION_STEPS - iteration) * stepHeight) +"px";
		iteration++;
		setTimeout(function(){animateStep(panelContent,iteration,stepHeight,direction)}, PANEL_ANIMATION_DELAY);
	}
	else
	{
		// set class for the panel
		panelContent.parentNode.className = (direction < 0) ? PANEL_COLLAPSED_CLASS : PANEL_NORMAL_CLASS;
		// clear inline styles
		panelContent.style.display = panelContent.style.height = "";
	}

}

/**
 * Reads the "panels" cookie if exists, expects data formatted as key:value|key:value... puts in panelsStatus object
 */
function loadSettings()
{
	// prepare the object that will keep the panel statuses
	panelsStatus = {};
 
	// find the cookie name
	var start = document.cookie.indexOf(PANEL_COOKIE_NAME + "=");
	if (start == -1) return;
 
	// starting point of the value
	start += PANEL_COOKIE_NAME.length+1;
 
	// find end point of the value
	var end = document.cookie.indexOf(";", start);
	if (end == -1) end = document.cookie.length;
 
	// get the value, split into key:value pairs
	var cookieValue = unescape(document.cookie.substring(start, end));
	var panelsData = cookieValue.split("|");
 
	// split each key:value pair and put in object
	for (var i=0; i< panelsData.length; i++)
	{
		var pair = panelsData[i].split(":");
		panelsStatus[pair[0]] = pair[1];
	}
}

/**
 * Takes data from the panelsStatus object, formats as key:value|key:value... and puts in cookie valid for 365 days
 * @param key	key name to save
 * @paeam value	key value
 */
function saveSettings(key, value)
{
	// put the new value in the object
	panelsStatus[key] = value;
 
	// create an array that will keep the key:value pairs
	var panelsData = [];
	for (var key in panelsStatus)
		panelsData.push(key+":"+panelsStatus[key]);
 
	// set the cookie expiration date 1 year from now
	var today = new Date();
	var expirationDate = new Date(today.getTime() + 365 * 1000 * 60 * 60 * 24);
	// write the cookie
	document.cookie = PANEL_COOKIE_NAME + "=" + escape(panelsData.join("|")) + ";expires=" + expirationDate.toGMTString();
}