scroll.coffee

getOffsetTop = (el) ->
    y = 0
    while el.offsetParent
        y += el.offsetTop
        el = el.offsetParent
    return +y
window.NScroll = (selector, option) ->
    option = option || {}
    option.width = option.width || 5
    option.bgc = option.bgc || null
    option.color = option.color || '#000000'
    option.radius = option.radius || 5

    el = document.querySelectorAll selector
    el = el[0]
    el.style.position = 'relative'
    el.style.overflow = 'hidden'
    outer = el.clientHeight
    inner = el.scrollHeight


    scrollHandler = (e) ->
        target = e.target
        deltaX = e.wheelDeltaX || 0
        deltaY = e.wheelDeltaY || 0
        deltaX || deltaY || (deltaY = e.wheelDelta || 0)
        Math.abs(deltaX) > 1.2 && (deltaX *= option.stepsize / 120)
        Math.abs(deltaY) > 1.2 && (deltaY *= option.stepsize / 120)
        e.preventDefault()

    scrollInit = (el) ->
        outer = outer
        inner = inner
        bar_height = outer * outer / inner
        @scr = document.createElement('div')
        @scr.style.position = 'absolute'
        @scr.style.right = 0
        @scr.style.top = 0
        @scr.style.height = outer + 'px'
        @scr.style.width = option.width + 'px'
        @scr.style.backgroundColor = option.bgc
        ###
        @scr.style = {
            position: 'absolute'
            right: 0
            top: 0
            height: outer + 'px'
            width: option.width + 'px'
            backgroundColor: option.bgc
        }###

        @scr_bar = document.createElement('div')
        @scr_bar.style.position = 'absolute'
        @scr_bar.style.top = 0
        @scr_bar.style.right = 0
        console.log bar_height
        @scr_bar.style.height = bar_height + 'px'
        @scr_bar.style.width = option.width + 'px'
        @scr_bar.style.backgroundColor = option.color
        @scr_bar.style.borderRadius = option.radius + 'px'
        ###
        @scr_bar.style = {
            position: 'absolute'
            top: 0
            right: 0
            height: bar_height + 'px'
            width: option.width + 'px'
            backgroundColor: option.color
            borderRadius: option.radius + 'px'
        }###
        scr = @scr
        scr_bar = @scr_bar
        el.appendChild(scr)
        scr.appendChild(scr_bar)

        startY = 0
        startTop = 0
        scrMove = (pos) ->
            rate = outer / inner
            scr.style.top = pos / rate + 'px'
            scr_bar.style.top = pos + 'px'
            el.scrollTop = pos / rate

        mousemoveHandler = (e) ->
            target = e.target
            y = e.clientY 
            dy = y - startY
            curTop = if startTop + dy < 0 then 0 else if startTop + dy > outer - bar_height then outer - bar_height else startTop + dy
            scrMove curTop
            e.preventDefault()
        mouseupHandler = (e) ->
            window.removeEventListener 'mousemove', mousemoveHandler

        mousedownHandler = (e) ->
            target = e.target
            startY = e.clientY
            startTop = scr_bar.offsetTop
            if target is scr_bar
                window.addEventListener 'mousemove', mousemoveHandler, false
                e.preventDefault()
                return false
            scr_bar.style.top = (if e.clientY > outer - bar_height then outer - bar_height else e.clientY) + 'px'
            e.preventDefault()

        console.log scr.addEventListener 'mousedown', mousedownHandler
        window.addEventListener 'mouseup', mouseupHandler

    scrollInit(el)