rlm@85: Buy = (function (){ 
rlm@90: 
rlm@90: 
rlm@90:     //Initilization Functions.
rlm@85:     var order = 
rlm@86: 	{color: "red",
rlm@86: 	 style: "bold",
rlm@86: 	 quantity: 30,
rlm@86: 	 content: undefined,
rlm@86: 	 info: undefined};
rlm@85:     
rlm@85:     var display;
rlm@85:     var color;
rlm@85:     var style;
rlm@90: 
rlm@91:     var state_map = {
rlm@91:     	green : {ref : null, 
rlm@91:     		 offState : {"fill" : "#030", "scale": 1} , 
rlm@91:     		 onState :  {"fill" : "#0F0", "scale": 1}},
rlm@91:     	red  : {ref : null,
rlm@91:     		offState: {"fill" : "#300", "scale" : 1},
rlm@91:     		onState : {"fill" : "#F00" ,"scale" : 1}},
rlm@91:     	blue  : {ref : null,
rlm@91:     		 offState : {"fill" : "#003", "scale": 1}, 
rlm@91:     		 onState  : {"fill" : "#00F", "scale": 1}, 
rlm@91:     	    ref : null},
rlm@91:     	black : {offState : null, onState : null, ref : null},
rlm@91:     	display : {ref : null, state : {"fill" : "black"}}};
rlm@90: 
rlm@90:     var color_select_init = (function (){
rlm@90: 	state_map["red"].ref = 
rlm@90: 	    color.rect(1, 1, 70, 50, 10).attr(state_map["red"].offState);
rlm@90: 	state_map["red"].ref.node.onclick = 
rlm@90: 	    (function (){order.color= "red"; update();});
rlm@90: 	state_map["green"].ref = 
rlm@90: 	    color.rect(80, 1, 70, 50, 10).attr(state_map["green"].offState);
rlm@90: 	state_map["green"].ref.node.onclick = 
rlm@90: 	    (function (){order.color= "green"; update();});
rlm@90: 	state_map["blue"].ref = 
rlm@90: 	    color.rect(160, 1, 70, 50, 10).attr(state_map["blue"].offState);
rlm@90: 	state_map["blue"].ref.node.onclick = 
rlm@90: 	    (function (){order.color= "blue"; update();});
rlm@90: 	
rlm@90: 	toggle_on(state_map[order.color]);
rlm@90:     });
rlm@86:     
rlm@90:     var display_init = (function (){
rlm@90:     	state_map["display"].ref = 
rlm@90:     	    display.rect(1, 1, 338, 213, 20).attr(state_map["display"].state);
rlm@90:     });
rlm@90: 
rlm@90:     var init = (function () {
rlm@90: 	display = Raphael("card-display", 340 ,215);
rlm@90: 	color = Raphael("color-select", 300, 100);
rlm@90: 	style = Raphael("style-select", 200, 70);
rlm@90: 	color_select_init();
rlm@90: 	display_init();
rlm@90:     });
rlm@90: 
rlm@90: 	
rlm@90:     //Update Functions	    
rlm@86:     
rlm@86:     var toggle_on = (function (button){
rlm@90: 	button.ref.animate(button.onState, 2000);
rlm@86:     });
rlm@86:     
rlm@86:     var toggle_off = (function (button){
rlm@90: 	button.ref.animate(button.offState, 2000);
rlm@86:     });
rlm@86:     
rlm@90:     var color_select_update = (function (){
rlm@86: 	var color = order.color;
rlm@86: 	return (function (){
rlm@86: 	    if (order.color === color){}
rlm@86: 	    else {
rlm@90: 		toggle_off(state_map[color]);
rlm@90: 		toggle_on(state_map[(order.color)]);
rlm@86: 		color = order.color;}
rlm@86: 	});})(); 
rlm@86:     
rlm@90:     var display_update = (function (){
rlm@90:     	var color = state_map.display.state.fill 
rlm@90: 
rlm@90:     	return (function (){
rlm@90:     	    if (order.color === color){}
rlm@90:     	    else {
rlm@91:     		state_map["display"].ref.animate(
rlm@91: 		    {"fill" : state_map[order.color].onState.fill}, 2000);
rlm@90:     		color = order.color;}})})();
rlm@90: 
rlm@86:     var update = (function (){
rlm@90: 	color_select_update();
rlm@90: 	display_update();
rlm@90: 	$("#debug").html(JSON.stringify(order));
rlm@90:     });
rlm@86:     
rlm@85:     
rlm@85:     
rlm@90:     // return closure over state
rlm@86:     return {init : init,
rlm@90: 	    update : update};})(); 
rlm@85: 
rlm@85: 
rlm@85: $(document).ready(function() {
rlm@90:     Buy.init();
rlm@90:     Buy.update();
rlm@85:     });