new theater for gallery..

app/assets/javascripts/jquery.touchSwipe.min.js

@@ -0,0 +1 @@
+(function(a){if(typeof define==="function"&&define.amd&&define.amd.jQuery){define(["jquery"],a)}else{a(jQuery)}}(function(f){var y="1.6.9",p="left",o="right",e="up",x="down",c="in",A="out",m="none",s="auto",l="swipe",t="pinch",B="tap",j="doubletap",b="longtap",z="hold",E="horizontal",u="vertical",i="all",r=10,g="start",k="move",h="end",q="cancel",a="ontouchstart" in window,v=window.navigator.msPointerEnabled&&!window.navigator.pointerEnabled,d=window.navigator.pointerEnabled||window.navigator.msPointerEnabled,C="TouchSwipe";var n={fingers:1,threshold:75,cancelThreshold:null,pinchThreshold:20,maxTimeThreshold:null,fingerReleaseThreshold:250,longTapThreshold:500,doubleTapThreshold:200,swipe:null,swipeLeft:null,swipeRight:null,swipeUp:null,swipeDown:null,swipeStatus:null,pinchIn:null,pinchOut:null,pinchStatus:null,click:null,tap:null,doubleTap:null,longTap:null,hold:null,triggerOnTouchEnd:true,triggerOnTouchLeave:false,allowPageScroll:"auto",fallbackToMouseEvents:true,excludedElements:"label, button, input, select, textarea, a, .noSwipe",preventDefaultEvents:true};f.fn.swipe=function(H){var G=f(this),F=G.data(C);if(F&&typeof H==="string"){if(F[H]){return F[H].apply(this,Array.prototype.slice.call(arguments,1))}else{f.error("Method "+H+" does not exist on jQuery.swipe")}}else{if(!F&&(typeof H==="object"||!H)){return w.apply(this,arguments)}}return G};f.fn.swipe.version=y;f.fn.swipe.defaults=n;f.fn.swipe.phases={PHASE_START:g,PHASE_MOVE:k,PHASE_END:h,PHASE_CANCEL:q};f.fn.swipe.directions={LEFT:p,RIGHT:o,UP:e,DOWN:x,IN:c,OUT:A};f.fn.swipe.pageScroll={NONE:m,HORIZONTAL:E,VERTICAL:u,AUTO:s};f.fn.swipe.fingers={ONE:1,TWO:2,THREE:3,ALL:i};function w(F){if(F&&(F.allowPageScroll===undefined&&(F.swipe!==undefined||F.swipeStatus!==undefined))){F.allowPageScroll=m}if(F.click!==undefined&&F.tap===undefined){F.tap=F.click}if(!F){F={}}F=f.extend({},f.fn.swipe.defaults,F);return this.each(function(){var H=f(this);var G=H.data(C);if(!G){G=new D(this,F);H.data(C,G)}})}function D(a5,aw){var aA=(a||d||!aw.fallbackToMouseEvents),K=aA?(d?(v?"MSPointerDown":"pointerdown"):"touchstart"):"mousedown",az=aA?(d?(v?"MSPointerMove":"pointermove"):"touchmove"):"mousemove",V=aA?(d?(v?"MSPointerUp":"pointerup"):"touchend"):"mouseup",T=aA?null:"mouseleave",aE=(d?(v?"MSPointerCancel":"pointercancel"):"touchcancel");var ah=0,aQ=null,ac=0,a2=0,a0=0,H=1,ar=0,aK=0,N=null;var aS=f(a5);var aa="start";var X=0;var aR=null;var U=0,a3=0,a6=0,ae=0,O=0;var aX=null,ag=null;try{aS.bind(K,aO);aS.bind(aE,ba)}catch(al){f.error("events not supported "+K+","+aE+" on jQuery.swipe")}this.enable=function(){aS.bind(K,aO);aS.bind(aE,ba);return aS};this.disable=function(){aL();return aS};this.destroy=function(){aL();aS.data(C,null);aS=null};this.option=function(bd,bc){if(aw[bd]!==undefined){if(bc===undefined){return aw[bd]}else{aw[bd]=bc}}else{f.error("Option "+bd+" does not exist on jQuery.swipe.options")}return null};function aO(be){if(aC()){return}if(f(be.target).closest(aw.excludedElements,aS).length>0){return}var bf=be.originalEvent?be.originalEvent:be;var bd,bg=bf.touches,bc=bg?bg[0]:bf;aa=g;if(bg){X=bg.length}else{be.preventDefault()}ah=0;aQ=null;aK=null;ac=0;a2=0;a0=0;H=1;ar=0;aR=ak();N=ab();S();if(!bg||(X===aw.fingers||aw.fingers===i)||aY()){aj(0,bc);U=au();if(X==2){aj(1,bg[1]);a2=a0=av(aR[0].start,aR[1].start)}if(aw.swipeStatus||aw.pinchStatus){bd=P(bf,aa)}}else{bd=false}if(bd===false){aa=q;P(bf,aa);return bd}else{if(aw.hold){ag=setTimeout(f.proxy(function(){aS.trigger("hold",[bf.target]);if(aw.hold){bd=aw.hold.call(aS,bf,bf.target)}},this),aw.longTapThreshold)}ap(true)}return null}function a4(bf){var bi=bf.originalEvent?bf.originalEvent:bf;if(aa===h||aa===q||an()){return}var be,bj=bi.touches,bd=bj?bj[0]:bi;var bg=aI(bd);a3=au();if(bj){X=bj.length}if(aw.hold){clearTimeout(ag)}aa=k;if(X==2){if(a2==0){aj(1,bj[1]);a2=a0=av(aR[0].start,aR[1].start)}else{aI(bj[1]);a0=av(aR[0].end,aR[1].end);aK=at(aR[0].end,aR[1].end)}H=a8(a2,a0);ar=Math.abs(a2-a0)}if((X===aw.fingers||aw.fingers===i)||!bj||aY()){aQ=aM(bg.start,bg.end);am(bf,aQ);ah=aT(bg.start,bg.end);ac=aN();aJ(aQ,ah);if(aw.swipeStatus||aw.pinchStatus){be=P(bi,aa)}if(!aw.triggerOnTouchEnd||aw.triggerOnTouchLeave){var bc=true;if(aw.triggerOnTouchLeave){var bh=aZ(this);bc=F(bg.end,bh)}if(!aw.triggerOnTouchEnd&&bc){aa=aD(k)}else{if(aw.triggerOnTouchLeave&&!bc){aa=aD(h)}}if(aa==q||aa==h){P(bi,aa)}}}else{aa=q;P(bi,aa)}if(be===false){aa=q;P(bi,aa)}}function M(bc){var bd=bc.originalEvent?bc.originalEvent:bc,be=bd.touches;if(be){if(be.length){G();return true}}if(an()){X=ae}a3=au();ac=aN();if(bb()||!ao()){aa=q;P(bd,aa)}else{if(aw.triggerOnTouchEnd||(aw.triggerOnTouchEnd==false&&aa===k)){bc.preventDefault();aa=h;P(bd,aa)}else{if(!aw.triggerOnTouchEnd&&a7()){aa=h;aG(bd,aa,B)}else{if(aa===k){aa=q;P(bd,aa)}}}}ap(false);return null}function ba(){X=0;a3=0;U=0;a2=0;a0=0;H=1;S();ap(false)}function L(bc){var bd=bc.originalEvent?bc.originalEvent:bc;if(aw.triggerOnTouchLeave){aa=aD(h);P(bd,aa)}}function aL(){aS.unbind(K,aO);aS.unbindLine truncated

app/assets/javascripts/theater.js

@@ -0,0 +1,428 @@
+var GalleryTheater = function(){
+  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.closeBtn = null;
+      gt.imageContainer = null;
+      gt.albumData = {};
+      gt.loader = null;
+      gt.thumbStrip = null;
+      gt.isTheaterInitialized = false;
+
+  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");
+    windowScreenThresholdForTouch = windowWidth / 3;
+    startLoading();
+    windowHeight = $(window).height();
+    windowWidth = $(window).width();
+    bindHandler();
+    if(window.location.hash != "" && window.location.hash != "#"){
+      var id = window.location.hash.split("#")[1];
+      gt.createTheater("/xhr/galleries/theater/" + id);
+    }
+  }
+
+  var bindHandler = function(){
+    // handler to close the theater
+    gt.closeBtn.on("click",gt.destroyTheater);
+
+    // handler to show theater
+    $("div[data-list=images] a").on("click",function(){
+      gt.createTheater($(this).attr("href"));
+      return false;
+    })
+
+     gt.switchBtn.on("click",gt.switchTheme);
+     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){
+      $(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(){
+    gt.stage.hide();
+    $("body").removeClass("gallery-mode-on");
+    gt.imageContainer.empty()
+    unBindKeyHandlers();
+    window.location.hash = "";
+  }
+
+  gt.createTheater = function(link){
+    gt.stage.show();
+    $("body").addClass("gallery-mode-on");
+    bindKeyHandlers();
+    if(!gt.isTheaterInitialized){
+      $.ajax({
+        url : link,
+        dataType : "json",
+        type : "get"
+      }).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();
+    }
+  }
+
+  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()){
+        startLoading();
+        currentPic.image = gt.albumData.images[currentPic.index + 1];
+        currentPic.index = currentPic.index + 1;
+        setMainPic("next");
+      }
+    }
+  }
+
+
+
+   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);
+
+      }
+   }
+
+   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){
+      $.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);
+            }
+            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();
+    }
+    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;
+
+    if (windowWidth < totalWidth) {
+      $thumbNav.addClass('show');
+    }else{
+      $thumbNav.removeClass('show');
+    }
+  };
+
+  var setMainPic = function(direction,selectedFromStrip){
+    var img = null;
+    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(){
+        calculateHeight(img);
+        mainPicLoading = 1;
+        img.fadeIn(100);
+      })
+      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;
+    }
+    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();
+    }
+    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 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 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 l = function(x){
+    console.log(x)
+  }
+
+  $(document).ready(function(){
+    initialize();
+  })
+}
+
+// gallery-image gal-prev gal-inactive

app/assets/javascripts/theater_bak.js

@@ -0,0 +1,261 @@
+var GalleryTheater = function(){
+  var gt = this,
+      currentPic = {},
+      windowHeight = 0,
+      windowWidth = 0;
+      gt.stage = null;
+      gt.closeBtn = null;
+      gt.mainStageImage = null;
+      gt.prevStageImage = null;
+      gt.nextStageImage = null;
+      gt.albumData = {};
+      gt.thumbStrip = null;
+      gt.isTheaterInitialized = false;
+
+  var initialize = function(){
+    gt.stage = $("#gallery-theater-stage");
+    gt.closeBtn = gt.stage.find(".gallery-close");
+    gt.switchBtn = gt.stage.find(".gallery-theme-switch");
+    gt.mainStageImage = gt.stage.find(".gal-active");
+    gt.prevStageImage = gt.stage.find(".gal-prev");
+    gt.nextStageImage = gt.stage.find(".gal-next");
+    gt.thumbStrip = gt.stage.find(".gallery-thumb-wrap");
+    windowHeight = $(window).height();
+    windowWidth = $(window).width();
+    bindHandler();
+    if(window.location.hash != "" && window.location.hash != "#"){
+      var id = window.location.hash.split("#")[1];
+      gt.createTheater("/xhr/galleries/theater/" + id);
+    }
+  }
+
+  var bindHandler = function(){
+    // handler to close the theater
+    gt.closeBtn.on("click",function(){
+      gt.destroyTheater();
+    })
+
+    // handler to show theater
+    $("div[data-list=images] a").on("click",function(){
+      gt.createTheater($(this).attr("href"));
+      return false;
+    })
+
+    // handler to show next image
+     gt.nextStageImage.on("click",function(){
+      if($(this).attr("src") != "#"){
+        gt.nextPic();
+      }
+     })
+     // handler to show prev image
+     gt.prevStageImage.on("click",function(){
+      if($(this).attr("src") != "#"){
+        gt.previousPic();
+      }
+     })
+
+     // handler to go to next image on center image click
+     gt.mainStageImage.on("click",gt.nextPic);
+
+     gt.switchBtn.on("click", function() {
+      var themeWhiteKlass = "theme-white",
+          nightKlass = "fa fa-circle",
+          dayKlass = "fa fa-circle-o",
+          $body = $("body");
+
+      if (!$(this).hasClass(themeWhiteKlass)) {
+        $(this)
+          .addClass(themeWhiteKlass)
+          .find("i")
+          .attr("class", dayKlass);
+
+        $body.addClass(themeWhiteKlass);
+
+      } else {
+        $(this)
+          .removeClass(themeWhiteKlass)
+          .find("i")
+          .attr("class", nightKlass);
+
+        $body.removeClass(themeWhiteKlass);
+
+      }
+
+      });
+
+     //handler for window resize
+     $(window).resize(function(){
+       windowHeight = $(window).height();
+       windowWidth = $(window).width();
+     })
+  }
+
+  var bindKeyHandlers = function(){
+    $(document).on("keyup",function(e){
+      switch(e.keyCode){
+        case 39:
+          gt.nextPic();
+          break;
+        case 37:
+          gt.previousPic();
+          break;
+        case 27:
+          gt.destroyTheater();
+        break;
+      }
+     })
+  }
+
+  var unBindKeyHandlers = function(){
+    $(document).unbind("keypress");
+  }
+
+  gt.destroyTheater = function(){
+    gt.stage.hide();
+    $("body").removeClass("gallery-mode-on");
+    unBindKeyHandlers();
+    window.location.hash = "";
+  }
+
+  gt.createTheater = function(link){
+    gt.stage.show();
+    $("body").addClass("gallery-mode-on");
+    bindKeyHandlers();
+    if(!gt.isTheaterInitialized){
+      $.ajax({
+        url : link,
+        dataType : "json",
+        type : "get"
+      }).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();
+    }
+  }
+
+  gt.nextPic = function(){
+    if((currentPic.index + 1) <= (gt.albumData.images.length - 1)){
+      currentPic.image = gt.albumData.images[currentPic.index + 1];
+      currentPic.index = currentPic.index + 1;
+      setMainPic();
+    }
+  }
+
+   gt.previousPic = function(){
+    if(currentPic.index > 0) {
+      currentPic.image = gt.albumData.images[currentPic.index - 1];
+      currentPic.index = currentPic.index - 1;
+      setMainPic();
+    }
+   }
+
+  var createThumbStrip = function(){
+    if(!gt.isTheaterInitialized){
+      $.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(){ 
+            currentPic.image = gt.albumData.images[index];
+            currentPic.index = index;
+            setMainPic();
+            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);
+      })
+      gt.isTheaterInitialized = true;
+    }
+    setMainPic();
+  }
+
+  var setMainPic = function(){
+    var obj = currentPic.image;
+    gt.mainStageImage.fadeOut(100,function(){
+      gt.mainStageImage.attr("src",obj.file.theater.url);
+      gt.mainStageImage.attr("alt",obj.alt_title);
+      gt.mainStageImage.one("load",function(){
+        var h = 0,
+            w = 0,
+            new_width = 0;
+        if(typeof currentPic.image.height == "undefined"){
+          h = gt.mainStageImage.height();
+          currentPic.image.height = h;
+          w = gt.mainStageImage.width();
+          currentPic.image.width = w;
+        }else{
+          h = currentPic.image.height;
+          w = currentPic.image.width;
+        }
+        if(h > (windowHeight - 100)){
+          new_width = Math.round((windowHeight - 100) * w / h);
+          new_width = (new_width / windowWidth) * 100;
+          gt.mainStageImage.width(new_width + "%");
+        }else{
+          if(windowWidth < 770){
+           gt.mainStageImage.width("90%");
+          }else{
+            gt.mainStageImage.width("65%");
+          }
+        }
+        gt.mainStageImage.fadeIn(100);
+      })
+    });
+    gt.thumbStrip.find("li.active").removeClass("active");
+    gt.thumbStrip.find("li[data-index=" + currentPic.index + "]").addClass("active");
+    changeUrl();
+    setNextPic();
+    setPrevPic();
+  }
+
+  var changeUrl = function(){
+    window.location.hash = currentPic.image._id
+  }
+
+  var setNextPic = function(){
+    gt.nextStageImage.attr("src","#");
+    if((currentPic.index + 1) <= (gt.albumData.images.length - 1)) {
+      gt.nextStageImage.hide();
+      var obj = gt.albumData.images[currentPic.index + 1];
+      gt.nextStageImage.attr("src",obj.file.theater.url);
+      gt.nextStageImage.on("load",function(){
+        gt.nextStageImage.show();
+      });
+    }else{
+      gt.nextStageImage.hide();
+    }
+  }
+
+  var setPrevPic = function(){
+    gt.prevStageImage.attr("src","#");
+    if(currentPic.index > 0) {
+      gt.prevStageImage.hide();
+      var obj = gt.albumData.images[currentPic.index - 1];
+      gt.prevStageImage.attr("src",obj.file.theater.url);
+      gt.prevStageImage.on("load",function(){
+        gt.prevStageImage.show();
+      });
+    }else{
+      gt.prevStageImage.hide();
+    }
+  }
+
+  var l = function(x){
+    console.log(x)
+  }
+
+  $(document).ready(function(){
+    initialize();
+  })
+}