loggly · niftylettuce · Sep 4, 2012 · Sep 4, 2012 · Sep 4, 2012
diff --git a/README.md b/README.md
@@ -2,27 +2,37 @@
 
 JavaScript library to do cross site log POSTing to Loggly.  You can use this to log directly out of your JavaScript to Loggly, or just record the fact someone hit a page on your site.
 
+## Live Demo
+
+<http://loggly.github.com/loggly-castor>
+
 ## Installation
+
 Include the loggly.js file in a web page.  You can use our CloudFront version if you like:
 
-<pre>http://cloudfront.loggly.com/js/loggly-0.1.0.js</pre>
+<pre>http://cloudfront.loggly.com/js/loggly-0.2.1.js</pre>
 
 Create a new HTTP input in your Loggly account, make a note of the URL, and then edit and use the following code in that same web page:
 
-<pre>
-  <script type="text/javascript"> 
-    window.onload=function(){
-      castor = new loggly({ url: 'http://logs.loggly.com/inputs/a2e232e9-4827-49aa-9d28-e18e5ba5a818?rt=1', level: 'info'});
-      castor.info("url=" + window.location.href + " browser=" + castor.user_agent + " width=" + castor.browser_size.width);
-    }
-  </script> 
-</pre>
+### Simple Example
+
+```js
+window.onload = function() {
+  castor = new loggly({ url: 'http://logs.loggly.com/inputs/a2e232e9-4827-49aa-9d28-e18e5ba5a818?rt=1', level: 'info'})
+  castor.info("url=" + window.location.href + " browser=" + castor.user_agent + " width=" + castor.browser_size.width)
+}
+```
 
-This should result in the page posting an event to Loggly that looks something like this: 
+This should result in the page posting an event to Loggly that looks something like this:
 
-<pre>
+```js
 source=castor url=http://www.geekceo.com/ browser=MozillaNetscape5.0 (Macintosh; Intel Mac OS X 10_6_7) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.57 Safari/534.24 width=1009
-</pre>
+```
+
+### Extended Example
+
+See the live demo link above.
 
 ## Log Levels
+
 Set the log level using the *level: 'info'* parameter.  Call the library using the error, warn, info, debug and log methods.  Events called with these methods that match or exceed the current logging level will be forwarded on to Loggly.
diff --git a/index.html b/index.html
@@ -1,33 +1,93 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
-  <title>Loggly Javascript Logging Example</title> 
+  <title>loggly-castor - Client-side JavaScript Logging Example</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-  <link rel="shortcut icon" href="/images/favicon.ico">
-  <link rel="stylesheet" href="/css/reset.css" type="text/css" />
-  <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" />
-  <script type="text/JavaScript">
-    var scr = document.createElement("script"); 
-    var host = (("https:" == document.location.protocol) ? "https://d3eyf2cx8mbems.cloudfront.net" : "http://d3eyf2cx8mbems.cloudfront.net");
-    scr.type = "text/javascript";
-    scr.src = host + "/js/loggly-0.2.1.js";
-    document.documentElement.firstChild.appendChild(scr);
-  </script>
-
-  <script type="text/javascript">
-    window.onload=function(){ 
-      var key = "a00039e9-4827-49aa-9d28-e18e5ba5a818";
-      var host = (("https:" == document.location.protocol) ? "https://logs.loggly.com" : "http://logs.loggly.com");
-      castor = new loggly.castor({ url: host+'/inputs/'+key, level: 'log'});
-      castor.log({url:window.location.href});
-    }
-  </script>
-
+  <link rel="shortcut icon" href="images/favicon.ico">
+  <link rel="stylesheet" href="css/reset.css" type="text/css" />
+  <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
+  <script src="https://raw.github.com/gist/3620903/1dd5b6093046043f9c22d0eac47a616870331f34/getscript.min.js"></script>
 </head>
 <body>
+
   <div>
-    <p>sending test event</p>
-    <p>© 2012 <a href="http://loggly.com/">Loggly, Inc.</a></p>
+    <h1>loggly-castor example (<a href="#" id="view-source">view source</a>)</h1>
+    <p>&copy; 2012 <a href="http://loggly.com/">Loggly, Inc.</a></p>
   </div>
+
+  <script>
+
+    // # loggly-castor example by @niftylettuce
+
+    // castor namespace
+    var _castor = {}
+
+    // loggly-castor's protocol relative paths
+    _castor.paths = {
+        http  : "http://cloudfront.loggly.com/js/loggly-0.2.1.js"
+      , https : "https://d3eyf2cx8mbems.cloudfront.net/js/loggly-0.2.1.js"
+    }
+    _castor.p = document.location.protocol
+    _castor.p = _castor.p.substring(0, _castor.p.length - 1)
+    _castor.src = _castor.paths[_castor.p]
+
+    // loggly namespace
+    _loggly = {}
+    _loggly.paths = {
+        http  : "http://logs.loggly.com"
+      , https : "https://logs.loggly.com"
+    }
+    _loggly.src = _loggly.paths[_castor.p]
+    _loggly.key = "a00039e9-4827-49aa-9d28-e18e5ba5a818"
+    _loggly.config = {
+        url   : _loggly.src + '/inputs/' + _loggly.key
+      , level : 'log'
+    }
+
+    // global castor namespace
+    var castor
+
+    _castor.onload = function() {
+      castor.log({
+          source : 'castor'
+        , url    : window.location.href
+      })
+    }
+
+    _castor.onerror = function(err, file, line) {
+      castor.log({
+          source : 'castor'
+        , url    : window.location.href
+        , err    : err
+        , file   : file
+        , line   : line
+      })
+    }
+
+    _castor.cb = function() {
+      castor = new loggly.castor(_loggly.config)
+      // jQuery users would use:
+      // `$(_castor.onload)`
+      // (or)
+      // `$(function() { _castor.onload() })`
+      window.onload  = _castor.onload
+      window.onerror = _castor.onerror
+    }
+
+    getScript(_castor.src, _castor.cb)
+  </script>
+
+  <script>
+    // example stuff (ignore this)
+    (function(d, w) {
+      var $s  = d.getElementById('view-source')
+        , url = 'view-source:' + w.location.href
+      $s.onclick = viewSource
+      function viewSource() {
+        w.location = url
+      }
+    }(document, window))
+  </script>
+
 </body>
 </html>