wooo

articler.coffee

@@ -20,6 +20,15 @@ class Articler
                     docs.push row
                 callback null, docs
 
+    findAllIds: (callback) ->
+        @.db.view 'sparks/allbyid', {descending: true}, (err, res) ->
+            if (err)
+                callback err
+            else
+                ids = []
+                res.forEach (row) ->
+                    ids.push row
+                callback null, ids
 
     findById: (mykey, callback) ->
 	    @.db.view 'sparks/byid', {key: mykey}, (err, res) ->

main.coffee

@@ -77,6 +77,14 @@ app.get '/concept', (req, res) ->
 	fs.readFile 'CONCEPT.md', 'ascii', (err, data) ->
 		throw err if err
 		res.end md data
+
+app.get '/random', (req, res) ->
+	scene.findAllIds (err, ids) ->
+		if err
+			throw err
+			res.redirect '/'
+		else
+			res.redirect '/'+ids[Math.floor(Math.random() * ids.length)].id
 
 app.get '/:id', (req, res) ->
 	scene.findById req.params.id, (err, doc) ->

public/css/jquery.lightbox-0.5.css

@@ -0,0 +1,101 @@
+/**
+ * jQuery lightBox plugin
+ * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
+ * and adapted to me for use like a plugin from jQuery.
+ * @name jquery-lightbox-0.5.css
+ * @author Leandro Vieira Pinho - http://leandrovieira.com
+ * @version 0.5
+ * @date April 11, 2008
+ * @category jQuery plugin
+ * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
+ * @license CCAttribution-ShareAlike 2.5 Brazil - http://creativecommons.org/licenses/by-sa/2.5/br/deed.en_US
+ * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
+ */
+#jquery-overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 90;
+	width: 100%;
+	height: 500px;
+}
+#jquery-lightbox {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	z-index: 100;
+	text-align: center;
+	line-height: 0;
+}
+#jquery-lightbox a img { border: none; }
+#lightbox-container-image-box {
+	position: relative;
+	background-color: #000;
+	width: 250px;
+	height: 250px;
+	margin: 0 auto;
+}
+#lightbox-container-image { padding: 10px; }
+#lightbox-loading {
+	position: absolute;
+	top: 40%;
+	left: 0%;
+	height: 25%;
+	width: 100%;
+	text-align: center;
+	line-height: 0;
+}
+#lightbox-nav {
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: 100%;
+	width: 100%;
+	z-index: 10;
+}
+#lightbox-container-image-box > #lightbox-nav { left: 0; }
+#lightbox-nav a { outline: none;}
+#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
+	width: 49%;
+	height: 100%;
+	zoom: 1;
+	display: block;
+}
+#lightbox-nav-btnPrev { 
+	left: 0; 
+	float: left;
+}
+#lightbox-nav-btnNext { 
+	right: 0; 
+	float: right;
+}
+#lightbox-container-image-data-box {
+	font: 10px Verdana, Helvetica, sans-serif;
+	background-color: #000;
+	margin: 0 auto;
+	line-height: 1.4em;
+	overflow: auto;
+	width: 100%;
+	padding: 0 10px 0;
+}
+#lightbox-container-image-data {
+	padding: 0 10px; 
+	color: #666; 
+}
+#lightbox-container-image-data #lightbox-image-details { 
+	width: 70%; 
+	float: left; 
+	text-align: left; 
+}	
+#lightbox-image-details-caption { font-weight: bold; }
+#lightbox-image-details-currentNumber {
+	display: block; 
+	clear: left; 
+	padding-bottom: 1.0em;	
+}			
+#lightbox-secNav-btnClose {
+	width: 66px; 
+	float: right;
+	padding-bottom: 0.7em;	
+}

public/less/bootstrap.css

@@ -3687,5 +3687,6 @@ h1 {
   color: #0088cc;
 }
 .navbar .nav li a i {
+  font-size: 100%;
   margin-right: 3px;
 }

public/less/utilities.less

@@ -31,5 +31,6 @@ h1 {
 }
 
 .navbar .nav li a i {
+  font-size:100%;
   margin-right: 3px;
 }

views/bootstrap.jade

@@ -1,3 +1,4 @@
 script(src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js')
-script(src='/js/jquery.capSlide.js')
+script(src='/js/jquery.lightbox-0.5.pack.js')
 link(rel='stylesheet', href='/less/bootstrap.css')
+link(rel='stylesheet', href='/css/jquery.lightbox-0.5.css')

views/layout.jade

@@ -43,13 +43,19 @@ html
           | . This service is built with 
           a(href= "http://nodejs.org")= "Node.js"
           |, 
-          a(href= "http://www.http://expressjs.com")="Express"
+          a(href= "http://www.expressjs.com")="Express"
           |, 
           a(href= "http://couchdb.apache.org/")="CouchDB"
           |, 
           a(href= "http://lesscss.org/")="LESS" 
-          |  and 
+          |, 
           a(href= "http://coffeescript.org/")="Coffee-Script"
-          |. It is hosted on 
+          | and 
+          a(href= "http://twitter.github.com/bootstrap/")="Twitter Bootstrap"
+          |.
+          br
+          | It is hosted on 
           a(href="http://www.nodester.com/") Nodester
-          |, which is just plain awesome.
+          |, which is just plain awesome. It's using 
+          a(href="http://www.iriscouch.com/") IrisCouch 
+          | to host the Scenes and Stories. 

views/scenes.jade

@@ -8,6 +8,4 @@ div.row
             div.image
             img(id=article._id,src=article.url, alt=article.body) 
         div
-          a.btn(href="test") View Stories 
-          | 
-          a.btn.btn-primary(href= article._id ) Add Story
+          a.btn.btn-primary(href= article._id ) Show me the Stories »

views/single.jade

@@ -1,46 +1,67 @@
 div.row
-  div.span12
+  div.span4
+    .well
+      h4 Scene found at
+      p
+       a(href="bla") CGTalk
+      h4 Scene created by
+      p Some guy on the web
+  div.span4
+    .well
+      h4 Some other info
+      p Oh are you for real?
+      h4 The shocking fact
+      p The internet is for...
+  div.span4
+    .well
+      h4 Description
+      p And here is the ever so interesting lorem ipsum part. Blergh Blergh BLergh. Also, Cat Pictures.
+div.row
+  div.span6
       .well
+        h1= doc.title
+        div.created.hide #{(new Date(doc.created_at)).toGMTString()}
+        div.image
+          a#scene(href=doc.url)
+            img(src=doc.url) 
+          script
+            $(function(){$('#scene').lightBox({overlayOpacity:0.9});});
         - if (everyauth.userId == doc.createUserId)
           - var editLink = "/"+doc._id+'/edit' 
           div.btn-group
             a.btn.btn-mini.btn-warning(href= editLink) Edit Image 
             | 
             a.btn.btn-mini.btn-danger(href=("/"+doc._id+'/delete')) Delete Image
-        h1= doc.title
-        div.created #{(new Date(doc.created_at)).toGMTString()}
-        div.image
-          img(src=doc.url) 
-
-      - each story in doc.stories
-        div.well
-          - if (everyauth.userId == story.createUserId)
-            - switcheroo = "javascript:$('#"+story._id+"').removeClass('hide').addClass('show');$('#"+story._id+"_text').removeClass('show').addClass('hide');$('#"+story._id+"_alert').removeClass('show').addClass('hide');"
-            form.form-horizontal.hide(id=story._id, method="post", action="/"+id+"/save/"+story._id)
-              .control-group
-                input.input-xlarge(type="text", id="title", name="title", value=story.title)
-              .control-group
-                textarea.input-xlarge(name="story",  id="story", rows="4")= story.story
-              .control-group
-                input.btn.btn-primary(type="submit", value="Save changes to your Scene.") 
-            div.alert.alert-info(id=story._id+'_alert',onclick=switcheroo) Click here to edit this Story.  
-          div(id=story._id+'_text')
-            h4= story.title
-            p= story.story
-
-
-      - if (everyauth.loggedIn)
-        form.form-horizontal(method="post", action="/"+id+"/add")
-          .control-group
-            input.input-xlarge(type="text", id="title", name="title", placeholder="Name your story...")
-          .control-group
-            textarea.input-xlarge(name="story",  id="story", rows="4", placeholder="Enter your story here...")
-          .control-group
-            input.btn.btn-primary(type="submit", value="Add Story to Scene.") 
-            | 
-            input.btn(type="reset", value="Reset")
-      - else 
-        .alert
-          a.close(data-dismiss="alert") x
-          h4.alert-headin Hello there!
-          | Do you want to add a Story? Log in and share the results of your imagination!
+  div.span6
+    - each story in doc.stories
+      div.well
+        - if (everyauth.userId == story.createUserId)
+          - switcheroo = "javascript:$('#"+story._id+"').removeClass('hide').addClass('show');$('#"+story._id+"_text').removeClass('show').addClass('hide');$('#"+story._id+"_alert').removeClass('show').addClass('hide');"
+          form.form-horizontal.hide(id=story._id, method="post", action="/"+id+"/save/"+story._id)
+            .control-group
+              input.input-xlarge(type="text", id="title", name="title", value=story.title)
+            .control-group
+              textarea.input-xlarge(name="story",  id="story", rows="4")= story.story
+            .control-group
+              input.btn.btn-primary(type="submit", value="Save changes to your Scene.") 
+          div.alert.alert-info(id=story._id+'_alert',onclick=switcheroo) Click here to edit this Story.  
+        div(id=story._id+'_text')
+          h4= story.title
+          p= story.story
+
+
+    - if (everyauth.loggedIn)
+      form.form-horizontal(method="post", action="/"+id+"/add")
+        .control-group
+          input.input-xlarge(type="text", id="title", name="title", placeholder="Name your story...")
+        .control-group
+          textarea.input-xlarge(name="story",  id="story", rows="4", placeholder="Enter your story here...")
+        .control-group
+          input.btn.btn-primary(type="submit", value="Add Story to Scene.") 
+          | 
+          input.btn(type="reset", value="Reset")
+    - else 
+      .alert
+        a.close(data-dismiss="alert") x
+        h4.alert-headin Hello there!
+        | Do you want to add a Story? Log in and share the results of your imagination!