color picker tweaks and new bar graph

frameworks/sai/raphael.js

@@ -2928,7 +2928,7 @@ var Raphael = (function () {
                 }
                 e.prev = time;
             }
-            R.svg && that && that.paper.safari();
+            R.svg && that && that.paper && that.paper.safari();
             animationElements[length] && win.setTimeout(animation);
         },
         upto255 = function (color) {

frameworks/sai/tests/views/bar_graph.js

@@ -0,0 +1,30 @@
+// ========================================================================
+// SCUI.BarGraph Tests
+// ========================================================================
+
+
+/*global module test htmlbody ok equals same stop start */
+
+
+htmlbody('<style> .sc-static-layout { border: 1px red dotted; } </style>');
+
+(function() {  
+  var pane = SC.ControlTestPane.design()
+
+    .add("bar", SCUI.BarGraph, { 
+      layout: {width: 300, height: 300},
+      content: [55, 20, 13, 32, 5, 1, 2, 10]
+    });
+
+  pane.show(); // add a test to show the test pane
+
+  // ..........................................................
+  // TEST VIEWS
+  // 
+  module('SCUI.BarGraph ui', pane.standardSetup());
+
+  test("Check that all bar graphas are visible", function() {
+    ok(pane.view('bar').get('isVisibleInWindow'), 'bar graph should be visible');
+   });
+})();
+

frameworks/sai/views/bar_graph.js

@@ -0,0 +1,58 @@
+// ==========================================================================
+// Project:   SCUI.BarGraph
+// ==========================================================================
+/*globals SCUI Raphael*/
+require('graphing/graphael');
+require('graphing/gbar');
+/** @class
+
+  this view makes the awesome raphael.js bar graphs work in sproutcore
+
+  
+  @extends SC.View
+*/
+
+SCUI.BarGraph = SC.View.extend(
+/** @scope SCUI.BarGraph.prototype */ {
+
+  /*
+  
+  */
+  content: null,
+
+
+  render: function(context, firstTime){
+  },
+
+  didAppendToDocument: function(){    
+    // this is where colorpickers created
+    var layer = this.$().get(0);
+    var r = Raphael(layer),
+    fin = function () {
+      this.flag = r.g.popup(this.bar.x, this.bar.y, this.bar.value || "0").insertBefore(this);
+    },
+    fout = function () {
+      this.flag.animate({opacity: 0}, 300, function () {this.remove();});
+    },
+    fin2 = function () {
+      var y = [], res = [];
+      for (var i = this.bars.length; i--;) {
+        y.push(this.bars[i].y);
+        res.push(this.bars[i].value || "0");
+      }
+      this.flag = r.g.popup(this.bars[0].x, Math.min.apply(Math, y), res.join(", ")).insertBefore(this);
+    },
+    fout2 = function () {
+      this.flag.animate({opacity: 0}, 300, function () {this.remove();});
+    };
+
+    r.g.hbarchart(0, 0, 300, 220, [this.get('content')]).hover(fin, fout);
+    this._raphael = r;
+  },
+
+  willDestroyLayer: function(){
+    if(this._raphael) this._raphael.remove();
+  }
+
+});
+

frameworks/sai/views/color_picker.js

@@ -19,6 +19,11 @@ SCUI.ColorPicker = SC.View.extend(
     the current color value in hex
   */
   value: "#eee",
+  /*
+    thie size of the color picker... be sure to leave room
+    for the text box
+  */
+  size: 160,
 
   displayProperties: 'value'.w(),
 
@@ -41,16 +46,17 @@ SCUI.ColorPicker = SC.View.extend(
     var pv = this.get('parentView'), frame = this.get('frame');
     var newFrame = pv ? pv.convertFrameToView(frame, null) : frame;
 
-    this._cp = cp = Raphael.colorpicker(newFrame.x, newFrame.y, 160, this.get('value'), layer);
+    this._cp = cp = Raphael.colorpicker(newFrame.x, newFrame.y, this.get('size'), this.get('value'), layer);
     this._output = output;
 
-
+    //event handler for color picker view
     this._cp.onchange = function(color){
       output.value = color;
       output.style.background = color; 
       output.style.color = Raphael.rgb2hsb(color).b < 0.5 ? "#fff" : "#000";
       that.setIfChanged('value', color);
     };
+    //event handler for textfield
     output.onkeyup = function(){
       var val = this.value;
       cp.color(val);