function dragBox(input, minValue, maxValue, speed, wrapInput)
{
    var mousePressed = false
    var initialValue = 0
    
    function docMouseUp(event)
    {
        $(document).unbind(".dragBox")
    }
    
    function docMouseMove(event)
    {
        var x = event.pageX
        var left = input.offset().left
        var right = left + input.outerWidth()
        var value = initialValue
        
        if (x < left)
        {
            value = Math.floor(initialValue + (x - left) / speed)
        }
        else if (x > right)
        {
            value = Math.ceil(initialValue + (x - right) / speed)
        }
        
        if (wrapInput && wrapInput.filter(":checked").length)
        {
            value = (value - minValue) % (maxValue - minValue) + minValue;
            if (value < minValue)
            {
                value = value + maxValue - minValue;
            }
        }
        else
        {
            if (value < minValue)
            {
                value = minValue
            }
            else if (value > maxValue)
            {
                value = maxValue
            }
        }
        
        input.val(value)
        input.trigger("change")
    }
    
    function mouseDown(event)
    {
        initialValue = Number(input.val())
        $(document).bind("mouseup.dragBox", docMouseUp)
        $(document).bind("mousemove.dragBox", docMouseMove)
    }
    
    input.mousedown(mouseDown)
}

$(function () {
    dragBox($("#hue"), 0, 360, 1, $("#hue_wrap"))
    dragBox($("#hue_jitter"), 0, 360, 1)
    dragBox($("#hue_speed"), -360, 360, 10)
    
    dragBox($("#sat"), 0, 100, 2, $("#sat_wrap"))
    dragBox($("#sat_jitter"), 0, 100, 2)
    dragBox($("#sat_speed"), -100, 100, 10)
    
    dragBox($("#lit"), 0, 100, 2, $("#lit_wrap"))
    dragBox($("#lit_jitter"), 0, 100, 2)
    dragBox($("#lit_speed"), -100, 100, 10)
    
    dragBox($("#alpha"), 0, 100, 2, $("#alpha_wrap"))
    dragBox($("#alpha_jitter"), 0, 100, 2)
    dragBox($("#alpha_speed"), -100, 100, 10)
    
    dragBox($("#center_x"), 0, 500, 1)
    dragBox($("#center_y"), 0, 500, 1)
    
    dragBox($("#line_width"), 1, 500, 10)
    dragBox($("#rotate"), 1, 100, 10)
})