# HG changeset patch
# User Robert McIntyre <rlm@mit.edu>
# Date 1280163707 14400
# Node ID 614dca52e3231e43af7001f730b35380c545693f
# Parent  0dd39631299c73eb9461c49866e110dce74b34a6
basic drawing achieved

diff -r 0dd39631299c -r 614dca52e323 buy3.html
--- a/buy3.html	Mon Jul 26 05:45:51 2010 -0400
+++ b/buy3.html	Mon Jul 26 13:01:47 2010 -0400
@@ -16,5 +16,14 @@
     <div id="card-display"></div>    
     <div id="pokedex"></div>
     <div id="debug"></div>
+
+    <div id="text-entry">
+      <input id="user-name" type="text"  title="Name"/>
+      <input id="user-occupation" type="text" title="Occupation"/>
+      <input id="user-email" type="text" name="" title="email"/>
+      <input id="user-phone" type="text" name="" title="Phone"/>
+      <input id="user-website" type="text" name="" title="Website"/>
+      <input id="user-company" type="text" name="" title="Company"/>
+    </div>
   </body>
 </html>
diff -r 0dd39631299c -r 614dca52e323 css/buy3.css
--- a/css/buy3.css	Mon Jul 26 05:45:51 2010 -0400
+++ b/css/buy3.css	Mon Jul 26 13:01:47 2010 -0400
@@ -11,3 +11,22 @@
     height: 200px;
 
 }
+
+div#text-entry {
+    position : absolute;
+    top : 15%;
+    left : 25%;
+    width : 150px;
+
+}
+
+.hidden {
+    display : none;
+}
+
+input.exampleText {
+  color: #aaa;
+}
+
+
+
diff -r 0dd39631299c -r 614dca52e323 js-lib/buy3.js
--- a/js-lib/buy3.js	Mon Jul 26 05:45:51 2010 -0400
+++ b/js-lib/buy3.js	Mon Jul 26 13:01:47 2010 -0400
@@ -1,13 +1,49 @@
+// Cards = (function (){
+
+    
+//     (function (info paper){
+// 	info.name
+// 	info.occupation
+// 	info.email
+// 	info.phone
+     
+     
+
+
+
+
+// });
+
+
+
+
 Buy = (function (){ 
+    // 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'));});
 
-    //Initilization Functions.
+
+
+
+
+    // Initilization Functions.
     var order = 
-	{color: "red",
-	 style: "bold",
-	 quantity: 30,
-	 content: undefined,
-	 info: undefined};
+	{color : "green",
+	 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;
@@ -29,15 +65,15 @@
 
     var color_select_init = (function (){
 	state_map["red"].ref = 
-	    color.rect(1, 1, 70, 50, 10).attr(state_map["red"].offState);
+	    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(80, 1, 70, 50, 10).attr(state_map["green"].offState);
+	    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(160, 1, 70, 50, 10).attr(state_map["blue"].offState);
+	    color.rect(80, 1, 70, 50, 10).attr(state_map["blue"].offState);
 	state_map["blue"].ref.node.onclick = 
 	    (function (){order.color= "blue"; update();});
 	
@@ -48,6 +84,24 @@
     	state_map["display"].ref = 
     	    display.rect(1, 1, 338, 213, 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 init = (function () {
 	display = Raphael("card-display", 340 ,215);
@@ -55,6 +109,10 @@
 	style = Raphael("style-select", 200, 70);
 	color_select_init();
 	display_init();
+	card_init();	
+	text_entry_init();
+	key_handling();
+
     });
 
 	
@@ -78,7 +136,7 @@
 		color = order.color;}
 	});})(); 
     
-    var display_update = (function (){
+    var display_color_update = (function (){
     	var color = state_map.display.state.fill 
 
     	return (function (){
@@ -88,10 +146,89 @@
 		    {"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 card = 
+	{name       : {text: "Robert McIntyre", ref: ""},
+	 company    : {text: "", ref: ""},
+	 occupation : {text: "", ref: ""},
+	 phone      : {text: "", ref: ""},
+	 email      : {text: "", ref: ""},
+	 website    : {text: "", ref: ""},
+	 decoration : {text: "", ref: ""}};
+
+    var card_init = (function () {
+	card.name.ref = display.rect(10,10,10,10,5);
+    });
+
+    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_text_update = (function (){
+	var name = null;
+
+	return (function () {                         
+
+	    if (name !== card.name.text){
+		//alert("whatev");
+		card.name.ref.remove();
+		card.name.ref = 
+		    display.print(10,10,card.name.text,
+				  display.getFont('HelveticaNeue',700), 25).attr(
+				      {"fill" : "#FFFFFF"});
+
+		//card.name.ref.animate({"fill" : Raphael.getColor()} ,1000);
+		name = card.name.text;
+	    }});
+	    
+
+    })();
+      
+    
+
+
+    // var display_text_update = (function (){
+    // 	var style;
+    // 	var name;
+    // 	var occupation;
+    // 	var phone;
+    // 	var email;
+    // 	var company;
+    // 	var website;
+		
+    // 	return (function (){
+    // 	    if (style !== order.style) {}
+	    
+
+    // })();
+
     var update = (function (){
 	color_select_update();
-	display_update();
-	$("#debug").html(JSON.stringify(order));
+	display_color_update();
+	display_text_update();
+	$("#debug").html(JSON.stringify({name : card.name.text, email : card.email.text}));
     });
     
     
@@ -101,6 +238,13 @@
 	    update : update};})(); 
 
 
+
+
+
+
+
+
+
 $(document).ready(function() {
     Buy.init();
     Buy.update();