//v2 javascript for scrolling
//v2 javascript for drag w/opacity

var topLoc = 264; //height of bricks, toggle this based on page owner/viewer, set in initDrag() below.

var brickCoord = "";
var containerDiv;
var container;
var originalContainerWidths;
var pageEditable = true;

var maxColumnEntries = 16;
var stringColumn = "";
for ( var t=0; t<maxColumnEntries; t++ ) {
    if ( stringColumn != "" ) {
        stringColumn += "|";
    }
    stringColumn += "0~0~0";
}

var globalColumnMaxLength = stringColumn;

var columnYs = new Array( globalColumnMaxLength,  globalColumnMaxLength,  globalColumnMaxLength, globalColumnMaxLength);

var columns;
var colorOffset = 9;
var setGlobalContentWidth = false;
var navBarAdj =0;
var bPageOwner = false;
var footerAdjustment = (document.all != null ? -30 : -43);
var playBookAdjustment = (document.all != null ? 89 : 87);

  function getMouseCoord(e) {

    var mousex,mousey;

    if (!e) e = window.event; // works on IE, but not NS (we rely on NS passing us the event)

    if (e) {
      if (e.pageX || e.pageY)
      { // this doesn't work on IE6!! (works on FF,Moz,Opera7)
      mousex = parseInt( e.pageX, 10 );
      mousey = parseInt( e.pageY, 10 );
      xOffset = 0;
      colorOffset = 9;
      }
      else if (e.clientX || e.clientY)
      { // works on IE6,FF,Moz,Opera7

      // Note: I am adding together both the "body" and "documentElement" scroll positions
      //       this lets me cover for the quirks that happen based on the "doctype" of the html page.
      //         (example: IE6 in compatibility mode or strict)
      //       Based on the different ways that IE,FF,Moz,Opera use these ScrollValues for body and documentElement
      //       it looks like they will fill EITHER ONE SCROLL VALUE OR THE OTHER, NOT BOTH
      mousex = parseInt( e.clientX, 10 ) + parseInt( document.body.scrollLeft, 10 ) + parseInt( document.documentElement.scrollLeft, 10 );
      mousey = parseInt( e.clientY, 10 ) + parseInt( document.body.scrollTop, 10 ) + parseInt( document.documentElement.scrollTop, 10 );
      xOffset = 8;
      colorOffset = 47;
      }
    }

    //writeHistory(mousex + " : " + mousey);draggedSide
    return mousex+","+mousey;
  }


  var xOffset = 0;
  var localDraggedSide;
  var targetOpened = false;
  var sourceClosed = false;
  var targetOpening = false;
  var targetAtHome = true;
  var targetDirection = 0;

  var dragobj = null
  var elex = 0;
  var eley = 0;
  var grabx = 0;
  var graby = 0;
  var orix = 0;
  var oriy = 0;

  var yLimitTop;
  var yLimitBottom;
  var origX;
  var origY;

  var insertable = false;
  var insertAboveId;
  var insertAboveDivId;
  var draggedId;
  var draggedDivId;

  var insertSide = -1;
  var draggedSide = -1;
  var draggedHeight = 0;
  var draggedYIndex = 0;

  var returningHome = false;
  var orphanDraggedDiv = false;
  var orphanDraggedReturnDiv = false;
  var orphanTargetDraggedDiv = false;
  var orphanTargetDraggedReturnDiv = false;

  var inDrag = false;
  var startedDrag = false;
  var inReset = false;
  var inDroppable = false;
  var noDragDiv = null;

  var yloc = 185;

  function falsefunc() { return false; } // used to block cascading events

  function setOpacity(value) {
          dragobj.style.opacity = value/10;
          dragobj.style.filter = 'alpha(opacity=' + value*10 + ')';
  }

  function dragStart(event, id) {

    if (pageEditable)return;

    var coord = getMouseCoord(event).split(",");
    grabx = parseInt(coord[0],10);
    graby = parseInt(coord[1],10);
    var currentGrabbed = document.getElementById( id );
    inDroppable = false;

    var topGrabbed = graby - parseInt(currentGrabbed.offsetTop,10);

    if ( topGrabbed < 25 ) {


      inReset = false;

      targetOpened = false;
      targetAtHome = true;
      targetOpening = false;
      returningHome = false;
      orphanDraggedDiv = false;
      orphanDraggedReturnDiv = false;

      inDrag = false;
      document.onmousedown = falsefunc; // in NS this prevents cascading of events, thus disabling text selection
      document.onmousemove = dragGo;
      document.onmouseup = dragStop;

      if ( returningHome == false ) {

        var grabbedObj = document.getElementById(id);

	    draggedSide = findDivColumn( id );
        dragobj = document.createElement("DIV");
        dragobj.id = id + "dragged"
        dragobj.style.top = parseInt( grabbedObj.offsetTop, 10 ) + "px";
        dragobj.style.left = parseInt( grabbedObj.offsetLeft, 10 ) + "px";
        dragobj.style.position = "absolute";
        dragobj.innerHTML = grabbedObj.innerHTML;
        dragobj.className = "DragBox"+columns[draggedSide];
        dragobj.style.zIndex = 10000;
	    container.appendChild( dragobj );

	var columnContainer = document.getElementById( "DragContainer"+(draggedSide+1) );
	columnContainer.removeChild( grabbedObj );

        elex = orix = origX = parseInt( dragobj.offsetLeft, 10 );
        eley = oriy = origY = parseInt( dragobj.offsetTop, 10 );

        //get upper and lower bounds
        yLimitTop = 0;
        yLimitBottom = 5000;

        draggedId = parseInt( oriy, 10 );
	    draggedDivId = id;
        draggedSide = findDivColumn( id );


        var columnYsArray = columnYs[ draggedSide+1 ].split("|");

        for ( var y=0; y<columnYsArray.length; y++ ) {
          if ( columnYsArray[y] != "0~0~0" ) {
            var brickDataArray = columnYsArray[y].split("~");
            if ( draggedDivId == brickDataArray[2] ) {
		draggedYIndex = y;
		break;
            }
          }
        }
     }

      startedDrag = true;
    }
  }

  function dragGo(event) {


    var windowHeight = parseInt(document.body.clientHeight,10);
    //var
    inDrag = true;
    if ( startedDrag == true ) {
      setOpacity(5);
      sourceClosed = false;
      orphanDraggedDiv = true;
      orphanDraggedReturnDiv = false;
      setOrphanedDiv( origX, origY, draggedSide, draggedId );
      startedDrag = false;
    }

var winH;
if (parseInt(navigator.appVersion)>3) {
 if (navigator.appName=="Netscape") {
  winH = window.innerHeight;
 }
 if (navigator.appName.indexOf("Microsoft")!=-1) {
  winH = document.documentElement.offsetHeight;
 }
}

    if (dragobj) {
      var coord = getMouseCoord(event).split(",");
      
      
      


     if (parseInt( coord[1], 10 ) - parseInt( document.documentElement.scrollTop, 10 ) < 250 ) {
        var scrollPosition = parseInt( document.documentElement.scrollTop, 10 );
        scrollPosition = scrollPosition - 10 ;
        document.documentElement.scrollTop  = scrollPosition ;
    }

      else if (  winH - (parseInt( coord[1], 10 ) - parseInt( document.documentElement.scrollTop, 10 )) < 250 ){
            var footerDiv = parseInt(document.getElementById( "footer" ).offsetTop,10);
            if(parseInt( coord[1], 10 )  < footerDiv - 50) {
                var scrollPosition = parseInt( document.documentElement.scrollTop, 10 );
                var varDistance = ( parseInt(dragobj.offsetHeight,10) - (winH - (parseInt( coord[1], 10 ) - parseInt( document.documentElement.scrollTop, 10 )))) / 10;
                scrollPosition = scrollPosition + 10 //scrollPosition + varDistance ;
                document.documentElement.scrollTop  = scrollPosition ;
            }
    }




      coord = getMouseCoord(event).split(",");
      elex = orix + ( parseInt( coord[0], 10 ) - grabx);
      eley = oriy + ( parseInt( coord[1], 10 ) - graby);
      dragobj.style.position = "absolute";

      if ( (elex).toString(10) < 770 && (eley).toString(10) < yloc ) {

      } else {
        dragobj.style.left = (elex).toString(10) + 'px';
        dragobj.style.top  = (eley).toString(10) + 'px';
      }
      //iterate through all the coords of current boxes to see if the dragged div is covering
      insertable = false;
      insertSide = -1;

      if ( orphanDraggedDiv == false ) {

   if (noDragDiv != null){
      var body = document.getElementsByTagName("body")[0];
      body.removeChild( noDragDiv );
      noDragDiv = null;
   }
	var anyHits = false;
	for ( var column=0; column<columns.length; column++ ) {
          var columnYsArray = columnYs[ column+1 ].split("|");

          for ( var y=0; y<columnYsArray.length; y++ ) {
            if ( columnYsArray[y] != "0~0~0" ) {

              var doDrop = true;
              var columnConstraintField = dragobj.getElementsByTagName("input")[1];
              if ( typeof(columnConstraintField)!='undefined' && columnConstraintField.id == ("columnConstraint" + draggedDivId) ) {
                  if ( columnConstraintField.value != "" ) {
                     if ( parseInt( columnConstraintField.value ) != columns[column] ) {
                       doDrop = false;
                     }

                  }
              }
             
    	        var brickDataArray = columnYsArray[y].split("~");
                var thisX = parseInt( document.getElementById( "DragContainer" + (column+1) ).offsetLeft, 10 ) + 5;
    	        var thisY = parseInt( brickDataArray[0], 10 );
    	        var height = parseInt( brickDataArray[1], 10 );
    	        var thisId = brickDataArray[2];

		        if ( y > draggedYIndex && draggedSide == column ) {
			        thisY -= dragobj.offsetHeight;
		        }

                if ( ( thisY - 50 ) > eley ) {
                  break;
                } else if ( ( !( thisId == draggedDivId ) &&
                  ( ( thisY + 30 ) > eley ) && ( ( thisY - 50 ) < eley ) &&
                  ( ( thisX + 70 ) > elex ) && ( ( thisX + 30 ) < elex + 100 )
                  ) || ( thisY == "0" && y == 0 ) ) {
 if ( doDrop == false ) {
       var body = document.getElementsByTagName("body")[0];
  
//   if (noDragDiv != null){
//      body.removeChild( noDragDiv );
//   }
      var noDragWidth = parseInt(dragobj.offsetWidth,10);
      var noDragHeight = parseInt(dragobj.offsetHeight,10);
      noDragDiv = document.createElement("DIV");
      noDragDiv.id = "noDragDiv";
      noDragDiv.style.top = (parseInt( dragobj.offsetTop, 10 ) + noDragHeight/2) - 30 + "px";
      noDragDiv.style.left = (parseInt( dragobj.offsetLeft, 10 ) + noDragWidth/2) - 30 + "px";
      noDragDiv.style.position = "absolute";
      noDragDiv.innerHTML = "<image src='http://images.covers.com/spaces/common/no-drag.png' width='61' height='61'/>";


    //  var containDiv = document.getElementById( "DragContainer"+(draggedSide+1) );
      body.appendChild(noDragDiv);

    

}else{
 	             anyHits = true;
	             if ( inDroppable == false ) {
                    var inner = dragobj.innerHTML;
                    var newDragobj = document.createElement("DIV");
                    var id = dragobj.id;

                    newDragobj.id = "new" + id;
                    newDragobj.style.top = parseInt( dragobj.offsetTop, 10 ) + "px";
                    newDragobj.style.left = parseInt( dragobj.offsetLeft, 10 ) + "px";
                    newDragobj.style.position = "absolute";
                    newDragobj.innerHTML = inner;
                    newDragobj.className = "DragBox"+columns[column];

                    newDragobj.style.width = originalContainerWidths[column];
		            container.appendChild( newDragobj );
                    var orphanDiv = document.getElementById( id );

                    dragobj = newDragobj;

                    container.removeChild( orphanDiv );
                    dragobj.id = id;
                    setOpacity(5);
                    var newHeight = parseInt( newDragobj.offsetHeight, 10 );
                    //writeHistory("draggable false"); //createTargetGhost( draggedHeight, dragobj.offsetWidth, thisX, thisY );

	            draggedHeight = newHeight - 18;
		  }

                  insertable = true;
                  insertSide = column;
                  insertAboveId = thisY;
                  insertAboveDivId = thisId;
                  inDroppable = true;

                  if ( targetAtHome == true ) {
                    orphanTargetDraggedReturnDiv = false;
                    targetDirection = 1;
                    createTargetGhost( draggedHeight, dragobj.offsetWidth, thisX, thisY );

                    if ( thisY != "0" ) {
                      setTargetForOrphanedDiv( thisX, thisY, column, insertAboveId, 25 );
                    }
                  }
                  break;
                }
              }
            }
          }
        }
	if ( anyHits == false ) {
          inDroppable = false;
          setOpacity(5);
	} else {
          setOpacity(10);
	}
      }


      if ( insertable == false ) {
        if ( targetOpened == true || targetAtHome == true || targetOpening == true ) {
          if ( targetOpened == true || targetOpening == true ) {
            targetDirection = -1;
            removeTargetGhost();
          } else if ( targetAtHome == true ) {
            targetDirection = 1;
          }
        }
      }

    }
    return false;
  }



  function dragStop(event) {

    try{

    document.onmouseup = null;
    document.onmousedown = null;   // re-enables text selection on NS
    document.onmousemove = null;
    startedDrag = false;

    if ( inDrag == true ) {

      if (dragobj) {
        dragobj.style.zIndex = 1;
        setOpacity(10);

        if ( ( eley < yLimitTop || eley > yLimitBottom || insertable == false ) && ( yLimitTop != -30 || yLimitBottom != 0 ) ) {
          //snap back to orig position
          setMoveDiv(elex, eley, origX, origY );
          orphanDraggedReturnDiv = true;
          orphanDraggedDiv = false;
          shiftDivsForOrphanReturn();
          returningHome = true;
             if (noDragDiv != null){
      var body = document.getElementsByTagName("body")[0];
      body.removeChild( noDragDiv );
      noDragDiv = null;
   }


	      var inner = dragobj.innerHTML;
          var newDragobj = document.createElement("DIV");
          var id = dragobj.id;

          newDragobj.id = "new" + id;
          newDragobj.style.top = parseInt( dragobj.offsetTop, 10 ) + "px";
          newDragobj.style.left = parseInt( dragobj.offsetLeft, 10 ) + "px";
          newDragobj.style.position = "absolute";
          newDragobj.innerHTML = inner;
          newDragobj.className = "DragBox"+columns[draggedSide];

          newDragobj.style.width = originalContainerWidths[draggedSide];
          container.appendChild( newDragobj );
          var orphanDiv = document.getElementById( id );
          if (orphanDiv == null){ orphanDiv = document.getElementById( "new" + id );}
          dragobj = newDragobj;
          container.removeChild( orphanDiv );

          dragobj.id = id;
          setOpacity(10);

        } else if ( insertable == true ) {
          if ( insertSide != -1 ) {
            closeFromGap( draggedDivId, draggedSide );

            //now open up a space for the new box
    	    var columnYsArray = columnYs[ insertSide+1 ].split("|");
            var newYlocs = "";
            var found = false;
            var heightAdder = 0;
            for ( var t=0; t<columnYsArray.length - 1; t++ ) {
              if ( newYlocs != "" ) {
                newYlocs += "|";
              }
              var gridItem = columnYsArray[t].split("~");
              var thisY = parseInt( gridItem[0], 10 );
              var thisHeight = parseInt( gridItem[1], 10 );
              var thisId = gridItem[2];
              if ( thisId == insertAboveDivId ) {
		        newYlocs += ( thisY + "~" + draggedHeight + "~" + draggedDivId + "|" );
                heightAdder = parseInt(dragobj.offsetHeight,10);
		        found = true;
              }
              if ( found == false ) {
		           newYlocs += ( columnYsArray[t] );
              } else {
	            if ( thisId != 0 ) {
                    newYlocs += ( ( thisY + heightAdder ) + "~" + thisHeight + "~" + thisId );
	            } else {
	                newYlocs += ( "0~0~0" );
	            }
              }
            }
            columnYs[ insertSide+1 ] = newYlocs;

            var ghostDiv = document.getElementById( "TargetGhost" );

            var inner = dragobj.innerHTML;

            var newDragobj = document.createElement("DIV");
            newDragobj.id = ( dragobj.id ).substring( 0, dragobj.id.indexOf("dragged"));
            newDragobj.style.top = parseInt( ghostDiv.offsetTop, 10 ) + "px";
            newDragobj.style.left = parseInt( ghostDiv.offsetLeft, 10 ) + "px";
            newDragobj.style.position = "absolute";
            newDragobj.innerHTML = inner;
            newDragobj.className = "DragBox"+columns[insertSide];
            newDragobj.style.width = originalContainerWidths[insertSide];

            var containDiv = document.getElementById( "DragContainer"+(insertSide+1) );
            //dragobj.parentNode.removeChild(dragobj);
	        container.removeChild( dragobj );
            containDiv.appendChild(newDragobj);

            removeTargetGhost();
          }

          resetDivs(); //dragStop
          modifyIdString();
        }
      }
      orphanTargetDraggedDiv = false;
      targetOpened = false;
    } else {
      //double click on scorebox happened
      var inner = dragobj.innerHTML;
      var newDragobj = document.createElement("DIV");
      newDragobj.id = ( dragobj.id ).substring( 0, dragobj.id.indexOf("dragged"));
      newDragobj.style.top = parseInt( dragobj.offsetTop, 10 ) + "px";
      newDragobj.style.left = parseInt( dragobj.offsetLeft, 10 ) + "px";
      newDragobj.style.position = "absolute";
      newDragobj.innerHTML = inner;
      newDragobj.className = "DragBox"+columns[draggedSide];
      newDragobj.style.width = originalContainerWidths[draggedSide];

      var containDiv = document.getElementById( "DragContainer"+(draggedSide+1) );
      container.removeChild( dragobj );
      containDiv.appendChild(newDragobj);

      resetDivs(); //dragStop

    }
    inDrag = false;
    removeTargetGhost();
    return false;

    } catch (e) {
    }
  }

  function closePanel( divId ) {
    var brickData = findBrickPosition( divId );
    var brickElement = brickData.split("~");
    var column = parseInt( brickElement[1], 10 );
    var brickHandle = document.getElementById( divId );
    containerDiv[column-1].removeChild( brickHandle );

    //remove the brick
    ajaxUpdates.RemoveBrick(divId,removeBrick_callback);

    closeFromGap( divId, column-1 );
    //re-calc all the bricks positions and save
    resetDivs(); //closePanel
    modifyIdString();
  }

  function UpdateLayout_callback(response){
  }
  function removeBrick_callback(response){
  }

  function closeFromGap( inDivId, column ) {

    var columnYsArray = columnYs[ column+1 ].split("|");
    var newYlocs = "";
    var heightSubber = 0;
    for ( var y=0; y<columnYsArray.length; y++ ) {
      var brickDataArray = columnYsArray[y].split("~");
      var thisY = parseInt( brickDataArray[0], 10 );
      var thisHeight = parseInt( brickDataArray[1], 10 );
      var thisId = brickDataArray[2];
      if ( inDivId != thisId ) {
        if ( newYlocs != "" ) {
          newYlocs += "|";
        }
        if ( thisId != "0" ) {
          newYlocs += ( ( thisY - heightSubber ) + "~" + thisHeight + "~" + thisId );
        } else {
          newYlocs += ( "0~0~0" );
        }
      } else {
	  }
    }
    if ( newYlocs != "" ) {
      newYlocs += "|";
    }
    newYlocs += ( "0~0~0" );
    columnYs[ column+1 ] = newYlocs;
  }

  function setTargetForOrphanedDiv( x1, y1, column, insertAboveId, speed ) {

    var columnTargetIds = new Array(100);
    var columnTargetYlocs = new Array(100);
    var columnYsArray = columnYs[ column+1 ].split("|");

    var count = 0;
    for ( var t=0; t<columnYsArray.length; t++ ) {
      var gridItem = columnYsArray[t].split("~");
      var thisY = parseInt( gridItem[0], 10 );
      var thisId = gridItem[2];
      if ( thisY >= insertAboveId ) {
        var divToShift = document.getElementById( thisId );

        if ( !( thisId == draggedDivId ) ) {
          columnTargetIds[ count ] = thisId;
          columnTargetYlocs[ count ] = parseInt(divToShift.style.top, 10);
          count++;
        }
      }
    }

    targetOpening = true;
    targetAtHome = false;
    shiftTargetDivsForOrphan( draggedHeight, dragobj.offsetWidth, x1, y1, ""+columnTargetIds, ""+columnTargetYlocs, count, 0, speed );
  }

  function shiftTargetDivsForOrphan( height, width, x1, y1, columnTargetIds, columnTargetYlocs, count, index, speed ) {

    if ( targetAtHome == false && inReset == false ) {
        var colArray = columnTargetIds.split(",");
        var colYlocsArray = columnTargetYlocs.split(",");

        if ( targetDirection != 0 ) {
          index += ( speed * targetDirection );
          if ( index > height + (pageEditable == false  ? 35: 15) ) { //open wide
            index = height + (pageEditable == false  ? 35: 15);
            targetOpened = true;
            targetAtHome = false;
            targetOpening = false;
            targetDirection = 0;

          } else if ( index < 0 ) {
            index = 0;
            targetAtHome = true;
            targetDirection = 0;
          }
          for ( var i=0; i<count; i++ ) {
            var divToShift = document.getElementById( colArray[i] );
            divToShift.style.top = ( parseInt(colYlocsArray[i]) + index ) + "px";
          }
        }

        if ( targetAtHome == false ) {
          window.setTimeout("shiftTargetDivsForOrphan("+height+","+width+","+x1+","+y1+",'"+columnTargetIds+"','"+columnTargetYlocs+"',"+count+","+index+","+speed+");", 1 );
        } else {
            targetOpened = false;
            targetOpening = false;
        }
     }
  }


  var localDraggedSide;
  var localDraggedId;
  var columnEventIds = new Array(100);
  var shiftCount;
  var stopShiftingAtY;
  var currentYShift;
  var yShift = 50;
  var returnOrphanY;

  function setOrphanedDiv( x1, y1, column, draggedYloc  ) {
    localDraggedSide = column;
    localDraggedId = draggedYloc;
    stopShiftingAtY = y1;
    shiftCount = 0;
    var columnYsArray = columnYs[ column+1 ].split("|");
    for ( var t=0; t<columnYsArray.length; t++ ) {
      if ( columnYsArray[t] != "0~0~0" ) {
        var gridItem = columnYsArray[t].split("~");
        var thisY = parseInt( gridItem[0], 10 );
        var thisId = gridItem[2];
        if ( thisY > draggedYloc ) {
          var divToShift = document.getElementById( thisId );
          if ( shiftCount == 0 ) {
            returnOrphanY = parseInt( divToShift.offsetTop, 10 );
          }
          columnEventIds[ shiftCount ] = thisId;
          shiftCount++;
        }
      }
   }

    if ( shiftCount != 0 ) {
      shiftDivsToFillOrphan();
    } else {
      orphanDraggedDiv = false;
    }
  }

  function shiftDivsToFillOrphan() {

    if ( orphanDraggedDiv = true && inReset == false ) {
      var doMore = false;
      currentYShift = yShift;
      for ( var i=0; i<shiftCount; i++ ) {
        var divToShift = document.getElementById( columnEventIds[i] );
        var currYCoord = parseInt( divToShift.offsetTop, 10) ;
        if ( i == 0 ) {

          if ( currYCoord - currentYShift <= stopShiftingAtY ) {
            currentYShift = currYCoord - stopShiftingAtY;
            orphanDraggedDiv = false;

            if ( sourceClosed == false ) {
              divToShift.style.top = ( currYCoord - currentYShift ) + "px";
            }
            sourceClosed = true;

            doMore = false;
          } else {
            doMore = true;
          }

        }
        divToShift.style.top = ( currYCoord - currentYShift ) + "px";
     }

      if ( doMore == true && returningHome == false ) {
          window.setTimeout("shiftDivsToFillOrphan();", 1 );
      }
    }
  }

  function shiftDivsForOrphanReturn() {

    if ( orphanDraggedReturnDiv = true && inReset == false ) {
      var doMore = false;
      currentYShift = yShift;
      for ( var i=0; i<shiftCount; i++ ) {
        var divToShift = document.getElementById( columnEventIds[i] );
        var currYCoord = parseInt( divToShift.offsetTop, 10 );

        if ( i == 0 ) {
          if ( currYCoord + currentYShift >= returnOrphanY ) {
            currentYShift = returnOrphanY - currYCoord;
            divToShift.style.top = ( currYCoord + currentYShift ) + "px";
            orphanDraggedDiv = false;
            doMore = false;
          } else {
            doMore = true;
          }
        }
        divToShift.style.top = ( currYCoord + currentYShift ) + "px";
      }

      if ( doMore == true ) {
        window.setTimeout("shiftDivsForOrphanReturn();", 1 );
      }
    }
  }


function resetDivsCoordinateMap() {

  for ( var x=0; x<columns.length; x++ ) {
    var columnYsArray = columnYs[ x+1 ].split("|");
    var newYlocs = "";
    for ( var y=0; y<columnYsArray.length; y++ ) {
      if ( columnYsArray[y] != "0~0~0" ) {
	    var brickDataArray = columnYsArray[y].split("~");
        var yloc = parseInt( brickDataArray[0], 10 );
        var height = parseInt( brickDataArray[1], 10 );
        var divId = brickDataArray[2];
	    var div = document.getElementById( divId );
	    columnYsArray[y] = ( parseInt( div.style.top, 10 ) ) + "~" + height + "~" + divId;
      }
      if ( newYlocs != "" ) {
        newYlocs += "|";
      }
      newYlocs += ( columnYsArray[y] );
    }
    columnYs[ x+1 ] = newYlocs;
  }

}

  function resetDivs() {

    var lastHeight;
    var lastY;
    var highestY = 0;
    for ( var x=0; x<columns.length; x++ ) {
      var columnYsArray = columnYs[ x+1 ].split("|");
      var newYlocs = ""
      for ( var y=0; y<columnYsArray.length; y++ ) {
        if ( columnYsArray[y] != "0~0~0" ) {
	      var brickDataArray = columnYsArray[y].split("~");
          var yloc;
          var height = parseInt( brickDataArray[1], 10 );
          var divId = brickDataArray[2];
          if ( y == 0 ) {
            yloc = topLoc + 35;
          } else {
            yloc = lastHeight + lastY + (pageEditable == false ? 35: 15);
            if ( yloc > highestY ) {
              highestY = yloc + height;
            }
          }
          var div = document.getElementById( divId );
          div.style.top = yloc + "px";
          if ( newYlocs != "" ) {
            newYlocs += "|";
          }
          newYlocs += ( yloc + "~" + height + "~" + divId );
          lastHeight = height;
          lastY = yloc;
        } else {
           if ( newYlocs != "" ) {
             newYlocs += "|";
           }
           newYlocs += ( "0~0~0" );
        }
      }
      columnYs[ x+1 ] = newYlocs;
    }

    //position footer
    var footerDiv = document.getElementById( "footer" );
    footerDiv.style.left = "0px";
    footerDiv.style.top = ( highestY + 127) + "px";
    footerDiv.className="visible";

    
    //position footer banner ad
    var footerDivAdBanner = document.getElementById( "divFooterAdBanner" );
    footerDivAdBanner.style.left = "4px";
    footerDivAdBanner.style.top = ( highestY + 127 - parseInt(footerDivAdBanner.offsetHeight,10)) + "px";
    footerDivAdBanner.style.visibility = "visible";
    

    //div for background color of team stylesheets
    var divColor= document.getElementById( "divColor" );
    divColor.style.left = "0px";
    divColor.style.top = topLoc + "px";
    divColor.style.height = (highestY + 10 - topLoc - colorOffset + 50 + footerAdjustment) + "px";
    divColor.style.width = "0px";

    returningHome = false;
    orphanDraggedDiv = false;
    orphanDraggedReturnDiv = false;
    inDrag = false;
    inReset = true;
    
    //adjust the playbook
    try{
       document.getElementById( "taPlaybook" ).cols =  playBookAdjustment;
    } catch (e) {
    }
    
    
  }


//---------------- snap back into grid --------------
  var dx, dy, acc, max, adder, advance, loop;
  var xDirection, yDirection;
  var movingX1, movingX2, movingY1, movingY2;

  function setMoveDiv(x1, y1, x2, y2 ) {

    movingX1 = x1;
    movingX2 = x2;
    movingY1 = y1;
    movingY2 = y2;

    dx = (movingX2 - movingX1);
    if ( dx < 0 ) { dx = -dx; xDirection = -1; }
    else if ( dx > 0 ) xDirection = 1;
    else xDirection = 0;

    dy = (movingY2 - movingY1);
    if ( dy < 0 ) { dy = -dy; yDirection = -1; }
    else if ( dy > 0 ) yDirection = 1;
    else yDirection = 0;

    if ( dx > dy ) { max = dx; adder = dy; advance = 0; }
    else { max = dy; adder = dx; advance = 1; }

    acc = 0;
    loop = 0;
    moveDiv();
  }

  function moveDiv() {
    var localLoop = 0
    while ( localLoop < 20 && loop<max ) {
      acc += adder;
      if ( acc >= max ) {
        acc -= max;
        if ( advance != 0 ) {
          movingX1 += xDirection;
        } else {
          movingY1 += yDirection;
        }
      }
      if ( advance != 0 ) {
        movingY1 += yDirection;
      } else
        movingX1 += xDirection;
      dragobj.style.top = movingY1 + "px";
      dragobj.style.left = movingX1 + "px";

      loop++;
      localLoop++;
    }
    if ( loop<max ) {
      window.setTimeout("moveDiv();", 1 );
    } else {

      var inner = dragobj.innerHTML;

      var newDragobj = document.createElement("DIV");
      newDragobj.id = ( dragobj.id ).substring( 0, dragobj.id.indexOf("dragged"));
      newDragobj.style.top = parseInt( dragobj.offsetTop, 10 ) + "px";
      newDragobj.style.left = parseInt( dragobj.offsetLeft, 10 ) + "px";
      newDragobj.style.position = "absolute";
      newDragobj.innerHTML = inner;
      newDragobj.className = "DragBox"+columns[draggedSide];

      newDragobj.style.width = originalContainerWidths[draggedSide];

      var containDiv = document.getElementById( "DragContainer"+(draggedSide+1) );
      container.removeChild( dragobj );
      containDiv.appendChild(newDragobj);

      returningHome = false;
      resetDivs(); //moveDiv

    }
  }

//---------------- end snap back into grid --------------


  function createTargetGhost( height, width, x1, y1 ) {

    var containDiv = document.getElementById( "DragContainer"+(insertSide+1) );

    var oDiv=document.createElement("DIV");
    oDiv.id = "TargetGhost";
    oDiv.style.borderStyle = "solid";
    oDiv.style.position = "absolute";
    oDiv.style.zIndex = 0;
    oDiv.style.left = ( parseInt( containDiv.offsetLeft, 10 ) + xOffset ) + "px";
    oDiv.style.top = ( y1 - ( y1 != ( topLoc + (pageEditable == false  ? 35: 15) ) ? 9 : 0 ) ) + "px";
    oDiv.style.width = ( originalContainerWidths[insertSide] - xOffset ) + "px"; //width - 8
    oDiv.style.height = ( draggedHeight + 9 )+ "px"; //( height + 9 ) + "px"; //-22
  oDiv.style.opacity = 3/10;
  oDiv.style.filter = 'alpha(opacity=' + 3*10 + ')';
    container.appendChild(oDiv);
  }

  function removeTargetGhost() {
    var targetGhostDiv = document.getElementById( "TargetGhost" );
    if ( targetGhostDiv != null ) {
        container.removeChild(targetGhostDiv);
    }
  }

function writeHistory(message){

    if (document.getElementById('History1') != null){

		historyDiv = document.getElementById('History1');
		historyDiv.appendChild(document.createTextNode(message));
		historyDiv.appendChild(document.createElement('BR'));
		historyDiv.scrollTop += 50;
    }
}


//called when user clicks on either custom view or public
//this function goes through all the bricks checking the editable field, if editable, it will
//show the close box and the grey edit area on the brick
function flipEditable( canEdit ) {

  pageEditable = canEdit;
  for ( var t=0; t<columns.length; t++ ) {
    var columnBricks = containerDiv[t].childNodes;
    for (var j=0;j<columnBricks.length;j++) {
       if ( typeof(columnBricks[j])!='undefined' && typeof(columnBricks[j].id)!='undefined' && columnBricks[j].id.length > 0) {
         var id = columnBricks[j].id;
         var isEditable = columnBricks[j].getElementsByTagName("input")[0];
         if ( typeof(isEditable)!='undefined' && isEditable.id == ("isEditable" + id) ) {
           var divHandle = document.getElementById("close"+id );
           if ( divHandle != null ) {
             if ( pageEditable ) {
               divHandle.style.display = "none";
             } else {
               divHandle.style.display = "block";
             }
	         var isEditable = isEditable.value;
             if ( isEditable == "true" ) {
               divHandle = document.getElementById("editable"+id );
               divHandle.style.display = ( canEdit ? 'none' : 'block' );
             }
           }
         }
       }
    }
  }
          //show the customize name span
          var spanCustomizeMode = document.getElementById("spanUserCustomize");
          var divTabText = document.getElementById("divTabText");
          if (canEdit){

            if (bPageOwner){
             //create a cookie to indicate 'public' mode
             setInitialViewCookie("SpacesInitialView","public","365")
             document.getElementById('Customize').className=null;
             document.getElementById('Public View').className='active'

             //control center
             try{
               document.getElementById('aCCPublic').style.display = "none";
               document.getElementById('aCCCustomize').style.display = "block";
             } catch (e) {
             }
            }

             spanCustomizeMode.innerHTML = "";
             divTabText.innerHTML = "&nbsp;&nbsp;";

          }else{

            if (bPageOwner){
             //create a cookie to indicate 'customize' mode
             setInitialViewCookie("SpacesInitialView","customize","365")
             document.getElementById('Customize').className='active'
             document.getElementById('Public View').className=null;

              //control center
              try{
               document.getElementById('aCCPublic').style.display = "block";
               document.getElementById('aCCCustomize').style.display = "none";
              } catch (e) {
              }
            }

            spanCustomizeMode.innerHTML = "&nbsp;- Customize";
            divTabText.innerHTML = '<img src="http://images.covers.com/spaces/controls/add.gif" alt="add content" align="absmiddle" /><a href="addcontent.aspx">Add Content</a>&nbsp;&nbsp;<img src="http://images.covers.com/spaces/controls/customize-mini.png" alt="change colors" align="absmiddle" /><a href="changecolors.aspx">Change Colors</a>&nbsp;<img src="http://images.covers.com/spaces/controls/layout.png" align="absmiddle"><a href="changelayout.aspx">Change Layout</a>';
          }


          resetDivs(); //flipEditable
          //modifyIdString(); //unnecessary save
}

function setInitialViewCookie(c_name,value,expiredays){
    var exdate = new Date();
    exdate.setDate(exdate.getDate()+expiredays);
    document.cookie=c_name+ "=" +escape(value)+ ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}


//search through all the bricks for the one that matches the brick id passes,
//and return its coordinates ( column and row )
function findBrickPosition( id ) {
    var coordElement = brickCoord.split("|");
    for ( var s=1; s<coordElement.length-1; s++ ) {
      var brickElement = coordElement[s].split("~");
      if ( ( brickElement[0] + "|" ) == ( id + "|" ) ) {
	    return coordElement[s];
      }
    }
    return null;
}

//find the first empty row/column that a brick will fit in, then return that row/column
//this function is passes the brick column that it will fit in, if passed empty string,
//the function will assume any column
function findNextEmptySpace( brickWidth, brickId ) {
  //brick1~1~1|brick2~1~2|brick6~2~1|brick5~2~2 //originalContainerWidths[columnNum-1];
  if ( brickCoord != null ) {
    for ( var y=0; y<100; y++ ) {
      for ( var x=0; x<columns.length; x++ ) {
        if ( brickCoord.indexOf( "~"+(x+1)+"~"+(y+1)+"|" ) == -1 ) {
          if ( brickWidth != "" ) {
             if ( brickWidth == columns[x] ) {
        		return "~"+(x+1)+"~"+(y+1)+"|";
             }
          } else {
            if ( brickId.indexOf("empty") != -1 ) {
              return "~"+brickId.substring(0,brickId.indexOf("-"))+"~"+(y+1)+"|";
            } else {
              return "~"+(x+1)+"~"+(y+1)+"|";
            }
          }
        }
      }
    }
  }
  return null;
}

//goes through all the bricks in the waiting pool that is not already
//registered in the db
function findUnassignedBrick() {

  if ( brickCoord != null ) {
    var theBrick = document.getElementById("theBricks");
    theBrick = theBrick.childNodes;
    for (var j=0;j<theBrick.length;j++) {
      if ( typeof(theBrick[j])!='undefined' && typeof(theBrick[j].id)!='undefined' && theBrick[j].id.length > 0) {
	    var thisBrick = ( theBrick[j] );
	    if ( brickCoord.indexOf( "|" + thisBrick.id + "~" ) == -1 ) {
	        //alert("findUnassignedBrick: " + thisBrick.id);
	      return thisBrick;
	    }
      }
    }
  }
  return null;
}

function findDivPos(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		curleft = obj.offsetLeft
		curtop = obj.offsetTop
		while (obj = obj.offsetParent) {
			curleft += obj.offsetLeft
			curtop += obj.offsetTop
		}
	}
	return [curtop];
}


//set start top loc of bricks based on owner/viewer
function initDrag(){

    navBarAdj = 70;
    if (document.all) {
        navBarAdj = 40;
    }
    topLoc = (parseInt(findDivPos(document.getElementById("spanUserCustomize")),10) + 40);

    var divTabContainer = document.getElementById("divTabContainer");
    if (divTabContainer != null){
        bPageOwner = true;
     divTabContainer.style.top = ( topLoc ) + "px";
    }else{
        topLoc -= navBarAdj;
    }


    dragDrop( true )
}

//window.onload = function() {
function dragDrop( onInit ) {

  if ( onInit ) {
    getMouseCoord()

    //grabbed from hidden var
    var layout = document.getElementById("layout").value;

    columns = layout.split("|");

    //set up the parent containers
    container = document.getElementById("containerContent");
    container.style.width = "1000px";

    containerDiv = new Array(columns.length);
    originalContainerWidths = new Array(columns.length);
    for ( var t=0; t<columns.length; t++ ) {
    	containerDiv[t] = document.createElement("DIV");
    	containerDiv[t].id = "DragContainer"+(t+1);//insertSide
    	containerDiv[t].className = "DragContainer"+columns[t];
    	containerDiv[t].history = "History1";
    	containerDiv[t].innerHTML = "&nbsp";
    	container.appendChild(containerDiv[t]);
    	originalContainerWidths[t] = containerDiv[t].offsetWidth;
     }

   var coordsElement = document.getElementById("brickCoord");
   brickCoord = coordsElement.value;

   }

  //if we get here with brickCoord == "|" then set up hidden var and store in db
  //also grab valid bricks from brink incoming container and populate parent containers ordered left to right
  if ( brickCoord == "|" ) {
  } else {

    var changeCounter = 0;
    //if get here then got brick coord from hidden var or db, so populate parent containers based on brickcoord var
    var coordElement = brickCoord.split("|");

    for ( var s=1; s<coordElement.length-1; s++ ) {
      var brickElement = coordElement[s].split("~");
      var column = parseInt( brickElement[1], 10 );
      var row = parseInt( brickElement[2], 10 );

      var brickHandle = document.getElementById(brickElement[0]);
      if ( brickHandle != null ) {
	    changeCounter += createBrickDiv( brickHandle.id, brickHandle.innerHTML, column, "~"+(column)+"~"+(row)+"|", false );
      }
    }
    //now check if there is any new bricks added to the brick container that are not already in the db


    var newBrickFound = false;
    var newBrick = findUnassignedBrick();
    while ( newBrick != null ) {
        //alert("found new brick: " + newBrick.id);
        newBrickFound = true;
	    var columnConstraintField = newBrick.getElementsByTagName("input")[1];
	    var emptySpot = findNextEmptySpace( columnConstraintField.value, newBrick.id );
	    if ( emptySpot != null ) {
	        //alert("found emptySpot: " + emptySpot)
    	  changeCounter += createBrickDiv( newBrick.id, newBrick.innerHTML, emptySpot.substring( 1,emptySpot.indexOf("~",2) ), emptySpot, true );
    	}
	    newBrick = findUnassignedBrick();
    }
    //modifyIdString();//only ever empty
    //if ( newBrickFound ) {
    //  db_Save( 'mySpaceBrickCoords', brickCoord, 3, '/', '', '', true );
    //}

    if ( changeCounter > 0 ) {

	columnYs = new Array( globalColumnMaxLength,  globalColumnMaxLength,  globalColumnMaxLength, globalColumnMaxLength);
			  
    for ( var t=0; t<columns.length; t++ ) {
    	containerDiv[t].innerHTML = "&nbsp";
     }
	dragDrop( false );
    }

  }

  var columnConfig = new Array(columns.length);
  for ( var t=0; t<columns.length; t++ ) {
     columnConfig[t] = document.getElementById('DragContainer'+(t+1));
  }

  //determine if displaying public or custom, and switch based on that
    try{

      var initialView = document.getElementById("initialView").value;

      if ( initialView == "public" ) {
        flipEditable(true);
      } else {
        flipEditable(false);
      }
    } catch (e) {
    }

  resetDivsCoordinateMap();
  resetDivs(); //dragDrop

}


//id - brick div id
//contents - inner html of brick
//thisColumn - column to place the brick
//coord - the column and row
//addToCookie - save or not to cookie

var newBrickCol = "";
function createBrickDiv( id, contents, thisColumn, coord, addToCookie ) {
//alert("createBrickDiv: " + id + ", " + thisColumn + ", " + coord);
    //init new div
    var newChildDiv = document.createElement("DIV");
    //set the id to what was passed
    newChildDiv.id = id;
    newChildDiv.style.position = "absolute";
    //set column change to false, if the brick won't fit in the passed column, this will change to true
    var changed = false;
    var changeCounter = 0;
    //bail if no place for brick to go
    var bail = false;
    newChildDiv.innerHTML = contents;
    var columnDest = thisColumn;
    var columnConstraintField = newChildDiv.getElementsByTagName("input")[1];
    //get the column size that brick will fit in, if empty string, brick can go anywhere
    if ( typeof(columnConstraintField)!='undefined' && columnConstraintField.id == ("columnConstraint" + id) ) {
        //alert("found columnConstraint field: " + columnConstraintField.id);
      //if column doesn't exist for brick or brick doesnt fit column, then find new position
      if ( thisColumn > columns.length || ( columnConstraintField.value != "" && parseInt( columnConstraintField.value, 10 ) != columns[columnDest-1] ) ) {
        //look for new spot
        var nextAvail = findNextEmptySpace( columnConstraintField.value, newChildDiv.id );
        if ( nextAvail != null ) {
          //new column number found
          columnDest = parseInt( nextAvail.substring( 1,nextAvail.indexOf("~",2) ) );
          changed = true;
 	      //update cookie string with new coord for this brick   ~1~237|
	       brickCoord = replacestring( brickCoord, id + coord, id + nextAvail, true );
              	if ( id.indexOf("-empty") == -1 ) {
                   changeCounter++;
              	} else {
                   changed = false;
              	}

	      if ( addToCookie ) {
                brickCoord += ( id + nextAvail );
	      }

        } else {
          bail = true;
        }

      } else if ( addToCookie ) {
     	brickCoord += ( id + coord );
      }

    } else {
    }
    //add the rest of the div elements needed to drag drop etc
    if ( id.indexOf("empty") == -1 ) {
      newChildDiv.className = "DragBox"+columns[columnDest-1];
    }

    try{
        newChildDiv.style.width = originalContainerWidths[columnDest-1] + "px";

        //finall append to column container if home found for brick
        if ( !bail ) {
          containerDiv[columnDest-1].appendChild(newChildDiv);
        }
    } catch (e) {
    }

    //reset the height, to push lower bricks down
    var height = parseInt( newChildDiv.offsetHeight, 10 );
    newChildDiv.style.height = height + "px";

    var columnYsArray = columnYs[ thisColumn ].split("|");
    var brickData = getLastBrickData( thisColumn );

    var brickDataArray = brickData.split("~");
    var lastY = parseInt( brickDataArray[0], 10 );
    var lastHeight = parseInt( brickDataArray[1], 10 );

    newChildDiv.style.top = ( lastHeight + lastY + (pageEditable == false  ? 35: 15) ) + "px";

    addNewBrick( thisColumn, ( lastHeight + lastY + (pageEditable == false  ? 35: 15) ), height, id );

    //now figure what should be displayed on the brick ( close box, is editable etc )
    var isEditable = newChildDiv.getElementsByTagName("input")[0];
    if ( typeof(isEditable)!='undefined' && isEditable.id == ("isEditable" + id) ) {
        //alert("found isEditable field: " + isEditable.id);
	    var isEditable = isEditable.value;
        if ( isEditable == "false" ) {
           var divHandle = document.getElementById("close"+id );
           if ( pageEditable ) {
             divHandle.style.display = "none";
           } else {
	          divHandle.style.display = "block";
           }
              divHandle = document.getElementById("editable"+id );
	          divHandle.style.display = 'none';
        }
    }
    return changed;
}

function getLastBrickData( column ) {
  var columnYsArray = columnYs[ column ].split("|");
  for ( var t=0; t<columnYsArray.length; t++ ) {
    if ( columnYsArray[t] == "0~0~0" ) {
      if ( t > 0 ) {
        return columnYsArray[t-1];
      } else {
        return topLoc + "~0~0";
      }
      break;
    }
  }
}

function findDivColumn( inDivId ) {
  for ( var x=0; x<columns.length; x++ ) {
    var columnYsArray = columnYs[ x+1 ].split("|");
    for ( var y=0; y<columnYsArray.length; y++ ) {
      if ( columnYsArray[y] != "0~0~0" ) {
	    var brickDataArray = columnYsArray[y].split("~");
        var divId = brickDataArray[2];
	    if ( divId == inDivId ) {
	      return x;
	    }
      }
    }
  }
}

function addNewBrick( column, yloc, height, id ) {
  if ( columnYs[ column ].indexOf("|") != -1 ) {
    var columnYsArray = columnYs[ column ].split("|");
    for ( var t=0; t<columnYsArray.length; t++ ) {
      if ( columnYsArray[t] == "0~0~0" ) {
        columnYsArray[t] = yloc + "~" + height + "~" + id;
	    var newYlocs = "";
	    for ( var x=0; x<columnYsArray.length; x++ ) {
              if ( newYlocs != "" ) {
                newYlocs += "|";
              }
              newYlocs += ( columnYsArray[x] );
	    }
	    columnYs[ column ] = newYlocs;
        break;
      }
    }
  }
}

//goes through all bricks on page, redoing the coords and saving to db
function modifyIdString() {

 brickCoord = "|";
 for ( var x=0; x<columns.length; x++ ) {

    var columnYsArray = columnYs[ x+1 ].split("|");
    yloc = 0
    for ( var y=0; y<columnYsArray.length; y++ ) {

      if ( columnYsArray[y] != "0~0~0" && columnYsArray[y].indexOf('-empty') == -1) {

    	var brickDataArray = columnYsArray[y].split("~");
        var yloc = parseInt( brickDataArray[0], 10 );
        var height = parseInt( brickDataArray[1], 10 );
        var divId = brickDataArray[2];
	    var div = document.getElementById( divId );

        brickCoord += ( divId + "~" + (x+1) + "~" + (yloc+1) + "|" );
	    yloc++;
       }
    }
  }
  db_Save( 'mySpaceBrickCoords', brickCoord, 3, '/', '', '', true );
}


//do db save
function db_Save( name, value, expires, path, domain, secure, dbSave ) {
    try{
	    if ( dbSave ) {
	         //value = "|profile~1~327|recentPosts~2~327|";
             var success =  ajaxUpdates.UpdateLayout("in",value,UpdateLayoutIn_callback);
    //	  if ( success != "success" ) {
    //		alert("fail");
    //	  }
	    }
    } catch (e) {
    }
}

function UpdateLayoutIn_callback(retValue){

    var success = retValue.value
//	  if ( success != "success" ) {
//		alert("fail");
//	  }
}

function replacestring(str_normal,str_find,str_replace,int_case_insensitive) {
        if (arguments.length<3 || str_find=="" || str_normal=="" || typeof("".split)!="function")
                return(str_normal);

        //no parm means default, "case SENSITIVE"...
        if(!(int_case_insensitive))
                return(str_normal.split(str_find)).join(str_replace);

        str_find=str_find.toLowerCase();

        var rv="";
        var ix=str_normal.toLowerCase().indexOf(str_find);
        while(ix>-1)
        {
                rv+=str_normal.substring(0,ix)+str_replace;
                str_normal=str_normal.substring(ix+str_find.length);
                ix=str_normal.toLowerCase().indexOf(str_find);
        }
        return(rv+str_normal);
}

function checkCursor(el){

    if (pageEditable){
       el.style.cursor = "default";
    }else{
       el.style.cursor = "move";
    }
}

//-->