diff --git a/app/assets/javascripts/theater-widget.js b/app/assets/javascripts/theater-widget.js
index a3653d3..0967b62 100644
--- a/app/assets/javascripts/theater-widget.js
+++ b/app/assets/javascripts/theater-widget.js
@@ -1,536 +1,549 @@
-var GalleryTheaterWidget = function(widget){
-  var parent_divs = widget,
-      parent_div_z_index = parent_divs.eq(parent_divs.length-1).css('z-index')
-  parent_divs.eq(parent_divs.length-1).css('z-index','2000')
-  var gt = this,
-      currentPic = {},
-      windowHeight = 0,
-      windowWidth = 0,
-      swipeController = null,
-      resizing = null;
-      loadingInterval = null,
-      mainPicLoading = 0,
-      nextPicLoading = 0,
-      prevPicLoading = 0,
-      currentSwipeImageDom = null,
-      currentSwipeImageDomLeftPos = 0,
-      windowScreenThresholdForTouch = 0,
-      loadingProcess = 0;
-      gt.stage = null;
-      gt.stripNextBtn = null;
-      gt.stripPrevBtn = null;
-      gt.thumbToggle = null;
-      gt.descriptionToggle = null;
-      gt.closeBtn = null;
-      gt.imageContainer = null;
-      gt.albumData = {};
-      gt.loader = null;
-      gt.thumbStrip = null;
-      gt.descriptionArea = null;
-      gt.isTheaterInitialized = false;
+var GalleryTheaterWidget = function(widget) {
+    var parent_divs = widget,
+        parent_div_z_index = parent_divs.eq(parent_divs.length - 1).css('z-index')
+    parent_divs.eq(parent_divs.length - 1).css('z-index', '2000')
+    var currentPic = {},
+        windowHeight = 0,
+        windowWidth = 0,
+        swipeController = null,
+        resizing = null,
+        loadingInterval = null,
+        mainPicLoading = 0,
+        nextPicLoading = 0,
+        prevPicLoading = 0,
+        currentSwipeImageDom = null,
+        currentSwipeImageDomLeftPos = 0,
+        windowScreenThresholdForTouch = 0,
+        loadingProcess = 0,
+        stage = null,
+        stripNextBtn = null,
+        stripPrevBtn = null,
+        thumbToggle = null,
+        descriptionToggle = null,
+        closeBtn = null,
+        switchBtn = null,
+        imageContainer = null,
+        albumData = {},
+        loader = null,
+        thumbStrip = null,
+        descriptionArea = null,
+        isTheaterInitialized = false;
 
-  var play_flag = false;
-  var button_left_string = '<button id ="theaterPreviousButton" class="theaterButton">< </button>',
-      button_right_string = '<button id ="theaterNextButton" class="theaterButton">> </button>',
-      button_play_string = '<button id ="theaterPlayButton" class="theaterButton">▶ </button>',
-      button_stop_string = '<button id ="theaterStopButton" class="theaterButton">|| </button>',
-      playtimeoutID;
-  var initialize = function(){
-    gt.stage = widget.find('#gallery-theater-stage');
-    gt.closeBtn = gt.stage.find(".gallery-close");
-    gt.switchBtn = gt.stage.find(".gallery-theme-switch");
-    gt.imageContainer = gt.stage.find(".image-container");
-    gt.thumbStrip = gt.stage.find(".gallery-thumb-wrap");
-    gt.thumbToggle = gt.stage.find(".gallery-thumb-toggle");
-    gt.loader = gt.stage.find(".gallery-loader");
-    gt.stripNextBtn = gt.stage.find(".gallery-thumb-next");
-    gt.stripPrevBtn = gt.stage.find(".gallery-thumb-prev");
-    gt.descriptionArea = gt.stage.find(".gallery-img-desc");
-    gt.descriptionToggle = gt.stage.find(".gallery-toggle-desc");
-    windowScreenThresholdForTouch = windowWidth / 3;
-    startLoading();
-    windowHeight = $(window).height();
-    windowWidth = $(window).width();
-    var addButton = function () {
-      widget.find('.theaterButton').remove();
-      if (!play_flag){
-        $(button_left_string+button_play_string+button_right_string).insertAfter(widget.find('img.gal-active'));
-      }
-      else{
-        $(button_left_string+button_stop_string+button_right_string).insertAfter(widget.find('img.gal-active'));
-      }
-      if (!widget.find(".gal-prev").length) { widget.find('#theaterPreviousButton').remove(); }
-      if (!widget.find(".gal-next").length) { widget.find('#theaterNextButton').remove(); }
-
-      widget.find('#theaterPreviousButton').click(function () {
-        gt.previousPic();
-        addButton()
-      });
-      widget.find('#theaterNextButton').click(function () {
-        gt.nextPic();
-        addButton()
-      });
-      widget.find('#theaterPlayButton').click(function () {
-        play_flag = true;
-        playtimeoutID = window.setInterval(function(){
-          gt.playallPic();
-        },3000)
-        addButton()
-      });
-      widget.find('#theaterStopButton').click(function () {
-        play_flag = false;
-        addButton()
-        window.clearInterval(playtimeoutID)
-      });
-    }
-    bindHandler();
-    gt.createTheater();
-    
-    addButton();
-
-  }
-
-  var bindHandler = function(){
-    // handler to close the theater
-    gt.closeBtn.on("click",gt.destroyTheater);
-
-    // handler to show theater
-    widget.find("div[data-list=images] a").on("click",function(){
-      gt.createTheater();
-      return false;
-    })
-
-     gt.switchBtn.on("click",gt.switchTheme);
-     gt.descriptionToggle.on("click", gt.toggleDescription)
-     gt.stripPrevBtn.on("click", gt.scrollStripRight);
-     gt.stripNextBtn.on("click", gt.scrollStripLeft);
-
-     if(Modernizr.touch){
-      gt.imageContainer.swipe({
-        swipe : function(event, direction, distance, duration, fingerCount){
-          if(direction == "left"){
-            gt.nextPic();
-          }else if(direction == "right"){
-            gt.previousPic();
-          }
-        }
-      })
-      gt.thumbToggle.swipe({
-        swipe : function(event, direction, distance, duration, fingerCount){
-          if(direction == "up"){
-            gt.thumbStrip.parent().addClass("show");
-            gt.thumbToggle.addClass("up");
-            gt.thumbToggle.find("i").removeClass("fa-angle-double-up").addClass("fa-angle-double-down");
-          }else if(direction == "down"){
-            gt.thumbStrip.parent().removeClass("show");
-            gt.thumbToggle.removeClass("up");
-            gt.thumbToggle.find("i").removeClass("fa-angle-double-down").addClass("fa-angle-double-up");
-          }
-        }
-      })
-     }
-
-     //handler for window resize
-     $(window).resize(function(){
-       clearTimeout(resizing);
-       resizing = setTimeout(doneResizing,1000);
-     })
-  }
-
-  var bindKeyHandlers = function(){
-    if(!Modernizr.touch){
-      widget.on("click",".gal-active", gt.nextPic);
-      widget.on("click",".gal-prev", gt.previousPic);
-      widget.on("click",".gal-next", gt.nextPic);
-      $(document).on("keyup",function(e){
-        switch(e.keyCode){
-          case 39:
-            gt.nextPic();
-            break;
-          case 37:
-            gt.previousPic();
-            break;
-          case 27:
-            gt.destroyTheater();
-          break;
-        }
-       })
-    }
-  }
-
-
-  var doneResizing = function(){
-    windowHeight = $(window).height();
-    windowWidth = $(window).width();
-    setThumbNavs();
-  }
-
-  var unBindKeyHandlers = function(){
-    $(document).unbind("keyup");
-  }
-
-  gt.destroyTheater = function(){
-    parent_divs.eq(parent_divs.length-1).css('z-index',parent_div_z_index)
-    gt.stage.hide();
-    widget.removeClass("gallery-mode-on");
-    gt.imageContainer.empty()
-    unBindKeyHandlers();
-  }
-
-  gt.createTheater = function(){
-    gt.stage.show();
-    widget.addClass("gallery-mode-on");
-    bindKeyHandlers();
-	  gt.isTheaterInitialized = false;
-    gt.albumData = {}
-    gt.albumData.images = $.map(widget.find('img.gallery-thumb'),function(v){
-     var url = $(v).attr('data-link'),
-         theater_url = $(v).attr('data-theater-url'),
-         thumb_url = $(v).attr('src')
-     return {'url': url, 
-              'file': {'theater': {url: theater_url},
-                       'thumb': {url: thumb_url}
-                      }
-            }
-    })
-    var cp =  gt.albumData.images[0];
-    currentPic = {"image" : cp, "index" : 0};
-    createThumbStrip();
-
-	  currentPic = currentPic;
-  }
-
-  gt.hasNextImage = function(){
-    return (currentPic.index + 1) <= (gt.albumData.images.length - 1);
-  }
-
-  gt.hasPreviousImage = function(){
-    return (currentPic.index > 0);
-  }
-
-  gt.nextPic = function(){
-    if(loadingProcess == 0){
-      if(gt.hasNextImage()){
+    var play_flag = false;
+    var button_left_string = '<button id ="theaterPreviousButton" class="theaterButton">< </button>',
+        button_right_string = '<button id ="theaterNextButton" class="theaterButton">> </button>',
+        button_play_string = '<button id ="theaterPlayButton" class="theaterButton">▶ </button>',
+        button_stop_string = '<button id ="theaterStopButton" class="theaterButton">|| </button>',
+        playtimeoutID;
+    var initialize = function() {
+        stage = widget.find('#gallery-theater-stage');
+        closeBtn = stage.find(".gallery-close");
+        switchBtn = stage.find(".gallery-theme-switch");
+        imageContainer = stage.find(".image-container");
+        thumbStrip = stage.find(".gallery-thumb-wrap");
+        thumbToggle = stage.find(".gallery-thumb-toggle");
+        loader = stage.find(".gallery-loader");
+        stripNextBtn = stage.find(".gallery-thumb-next");
+        stripPrevBtn = stage.find(".gallery-thumb-prev");
+        descriptionArea = stage.find(".gallery-img-desc");
+        descriptionToggle = stage.find(".gallery-toggle-desc");
+        windowScreenThresholdForTouch = windowWidth / 3;
         startLoading();
-        currentPic.image = gt.albumData.images[currentPic.index + 1];
-        currentPic.index = currentPic.index + 1;
-        setMainPic("next");
-      }
-    }
-  }
-  gt.playallPic = function(){
-    if(loadingProcess == 0){
-      mainPicLoading = 1;
-      nextPicLoading = 1;
-      prevPicLoading = 1;
-      if(gt.hasNextImage()){
-        currentPic.image = gt.albumData.images[currentPic.index + 1];
-        currentPic.index = currentPic.index + 1;
-        setMainPic("next");
-      }
-      else{
-        currentPic.image = gt.albumData.images[0];
-        currentPic.index = 0;
-        setMainPic();
-        gt.isTheaterInitialized = false;
-        setTimeout(function(){
-          loadingProcess = 0;
-          nextPicLoading = 0;
-          widget.find('.theaterButton').remove()
-          widget.find("img.gallery-image.gal-prev.gal-inactive").remove();
-          img = widget.find("img.gallery-image.gal-active");
-          img.eq(0).remove();
-        },100)
-      }
-    }
-  }
-
-
-   gt.previousPic = function(){
-    if(loadingProcess == 0){
-      if(gt.hasPreviousImage()) {
-        startLoading();
-        currentPic.image = gt.albumData.images[currentPic.index - 1];
-        currentPic.index = currentPic.index - 1;
-        setMainPic("prev");
-      }
-    }
-   }
-
-   gt.scrollStripLeft = function(){
-      pixels_to_move = parseInt(gt.thumbStrip.css("left")) - (66 * 3);
-      maximum_pixels = (windowWidth / 2) - (66 * (gt.albumData.images.length - 1));
-      if(pixels_to_move < maximum_pixels){
-        pixels_to_move = maximum_pixels;
-      }
-      gt.thumbStrip.css("left",pixels_to_move + "px");
-   }
-
-    gt.scrollStripRight = function(){
-      pixels_to_move = parseInt(gt.thumbStrip.css("left")) + (66 * 3);
-      maximum_pixels = (windowWidth / 2);
-      if(pixels_to_move > maximum_pixels){
-        pixels_to_move = maximum_pixels;
-      }
-      gt.thumbStrip.css("left",pixels_to_move + "px");
-   }
-
-
-   gt.switchTheme = function(){
-     var themeWhiteKlass = "theme-white",
-          nightKlass = "fa fa-circle",
-          dayKlass = "fa fa-circle-o",
-          $body = widget;
-
-      if (!gt.switchBtn.hasClass(themeWhiteKlass)) {
-        gt.switchBtn
-          .addClass(themeWhiteKlass)
-          .find("i")
-          .attr("class", dayKlass);
-
-        $body.addClass(themeWhiteKlass);
-
-      } else {
-        gt.switchBtn
-          .removeClass(themeWhiteKlass)
-          .find("i")
-          .attr("class", nightKlass);
-
-        $body.removeClass(themeWhiteKlass);
-
-      }
-   }
-
-   gt.toggleDescription = function(){
-    $(this).toggleClass("active");
-     gt.descriptionArea.toggleClass("active");
-   }
-
-   var startLoading = function(){
-    loadingProcess = 1;
-    mainPicLoading = 0;
-    nextPicLoading = 0;
-    prevPicLoading = 0;
-    gt.loader.show();
-    loadingInterval = setInterval(stopLoading, 300);
-
-   }
-
-   var stopLoading = function(){
-    if(mainPicLoading == 1 && nextPicLoading == 1 && prevPicLoading == 1){
-      clearInterval(loadingInterval);
-      setTimeout(function(){
-        loadingProcess = 0;
-        gt.loader.hide();
-      },100)
-    }
-   }
-
-  var createThumbStrip = function(){
-    if(!gt.isTheaterInitialized){
-      gt.thumbStrip.html('')
-      $.each(gt.albumData.images,function(index, image){
-        var li = $("<li class='gallery-item'></li>"),
-            a = $("<a style=\"cursor: pointer;\"></a>"),
-            img = $("<img class='gallery-thumb' src='' alt='Image Thumb'>");
-          a.on("click",function(){ 
-            startLoading();
-            var old_index = currentPic.index;
-            currentPic.image = gt.albumData.images[index];
-            currentPic.index = index;
-            if(old_index > index){
-              setMainPic("prev",true);
-            }else if(old_index < index){
-              setMainPic("next",true);
+        windowHeight = $(window).height();
+        windowWidth = $(window).width();
+        var addButton = function() {
+            widget.find('.theaterButton').remove();
+            if (!play_flag) {
+                $(button_left_string + button_play_string + button_right_string).insertAfter(widget.find('img.gal-active'));
+            } else {
+                $(button_left_string + button_stop_string + button_right_string).insertAfter(widget.find('img.gal-active'));
             }
+            if (!widget.find(".gal-prev").length) {
+                widget.find('#theaterPreviousButton').remove();
+            }
+            if (!widget.find(".gal-next").length) {
+                widget.find('#theaterNextButton').remove();
+            }
+
+            widget.find('#theaterPreviousButton').click(function() {
+                previousPic();
+                addButton()
+            });
+            widget.find('#theaterNextButton').click(function() {
+                nextPic();
+                addButton()
+            });
+            widget.find('#theaterPlayButton').click(function() {
+                play_flag = true;
+                playtimeoutID = window.setInterval(function() {
+                    playallPic();
+                }, 3000)
+                addButton()
+            });
+            widget.find('#theaterStopButton').click(function() {
+                play_flag = false;
+                addButton()
+                window.clearInterval(playtimeoutID)
+            });
+        }
+        bindHandler();
+        createTheater();
+
+        addButton();
+
+    }
+
+    var bindHandler = function() {
+        // handler to close the theater
+        closeBtn.on("click", destroyTheater);
+
+        // handler to show theater
+        widget.find("div[data-list=images] a").on("click", function() {
+            createTheater();
             return false;
-          })
-          
-          img.attr("src",image.file.thumb.url);
-          img.attr("alt",image.alt_title);
-          li.attr("data-index",index);
-          a.append(img);
-          li.append(a);
-          gt.thumbStrip.append(li);
-      })
-      setThumbNavs();
+        })
+
+        switchBtn.on("click", switchTheme);
+        descriptionToggle.on("click", toggleDescription)
+        stripPrevBtn.on("click", scrollStripRight);
+        stripNextBtn.on("click", scrollStripLeft);
+
+        if (Modernizr.touch) {
+            imageContainer.swipe({
+                swipe: function(event, direction, distance, duration, fingerCount) {
+                    if (direction == "left") {
+                        nextPic();
+                    } else if (direction == "right") {
+                        previousPic();
+                    }
+                }
+            })
+            thumbToggle.swipe({
+                swipe: function(event, direction, distance, duration, fingerCount) {
+                    if (direction == "up") {
+                        thumbStrip.parent().addClass("show");
+                        thumbToggle.addClass("up");
+                        thumbToggle.find("i").removeClass("fa-angle-double-up").addClass("fa-angle-double-down");
+                    } else if (direction == "down") {
+                        thumbStrip.parent().removeClass("show");
+                        thumbToggle.removeClass("up");
+                        thumbToggle.find("i").removeClass("fa-angle-double-down").addClass("fa-angle-double-up");
+                    }
+                }
+            })
+        }
+
+        //handler for window resize
+        $(window).resize(function() {
+            clearTimeout(resizing);
+            resizing = setTimeout(doneResizing, 1000);
+        })
+    }
+
+    var bindKeyHandlers = function() {
+        if (!Modernizr.touch) {
+            widget.on("click", ".gal-active", nextPic);
+            widget.on("click", ".gal-prev", previousPic);
+            widget.on("click", ".gal-next", nextPic);
+            $(document).on("keyup", function(e) {
+                switch (e.keyCode) {
+                    case 39:
+                        nextPic();
+                        break;
+                    case 37:
+                        previousPic();
+                        break;
+                    case 27:
+                        destroyTheater();
+                        break;
+                }
+            })
+        }
     }
-    setMainPic();
-  }
 
 
-  var setThumbNavs = function() {
-    var $thumbNav = gt.stage.find('.gallery-thumb-navs'),
-        $thumb = gt.thumbStrip.find('img'),
-        thumbs = $thumb.length,
-        thumbWidth = $thumb.eq(0).width(),
-        thumbGap = parseInt($thumb.closest('li').css('margin-right'), 10),
-        widthSum = (thumbWidth + thumbGap) * thumbs,
-        margin = widthSum * 0.1,
-        totalWidth = widthSum + margin;
+    var doneResizing = function() {
+        windowHeight = $(window).height();
+        windowWidth = $(window).width();
+        setThumbNavs();
+    }
 
-    if (windowWidth < totalWidth) {
-      $thumbNav.addClass('show');
-    }else{
-      $thumbNav.removeClass('show');
+    var unBindKeyHandlers = function() {
+        $(document).unbind("keyup");
     }
-  };
-  function one_load(img){
-    if (img[0].complete){
-      setTimeout(loaded(img),100)
-    }else{
-      setTimeout(one_load,20)
-    }
-  }
-  function loaded(img){
-    calculateHeight(img);
-    mainPicLoading = 1;
-    img.fadeIn(100);
-  }
-  window.setMainPic = function(direction,selectedFromStrip){
-    var img = null;
-    widget.find('div.gallery-show-original a').eq(0).attr('href',currentPic.image.url)
-    if(direction == null){
-      img = $("<img class='gallery-image gal-active'>");
-      img.hide();
-      img.attr("src", currentPic.image.file.theater.url);
-      gt.imageContainer.append(img);
-      img.one("load", function(){
-        one_load(img)
-      })
-      gt.isTheaterInitialized = true;
-    }else{
-      img =  gt.imageContainer.find(".gal-active");
-      if(selectedFromStrip){
-        gt.imageContainer.find(".gal-" + direction).attr("src",currentPic.image.file.theater.url);  
-      }
-      if(direction == "next"){
-        gt.imageContainer.find(".gal-prev").remove();
-        img.removeClass("gal-active").addClass("gal-prev gal-inactive temp");
-        gt.imageContainer.find(".gal-next").removeClass("gal-inactive gal-next").addClass("gal-active");
-        gt.thumbStrip.css("left",(parseInt(gt.thumbStrip.css("left")) - 66) + "px");
-      }else if(direction == "prev"){
-        gt.imageContainer.find(".gal-next").remove();
-        img.removeClass("gal-active").addClass("gal-next gal-inactive temp");
-        gt.imageContainer.find(".gal-prev").removeClass("gal-inactive gal-prev").addClass("gal-active");
-        gt.thumbStrip.css("left",(parseInt(gt.thumbStrip.css("left")) + 66) + "px");
-      }
-      mainPicLoading = 1;
-    }
-    gt.descriptionArea.html("<p>" + currentPic.image.description + "</p>");
-    if(currentPic.image.description == null){
-      gt.descriptionArea.addClass("hide");
-    }else{
-      gt.descriptionArea.removeClass("hide");
-    }
-    if (direction!=null){
-      calculateHeight(gt.imageContainer.find(".gal-active"));
-    }
-    gt.thumbStrip.find("li.active").removeClass("active");
-    gt.thumbStrip.find("li[data-index=" + currentPic.index + "]").addClass("active");
 
-    setStripToCenter();
-    setNextPic();
-    setPrevPic();
-  }
-
-  var calculateHeight = function(img){
-    var h = 0,
-        w = 0,
-        new_width = 0;
-    if(!Modernizr.touch){
-      if(typeof currentPic.image.height == "undefined"){
-        h = img.height();
-        currentPic.image.height = h;
-        w = img.width();
-        currentPic.image.width = w;
-      }else{
-        h = currentPic.image.height;
-        w = currentPic.image.width;
-      }
-    }else{
-      h = img.height();
-      w = img.width();
+    var destroyTheater = function() {
+        parent_divs.eq(parent_divs.length - 1).css('z-index', parent_div_z_index)
+        stage.hide();
+        widget.removeClass("gallery-mode-on");
+        imageContainer.empty()
+        unBindKeyHandlers();
     }
-    if(h > (windowHeight - 150)){
-      new_width = Math.round((windowHeight - 100) * w / h);
-      new_width = (new_width / windowWidth) * 100;
-      img.width(new_width + "%");
-    }else{
-      if(windowWidth < 770){
-        img.width("90%");
-      }else{
-        img.width("65%");
-      }
+
+    var createTheater = function() {
+        stage.show();
+        widget.addClass("gallery-mode-on");
+        bindKeyHandlers();
+        isTheaterInitialized = false;
+        albumData = {}
+        albumData.images = $.map(widget.find('img.gallery-thumb'), function(v) {
+            var url = $(v).attr('data-link'),
+                theater_url = $(v).attr('data-theater-url'),
+                thumb_url = $(v).attr('src')
+            return {
+                'url': url,
+                'file': {
+                    'theater': {
+                        url: theater_url
+                    },
+                    'thumb': {
+                        url: thumb_url
+                    }
+                }
+            }
+        })
+        var cp = albumData.images[0];
+        currentPic = {
+            "image": cp,
+            "index": 0
+        };
+        createThumbStrip();
+
+        currentPic = currentPic;
     }
-    if (typeof set_gallery_height != 'undefined'){
-      set_gallery_height(widget)
+
+    var hasNextImage = function() {
+        return (currentPic.index + 1) <= (albumData.images.length - 1);
     }
-  }
 
-  var setStripToCenter = function(){
-    left = (windowWidth / 2) - (66 * currentPic.index);
-    gt.thumbStrip.css("left",left + "px");
-  }
-
-  var setNextPic = function(){
-    gt.imageContainer.find(".gal-next.temp").remove()
-    if(gt.hasNextImage()) {
-      var obj = gt.albumData.images[currentPic.index + 1],
-          nextImg = $("<img class='gallery-image gal-next gal-inactive'>");
-      nextImg.attr("src",obj.file.theater.url);
-      nextImg.hide();
-      gt.imageContainer.append(nextImg);
-      nextImg.on("load",function(){
-        calculateHeight(nextImg);
-        nextPicLoading = 1;
-        nextImg.fadeIn(100);
-      })
-    }else{
-      nextPicLoading = 1;
+    var hasPreviousImage = function() {
+        return (currentPic.index > 0);
     }
-  }
 
-  var setPrevPic = function(){
-    gt.imageContainer.find(".gal-prev.temp").remove()
-    if(gt.hasPreviousImage()) {
-      var obj = gt.albumData.images[currentPic.index - 1],
-          prevImg = $("<img class='gallery-image gal-prev gal-inactive'>");
-      prevImg.attr("src",obj.file.theater.url);
-      prevImg.hide();
-      gt.imageContainer.prepend(prevImg);
-      prevImg.on("load",function(){
-        calculateHeight(prevImg);
-        prevPicLoading = 1;
-        prevImg.fadeIn(100);
-      })
-    }else{
-      prevPicLoading = 1;
+    var nextPic = function() {
+        if (loadingProcess == 0) {
+            if (hasNextImage()) {
+                startLoading();
+                currentPic.image = albumData.images[currentPic.index + 1];
+                currentPic.index = currentPic.index + 1;
+                setMainPic("next");
+            }
+        }
+    }
+    var playallPic = function() {
+        if (loadingProcess == 0) {
+            mainPicLoading = 1;
+            nextPicLoading = 1;
+            prevPicLoading = 1;
+            if (hasNextImage()) {
+                currentPic.image = albumData.images[currentPic.index + 1];
+                currentPic.index = currentPic.index + 1;
+                setMainPic("next");
+            } else {
+                currentPic.image = albumData.images[0];
+                currentPic.index = 0;
+                setMainPic();
+                isTheaterInitialized = false;
+                setTimeout(function() {
+                    loadingProcess = 0;
+                    nextPicLoading = 0;
+                    widget.find('.theaterButton').remove()
+                    widget.find("img.gallery-image.gal-prev.gal-inactive").remove();
+                    img = widget.find("img.gallery-image.gal-active");
+                    img.eq(0).remove();
+                }, 100)
+            }
+        }
     }
-  }
 
-  var l = function(x){
-    console.log(x)
-  }
 
-  initialize();
+    var previousPic = function() {
+        if (loadingProcess == 0) {
+            if (hasPreviousImage()) {
+                startLoading();
+                currentPic.image = albumData.images[currentPic.index - 1];
+                currentPic.index = currentPic.index - 1;
+                setMainPic("prev");
+            }
+        }
+    }
+
+    var scrollStripLeft = function() {
+        pixels_to_move = parseInt(thumbStrip.css("left")) - (66 * 3);
+        maximum_pixels = (windowWidth / 2) - (66 * (albumData.images.length - 1));
+        if (pixels_to_move < maximum_pixels) {
+            pixels_to_move = maximum_pixels;
+        }
+        thumbStrip.css("left", pixels_to_move + "px");
+    }
+
+    var scrollStripRight = function() {
+        pixels_to_move = parseInt(thumbStrip.css("left")) + (66 * 3);
+        maximum_pixels = (windowWidth / 2);
+        if (pixels_to_move > maximum_pixels) {
+            pixels_to_move = maximum_pixels;
+        }
+        thumbStrip.css("left", pixels_to_move + "px");
+    }
+
+
+    var switchTheme = function() {
+        var themeWhiteKlass = "theme-white",
+            nightKlass = "fa fa-circle",
+            dayKlass = "fa fa-circle-o",
+            $body = widget;
+
+        if (!switchBtn.hasClass(themeWhiteKlass)) {
+            switchBtn
+                .addClass(themeWhiteKlass)
+                .find("i")
+                .attr("class", dayKlass);
+
+            $body.addClass(themeWhiteKlass);
+
+        } else {
+            switchBtn
+                .removeClass(themeWhiteKlass)
+                .find("i")
+                .attr("class", nightKlass);
+
+            $body.removeClass(themeWhiteKlass);
+
+        }
+    }
+
+    var toggleDescription = function() {
+        $(this).toggleClass("active");
+        descriptionArea.toggleClass("active");
+    }
+
+    var startLoading = function() {
+        loadingProcess = 1;
+        mainPicLoading = 0;
+        nextPicLoading = 0;
+        prevPicLoading = 0;
+        loader.show();
+        loadingInterval = setInterval(stopLoading, 300);
+
+    }
+
+    var stopLoading = function() {
+        if (mainPicLoading == 1 && nextPicLoading == 1 && prevPicLoading == 1) {
+            clearInterval(loadingInterval);
+            setTimeout(function() {
+                loadingProcess = 0;
+                loader.hide();
+            }, 100)
+        }
+    }
+
+    var createThumbStrip = function() {
+        if (!isTheaterInitialized) {
+            thumbStrip.html('')
+            $.each(albumData.images, function(index, image) {
+                var li = $("<li class='gallery-item'></li>"),
+                    a = $("<a style=\"cursor: pointer;\"></a>"),
+                    img = $("<img class='gallery-thumb' src='' alt='Image Thumb'>");
+                a.on("click", function() {
+                    startLoading();
+                    var old_index = currentPic.index;
+                    currentPic.image = albumData.images[index];
+                    currentPic.index = index;
+                    if (old_index > index) {
+                        setMainPic("prev", true);
+                    } else if (old_index < index) {
+                        setMainPic("next", true);
+                    }
+                    return false;
+                })
+
+                img.attr("src", image.file.thumb.url);
+                img.attr("alt", image.alt_title);
+                li.attr("data-index", index);
+                a.append(img);
+                li.append(a);
+                thumbStrip.append(li);
+            })
+            setThumbNavs();
+        }
+        setMainPic();
+    }
+
+
+    var setThumbNavs = function() {
+        var $thumbNav = stage.find('.gallery-thumb-navs'),
+            $thumb = thumbStrip.find('img'),
+            thumbs = $thumb.length,
+            thumbWidth = $thumb.eq(0).width(),
+            thumbGap = parseInt($thumb.closest('li').css('margin-right'), 10),
+            widthSum = (thumbWidth + thumbGap) * thumbs,
+            margin = widthSum * 0.1,
+            totalWidth = widthSum + margin;
+
+        if (windowWidth < totalWidth) {
+            $thumbNav.addClass('show');
+        } else {
+            $thumbNav.removeClass('show');
+        }
+    };
+
+    function one_load(img) {
+        if (img[0].complete) {
+            setTimeout(loaded(img), 100)
+        } else {
+            setTimeout(one_load, 20)
+        }
+    }
+
+    function loaded(img) {
+        calculateHeight(img);
+        mainPicLoading = 1;
+        img.fadeIn(100);
+    }
+    window.setMainPic = function(direction, selectedFromStrip) {
+        var img = null;
+        widget.find('div.gallery-show-original a').eq(0).attr('href', currentPic.image.url)
+        if (direction == null) {
+            img = $("<img class='gallery-image gal-active'>");
+            img.hide();
+            img.attr("src", currentPic.image.file.theater.url);
+            imageContainer.append(img);
+            img.one("load", function() {
+                one_load(img)
+            })
+            isTheaterInitialized = true;
+        } else {
+            img = imageContainer.find(".gal-active");
+            if (selectedFromStrip) {
+                imageContainer.find(".gal-" + direction).attr("src", currentPic.image.file.theater.url);
+            }
+            if (direction == "next") {
+                imageContainer.find(".gal-prev").remove();
+                img.removeClass("gal-active").addClass("gal-prev gal-inactive temp");
+                imageContainer.find(".gal-next").removeClass("gal-inactive gal-next").addClass("gal-active");
+                thumbStrip.css("left", (parseInt(thumbStrip.css("left")) - 66) + "px");
+            } else if (direction == "prev") {
+                imageContainer.find(".gal-next").remove();
+                img.removeClass("gal-active").addClass("gal-next gal-inactive temp");
+                imageContainer.find(".gal-prev").removeClass("gal-inactive gal-prev").addClass("gal-active");
+                thumbStrip.css("left", (parseInt(thumbStrip.css("left")) + 66) + "px");
+            }
+            mainPicLoading = 1;
+        }
+        descriptionArea.html("<p>" + currentPic.image.description + "</p>");
+        if (currentPic.image.description == null) {
+            descriptionArea.addClass("hide");
+        } else {
+            descriptionArea.removeClass("hide");
+        }
+        if (direction != null) {
+            calculateHeight(imageContainer.find(".gal-active"));
+        }
+        thumbStrip.find("li.active").removeClass("active");
+        thumbStrip.find("li[data-index=" + currentPic.index + "]").addClass("active");
+
+        setStripToCenter();
+        setNextPic();
+        setPrevPic();
+    }
+
+    var calculateHeight = function(img) {
+        var h = 0,
+            w = 0,
+            new_width = 0;
+        if (!Modernizr.touch) {
+            if (typeof currentPic.image.height == "undefined") {
+                h = img.height();
+                currentPic.image.height = h;
+                w = img.width();
+                currentPic.image.width = w;
+            } else {
+                h = currentPic.image.height;
+                w = currentPic.image.width;
+            }
+        } else {
+            h = img.height();
+            w = img.width();
+        }
+        if (h > (windowHeight - 150)) {
+            new_width = Math.round((windowHeight - 100) * w / h);
+            new_width = (new_width / windowWidth) * 100;
+            img.width(new_width + "%");
+        } else {
+            if (windowWidth < 770) {
+                img.width("90%");
+            } else {
+                img.width("65%");
+            }
+        }
+        if (typeof set_gallery_height != 'undefined') {
+            set_gallery_height(widget)
+        }
+    }
+
+    var setStripToCenter = function() {
+        left = (windowWidth / 2) - (66 * currentPic.index);
+        thumbStrip.css("left", left + "px");
+    }
+
+    var setNextPic = function() {
+        imageContainer.find(".gal-next.temp").remove()
+        if (hasNextImage()) {
+            var obj = albumData.images[currentPic.index + 1],
+                nextImg = $("<img class='gallery-image gal-next gal-inactive'>");
+            nextImg.attr("src", obj.file.theater.url);
+            nextImg.hide();
+            imageContainer.append(nextImg);
+            nextImg.on("load", function() {
+                calculateHeight(nextImg);
+                nextPicLoading = 1;
+                nextImg.fadeIn(100);
+            })
+        } else {
+            nextPicLoading = 1;
+        }
+    }
+
+    var setPrevPic = function() {
+        imageContainer.find(".gal-prev.temp").remove()
+        if (hasPreviousImage()) {
+            var obj = albumData.images[currentPic.index - 1],
+                prevImg = $("<img class='gallery-image gal-prev gal-inactive'>");
+            prevImg.attr("src", obj.file.theater.url);
+            prevImg.hide();
+            imageContainer.prepend(prevImg);
+            prevImg.on("load", function() {
+                calculateHeight(prevImg);
+                prevPicLoading = 1;
+                prevImg.fadeIn(100);
+            })
+        } else {
+            prevPicLoading = 1;
+        }
+    }
+
+    var l = function(x) {
+        console.log(x)
+    }
+
+    initialize();
 }
-if (typeof bind_gallery_widget_slide == 'undefined'){
-  function set_gallery_height(widget){
-    var h = widget.find('.gallery-thumb-container').height()+widget.find('.gallery-image.gal-active').height()+widget.find('.gallery-actions').height()+widget.find('.theaterButton').height()+20
-    widget.find('.show-gallery-2.gallery').css('height',h)
-  }
-  var bind_gallery_widget_slide = function(){
-    $('.widget-gallery.widget5').each(function(){
-      GalleryTheaterWidget($(this));
-      $(window).resize(function(){
-        set_gallery_height($(this))
-      });
+if (typeof bind_gallery_widget_slide == 'undefined') {
+    function set_gallery_height(widget) {
+        var h = widget.find('.gallery-thumb-container').height() + widget.find('.gallery-image.gal-active').height() + widget.find('.gallery-actions').height() + widget.find('.theaterButton').height() + 20
+        widget.find('.show-gallery-2.gallery').css('height', h)
+    }
+    var bind_gallery_widget_slide = function() {
+        $('.widget-gallery.widget5').each(function() {
+            GalleryTheaterWidget($(this));
+            $(window).resize(function() {
+                set_gallery_height($(this))
+            });
+        })
+    }
+    $(document).ready(function() {
+        bind_gallery_widget_slide()
     })
-  }
-  $(document).ready(function(){
-    bind_gallery_widget_slide()
-  })
 }
 
 // gallery-image gal-prev gal-inactive
\ No newline at end of file
diff --git a/app/assets/javascripts/theater.js b/app/assets/javascripts/theater.js
index 2fdb073..0db4eae 100644
--- a/app/assets/javascripts/theater.js
+++ b/app/assets/javascripts/theater.js
@@ -1,546 +1,560 @@
-$('.show-gallery .show-content.col-sm-2').ready(function(){
-  if ($('.show-gallery .show-content.col-sm-2').eq(0).css('float')=='left'){
-    $('.show-gallery .show-content.col-sm-2').eq(0).parent().css('float','left')
-  }
+$('.show-gallery .show-content.col-sm-2').ready(function() {
+    if ($('.show-gallery .show-content.col-sm-2').eq(0).css('float') == 'left') {
+        $('.show-gallery .show-content.col-sm-2').eq(0).parent().css('float', 'left')
+    }
 })
-window.GalleryTheater = function(){
-  var parent_divs = $('.gallery').parents('div'),
-      parent_div_z_index = parent_divs.eq(parent_divs.length-1).css('z-index')
-  parent_divs.eq(parent_divs.length-1).css('z-index','2000')
-  var gt = this,
-      currentPic = {},
-      windowHeight = 0,
-      windowWidth = 0,
-      swipeController = null,
-      resizing = null;
-      loadingInterval = null,
-      mainPicLoading = 0,
-      nextPicLoading = 0,
-      prevPicLoading = 0,
-      currentSwipeImageDom = null,
-      currentSwipeImageDomLeftPos = 0,
-      windowScreenThresholdForTouch = 0,
-      loadingProcess = 0;
-      gt.stage = null;
-      gt.stripNextBtn = null;
-      gt.stripPrevBtn = null;
-      gt.thumbToggle = null;
-      gt.descriptionToggle = null;
-      gt.closeBtn = null;
-      gt.imageContainer = null;
-      gt.albumData = {};
-      gt.loader = null;
-      gt.thumbStrip = null;
-      gt.descriptionArea = null;
-      gt.isTheaterInitialized = false;
+window.GalleryTheater = function() {
+    var parent_divs = $('.gallery').parents('div'),
+        parent_div_z_index = parent_divs.eq(parent_divs.length - 1).css('z-index')
+    parent_divs.eq(parent_divs.length - 1).css('z-index', '2000')
+    var currentPic = {},
+        windowHeight = 0,
+        windowWidth = 0,
+        swipeController = null,
+        resizing = null,
+        loadingInterval = null,
+        mainPicLoading = 0,
+        nextPicLoading = 0,
+        prevPicLoading = 0,
+        currentSwipeImageDom = null,
+        currentSwipeImageDomLeftPos = 0,
+        windowScreenThresholdForTouch = 0,
+        loadingProcess = 0,
+        stage = null,
+        stripNextBtn = null,
+        stripPrevBtn = null,
+        thumbToggle = null,
+        descriptionToggle = null,
+        closeBtn = null,
+        switchBtn = null,
+        imageContainer = null,
+        albumData = {},
+        loader = null,
+        thumbStrip = null,
+        descriptionArea = null,
+        isTheaterInitialized = false;
 
-  var play_flag = false;
-  var button_left_string = '<button id ="theaterPreviousButton" class="theaterButton">< </button>',
-      button_right_string = '<button id ="theaterNextButton" class="theaterButton">> </button>',
-      button_play_string = '<button id ="theaterPlayButton" class="theaterButton">▶ </button>',
-      button_stop_string = '<button id ="theaterStopButton" class="theaterButton">|| </button>',
-      playtimeoutID;
-  var initialize = function(){
-    gt.stage = $("#gallery-theater-stage");
-    gt.closeBtn = gt.stage.find(".gallery-close");
-    gt.switchBtn = gt.stage.find(".gallery-theme-switch");
-    gt.imageContainer = gt.stage.find(".image-container");
-    gt.thumbStrip = gt.stage.find(".gallery-thumb-wrap");
-    gt.thumbToggle = gt.stage.find(".gallery-thumb-toggle");
-    gt.loader = gt.stage.find(".gallery-loader");
-    gt.stripNextBtn = gt.stage.find(".gallery-thumb-next");
-    gt.stripPrevBtn = gt.stage.find(".gallery-thumb-prev");
-    gt.descriptionArea = gt.stage.find(".gallery-img-desc");
-    gt.descriptionToggle = gt.stage.find(".gallery-toggle-desc");
-    windowScreenThresholdForTouch = windowWidth / 3;
-    startLoading();
-    windowHeight = $(window).height();
-    windowWidth = $(window).width();
-    var addButton = function () {
-      $('.theaterButton').remove();
-      if (!play_flag){
-        $(button_left_string+button_play_string+button_right_string).insertAfter($('img.gal-active'));
-      }
-      else{
-        $(button_left_string+button_stop_string+button_right_string).insertAfter($('img.gal-active'));
-      }
-      if (!$(".gal-prev").length) { $('#theaterPreviousButton').remove(); }
-      if (!$(".gal-next").length) { $('#theaterNextButton').remove(); }
-
-      $('#theaterPreviousButton').click(function () {
-        gt.previousPic();
-      });
-      $('#theaterNextButton').click(function () {
-        gt.nextPic();
-      });
-      $('#theaterPlayButton').click(function () {
-        play_flag = true;
-        playtimeoutID = window.setInterval(function(){
-          gt.playallPic();
-        },3000)
-        window.onhashchange()
-      });
-      $('#theaterStopButton').click(function () {
-        play_flag = false;
-        window.onhashchange()
-        window.clearInterval(playtimeoutID)
-      });
-    }
-    window.onhashchange = locationHashChanged;
-    bindHandler();
-    if(window.location.hash != "" && window.location.hash != "#"){
-      var id = window.location.hash.split("#")[1];
-      gt.createTheater("/xhr/galleries/theater/" + id);
-    }
-    
-
-    addButton();
-    function locationHashChanged() {
-      addButton();
-    }
-
-  }
-
-  var bindHandler = function(){
-    // handler to close the theater
-    gt.closeBtn.off('click').on("click",gt.destroyTheater);
-
-    // handler to show theater
-    $("div[data-list=images] a").filter(":not(.preview)").off('click').on("click",function(){
-      gt.createTheater($(this).attr("href"));
-      return false;
-    })
-
-     gt.switchBtn.off('click').on("click",gt.switchTheme);
-     gt.descriptionToggle.off('click').on("click", gt.toggleDescription)
-     gt.stripPrevBtn.off('click').on("click", gt.scrollStripRight);
-     gt.stripNextBtn.off('click').on("click", gt.scrollStripLeft);
-
-     if(Modernizr.touch){
-      gt.imageContainer.swipe({
-        swipe : function(event, direction, distance, duration, fingerCount){
-          if(direction == "left"){
-            gt.nextPic();
-          }else if(direction == "right"){
-            gt.previousPic();
-          }
-        }
-      })
-      gt.thumbToggle.swipe({
-        swipe : function(event, direction, distance, duration, fingerCount){
-          if(direction == "up"){
-            gt.thumbStrip.parent().addClass("show");
-            gt.thumbToggle.addClass("up");
-            gt.thumbToggle.find("i").removeClass("fa-angle-double-up").addClass("fa-angle-double-down");
-          }else if(direction == "down"){
-            gt.thumbStrip.parent().removeClass("show");
-            gt.thumbToggle.removeClass("up");
-            gt.thumbToggle.find("i").removeClass("fa-angle-double-down").addClass("fa-angle-double-up");
-          }
-        }
-      })
-     }
-
-     //handler for window resize
-     $(window).resize(function(){
-       clearTimeout(resizing);
-       resizing = setTimeout(doneResizing,1000);
-     })
-  }
-
-  var bindKeyHandlers = function(){
-    if(!Modernizr.touch){
-      $(document.body).on("click",".gal-active", gt.nextPic);
-      $(document.body).on("click",".gal-prev", gt.previousPic);
-      $(document.body).on("click",".gal-next", gt.nextPic);
-      $(document).on("keyup",function(e){
-        switch(e.keyCode){
-          case 39:
-            gt.nextPic();
-            break;
-          case 37:
-            gt.previousPic();
-            break;
-          case 27:
-            gt.destroyTheater();
-          break;
-        }
-       })
-    }
-  }
-
-
-  var doneResizing = function(){
-    windowHeight = $(window).height();
-    windowWidth = $(window).width();
-    setThumbNavs();
-  }
-
-  var unBindKeyHandlers = function(){
-    $(document).unbind("keyup");
-  }
-
-  gt.destroyTheater = function(){
-    parent_divs.eq(parent_divs.length-1).css('z-index',parent_div_z_index)
-    gt.stage.hide();
-    $("body").removeClass("gallery-mode-on");
-    gt.imageContainer.empty()
-    unBindKeyHandlers();
-    window.location.hash = "";
-  }
-
-  gt.createTheater = function(link){
-    $('.gallery-img-desc').removeClass('active');
-    bindKeyHandlers();
-    gt.stage.show();
-    $("body").addClass("gallery-mode-on");
-    gt.isTheaterInitialized = false;
-    if(!gt.isTheaterInitialized){
-      $.ajax({
-        url : link,
-        dataType : "json",
-        type : "get",
-        async:false
-      }).done(function(data){
-        gt.albumData = data.data;
-        var cp =  gt.albumData.images.filter(function(x){return x._id == gt.albumData.image})[0];
-        currentPic = {"image" : cp, "index" : gt.albumData.images.indexOf(cp)};
-        createThumbStrip();
-      })
-    }else{
-      var id = link.split("/")[4],
-          cp =  gt.albumData.images.filter(function(x){return x._id == id})[0];
-      currentPic = {"image" : cp, "index" : gt.albumData.images.indexOf(cp)};
-      createThumbStrip();
-    }
-	window.currentPic = currentPic;
-  }
-
-  gt.hasNextImage = function(){
-    return (currentPic.index + 1) <= (gt.albumData.images.length - 1);
-  }
-
-  gt.hasPreviousImage = function(){
-    return (currentPic.index > 0);
-  }
-
-  gt.nextPic = function(){
-    if(loadingProcess == 0){
-      if(gt.hasNextImage()){
+    var play_flag = false;
+    var button_left_string = '<button id ="theaterPreviousButton" class="theaterButton">< </button>',
+        button_right_string = '<button id ="theaterNextButton" class="theaterButton">> </button>',
+        button_play_string = '<button id ="theaterPlayButton" class="theaterButton">▶ </button>',
+        button_stop_string = '<button id ="theaterStopButton" class="theaterButton">|| </button>',
+        playtimeoutID;
+    var initialize = function() {
+        stage = $("#gallery-theater-stage");
+        closeBtn = stage.find(".gallery-close");
+        switchBtn = stage.find(".gallery-theme-switch");
+        imageContainer = stage.find(".image-container");
+        thumbStrip = stage.find(".gallery-thumb-wrap");
+        thumbToggle = stage.find(".gallery-thumb-toggle");
+        loader = stage.find(".gallery-loader");
+        stripNextBtn = stage.find(".gallery-thumb-next");
+        stripPrevBtn = stage.find(".gallery-thumb-prev");
+        descriptionArea = stage.find(".gallery-img-desc");
+        descriptionToggle = stage.find(".gallery-toggle-desc");
+        windowScreenThresholdForTouch = windowWidth / 3;
         startLoading();
-        currentPic.image = gt.albumData.images[currentPic.index + 1];
-        currentPic.index = currentPic.index + 1;
-        setMainPic("next");
-      }
-    }
-  }
-  gt.playallPic = function(){
-    if(loadingProcess == 0){
-      mainPicLoading = 1;
-      nextPicLoading = 1;
-      prevPicLoading = 1;
-      if(gt.hasNextImage()){
-        currentPic.image = gt.albumData.images[currentPic.index + 1];
-        currentPic.index = currentPic.index + 1;
-        setMainPic("next");
-      }
-      else{
-        currentPic.image = gt.albumData.images[0];
-        currentPic.index = 0;
-        setMainPic();
-        gt.isTheaterInitialized = false;
-        setTimeout(function(){
-          loadingProcess = 0;
-          nextPicLoading = 0;
-          $('.theaterButton').remove()
-          $("img.gallery-image.gal-prev.gal-inactive").remove();
-          img = $("img.gallery-image.gal-active");
-          img.eq(0).remove();
-          window.onhashchange()
-        },100)
-      }
-    }
-  }
-
-
-   gt.previousPic = function(){
-    if(loadingProcess == 0){
-      if(gt.hasPreviousImage()) {
-        startLoading();
-        currentPic.image = gt.albumData.images[currentPic.index - 1];
-        currentPic.index = currentPic.index - 1;
-        setMainPic("prev");
-      }
-    }
-   }
-
-   gt.scrollStripLeft = function(){
-      pixels_to_move = parseInt(gt.thumbStrip.css("left")) - (66 * 3);
-      maximum_pixels = (windowWidth / 2) - (66 * (gt.albumData.images.length - 1));
-      if(pixels_to_move < maximum_pixels){
-        pixels_to_move = maximum_pixels;
-      }
-      gt.thumbStrip.css("left",pixels_to_move + "px");
-   }
-
-    gt.scrollStripRight = function(){
-      pixels_to_move = parseInt(gt.thumbStrip.css("left")) + (66 * 3);
-      maximum_pixels = (windowWidth / 2);
-      if(pixels_to_move > maximum_pixels){
-        pixels_to_move = maximum_pixels;
-      }
-      gt.thumbStrip.css("left",pixels_to_move + "px");
-   }
-
-
-   gt.switchTheme = function(){
-     var themeWhiteKlass = "theme-white",
-          nightKlass = "fa fa-circle",
-          dayKlass = "fa fa-circle-o",
-          $body = $("body");
-
-      if (!gt.switchBtn.hasClass(themeWhiteKlass)) {
-        gt.switchBtn
-          .addClass(themeWhiteKlass)
-          .find("i")
-          .attr("class", dayKlass);
-
-        $body.addClass(themeWhiteKlass);
-
-      } else {
-        gt.switchBtn
-          .removeClass(themeWhiteKlass)
-          .find("i")
-          .attr("class", nightKlass);
-
-        $body.removeClass(themeWhiteKlass);
-
-      }
-   }
-
-   gt.toggleDescription = function(){
-    $(this).toggleClass("active");
-     gt.descriptionArea.toggleClass("active");
-   }
-
-   var startLoading = function(){
-    loadingProcess = 1;
-    mainPicLoading = 0;
-    nextPicLoading = 0;
-    prevPicLoading = 0;
-    gt.loader.show();
-    loadingInterval = setInterval(stopLoading, 300);
-
-   }
-
-   var stopLoading = function(){
-    if(mainPicLoading == 1 && nextPicLoading == 1 && prevPicLoading == 1){
-      clearInterval(loadingInterval);
-      setTimeout(function(){
-        loadingProcess = 0;
-        gt.loader.hide();
-      },100)
-    }
-   }
-
-  var createThumbStrip = function(){
-    if(!gt.isTheaterInitialized){
-      gt.thumbStrip.html("")
-      $.each(gt.albumData.images,function(index, image){
-        var li = $("<li class='gallery-item'></li>"),
-            a = $("<a href=''></a>"),
-            img = $("<img class='gallery-thumb' src='' alt='Image Thumb'>");
-          a.on("click",function(){ 
-            startLoading();
-            var old_index = currentPic.index;
-            currentPic.image = gt.albumData.images[index];
-            currentPic.index = index;
-            if(old_index > index){
-              setMainPic("prev",true);
-            }else if(old_index < index){
-              setMainPic("next",true);
+        windowHeight = $(window).height();
+        windowWidth = $(window).width();
+        var addButton = function() {
+            $('.theaterButton').remove();
+            if (!play_flag) {
+                $(button_left_string + button_play_string + button_right_string).insertAfter($('img.gal-active'));
+            } else {
+                $(button_left_string + button_stop_string + button_right_string).insertAfter($('img.gal-active'));
             }
+            if (!$(".gal-prev").length) {
+                $('#theaterPreviousButton').remove();
+            }
+            if (!$(".gal-next").length) {
+                $('#theaterNextButton').remove();
+            }
+
+            $('#theaterPreviousButton').click(function() {
+                previousPic();
+            });
+            $('#theaterNextButton').click(function() {
+                nextPic();
+            });
+            $('#theaterPlayButton').click(function() {
+                play_flag = true;
+                playtimeoutID = window.setInterval(function() {
+                    playallPic();
+                }, 3000)
+                window.onhashchange()
+            });
+            $('#theaterStopButton').click(function() {
+                play_flag = false;
+                window.onhashchange()
+                window.clearInterval(playtimeoutID)
+            });
+        }
+        window.onhashchange = locationHashChanged;
+        bindHandler();
+        if (window.location.hash != "" && window.location.hash != "#") {
+            var id = window.location.hash.split("#")[1];
+            createTheater("/xhr/galleries/theater/" + id);
+        }
+
+
+        addButton();
+
+        function locationHashChanged() {
+            addButton();
+        }
+
+    }
+
+    var bindHandler = function() {
+        // handler to close the theater
+        closeBtn.off('click').on("click", destroyTheater);
+
+        // handler to show theater
+        $("div[data-list=images] a").filter(":not(.preview)").off('click').on("click", function() {
+            createTheater($(this).attr("href"));
             return false;
-          })
-          
-          img.attr("src",image.file.thumb.url);
-          img.attr("alt",image.alt_title);
-          li.attr("data-index",index);
-          a.append(img);
-          li.append(a);
-          gt.thumbStrip.append(li);
-      })
-      setThumbNavs();
+        })
+
+        switchBtn.off('click').on("click", switchTheme);
+        descriptionToggle.off('click').on("click", toggleDescription)
+        stripPrevBtn.off('click').on("click", scrollStripRight);
+        stripNextBtn.off('click').on("click", scrollStripLeft);
+
+        if (Modernizr.touch) {
+            imageContainer.swipe({
+                swipe: function(event, direction, distance, duration, fingerCount) {
+                    if (direction == "left") {
+                        nextPic();
+                    } else if (direction == "right") {
+                        previousPic();
+                    }
+                }
+            })
+            thumbToggle.swipe({
+                swipe: function(event, direction, distance, duration, fingerCount) {
+                    if (direction == "up") {
+                        thumbStrip.parent().addClass("show");
+                        thumbToggle.addClass("up");
+                        thumbToggle.find("i").removeClass("fa-angle-double-up").addClass("fa-angle-double-down");
+                    } else if (direction == "down") {
+                        thumbStrip.parent().removeClass("show");
+                        thumbToggle.removeClass("up");
+                        thumbToggle.find("i").removeClass("fa-angle-double-down").addClass("fa-angle-double-up");
+                    }
+                }
+            })
+        }
+
+        //handler for window resize
+        $(window).resize(function() {
+            clearTimeout(resizing);
+            resizing = setTimeout(doneResizing, 1000);
+        })
     }
-    setMainPic();
-    if (!$('.theaterButton').length){
-      window.onhashchange()
+
+    var bindKeyHandlers = function() {
+        if (!Modernizr.touch) {
+            $(document.body).on("click", ".gal-active", nextPic);
+            $(document.body).on("click", ".gal-prev", previousPic);
+            $(document.body).on("click", ".gal-next", nextPic);
+            $(document).on("keyup", function(e) {
+                switch (e.keyCode) {
+                    case 39:
+                        nextPic();
+                        break;
+                    case 37:
+                        previousPic();
+                        break;
+                    case 27:
+                        destroyTheater();
+                        break;
+                }
+            })
+        }
     }
-  }
 
 
-  var setThumbNavs = function() {
-    var $thumbNav = gt.stage.find('.gallery-thumb-navs'),
-        $thumb = gt.thumbStrip.find('img'),
-        thumbs = $thumb.length,
-        thumbWidth = $thumb.eq(0).width(),
-        thumbGap = parseInt($thumb.closest('li').css('margin-right'), 10),
-        widthSum = (thumbWidth + thumbGap) * thumbs,
-        margin = widthSum * 0.1,
-        totalWidth = widthSum + margin;
+    var doneResizing = function() {
+        windowHeight = $(window).height();
+        windowWidth = $(window).width();
+        setThumbNavs();
+    }
 
-    if (windowWidth < totalWidth) {
-      $thumbNav.addClass('show');
-    }else{
-      $thumbNav.removeClass('show');
+    var unBindKeyHandlers = function() {
+        $(document).unbind("keyup");
     }
-  };
-  function one_load(img){
-    if (img[0].complete){
-      setTimeout(loaded(img),100)
-    }else{
-      setTimeout(one_load,20)
-    }
-  }
-  function loaded(img){
-    calculateHeight(img);
-    mainPicLoading = 1;
-    img.fadeIn(100);
-  }
-  window.setMainPic = function(direction,selectedFromStrip){
-    var img = null;
-    $('div.gallery-show-original a').eq(0).attr('href',currentPic.image.url)
-    if(direction == null){
-      img = $("<img class='gallery-image gal-active'>");
-      img.hide();
-      img.attr("src", currentPic.image.file.theater.url);
-      gt.imageContainer.append(img);
-      img.one("load", function(){
-        one_load(img)
-      })
-      gt.isTheaterInitialized = true;
-    }else{
-      img =  gt.imageContainer.find(".gal-active");
-      if(selectedFromStrip){
-        gt.imageContainer.find(".gal-" + direction).attr("src",currentPic.image.file.theater.url);  
-      }
-      if(direction == "next"){
-        gt.imageContainer.find(".gal-prev").remove();
-        img.removeClass("gal-active").addClass("gal-prev gal-inactive temp");
-        gt.imageContainer.find(".gal-next").removeClass("gal-inactive gal-next").addClass("gal-active");
-        gt.thumbStrip.css("left",(parseInt(gt.thumbStrip.css("left")) - 66) + "px");
-      }else if(direction == "prev"){
-        gt.imageContainer.find(".gal-next").remove();
-        img.removeClass("gal-active").addClass("gal-next gal-inactive temp");
-        gt.imageContainer.find(".gal-prev").removeClass("gal-inactive gal-prev").addClass("gal-active");
-        gt.thumbStrip.css("left",(parseInt(gt.thumbStrip.css("left")) + 66) + "px");
-      }
-      mainPicLoading = 1;
-    }
-    gt.descriptionArea.html("<p>" + currentPic.image.description + "</p>");
-    if(currentPic.image.description == null){
-      gt.descriptionArea.addClass("hide");
-    }else{
-      gt.descriptionArea.removeClass("hide");
-    }
-    if (direction!=null){
-      calculateHeight(gt.imageContainer.find(".gal-active"));
-    }
-    gt.thumbStrip.find("li.active").removeClass("active");
-    gt.thumbStrip.find("li[data-index=" + currentPic.index + "]").addClass("active");
 
-    setStripToCenter();
-    setNextPic();
-    setPrevPic();
-    changeUrl();
-  }
-
-  var calculateHeight = function(img){
-    var h = 0,
-        w = 0,
-        new_width = 0;
-    if(!Modernizr.touch){
-      if(typeof currentPic.image.height == "undefined"){
-        h = img.height();
-        currentPic.image.height = h;
-        w = img.width();
-        currentPic.image.width = w;
-      }else{
-        h = currentPic.image.height;
-        w = currentPic.image.width;
-      }
-    }else{
-      h = img.height();
-      w = img.width();
+    var destroyTheater = function() {
+        parent_divs.eq(parent_divs.length - 1).css('z-index', parent_div_z_index)
+        stage.hide();
+        $("body").removeClass("gallery-mode-on");
+        imageContainer.empty()
+        unBindKeyHandlers();
+        window.location.hash = "";
     }
-    if(h > (windowHeight - 150)){
-      new_width = Math.round((windowHeight - 100) * w / h);
-      new_width = (new_width / windowWidth) * 100;
-      img.width(new_width + "%");
-    }else{
-      if(windowWidth < 770){
-        img.width("90%");
-      }else{
-        img.width("65%");
-      }
+
+    var createTheater = function(link) {
+        $('.gallery-img-desc').removeClass('active');
+        bindKeyHandlers();
+        stage.show();
+        $("body").addClass("gallery-mode-on");
+        if (!isTheaterInitialized) {
+            $.ajax({
+                url: link,
+                dataType: "json",
+                type: "get",
+                async: false
+            }).done(function(data) {
+                albumData = data.data;
+                var cp = albumData.images.filter(function(x) {
+                    return x._id == albumData.image
+                })[0];
+                currentPic = {
+                    "image": cp,
+                    "index": albumData.images.indexOf(cp)
+                };
+                createThumbStrip();
+            })
+            isTheaterInitialized = false;
+        } else {
+            var id = link.split("/")[4],
+                cp = albumData.images.filter(function(x) {
+                    return x._id == id
+                })[0];
+            currentPic = {
+                "image": cp,
+                "index": albumData.images.indexOf(cp)
+            };
+            createThumbStrip();
+        }
     }
-    if (typeof set_gallery_height != 'undefined'){
-      set_gallery_height()
+
+    var hasNextImage = function() {
+        return (currentPic.index + 1) <= (albumData.images.length - 1);
     }
-  }
 
-  var changeUrl = function(){
-    window.location.hash = currentPic.image._id
-  }
-
-  var setStripToCenter = function(){
-    left = (windowWidth / 2) - (66 * currentPic.index);
-    gt.thumbStrip.css("left",left + "px");
-  }
-
-  var setNextPic = function(){
-    gt.imageContainer.find(".gal-next.temp").remove()
-    if(gt.hasNextImage()) {
-      var obj = gt.albumData.images[currentPic.index + 1],
-          nextImg = $("<img class='gallery-image gal-next gal-inactive'>");
-      nextImg.attr("src",obj.file.theater.url);
-      nextImg.hide();
-      gt.imageContainer.append(nextImg);
-      nextImg.on("load",function(){
-        calculateHeight(nextImg);
-        nextPicLoading = 1;
-        nextImg.fadeIn(100);
-      })
-    }else{
-      nextPicLoading = 1;
+    var hasPreviousImage = function() {
+        return (currentPic.index > 0);
     }
-  }
 
-  var setPrevPic = function(){
-    gt.imageContainer.find(".gal-prev.temp").remove()
-    if(gt.hasPreviousImage()) {
-      var obj = gt.albumData.images[currentPic.index - 1],
-          prevImg = $("<img class='gallery-image gal-prev gal-inactive'>");
-      prevImg.attr("src",obj.file.theater.url);
-      prevImg.hide();
-      gt.imageContainer.prepend(prevImg);
-      prevImg.on("load",function(){
-        calculateHeight(prevImg);
-        prevPicLoading = 1;
-        prevImg.fadeIn(100);
-      })
-    }else{
-      prevPicLoading = 1;
+    var nextPic = function() {
+        if (loadingProcess == 0) {
+            if (hasNextImage()) {
+                startLoading();
+                currentPic.image = albumData.images[currentPic.index + 1];
+                currentPic.index = currentPic.index + 1;
+                setMainPic("next");
+            }
+        }
+    }
+    var playallPic = function() {
+        if (loadingProcess == 0) {
+            mainPicLoading = 1;
+            nextPicLoading = 1;
+            prevPicLoading = 1;
+            if (hasNextImage()) {
+                currentPic.image = albumData.images[currentPic.index + 1];
+                currentPic.index = currentPic.index + 1;
+                setMainPic("next");
+            } else {
+                currentPic.image = albumData.images[0];
+                currentPic.index = 0;
+                setMainPic();
+                isTheaterInitialized = false;
+                setTimeout(function() {
+                    loadingProcess = 0;
+                    nextPicLoading = 0;
+                    $('.theaterButton').remove()
+                    $("img.gallery-image.gal-prev.gal-inactive").remove();
+                    img = $("img.gallery-image.gal-active");
+                    img.eq(0).remove();
+                    window.onhashchange()
+                }, 100)
+            }
+        }
     }
-  }
 
-  var l = function(x){
-    console.log(x)
-  }
 
-  $(document).ready(function(){
-    initialize();
-  })
+    var previousPic = function() {
+        if (loadingProcess == 0) {
+            if (hasPreviousImage()) {
+                startLoading();
+                currentPic.image = albumData.images[currentPic.index - 1];
+                currentPic.index = currentPic.index - 1;
+                setMainPic("prev");
+            }
+        }
+    }
+
+    var scrollStripLeft = function() {
+        pixels_to_move = parseInt(thumbStrip.css("left")) - (66 * 3);
+        maximum_pixels = (windowWidth / 2) - (66 * (albumData.images.length - 1));
+        if (pixels_to_move < maximum_pixels) {
+            pixels_to_move = maximum_pixels;
+        }
+        thumbStrip.css("left", pixels_to_move + "px");
+    }
+
+    var scrollStripRight = function() {
+        pixels_to_move = parseInt(thumbStrip.css("left")) + (66 * 3);
+        maximum_pixels = (windowWidth / 2);
+        if (pixels_to_move > maximum_pixels) {
+            pixels_to_move = maximum_pixels;
+        }
+        thumbStrip.css("left", pixels_to_move + "px");
+    }
+
+
+    var switchTheme = function() {
+        var themeWhiteKlass = "theme-white",
+            nightKlass = "fa fa-circle",
+            dayKlass = "fa fa-circle-o",
+            $body = $("body");
+
+        if (!switchBtn.hasClass(themeWhiteKlass)) {
+            switchBtn
+                .addClass(themeWhiteKlass)
+                .find("i")
+                .attr("class", dayKlass);
+
+            $body.addClass(themeWhiteKlass);
+
+        } else {
+            switchBtn
+                .removeClass(themeWhiteKlass)
+                .find("i")
+                .attr("class", nightKlass);
+
+            $body.removeClass(themeWhiteKlass);
+
+        }
+    }
+
+    var toggleDescription = function() {
+        $(this).toggleClass("active");
+        descriptionArea.toggleClass("active");
+    }
+
+    var startLoading = function() {
+        loadingProcess = 1;
+        mainPicLoading = 0;
+        nextPicLoading = 0;
+        prevPicLoading = 0;
+        loader.show();
+        loadingInterval = setInterval(stopLoading, 300);
+
+    }
+
+    var stopLoading = function() {
+        if (mainPicLoading == 1 && nextPicLoading == 1 && prevPicLoading == 1) {
+            clearInterval(loadingInterval);
+            setTimeout(function() {
+                loadingProcess = 0;
+                loader.hide();
+            }, 100)
+        }
+    }
+
+    var createThumbStrip = function() {
+        if (!isTheaterInitialized) {
+            thumbStrip.html("")
+            $.each(albumData.images, function(index, image) {
+                var li = $("<li class='gallery-item'></li>"),
+                    a = $("<a href=''></a>"),
+                    img = $("<img class='gallery-thumb' src='' alt='Image Thumb'>");
+                a.on("click", function() {
+                    startLoading();
+                    var old_index = currentPic.index;
+                    currentPic.image = albumData.images[index];
+                    currentPic.index = index;
+                    if (old_index > index) {
+                        setMainPic("prev", true);
+                    } else if (old_index < index) {
+                        setMainPic("next", true);
+                    }
+                    return false;
+                })
+
+                img.attr("src", image.file.thumb.url);
+                img.attr("alt", image.alt_title);
+                li.attr("data-index", index);
+                a.append(img);
+                li.append(a);
+                thumbStrip.append(li);
+            })
+            setThumbNavs();
+        }
+        setMainPic();
+        if (!$('.theaterButton').length) {
+            window.onhashchange()
+        }
+    }
+
+
+    var setThumbNavs = function() {
+        var $thumbNav = stage.find('.gallery-thumb-navs'),
+            $thumb = thumbStrip.find('img'),
+            thumbs = $thumb.length,
+            thumbWidth = $thumb.eq(0).width(),
+            thumbGap = parseInt($thumb.closest('li').css('margin-right'), 10),
+            widthSum = (thumbWidth + thumbGap) * thumbs,
+            margin = widthSum * 0.1,
+            totalWidth = widthSum + margin;
+
+        if (windowWidth < totalWidth) {
+            $thumbNav.addClass('show');
+        } else {
+            $thumbNav.removeClass('show');
+        }
+    };
+
+    function one_load(img) {
+        if (img[0].complete) {
+            setTimeout(loaded(img), 100)
+        } else {
+            setTimeout(one_load, 20)
+        }
+    }
+
+    function loaded(img) {
+        calculateHeight(img);
+        mainPicLoading = 1;
+        img.fadeIn(100);
+    }
+    window.setMainPic = function(direction, selectedFromStrip) {
+        var img = null;
+        $('div.gallery-show-original a').eq(0).attr('href', currentPic.image.url)
+        if (direction == null) {
+            img = $("<img class='gallery-image gal-active'>");
+            img.hide();
+            img.attr("src", currentPic.image.file.theater.url);
+            imageContainer.append(img);
+            img.one("load", function() {
+                one_load(img)
+            })
+            isTheaterInitialized = true;
+        } else {
+            img = imageContainer.find(".gal-active");
+            if (selectedFromStrip) {
+                imageContainer.find(".gal-" + direction).attr("src", currentPic.image.file.theater.url);
+            }
+            if (direction == "next") {
+                imageContainer.find(".gal-prev").remove();
+                img.removeClass("gal-active").addClass("gal-prev gal-inactive temp");
+                imageContainer.find(".gal-next").removeClass("gal-inactive gal-next").addClass("gal-active");
+                thumbStrip.css("left", (parseInt(thumbStrip.css("left")) - 66) + "px");
+            } else if (direction == "prev") {
+                imageContainer.find(".gal-next").remove();
+                img.removeClass("gal-active").addClass("gal-next gal-inactive temp");
+                imageContainer.find(".gal-prev").removeClass("gal-inactive gal-prev").addClass("gal-active");
+                thumbStrip.css("left", (parseInt(thumbStrip.css("left")) + 66) + "px");
+            }
+            mainPicLoading = 1;
+        }
+        descriptionArea.html("<p>" + currentPic.image.description + "</p>");
+        if (currentPic.image.description == null) {
+            descriptionArea.addClass("hide");
+        } else {
+            descriptionArea.removeClass("hide");
+        }
+        if (direction != null) {
+            calculateHeight(imageContainer.find(".gal-active"));
+        }
+        thumbStrip.find("li.active").removeClass("active");
+        thumbStrip.find("li[data-index=" + currentPic.index + "]").addClass("active");
+
+        setStripToCenter();
+        setNextPic();
+        setPrevPic();
+        changeUrl();
+    }
+
+    var calculateHeight = function(img) {
+        var h = 0,
+            w = 0,
+            new_width = 0;
+        if (!Modernizr.touch) {
+            if (typeof currentPic.image.height == "undefined") {
+                h = img.height();
+                currentPic.image.height = h;
+                w = img.width();
+                currentPic.image.width = w;
+            } else {
+                h = currentPic.image.height;
+                w = currentPic.image.width;
+            }
+        } else {
+            h = img.height();
+            w = img.width();
+        }
+        if (h > (windowHeight - 150)) {
+            new_width = Math.round((windowHeight - 100) * w / h);
+            new_width = (new_width / windowWidth) * 100;
+            img.width(new_width + "%");
+        } else {
+            if (windowWidth < 770) {
+                img.width("90%");
+            } else {
+                img.width("65%");
+            }
+        }
+        if (typeof set_gallery_height != 'undefined') {
+            set_gallery_height()
+        }
+    }
+
+    var changeUrl = function() {
+        window.location.hash = currentPic.image._id
+    }
+
+    var setStripToCenter = function() {
+        left = (windowWidth / 2) - (66 * currentPic.index);
+        thumbStrip.css("left", left + "px");
+    }
+
+    var setNextPic = function() {
+        imageContainer.find(".gal-next.temp").remove()
+        if (hasNextImage()) {
+            var obj = albumData.images[currentPic.index + 1],
+                nextImg = $("<img class='gallery-image gal-next gal-inactive'>");
+            nextImg.attr("src", obj.file.theater.url);
+            nextImg.hide();
+            imageContainer.append(nextImg);
+            nextImg.on("load", function() {
+                calculateHeight(nextImg);
+                nextPicLoading = 1;
+                nextImg.fadeIn(100);
+            })
+        } else {
+            nextPicLoading = 1;
+        }
+    }
+
+    var setPrevPic = function() {
+        imageContainer.find(".gal-prev.temp").remove()
+        if (hasPreviousImage()) {
+            var obj = albumData.images[currentPic.index - 1],
+                prevImg = $("<img class='gallery-image gal-prev gal-inactive'>");
+            prevImg.attr("src", obj.file.theater.url);
+            prevImg.hide();
+            imageContainer.prepend(prevImg);
+            prevImg.on("load", function() {
+                calculateHeight(prevImg);
+                prevPicLoading = 1;
+                prevImg.fadeIn(100);
+            })
+        } else {
+            prevPicLoading = 1;
+        }
+    }
+
+    var l = function(x) {
+        console.log(x)
+    }
+
+    $(document).ready(function() {
+        initialize();
+    })
 }
 
 // gallery-image gal-prev gal-inactive
\ No newline at end of file