<html>
<head>
    <title>Timeline demo</title>

    <script type="text/javascript" src="../timeline.js"></script>
    <link rel="stylesheet" type="text/css" href="../timeline.css">

    <style type="text/css">
        body {font: 10pt arial;}

        div.timeline-event {
            border: none;
            background: none;
            border-radius: 0;
        }
        div.timeline-event-selected {
            border: none;
            background: none;
        }
        div.timeline-event-content {
            margin: 0;
        }
        div.timeline-event-range {
            border: none;
            border-radius: 0;
            height: 100px;
            width: 100%;
            position: relative;
            overflow: visible;
        }
        div.bar {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            text-align: center;
            color: white;
            /* height and color is set for each individual bar */
        }
        div.requirement {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            border-top: 2px solid gray;
            background: #e5e5e5;
            opacity: 0.5;
        }
    </style>

    <script type="text/javascript">
        var timeline;

        /**
         * Calculate the color based on the given value.
         * @param {number} H   Hue, a value be between 0 and 360
         * @param {number} S   Saturation, a value between 0 and 1
         * @param {number} V   Value, a value between 0 and 1
         */
        var hsv2rgb = function(H, S, V) {
            var R, G, B, C, Hi, X;

            C = V * S;
            Hi = Math.floor(H/60);  // hi = 0,1,2,3,4,5
            X = C * (1 - Math.abs(((H/60) % 2) - 1));

            switch (Hi) {
                case 0: R = C; G = X; B = 0; break;
                case 1: R = X; G = C; B = 0; break;
                case 2: R = 0; G = C; B = X; break;
                case 3: R = 0; G = X; B = C; break;
                case 4: R = X; G = 0; B = C; break;
                case 5: R = C; G = 0; B = X; break;

                default: R = 0; G = 0; B = 0; break;
            }

            return "RGB(" + parseInt(R*255) + "," + parseInt(G*255) + "," + parseInt(B*255) + ")";
        };

        // Called when the Visualization API is loaded.
        function drawVisualization() {
            // Create and populate a data table.
            var data = [];

            var maxNum = 20;
            var d = new Date(2012, 6, 5);
            for (var i = 0; i < 20; i++) {
                var hours = Math.round(1 + Math.random() * 7);
                var start = new Date(d);
                var end = new Date(d);
                end.setHours(end.getHours() + hours);

                // create item with minimum requirement
                var num = Math.round(Math.random() * maxNum);    // number of members available
                var height = Math.round(num / maxNum * 80 + 20); // a percentage, with a lower bound on 20%
                var style = 'height:' + height + 'px;';
                var requirement = '<div class="requirement" style="' + style + '" ' +
                        'title="Minimum requirement: ' + num + ' people"></div>';

                // create item with actual number
                num = Math.round(Math.random() * maxNum);    // number of members available
                height = Math.round(num / maxNum * 70 + 20); // a percentage, with a lower bound on 20%
                var hue = Math.min(Math.max(height, 20), 80) * 1.2; // hue between 0 (red) and 120 (green)
                var color = hsv2rgb(hue, 0.95, 0.95);
                var borderColor = hsv2rgb(hue, 0.9, 0.9);
                style = 'height:' + height + 'px;' +
                        'background-color: ' + color + ';' +
                        'border-top: 2px solid ' + borderColor + ';';
                var actual = '<div class="bar" style="' + style + '" ' +
                        ' title="Actual: ' + num + ' people">' + num + '</div>';
                var item = {
                    'group': 'Team',
                    'start': start,
                    'end': end,
                    'content': requirement + actual
                };
                data.push(item);

                d = new Date(end);
            }

            // specify options
            var options = {
                "width":  "100%",
                "height": "300px",
                "style": "box",
                "stackEvents": false
            };

            // Instantiate our timeline object.
            timeline = new links.Timeline(document.getElementById('mytimeline'), options);

            // Draw our timeline with the created data and options
            timeline.draw(data);
        }
    </script>
</head>

<body onload="drawVisualization();">
<h1>Timeline - Bar Graph Example</h1>
<div id="mytimeline"></div>

</body>
</html>