rlm@103: //WHY do I have to write this myself!?
rlm@103: Object.prototype.keys = function ()
rlm@103: {
rlm@103:     var keys = [];
rlm@103:     for(i in this) if (this.hasOwnProperty(i))
rlm@103:     {
rlm@103: 	keys.push(i);
rlm@103:     }
rlm@103:     return keys;
rlm@103: }
rlm@103: 
rlm@103: 
rlm@103: 
rlm@103: 
rlm@92: 
rlm@85: Buy = (function (){ 
rlm@94: 
rlm@94:     //Cards drawing functions:
rlm@94: 
rlm@104:     var magic_font_ratio = 318; //the font size in pt for identity under .scale(1,1) 
rlm@99:     var mfg = magic_font_ratio;
rlm@99:     
rlm@97: 
rlm@99: 
rlm@99:     var draw_card = (function (paper){
rlm@99: 	
rlm@103:     	var helvetica  = paper.getFont('HelveticaNeue', 700);
rlm@103:     	var helveticaI = paper.getFont('HelveticaNeue', 800);
rlm@103:     	var h = paper.height;
rlm@103:     	var w = paper.width;
rlm@103:     	var default_color = "#AAAAAA";
rlm@99: 
rlm@103:     // 	var clamp = (function (target args){
rlm@103:     // 	    x = args.x || null;
rlm@103:     // 	    y = args.y || null;
rlm@103: 	    
rlm@103:     // 	    if (x) {
rlm@103:     // 		if (target.getBBox().width > display.width * x){
rlm@103:     // 		    target.scale(
rlm@103:     // 		}
rlm@103:     // 	    }
rlm@103: 
rlm@103:     // 	    if (y)
rlm@103: 	    
rlm@103:     // 	});
rlm@103: 
rlm@103: 	var standard = (function (args){
rlm@103: 	    var pt = args.pt || 20;
rlm@103: 	    var x = args.x || 0;
rlm@103: 	    var y = args.y || 0;
rlm@103: 	    var x_max = args.x_max || null;
rlm@103: 	    var y_max = args.y_max || null;
rlm@103: 	    var font = args.font || helvetica;
rlm@103: 	    var text = args.text || "";
rlm@102: 	    var scale_x = 0.00030*h*pt/20;  
rlm@102: 	    var scale_y = 0.00025*w*pt/20;
rlm@103: 
rlm@103: 	    
rlm@103: 
rlm@103: 	    target = paper.print(h*x, w*y,text, font).scale(
rlm@103: 		scale_x,scale_y,h*x,w*y).attr({"fill": default_color});
rlm@103: 	
rlm@103: 	    if (x_max){
rlm@103: 		var width = target.getBBox().width;
rlm@103: 		var max_width = paper.width*x_max;
rlm@103: 		if (width > max_width){
rlm@103: 		    var x_mod = max_width/width;
rlm@103: 		    target.scale(scale_x*x_mod,scale_y,0,0);
rlm@103: 		}
rlm@103: 	    }
rlm@103: 	    return target;
rlm@103: 	});
rlm@103: 	
rlm@103: 	
rlm@103: 	
rlm@103: 
rlm@102: 
rlm@102: 	var bold = {
rlm@102: 	    "name" :(function (text){
rlm@103: 		return standard({x_max : 0.5, "text": text, x: 0.2, y: 0.1, pt: 20});}),
rlm@102: 	    "email" : (function (text){
rlm@103: 		return standard({"text": text, x: 0.2, y: 0.4,pt: 20,font: helveticaI});})};
rlm@102: 	
rlm@103: 
rlm@99: 	return {
rlm@102: 	    "bold" : bold
rlm@97: 	};
rlm@99: 	
rlm@99:     });
rlm@99: 
rlm@99: 
rlm@99: 
rlm@95: 
rlm@95: 
rlm@94: 
rlm@94:     
rlm@94: 
rlm@94: 
rlm@92:     // Utility Functinos
rlm@90: 
rlm@94: 
rlm@94: 
rlm@94: 
rlm@94: 
rlm@92:     var switchText = (function (){
rlm@92: 	if ($(this).val() == $(this).attr('title'))
rlm@92: 	    $(this).val('').removeClass('exampleText');
rlm@92: 	else if ($.trim($(this).val()) == '')
rlm@92: 	    $(this).addClass('exampleText').val($(this).attr('title'));});
rlm@90: 
rlm@96:     //what an asinine function... referential transparency blah blah...
rlm@96:     var deref = (function (var_name){return var_name;});
rlm@92: 
rlm@92: 
rlm@92: 
rlm@92: 
rlm@92:     // Initilization Functions.
rlm@96:     var card;
rlm@96: 	
rlm@95:     var card_init = (function () {
rlm@96: 	
rlm@96: 	card = {
rlm@96: 	    name       : {text: "Robert McIntyre", ref: display.set()},
rlm@96: 	    company    : {text: "", ref: display.set()},
rlm@96: 	    occupation : {text: "", ref: display.set()},
rlm@96: 	    phone      : {text: "", ref: display.set()},
rlm@96: 	    email      : {text: "rlm@mit.edu", ref: display.set()},
rlm@96: 	    website    : {text: "", ref: display.set()},
rlm@96: 	    decoration : {text: "", ref: display.set()}};
rlm@95:     });
rlm@95: 
rlm@95: 
rlm@85:     var order = 
rlm@96: 	{color : "blue",
rlm@92: 	 style : "bold",
rlm@92: 	 quantity : 30,
rlm@92: 	 content : undefined,
rlm@92: 	 info : undefined,
rlm@92: 	 name : "Robert McIntyre",
rlm@92: 	 occupation : "AI Researcher",
rlm@92: 	 phone : "617.821.9129",
rlm@92: 	 email : "rlm@mit.edu",
rlm@92: 	 website : "www.rlmcintyre.com",
rlm@92: 	 company : "LaserKard LLC." 
rlm@92: 	};
rlm@85:     
rlm@85:     var display;
rlm@85:     var color;
rlm@98:     var style = {};
rlm@94:     var helvetica;
rlm@94:     var helvetica_I;
rlm@90: 
rlm@91:     var state_map = {
rlm@99:     	bold  : null,
rlm@99: 	classic : null,
rlm@98: 	
rlm@98: 	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@92: 	    color.rect(160, 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@92: 	    color.rect(1, 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@92: 	    color.rect(80, 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@103:     	    display.rect(1, 1 , display.width - 1, display.height - 2, 15).attr(
rlm@99: 		state_map["display"].state);
rlm@90:     });
rlm@92:     
rlm@92:     var text_entry_init = (function (){
rlm@92: 	$('input[type=text][title!=""]').each(function() {
rlm@92: 	    if ($.trim($(this).val()) == ''){
rlm@92: 		$(this).val($(this).attr('title'));}
rlm@92: 	    if ($(this).val() == $(this).attr('title')){
rlm@92: 		$(this).addClass('exampleText');}
rlm@92: 	}).focus(switchText).blur(switchText);
rlm@92: 	
rlm@92: 	$('form').submit(function() {
rlm@92: 	    $(this).find('input[type=text][title!=""]').each(function() {
rlm@92: 		if ($(this).val() == $(this).attr('title')){
rlm@92: 		    $(this).val('');}})})});
rlm@92: 
rlm@99:     var style_text = {
rlm@99: 	phone : "617.821.9129",
rlm@99: 	email : "rlm@mit.edu",
rlm@99: 	website : "www.rlmcintyre.com",
rlm@99: 	name : "Robert McIntyre",
rlm@99: 	company : "LaserKard LLC.",
rlm@99: 	occupation : "AI Researcher"}
rlm@92: 
rlm@98: 
rlm@98:     var style_init = (function (){
rlm@99: 	var draw = draw_card(style.bold);
rlm@99: 	draw.bold.name(style_text.name);
rlm@99: 	style.bold.rect(1, 1 ,style.bold.width - 1, style.bold.height - 2, 10);
rlm@99: 	draw.bold.email(style_text.email);
rlm@99: 	// state_map["bold"] = style.bold.set();
rlm@99: 	// state_map["bold"].push(Cards.bold.name(style_text.name, style.bold));
rlm@99: 	// state_map["bold"].push(Cards.bold.email(style_text.email, style.bold));
rlm@99: 	// 
rlm@99: 	// state_map["bold"].attr({"fill" : "red"}); 
rlm@99: 	// state_map["bold"].scale(0.03, 0.03, 0 , 0);
rlm@98: 
rlm@98:     });
rlm@98: 
rlm@92:     
rlm@92: 
rlm@90: 
rlm@90:     var init = (function () {
rlm@103: 	display = Raphael("card-display", 360 ,230);
rlm@90: 	color = Raphael("color-select", 300, 100);
rlm@99: 	
rlm@103: 	style.bold = Raphael("bold", display.width/2, display.height/2);
rlm@99: 
rlm@103: 	style.classic = Raphael("classic", display.width/2 , display.width/2);
rlm@99: 	
rlm@94: 	helvetica = display.getFont('HelveticaNeue', 700);
rlm@94: 	helvetica_I = display.getFont('HelveticaNeue', 800);
rlm@90: 	color_select_init();
rlm@90: 	display_init();
rlm@92: 	card_init();	
rlm@92: 	text_entry_init();
rlm@92: 	key_handling();
rlm@98: 	style_init();
rlm@94: 	update();
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@92:     var display_color_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@92:     
rlm@92:     var display_style_update = (function (){
rlm@92: 	var style = null;
rlm@92: 	return (function (){
rlm@92: 	    if (style !== order.style){
rlm@92: 		""; }});
rlm@92: 	});
rlm@92: 
rlm@92:     var key_handling = (function (){
rlm@92: 	var assoc = (function (target, field) {
rlm@92: 	    $(target).keyup(function() {
rlm@92: 		field.text = $(target).val();
rlm@92: 		update();})});
rlm@92: 	assoc('#user-name', card.name);
rlm@92: 	assoc('#user-phone', card.phone);
rlm@92: 	assoc('#user-email', card.email);
rlm@92: 	assoc('#user-company', card.company);
rlm@92: 	assoc('#user-occupation', card.occupation);
rlm@92: 	assoc('#user-website', card.website);
rlm@94:     });
rlm@92: 
rlm@96:     var display_style_update = (function (){
rlm@96: 	var style = null;
rlm@99: 	
rlm@96: 	return (function () {
rlm@99: 	    var draw = draw_card(display);
rlm@96: 	    if (style !== order.style){
rlm@97: 		for ( var property in card ){
rlm@99: 		    if (!draw[order.style][(deref(property))]){
rlm@97: 			$("#user" + "-" + property).toggle(400);}}
rlm@97: 		style = order.style;}	
rlm@96: 	});})();
rlm@92: 
rlm@92:     var display_text_update = (function (){
rlm@95: 	var state = {name : "nothing",
rlm@95: 		     phone: "nothing",
rlm@96: 		     email: "nothing",
rlm@96: 		     occupation: "nothing",
rlm@96: 		     company : "nothing",
rlm@96: 		     website : "nothing" };
rlm@92: 
rlm@99: 	var check_text = (function (var_name) {
rlm@99:             var draw = draw_card(display);
rlm@95: 	    if (state[deref(var_name)] !== (card[deref(var_name)]).text){
rlm@99: 		if (draw[order.style][deref(var_name)]) {
rlm@95: 		    card[deref(var_name)].ref.remove();
rlm@95: 	    	    card[var_name].ref = 
rlm@99: 	     		draw[order.style][deref(var_name)](
rlm@95: 			    card[deref(var_name)].text,display);
rlm@95: 	     	    state[deref(var_name)] = card[deref(var_name)].text;
rlm@95: 		}}});
rlm@95: 	
rlm@95: 	return (function (){
rlm@95: 	    check_text("name");
rlm@95: 	    check_text("phone");
rlm@95: 	    check_text("email");
rlm@96: 	    check_text("occupation");
rlm@96: 	    check_text("company");
rlm@96: 	    check_text("website");
rlm@96: 	    
rlm@95: 	    $("#debug").html(JSON.stringify(state));
rlm@95: 	});
rlm@96:     
rlm@92:     })();
rlm@92:       
rlm@86:     var update = (function (){
rlm@90: 	color_select_update();
rlm@92: 	display_color_update();
rlm@92: 	display_text_update();
rlm@96: 	display_style_update();
rlm@90:     });
rlm@86:     
rlm@90:     // return closure over state
rlm@86:     return {init : init,
rlm@90: 	    update : update};})(); 
rlm@85: 
rlm@85: 
rlm@92: 
rlm@85: $(document).ready(function() {
rlm@90:     Buy.init();
rlm@90:     Buy.update();
rlm@85:     });