Buy = (function (){ 

 

     //Cards drawing functions:

 

     var magic_font_ratio = 318; //the font size for identity under .scale(1,1) 

     var mfg = magic_font_ratio;

     

 

 

     var draw_card = (function (paper){

 	

 	var helvetica  = paper.getFont('HelveticaNeue', 700);

 	var helveticaI = paper.getFont('HelveticaNeue', 800);

 	var h = paper.height;

 	var w = paper.width;

 

 	return {

 	    "bold" : {

 		"name" :(function (text){

 		    var x = w*0.1; var y = h*0.2;

 		    return paper.print(x,y,text,helvetica).attr(

 			{"fill" : "red"}).scale(0.0002*h,0.00025*w,x,y);}),

 		"email" : (function (text){

 		    var x = w*0.1; var y = h*0.4;

 		    return paper.print(x,y,text,helveticaI).attr(

 			{"fill" : "red"}).scale(0.0002*h,0.00025*w,x,y);})}

 	};

 	

     });

 

 

 

 

 

 

     

 

 

     // Utility Functinos

 

 

 

 

 

     var switchText = (function (){

 	if ($(this).val() == $(this).attr('title'))

 	    $(this).val('').removeClass('exampleText');

 	else if ($.trim($(this).val()) == '')

 	    $(this).addClass('exampleText').val($(this).attr('title'));});

 

     //what an asinine function... referential transparency blah blah...

     var deref = (function (var_name){return var_name;});

 

 

 

 

     // Initilization Functions.

     var card;

 	

     var card_init = (function () {

 	

 	card = {

 	    name       : {text: "Robert McIntyre", ref: display.set()},

 	    company    : {text: "", ref: display.set()},

 	    occupation : {text: "", ref: display.set()},

 	    phone      : {text: "", ref: display.set()},

 	    email      : {text: "rlm@mit.edu", ref: display.set()},

 	    website    : {text: "", ref: display.set()},

 	    decoration : {text: "", ref: display.set()}};

     });

 

 

     var order = 

 	{color : "blue",

 	 style : "bold",

 	 quantity : 30,

 	 content : undefined,

 	 info : undefined,

 	 name : "Robert McIntyre",

 	 occupation : "AI Researcher",

 	 phone : "617.821.9129",

 	 email : "rlm@mit.edu",

 	 website : "www.rlmcintyre.com",

 	 company : "LaserKard LLC." 

 	};

     

     var display;

     var color;

     var style = {};

     var helvetica;

     var helvetica_I;

 

     var state_map = {

     	bold  : null,

 	classic : null,

 	

 	green : {ref : null, 

     		 offState : {"fill" : "#030", "scale": 1} , 

     		 onState :  {"fill" : "#0F0", "scale": 1}},

     	red  : {ref : null,

     		offState: {"fill" : "#300", "scale" : 1},

     		onState : {"fill" : "#F00" ,"scale" : 1}},

     	blue  : {ref : null,

     		 offState : {"fill" : "#003", "scale": 1}, 

     		 onState  : {"fill" : "#00F", "scale": 1}, 

     	    ref : null},

     	black : {offState : null, onState : null, ref : null},

     	display : {ref : null, state : {"fill" : "black"}}};

 

     var color_select_init = (function (){

 	state_map["red"].ref = 

 	    color.rect(160, 1, 70, 50, 10).attr(state_map["red"].offState);

 	state_map["red"].ref.node.onclick = 

 	    (function (){order.color= "red"; update();});

 	state_map["green"].ref = 

 	    color.rect(1, 1, 70, 50, 10).attr(state_map["green"].offState);

 	state_map["green"].ref.node.onclick = 

 	    (function (){order.color= "green"; update();});

 	state_map["blue"].ref = 

 	    color.rect(80, 1, 70, 50, 10).attr(state_map["blue"].offState);

 	state_map["blue"].ref.node.onclick = 

 	    (function (){order.color= "blue"; update();});

 	

 	toggle_on(state_map[order.color]);

     });

     

     var display_init = (function (){

     	state_map["display"].ref = 

     	    display.rect(1, 1 , display.width - 1, display.height - 2, 20).attr(

 		state_map["display"].state);

     });

     

     var text_entry_init = (function (){

 	$('input[type=text][title!=""]').each(function() {

 	    if ($.trim($(this).val()) == ''){

 		$(this).val($(this).attr('title'));}

 	    if ($(this).val() == $(this).attr('title')){

 		$(this).addClass('exampleText');}

 	}).focus(switchText).blur(switchText);

 	

 	$('form').submit(function() {

 	    $(this).find('input[type=text][title!=""]').each(function() {

 		if ($(this).val() == $(this).attr('title')){

 		    $(this).val('');}})})});

 

     var style_text = {

 	phone : "617.821.9129",

 	email : "rlm@mit.edu",

 	website : "www.rlmcintyre.com",

 	name : "Robert McIntyre",

 	company : "LaserKard LLC.",

 	occupation : "AI Researcher"}

 

 

     var style_init = (function (){

 	var draw = draw_card(style.bold);

 	draw.bold.name(style_text.name);

 	style.bold.rect(1, 1 ,style.bold.width - 1, style.bold.height - 2, 10);

 	draw.bold.email(style_text.email);

 	// state_map["bold"] = style.bold.set();

 	// state_map["bold"].push(Cards.bold.name(style_text.name, style.bold));

 	// state_map["bold"].push(Cards.bold.email(style_text.email, style.bold));

 	// 

 	// state_map["bold"].attr({"fill" : "red"}); 

 	// state_map["bold"].scale(0.03, 0.03, 0 , 0);

 

     });

 

     

 

 

     var init = (function () {

 	display = Raphael("card-display", 340 ,215);

 	color = Raphael("color-select", 300, 100);

 	

 	style.bold = Raphael("bold", 170, 107);

 

 	style.classic = Raphael("classic", 170 , 107);

 	

 	helvetica = display.getFont('HelveticaNeue', 700);

 	helvetica_I = display.getFont('HelveticaNeue', 800);

 	color_select_init();

 	display_init();

 	card_init();	

 	text_entry_init();

 	key_handling();

 	style_init();

 	update();

     });

 

 	

     //Update Functions	    

     

     var toggle_on = (function (button){

 	button.ref.animate(button.onState, 2000);

     });

     

     var toggle_off = (function (button){

 	button.ref.animate(button.offState, 2000);

     });

     

     var color_select_update = (function (){

 	var color = order.color;

 	return (function (){

 	    if (order.color === color){}

 	    else {

 		toggle_off(state_map[color]);

 		toggle_on(state_map[(order.color)]);

 		color = order.color;}

 	});})(); 

     

     var display_color_update = (function (){

     	var color = state_map.display.state.fill 

 

     	return (function (){

     	    if (order.color === color){}

     	    else {

     		state_map["display"].ref.animate(

 		    {"fill" : state_map[order.color].onState.fill}, 2000);

     		color = order.color;}})})();

     

     var display_style_update = (function (){

 	var style = null;

 	return (function (){

 	    if (style !== order.style){

 		""; }});

 	});

 

     var key_handling = (function (){

 	var assoc = (function (target, field) {

 	    $(target).keyup(function() {

 		field.text = $(target).val();

 		update();})});

 	assoc('#user-name', card.name);

 	assoc('#user-phone', card.phone);

 	assoc('#user-email', card.email);

 	assoc('#user-company', card.company);

 	assoc('#user-occupation', card.occupation);

 	assoc('#user-website', card.website);

     });

 

     var display_style_update = (function (){

 	var style = null;

 	

 	return (function () {

 	    var draw = draw_card(display);

 	    if (style !== order.style){

 		for ( var property in card ){

 		    if (!draw[order.style][(deref(property))]){

 			$("#user" + "-" + property).toggle(400);}}

 		style = order.style;}	

 	});})();

 

     var display_text_update = (function (){

 	var state = {name : "nothing",

 		     phone: "nothing",

 		     email: "nothing",

 		     occupation: "nothing",

 		     company : "nothing",

 		     website : "nothing" };

 

 	var check_text = (function (var_name) {

             var draw = draw_card(display);

 	    if (state[deref(var_name)] !== (card[deref(var_name)]).text){

 		if (draw[order.style][deref(var_name)]) {

 		    card[deref(var_name)].ref.remove();

 	    	    card[var_name].ref = 

 	     		draw[order.style][deref(var_name)](

 			    card[deref(var_name)].text,display);

 	     	    state[deref(var_name)] = card[deref(var_name)].text;

 		}}});

 	

 	return (function (){

 	    check_text("name");

 	    check_text("phone");

 	    check_text("email");

 	    check_text("occupation");

 	    check_text("company");

 	    check_text("website");

 	    

 	    $("#debug").html(JSON.stringify(state));

 	});

     

     })();

       

     var update = (function (){

 	color_select_update();

 	display_color_update();

 	display_text_update();

 	display_style_update();

     });

     

     // return closure over state

     return {init : init,

 	    update : update};})(); 

 

 

 

 $(document).ready(function() {

     Buy.init();

     Buy.update();

     });