more crazy experiences

demo1/application.js

@@ -5,23 +5,69 @@ $(document).ready(function() {
 		{
 			startRecording();
 			$(this).removeClass('stopped');
+			$(this).text('stop recording');			
 		}
 		else
 		{
 			// TODO: move this to a pubsub
 			stopRecording();
 			$(this).addClass('stopped');
+			$(this).text('start recording');
 		}
-
-
 	});
 
-
-	$(document).mousemove(function(e) {
-		console.info(e);
+	$("#play").click(function() {
+		playRecording();
 	});
 });
 
 var eventStorage = [];
 
 
+function storeEvent(e) {
+	eventStorage.push(e);
+}
+
+
+function startRecording() {
+	$(document).bind('mousemove', storeEvent);
+}
+
+function stopRecording() {
+	$(document).unbind('mousemove', storeEvent);
+}
+
+function playRecording() {
+	$.each(eventStorage, function(index, el) {
+
+		//console.info("X,Y: " + el.pageX + "," + el.pageY);
+		window["run_"+el.type](el);
+	});
+}
+
+
+function run_mousemove(e) {
+
+	$("#mouse").css('top', e.pageY).css('left', e.pageX);
+	console.info("tick");
+	sleep(2);
+}
+
+
+
+function sleep(naptime)
+{
+	naptime = naptime * 1000;
+  var sleeping = true;
+  var now = new Date();
+  var alarm;
+	var startingMSeconds = now.getTime();
+	//alert("starting nap at timestamp: " + startingMSeconds + "\nWill sleep for: " + naptime + " ms");
+	while(sleeping){
+		alarm = new Date();
+		alarmMSeconds = alarm.getTime();
+		if(alarmMSeconds - startingMSeconds > naptime){ sleeping = false; }
+	}        
+	//alert("Wakeup!");
+}
+

demo1/proof1.html

@@ -12,10 +12,13 @@ <h1>Proof of Concept 1</h1>
   <div id="main">
     <button id="a">Click me</button>
   </div>
-  <footer style="position:fixed; background-color:#EEE; bottom:0px; padding:10px">
+  <footer style="position:fixed; background-color:#EEE; bottom:0px; padding:10px; display:block; width:100%">
     <button id="record" class="stopped">start recording</button>
     <button id="play">play recording</button>
+    <div style="display:inline; width:400px" id="log">
+    </div>
   </footer>
+  <img src="cursor.png" id="mouse" style="position:absolute" />
   <script src="jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
   <script src="application.js" type="text/javascript" charset="utf-8"></script>
 </body>