rlm@85
|
1 Buy = (function (){
|
rlm@90
|
2
|
rlm@90
|
3
|
rlm@90
|
4 //Initilization Functions.
|
rlm@85
|
5 var order =
|
rlm@86
|
6 {color: "red",
|
rlm@86
|
7 style: "bold",
|
rlm@86
|
8 quantity: 30,
|
rlm@86
|
9 content: undefined,
|
rlm@86
|
10 info: undefined};
|
rlm@85
|
11
|
rlm@85
|
12 var display;
|
rlm@85
|
13 var color;
|
rlm@85
|
14 var style;
|
rlm@90
|
15
|
rlm@91
|
16 var state_map = {
|
rlm@91
|
17 green : {ref : null,
|
rlm@91
|
18 offState : {"fill" : "#030", "scale": 1} ,
|
rlm@91
|
19 onState : {"fill" : "#0F0", "scale": 1}},
|
rlm@91
|
20 red : {ref : null,
|
rlm@91
|
21 offState: {"fill" : "#300", "scale" : 1},
|
rlm@91
|
22 onState : {"fill" : "#F00" ,"scale" : 1}},
|
rlm@91
|
23 blue : {ref : null,
|
rlm@91
|
24 offState : {"fill" : "#003", "scale": 1},
|
rlm@91
|
25 onState : {"fill" : "#00F", "scale": 1},
|
rlm@91
|
26 ref : null},
|
rlm@91
|
27 black : {offState : null, onState : null, ref : null},
|
rlm@91
|
28 display : {ref : null, state : {"fill" : "black"}}};
|
rlm@90
|
29
|
rlm@90
|
30 var color_select_init = (function (){
|
rlm@90
|
31 state_map["red"].ref =
|
rlm@90
|
32 color.rect(1, 1, 70, 50, 10).attr(state_map["red"].offState);
|
rlm@90
|
33 state_map["red"].ref.node.onclick =
|
rlm@90
|
34 (function (){order.color= "red"; update();});
|
rlm@90
|
35 state_map["green"].ref =
|
rlm@90
|
36 color.rect(80, 1, 70, 50, 10).attr(state_map["green"].offState);
|
rlm@90
|
37 state_map["green"].ref.node.onclick =
|
rlm@90
|
38 (function (){order.color= "green"; update();});
|
rlm@90
|
39 state_map["blue"].ref =
|
rlm@90
|
40 color.rect(160, 1, 70, 50, 10).attr(state_map["blue"].offState);
|
rlm@90
|
41 state_map["blue"].ref.node.onclick =
|
rlm@90
|
42 (function (){order.color= "blue"; update();});
|
rlm@90
|
43
|
rlm@90
|
44 toggle_on(state_map[order.color]);
|
rlm@90
|
45 });
|
rlm@86
|
46
|
rlm@90
|
47 var display_init = (function (){
|
rlm@90
|
48 state_map["display"].ref =
|
rlm@90
|
49 display.rect(1, 1, 338, 213, 20).attr(state_map["display"].state);
|
rlm@90
|
50 });
|
rlm@90
|
51
|
rlm@90
|
52 var init = (function () {
|
rlm@90
|
53 display = Raphael("card-display", 340 ,215);
|
rlm@90
|
54 color = Raphael("color-select", 300, 100);
|
rlm@90
|
55 style = Raphael("style-select", 200, 70);
|
rlm@90
|
56 color_select_init();
|
rlm@90
|
57 display_init();
|
rlm@90
|
58 });
|
rlm@90
|
59
|
rlm@90
|
60
|
rlm@90
|
61 //Update Functions
|
rlm@86
|
62
|
rlm@86
|
63 var toggle_on = (function (button){
|
rlm@90
|
64 button.ref.animate(button.onState, 2000);
|
rlm@86
|
65 });
|
rlm@86
|
66
|
rlm@86
|
67 var toggle_off = (function (button){
|
rlm@90
|
68 button.ref.animate(button.offState, 2000);
|
rlm@86
|
69 });
|
rlm@86
|
70
|
rlm@90
|
71 var color_select_update = (function (){
|
rlm@86
|
72 var color = order.color;
|
rlm@86
|
73 return (function (){
|
rlm@86
|
74 if (order.color === color){}
|
rlm@86
|
75 else {
|
rlm@90
|
76 toggle_off(state_map[color]);
|
rlm@90
|
77 toggle_on(state_map[(order.color)]);
|
rlm@86
|
78 color = order.color;}
|
rlm@86
|
79 });})();
|
rlm@86
|
80
|
rlm@90
|
81 var display_update = (function (){
|
rlm@90
|
82 var color = state_map.display.state.fill
|
rlm@90
|
83
|
rlm@90
|
84 return (function (){
|
rlm@90
|
85 if (order.color === color){}
|
rlm@90
|
86 else {
|
rlm@91
|
87 state_map["display"].ref.animate(
|
rlm@91
|
88 {"fill" : state_map[order.color].onState.fill}, 2000);
|
rlm@90
|
89 color = order.color;}})})();
|
rlm@90
|
90
|
rlm@86
|
91 var update = (function (){
|
rlm@90
|
92 color_select_update();
|
rlm@90
|
93 display_update();
|
rlm@90
|
94 $("#debug").html(JSON.stringify(order));
|
rlm@90
|
95 });
|
rlm@86
|
96
|
rlm@85
|
97
|
rlm@85
|
98
|
rlm@90
|
99 // return closure over state
|
rlm@86
|
100 return {init : init,
|
rlm@90
|
101 update : update};})();
|
rlm@85
|
102
|
rlm@85
|
103
|
rlm@85
|
104 $(document).ready(function() {
|
rlm@90
|
105 Buy.init();
|
rlm@90
|
106 Buy.update();
|
rlm@85
|
107 });
|