// NOTES: For this to work properly, the body margin must be set to 0px.

// These can be changed per project

var fadeSpeed = 20;
var condX = 200; // If the element is less than 200 pixels from the left, display the menu to the right of it

// The rest should not be modified
var browser = new Browser();
var menuObj = new Object();
var leftMenu = "cms_menu_left.png";
var rightMenu = "cms_menu_right.png";
var currentID = 0;
var menuInitialized = false;
var menuOpacity = 1
var elem = 1;
var elemLeft;
var elemTop;
var elemHeight;
var elemWidth;



// Initialize the menu by creating a container element. 
// Everytime we mouseover something this element will be
// emptied and repopulated with the menu HTML.
function initializeMenu() {
	document.body.innerHTML = document.body.innerHTML + "<div id='CMS_Menu'></div>";
	menuObj = document.getElementById("CMS_Menu");
	menuInitialized = true;
}

// Load the menu into the menu container
function loadCMSMenu(event,elem,id,opts,type,pageid) {

	// Fetch mouseovered element's position and dimensions
	elemLeft	= findPosX(elem);
	elemTop		= findPosY(elem);
	elemHeight	= elem.offsetHeight;
	elemWidth	= elem.offsetWidth;
	
	// Initalize the menu, if necessary
	if(!menuInitialized)
		initializeMenu();
	
	// Continue, only if we're mousing over a new element
	if(currentID != id)
	{
		// Update the currently "moused-over" element
		currentID = id;
		
		if(browser.isIE)
			windowWidth = document.body.offsetWidth;
		else
			windowWidth = window.innerWidth;

		// Determine menu's positioning
		menuTop = elemTop + elemHeight/2 - 16 + "px";
		
		var menuLeft; var menuRight;
		if(elemLeft < condX)
			menuLeft = (elemLeft + elemWidth - 2) + "px";
		else
			menuRight = (windowWidth - elemLeft) + "px";
		
		document.getElementById("CMS_Menu").style.top  = menuTop;
		if(menuLeft) {
			menuObj.style.left = menuLeft;
			menuObj.style.right = "";
		}
		else {
			menuObj.style.right = menuRight;
			menuObj.style.left = "";
		}
		
		// Cycle through the 11 table cells and create their innerHTML
		var menuOutput = "";
		for(var i = 1; i <= 11; i++)
		{
			// Display an arrow if the menu is displayed 
			// to the right of the element
			if(i == 4) {
				if(elemLeft < condX)
					imgSrc = "cms_menu_4a.png";
				else
					imgSrc = "cms_menu_4.png";
			}
			// Display an arrow if the menu is displayed 
			// to the left of the element
			else if (i == 6) {
				if(elemLeft < condX)
					imgSrc = "cms_menu_6.png";
				else
					imgSrc = "cms_menu_6a.png";
			}
			else
				imgSrc = "cms_menu_"+i+".png";
			
			// Generate the innerHTML
			switch(i) {
				case 1:
					menuOutput = menuOutput+ "<table cellspacing='0' cellpadding='0'><tr><td>"+makeImage(imgSrc,"width:24px;height:5px","CMS_MenuImg"+i)+"</td>";
					break;
				case 2: 
					menuOutput = menuOutput+ "<td>"+makeImage(imgSrc,"","CMS_MenuImg"+i)+"</td>";
					break;
				case 3: 
					menuOutput = menuOutput+ "<td>"+makeImage(imgSrc,"width:24px;height:5px","CMS_MenuImg"+i)+"</td></tr>";
					break;
				case 4: 
					menuOutput = menuOutput+ "<tr><td>"+makeImage(imgSrc,"width:24px;height:22px","CMS_MenuImg"+i)+"</td>";
					break;
				case 5: 
					menuOutput += "<td rowspan='2' id='CMS_MenuOpts'>";
					for(var j = 0; j < opts.length; j++) {
						if(opts.charAt(j) == 1) {
							switch(j) {
								case 0: menuOutput += "<a href=\"javascript:CMSRedirect('edit','" + type + "','" + pageid + "');\">"+makeImage("edit.gif","width:16px;height:16px")+" Edit</a>"; break;
								case 1: menuOutput += "<a href=\"javascript:CMSRedirect('add','" + type + "','" + pageid + "');\">"+makeImage("add.gif","width:16px;height:16px")+" Add Similar</a>"; break;
								case 2: menuOutput += "<a href=\"javascript:CMSRedirect('manage','" + type + "','" + pageid + "');\">"+makeImage("manage.gif","width:16px;height:16px")+" Manage</a>"; break;
								case 3: menuOutput += "<a href=\"javascript:deleteItem();\">"+makeImage("delete.gif","width:16px;height:16px")+" Delete</a>"; break;
								case 4: menuOutput += "<a href=\"javascript:elemOverlay();\">"+makeImage("move.gif","width:16px;height:16px")+" Move</a>"; break;
								case 5: menuOutput += "<a href=\"javascript:CMSRedirect('movehere','" + type + "','" + pageid + "');\">"+makeImage("movehere.gif","width:16px;height:16px")+" Move Here</a>"; break;
								case 6: menuOutput += "<a href='javascript:closeCMSMenu();'>"+makeImage("cancel.gif","width:16px;height:16px")+" Cancel</a>"; break;
								case 7: menuOutput += "<a href='javascript:closeCMSMenu();'>"+makeImage("cancel.gif","width:16px;height:16px")+" Cancel</a>"; break;
								case 8: menuOutput += "<a href=\"javascript:CMSRedirect('newEntity','" + type + "','" + pageid + "');\">"+makeImage("add.gif","width:16px;height:16px")+" Add New</a>"; break;
							}
						}
					}
					menuOutput += "</td>";
					break;
				case 6: 
					menuOutput = menuOutput+ "<td>"+makeImage(imgSrc,"width:24px;height:22px","CMS_MenuImg"+i)+"</td>";
					break;
				case 7: 
					menuOutput = menuOutput+ "<tr><td>"+makeImage(imgSrc,"","CMS_MenuImg"+i)+"</td>";
					break;
				case 8: 
					menuOutput = menuOutput+ "<td>"+makeImage(imgSrc,"","CMS_MenuImg"+i)+"</td></tr>";
					break;
				case 9: 
					menuOutput = menuOutput+ "<tr><td>"+makeImage(imgSrc,"width:24px;height:11px","CMS_MenuImg"+i)+"</td>";
					break;
				case 10: 
					menuOutput = menuOutput+ "<td>"+makeImage(imgSrc,"","CMS_MenuImg"+i)+"</td>";
					break;
				case 11: 
					menuOutput = menuOutput+ "<td>"+makeImage(imgSrc,"width:24px;height:11px","CMS_MenuImg"+i)+"</td></tr></table>";
					break;
			}
		}
		
		// Output the menu to the page
		menuObj.innerHTML = menuOutput;
	
		// Make the menu visible
		if(browser.isIE)
			menuObj.style.filter = "alpha(opacity=100)";
		if(browser.isNS)
			menuObj.style.opacity = "";
		menuObj.style.display = "block";
		
		// Fix the image heights in cells 7 and 8
		imgHeight = document.getElementById("CMS_MenuOpts").offsetHeight - 22 + "px";
		imgWidth = "24px";
		document.getElementById("CMS_MenuImg7").style.height  = imgHeight;
		document.getElementById("CMS_MenuImg7").style.width   = imgWidth;
		document.getElementById("CMS_MenuImg8").style.height  = imgHeight;
		document.getElementById("CMS_MenuImg8").style.width   = imgWidth;
		
		// Fix the image widths in cells 2 and 10
		imgWidth = document.getElementById("CMS_MenuOpts").offsetWidth + "px";
		document.getElementById("CMS_MenuImg2").style.width   = imgWidth;
		document.getElementById("CMS_MenuImg2").style.height  = "5px";
		document.getElementById("CMS_MenuImg10").style.width  = imgWidth;
		document.getElementById("CMS_MenuImg10").style.height = "11px";
		
		// Use the following alerts for debugging purposes
		//alert(document.getElementById("CMS_Menu").innerHTML);
		//alert(document.body.innerHTML);
		
		// Listen for an onmouseup event to close the menu
		if(browser.isIE)
			document.attachEvent("onmouseup", closeCMSMenu);
		if(browser.isNS)
			document.addEventListener("mouseup", closeCMSMenu, true);
	}
}

// Confirm that the user wants to delete an item
function deleteItem() {
	if(confirm("Are you sure you want to delete this?"))
		CMSRedirect("delete");
}

// Close (start fading) the menu	
function closeCMSMenu() {
	fadeMenu(1,"out");
}

// Send the user to the CMS redirector page, with the appropriate query string
function CMSRedirect(action,type,pageid) {
	url = window.location;
	url = url.toString();
	url = url.toLowerCase();
	//url = url.replace(siteRoot.toLowerCase(),"");
	url = escape(url);
	
	window.location = siteRoot + "admin/redirector.aspx?vid="+currentID+"&action="+action+"&url="+url+"&type=" + type+"&pageid=" +pageid;
	closeCMSMenu();
}

// Fade-in or fade-out (recursive)
function fadeMenu(action) {
	if(currentID != 0) {
		if(action == "in")
			menuOpacity = menuOpacity + .1;
		else
			menuOpacity = menuOpacity - .1;
		if(browser.isIE)
			menuObj.style.filter = "alpha(opacity="+menuOpacity*100+")";
		else
			menuObj.style.opacity = menuOpacity;
		if(menuOpacity > 0)
			setTimeout("fadeMenu('"+action+"');",fadeSpeed);
		else {
			document.getElementById("CMS_Menu").style.display = "none";
			menuOpacity = 1;
			currentID = 0; }
	}
}


/* UTILITY FUNCTIONS */

// Get the X position of an element
// (accounts for nested positioned elements)
function findPosX(obj)
{
	var curleft = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			curleft += obj.offsetLeft
			obj = obj.offsetParent;
		}
	}
	else if (obj.x)
		curleft += obj.x;
	return curleft;
}

// Get the Y position of an element
// (accounts for nested positioned elements)
function findPosY(obj)
{
	var curtop = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			curtop += obj.offsetTop
			obj = obj.offsetParent;
		}
	}
	else if (obj.y)
		curtop += obj.y;
	return curtop;
}

// Creates the HTML string for an image
function makeImage(src,styles,id)
{
	// If it's a png and the browser is IE, apply the fix
	srcArr = src.split(".");
	if(srcArr[srcArr.length-1] == "png" && browser.isIE)
		return "<img src=\""+imgRoot+"empty.gif\" id="+id+" align='absmiddle' style=\"filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+imgRoot+src+"', sizingMethod='scale');"+styles+"\">";
	else
		return "<img src=\""+imgRoot+src+"\" id="+id+" style=\""+styles+"\" align='absmiddle'>";
}

// Determine browser and version.
function Browser() {

  var ua, s, i;

  this.isIE    = false;
  this.isNS    = false;
  this.version = null;

  ua = navigator.userAgent;

  s = "MSIE";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isIE = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }

  s = "Netscape6/";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }

  // Treat any other "Gecko" browser as NS 6.1.

  s = "Gecko";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = 6.1;
    return;
  }
}