/**
 * JavaScript Color Picker
 *
 * @author    Honza Odvarko, http://odvarko.cz
 * @copyright Honza Odvarko
 * @license   http://www.gnu.org/copyleft/gpl.html  GNU General Public License
 * @version   1.0.5
 * @link      http://jscolor.com
 */


jscolor_register() // register jscolor_init() at page load


function jscolor_register() {
    if(typeof window.onload == 'function') {
        var f = window.onload
        window.onload = function() {
            if(f)/* IE7 */ f()
            jscolor_init()
        }
    } else {
        window.onload = jscolor_init
    }
}


function jscolor_init() {

    // bind <input class="..."> elements
    var bindClass = 'color'

    // set field's background according selected color?
    var reflectOnBackground = true

    // prepend field's color code with #
    var leadingHash = false

    // allow an empty value in the field instead of setting it to #000000
    var allowEmpty = false

    var borderWidth = 1
    var padding = 10
    var HVSize = [ 180, 101 ]
    var HVCrossSize = [ 15, 15 ]
    var SSize = [ 22, 101 ]
    var SArrowSize = [ 7, 11 ]
    var SSampleSize = 4
    var ClientSliderSize = 18

    var instanceId = 0
    var instance
    var elements = {}

    var dir = function() {
        var base = location.href

        var e = document.getElementsByTagName('base')
        for(var i=0; i<e.length; i++) {
            if(e[i].href) base = e[i].href
        }

        var e = document.getElementsByTagName('script')
        for(var i=0; i<e.length; i++) {
            if(e[i].src) {
                var src = new URI(e[i].src)
                if(/\/jscolor\.js$/.test(src.path)) {
                    var srcAbs = src.toAbsolute(base).toString()
                    delete srcAbs.query
                    delete srcAbs.fragment
                    return srcAbs.replace(/[^\/]+$/, '') // remove filename from path
                }
            }
        }
        return false
    }()


    function createDialog() {

        // dialog
        elements.dialog = document.createElement('div')
        setStyle(elements.dialog, {
            'zIndex' : '100',
            'clear' : 'both',
            'position' : 'absolute',
            'width' : HVSize[0]+SSize[0]+3*padding+'px',
            'height' : HVSize[1]+2*padding+'px',
            'border' : borderWidth+'px solid ThreeDHighlight',
            'borderRightColor' : 'ThreeDShadow', 'borderBottomColor' : 'ThreeDShadow',
            'background' : "url('"+dir+"hv.png') "+padding+"px "+padding+"px no-repeat ThreeDFace"
        })
        elements.dialog.onmousedown = function() {
            instance.preserve = true
        }
        elements.dialog.onmousemove = function(e) {
            if(instance.holdHV) setHV(e)
            if(instance.holdS) setS(e)
        }
        elements.dialog.onmouseup = elements.dialog.onmouseout = function() {
            if(instance.holdHV || instance.holdS) {
                instance.holdHV = instance.holdS = false
                if(typeof instance.input.onchange == 'function') instance.input.onchange()
            }
            instance.input.focus()
        }

        // hue/value spectrum
        elements.hv = document.createElement('div')
        setStyle(elements.hv, {
            'position' : 'absolute',
            'left' : '0',
            'top' : '0',
            'width' : HVSize[0]+2*padding+'px',
            'height' : HVSize[1]+2*padding+'px',
            'background' : "url('"+dir+"cross.gif') no-repeat",
            'cursor' : 'crosshair'
        })
        var setHV = function(e) {
            var p = getMousePos(e)
            var relX = p[0]<instance.posHV[0] ? 0 : (p[0]-instance.posHV[0]>HVSize[0]-1 ? HVSize[0]-1 : p[0]-instance.posHV[0])
            var relY = p[1]<instance.posHV[1] ? 0 : (p[1]-instance.posHV[1]>HVSize[1]-1 ? HVSize[1]-1 : p[1]-instance.posHV[1])
            instance.color.setHSV(6/HVSize[0]*relX, null, 1-1/(HVSize[1]-1)*relY)
            updateDialogPointers()
            updateDialogSaturation()
            updateInput(instance.input, instance.color, null)
        }
        elements.hv.onmousedown = function(e) { instance.holdHV = true; setHV(e) }
        elements.dialog.appendChild(elements.hv)

        // saturation gradient
        elements.grad = document.createElement('div')
        setStyle(elements.grad, {
            'position' : 'absolute',
            'left' : HVSize[0]+SArrowSize[0]+2*padding+'px',
            'top' : padding+'px',
            'width' : SSize[0]-SArrowSize[0]+'px',
            'fontSize' : '1px',
            'lineHeight' : '1px'
        })
        // saturation gradient's samples
        for(var i=0; i+SSampleSize<=SSize[1]; i+=SSampleSize) {
            var g = document.createElement('div')
            g.style.height = SSampleSize+'px'
            elements.grad.appendChild(g)
        }
        elements.dialog.appendChild(elements.grad)

        // saturation slider
        elements.s = document.createElement('div')
        setStyle(elements.s, {
            'position' : 'absolute',
            'left' : HVSize[0]+2*padding+'px',
            'top' : '0',
            'width' : SSize[0]+padding+'px',
            'height' : SSize[1]+2*padding+'px',
            'background' : "url('"+dir+"s.gif') no-repeat"
        })
        // IE 5 fix
        try {
            elements.s.style.cursor = 'pointer'
        } catch(eOldIE) {
            elements.s.style.cursor = 'hand'
        }
        var setS = function(e) {
            var p = getMousePos(e)
            var relY = p[1]<instance.posS[1] ? 0 : (p[1]-instance.posS[1]>SSize[1]-1 ? SSize[1]-1 : p[1]-instance.posS[1])
            instance.color.setHSV(null, 1-1/(SSize[1]-1)*relY, null)
            updateDialogPointers()
            updateInput(instance.input, instance.color, null)
        }
        elements.s.onmousedown = function(e) { instance.holdS = true; setS(e) }
        elements.dialog.appendChild(elements.s)
    }


    function showDialog(input) {
        var is = [ input.offsetWidth, input.offsetHeight ]
        var ip = getElementPos(input)
        var sp = getScrollPos()
        var ws = getWindowSize()
        var ds = [
            HVSize[0]+SSize[0]+3*padding+2*borderWidth,
            HVSize[1]+2*padding+2*borderWidth
        ]
        var dp = [
            -sp[0]+ip[0]+ds[0] > ws[0]-ClientSliderSize ? (-sp[0]+ip[0]+is[0]/2 > ws[0]/2 ? ip[0]+is[0]-ds[0] : ip[0]) : ip[0],
            -sp[1]+ip[1]+is[1]+ds[1] > ws[1]-ClientSliderSize ? (-sp[1]+ip[1]+is[1]/2 > ws[1]/2 ? ip[1]-ds[1] : ip[1]+is[1]) : ip[1]+is[1]
        ]

        instanceId++
        instance = {
            input : input,
            color : new color(input.value),
            preserve : false,
            holdHV : false,
            holdS : false,
            posHV : [ dp[0]+borderWidth+padding, dp[1]+borderWidth+padding ],
            posS : [ dp[0]+borderWidth+HVSize[0]+2*padding, dp[1]+borderWidth+padding ]
        }

        updateDialogPointers()
        updateDialogSaturation()

        elements.dialog.style.left = dp[0]+'px'
        elements.dialog.style.top = dp[1]+'px'
        document.getElementsByTagName('body')[0].appendChild(elements.dialog)
    }


    function hideDialog() {
        var b = document.getElementsByTagName('body')[0]
        b.removeChild(elements.dialog)

        instance = null
    }


    function updateDialogPointers() {
        // update hue/value cross
        var x = Math.round(instance.color.hue/6*HVSize[0])
        var y = Math.round((1-instance.color.value)*(HVSize[1]-1))
        elements.hv.style.backgroundPosition =
            (padding-Math.floor(HVCrossSize[0]/2)+x)+'px '+
            (padding-Math.floor(HVCrossSize[1]/2)+y)+'px'

        // update saturation arrow
        var y = Math.round((1-instance.color.saturation)*SSize[1])
        elements.s.style.backgroundPosition = '0 '+(padding-Math.floor(SArrowSize[1]/2)+y)+'px'
    }


    function updateDialogSaturation() {
        // update saturation gradient
        var r, g, b, s, c = [ instance.color.value, 0, 0 ]
        var i = Math.floor(instance.color.hue)
        var f = i%2 ? instance.color.hue-i : 1-(instance.color.hue-i)
        switch(i) {
            case 6:
            case 0: r=0;g=1;b=2; break
            case 1: r=1;g=0;b=2; break
            case 2: r=2;g=0;b=1; break
            case 3: r=2;g=1;b=0; break
            case 4: r=1;g=2;b=0; break
            case 5: r=0;g=2;b=1; break
        }
        var gr = elements.grad.childNodes
        for(var i=0; i<gr.length; i++) {
            s = 1 - 1/(gr.length-1)*i
            c[1] = c[0] * (1 - s*f)
            c[2] = c[0] * (1 - s)
            gr[i].style.backgroundColor = 'rgb('+(c[r]*100)+'%,'+(c[g]*100)+'%,'+(c[b]*100)+'%)'
        }
    }


    function bindInputs() {
        var onfocus = function() {
            if(instance && instance.preserve) {
                instance.preserve = false
            } else {
                showDialog(this)
            }
        }
        var onblur = function() {
            if(instance && instance.preserve) return

            var This = this
            var Id = instanceId
            setTimeout(function() {
                if(instance && instance.preserve) return

                if(instance && instanceId == Id) hideDialog() // if dialog hasn't been already shown by another instance
                updateInput(This, new color(This.value), This.value)
            }, 0)
        }
        var setcolor = function(str) {
            var c = new color(str)
            updateInput(this, c, str)
            if(instance && instance.input == this) {
                instance.color = c
                updateDialogPointers()
                updateDialogSaturation()
            }
        }

        var e = document.getElementsByTagName('input')
        var matchClass = new RegExp('\\s'+bindClass+'\\s')

        for(var i=0; i<e.length; i++) {
            if(e[i].type == 'text' && matchClass.test(' '+e[i].className+' ')) {

                e[i].originalStyle = {
                        'color' : e[i].style.color,
                        'backgroundColor' : e[i].style.backgroundColor
                }
                e[i].setAttribute('autocomplete', 'off')
                e[i].onfocus = onfocus
                e[i].onblur = onblur
                e[i].setcolor = setcolor

                updateInput(e[i], new color(e[i].value), e[i].value)
            }
        }
    }


    function updateInput(e, color, realValue) {
        if(allowEmpty && realValue != null && !/^\s*#?[0-9A-F]{6}\s*$/i.test(realValue)) {
            e.value = ''
            if(reflectOnBackground) {
                e.style.backgroundColor = e.originalStyle.backgroundColor
                e.style.color = e.originalStyle.color
            }
        } else {
            e.value = (leadingHash?'#':'')+color
            if(reflectOnBackground) {
                e.style.backgroundColor = '#'+color
                e.style.color =
                    0.212671 * color.red +
                    0.715160 * color.green +
                    0.072169 * color.blue
                    < 0.5 ? '#FFF' : '#000'
            }
        }
    }


    function setStyle(e, properties) {
        for(var p in properties) eval('e.style.'+p+' = properties[p]')
    }


    function getElementPos(e) {
        var x=0, y=0
        if(e.offsetParent) {
            do {
                x += e.offsetLeft
                y += e.offsetTop
            } while(e = e.offsetParent)
        }
        return [ x, y ]
    }


    function getMousePos(e) {
        if(!e) var e = window.event
        var x=0, y=0
        if(typeof e.pageX == 'number') {
            x = e.pageX
            y = e.pageY
        } else if(typeof e.clientX == 'number') {
            x = e.clientX+document.documentElement.scrollLeft+document.body.scrollLeft
            y = e.clientY+document.documentElement.scrollTop+document.body.scrollTop
        }
        return [ x, y ]
    }


    function getScrollPos() {
        var x=0, y=0
        if(typeof window.pageYOffset == 'number') {
            x = window.pageXOffset
            y = window.pageYOffset
        } else if(document.body && (document.body.scrollLeft || document.body.scrollTop)) {
            x = document.body.scrollLeft
            y = document.body.scrollTop
        } else if(document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
            x = document.documentElement.scrollLeft
            y = document.documentElement.scrollTop
        }
        return [ x, y ]
    }


    function getWindowSize() {
        var w=0, h=0
        if(typeof window.innerWidth == 'number') {
            w = window.innerWidth
            h = window.innerHeight
        } else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
            w = document.documentElement.clientWidth
            h = document.documentElement.clientHeight
        } else if(document.body && (document.body.clientWidth || document.body.clientHeight)) {
            w = document.body.clientWidth
            h = document.body.clientHeight
        }
        return [ w, h ]
    }


    function color(hex) {

        this.hue        = 0 // 0-6
        this.saturation = 0 // 0-1
        this.value      = 0 // 0-1

        this.red   = 0 // 0-1
        this.green = 0 // 0-1
        this.blue  = 0 // 0-1

        this.setRGB = function(r, g, b) { // null = don't change
            var hsv = RGB_HSV(
                r==null ? this.red : (this.red=r),
                g==null ? this.green : (this.green=g),
                b==null ? this.blue : (this.blue=b)
            )
            if(hsv[0] != null) {
                this.hue = hsv[0]
            }
            this.saturation = hsv[1]
            this.value = hsv[2]
        }

        this.setHSV = function(h, s, v) { // null = don't change
            var rgb = HSV_RGB(
                h==null ? this.hue : (this.hue=h),
                s==null ? this.saturation : (this.saturation=s),
                v==null ? this.value : (this.value=v)
            )
            this.red   = rgb[0]
            this.green = rgb[1]
            this.blue  = rgb[2]
        }

        function RGB_HSV(r, g, b) {
            var n = Math.min(Math.min(r,g),b)
            var v = Math.max(Math.max(r,g),b)
            var m = v - n
            if(m == 0) return [ null, 0, v ]
            var h = r==n ? 3+(b-g)/m : (g==n ? 5+(r-b)/m : 1+(g-r)/m)
            return [ h==6?0:h, m/v, v ]
        }

        function HSV_RGB(h, s, v) {
            if(h == null) return [ v, v, v ]
            var i = Math.floor(h)
            var f = i%2 ? h-i : 1-(h-i)
            var m = v * (1 - s)
            var n = v * (1 - s*f)
            switch(i) {
                case 6:
                case 0: return [ v, n, m ]
                case 1: return [ n, v, m ]
                case 2: return [ m, v, n ]
                case 3: return [ m, n, v ]
                case 4: return [ n, m, v ]
                case 5: return [ v, m, n ]
            }
        }

        this.setString = function(hex) {
            var m = hex.match(/^\s*#?([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})\s*$/i)
            if(m) {
                this.setRGB(
                    parseInt(m[1],16)/255,
                    parseInt(m[2],16)/255,
                    parseInt(m[3],16)/255
                )
            } else {
                this.setRGB(0,0,0)
                return false
            }
        }

        this.toString = function() {
            var r = Math.round(this.red * 255).toString(16)
            var g = Math.round(this.green * 255).toString(16)
            var b = Math.round(this.blue * 255).toString(16)
            return (
                (r.length==1 ? '0'+r : r)+
                (g.length==1 ? '0'+g : g)+
                (b.length==1 ? '0'+b : b)
            ).toUpperCase()
        }

        if(hex) {
            this.setString(hex)
        }

    }


    function URI(uri) { // See RFC3986

        this.scheme    = null
        this.authority = null
        this.path      = ''
        this.query     = null
        this.fragment  = null

        this.parse = function(uri) {
            var m = uri.match(/^(([A-Za-z][0-9A-Za-z+.-]*)(:))?((\/\/)([^\/?#]*))?([^?#]*)((\?)([^#]*))?((#)(.*))?/)
            this.scheme    = m[3] ? m[2] : null
            this.authority = m[5] ? m[6] : null
            this.path      = m[7]
            this.query     = m[9] ? m[10] : null
            this.fragment  = m[12] ? m[13] : null
            return this
        }

        this.toString = function() {
            var result = ''
            if(this.scheme    != null) result = result +      this.scheme + ':'
            if(this.authority != null) result = result +'//'+ this.authority
            if(this.path      != null) result = result +      this.path
            if(this.query     != null) result = result + '?'+ this.query
            if(this.fragment  != null) result = result + '#'+ this.fragment
            return result
        }

        this.toAbsolute = function(base) {
            var base = new URI(base)
            var r = this
            var t = new URI

            if(base.scheme == null) return false

            if(r.scheme != null && r.scheme.toLowerCase() == base.scheme.toLowerCase()) {
                r.scheme = null
            }

            if(r.scheme != null) {
                t.scheme    = r.scheme
                t.authority = r.authority
                t.path      = removeDotSegments(r.path)
                t.query     = r.query
            } else {
                if(r.authority != null) {
                    t.authority = r.authority
                    t.path      = removeDotSegments(r.path)
                    t.query     = r.query
                } else {
                    if(r.path == '') {
                        t.path = base.path
                        if(r.query != null) {
                            t.query = r.query
                        } else {
                            t.query = base.query
                        }
                    } else {
                        if(r.path.substr(0,1) == '/') {
                            t.path = removeDotSegments(r.path)
                        } else {
                            if(base.authority != null && base.path == '') {
                                t.path = '/'+r.path
                            } else {
                                t.path = base.path.replace(/[^\/]+$/,'')+r.path
                            }
                            t.path = removeDotSegments(t.path)
                        }
                        t.query = r.query
                    }
                    t.authority = base.authority
                }
                t.scheme = base.scheme
            }
            t.fragment = r.fragment

            return t
        }

        function removeDotSegments(path) {
            var out = ''
            while(path) {
                if(path.substr(0,3)=='../' || path.substr(0,2)=='./') {
                    path = path.replace(/^\.+/,'').substr(1)
                } else if(path.substr(0,3)=='/./' || path=='/.') {
                    path = '/'+path.substr(3)
                } else if(path.substr(0,4)=='/../' || path=='/..') {
                    path = '/'+path.substr(4)
                    out = out.replace(/\/?[^\/]*$/, '')
                } else if(path=='.' || path=='..') {
                    path = ''
                } else {
                    var rm = path.match(/^\/?[^\/]*/)[0]
                    path = path.substr(rm.length)
                    out = out + rm
                }
            }
            return out
        }

        if(uri) {
            this.parse(uri)
        }

    }

    // init
    createDialog()
    bindInputs()

}