/* Author: Johnny Wang

*/

var scroller = (function(){

    var getTotalImgWidth = function(el) {
        var total = 0;
        el.each(function() {
            total += parseInt($(this).outerWidth(true),10);
        });
        return total;
    };

    var imgContainerWidth = getTotalImgWidth($(".wrapper img"));
    var imgContainerHeight = parseInt($(".wrapper img").outerHeight(true),10);
    var divViewerWidth = parseInt($("div#viewer").width(),10);

    // work out duration of anim based on number of images (seconds for each image)
    var duration = $(".wrapper").length * 3000;

    // store speed for later (distance / time)
    var speed = imgContainerWidth / duration;

    // animator function
    var animator = function(el, time) {

        // animate the el
        el.animate({left: $("div#viewer").width() + "px"}, time, "linear", function() {

            // reset imgContainer position
            $(this).css({left: 0 - imgContainerWidth});

            // restart animation
            scroller.start();
        });
    };

    // stop function
    var stop = function() {
        $("div#imgContainer").stop();
    };

    // start/restart function
    var start = function() {
        // work out total travel distance
        var totalDistance = parseInt($("div#imgContainer").width(),10) + parseInt($("div#viewer").width(),10);

        // work out distance left to travel
        var distanceLeft = totalDistance - (parseInt($("div#imgContainer").css("left"),10) + imgContainerWidth);

        // new duration is distance left / speed
        var newDuration = distanceLeft / speed;

        // restart anim
        animator($("div#imgContainer"), newDuration);
    };

    function initImgScroller() {
        // remove js-disabled class
        $("#viewer").removeClass("js-disabled");

        // create new imgContainer for images
        $("<div>").attr("id", "imgContainer").css({ position:"absolute"}).width(imgContainerWidth).height(imgContainerHeight).appendTo("div#viewer");

        // add images to imgContainer
        $(".wrapper").each(function() {
            $(this).appendTo("div#imgContainer");
        });

        // set initial position; added divViewerWidth to start with images showing
        $("div#imgContainer").css("left", 0 + divViewerWidth - imgContainerWidth);

        //start anim
        scroller.start();

        //pause on mouseover
        $("a.wrapper").on("mouseover", function() {
            scroller.stop();
        });

        //restart on mouseout
        $("a.wrapper").on("mouseout", function() {
            scroller.start();
        });
    }

    return {
        init: function() {
                  initImgScroller();
              },
        stop: function() {
                  stop();
              },
        start: function() {
                   start();
               }
    };
})();


//links home link with the logo hover
function homeLink() {
    $("#logo").hover(
            function() {
                $("#menu-top-nav li a:first").css("text-decoration","underline");
            },
            function() {
                $("#menu-top-nav li a:first").css("text-decoration","");
            }
            );
}

function displayFadeImg() {
    $("#fade-image-left,#fade-image-right").css("z-index","1");
}

var getPreviewWidth = function(width,height) {
    return width / (height / $("div#viewer").height());
};

var next = $.colorbox.next; // cache the original behavior
$.colorbox.next = function() {
    var width = $(".cboxPhoto").width();
    var height = $(".cboxPhoto").height();
    var margin = parseInt($("#viewer img").css("margin-right").replace("px",""),10);
    $("div#imgContainer").css("left",$('div#imgContainer').position().left - (getPreviewWidth(width,height) + margin));
    next();
};

var prev = $.colorbox.prev;
$.colorbox.prev = function() {
    var width = $(".cboxPhoto").width();
    var height = $(".cboxPhoto").height();
    var margin = parseInt($("#viewer img").css("margin-right").replace("px",""),10);
    $("div#imgContainer").css("left",$('div#imgContainer').position().left + (getPreviewWidth(width,height) + margin));
    prev();
};

// triggers when ColorBox is first opened
$(document).on('cbox_complete', function(){
    scroller.stop();
});

// triggers as the close method begins
$(document).on('cbox_closed',function(){
    scroller.start();
});

$(document).ready(function() {
    displayFadeImg();
    scroller.init();
    homeLink();
});