view js-lib/buy3.js @ 90:08f93d043ed2 laserkard

saving progress
author Robert McIntyre <rlm@mit.edu>
date Mon, 26 Jul 2010 04:13:05 -0400
parents 81deee1fc85b
children 0dd39631299c
line wrap: on
line source
1 Buy = (function (){
4 //Initilization Functions.
5 var order =
6 {color: "red",
7 style: "bold",
8 quantity: 30,
9 content: undefined,
10 info: undefined};
12 var display;
13 var color;
14 var style;
16 // var state_map =
17 // {green :{
18 // ref: null,
19 // offState : null,
20 // onState : null},
21 // red : {
22 // offState: {"fill" : "#300", "scale" : 1},
23 // onState : {"fill" : "#F00" ,"scale" : 1},
24 // ref : null},
25 // blue : {
26 // offState : null,
27 // onState : null,
28 // ref : null},
29 // black : {offState : null, onState : null, ref : null},
30 // display : {ref : null, state : {"fill" : "black"}}};
32 var state_map =
33 {green : { ref: null, offState : null, onState : null},
34 red : {
35 offState: {"fill" : "#300", "scale" : 1},
36 onState : {"fill" : "#F00" ,"scale" : 1},
37 ref : null},
38 blue : {
39 offState : null,
40 onState : null,
41 ref : null},
42 black : {offState : null, onState : null, ref : null},
43 display : {ref : null, state : {"fill" : "black"}}};
45 var color_select_init = (function (){
46 state_map["red"].ref =
47 color.rect(1, 1, 70, 50, 10).attr(state_map["red"].offState);
48 state_map["red"].ref.node.onclick =
49 (function (){order.color= "red"; update();});
51 state_map["green"].onState =
52 {"fill" : "#0F0", "scale": 1};
53 state_map["green"].offState =
54 {"fill" : "#030", "scale": 1};
55 state_map["green"].ref =
56 color.rect(80, 1, 70, 50, 10).attr(state_map["green"].offState);
57 state_map["green"].ref.node.onclick =
58 (function (){order.color= "green"; update();});
60 state_map["blue"].onState =
61 {"fill" : "#00F", "scale": 1};
62 state_map["blue"].offState =
63 {"fill" : "#003", "scale": 1};
64 state_map["blue"].ref =
65 color.rect(160, 1, 70, 50, 10).attr(state_map["blue"].offState);
66 state_map["blue"].ref.node.onclick =
67 (function (){order.color= "blue"; update();});
70 toggle_on(state_map[order.color]);
71 });
73 var display_init = (function (){
74 state_map["display"].state =
75 {"fill": "white"};
76 state_map["display"].ref =
77 display.rect(1, 1, 338, 213, 20).attr(state_map["display"].state);
78 });
80 var init = (function () {
82 display = Raphael("card-display", 340 ,215);
83 color = Raphael("color-select", 300, 100);
84 style = Raphael("style-select", 200, 70);
85 color_select_init();
86 display_init();
87 });
90 //Update Functions
92 var toggle_on = (function (button){
93 button.ref.animate(button.onState, 2000);
94 });
96 var toggle_off = (function (button){
97 button.ref.animate(button.offState, 2000);
98 });
100 var color_select_update = (function (){
101 var color = order.color;
102 return (function (){
103 if (order.color === color){}
104 else {
105 toggle_off(state_map[color]);
106 toggle_on(state_map[(order.color)]);
107 color = order.color;}
108 });})();
110 var display_update = (function (){
111 var color = state_map.display.state.fill
113 return (function (){
114 if (order.color === color){}
115 else {
116 state_map["display"].ref.animate({"fill" : order.color}, 2000);
117 color = order.color;}})})();
119 var update = (function (){
120 color_select_update();
121 display_update();
122 $("#debug").html(JSON.stringify(order));
123 });
127 // return closure over state
128 return {init : init,
129 update : update};})();
132 $(document).ready(function() {
133 Buy.init();
134 Buy.update();
135 });