// vim: et:ts=4:sw=4:sts=4:ft=javascript

/*@
Ox.ColorPicker <f:Ox.Element> ColorPicker Element
    () ->              <f> ColorPicker Element
    (options) ->       <f> ColorPicker Element
    (options, self) -> <f> ColorPicker Element
    options <o> Options object
        id <s> element id
        value <s|0, 0, 0> rgb value
    self <o>    Shared private variable
    change <!> triggered on change of value
@*/

Ox.ColorPicker = function(options, self) {

    self = self || {};
    var that = Ox.Element({}, self)
            .defaults({
                id: '',
                value: '0, 0, 0'
            })
            .options(options || {});

    //Ox.Log('Form', self)
    self.$ranges = [];
    self.rgb = ['red', 'green', 'blue'];
    self.values = self.options.value.split(', ');

    Ox.range(3).forEach(function(i) {
        self.$ranges[i] = Ox.Range({
                arrows: true,
                id: self.options.id + Ox.toTitleCase(self.rgb[i]),
                max: 255,
                size: 328, // 256 + 16 + 40 + 16
                thumbSize: 40,
                thumbValue: true,
                trackColors: getColors(i),
                value: self.values[i]
            })
            .css({
                position: 'absolute',
                top: (i * 15) + 'px'
            })
            .bindEvent('change', function(data) {
                change(i, data.value);
            })
            .appendTo(that);
        // fixme: make self.$ranges[i].children() work
        if (i == 0) {
            self.$ranges[i].$element.children('input.OxOverlapRight').css({
                MozBorderRadius: 0,
                WebkitBorderRadius: 0
            });
            self.$ranges[i].$element.children('input.OxOverlapLeft').css({
                MozBorderRadius: '0 8px 0 0',
                WebkitBorderRadius: '0 8px 0 0'
            });
        } else {
            self.$ranges[i].$element.children('input').css({
                MozBorderRadius: 0,
                WebkitBorderRadius: 0
            });
        }
    });

    that = Ox.Picker({
        element: that,
        elementHeight: 46,
        elementWidth: 328,
        id: self.options.id
    });

    function change(index, value) {
        self.values[index] = value;
        self.options.value = self.values.join(', ');
        that.$label.css({
            background: 'rgb(' + self.options.value + ')'
        });
        Ox.range(3).forEach(function(i) {
            if (i != index) {
                self.$ranges[i].options({
                    trackColors: getColors(i)
                });
            }
        });
        that.triggerEvent('change', {
            value: self.options.value
        });
    }

    function getColors(index) {
        return [
            'rgb(' + Ox.range(3).map(function(v) {
                return v == index ? 0 : self.values[v];
            }).join(', ') + ')',
            'rgb(' + Ox.range(3).map(function(v) {
                return v == index ? 255 : self.values[v];
            }).join(', ') + ')'
        ];
    }

    return that;

};
