// JavaScript Document
function getStyle(oElm, strCssRule){
    var strValue = "";
    if(document.defaultView && document.defaultView.getComputedStyle){
        var css = document.defaultView.getComputedStyle(oElm, null);
        strValue = css ? css.getPropertyValue(strCssRule) : null;
    }
    else if(oElm.currentStyle){
        strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
            return p1.toUpperCase();
        });
        strValue = oElm.currentStyle[strCssRule];
    }
    return strValue;
}


function Draggable(el)
{
  var xDelta = 0, yDelta = 0;
  var xStart = 0, yStart = 0;

  // remove the events
  function enddrag()
  {
    document.onmouseup = null;
    document.onmousemove = null;
  }

  // fire each time it's dragged
  function drag(e)
  {
    e = e || window.event;
    xDelta = xStart - parseInt(e.clientX);
    yDelta = yStart - parseInt(e.clientY);
    xStart = parseInt(e.clientX);
    yStart = parseInt(e.clientY);
    el.style.top = (parseInt(el.style.top) - yDelta) + 'px';
    el.style.left = (parseInt(el.style.left) - xDelta) + 'px';
  }

  // initiate the drag
  function md(e)
  {
    e = e || window.event;
    xStart = parseInt(e.clientX);
    yStart = parseInt(e.clientY);
    el.style.top = parseInt(getStyle(el,'top')) + 'px';
    el.style.left = parseInt(getStyle(el,'left')) + 'px';
    document.onmouseup = enddrag;
    document.onmousemove = drag;
    return false;
  }

  // tie it into the element
  el.onmousedown = md;

}

//window.onload = function()
//{
// new Draggable(document.getElementById('a'));
//  new Draggable(document.getElementById('b'));
//}