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';
         return false;
      }
   }

   function cleanup(e) {
      document.onmousemove=null;
      document.onmouseup=null;
      savedTarget.style.cursor=orgCursor;
      dragOK=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=="dragme") {
         savedTarget=target;       
         target.style.cursor=htype;
         dragOK=true;
		 if (!target.style.left) { target.style.left = "0px"; }
		 if (!target.style.top) { target.style.top = "0px"; }
         dragXoffset=e.clientX-parseInt(target.style.left);
         dragYoffset=e.clientY-parseInt(target.style.top);
         document.onmousemove=moveHandler;
         document.onmouseup=cleanup;
         return false;
      }
   }
	 
document.onmousedown=dragHandler;

   var savedTarget=null; // The target layer (effectively vidPane)
   var orgCursor=null;   // The original Cursor (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