selection.coffee

# index.html: <div id="selection" hidden></div>
# style.css: #selection { border: 1px dotted #000; position: absolute; }

selection = document.getElementById('selection')
x1 = 0; y1 = 0
x2 = 0; y2 = 0

reCalc = ->
    x3 = Math.min x1, x2    
    x4 = Math.max x1, x2
    y3 = Math.min y1, y2
    y4 = Math.max y1, y2

    selection.style.left = x3 + 'px'
    selection.style.top = y3 + 'px'
    selection.style.width = x4 - x3 + 'px'
    selection.style.height = y4 - y3 + 'px'

document.addEventListener "mousedown", (e) ->
    selection.hidden = 0
    x1 = e.clientX
    y1 = e.clientY
    reCalc()
    
document.addEventListener "mousemove", (e) ->
    x2 = e.clientX
    y2 = e.clientY  
    reCalc()
    
document.addEventListener "mouseup", (e) ->
    selection.hidden = 1