//Setting up Category Panel  
//0 means disabled; 1 means enabled;  
var categoryPanelStatus = 0;
var currentpanelid = '';

//loading popup with jQuery
function loadPopup(e){
	//loads popup only if it is disabled
//	var container_offset_x = $("#actionPanel").offset().left;
//	alert('offset = ' + container_offset_x);
	if (e != null) {
		if (e.pageX > 760)
			return;
	}
		
//	alert("x pos = " + e.pageX);

	if(categoryPanelStatus==0){
		var currentpanelcontents = $('#categoryPanelArea').html();
		if (currentpanelcontents.length > 10) {
			$("#categoryPanel").fadeIn("fast");
			categoryPanelStatus = 1;
		}
	}
}

//disabling popup with jQuery
function disablePopup(){
	//disables popup only if it is enabled
//alert('disablePopup');

	if(categoryPanelStatus==1){
//		$("#backgroundPopup").fadeOut("slow");
		$("#categoryPanel").fadeOut("fast");
//		alert('disablePopup');
		categoryPanelStatus = 0;

//		$("#needfilter").css({"display": "block"});

	}
}

function updatePopup(element) {

//	if (categoryPanelStatus == 1) {
		
		var itemtext = $(element).attr('id'); 
		var panelid = itemtext + '-panel';
//		alert(panelid + ' show');

//		var container_offset_x = $("#categorylinks").offset().left;
		var container_offset_x = $("#actionPanel").offset().left;


		var offset_x = $(element).offset().left;
		var itemwidth = $(element).width(); 
		var backgroundoffset = (offset_x - container_offset_x) + Math.round(itemwidth / 2);
		backgroundoffset = -585 + backgroundoffset + "px";

// alert("container offset = " + container_offset_x + ", background offset = " + backgroundoffset + ", offset = " + offset_x + ", width = " + itemwidth);
//alert("background offset = " + backgroundoffset);
		

		var paneltoshow = $('#' + panelid).html();
//		alert('show panel #' + panelid);
		$('#categoryPanelArea').html(paneltoshow);

	 	$("#categoryPanel").css({"background-position": backgroundoffset + " 0"});
		
		loadPopup(null);
// -545px

//		$('#' + panelid).css("display","block"); 
		
//		if (currentpanelid != '') {
//			alert(currentpanelid + ' hide');
//			$('#' + currentpanelid).css("display","none"); 
//		}
		
//		currentpanelid = panelid;
//		$("#contactArea").text(itemtext);
		
//	}
}

// JQuery Integration
$(document).ready(function(){
	//LOADING POPUP

//	$("#categorylinks li").mouseover(function(){
	$("#actionPanel li").mouseover(function(){
		updatePopup(this);									 
	});

    // this does not trigger when mouse goes into child elements
    $("#actionPanel").bind("mouseenter",function(e){
//    $("#categorylinkscontainer").bind("mouseenter",function(){
loadPopup(e);
    }).bind("mouseleave",function(){
        disablePopup();
    });

	
	//CLOSING POPUP
	//Click the x event!
	$("#categoryPanelClose").click(function(){
		disablePopup();
	});
	//Click out event!
	$("#backgroundPopup").click(function(){
		disablePopup();
	});
	//Press Escape event!
	$(document).keypress(function(e){
		if(e.keyCode==27 && categoryPanelStatus==1){
			disablePopup();
		}
	});


});