Add 'Show Pictures' feature.

Now can see the pictures in the channel and when a picture clicked,
the channel's picture is changed to it.

client/css/scenic.css

@@ -354,3 +354,78 @@ body {
     font-size: 30px;
     color: #444;
 }
+
+#ShowPictures {
+    position: fixed;
+    top: 41px;
+    left: 0px;
+    width: 100%;
+    background: transparent;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF,endColorstr=#7FFFFFFF);
+    zoom: 1;
+    background: rgba(255, 255, 255, 0.5);
+    z-index: 1000;
+    overflow: hidden;
+}
+
+@media(max-width: 979px) {
+    #ShowPictures {
+        top: 51px;
+    }
+}
+
+@media(max-width: 767px) {
+    #ShowPictures {
+    }
+}
+
+#ShowPictures ul.picture-list {
+    margin: 0px auto;
+    padding: 0px;
+    width: 1200px;
+}
+
+@media(max-width: 1249px) {
+    #ShowPictures ul.picture-list {
+        width: 900px;
+    }
+}
+
+@media(max-width: 949px) {
+    #ShowPictures ul.picture-list {
+        width: 600px;
+    }
+}
+
+@media(max-width: 619px) {
+    #ShowPictures ul.picture-list {
+        width: 300px;
+    }
+}
+
+#ShowPictures ul.picture-list li {
+    margin: 0px;
+    padding: 0px;
+    border: none;
+    display: block;
+    float: left;
+    overflow: hidden;
+    width: 300px;
+    height: 300px;
+    opacity: 0.85;
+    filter: alpha(opacity = 85);
+}
+
+#ShowPictures ul.picture-list li:hover {
+    cursor: pointer;
+    opacity: 1;
+    filter: alpha(opacity = 100);
+}
+
+#ShowPictures ul.picture-list li img {
+    margin: 0px;
+    padding: 0px;
+    border: none;
+    max-width: none;
+    max-height: none;
+}

client/js/socket.js

@@ -45,6 +45,14 @@ function Socket(channel) {
             (new UploadPicDialogView(_this.channel));
         });
         window.app_view.navbar_view.setShowPicHandler(function(e) {
+            if($('#ShowPictures').length) {
+                $('#ShowPictures').data('view').remove();
+            }
+            else {
+                (new ShowPicturesView(_this.channel, function(pid) {
+                    _this.io.emit('change_picture', {channel: _this.channel, pid: pid});
+                }));
+            }
         });
 
         window.chat_view.focusInput();

client/js/views/app-view.js

@@ -14,6 +14,11 @@ var AppView = Backbone.View.extend({
             window._bootstrap_dialog.remove();
         }
 
+        // delete show-picture view if exists
+        if($('#ShowPictures').length) {
+            $('#ShowPictures').data('view').remove();
+        }
+
         if(router && router.channel) {
             this.channel = router.channel;
         }

client/js/views/showpic-view.js

@@ -0,0 +1,54 @@
+var ShowPicturesView = Backbone.View.extend({
+    channel: null,
+    handler: null,
+    object: null,
+    initialize: function(channel, handler) {
+        this.channel = channel;
+        this.handler = handler;
+
+        this.render();
+    },
+    render: function() {
+        var _this = this;
+        this.object = $(ich.show_pictures_template()).appendTo('body');
+        this.object.data('view', this);
+        this.object.click(function(e) {
+            _this.object.remove();
+            e.stopPropagation();
+        });
+
+        $.ajax('/channel/'+this.channel+'/pictures', {
+            type: 'GET',
+            dataType: 'json',
+            success: function(picture_list) {
+                _.each(picture_list, function(pid) {
+                    var picture = $(ich.picture_thumbnail_template({pid: pid}));
+                    picture.click(function(e) {
+                        _this.handler(pid);
+                        _this.remove();
+                        e.stopPropagation();
+                    });
+
+                    $('ul.picture-list', _this.object).append(picture);
+                });
+            },
+            error: function(err) {
+                console.log('Error loading pictures:'+err);
+                _this.remove();
+            }
+        });
+
+        // resize handler
+        var resize_handler = function() {
+            _this.object.height($(window).height() - _this.object.position().top);
+        };
+        resize_handler();
+        $(window).bind('resize.show_pictures', resize_handler);
+    },
+    remove: function() {
+        this.object.remove();
+
+        // remove resize handler
+        $(window).unbind('resize.show_pictures');
+    }
+});

views/templates.jade

@@ -136,3 +136,11 @@ script#empty_channel_template(type='text/html')
             span.sharp #
             span {{ channel }}
         p.lead.channel-oops Please upload your pictures!
+
+script#show_pictures_template(type='text/html')
+    #ShowPictures
+        ul.picture-list
+
+script#picture_thumbnail_template(type='text/html')
+    li
+        img(src='/picture/{{ pid }}/thumbnail', alt='{{ pid }}')