// JavaScript Document

var savedTarget=null;   // The layer being moved
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

function moveHandler(e){
  // This function moves the layer when the mouse is moved.
  // it's called automatically by the onmousemove handler
  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) {
  // This is called when the user releases the mouse
  // it clears out the move and mouseup event handlers
  // and resets the cursor.
  document.onmousemove=null;
  document.onmouseup=null;
  savedTarget.style.cursor=orgCursor;
  dragOK=false;
  return false;
}

function dragHandler(e){
  // This is called when the user clicks on the page
  // It checks to see if the click happened over an
  // element with a class name of "video", if if it 
  // did, it sets up move and mouseup handlers.
  var cursorType='-moz-grabbing';
  if (e == null) { e = window.event; cursorType='move';} 
  var target = e.target != null ? e.target : e.srcElement;
  if (target.className=="video") {
    orgCursor=target.style.cursor;
    savedTarget=target;       
    target.style.cursor=cursorType;
    dragOK=true;
    dragXoffset=e.clientX-parseInt(target.style.left);
    dragYoffset=e.clientY-parseInt(target.style.top);
    document.onmousemove=moveHandler;
    document.onmouseup=cleanup;
    return false;
  }
}

//This next line will call dragHandler whenever
//the user clicks the mouse button on the page.
//Draghandler will check to see if the mouse is over
//a layer with the classname of 'video' and if so
//set up the drag and drop events.
document.onmousedown=dragHandler;