view js-lib/buy3.js @ 93:69b4defd835d laserkard

saving work
author Robert McIntyre <rlm@mit.edu>
date Mon, 26 Jul 2010 18:19:34 -0400
parents 614dca52e323
children 0f19af92260e
line wrap: on
line source
1 // Cards = (function (){
4 // (function (info paper){
5 // info.name
6 // info.occupation
7 // info.email
8 // info.phone
15 // });
20 Buy = (function (){
21 // Utility Functinos
23 var switchText = (function (){
24 if ($(this).val() == $(this).attr('title'))
25 $(this).val('').removeClass('exampleText');
26 else if ($.trim($(this).val()) == '')
27 $(this).addClass('exampleText').val($(this).attr('title'));});
33 // Initilization Functions.
34 var order =
35 {color : "green",
36 style : "bold",
37 quantity : 30,
38 content : undefined,
39 info : undefined,
40 name : "Robert McIntyre",
41 occupation : "AI Researcher",
42 phone : "617.821.9129",
43 email : "rlm@mit.edu",
44 website : "www.rlmcintyre.com",
45 company : "LaserKard LLC."
46 };
48 var display;
49 var color;
50 var style;
52 var state_map = {
53 green : {ref : null,
54 offState : {"fill" : "#030", "scale": 1} ,
55 onState : {"fill" : "#0F0", "scale": 1}},
56 red : {ref : null,
57 offState: {"fill" : "#300", "scale" : 1},
58 onState : {"fill" : "#F00" ,"scale" : 1}},
59 blue : {ref : null,
60 offState : {"fill" : "#003", "scale": 1},
61 onState : {"fill" : "#00F", "scale": 1},
62 ref : null},
63 black : {offState : null, onState : null, ref : null},
64 display : {ref : null, state : {"fill" : "black"}}};
66 var color_select_init = (function (){
67 state_map["red"].ref =
68 color.rect(160, 1, 70, 50, 10).attr(state_map["red"].offState);
69 state_map["red"].ref.node.onclick =
70 (function (){order.color= "red"; update();});
71 state_map["green"].ref =
72 color.rect(1, 1, 70, 50, 10).attr(state_map["green"].offState);
73 state_map["green"].ref.node.onclick =
74 (function (){order.color= "green"; update();});
75 state_map["blue"].ref =
76 color.rect(80, 1, 70, 50, 10).attr(state_map["blue"].offState);
77 state_map["blue"].ref.node.onclick =
78 (function (){order.color= "blue"; update();});
80 toggle_on(state_map[order.color]);
81 });
83 var display_init = (function (){
84 state_map["display"].ref =
85 display.rect(1, 1, 338, 213, 20).attr(state_map["display"].state);
86 });
88 var text_entry_init = (function (){
89 $('input[type=text][title!=""]').each(function() {
90 if ($.trim($(this).val()) == ''){
91 $(this).val($(this).attr('title'));}
92 if ($(this).val() == $(this).attr('title')){
93 $(this).addClass('exampleText');}
94 }).focus(switchText).blur(switchText);
96 $('form').submit(function() {
97 $(this).find('input[type=text][title!=""]').each(function() {
98 if ($(this).val() == $(this).attr('title')){
99 $(this).val('');}})})});
106 var init = (function () {
107 display = Raphael("card-display", 340 ,215);
108 color = Raphael("color-select", 300, 100);
109 style = Raphael("style-select", 200, 70);
110 color_select_init();
111 display_init();
112 card_init();
113 text_entry_init();
114 key_handling();
116 });
119 //Update Functions
121 var toggle_on = (function (button){
122 button.ref.animate(button.onState, 2000);
123 });
125 var toggle_off = (function (button){
126 button.ref.animate(button.offState, 2000);
127 });
129 var color_select_update = (function (){
130 var color = order.color;
131 return (function (){
132 if (order.color === color){}
133 else {
134 toggle_off(state_map[color]);
135 toggle_on(state_map[(order.color)]);
136 color = order.color;}
137 });})();
139 var display_color_update = (function (){
140 var color = state_map.display.state.fill
142 return (function (){
143 if (order.color === color){}
144 else {
145 state_map["display"].ref.animate(
146 {"fill" : state_map[order.color].onState.fill}, 2000);
147 color = order.color;}})})();
151 var display_style_update = (function (){
152 var style = null;
153 return (function (){
154 if (style !== order.style){
155 ""; }});
156 });
159 var card =
160 {name : {text: "Robert McIntyre", ref: ""},
161 company : {text: "", ref: ""},
162 occupation : {text: "", ref: ""},
163 phone : {text: "", ref: ""},
164 email : {text: "", ref: ""},
165 website : {text: "", ref: ""},
166 decoration : {text: "", ref: ""}};
168 var card_init = (function () {
169 card.name.ref = display.rect(10,10,10,10,5);
170 });
172 var key_handling = (function (){
173 var assoc = (function (target, field) {
174 $(target).keyup(function() {
175 field.text = $(target).val();
176 update();})});
177 assoc('#user-name', card.name);
178 assoc('#user-phone', card.phone);
179 assoc('#user-email', card.email);
180 assoc('#user-company', card.company);
181 assoc('#user-occupation', card.occupation);
182 assoc('#user-website', card.website);
185 });
189 var display_text_update = (function (){
190 var name = null;
192 return (function () {
194 if (name !== card.name.text){
196 card.name.ref.remove();
197 card.name.ref =
198 display.print(10,10,card.name.text,
199 display.getFont('HelveticaNeue',700), 25).attr(
200 {"fill" : "#FFFFFF"});
202 //card.name.ref.animate({"fill" : Raphael.getColor()} ,1000);
203 name = card.name.text;
204 }});
207 })();
211 var update = (function (){
212 color_select_update();
213 display_color_update();
214 display_text_update();
215 $("#debug").html(JSON.stringify({name : card.name.text, email : card.email.text}));
216 });
220 // return closure over state
221 return {init : init,
222 update : update};})();
232 $(document).ready(function() {
233 Buy.init();
234 Buy.update();
235 });