//vim: et:ts=4:sw=4:sts=4:ft=js
Ox.ColorPicker = function(options, self) {

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

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

    Ox.range(3).forEach(function(i) {
        self.$ranges[i] = new 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(event, 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 = new 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(' + $.map(Ox.range(3), function(v) {
                return v == index ? 0 : self.values[v];
            }).join(', ') + ')',
            'rgb(' + $.map(Ox.range(3), function(v) {
                return v == index ? 255 : self.values[v];
            }).join(', ') + ')'
        ]
    }

    return that;

};