/**
* @author balazs.suhajda
*/

var valtech = valtech || {};

valtech.gallery = (function () {

    var init = function () {

        video.setup();

        masonry.setup();

        $cont = $('.gallery');
        if (!$cont || $cont.length < 1) return;

        images.setup();

        slides.setup();

        if ($cont.metadata().pager == 'true') pager.setup();
        if ($cont.metadata().stepper == 'true') steppers.setup();
    };

    var masonry = {
        setup: function () {
            //Get masonry banners on page
            var masonryBanners = $(".masonrybanner");

            masonryBanners.each(function () {
                //Determine number of elements in masonry banner
                var masonryBanner = $(this);

                masonryBanner.data('elementstoload', $(this).find('img').size());
                masonryBanner.data('hasVideo', ($(this).find('.video').size() > 0));
                masonryBanner.data('maxheight', 0);
                masonryBanner.data('ismasoned', false);

                var cell = masonryBanner.closest(".cell"); //Get closest grid cell
                //Set masonrybanner width closest grid cell width
                //thereby overriding margin on gallery
                masonryBanner.css('width', cell.width());

                var images = masonryBanner.find('img'); // Get masonry banner elements
                images.each(function () {
                    var element = $(this);
                    var gallery = element.closest('.gallery');
                    $("<img/>").load(function () {
                        element.attr('height', this.height);
                        element.attr('width', this.width);
                        masonry.initialize(masonryBanner, this.height);
                    }).attr("src", element.attr("src"));

                });
            });
        },
        initialize: function (masonryBanner, height) {
            var elementsToLoad = masonryBanner.data('elementstoload') - 1;
            masonryBanner.data('elementstoload', elementsToLoad);
            var maxHeight = masonryBanner.data('maxheight');
            if (maxHeight < height)
                masonryBanner.data('maxheight', height);

            if (elementsToLoad > 0)
                return;

            if (masonryBanner.data('hasVideo'))
                return;

            // Masonry
            masonryBanner.masonry({
                itemSelector: '.imagebanner',
                columnWidth: 82
            });
        },
        initializeMasonryAfterVideo: function () {
            var masonryBannerElements = $(".masonrybanner");

            masonryBannerElements.each(function () {
                var masonryBanner = $(this);

                $(".masonrybanner").masonry({
                    itemSelector: '.imagebanner',
                    columnWidth: 82
                });

                var maxHeight = 0;

                var images = masonryBanner.find('img'); // Get masonry banner elements
                images.each(function () {
                    var element = $(this);
                    if (element.height() > maxHeight)
                        maxHeight = element.height();
                });
                masonryBanner.height(maxHeight);

                var gallery = masonryBanner.closest('.gallery');
                var galleryImages = gallery.find(".items>li img"); // Get image elements
                if (galleryImages.size() == 0) {
                    gallery.find('.items>li').hide();
                    gallery.find('.items>li:first').show();
                }
            });
        }
    };

    var video = {
        config: {
            videoImages: 0,
            videoImagesLoaded: 0
        },
        setup: function () {
            //Initialize video banners
            video.config.videoImages = $('.videoImage').size();

            if (video.config.videoImages > 0) {
                $('.videoImage').each(function () {
                    var element = $(this);
                    var gallery = element.closest('.gallery');
                    var videoBannerDiv = element.siblings(".videoBanner");
                    var config = JSON2.parse(element.siblings('script.video-config')[0].innerHTML)[0];
                    var parentWidth = element.parent().width();

                    var hasMasonryParent = element.closest('.masonrybanner').length;

                    $("<img/>").load(function () {
                        config.imageheight = this.height;
                        config.imagewidth = this.width;
                        config.parentwidth = (config.imagewidth > parentWidth || hasMasonryParent ? config.imagewidth : parentWidth);
                        $.get('/Custom/Ui/Common/templates/videobanner.tmpl.txt', function (template) {
                            var output = $.tmpl(template, config);
                            videoBannerDiv.html(output);
                            video.setupWhenReady();
                        });
                        //element.hide();
                    }).attr("src", element.attr("src"));
                });
            }
        },
        setupWhenReady: function () {
            video.config.videoImagesLoaded++;

            if (video.config.videoImagesLoaded < video.config.videoImages)
                return;

            VideoJS.setupAllWhenReady();

            var canPlayHtml5 = false;

            $(".videoBanner").find("video").each(function () {
                if ($(this)[0].player) {
                    canPlayHtml5 = $(this)[0].player.canPlaySource();
                    var flashSupported = $(this)[0].player.flashSupported();

                    if (canPlayHtml5)
                        $(this).show();

                    //Disable autoplay for flash fallback, but not image fallback
                    if (!canPlayHtml5 && flashSupported) {
                        clearTimeout(valtech.gallery.slides.timeout);
                        valtech.gallery.slides.autoplay = false;
                    }

                    $(this)[0].player.addVideoListener("play", function (evt) {
                        clearTimeout(valtech.gallery.slides.timeout);
                        valtech.gallery.slides.autoplay = false;
                    });
                }
            });

            if (canPlayHtml5) {
                $('.videoImage').css('visibility', 'hidden');
                $('.videoImage').css('height', '0px');
            }

            valtech.gallery.masonry.initializeMasonryAfterVideo();

            if (!canPlayHtml5) {
                $('.videoImage').css('visibility', 'hidden');
                $('.videoImage').css('height', '0px');
            }
        }
    };

    var images = {
        setup: function () {
            var galleries = $(".gallery");

            galleries.each(function () {
                var gallery = $(this);

                gallery.data('maxelementheight', 0);
                gallery.each(function () {
                    $(this).data('elementstoload', $(this).find('.items>li img').size());
                });

                //Find max height of gallery elements
                //and set accordingly
                var img = gallery.find(".items>li img"); // Get image elements

                img.each(function () {
                    var element = $(this);
                    $("<img/>").load(function () {
                        images.setupGalleryHeight(gallery, this.height, this.width);
                    }).attr("src", element.attr("src"));
                });
            });
        },
        setupGalleryHeight: function (gallery, height, width) {

            var maxElementHeight = gallery.data('maxelementheight');
            maxElementHeight = height > maxElementHeight ? height : maxElementHeight;
            gallery.data('maxelementheight', maxElementHeight);

            var elementsToLoad = gallery.data('elementstoload') - 1;
            gallery.data('elementstoload', elementsToLoad);

            if (elementsToLoad > 0)
                return;

            gallery.css('height', maxElementHeight);
            gallery.find('.items>li').css('height', maxElementHeight);
            gallery.find('.items>li').hide();
            gallery.find('.items>li:first').show();
        }
    };

    var slides = {
        config: {
            textAnimDur: 250,
            imageAnimDur: 500
        },
        timeout: {},
        setup: function () {
            slides.current = slides.old = 0;
            slides.items = $cont.find('.items > li');
            var itemIndex = 0;
            slides.items.each(function () {
                var url = $(this).find('a').attr('href');
                if (url) {
                    $(this).click(function () {
                        window.location = url;
                    }).addClass('clickable');
                }

                itemIndex++;
            });
            slides.items.hover(
                function () {
                    slides.autoplay = false;
                    clearTimeout(slides.timeout);
                },
                function () {
                    slides.autoplay = parseInt($cont.metadata().autoplay) || false;
                    if (slides.autoplay) slides.timeout = setTimeout(slides.next, slides.autoplay);
                }
            );
            if (slides.items.length < 2) return;
            slides.autoplay = parseInt($cont.metadata().autoplay) || false;
            if (slides.autoplay) slides.timeout = setTimeout(slides.next, slides.autoplay);
        },
        update: function (e) {
            clearTimeout(slides.timeout);
            var user = (e && e.preventDefault && slides.autoplay);
            var slideO = slides.items.eq(slides.old),
				slideN = slides.items.eq(slides.current);

            if (slideN.hasClass('video')) {
                var height = slideN.closest('.gallery').data('maxelementheight');
                var width = slideN.closest('.gallery').width();

                slideN.css("display", "block");
                slideN.find(".video-js-box").css("width", width);
                slideN.find("video").css("height", height);
                slideN.find(".video-js-box").find(".vjs-poster").css("width", width);
                slideN.find(".video-js-box").find(".vjs-poster").css("height", height);
            }

            if (slideN.hasClass('masonrybanner')) {
                var height = slideN.closest('.gallery').height();
                $('.gallery').css('height', height);
            }

            slideO.find('.item-content').animate({
                marginLeft: 0 - slideO.find('.item-content').outerWidth() * 1.5
            }, slides.config.textAnimDur);

            slideO.delay(slides.config.textAnimDur).fadeOut(slides.config.imageAnimDur);
            slideN.delay(slides.config.textAnimDur).fadeIn(slides.config.imageAnimDur, function () {
                if ($(this).hasClass('masonrybanner')) {
                    var masonryBanner = $(this);
                    if (!masonryBanner.data('ismasoned')) {
                        masonryBanner.css('height', masonryBanner.data('maxheight') + 'px');
                        masonryBanner.masonry({
                            itemSelector: '.imagebanner',
                            columnWidth: 82
                        });
                        masonryBanner.data('ismasoned', true)
                    }
                }
            });

            slideO.hide();

            slideN.find('.item-content')
				.css({
				    marginLeft: 0 - slideO.find('.item-content').outerWidth() * 1.5
				})
				.delay(slides.config.imageAnimDur + slides.config.textAnimDur)
				.animate({
				    marginLeft: 0
				}, {
				    duration: slides.config.textAnimDur
				});
            if (slides.autoplay) {
                var nextdelay = slides.autoplay * (user ? 2 : 1) + slides.config.imageAnimDur + slides.config.textAnimDur * 2;
                slides.timeout = setTimeout(slides.next, nextdelay);
            }

            slides.old = slides.current;
            pager.update();
        },
        prev: function (e) {
            if (e && e.preventDefault) e.preventDefault();
            slides.current = (slides.current == 0) ? slides.items.length - 1 : slides.current - 1;
            slides.handleVideo(slides.current, slides.old);
            slides.update(e);
        },
        next: function (e) {
            if (e && e.preventDefault) e.preventDefault();
            slides.current = (slides.current == slides.items.length - 1) ? 0 : slides.current + 1;
            slides.handleVideo(slides.current, slides.old);
            slides.update(e);
        },
        handleVideo: function (current, old) {
            if (slides.items.eq(old).hasClass('video') === true) {
                //Pause video in previous slide, but do it in a try-catch, since
                //pause() throws an error preventing next/prev if in image fallback mode
                try {
                    slides.items.eq(old).find('video')[0].player.pause();
                }
                catch (err) { }
            }
        }
    };

    var pager = {
        setup: function () {
            if (slides.items.length < 2) return;
            $cont.find('.gallery-pager').show();
            pager.prev = $cont.find('.gallery-pager .prev');
            pager.next = $cont.find('.gallery-pager .next');
            var tmpl = $cont.find('.gallery-pager li').remove();
            for (i = 0; i < slides.items.length; i++) {
                var index = i + 1;
                var li = tmpl.clone()
					.addClass(i === 0 ? 'current' : '')
					.click(function (e) {
					    e.preventDefault();
					    var i = $(this).index();
					    if (slides.current == i) return;
					    slides.current = i;
					    slides.update(e);
					});
                li.text(index);
                $cont.find('.gallery-pager ul').append(li);
            };
            pager.links = $cont.find('.gallery-pager li');
            pager.update();
        },
        update: function () {
            if (!!pager.links) pager.links
				.removeClass('current')
				.eq(slides.current)
					.addClass('current');
        }
    };

    var steppers = {
        opts: {
            hideDelay: 3000,
            hideDur: 1250,
            showDur: 250
        },
        setup: function () {
            if (slides.items.length < 2) return;
            $cont.find('.gallery-stepper').show();

            var isTouchDevice = false;
            try {
                document.createEvent("TouchEvent");
                isTouchDevice = true;
            } catch (e) { }

            if (!isTouchDevice)
                $cont.hover(steppers.show, steppers.hide);
            steppers.prev = $cont.find('.gallery-stepper .prev').click(slides.prev);
            steppers.next = $cont.find('.gallery-stepper .next').click(slides.next);
            if (!isTouchDevice)
                steppers.hide();
        },
        show: function () {
            steppers.prev.stop(true).animate({
                left: 0
            }, {
                duration: steppers.opts.showDur
            });
            steppers.next.stop(true).animate({
                right: 0
            }, {
                duration: steppers.opts.showDur
            });
        },
        hide: function () {
            steppers.prev
				.delay(steppers.opts.hideDelay)
				.animate({
				    left: 0 - steppers.prev.width()
				}, {
				    duration: steppers.opts.hideDur
				});
            steppers.next
				.delay(steppers.opts.hideDelay)
				.animate({
				    right: 0 - steppers.next.width()
				}, {
				    duration: steppers.opts.hideDur
				});
        },
        update: function () {

        }
    };

    return {
        init: init,
        slides: slides,
        masonry: masonry
    }
})();

$(document).ready(function () {
    $(valtech.gallery.init);
});