var draggingWindow = null;
var draggingModule = null;


var sizeModule = new Module();
sizeModule.name = "size_mod";
sizeModule.node = document.createElement( 'div' );
sizeModule.node.style.backgroundColor = '#FF0000';
sizeModule.node.style.borderWidth = '1px';
sizeModule.node.style.borderColor = '#000000';
sizeModule.node.style.borderStyle = 'solid';
sizeModule.node.style.height = '100px';
sizeModule.columnIndex = -1;

var sizeModuleOld = new Module();
sizeModuleOld.name = "size_mod_old";
sizeModuleOld.node = document.createElement( 'div' );
sizeModuleOld.node.style.backgroundColor = '#FF0000';
sizeModuleOld.node.style.borderWidth = '1px';
sizeModuleOld.node.style.borderColor = '#000000';
sizeModuleOld.node.style.borderStyle = 'solid';
sizeModuleOld.node.style.height = '100px';
sizeModuleOld.columnIndex = -1;

var refId = 0;

mouseMoveFunction = myMouseMove;

var columns = new Array(3);

columns[0] = new Column( "column0" );
columns[1] = new Column( "column1" );
columns[2] = new Column( "column2" );

function toggleNew( name )
{
   var edit = document.getElementById( "new_" + name );   

   
   if (edit.style.display == "block")   
   {
     edit.style.display = "none";
   }
   else
   {
     edit.style.display = "block";
   }
}



function toggleEdit( name )
{
   var edit = document.getElementById( "edit_" + name );   
   var view = document.getElementById( "view_" + name );   
   
   if (edit.style.display == "block")   
   {
     edit.style.display = "none";
	 view.style.display = "block";
   }
   else
   {
     edit.style.display = "block";
	  view.style.display = "none";
   }
}

var customizePanelIsOpen = false;

function toggleCustomizePanel()
{

   var elem = document.getElementById( "customizePanel" );  
   var tab = document.getElementById( "customize_tab" );
   
  
   if ( customizePanelIsOpen )
   {
	  customizeClose.animate(); 
	  if (tab != null)
	    tab.src = "/images/EN/customize_tab.gif";
      // elem.style.display = "none";
	  customizePanelIsOpen = false;
   }
   else
   {
	  customizeOpen.animate(); 
	  if (tab != null)
	    tab.src = "/images/EN/customize_tab_up.gif";	   
     // elem.style.display = "block"; 
		  customizePanelIsOpen = true;
   }
}



function Column( name, offsetY )
{
  this.modules = new Array();
  this.name = name;
}

function Module()
{
    this.name = '';
	this.float = '';
	this.node = null;
	this.column = null;
	this.allowedColumns = new Array();
	this.isAllowed = isAllowed;
}

function isAllowed( columnIndex )
{
	
   for( var i=0; i<this.allowedColumns.length; i++)
   {
	  if (this.allowedColumns[i] == columnIndex)
         return true;	
   }
   return false;
}

function removeChildrenFromNode(node)
{
   if (node == null)
     return;
	 
   var len = node.childNodes.length;
  
	while (node.hasChildNodes() && node.firstChild != null )
	{
	   node.removeChild(node.firstChild);
	}
	

}

var tmpNodeA = document.createElement( 'div' );
tmpNodeA.setAttribute( 'id' , 'tmpNode' );
tmpNodeA.style.backgroundColor = '#0000FF';
tmpNodeA.style.borderWidth = '1px';
tmpNodeA.style.borderColor = '#000000';
tmpNodeA.style.borderStyle = 'solid';

var tmpNodeB = document.createElement( 'div' );
tmpNodeB.setAttribute( 'id' , 'tmpNode' );
tmpNodeB.style.backgroundColor = '#FF0000';
tmpNodeB.style.borderWidth = '1px';
tmpNodeB.style.borderColor = '#000000';
tmpNodeB.style.borderStyle = 'solid';


var sizeTimeout = null;
var tmpNodeCurrentHeight  =0;


function sizeTmpNode()
{
	
	//update( "modeMessage" ,tmpNodeCurrentHeight );
	
   if (	sizeTimeout != null)
      clearTimeout( sizeTimeout );

   if (tmpNodeCurrentHeight > draggingModuleHeight)
   {
      tmpNodeCurrentHeight -= 5;	 
	  tmpNode.style.height = tmpNodeCurrentHeight + "px";
	  sizeTimeout = setTimeout( sizeTmpNode, 20 );
   }
   else if (tmpNodeCurrentHeight < draggingModuleHeight)
   {
	  tmpNodeCurrentHeight += 5;
	  tmpNode.style.height = tmpNodeCurrentHeight + "px";
	  sizeTimeout = setTimeout( sizeTmpNode, 20 );
   }
}

function layoutModules()
{
   var column, contentNode;
   
  
   
   for(var c=0; c<columns.length; c++)
   { 
	   var contentNode = document.getElementById( columns[c].name );	   	   
	   removeChildrenFromNode( contentNode );
	   

	   for (var i=0; i<columns[c].modules.length; i++)
	   {		  		  
		  var module = columns[c].modules[i];	
		  
          if (module.draggable)
		     contentNode.appendChild( module.node );
	   }	   
   }
}


  
function myMouseMove()
{
  
  
  
		  
		

   if (draggingWindow != null)
   {
	 
	
    var scrollY = getScrollXY()[1];
    var screenBottom = getWindowSize()[1] + scrollY;
	var screenTop = scrollY;
	
	
	if ( mousey > (screenBottom-100) )
	{
	    window.scrollBy(0,40);	
	}
	
	if ( mousey < (screenTop + 100) )
	{
	    window.scrollBy(0,-40);	
	}
	
	 
   draggingWindow.style.top = (mousey + dragOffsetY) + "px";
   draggingWindow.style.left = (mousex + dragOffsetX) + "px";  
   
   var columnIndex = -1;
   
  // var str = "";
	  var c;
	  for(c=0; c<columns.length; c++)
	  {
	     var column = document.getElementById( columns[c].name );
		 var w = getSize( column )[0];
		 var l = findPosX( column );									  
//str += (mousex + dragOffsetX - w/2) + " col " + c  + ":" + findPosX( column ) + ".." + (findPosX( column )+ w ) + "<br>";
		 
		 if ((mousex + dragOffsetX + w/2)>l && (mousex + dragOffsetX + w/2)<=(l+ w))
		 {
		    columnIndex = c;
			break;
		 }   		 
	  }
	  
	// is this panel allowed in this column?
	if (draggingModule==null || !draggingModule.isAllowed( columnIndex ))
	  return;
	
	//  update( "info", str + "[" + columnIndex +"]" );
	 
	//  update( 'modeMessage', str + " [" + columnIndex + "]" );
	
	var str = "";
	
	  if (columnIndex != -1)
	 {
					 
	  

	  // is the module in the correct column?
	  if (draggingModule.columnIndex != columnIndex)
	  {
//         str += "moving from " + draggingModule.columnIndex + " to " + columnIndex + "<br>";
	
	//alert( "moving from " + draggingModule.columnIndex + " to " + columnIndex );
	     // delete from the current column and put in the right column
		 var modules = columns[ draggingModule.columnIndex ].modules;
         //update( "info", modules );
		 
 	     var draggingModuleIndex = getModuleIndex( modules, draggingModule );	
		 
		 //update( "info", "draggingModuleIndex = " + draggingModuleIndex );	   
		 
		 if (draggingModuleIndex >= 0)
		 {		   
		    modules.splice( draggingModuleIndex, 1  );
			
			
			
            // var columnNode = document.getElementById( columns[draggingModule.columnIndex].name );
			
 		//	spacerNode.parentNode.removeChild( spacerNode );
		 }
	     
	   
	    draggingModule.columnIndex = columnIndex;
		
		var modules = columns[ columnIndex ].modules;
		//str += "about to splice..";
		modules.splice( 0, 0,  draggingModule  );
	 //	str+= modules.length;
	 
	    
		
	 }	
	 
	// update( "info", str );
	 
  var modules = columns[ columnIndex ].modules;
	// update( "info", columnIndex + " modules.length = " + modules.length );
	
		var insertIndex = 0;
		
		var draggingModuleIndex = getModuleIndex( modules, draggingModule );
		 
		 if (draggingModuleIndex >= 0)
		 {		   
		    modules.splice( draggingModuleIndex, 1  );
		 }


		if (modules.length == 0)
		{
			insertIndex = 0;
		}
		else
		{
			var cy = findPosY( document.getElementById( columns[columnIndex].name ) ) + getSize( modules[0].node )[1];

			// fill in the ones above current mouse position
			var m = 1;
			while( mousey > cy && (m<modules.length))
			{
				cy += getSize( modules[m].node )[1];
				
				m ++;
			}
			
			if (mousey>cy) m ++;		
			
			insertIndex = m-1;
	     }
		 

		modules.splice( insertIndex, 0,  draggingModule  );
		  
		
	   var spacerNode = document.getElementById( 'spacerNode' );
       var columnNode = document.getElementById( columns[columnIndex].name );
	   
	   spacerNode.parentNode.removeChild( spacerNode );
	   
	   
	   if (insertIndex == columnNode.childNodes.length)
	      columnNode.appendChild( spacerNode );
	   else
 	      columnNode.insertBefore( spacerNode, columnNode.childNodes[ insertIndex  ] );
			   
	   draggingWindow.style.width = getSize( spacerNode )[0] + "px";
	 //  spacerNode.style.height = getSize( draggingWindow )[1] + "px";	   
		  
		// layoutModules(); 
   }
		  
   }
		  
	
}

function findModule( name )
{
for (var c=0; c<columns.length; c++)
{
   for (var i=0; i<columns[c].modules.length; i++)
   {
      var module = columns[c].modules[i];
	  
	  if (module.name == name)
	    return module;
   }
 }  
   return null;
}

function changeOpac(opacity, node) 
{	
    var object = node.style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
}

function beginDrag( obj )
{

	if (typeof obj.srcElement != "undefined")
	  moduleName = "mod_" + obj.srcElement.id.substring( 6 );
	else if (typeof obj.target != "undefined")
	  moduleName = "mod_" + obj.target.id.substring( 6 );
	else
	  moduleName = obj;

    
   if (draggingModule != null)
   {	     
	 endDrag( draggingModule.name );   
	 return;
   }
   draggingModule = findModule( moduleName ); 
      
   draggingModule.node.style.zoom = 1;
   /*
   draggingModule.node.style.borderColor = "#666666";
   draggingModule.node.style.borderWidth = "2px";   
   draggingModule.node.style.borderStyle = "dashed";
   */
   // swap the contents so that embedded object still work
   // draggingModule.node = reference to the contents
   draggingWindow = document.getElementById( 'dragWindow' );
   
 /* var str = "";
  for (var i in draggingModule.node.parentNode){
    str += i + ": " + draggingModule.node.parentNode.getAttribute(i) + ", ";
  }
  */
  /*
  var str = "";
  for( var i=0; i< draggingModule.node.childNodes.length; i++ )
  {
//	  str += draggingModule.node.childNodes[i] + ", ";
  }
  
  */
	
 // alert( draggingModule.node.firstChild.style.backgroundColor )
   
/*
   changeOpac( 50, draggingModule.node );   
   draggingModuleHeight = getSize( draggingModule.node )[1];        
   update( 'dragWindow', draggingModule.node.innerHTML );
   draggingWindow.style.width = getSize( draggingModule.node )[0] + "px";
   draggingWindow.style.height = draggingModuleHeight + "px";
*/

   draggingModuleHeight = getSize( draggingModule.node )[1];  
   draggingWindow.style.width = getSize( draggingModule.node )[0] + "px";
   draggingWindow.style.height = draggingModuleHeight + "px";
   
   
   
   
  

   
   draggingWindow.onmouseup = endDrag;

  
   draggingWindow.style.display = 'block';
   
  // draggingWindow.style.width = '200px';
   
   
	dragOffsetX = findPosX( draggingModule.node  ) - mousex;
	dragOffsetY = findPosY( draggingModule.node  ) - mousey;
	
	
	//update( 'message', findPosX( draggingModule.node  ) + "," + mousex );
	
   draggingWindow.style.top = (mousey + dragOffsetY) + "px";
   draggingWindow.style.left = (mousex + dragOffsetX) + "px";

    var spacerNode = document.getElementById( 'spacerNode' );
	//spacerNode.style.width = getSize( draggingModule.node )[0] + "px";
    spacerNode.style.height = draggingModuleHeight + "px";
	spacerNode.style.display = "block";
   
   
	var p = draggingModule.node.parentNode;
    p.insertBefore( spacerNode, draggingModule.node );
    draggingModule.node = p.removeChild(draggingModule.node );	


		
    while ( draggingWindow.childNodes.length >= 1 )
    {
        draggingWindow.removeChild( draggingWindow.firstChild );       
    } 
    draggingWindow.appendChild( draggingModule.node );   
   

	
   
   
 

	  
  // update( 'info', "start drag" ); 
  
    // cancel text selection
	document.body.focus();
	document.onselectstart = function () { return false; };
      
   return false;
}


function endDrag( obj )
{
	

   if (draggingModule == null)
   {  
      // shouldnt be here!
      if (draggingWindow!= null)
         draggingWindow.style.display = 'none';
		 
      draggingWindow = null;
      return;
   }

   var spacerNode = document.getElementById( 'spacerNode' );
   spacerNode.parentNode.insertBefore( draggingModule.node, spacerNode );
   spacerNode.style.display = "none";
   
  // changeOpac( 100, draggingModule.node );
  
   draggingModule.node.style.borderStyle = "none";      
  
   if (draggingWindow!= null)
      draggingWindow.style.display = 'none';

   draggingModule = null;   
   draggingWindow = null;
   
   // update( 'dragWindow', "" );
  
   // save the windows
   var str = "";
   
   for (var c=0; c<columns.length; c++)
	{
	   for (var i=0; i<columns[c].modules.length; i++)
	   {
		  var module = columns[c].modules[i];
		  if (module.draggable)		  
             str += module.id + "." + module.privacy + "-";
	   }
	   str += ":";
	 }  

//    performCommand( "pagePanelLayout", "panels=" + str + ",pageId="+pageId+",pageType=" + pageType );

    var elem = document.getElementById( "saving" );
    if (elem != null)
	{
	   update( "saving", "Saving..." );
	   elem.style.display = "block";	
	}
    performCommand( "pagePanelLayout", "panels=" + str, "oldCommand", "/command/profileCommand.php" );

 //  layoutModules();
}

function getModuleIndex( modules, m )
{
//update( "info", "getModuleIndex" );
  for( var i=0; i<modules.length; i++)
  {
	 if ( modules[i] == m)
	   return i;
  }
  
  return -1;
}

function findPosX(obj)
  {
    var curleft = 0;
	if (obj == null)
	   return 0;
	   
    if(obj.offsetParent)
        while(1) 
        {
          curleft += obj.offsetLeft;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.x)
        curleft += obj.x;
    return curleft;
  }

  function findPosY(obj)
  {
	if (obj == null)
	   return 0;
	  
    var curtop = 0;
    if(obj.offsetParent)
        while(1)
        {
          curtop += obj.offsetTop;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.y)
        curtop += obj.y;
    return curtop;
  }
  
  
  addMouseMoveListener(  myMouseMove );