gallery/app/assets/javascripts/theater.js

$('.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').eq(0).parent().css('width', '100%');
    }
})
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 set_margin = function () {
        if ($('#orbit-bar').height()>0){ //for show page
            $('#gallery-theater-stage>.gallery').css('margin-top','2.4em')
        }else{
            $('#gallery-theater-stage>.gallery').css('margin-top','')
        }
    }
    var initialize = function() {
        set_margin();
        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();
        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;
        })

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

    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 doneResizing = function() {
        windowHeight = $(window).height();
        windowWidth = $(window).width();
        setThumbNavs();
    }

    var unBindKeyHandlers = function() {
        $(document).unbind("keyup");
    }

    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 = "";
    }

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

    var hasNextImage = function() {
        return (currentPic.index + 1) <= (albumData.images.length - 1);
    }

    var hasPreviousImage = function() {
        return (currentPic.index > 0);
    }

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


    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);
                    }else{
                        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);
                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)
        img = imageContainer.find(".gal-active");
        if (direction == null) {
            if (img.length==0){                
                img = $("<img class='gallery-image gal-active'>");
                img.hide();
                imageContainer.append(img);
                img.one("load", function() {
                    one_load(img)
                })
            }
            img.attr("src", currentPic.image.file.theater.url);
            img.attr("alt", currentPic.image.alt_title);
            isTheaterInitialized = true;
        } else {
            if (selectedFromStrip) {
                img.attr("src", currentPic.image.file.theater.url);
                img.attr("alt", currentPic.image.alt_title);
            }else{
                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.attr("alt", obj.alt_title);
            nextImg.hide();
            imageContainer.append(nextImg);
            nextImg.on("load", function() {
                calculateHeight(nextImg);
                nextPicLoading = 1;
                nextImg.fadeIn(100);
            })
        } else {
            nextPicLoading = 1;
            $("img.gallery-image.gal-next.gal-inactive").remove();
        }
    }

    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.attr("alt", obj.alt_title);
            prevImg.hide();
            imageContainer.prepend(prevImg);
            prevImg.on("load", function() {
                calculateHeight(prevImg);
                prevPicLoading = 1;
                prevImg.fadeIn(100);
            })
        } else {
            prevPicLoading = 1;
            $("img.gallery-image.gal-prev.gal-inactive").remove();
        }
    }

    var l = function(x) {
        console.log(x)
    }

    $(document).ready(function() {
        initialize();
    });
    $(window).load(function() {
        set_margin();
    });
}

// gallery-image gal-prev gal-inactive