1 /**
  2 * Constructs a new TrafficLight.
  3 * @class Represents a traffic light widget which creates a graphical traffic light in WSO2Vis.
  4 * @param {canvas} canvas the name of the HTML element (ex: div) where the graphical traffic light should be drawn.
  5 * @constructor
  6 */
  7 wso2vis.ctrls.TrafficLight = function(canvas) {
  8     this.attr = [];
  9     
 10     this.divEl(canvas);
 11 
 12     /* @private */
 13     this.lights = [];
 14     this.back = [];
 15     
 16     this.stat = [];
 17     this.stat["top"] = false;
 18     this.stat["middle"] = false;
 19     this.stat["bottom"] = false;
 20         
 21     this.color = [];
 22     this.color["top_on"] = "r#f00-#f00-#89070D";
 23     this.color["top_off"] = "r#900-#560101-#350305";
 24     this.color["middle_on"] = "r#FFD52E-#FFEB14-#9E4500";
 25     this.color["middle_off"] = "r#BD5F00-#6B2F00-#473A00";
 26     this.color["bottom_on"] = "r#0f0-#0e0-#07890D";
 27     this.color["bottom_off"] = "r#090-#015601-#033505";
 28         
 29     this.radius(35)
 30         .xspace(15)
 31         .yspace(20)
 32         .gap(10)
 33         .paper(null);
 34         
 35     this.dia = this.radius()*2;
 36     this.backh = (this.dia*3)+(this.gap()*2)+(this.yspace()*2);
 37     this.backw = this.dia+(this.xspace()*2);
 38     
 39     this.startX = this.radius() + this.xspace();
 40     this.startY = this.radius() + this.yspace();
 41 };
 42 
 43 wso2vis.ctrls.TrafficLight.prototype.property = function(name) {
 44     /*
 45     * Define the setter-getter globally
 46     */
 47     wso2vis.ctrls.TrafficLight.prototype[name] = function(v) {
 48       if (arguments.length) {
 49         this.attr[name] = v;
 50         return this;
 51       }
 52       return this.attr[name];
 53     };
 54 
 55     return this;
 56 };
 57 
 58 wso2vis.ctrls.TrafficLight.prototype
 59     .property("title")
 60     .property("divEl")
 61     .property("radius")
 62     .property("gap")
 63     .property("paper")
 64     .property("xspace")
 65     .property("yspace");
 66 
 67 wso2vis.ctrls.TrafficLight.prototype.load = function (p) {
 68 
 69     if( (p != null) && (p != undefined) && (p != "") ) {
 70         this.paper(p);
 71     }
 72     else {
 73         this.paper(Raphael(this.divEl()));
 74     }
 75     
 76     /* Init */
 77     this.paper().clear();
 78     this.back[0] = this.paper().rect(0, 0, this.backw, this.backh, 8).attr({"stroke-width": 1, stroke: "#000", fill: "#ccc"});
 79     this.back[1] = this.paper().rect(5, 5, this.backw-10, this.backh-10, 8).attr({stroke: "none", fill: "#000"});
 80     
 81     //Lights
 82     this.lights["top"] = this.paper().circle(this.startX, this.startY, this.radius()).attr({fill: this.color["top_off"], stroke: "#333"});
 83     this.lights["middle"] = this.paper().circle(this.startX, (this.startY + this.dia + this.gap()), this.radius()).attr({fill: this.color["middle_off"], stroke: "#333"});
 84     this.lights["bottom"] = this.paper().circle(this.startX, this.startY + (this.dia*2) + (this.gap()*2), this.radius()).attr({fill: this.color["bottom_off"], stroke: "#333"});
 85 
 86 };
 87 
 88 wso2vis.ctrls.TrafficLight.prototype.on = function (light) {
 89     this.lights[light].animate({fill: this.color[light+"_on"]}, 100);
 90     this.stat[light] = true;
 91 };
 92 
 93 wso2vis.ctrls.TrafficLight.prototype.off = function (light) {
 94     this.lights[light].animate({fill: this.color[light+"_off"]}, 100);
 95     this.stat[light] = false;
 96 };
 97 
 98 wso2vis.ctrls.TrafficLight.prototype.toggle = function (light) {
 99     if( this.stat[light] ) {
100         this.off(light);
101     }
102     else {
103         this.on(light);
104     }
105 };
106 
107 wso2vis.ctrls.TrafficLight.prototype.horizontal = function () {
108     /**
109     * Horizontal Layout
110     **/
111     this.back[0].attr({width: this.backh, height: this.backw});
112     this.back[1].attr({width: this.backh-10, height: this.backw-10});
113     
114     this.lights["top"].attr({cx: this.startY, cy: this.startX});
115     this.lights["middle"].attr({cx: this.startY + this.dia + this.gap(), cy: this.startX});
116     this.lights["bottom"].attr({cx: this.startY + (this.dia*2) + (this.gap()*2), cy: this.startX});
117 };
118 
119 wso2vis.ctrls.TrafficLight.prototype.vertical = function () {
120     /**
121     * Vertical Layout
122     **/
123     this.back[0].attr({width: this.backw, height: this.backh});
124     this.back[1].attr({width: this.backw-10, height: this.backh-10});
125     
126     this.lights["top"].attr({cx: this.startX, cy: this.startY});
127     this.lights["middle"].attr({cx: this.startX, cy: this.startY + this.dia + this.gap()});
128     this.lights["bottom"].attr({cx: this.startX, cy: this.startY + (this.dia*2) + (this.gap()*2)});
129 };
130 
131