var WinHeight = screen.height-80;
   var contentwinfeat = 'toolbar=0,scrollbars=1,status=1,resizable=1,menubar=0,location=0,' +
                        'top=28,left=20,width=850,height=' + (WinHeight - 40);
   var arrCMDiv = new Array();      //global scope array holding IDs of CM elements
   var SiteID = "";                 //global variable holding site ID
   var isEditMode = ""              //global variable
   $(document).ready(function() { drawCMAreas(); });        //on document ready, draw CM areas (IE requires)
   window.onresize = function() { moveCMAreas(); };         //on document resize, draw CM areas
   
   function CM_openBrWindow2(theURL,winName,features) {
     window.open(theURL,winName,features);
   }

   function getPosition(element) {
		var left = 0;
		var top = 0;
		if(element.offsetParent) {
			while(element) {
				left += element.offsetLeft;
				top += element.offsetTop;
				element = element.offsetParent;
			}
		}
		return {offsetLeft: left, offsetTop: top};
	}

   function findPos(obj){
        var posX = obj.offsetLeft;var posY = obj.offsetTop;
		while(obj.offsetParent){
			if(obj==document.getElementsByTagName('body')[0]){break}
			else{
				posX=posX+obj.offsetParent.offsetLeft;
				posY=posY+obj.offsetParent.offsetTop;
				obj=obj.offsetParent;
			}
		}
       var posArray=[posX,posY]
       return posArray;
   }
   function createCMMenu(top, left, contentID, siteID) {
	   //alert(' ' + left + ' ' + top + ' ');
	   //alert (contentID + ' - ' + siteID);
		   var newdiv = document.createElement('div');
		   newdiv.setAttribute("id", "CMMenu_" + contentID);
	       newdiv.style.left = left + 'px';
	       newdiv.style.top = top + 'px';
		   newdiv.style.cursor = "pointer";
           newdiv.style.position = "absolute";
		   newdiv.style.padding = "2px";
		   newdiv.style.backgroundColor = "#EEE";
		   newdiv.style.color = "#000";
		   newdiv.style.display = "none";
	       newdiv.innerHTML = "" +
		      "<div id='CMMenuCmdUp_" + contentID + "'    >Move Up</div>" +
			  "<div id='CMMenuCmdDown_" + contentID + "'  >Move Down</div>" +
			  "<div id='CMMenuCmdDelete_" + contentID + "'>Delete</div>" +
			  "<div id='CMMenuCmdClose_" + contentID + "' >Close</div>";
		   document.body.appendChild(newdiv);
		   $("#CMMenu_" + contentID + " > *").addClass("notover");
		   $("#CMMenu_" + contentID + " > *").mouseover(function() {
                        $(this).attr("style", "background-color:#BBB");
                  }).mouseout(function() {
                        $(this).attr("style", "background-color:#EEE");
                  });
		   $("#CMMenuCmdUp_" + contentID).click(function(){
									                  $("#CMMenu_" + contentID).fadeOut("slow");
													  callCommand("MoveItemUp", contentID, siteID);});
  		   $("#CMMenuCmdDown_" + contentID).click(function(){
									                  $("#CMMenu_" + contentID).fadeOut("slow");
													  callCommand("MoveItemDown", contentID, siteID);});
   		   $("#CMMenuCmdDelete_" + contentID).click(function(){
									                  $("#CMMenu_" + contentID).fadeOut("slow");
													  callCommand("DeleteListItem", contentID, siteID);});
		   $("#CMMenuCmdClose_" + contentID).click(function(){$("#CMMenu_" + contentID).fadeOut("slow");});
   }
   
   function createDiv(id, html, width, height, left, top, background, theURL, command, contentID, siteID) {
	   //alert(id + ' ' + html + ' ' + width + ' ' + height + 
	   //	   ' ' + left + ' ' + top + ' ' + background + ' ' + theURL + ' ' + command);
	   var newdiv = document.createElement('div');
	   newdiv.setAttribute('id', id);
	   newdiv.style.cursor = "pointer";
	   newdiv.style.width = width + 'px';
       newdiv.style.height = height + 'px';
	   if ((left || top) || (left && top)) {
		   newdiv.style.position = 'absolute';
		   if (left) {
			   newdiv.style.left = left + 'px';
		   }
		   if (top) {
			   newdiv.style.top = top + 'px';
		   }
	   }
	   if (command == 'Edit') {
	       newdiv.onclick = function(){CM_openBrWindow2(theURL, 'Content_Operations', contentwinfeat);};
		   newdiv.title = command;
	   }
	   if (command == 'Menu') {
		   //newdiv.onmouseover = function(){ $("#CMMenu_" + contentID).fadeIn("slow"); };
		   newdiv.onmouseover = function(){ $("#CMMenu_" + contentID).fadeIn("slow", 
									function () {
                                                   //$("div").text("'" + $(this).text() + "' has faded!");
                                                   //$(this).remove();
												   setTimeout(function(){$("#CMMenu_" + contentID).fadeOut("slow");}, 4000)
												   //alert(1);
                                                 });};
		   
		   
		   

	   }	   
	   if (background) newdiv.style.backgroundImage = 'url(' + background + ')';
	   newdiv.style.backgroundImage = 'url(' + background + ')';
	   if (html) {
		   newdiv.innerHTML = html;
	   } else {
		   newdiv.innerHTML = '';
	   }
       $(document).ready(function() {
		   document.body.appendChild(newdiv);
       });
   }
   function callCommand(cmd, id, siteID) {
	  // alert("cmd= " + cmd + ", id= " + id + ", siteid= " + siteID);
	   //alert(document.all.imgAddCmd.parentElement.id);
	   //alert(document.getElementById("imgAddCmd").parentNode.id);
	   nocache = Math.random(); //stupid IE cashing issue
       $.get('/CM/CMCommands.php', { cmd: cmd, id: id, siteID: siteID, nocache: nocache }, 
              function(data){
				  if (cmd=="DeleteListItem") {
					  //document.location.reload();
					  
					  /* This code works as well: removing elements without refreshing
					  document.getElementById(id).style.display = 'none';
					  document.getElementById(id + "1").style.display = 'none';
					  document.getElementById(id + "2").style.display = 'none';
					  document.getElementById(id + "3").style.display = 'none';
					  document.getElementById(id + "4").style.display = 'none';
					  document.getElementById(id + "Edit").style.display = 'none';
  					  document.getElementById(id + "Menu").style.display = 'none';
					  moveCMAreas();
					  */
				  }
				  //alert("cmd= " + CMD + ", id= " + ID + ", siteid= " + SITEID + ", data: " + data);
				  if (cmd=="AddListItem") {
					  //document.location.reload();
					  //alert("ADD - " + data);
				  }
				  if (cmd=="GetContent") {
					  return (data);
				  }				  
				  document.location.reload();
              }, 'text');
   }
   function drawCMAreas(){ 
       for ( var i in arrCMDiv )   //for each in CMArea
	   {
		   divPos = getPosition(document.getElementById(arrCMDiv[i][0]));
		   //divLeft =   $(arrCMDiv[i][0]).attr('offsetLeft');
		   //divTop =    $(arrCMDiv[i][0]).attr('offsetTop');
           divHeight = $("#" + arrCMDiv[i][0]).attr("offsetHeight");
           divWidth  = $("#" + arrCMDiv[i][0]).attr("offsetWidth");
  	       divLeft   = divPos.offsetLeft;
           divTop    = divPos.offsetTop;
		   hLassoImg = 'CM/images/CMHBLasso.gif';
	       vLassoImg = 'CM/images/CMVBLasso.gif';
	       url = "CM/EditContent.php?fContentID=" + arrCMDiv[i][0] +"&fSiteID=" + SiteID;
	       editImg = "CM/images/edit.gif";
  	       menuImg = "CM/images/arrow.gif";				  
	       delImg = "CM/images/delete.gif";
		   //alert("id: " + arrCMDiv[i][0] + ", SiteID: " + SiteID + "t: " + 
		   //			  divTop + ", l: " + divLeft + ", w: " + divWidth + ", h: " + divHeight);
		   createDiv(arrCMDiv[i][0] + "1", '', divWidth, 1, divLeft, divTop, hLassoImg, null, null, null, null);
           createDiv(arrCMDiv[i][0] + "2", '', divWidth, 1, divLeft, divTop + divHeight, hLassoImg, null, null, null, null);
	       createDiv(arrCMDiv[i][0] + "3", '', 1, divHeight, divLeft, divTop, vLassoImg, null, null, null, null);
	       createDiv(arrCMDiv[i][0] + "4", '', 1, divHeight, divLeft + divWidth, divTop, vLassoImg, null, null, null, null);
	       createDiv(arrCMDiv[i][0] + "Edit", '', 16, 16, divLeft, divTop, editImg, url, 'Edit', null, null);
		   if (arrCMDiv[i][1]) {
		       createDiv(arrCMDiv[i][0] + "Menu", '', 16, 16, divLeft + 17, divTop, menuImg, null, 'Menu', arrCMDiv[i][0], SiteID);
			   createCMMenu(divTop, divLeft + 26, arrCMDiv[i][0], SiteID);
		   }
       } 
   }
   function moveCMAreas(){ 
       for ( var i in arrCMDiv )   //for each in CMArea
	   {
		   myelement = document.getElementById(arrCMDiv[i][0]);
		   if (myelement.style.display != "none") {
			   divPos = getPosition(document.getElementById(arrCMDiv[i][0]));
			   divLeft   = divPos.offsetLeft;
			   divTop    = divPos.offsetTop;
			   divHeight = $("#" + arrCMDiv[i][0]).attr("offsetHeight");
			   divWidth  = $("#" + arrCMDiv[i][0]).attr("offsetWidth");
			   line1 = document.getElementById(arrCMDiv[i][0] + "1");
			   line2 = document.getElementById(arrCMDiv[i][0] + "2");
			   line3 = document.getElementById(arrCMDiv[i][0] + "3");
			   line4 = document.getElementById(arrCMDiv[i][0] + "4");
			   imgEdit = document.getElementById(arrCMDiv[i][0] + "Edit");
			   line1.style.left = divLeft + "px";
			   line1.style.top  = divTop + "px";
			   line2.style.left = divLeft + "px";
			   line2.style.top  = (divTop + divHeight) + "px";
			   line3.style.left = divLeft + "px";
			   line3.style.top  = divTop + "px";
			   line4.style.left = (divLeft + divWidth) + "px";
			   line4.style.top  = divTop + "px";
			   imgEdit.style.left = divLeft + "px";
			   imgEdit.style.top  = divTop + "px";
			   if (arrCMDiv[i][1]) {
				   imgMenu = document.getElementById(arrCMDiv[i][0] + "Menu");      //img arrow pointing to menu
				   imgMenu.style.left = (divLeft + 17) + "px";
				   imgMenu.style.top  = divTop + "px";	
			   }
				   divMenu = document.getElementById("CMMenu_" + arrCMDiv[i][0]);   //div Menu when move over arrow 
				   if (divMenu != null) {  //if exists
					   //alert('moving ' + arrCMDiv[i][0]);
					   divMenu.style.top = divTop + "px";
					   divMenu.style.left = (divLeft + 26) + "px";
				   }			   
		   }
       } 
   }