var savedTarget=null;                           // The target layer (effectively vidPane)
   var orgCursor=null;                             // The original mouse style so we can restore it
   var dragOK=false;                               // True if we're allowed to move the element under mouse
   var dragXoffset=0;                              // How much we've moved the element on the horozontal
   var dragYoffset=0;                              // How much we've moved the element on the verticle
   var curDragID=null;
   var lastLayerUp = 1;
   var moved = false;

   var fullPageHeight = 1000;
   var fullPageWidth  = 1700;

   function moveHandler(e){
      if (e == null) { e = window.event } 
      if (e.button<=1&&dragOK){
         savedTarget.style.left=e.clientX-dragXoffset+'px';
         savedTarget.style.top=e.clientY-dragYoffset+'px';
         syncBackground(savedTarget);
         moved = true;
         //savedTarget.style.backgroundPosition ='-'+ savedTarget.style.left + ' ' + '-' + savedTarget.style.top;
//         savedTarget.style.layer
         return false;
      }
   }
   function cleanup(e) {
      document.onmousemove=null;
      document.onmouseup=null;
      savedTarget.style.cursor=orgCursor;
      dragOK=false;
   }

    function syncBackground(e) { 
         e.style.backgroundPosition = (-parseInt(e.style.left)) + 'px ' + (-parseInt( e.style.top )) +'px ';
    }
    function clickHandler(e) { 
      var htype='-moz-grabbing';
      if (e == null) { e = window.event; htype='move';} 
      var target = e.target != null ? e.target : e.srcElement;
      if (target.className=="header" ) { 
        if ( moved == false ) {
            target = target.parentNode;
            target.width = '240px';
            if( target.style.height == '50px' ) {
                target.style.height= fullPageHeight+'px';
            }
            else {  
                target.style.height= '50px';
            }
        }
        return false;
      }
      if (target.className=="draggable") {
        if ( moved == false ) { 
            if ( savedTarget.style.width== fullPageWidth+'px' ) 
            {
                savedTarget.style.width = '240px';
                savedTarget.style.height= fullPageHeight+'px';
                savedTarget.style.left = e.clientX-150 + 'px';
                savedTarget.style.top = e.clientY + 'px';
                syncBackground( savedTarget );
            }
            else { 
                savedTarget.style.left = 0 + 'px';
                savedTarget.style.top = 0 + 'px';
                savedTarget.style.width = fullPageWidth +'px';
                savedTarget.style.height= fullPageHeight+'px';
                syncBackground( savedTarget );
            }
        }
        return false;
      }      
    }
   function dragHandler(e){
      var htype='-moz-grabbing';
      if (e == null) { e = window.event; htype='move';} 
      var target = e.target != null ? e.target : e.srcElement;
      orgCursor=target.style.cursor;
      if ( target.className == "header" ) { 
        target = target.parentNode;
      }
      if (target.className=="draggable") {
         savedTarget=target;       
         target.style.cursor=htype;
         dragOK=true;
         dragXoffset=e.clientX-parseInt(savedTarget.style.left);
         dragYoffset=e.clientY-parseInt(savedTarget.style.top);
         syncBackground( savedTarget );
         //savedTarget.style.backgroundPosition ='-'+ savedTarget.style.left + ' ' + '-' + savedTarget.style.top;
         savedTarget.style.zIndex = lastLayerUp;  
         lastLayerUp = lastLayerUp+1;       
         document.onmousemove=moveHandler;
         document.onmouseup=cleanup;
         moved = false;
         return false;
      }
   } 
   document.onmousedown=dragHandler;
   document.onclick=clickHandler;