var map = [];
	
function highlight ( divid ){
	
	//load the selected html controls by the corresponding div
	var items = map[divid];
	
	//process through the controls
	for(var i=0; i<items.length; i++)
	{
	    //use highlight CSS
		items[i].className="clientlisthighlight";
	}
}

function unhilight ( divid ) {

    //load the selected html controls by the corresponding div
	var items = map[divid];
	
	//process through the controls
	for(var i=0; i<items.length; i++)
	{
	    //use the unhilight CSS - or leave it blank to remove the CSS
		items[i].className="";
	}
}

function mapCategory ( id )
{
    //mootools functionality to get all html controls that have the same class
	map[id] = $S('.' + id);
}

function initList()
{
    //get all div tags under the services control
	var arr = $('services').getElementsByTagName("div");
	
	//process all the divs
	for(var i=0; i<arr.length; i++)
	{
	    //search for the <a> tag inside the divs
		var a = arr[i].getElementsByTagName("a")[0];
		    		
		//search for all html controls which contains the same id as the div
		mapCategory(a.getAttribute("id"));
		
		//on mouse out cancel the highlight
		a.onmouseout = function() {	unhilight(this.getAttribute("id")); this.className="";};
		
		//on mouse over do the highlight
		a.onmouseover = function() { highlight(this.getAttribute("id")); this.className="servicelisthighlight";};
	}
}