gallery/app/assets/javascripts/theater.js

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.descriptionToggle = null;
      gt.closeBtn = null;
      gt.imageContainer = null;
      gt.albumData = {};
      gt.loader = null;
      gt.thumbStrip = null;
      gt.descriptionArea = null;
      gt.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();
    bindHandler();
    if(window.location.hash != "" && window.location.hash != "#"){
      var id = window.location.hash.split("#")[1];
      gt.createTheater("/xhr/galleries/theater/" + id);
    }
    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)
      });
    }

    addButton();
    function locationHashChanged() {
      addButton();
    }

    window.onhashchange = locationHashChanged;

  }

  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.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){
      $(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.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){
      $.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();
    if (!$('.theaterButton').length){
      window.onhashchange()
    }
  }


  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;
    $('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(){
        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;
    }
    gt.descriptionArea.html("<p>" + currentPic.image.description + "</p>");
    if(currentPic.image.description == null){
      gt.descriptionArea.addClass("hide");
    }else{
      gt.descriptionArea.removeClass("hide");
    }
    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