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 nextZindex = 9000;                          // Allow overlapping
var dragMinTop = 5;
var dragMinLeft = 5;

function moveHandler(e){
 if (e == null) { e = window.event } 
 if (e.button<=1&&dragOK){

  if (typeof(applicationSize)=="function") {
   var s = applicationSize();
   maxX = s[0];
   maxY = s[1];
  } else {
   maxX = document.body.offsetWidth;
   maxY = document.body.offsetHeight;
  }

  if ( eval( e.clientX-dragXoffset+savedTarget.children[0].offsetWidth+5) < maxX) {
   if ( eval( e.clientX-dragXoffset) > dragMinLeft) {
    newX=eval(e.clientX-dragXoffset);
   } else {
    newX = dragMinLeft;
   }
  } else {
   newX = eval(maxX-savedTarget.children[0].offsetWidth-5);
  }
  savedTarget.style.left=newX+'px';
  if ( eval(e.clientY-dragYoffset+savedTarget.children[0].offsetHeight+5) < maxY) {
   if ( eval( e.clientY-dragYoffset) > dragMinTop) {
    newY=eval(e.clientY-dragYoffset);
   } else {
    newY = dragMinTop;
   }
  } else {
   newY = eval(maxY-savedTarget.children[0].offsetHeight-5);
  }  
  savedTarget.style.top=newY+'px';
  
  return false;
 }
}

function cleanup(e) {
 document.onmousemove=null;
 document.onmouseup=null;
 dragOK=false;
 if ( savedTarget) {
  savedTarget.style.filter = "";
  savedTarget.style.opacity = 1;
  if (savedTarget.savedBorder) savedTarget.style.border = savedTarget.savedBorder;
 }
// savedTarget=null;
}

function initDragging(target)
{
 savedTarget=target;
 savedTarget.style.zIndex = nextZindex;
 savedTarget.style.zIndex = 9999;
 savedTarget.style.filter = "";
 savedTarget.className = savedTarget.className+" dragable";
 nextZindex++;
 document.onmousedown=function(e) {
  if (e == null) { e = window.event;}
  var eventTarget = e.target != null ? e.target : e.srcElement;
  var cls = eventTarget.className;
  if (( cls.indexOf("title")>=0) || ( cls.indexOf("topcenter")>=0)) {
   dragOK=true;
   savedTarget.savedBorder = savedTarget.style.border;
   savedTarget.style.filter = "alpha(opacity=80)";
   savedTarget.style.opacity = 0.8;
  } else {
   dragOK=false;
  }
  dragXoffset=e.clientX-parseInt(target.style.left);
  dragYoffset=e.clientY-parseInt(target.style.top);

  document.onmousemove=moveHandler;
  document.onmouseup=cleanup;
 };
}