cgcardona/gist:525766

## gistfile1.txt
<!doctype html>
<html>
<head>
    <title>
        <%= title %>
    </title>
    <link  href="//fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200,300,400,700" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="/stylesheets/generic.css" type="text/css" />
    <link rel="stylesheet" href="/stylesheets/visualize.css" type="text/css" />
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="/javascripts/visualize.jQuery.js" ></script>
     <script>
       $(document).ready(function(){
           $('table').visualize()
    //     $("*").click(function() {
    //       $.ajax({
    //         type: "POST",
    //         url: "/stats",
    //         data: {
    //           clacked: $(this).attr("class")
    //         },
    //         success: function() {
    //           // highlight animate or something cool
    //         }
    //       })
    //     })
       })
     </script>

</head>
<body>

        <a href="http://github.com/cgcardona/StatSocket">
            <img src="/images/forkthis.png" id="ribbon" alt="Fork this code on Github">
        </a>
        <div id="header">
          <h1>
            StatSocket
          </h1>
          <h2>
            Real Time Web Analytics Using HTML5 WebSockets &amp; node.js
          </h2>
        </div>
    <div id="container">
        <div class="buttons1">
            <a href="#" id="send" class="orange-button">Send Something</a>
            <a href="#" class="orange-button" id="spam">Spam Test</a>
            <a href="#" id="close" class="blue-button">Close Connection</a>
            <a href="#" id="open" class="orange-button">Open Connection</a>
        </div><!--end of buttons1 div-->
    </div>
        <div id="info">
            <p>
            <a href="http://dev.w3.org/html5/websockets/">WebSockets</a> enable Web Pages to have two-way communication with a remote host. StatSocket is an HTML5 tool that allows you to see real time stats on your site.
            </p>

            <div id="log"></div>
        </div><!--end of info div-->
         <script type="text/javascript">
      var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

      function pad(n) {
        return n < 10 ? '0' + n.toString(10) : n.toString(10);
      }

      function timestamp() {
        var d = new Date();
        return [
          d.getDate(),
          months[d.getMonth()],
          [ pad(d.getHours())
          , pad(d.getMinutes())
          , pad(d.getSeconds())
          , (d.getTime() + "").substr( - 4, 4)
          ].join(':')
        ].join(' ');
      };


      function scrollToBottom() {
          window.scrollBy(0, document.body.scrollHeight - document.body.scrollTop);
      };

      function log(data){
        output_log.innerHTML += timestamp()+": "+data+"<br />";
        scrollToBottom();
      }


      var conn;
      var output_log = document.getElementById("log");
      var connect = function() {
        if (window["WebSocket"]) {
          conn = new WebSocket("ws://localhost:8000/test");
          conn.onmessage = function(evt) {
            log(evt.data);
          };

          conn.onclose = function() {
            log("Websocket Closed");
          };

          conn.onopen = function() {
            log("Websocket Opened");
          };
        }
      };
              document.getElementById("send").addEventListener("click", function(e) {
        if (conn) {
          setTimeout(function() {
            conn.send("test message");
          }, 0);
        }
        e.preventDefault();
        return false;
      }, false);


      document.getElementById("spam").addEventListener("click", function() {
        if (conn) {
          for (var i = 0; i < 100000; ++i) {
            (function(n) {
              setTimeout(function() {
                conn.send("t" + n);
              }, 0);
            })(i);
          }
        }
        return false;
      }, true);

      document.getElementById("close").addEventListener("click", function(e) {
        if (conn) {
          conn.close();
          conn = false;
        }
        e.preventDefault();
        return false;
      }, false);

      document.getElementById("open").addEventListener("click", function(e) {
        if (!conn) {
          connect();
        }
        e.preventDefault();
        return false;
      }, false);

      window.onload = connect;

        </script>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>
	<%= title %>
	</title>
	<link href="//fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200,300,400,700" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="/stylesheets/generic.css" type="text/css" />
	<link rel="stylesheet" href="/stylesheets/visualize.css" type="text/css" />
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script src="/javascripts/visualize.jQuery.js" ></script>
	<script>
	$(document).ready(function(){
	$('table').visualize()
	// $("*").click(function() {
	// $.ajax({
	// type: "POST",
	// url: "/stats",
	// data: {
	// clacked: $(this).attr("class")
	// },
	// success: function() {
	// // highlight animate or something cool
	// }
	// })
	// })
	})
	</script>

	</head>
	<body>

	<a href="http://github.com/cgcardona/StatSocket">
	<img src="/images/forkthis.png" id="ribbon" alt="Fork this code on Github">
	</a>
	<div id="header">
	<h1>
	StatSocket
	</h1>
	<h2>
	Real Time Web Analytics Using HTML5 WebSockets & node.js
	</h2>
	</div>
	<div id="container">
	<div class="buttons1">
	<a href="#" id="send" class="orange-button">Send Something</a>
	<a href="#" class="orange-button" id="spam">Spam Test</a>
	<a href="#" id="close" class="blue-button">Close Connection</a>
	<a href="#" id="open" class="orange-button">Open Connection</a>
	</div><!--end of buttons1 div-->
	</div>
	<div id="info">
	<p>
	<a href="http://dev.w3.org/html5/websockets/">WebSockets</a> enable Web Pages to have two-way communication with a remote host. StatSocket is an HTML5 tool that allows you to see real time stats on your site.
	</p>

	<div id="log"></div>
	</div><!--end of info div-->
	<script type="text/javascript">
	var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

	function pad(n) {
	return n < 10 ? '0' + n.toString(10) : n.toString(10);
	}

	function timestamp() {
	var d = new Date();
	return [
	d.getDate(),
	months[d.getMonth()],
	[ pad(d.getHours())
	, pad(d.getMinutes())
	, pad(d.getSeconds())
	, (d.getTime() + "").substr( - 4, 4)
	].join(':')
	].join(' ');
	};


	function scrollToBottom() {
	window.scrollBy(0, document.body.scrollHeight - document.body.scrollTop);
	};

	function log(data){
	output_log.innerHTML += timestamp()+": "+data+"<br />";
	scrollToBottom();
	}


	var conn;
	var output_log = document.getElementById("log");
	var connect = function() {
	if (window["WebSocket"]) {
	conn = new WebSocket("ws://localhost:8000/test");
	conn.onmessage = function(evt) {
	log(evt.data);
	};

	conn.onclose = function() {
	log("Websocket Closed");
	};

	conn.onopen = function() {
	log("Websocket Opened");
	};
	}
	};
	document.getElementById("send").addEventListener("click", function(e) {
	if (conn) {
	setTimeout(function() {
	conn.send("test message");
	}, 0);
	}
	e.preventDefault();
	return false;
	}, false);


	document.getElementById("spam").addEventListener("click", function() {
	if (conn) {
	for (var i = 0; i < 100000; ++i) {
	(function(n) {
	setTimeout(function() {
	conn.send("t" + n);
	}, 0);
	})(i);
	}
	}
	return false;
	}, true);

	document.getElementById("close").addEventListener("click", function(e) {
	if (conn) {
	conn.close();
	conn = false;
	}
	e.preventDefault();
	return false;
	}, false);

	document.getElementById("open").addEventListener("click", function(e) {
	if (!conn) {
	connect();
	}
	e.preventDefault();
	return false;
	}, false);

	window.onload = connect;

	</script>
	</body>
	</html>