/**
 * 
 * Javascript Widgets 2000
 * Javascript reusable GUI components.
 * Copyright by ChieftainY2k
 * 
 * Designed, coded and maintained by ChieftainY2k , www.ChieftainY2k.net
 * ChieftainY2k[at]Y2k-design[dot]net
 * ChieftainY2k[at]vip[dot]interia[dot]pl
 * ChieftainY2k[at]anronet[dot]pl
 * 
 * Post all questions regarding licensing to one of the addresses given above.
 *
 */

/*
 Expandable Pane
 ver 1.0 

 Usage example:

	<style> @import url(jsw2000/w-exppane.css); </style> 
	<style> @import url(jsw2000/w-exppane-xp.css); </style> 
	<script src="jsw2000/w-exppane.js"></script>
	<script defer>expandpane_init();</script>
	<div style="padding:10px; margin:10xp; border: solid 1px black; background:white; height:100px;">
		<div id="expandpane-help" class="expandpane_hidden" expp="theme:xp">Help:</div>
		<div id="expandpane-help-body" class="expandpane_hidden">
				blah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blah<br>
				blah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blah<br>
				blah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blah<br>
		</div>
	</div>

*/

/**
 *
 *  find and initialize all expandable panels
 *
 *
 */
function expandpane_init()
 {
	var len = document.all.length;
	var all = document.all;
	var obj,tmp,paneName,paneInitStateIsExpanded;

	//init blobal data
	if (!document.exppaneData) document.exppaneData={};

	//scan for tabsnames for this tabset
 	eval("var expandPaneRegex = /^expandpane-[a-z0-9_]*$/i;");
	for ( var i = 0; (i<len); i++ ) 
	{
		obj = all[i];
		if ( expandPaneRegex.test(obj.id) ) 
			{
				//get panelset name and tab name
				tmp = obj.id.split("-"); 
				paneName = tmp[1];
				if (document.exppaneData[paneName]) continue;
				document.exppaneData[paneName]={}; //exppane system global data
				//get tag attributes
				for(var i2=obj.attributes.length-1;i2>0;i2--) 
 	 			 if (obj.attributes[i2].name=="expandpane" || obj.attributes[i2].name=="expp")
 	 			 {
		 	   		attrib_value = obj.attributes[i2].value;
					if (attrib_value.length)
					{
						var params = attrib_value.split(";"); 
						//extract and save exppane global data params
						for(var pi=0;pi<params.length;pi++)
						{
							tmp = params[pi].split(":");
							param_name = tmp[0]; param_value = tmp[1];
							document.exppaneData[paneName][param_name] = param_value;
							//alert(paneName+": "+param_name+":"+param_value);
						};
					};
 	 			 	break;
 	 			 };
 	 			//alert(document.exppaneData[paneName]['theme']);
 	 			var theme = document.exppaneData[paneName]['theme'] ? document.exppaneData[paneName]['theme']+"_" : "";
 	 
				//assign properties, styles etc....
				obj.className=theme+"expandpane_title_hidden";
				//document.all[obj.id+"-body"].className="expandpane-body-hidden";
				//mark init state
				paneInitStateIsExpanded = ((document.all[obj.id+"-body"].className.indexOf("hidden")!=-1) ? false:true)
				//create expand image (we use a trick to change image using style definitions. We create transparent image and change its background.)
				///obj.insertAdjacentHTML("beforeEnd", "&nbsp;<img src='oimg/w-exppane/exppane-transparent.gif' id='expandpane-"+tmp[1]+"-image' class='expandpane-image-hidden'>")
				obj.insertAdjacentHTML("afterBegin", "<img src='javascript://' id='expandpane-"+paneName+"-image' class='"+theme+"expandpane_image_"+(paneInitStateIsExpanded ? "expanded":"hidden")+"'>")
				//obj.insertAdjacentHTML("afterBegin", "<img src='jsw2000/i/exppane-transparent.gif' id='expandpane-"+paneName+"-image' class='expandpane-image-"+(paneInitStateIsExpanded ? "expanded":"hidden")+"'>")
				//obj.insertAdjacentHTML("afterBegin", "<div id='expandpane-"+paneName+"-image' class='expandpane-image-"+(paneInitStateIsExpanded ? "expanded":"hidden")+"'>")
				//set handlers for this tab
				eval("obj.attachEvent('onclick', function () { expandpane_click('"+paneName+"'); });");
				eval("obj.attachEvent('onmouseover', function () { expandpane_mouseOver('"+paneName+"'); });");
				eval("obj.attachEvent('onmouseout', function () { expandpane_mouseOut('"+paneName+"'); });");
				//save current state
				document.exppaneData[paneName]['isExpanded']=paneInitStateIsExpanded;
				expandpane_applyStyles(paneName,false);
			};	
	};
 };
 

function expandpane_applyStyles(paneName,mouseHover)
{
	var theme = document.exppaneData[paneName]['theme'] ? document.exppaneData[paneName]['theme']+"_" : "";
	var isExpaneded = document.exppaneData[paneName]['isExpanded'];
	document.all["expandpane-"+paneName+"-body"].className=theme+"expandpane_body_"+(isExpaneded?"expanded":"hidden");
	document.all["expandpane-"+paneName+"-image"].className=theme+"expandpane_image_"+(isExpaneded?"expanded":"hidden");
	document.all["expandpane-"+paneName].className=theme+"expandpane_title_"+(mouseHover?"hover_":"")+(isExpaneded?"expanded":"hidden");
	
};
 
//expand pane click event handler
function expandpane_click(paneName)
 {
	//change pane state (hidden<->expanded)
	document.exppaneData[paneName]['isExpanded'] = !document.exppaneData[paneName]['isExpanded'];
	expandpane_applyStyles(paneName);
 };

function expandpane_mouseOver(paneName)
 {
	expandpane_applyStyles(paneName,true);
 };						 

function expandpane_mouseOut(paneName)
 {
	expandpane_applyStyles(paneName,false);
 };