$(document).ready(function () {
    initGallery();

    $("#homeGallery #thumbs ul li").hoverIntent({
        over: showHoverPopUp,
        timeout: 200,
        out: hideHoverPopUp
    });
    $("#homeGallery #thumbs ul li").mouseenter(function () {
        $(this).stop().animate({
            boxShadow: "0 2px 4px rgba(0,0,0,0.5)",
            bottom: "1"
        }, 100);
    });
    $("#homeGallery #thumbs ul li").mouseleave(function () {
        $(this).stop().animate({
            boxShadow: "0 1px 2px rgba(0,0,0,0.33)",
            bottom: "0"
        }, 100);
    });

    //$("#homeGallery #thumbs ul li").append("<div class='overflowContainer'></div>");
    $("#homeGallery #thumbs ul li").append("<div class='overlay'></div>");

    //$("#homeGallery #thumbs ul li").append("<span class='hoverPopUp'>" + "</span>");

    
    $("#homeGallery #thumbs ul li").click(function () {
        $(this).find(".overlay").fadeTo(200, 0.5);
    });
    $("#homeGallery #thumbs ul li").click(function () {
        $(this).siblings().find(".overlay").fadeOut(200);
    });
    $("#homeGallery #controls a").click(function () {
        $("#homeGallery #thumbs ul li.active .overlay").fadeTo(200, 0.5);
    });

   // $("#homeGallery .exposureNextPage").append("<span></span>");
   // $("#homeGallery .exposurePrevPage").append("<span></span>");

    function showHoverPopUp() {
        $(this).stop().find(".hoverPopUp").animate({
            bottom: "0px"
        }, 400, "easeOutExpo");
    }
    function hideHoverPopUp() {
        $(this).stop().find(".hoverPopUp").animate({
            bottom: "-40px"
        }, 400, "easeOutExpo");
    }
});

function initGallery() {

    var gallery = $('#thumbs .thumbs').exposure({
        target: "#slideshow",
        imageControls: true,
        pageSize: 8,
        visiblePages: 1,
        controls: { prevNext: true, pageNumbers: false, firstLast: false },
        controlsTarget: "#controls",
        dataTarget: "#caption",
        onImage: function (image) {
            $('.exposureWrapper > .exposureLastImage').stop().fadeOut(500, function () {
                $(this).remove();
            });
            image.hide().stop().fadeIn(500);

            var resizeAndCenter = function () {
                // The wrapper should have the same size as the image.
                $('.exposureWrapper').width(image.width()).height(image.height());

                // Use margins to center the wrapper inside the target element.
                var hCenteringMargin = ($('.exposureTarget').width() - image.width()) / 2;
                var vCenteringMargin = ($('.exposureTarget').height() - image.height()) / 2;
                image.css("marginLeft", hCenteringMargin + "px");
                image.css("marginTop", vCenteringMargin + "px");
            };
            // This weird part of the code is needed due to a bug in webkit browsers (Chrome and Safari) that shows if users are using content altering plugins like AdBlock.
            if (!image.width() || !image.height()) {
                var delay = setInterval(function () {
                    resizeAndCenter();
                    clearInterval(delay);
                }, 2);
            } else {
                resizeAndCenter();
            }
        },
        onThumb: function (image) {
            var li = image.attr("title");
            image.parents('li').append("<span class='hoverPopUp'>" + li + "</span>");
            //  alert(li);
        },
        onInit: function () {
            $(this).append('<a href="javascript:void(0);" class="exposureFirstPage"><span></span></a>');
            $(this).append('<a href="javascript:void(0);" class="exposureLastPage"><span></span></a>');
            $('.exposureFirstPage').css('display', 'none');
            $('.exposureFirstPage').click(function () {
                gallery.firstPage();
                $(this).css('display', 'none');
                $(this).next().css('display', 'block');
            });
            $('.exposureLastPage').click(function () {
                gallery.lastPage(); 
                $(this).css('display', 'none');
                $(this).prev().css('display', 'block');
            });
        },
        fixedContainerSize: true,
        autostartSlideshow: true,
        showCaptions: false
    });
};