Add client functions to load picture from server.

On 'picture_changed', load picture and show in the
middle of the main view.

client/css/scenic.css

@@ -37,7 +37,11 @@ body {
 #ChatButton.off .off-text { display: none; }
 
 #content {
-    margin-top:80px;
+    margin-top:41px;
+}
+
+.container {
+    padding-top:40px;
 }
 
 .center-aligned {
@@ -244,6 +248,10 @@ body {
     #Chat {
         top: 51px;
     }
+
+    #content {
+        margin-top:-20px;
+    }
 }
 
 @media(max-width: 767px) {
@@ -324,3 +332,12 @@ body {
         background-position: -50px 0;
     }
 }
+
+.picture-wrapper {
+    text-align: center;
+}
+
+.picture-wrapper .picture {
+    max-width: 100%;
+    max-height: 100%;
+}

client/js/socket.js

@@ -73,6 +73,14 @@ function Socket(channel) {
         window.chat_view.updateUserlist(data.userlist);
     });
 
+    this.io.on('picture_changed', function(data) {
+        var pid = data.pid,
+            width = data.width,
+            height = data.height;
+
+        window.app_view.main_view.loadPicture(pid, width, height);
+    });
+
     this.io.on('error', function(data) {
         // log the error
         console.log('Scenic socket exception: '+data.type);

client/js/views/app-view.js

@@ -6,6 +6,9 @@ var AppView = Backbone.View.extend({
         // nothing to do!
     },
     render: function(router) {
+        // remove picture resize handler
+        $(window).unbind('resize.picture');
+
         if(router && router.channel) {
             this.channel = router.channel;
         }

client/js/views/channel-view.js

@@ -9,5 +9,28 @@ var ChannelView = Backbone.View.extend({
         var channel_content = ich.channel_template({channel: channel});
 
         $('#content').html(channel_content);
+    },
+    loadPicture: function(pid, width, height) {
+        var picture = ich.picture_template({pid: pid});
+
+        $('#content').html(picture);
+
+        // function to adjust picture height
+        var adjustHeight = function() {
+            var max_height = $(window).height() - $(picture).offset().top;
+            $(picture).height(max_height);
+
+            // set vertical align center
+            if(max_height > height) {
+                $(picture).css({paddingTop: parseInt((max_height - height)/2)});
+            }
+        };
+        adjustHeight();
+
+        // set window.resize handler
+        $(window).unbind('resize.picture');
+        $(window).bind('resize.picture', function() {
+            adjustHeight();
+        });
     }
 });

views/templates.jade

@@ -128,3 +128,7 @@ script#upload_pic_template(type='text/html')
         .modal-footer
             button.btn(data-dismiss='modal', area-hidden='true') Close
             button.btn.btn-primary.upload-pic Upload
+
+script#picture_template(type='text/html')
+    .picture-wrapper
+        img.picture(src='/picture/{{ pid }}', alt='{{ pid }}')