1 files changed, 59 insertions, 13 deletions
diff --git a/index.html b/index.html
index d52776b..810e1f0 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,14 @@
         <title>untitled</title>
         <meta http-equiv="content-type" content="text/html;charset=utf-8" />
         <style type="text/css">
+        body {
+            font-family: sans;
+        }
+
+        form div {
+            text-align: center;
+        }
+
         .chart {
             width:800px;
             height:200px;
@@ -114,11 +122,47 @@
             return c;
         }
 
+        var ChartCoordinator = function(ui) {
+            this.ui = ui;
+            this.charts = [];
+
+            var self = this;
+            this.ui.bind('submit', function(e) {
+                self.update();
+                return false;
+            });
+
+            this.ui.bind('reset', function(e) {
+                self.reset();
+                return false;
+            });
+        };
+
+        ChartCoordinator.prototype.update = function() {
+            var startTime = new Date(this.ui[0].startTime.value);
+            var endTime = new Date(this.ui[0].endTime.value);
+            for(var i=0; i<this.charts.length; i++){
+                this.charts[i].draw(startTime, endTime);
+            }
+        };
+
+        ChartCoordinator.prototype.setTimeRange = function(startTime, endTime) {
+            this.ui[0].startTime.value = startTime.toString().split(' ').slice(1,5).join(' ');
+            this.ui[0].endTime.value = endTime.toString().split(' ').slice(1,5).join(' ');;
+            this.update();
+        };
+
+        ChartCoordinator.prototype.reset = function() {
+            this.setTimeRange(new Date(new Date().getTime()-1*60*60*1000),
+                              new Date());
+        };
+
         $(function() {
+            var cc = new ChartCoordinator($('.chartRangeControl'));
             var chartTemplate = $('.chart').remove();
-            var charts = [
-                dnsChartFactory(
-                    chartTemplate.clone().appendTo('.charts')),
+            cc.charts = [
+                //dnsChartFactory(
+                //    chartTemplate.clone().appendTo('.charts')),
 
                 loadChartFactory(
                     chartTemplate.clone().appendTo('.charts')),
@@ -133,23 +177,25 @@
                     chartTemplate.clone().appendTo('.charts'))
             ];
 
-            jQuery.each(charts, function(i, chart) {
-                chart.draw(new Date('10 April 2010 19:30:00'),
-                           new Date());
-            });
+            cc.reset();
 
-            $('.chart').bind("plotselected", function(event, ranges) {
-                var startTime = new Date(ranges.xaxis.from);
-                var endTime = new Date(ranges.xaxis.to);
-                jQuery.each(charts, function(i, chart) {
-                    chart.draw(startTime, endTime);
-                });
+            $('.charts').bind("plotselected", function(event, ranges) {
+                cc.setTimeRange(new Date(ranges.xaxis.from),
+                                new Date(ranges.xaxis.to));
             });
         });
         </script>
     </head>
 
     <body>
+        <form method="GET" class="chartRangeControl">
+            <div>
+                <label>Start: <input type="text" name="startTime" /></label>
+                <label>End: <input type="text" name="endTime" /></label>
+                <input type="submit" value="Update" />
+                <input type="reset" value="Reset" />
+            </div>
+        </form>
         <div class="charts">
             <div class="chart"></div>
         </div>