// Instantiate and render the menu when it is available in the DOM
    YAHOO.util.Event.onContentReady("categories-container", function () {
        /*
            Instantiate the menu and corresponding submenus. The first argument passed 
            to the constructor is the id of the element in the DOM that represents 
            the menu; the second is an object literal representing a set of 
            configuration properties for the menu.
        */ 
        var oMenu = new YAHOO.widget.Menu("categories-container", { fixedcenter: false });
        /*
             Call the "render" method with no arguments since the 
             markup for this Menu instance is already exists in the page.
        */
        oMenu.render();
        // Set focus to the Menu when it is made visible
        oMenu.subscribe("show", oMenu.focus);
        YAHOO.util.Event.addListener("menutoggle", "mouseover",oMenu.show, null, oMenu);
		
    });
	
	function setMenuPosition()
	{
		Ele('categories-container').style.left = 'auto';
		Ele('categories-container').style.top = 'auto';
	}
	

function getData(page,catObj)
{
	if(catObj)
var cat = catObj.innerHTML;	
var order = '';
var qstr = '';
if(cat)
currCat = cat;
if(currCat)
qstr = '&Cat='+currCat
if(sortBy)
order = '&order='+sortBy.toLowerCase();
showLoading('content');

YAHOO.util.Connect.asyncRequest('GET','include/datatrans.php?QT=1&pg='+page+qstr+order,callback);
	var an = new YAHOO.util.Anim(dataObj , {opacity: {to: .5} },.5);
	an.animate();
}	
var dataObj = Ele('content');
var currCat;
var sortBy;
var responseData = '';
var callSuccess = function(o)
{	
	responseData = o.responseText;
	var an = new YAHOO.util.Anim(dataObj , {opacity: {to: .5} },.5);
	an.onComplete.subscribe(onAnimate);
	an.animate();
}

var callFailure = function(o){
}

var callback ={success:callSuccess,failure:callFailure};

function onAnimate()
{
dataObj.innerHTML = responseData;
new YAHOO.util.Anim(dataObj , {opacity: {to: 1} },.5).animate();
var sorObj = Ele('sort-By');
if(sortBy=="Date")
sorObj.getElementsByTagName("span")[0].innerHTML = "Name";
else
sorObj.getElementsByTagName("span")[0].innerHTML = "Date";
sorObj.getElementsByTagName("img")[0].src = 'images/sort-reverse.jpg';
removeLoading();
screenArray = eval('('+document.getElementById('array-container').innerHTML+')');
getElements();
setEvent();
}

function setMenuAttribute()
{
	var menunObj = Ele('categories-container').getElementsByTagName("li");
	var navObj = Ele('leftcategory').getElementsByTagName("li");
for(j=0;j<menunObj.length;j++)
{
	menunObj[j].childNodes[0].onclick = function(){getData(1,this)}
	navObj[j].childNodes[0].onclick = function(){getData(1,this)}
} 
}
setMenuAttribute();

function sortThis(sortNode)
{
sortBy = sortNode.getElementsByTagName("span")[0].innerHTML;
 getData(1,currCat,sortBy);
}

function showLoading(obj)
{
	var region = YAHOO.util.Dom.getRegion(obj);
	var loadingObj = document.createElement("div");
	loadingObj.id = 'loadingObj';
	loadingObj.innerHTML = '<img src="images/loading.gif" style="float:left;margin-right:10px;margin-top:-3px;" /> Loading...';
	loadingObj.style.width = '100px';
	loadingObj.style.height = '22px';
	loadingObj.style.paddingTop = '3px';
	loadingObj.style.background = '#eee';
	loadingObj.style.border = '1px solid #bbb';
	loadingObj.style.position = 'absolute';
	loadingObj.style.top = ((parseInt(region.top)+parseInt(document.documentElement.scrollTop/2)+100))+'px';
	loadingObj.style.left = (parseInt(region.left)+100)+'px';
	document.body.appendChild(loadingObj);
}

function removeLoading()
{
	document.body.removeChild(document.getElementById('loadingObj'));
}

/**-------------------- For display the screens -----------------------***/
var elementsArray;
function getElements()
{
	elementsArray = new Array();
	var itemNodes = document.getElementById('expandedview').getElementsByTagName("li");
	for(i=0; i<itemNodes.length; i++)
	{
		if(itemNodes[i].getElementsByTagName("li").length>0)
		elementsArray.push(itemNodes[i]);
	}
}
getElements();

function setEvent()
{
	var childNodes;
	for(i=0; i<elementsArray.length;i++)
	{
		childNodes = elementsArray[i].getElementsByTagName("li");
		for(j=0; j<childNodes.length; j++)
			{
				//childNodes [j].onclick = function (evt) { alert ('foo'); };
				childNodes[j].innerHTML = '<span onclick="getScreen(this,'+i+','+j+')">'+childNodes[j].innerHTML+'</span>';
			}
	}
}

var imgObj;
var dummy;
function getScreen(node,index,val)
{
	node = node.parentNode;
	if(node.className!='current')
	{
		var newsrc = screenArray[index][val];
		var key = hs.expanders.length-1;
		imgObj = document.getElementById('highslide-wrapper-'+key).getElementsByTagName("img")[0];
		var currentSrc = imgObj.src.split("/");
			currentSrc = currentSrc[currentSrc.length-1];
		var imgObjPath = "/screens/"+currentSrc;
		if(imgObj.src.indexOf("/preview/")!=-1)
			imgObjPath = "/preview/"+currentSrc;
		var newPath = "/screens/"+newsrc;
		if(val==0)
			newPath = "/preview/"+newsrc;
		dummy = new Image();
		dummy.src = imgObj.src.replace(imgObjPath,newPath);
		var an=new YAHOO.util.Anim(imgObj , {opacity: {to: .5} },0.5);
				an.onComplete.subscribe(showScreens);
				an.animate();
		var itemNodes = node.parentNode.getElementsByTagName("li");
		for(i=0; i<itemNodes.length;i++)
		{
			itemNodes[i].className = '';
		}
		node.className = 'current';
	}
}

function showScreens()
{
	imgObj.src = dummy.src;
	new YAHOO.util.Anim(imgObj , {opacity: {to: 1} },0.5).animate();
}