1.1 --- a/buy3.html	Mon Jul 26 05:45:51 2010 -0400
     1.2 +++ b/buy3.html	Mon Jul 26 13:01:47 2010 -0400
     1.3 @@ -16,5 +16,14 @@
     1.4      <div id="card-display"></div>    
     1.5      <div id="pokedex"></div>
     1.6      <div id="debug"></div>
     1.7 +
     1.8 +    <div id="text-entry">
     1.9 +      <input id="user-name" type="text"  title="Name"/>
    1.10 +      <input id="user-occupation" type="text" title="Occupation"/>
    1.11 +      <input id="user-email" type="text" name="" title="email"/>
    1.12 +      <input id="user-phone" type="text" name="" title="Phone"/>
    1.13 +      <input id="user-website" type="text" name="" title="Website"/>
    1.14 +      <input id="user-company" type="text" name="" title="Company"/>
    1.15 +    </div>
    1.16    </body>
    1.17  </html>

     2.1 --- a/css/buy3.css	Mon Jul 26 05:45:51 2010 -0400
     2.2 +++ b/css/buy3.css	Mon Jul 26 13:01:47 2010 -0400
     2.3 @@ -11,3 +11,22 @@
     2.4      height: 200px;
     2.5  
     2.6  }
     2.7 +
     2.8 +div#text-entry {
     2.9 +    position : absolute;
    2.10 +    top : 15%;
    2.11 +    left : 25%;
    2.12 +    width : 150px;
    2.13 +
    2.14 +}
    2.15 +
    2.16 +.hidden {
    2.17 +    display : none;
    2.18 +}
    2.19 +
    2.20 +input.exampleText {
    2.21 +  color: #aaa;
    2.22 +}
    2.23 +
    2.24 +
    2.25 +

     3.1 --- a/js-lib/buy3.js	Mon Jul 26 05:45:51 2010 -0400
     3.2 +++ b/js-lib/buy3.js	Mon Jul 26 13:01:47 2010 -0400
     3.3 @@ -1,13 +1,49 @@
     3.4 +// Cards = (function (){
     3.5 +
     3.6 +    
     3.7 +//     (function (info paper){
     3.8 +// 	info.name
     3.9 +// 	info.occupation
    3.10 +// 	info.email
    3.11 +// 	info.phone
    3.12 +     
    3.13 +     
    3.14 +
    3.15 +
    3.16 +
    3.17 +
    3.18 +// });
    3.19 +
    3.20 +
    3.21 +
    3.22 +
    3.23  Buy = (function (){ 
    3.24 +    // Utility Functinos
    3.25  
    3.26 +    var switchText = (function (){
    3.27 +	if ($(this).val() == $(this).attr('title'))
    3.28 +	    $(this).val('').removeClass('exampleText');
    3.29 +	else if ($.trim($(this).val()) == '')
    3.30 +	    $(this).addClass('exampleText').val($(this).attr('title'));});
    3.31  
    3.32 -    //Initilization Functions.
    3.33 +
    3.34 +
    3.35 +
    3.36 +
    3.37 +    // Initilization Functions.
    3.38      var order = 
    3.39 -	{color: "red",
    3.40 -	 style: "bold",
    3.41 -	 quantity: 30,
    3.42 -	 content: undefined,
    3.43 -	 info: undefined};
    3.44 +	{color : "green",
    3.45 +	 style : "bold",
    3.46 +	 quantity : 30,
    3.47 +	 content : undefined,
    3.48 +	 info : undefined,
    3.49 +	 name : "Robert McIntyre",
    3.50 +	 occupation : "AI Researcher",
    3.51 +	 phone : "617.821.9129",
    3.52 +	 email : "rlm@mit.edu",
    3.53 +	 website : "www.rlmcintyre.com",
    3.54 +	 company : "LaserKard LLC." 
    3.55 +	};
    3.56      
    3.57      var display;
    3.58      var color;
    3.59 @@ -29,15 +65,15 @@
    3.60  
    3.61      var color_select_init = (function (){
    3.62  	state_map["red"].ref = 
    3.63 -	    color.rect(1, 1, 70, 50, 10).attr(state_map["red"].offState);
    3.64 +	    color.rect(160, 1, 70, 50, 10).attr(state_map["red"].offState);
    3.65  	state_map["red"].ref.node.onclick = 
    3.66  	    (function (){order.color= "red"; update();});
    3.67  	state_map["green"].ref = 
    3.68 -	    color.rect(80, 1, 70, 50, 10).attr(state_map["green"].offState);
    3.69 +	    color.rect(1, 1, 70, 50, 10).attr(state_map["green"].offState);
    3.70  	state_map["green"].ref.node.onclick = 
    3.71  	    (function (){order.color= "green"; update();});
    3.72  	state_map["blue"].ref = 
    3.73 -	    color.rect(160, 1, 70, 50, 10).attr(state_map["blue"].offState);
    3.74 +	    color.rect(80, 1, 70, 50, 10).attr(state_map["blue"].offState);
    3.75  	state_map["blue"].ref.node.onclick = 
    3.76  	    (function (){order.color= "blue"; update();});
    3.77  	
    3.78 @@ -48,6 +84,24 @@
    3.79      	state_map["display"].ref = 
    3.80      	    display.rect(1, 1, 338, 213, 20).attr(state_map["display"].state);
    3.81      });
    3.82 +    
    3.83 +    var text_entry_init = (function (){
    3.84 +	$('input[type=text][title!=""]').each(function() {
    3.85 +	    if ($.trim($(this).val()) == ''){
    3.86 +		$(this).val($(this).attr('title'));}
    3.87 +	    if ($(this).val() == $(this).attr('title')){
    3.88 +		$(this).addClass('exampleText');}
    3.89 +	}).focus(switchText).blur(switchText);
    3.90 +	
    3.91 +	$('form').submit(function() {
    3.92 +	    $(this).find('input[type=text][title!=""]').each(function() {
    3.93 +		if ($(this).val() == $(this).attr('title')){
    3.94 +		    $(this).val('');}})})});
    3.95 +
    3.96 +
    3.97 +    
    3.98 +    
    3.99 +
   3.100  
   3.101      var init = (function () {
   3.102  	display = Raphael("card-display", 340 ,215);
   3.103 @@ -55,6 +109,10 @@
   3.104  	style = Raphael("style-select", 200, 70);
   3.105  	color_select_init();
   3.106  	display_init();
   3.107 +	card_init();	
   3.108 +	text_entry_init();
   3.109 +	key_handling();
   3.110 +
   3.111      });
   3.112  
   3.113  	
   3.114 @@ -78,7 +136,7 @@
   3.115  		color = order.color;}
   3.116  	});})(); 
   3.117      
   3.118 -    var display_update = (function (){
   3.119 +    var display_color_update = (function (){
   3.120      	var color = state_map.display.state.fill 
   3.121  
   3.122      	return (function (){
   3.123 @@ -88,10 +146,89 @@
   3.124  		    {"fill" : state_map[order.color].onState.fill}, 2000);
   3.125      		color = order.color;}})})();
   3.126  
   3.127 +    
   3.128 +
   3.129 +    var display_style_update = (function (){
   3.130 +	var style = null;
   3.131 +	return (function (){
   3.132 +	    if (style !== order.style){
   3.133 +		""; }});
   3.134 +	});
   3.135 +
   3.136 +
   3.137 +    var card = 
   3.138 +	{name       : {text: "Robert McIntyre", ref: ""},
   3.139 +	 company    : {text: "", ref: ""},
   3.140 +	 occupation : {text: "", ref: ""},
   3.141 +	 phone      : {text: "", ref: ""},
   3.142 +	 email      : {text: "", ref: ""},
   3.143 +	 website    : {text: "", ref: ""},
   3.144 +	 decoration : {text: "", ref: ""}};
   3.145 +
   3.146 +    var card_init = (function () {
   3.147 +	card.name.ref = display.rect(10,10,10,10,5);
   3.148 +    });
   3.149 +
   3.150 +    var key_handling = (function (){
   3.151 +	var assoc = (function (target, field) {
   3.152 +	    $(target).keyup(function() {
   3.153 +		field.text = $(target).val();
   3.154 +		update();})});
   3.155 +	assoc('#user-name', card.name);
   3.156 +	assoc('#user-phone', card.phone);
   3.157 +	assoc('#user-email', card.email);
   3.158 +	assoc('#user-company', card.company);
   3.159 +	assoc('#user-occupation', card.occupation);
   3.160 +	assoc('#user-website', card.website);
   3.161 +
   3.162 +
   3.163 +});
   3.164 +
   3.165 +
   3.166 +    
   3.167 +    var display_text_update = (function (){
   3.168 +	var name = null;
   3.169 +
   3.170 +	return (function () {                         
   3.171 +
   3.172 +	    if (name !== card.name.text){
   3.173 +		//alert("whatev");
   3.174 +		card.name.ref.remove();
   3.175 +		card.name.ref = 
   3.176 +		    display.print(10,10,card.name.text,
   3.177 +				  display.getFont('HelveticaNeue',700), 25).attr(
   3.178 +				      {"fill" : "#FFFFFF"});
   3.179 +
   3.180 +		//card.name.ref.animate({"fill" : Raphael.getColor()} ,1000);
   3.181 +		name = card.name.text;
   3.182 +	    }});
   3.183 +	    
   3.184 +
   3.185 +    })();
   3.186 +      
   3.187 +    
   3.188 +
   3.189 +
   3.190 +    // var display_text_update = (function (){
   3.191 +    // 	var style;
   3.192 +    // 	var name;
   3.193 +    // 	var occupation;
   3.194 +    // 	var phone;
   3.195 +    // 	var email;
   3.196 +    // 	var company;
   3.197 +    // 	var website;
   3.198 +		
   3.199 +    // 	return (function (){
   3.200 +    // 	    if (style !== order.style) {}
   3.201 +	    
   3.202 +
   3.203 +    // })();
   3.204 +
   3.205      var update = (function (){
   3.206  	color_select_update();
   3.207 -	display_update();
   3.208 -	$("#debug").html(JSON.stringify(order));
   3.209 +	display_color_update();
   3.210 +	display_text_update();
   3.211 +	$("#debug").html(JSON.stringify({name : card.name.text, email : card.email.text}));
   3.212      });
   3.213      
   3.214      
   3.215 @@ -101,6 +238,13 @@
   3.216  	    update : update};})(); 
   3.217  
   3.218  
   3.219 +
   3.220 +
   3.221 +
   3.222 +
   3.223 +
   3.224 +
   3.225 +
   3.226  $(document).ready(function() {
   3.227      Buy.init();
   3.228      Buy.update();