// dragdropclick code -210907
// allows a single object to be both dragged and dropped or clicked 
//-----------------------------------------------
// see mover  and dropper functions
// ----------------------------------------------
// crossbrowser compatible
// dragcode2.js - fixing ie bug not allowing child nodes of draggable node to move
//              - draggable elements must contain the drag in their ids
// dragcode.js - author mike capstick 011006
// this drag n drop library consists of 3 functions
// grabber() - which responds to a mousedown on a suitably styled object
// mover()   - which responds to a mousemove operation on the object
// dropper() - which responds to a mouseup on the dragged object

//  Object Dragging can only be done if the position type, top and left properties are set. 
//  With this library this can be done by either setting them inline, for example 
//  <div id='frog'style='position:absolute;top;50px;left:50px;'>object</div>
//    or via the window.onload function, for example,
//  document.getElementById('frog').style.position='absolute'; etc etc

//  mover()   also calls a function objectcheckposition() which must exist in the calling page.
//            used to see if currently dragged object is at an important position.
//
//  dropper() also calls a function objectdropped() which must exist in the calling page.
//            can be used to perform any desired actions caused by dropping object in a new spot 
//            such as checking if the dropped object is in a desired location.


var diffX, diffY, theElement;

function grabber(event){

  if (document.all)  // if this IE use ie code else use w3c code
       {
        theElement = window.event.srcElement;
        // ie fix - 081006 - IE cannot drag child elements of draggable containers 
        // Move up through dom till we reach a node with a draggabble id containing a 'drag'
        // Get the parent of any node whose id does not contain the word drag
        while (theElement.getAttribute('id').indexOf('drag')==-1)
                  {theElement=theElement.parentNode;}
       }
  else {theElement = event.currentTarget; }
  
  
  idnum=theElement.id.substring(4)  // get the number part of the id, drop the 'drag' bit
  theElement.style.cursor='move';   // change cursor to indicate  a drag is allowed 
  
   posX = parseInt(theElement.style.left);  //current left position of theElement 
   positionleft=posX;   // we need to keep positionleft so we can check if posX changes 
   posY = parseInt(theElement.style.top);
   positiontop=posY;   // we need to keep positiontop so we can check if posX changes 
   
if (document.all)
   {diffX = window.event.clientX - posX;  
    diffY = window.event.clientY - posY;
    document.attachEvent("onmousemove",mover);  // attach the mover function when mouse moves
    document.attachEvent("onmouseup",dropper);  // attach the dropper function when mouse released
    window.event.cancelBubble=true;             // stop any 'event bubbling'
    window.event.returnValue=false;}
else{diffX = event.clientX - posX;
     diffY = event.clientY - posY;
     document.addEventListener("mousemove", mover, true);
     document.addEventListener("mouseup", dropper, true);
     event.stopPropagation();
     event.preventDefault();}
}

function mover(event){

   positionleft = (event.clientX - diffX); //new left position
   positiontop = (event.clientY - diffY);  //new top position


   // checks if dragged object position is important
   // the function objectcheckposition must exist in calling program, even if empty
   objectcheckposition(idnum);
   
   // add back "px" to position theElement
   theElement.style.left= positionleft+"px";
   theElement.style.top = positiontop +"px";
   
   if (document.all)
       {
       window.event.cancelBubble=true;
       window.event.returnValue=false;
       }
   else{
        event.stopPropagation();
        event.preventDefault();
       }
}

function dropper(event){
if  (document.all)
    {
     document.detachEvent("onmousemove",mover);
     document.detachEvent("onmouseup",dropper);
     window.event.cancelBubble=true;
     window.event.returnValue=false;
     }
else{
     document.removeEventListener("mouseup", dropper, true);
     document.removeEventListener("mousemove", mover, true);
     event.stopPropagation();
     event.preventDefault(); 
     }

theElement.style.cursor='';  //turn cursor back to default
// run this function check when object dropped, function must exist
  objectdropped();
}