gallery/app/assets/javascripts/theater_bak.js

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();
  })
}