/**
 * Drag.js: drag absolutely positioned HTML elements.
 *
 * This module defines a single drag() function that is designed to be called
 * from an onmousedown event handler.  Subsequent mousemove events will
 * move the specified element. A mouseup event will terminate the drag.
 * If the element is dragged off the screen, the window does not scroll.
 * This implementation works with both the DOM Level 2 event model and the
 * IE event model.
 * 
 * Arguments:
 *
 *   elementToDrag:  the element that received the mousedown event or
 *     some containing element. It must be absolutely positioned.  Its 
 *     style.left and style.top values will be changed based on the user's
 *     drag.
 *
 *   event: the Event object for the mousedown event.
 **/
 

 
 
 
 function resize(elementToSize, event){
 var eTs = elementToSize.parentNode;
 
 var startHeight = eTs.clientHeight, startWidth = eTs.clientWidth;
 
    // The mouse position (in window coordinates)
    // at which the drag begins 
    //REMEMBER THE EVENT IS A MOUSE EVENT
    var startX = event.clientX, startY = event.clientY;   
    //gives top left corner position
    var origX = eTs.offsetLeft, origY = eTs.offsetTop;
    
    if (document.addEventListener) {  // DOM Level 2 event model
        // Register capturing event handlers
        document.addEventListener("mousemove", moveHandler, true);
        document.addEventListener("mouseup", upHandler, true);
 
    } else if (document.attachEvent) {  // IE 5+ Event Model
        // In the IE event model, we capture events by calling
        // setCapture() on the element to capture them.
        eTs.setCapture();
        eTs.attachEvent("onmousemove", moveHandler);
        eTs.attachEvent("onmouseup", upHandler);
        // Treat loss of mouse capture as a mouseup event
        eTs.attachEvent("onlosecapture", upHandler);
    }
    
    // We've handled this event. Don't let anybody else see it.  
    if (event.stopPropagation) event.stopPropagation();  // DOM Level 2
    else event.cancelBubble = true;                      // IE

    // Now prevent any default action.
    if (event.preventDefault) event.preventDefault();   // DOM Level 2
    else event.returnValue = false;                     // IE
    
    
       function moveHandler(e) {
        if (!e) e = window.event;  // IE Event Model

        // Move the element to the current mouse position, adjusted as
        // necessary by the offset of the initial mouse-click.
        eTs.style.width = (e.clientX - origX) + "px";
        eTs.style.height = (e.clientY - origY) + "px";


        // And don't let anyone else see this event.
        if (e.stopPropagation) e.stopPropagation();  // DOM Level 2
        else e.cancelBubble = true;                  // IE
    }
    
     function upHandler(e) {
        if (!e) e = window.event;  // IE Event Model

        // Unregister the capturing event handlers.
        if (document.removeEventListener) {  // DOM event model
            document.removeEventListener("mouseup", upHandler, true);
            document.removeEventListener("mousemove", moveHandler, true);
        }
        else if (document.detachEvent) {  // IE 5+ Event Model
            eTs.detachEvent("onlosecapture", upHandler);
            eTs.detachEvent("onmouseup", upHandler);
            eTs.detachEvent("onmousemove", moveHandler);
            eTs.releaseCapture();
        }
        else {  // IE 4 Event Model
            // Restore the original handlers, if any
            document.onmouseup = olduphandler;
            document.onmousemove = oldmovehandler;
        }

        // And don't let the event propagate any further.
        if (e.stopPropagation) e.stopPropagation();  // DOM Level 2
        else e.cancelBubble = true;                  // IE
    }
    
    
}
    
 
function drag(elementToDrag, event) {
    // The mouse position (in window coordinates)
    // at which the drag begins 
    //REMEMBER THE EVENT IS A MOUSE EVENT
    var startX = event.clientX, startY = event.clientY;    

    // The original position (in document coordinates) of the
    // element that is going to be dragged.  Since elementToDrag is 
    // absolutely positioned, we assume that its offsetParent is the
    // document body.
    var origX = elementToDrag.offsetLeft, origY = elementToDrag.offsetTop;

    // Even though the coordinates are computed in different 
    // coordinate systems, we can still compute the difference between them
    // and use it in the moveHandler() function.  This works because
    // the scrollbar position never changes during the drag.
    var deltaX = startX - origX, deltaY = startY - origY;

    // Register the event handlers that will respond to the mousemove events
    // and the mouseup event that follow this mousedown event.  
    if (document.addEventListener) {  // DOM Level 2 event model
        // Register capturing event handlers
        document.addEventListener("mousemove", moveHandler, true);
        document.addEventListener("mouseup", upHandler, true);
    }
    else if (document.attachEvent) {  // IE 5+ Event Model
        // In the IE event model, we capture events by calling
        // setCapture() on the element to capture them.
        elementToDrag.setCapture();
        elementToDrag.attachEvent("onmousemove", moveHandler);
        elementToDrag.attachEvent("onmouseup", upHandler);
        // Treat loss of mouse capture as a mouseup event
        elementToDrag.attachEvent("onlosecapture", upHandler);
    }
    else {  // IE 4 Event Model
        // In IE 4 we can't use attachEvent() or setCapture(), so we set
        // event handlers directly on the document object and hope that the
        // mouse events we need will bubble up.  
        var oldmovehandler = document.onmousemove; // used by upHandler() 
        var olduphandler = document.onmouseup;
        document.onmousemove = moveHandler;
        document.onmouseup = upHandler;
    }

    // We've handled this event. Don't let anybody else see it.  
    if (event.stopPropagation) event.stopPropagation();  // DOM Level 2
    else event.cancelBubble = true;                      // IE

    // Now prevent any default action.
    if (event.preventDefault) event.preventDefault();   // DOM Level 2
    else event.returnValue = false;                     // IE

    /**
     * This is the handler that captures mousemove events when an element
     * is being dragged. It is responsible for moving the element.
     **/
    function moveHandler(e) {
        if (!e) e = window.event;  // IE Event Model

        // Move the element to the current mouse position, adjusted as
        // necessary by the offset of the initial mouse-click.
        elementToDrag.style.left = (e.clientX - deltaX) + "px";
        elementToDrag.style.top = (e.clientY - deltaY) + "px";

        // And don't let anyone else see this event.
        if (e.stopPropagation) e.stopPropagation();  // DOM Level 2
        else e.cancelBubble = true;                  // IE
    }
    
    
    
    
    
    
    
    
    //drop at nearest grid point
    //needs to be more complex
    function dropHere(e){
        elementToDrag.style.left = (((Math.round(elementToDrag.offsetLeft/20)) * 20) ) + "px";
        elementToDrag.style.top = (((Math.round(elementToDrag.offsetTop/20))*20)) + "px";
            }

    /**
     * This is the handler that captures the final mouseup event that
     * occurs at the end of a drag.
     **/
     
     
    function upHandler(e) {
        if (!e) e = window.event;  // IE Event Model

        // Unregister the capturing event handlers.
        if (document.removeEventListener) {  // DOM event model
            document.removeEventListener("mouseup", upHandler, true);
            document.removeEventListener("mousemove", moveHandler, true);
           dropHere(e);
        }
        else if (document.detachEvent) {  // IE 5+ Event Model
            elementToDrag.detachEvent("onlosecapture", upHandler);
            elementToDrag.detachEvent("onmouseup", upHandler);
            elementToDrag.detachEvent("onmousemove", moveHandler);
            elementToDrag.releaseCapture();
            dropHere(e);
        }
        else {  // IE 4 Event Model
            // Restore the original handlers, if any
            document.onmouseup = olduphandler;
            document.onmousemove = oldmovehandler;
        }

        // And don't let the event propagate any further.
        if (e.stopPropagation) e.stopPropagation();  // DOM Level 2
        else e.cancelBubble = true;                  // IE
    }
    
    
    
    
    

    function getElementsByClass(classname){
    var all = document.getElementsByTagName("div");
    
    var elems =[];
    for(var i=0; i<all.length; i++){
    var element = elems[i];
    if(isMember(element, classname))
    elems.push(element);
        }
    }
    
    function isMember(element, classname){
    if(element.className == classname)
    return true;
    else 
    return false;
    }
    
    
    function elementHere(x,y){
    var arr = getElementsByClass("draggable");
    
    for(var a=0; a<arr.length; a++){
    if (arr[a].style.left == x && arr[a].style.top == y)
    return true;
    }
    return false;
    }
    
}