decouple the chart coordinator html from the charts under its control. Also lighten the border of input text boxes.

3 files changed, 45 insertions, 15 deletions

diff --git a/docs/examples/assets/css/style.css b/docs/examples/assets/css/style.css
index 561b11e..10ecda9 100644
--- a/docs/examples/assets/css/style.css
+++ b/docs/examples/assets/css/style.css
@@ -75,6 +75,11 @@ input[type=checkbox] {
     border: none;
 }
 
+input[type=text] {
+    padding: 3px;
+    border: 1px solid #EEE;
+}
+
 .notice {
     border: 1px solid Green;
     background: #FFDDFF;
diff --git a/docs/examples/index.html b/docs/examples/index.html
index e561b9e..6acf2b8 100644
--- a/docs/examples/index.html
+++ b/docs/examples/index.html
@@ -58,14 +58,13 @@
                 <div class="range-preview"
                      title="Time range preview - click and drag to select a custom timerange" ></div>
             </form>
-            <div class="tabbed-chart-interface"></div>
-            <div class="chart-container">
-                <h2 class="title"></h2>
-                <div class="error"></div>
-                <div class="chart"></div>
-                <div class="graph-legend"></div>
-            </div>
         </div>
-
+        <div class="tabbed-chart-interface"></div>
+        <div class="chart-container">
+            <h2 class="title"></h2>
+            <div class="error"></div>
+            <div class="chart"></div>
+            <div class="graph-legend"></div>
+        </div>
     </body>
 </html>
diff --git a/jarmon/jarmon.js b/jarmon/jarmon.js
index d4f902c..731c06c 100644
--- a/jarmon/jarmon.js
+++ b/jarmon/jarmon.js
@@ -983,7 +983,7 @@ jarmon.TabbedInterface = function($tpl, recipe) {
         'title': 'Add new tab'
     }).append(
         $('<img/>', {src: 'assets/icons/next.gif'}),
-        $('<input/>').hide()
+        $('<input/>', {'type': 'text'}).hide()
     ).appendTo(this.$tabBar);
 
     this.$tabPanels = $('<div/>', {'class': 'css-panes charts'}).appendTo($tpl);
@@ -1030,7 +1030,8 @@ jarmon.TabbedInterface = function($tpl, recipe) {
             var $originalLink = $(this);
             var $input = $('<input/>', {
                 'value': $originalLink.text(),
-                'name': 'editTabTitle'
+                'name': 'editTabTitle',
+                'type': 'text'
             })
             $originalLink.replaceWith($input);
             $input.focus();
@@ -1285,11 +1286,36 @@ jarmon.ChartCoordinator = function(ui, charts) {
 
     // When a selection is made on the range timeline, or any of my charts
     // redraw all the charts.
-    this.ui.bind("plotselected", function(event, ranges) {
-        self.ui.find('[name="from_standard"]').val('custom');
-        self.setTimeRange(ranges.xaxis.from, ranges.xaxis.to);
-        self.update();
-    });
+    $(document).bind(
+        'plotselected',
+        {self: this},
+        function(e, ranges) {
+            var self = e.data.self;
+            var eventSourceIsMine = false;
+
+            // plotselected event may be from my range selector chart or
+            if( self.ui.has(e.target) ) {
+                eventSourceIsMine = true;
+            } else {
+                // ...it may come from one of the charts under my supervision
+                for(var i=0; i<self.charts.length; i++) {
+                    if(self.charts[i].template.has(e.target).length > 0) {
+                        eventSourceIsMine = true;
+                        break;
+                    }
+                }
+            }
+
+            if(eventSourceIsMine) {
+                // Update the prepared time range select box to value "custom"
+                self.ui.find('[name="from_standard"]').val('custom');
+
+                // Update all my charts
+                self.setTimeRange(ranges.xaxis.from, ranges.xaxis.to);
+                self.update();
+            }
+        }
+    );
 
     // Add dhtml calendars to the date input fields
     this.ui.find(".timerange_control img")