var _startX = 0;            // mouse starting positions
    var _startY = 0;
    var _offsetX = 0;           // current element offset
    var _offsetY = 0;
    var _dragElement;           // needs to be passed from OnMouseDown to OnMouseMove
    var _oldZIndex = 0;         // we temporarily increase the z-index during drag
    var _debug = document.getElementById('debug');    // makes life easier 
    var _NewTop = 0;
    var _NewLeft = 0;
function InitDragDrop()
{
    document.onmousedown = OnMouseDown;
    document.onmouseup = OnMouseUp;
    document.oncontextmenu = function(){return false}
}


function OnMouseDown(e)
{
    // IE is retarded and doesn't pass the event object
    var offset=0;
    if (e == null) 
       {
         e = window.event; 
         offset = 0;
       }
         
    
    // IE uses srcElement, others use target
    var target = e.target != null ? e.target : e.srcElement;
    var rightclick=0;
    var leftclick=0;
    var menuon=0;
    
    
    if (e.button == 2)
      {rightclick=1;}
    
    if ((e.button == 1 && window.event != null) || e.button == 0)
      {leftclick=1;}

    if (target.className == 'mnupad')  // Don't perform MouseDown events on our menu items
      {return}
    
    if (leftclick == 0 && target.className == 'menu1')  
      {return}

    
    if (leftclick == 1 && target.className == 'menu1')  //User clicked a top level menu ite,             
      {
        var tb1 = document.getElementById("hdnselected")
        tb1.value = '';
        
        var tb = document.getElementById("cmenu");  //clear the other menu if visible.
        tb.style.display="none";  

        var tb = document.getElementById("fmenu")  
        tb.style.left = e.clientX + 'px';
        tb.style.top = '18px';  //e.clientY + 'px';  
        tb.style.display = "";
        return false 

        if (target.id == 'spnfile')
          {
            //tb.innerHTML = 'FILE'            
            return
          }
        if (target.id == 'spnedit')
          {
            //tb.innerHTML = 'EDIT'
            return
          }          
        if (target.id == 'spnview')
          {
            //tb.innerHTML = 'VIEW'
            return
          }          
        if (target.id == 'spnfave')
          {
            //tb.innerHTML = 'FAVORITES'
            return
          }                    
        return
      }


      

    /* **********************************
      IE, left click == 1
      Firefox, left click == 0
      IE & Firefox, right-click = 2
     ********************************** */  
    
    var mm = document.getElementById("cmenu")
    if (mm.style.display != 'none')
      {menuon = 1;}  
    
    var tb = document.getElementById("cmenu");
    tb.style.display="none";              

    var tb = document.getElementById("fmenu");
    tb.style.display="none";   
    
    //if (leftclick == 1 && target.className == 'menupad')
    //  {return}
      

    
    if (rightclick == 1 && target.className == 'drag')  //Right-click on an moveable Icon.
      {
        //var tb = document.getElementById("spnmsg")
        //tb.innerHTML = "clientX = " + e.clientX + '  clientY = ' + e.clientY;
        var tb1 = document.getElementById("hdnselected")
        tb1.value = target.id; 
        
                
        //var tb2 = document.getElementById("spnmsg")
        //tb2.value = tb1.value;

        var tb = document.getElementById("fmenu");
        tb.style.display="none";  
        
        var tb = document.getElementById("cmenu")
        tb.style.zIndex = 10001
        tb.style.left = e.clientX + 'px';
        tb.style.top = e.clientY + 'px';        
        tb.style.display=""                      
        return false
      }
      
    
    
    //if ((e.button == 1 && window.event != null || e.button == 0) && target.className == 'drag')
    if (leftclick == 1 && target.className == 'drag')
    {
        // grab the mouse position
        _startX = e.clientX;
        _startY = e.clientY;
        
        // grab the clicked element's position
        _offsetX = ExtractNumber(target.style.left);
        _offsetY = ExtractNumber(target.style.top);
        
        // bring the clicked element to the front while it is being dragged
        _oldZIndex = target.style.zIndex;
        target.style.zIndex = 10000;
        
        // we need to access the element in OnMouseMove
        _dragElement = target;

        // tell our code to start moving the element with the mouse
        document.onmousemove = OnMouseMove;
        
        // cancel out any text selections
        document.body.focus();

        // prevent text selection in IE
        document.onselectstart = function () { return false; };
        // prevent IE from trying to drag an image
        target.ondragstart = function() { return false; };
        
        // prevent text selection (except IE)
        return false;
    }
} 


function OnMouseMove(e)
{
    if (e == null) 
        var e = window.event; 

    // this is the actual "drag code"
    _NewTop = _offsetY + e.clientY - _startY;
    _NewLeft = _offsetX + e.clientX - _startX;
       
    
  
   if (_NewTop > 60 || (_NewTop <= 60 && _NewLeft <=10) )
     {
       _dragElement.style.top = _NewTop + 'px';
       _dragElement.style.left = _NewLeft + 'px';
     }
      
    //_debug.innerHTML = '(' + _dragElement.style.left + ', ' +  _dragElement.style.top + ')';   
}

function OnMouseUp(e)
{
    if (_dragElement != null)
    {
        _dragElement.style.zIndex = _oldZIndex;

         var X = parseInt(_dragElement.style.left) 
         var Y = parseInt(_dragElement.style.top) 
         
         //Delete Zone
         if (X <= 10 && Y <=50)
           alert('poof!');
           
         var ID = _dragElement.id
         //alert(_dragElement.id)
         SavePosition(ID,X,Y)   
         
         var tb = document.getElementById('spnprops');
         tb.innerHTML = '<br><br><font color=blue>X=' + X + '<br>Y=' + Y + '</font>';
         
        
        // we're done with these events until the next OnMouseDown
        document.onmousemove = null;
        document.onselectstart = null;
        _dragElement.ondragstart = null;

        // this is how we know we're not dragging      
        _dragElement = null;
        
    }
}

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





// this is simply a shortcut for the eyes and fingers
function $(id)
{
    return document.getElementById(id);
}