/**
 * This script allows you to trap events on an element in a style sheet.
 * Events that are transmitted to the style sheets are : 
 *	- over; 	function : Events.overOn, Events.outOf; Classname : over
 * 	- clicked; 	function : Events.clickOn; 				Classname : clicked
 *
 * How to :
 * 	- Implement the function to the element for which you want to tramit events : <div id="myElement" onClick="Events.clickOn(this)">...</div>
 *  - trap the event in the style sheet using the classname : #myElements.clicked { ... }
 */

//----------------------------------------------------------------------------------------->

/* 
	The Events object 
*/
function Events()
{}

/**
 * Update the classname of the given element according its state : over, out, clicked.
 */
Events.updateClassName = function(element)
{
	// save the base className
	if ( typeof element._className == 'undefined' || element._className == null )
	{
		if ( typeof element.className == 'undefined' || element.className == null )
		{
			element.className = '';
		}

		element._className = element.className;
	}

	// get the base class name
	var className = element._className;

	// if the element is clicked, append the 'clicked' className
	if ( typeof element.clicked != 'undefined' && element.clicked )
	{
		className += (className.length > 0 ? ' ' : '') + 'clicked';	
	}

	if ( document.all )
	{
		// if the element is over, append the 'over' className
		if ( typeof element.over != 'undefined' && element.over )
		{
			className += (className.length > 0 ? ' ' : '') + 'over';	
		}
	}

	// change the className
	element.className = className;
}

//----------------------------------------------------------------------------------------->

/** 
 * Implements this function when you want to transmit over events to the style sheet.
 */
Events.overOn = function(element)
{
	element.over = true;
	Events.updateClassName(element);
}

/** 
 * If your elements implements the over event, you must to implements this function too.
 */
Events.outOf = function(element)
{
	element.over = false;
	Events.updateClassName(element);
}

/** 
 * Implements this function when you want to transmit click events to the style sheet.
 */
Events.clickOn = function(element)
{
	if ( typeof element.clicked == 'undefined' || element.clicked == null )
	{
		element.clicked = false;
	}

	element.clicked = !element.clicked;
	Events.updateClassName(element);
}