webamp/js/window-manager.js

define({
    registerWindow: function(win) {
        body = win.body;
        handle = win.handle;

        // Make window dragable
        handle.addEventListener('mousedown',function(e){
            if(e.target !== this) {
                // Prevent going into drag mode when clicking any of the title
                // bar's icons by making sure the click was made directly on the
                // titlebar
                return true; }

            // If the element was 'absolutely' positioned we could simply use
            // offsetLeft / offsetTop however the element is 'relatively'
            // positioned so we're using style.left. parseInt is used to remove the
            // 'px' postfix from the value
            var winStartLeft = parseInt(body.offsetLeft || 0,10),
                winStartTop  = parseInt(body.offsetTop || 0,10);

            // Get starting mouse position
            var mouseStartLeft = e.clientX,
                mouseStartTop = e.clientY;

            // Mouse move handler function while mouse is down
            function handleMove(e) {
                // Get current mouse position
                var mouseLeft = e.clientX,
                    mouseTop = e.clientY;

                // Calculate difference offsets
                var diffLeft = mouseLeft-mouseStartLeft,
                    diffTop = mouseTop-mouseStartTop;

                // These margins were only useful for centering the div, now we
                // don't need them
                body.style.marginLeft = "0px";
                body.style.marginTop = "0px";
                // Move window to new position
                body.style.left = (winStartLeft+diffLeft)+"px";
                body.style.top = (winStartTop+diffTop)+"px";
            }

            // Mouse button up
            function handleUp() {
                removeListeners();
            }

            function removeListeners() {
                window.removeEventListener('mousemove',handleMove);
                window.removeEventListener('mouseup',handleUp);
            }

            window.addEventListener('mousemove',handleMove);
            window.addEventListener('mouseup',handleUp);
        });
    }
});