<!DOCTYPE HTML>
<html>
    <head>
        <title>color</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <link rel="stylesheet" type="text/css" href="../../build/css/ox.ui.css"/>
        <link rel="stylesheet" type="text/css" href="css/form.css"/>
        <script type="text/javascript" src="../../build/js/jquery-1.4.2.js"></script>
        <script type="text/javascript" src="../../build/js/ox.js"></script>
        <script type="text/javascript" src="../../build/js/ox.data.js"></script>
        <script type="text/javascript" src="../../build/js/ox.ui.js"></script>
        <script>
            $(function() {
                var $body = $("body"),
                    $ranges = [],
                    color = [255, 0, 0],
                    rgb = ["red", "green", "blue"],
                    $color = new Ox.Label({
                            width: 256
                        })
                        .css({
                            height: "46px",
                            background: getColor()
                        })
                        .appendTo($body);
                $.each(Ox.range(3), function(i) {
                    var colors = getColors(i);
                    $ranges[i] = new Ox.Range({
                            arrows: true,
                            id: rgb[i],
                            max: 255,
                            size: 256,
                            thumbSize: 40,
                            thumbValue: true,
                            trackColors: colors,
                            value: color[i]
                        })
                        .css({
                            marginBottom: "-4px"
                        })
                        .bindEvent("change", function(event, data) {
                            change(i, data.value);
                        })
                        .appendTo($body);
                });
                function change(index, value) {
                    color[index] = value;
                    $color.css({
                        background: getColor()
                    });
                    $.each(Ox.range(3), function(i) {
                        if (i != index) {
                            $ranges[i].options({
                                trackColors: getColors(i)
                            });
                        }
                    });
                }
                function getColor() {
                    return "rgb(" + color.join(", ") + ")";
                }
                function getColors(index) {
                    return [
                        "rgb(" + $.map(Ox.range(3), function(v) {
                            return v == index ? 0 : color[v];
                        }).join(", ") + ")",
                        "rgb(" + $.map(Ox.range(3), function(v) {
                            return v == index ? 255 : color[v];
                        }).join(", ") + ")"
                    ]
                }
            });
        </script>
    </head>
    <body></body>
</html>