/**
 * (./) ui.js, v0.2, 2008-12-27 19:01
 * (by) cousot stephane @ http://www.ubaa.net/
 * (cc) some right reserved
 *
 * Base document for JavaScript user interactions
 *
 * This document is a part of the AJAX Admin Framework project, based on the Wrapper project.
 * This project is released under a Creative Commons Licence BY
 * ‹ http://creativecommons.org/licenses/by/3.0/ ›
 */





// add getElementById method for old browser ( version <=4 )
if( document.all&&!document.getElementById )
	document.getElementById = function(id) { return this.all[id] };




window.onload = function() {
	
	var xhr;
	
	// on ajax response
	// update styles, background image
	// start timer
	if ( document.getElementById('playground') ) {
		xhr = new XHR(
			function( response ) {
				response -= 200;
				if ( response==0 || response==1 ) updatePlayground( response);
			},
			{ method: 'GET', url: '/home/' }
		);
		xhr.send();
	}
}


/**
 * Show or hide the element defined by the given id
 *
 * @param String	the element ID, or a list of element id
 * @param String	[ the display style : block (default), inline, etc… ]
 * @param boolean	[ force the element to stay in the given style (false by default)  ]
 *
 * @return String	the current element ID display style (only for a single ID)
 */
function display( id, style, fix ) {

	var i,elem;

	if ( !style ) style = "block";
	if ( !fix ) fix = false;
	if ( typeof(id)=="string" ) id = [id];
	
	for( i in id  ) {
		elem = document.getElementById( id[i] );
		elem.style.display = elem.style.display== style && !fix ? 'none' : style;
	}
	
	
	// return style
	if ( i==0 ) return elem.style.display;
}



/**
 * Show or hide the specified panel ID and
 * affect/remove the correponding style.
 *
 * @param String	the submenu ID
 */
function displayPanel( id ) {
	
	var hide = new Array();
	var divs = document.getElementsByTagName('div');
	var list = document.getElementById('main').getElementsByTagName('span');
	
	// scan elements and append to hide list
	for( var i=0; i<divs.length; i++ ) {
		if ( divs[i].id.indexOf("panel")!=-1 ) {
			if ( divs[i].id!=id ) hide[hide.length] = divs[i].id;
		}
	}
	
	// change link's class
	for( var i=0; i<list.length; i++ ) {
		if ( list[i].id.indexOf("lnk_")!=-1 )
			list[i].className = list[i].innerHTML.indexOf(id)!=-1 ? 'active' : '';
	}
	
	// hide other panels
	display( hide, 'none', true );
	// show required panel
	display( id, 'block', true );
}





/**
 * Show or hide the specified submenu and affect/remove interface the correponding design.
 *
 * @param String	the submenu ID
 */
var opened = 0;
function displaySubMenu( id ) {
	
	var style = display( id );

	opened = style=="block" ? opened+1 : opened-1;
	
	document.getElementById('nav').className = opened!=0 ? 'extend' : '';
	document.getElementById('inside').className = opened!=0 ? 'extend' : '';
	document.getElementById('main').className = opened!=0 ? 'extend' : '';
	
}




/**
 * Show or hide the element defined by the given ID with another toggle element.
 *
 * @param Element	the toggle owner element
 * @param String	the target element ID to be display or hide
 */
var toggles = [];	// store toggle button and associated properties
function toggle( elem, id ) {
	
	var idx = -1;		// -1 means to be stored in the toggles list
	
	// find index
	// and remember button for the first function call
	for( i=0; i<toggles.length; i++ ) {
		if ( toggles[i].id == id ) { idx = i; break; }
	}
	if ( idx==-1 ) {
		toggles[toggles.length] = { id: id, open: elem.className=='toggle-open' };
		idx = toggles.length-1;
	}
	
	
	// perform action…
	display( id, toggles[idx].open ? 'none' : null );
	elem.className = toggles[idx].open ? 'toggle-close' : 'toggle-open';
	toggles[idx].open = !toggles[idx].open;
	
}


/**
 * update page background design/colors
 */
function updatePlayground( now ) {
	
	// styles, playground image
	if ( document.body.className!="" ) document.body.className = now==0 ?  "day" : "night";
	document.getElementById('container').className = now==0 ?  "day" : "night";
	document.getElementById('playground').style.backgroundImage = "url('/home/img/scene.png')";
	document.getElementById('floor').style.backgroundImage = "url('/home/img/floor.png')";
	
	// display sentence
	if ( document.getElementById('sentence') ) {
		setTimeout( "display('sentence','block',true)", 3500 );
	}
}