/**
 * @author Peter Berghausen
 */
function initDrag() {
	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
	dragPaneID = document.getElementById('dragPane'); // Our movable layer
	dragPaneID.style.top='300px';                     // Starting location horozontal
	dragPaneID.style.left='700px';                    // Starting location verticle
}

 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=="dragFrame") {
         savedTarget=target;       
         target.style.cursor=htype;
         dragOK=true;
         dragXoffset=e.clientX-parseInt(dragPaneID.style.left);
         dragYoffset=e.clientY-parseInt(dragPaneID.style.top);
         document.onmousemove=moveHandler;
         document.onmouseup=cleanup;
         return false;
      }
   }