var classname = 'panel';// this will test the class values, it holds the current value, and should correspond to the off state class 
var classname1 = 'panel';// static value, change this to your class 1 name
var classname2 = 'panel_hover';// static value, change this to your class 2 name
var feature = 'single';// sets if only hover element or all changes :: options: 'single' or 'all'

// gets all the elements of that have class classname and returns them as an array
function getElementsByClassName(needle) 
{
	var my_array = document.getElementsByTagName("*");
	var retvalue = new Array();
	var i;
	var j;

	for (i=0,j=0;i<my_array.length;i++) 
	{
		var c = " " + my_array[i].className + " ";
		if (c.indexOf(" " + needle + " ") != -1) retvalue[j++] = my_array[i];
	}
	return retvalue;
}

// if feature is set to all, this will switch all of the class items
// loops through the classname array and switches them to their opposite values
function toggle()
{
	var divs = getElementsByClassName(classname)
	for(i=0; i <divs.length;i++)
	{
		if(divs[i].className == classname1)
		{
			divs[i].className = classname2;
			classname = classname2;
		}
		else
		{
			divs[i].className = classname1;
			classname = classname1;
		} 
	}
}

// for onmouseover
function rollon(e) 
{
	var srcId, srcElement, targetElement; 
	if (window.event) e = window.event; 
	srcElement = ( e.srcElement ) ? e.srcElement : e.target; 

	if ( srcElement.className == classname1 ) 
	{
		if ( feature == 'all' )
		{
			toggle();
		}
		else if ( feature == 'single' )
		{
			srcElement.className = classname2;
			classname = classname2;
		}
	}
}
// for mouseoff
function rolloff(e) 
{
	var srcId, srcElement, targetElement; 
	if (window.event) e = window.event; 
	srcElement = ( e.srcElement ) ? e.srcElement : e.target; 

	if ( srcElement.className == classname2 ) 
	{
		if ( feature == 'all' )
		{
			toggle();
		}
		else if ( feature == 'single' )
		{
			srcElement.className = classname1;
			classname = classname1;
		}
	}
}

function switch_feature()
{
	feature = ( feature == 'single' ) ? 'all' : 'single';
	document.getElementById("info").innerHTML = feature;
}

// assign rollon() to handle onMouseOver events
document.onmouseover = rollon;
document.onrowenter = rollon;


// assign rolloff() to handle onMouseOut events
document.onmouseout = rolloff;
document.onrowexit = rolloff;