var MMstartX=0;  // mouse starting position
var MMstartY=0; 
var MMoffsetX=0; // current element offset 
var MMoffsetY=0; 
var MMdragElement;
var MMdragText;
var MMoldZIndex;

function extractnumber(value) 
{ var n=parseInt(value); 
  return n==null || isNaN(n) ? 0 : n; 
}

function InitDragDrop() 
{ document.onmousedown=OnMouseDown; 
  document.onmouseup=OnMouseUp; 
}

function OnMouseDown(e) 
{ // IE bodge
  if (e==null) 
    e=window.event; 
    
  // IE uses srcElement, others use target 
  var target=e.target !=null ? e.target : e.srcElement; 
  
  // for IE, left click==1 
  // for Firefox, left click==0 

  if (((e.button==1 && window.event !=null) || e.button==0) && (target.className=='tile')) 
  { // mouse position 
    MMstartX=e.clientX; 
    MMstartY=e.clientY; 
    // element position 
    MMoffsetX=extractnumber(target.style.left); 
    MMoffsetY=extractnumber(target.style.top); 

    // bring the clicked element to the front while it is being dragged 
    MMoldZIndex=target.style.zIndex; 
    target.style.zIndex=10000; 

    MMdragElement=target;

    if (target.id==='helpballoon')
      MMdragText=document.getElementById('helptext');
    else
      MMdragText=null;

    // start moving the element with the mouse 
    document.onmousemove=OnMouseMove; 

    document.body.focus(); 
    document.onselectstart=function(){return false;}; 
    target.ondragstart=function(){return false;}; 
    return false; 
  } 
}

function OnMouseMove(e) 
{ if (e==null) 
    var e=window.event; 
    
  var x=(MMoffsetX+e.clientX-MMstartX);
  var y=(MMoffsetY+e.clientY-MMstartY); 

  MMdragElement.style.left=x+'px'; 
  MMdragElement.style.top=y+'px';

  if (MMdragText!=null)
  { x+=20;
    y+=35;
    MMdragText.style.left=x+'px'; 
    MMdragText.style.top=y+'px';
  }
}

function OnMouseUp(e) 
{ if (MMdragElement !=null) 
  { MMdragElement.style.zIndex=MMoldZIndex; 
    document.onmousemove=null; 
    document.onselectstart=null; 
    MMdragElement.ondragstart=null; 
    MMdragElement=null; 
  } 
}