$(function () {
    //remove js-disabled class
    $("#viewer").removeClass("js-disabled");
    //create new container for images
    $("<div>").attr("id", "container").css({
        position: "absolute"
    }).width($(".wrapper").length * 170).height(70).appendTo("div#viewer");
    //add images to container
    $(".wrapper").each(function () {
        $(this).appendTo("div#container");
    });
    //work out duration of anim based on number of images (1 second for each image)
    var duration = $(".wrapper").length * 3500;
    //store speed for later (distance / time)
    var speed = (parseInt($("div#container").width()) + parseInt($("div#viewer").width())) / duration;
    //set direction
    var direction = "rtl";
    //set initial position and class based on direction
    (direction == "rtl") ? $("div#container").css("left", 0).addClass("rtl") : $("div#container").css("left", 100 - $("div#container").width()).addClass("ltr");
    //animator function
    var animator = function (el, time, dir) {
        //which direction to scroll
        if (dir == "rtl") {
            //add direction class
            el.removeClass("ltr").addClass("rtl");
            //animate the el
            el.animate({
                left: "-" + el.width() + "px"
            }, time, "linear", function () {
                //reset container position
                $(this).css({
                    left: $("div.imageScroller").width(),
                    right: ""
                });
                //restart animation
                animator($(this), duration, "rtl");
               
            });
        } else {
            //add direction class
            el.removeClass("rtl").addClass("ltr");
            //animate the el
            el.animate({
                left: $("div#viewer").width() + "px"
            }, time, "linear", function () {
                //reset container position
                $(this).css({
                    left: 0 - $("div#container").width()
                });
                //restart animation
                animator($(this), duration, "ltr");
                
            });
        }
    }
    //start anim
    animator($("div#container"), duration, direction);
});

$(function () {
    //remove js-disabled class
    $("#viewer2").removeClass("js-disabled");
    //create new container2 for images
    $("<div>").attr("id", "container2").css({
        position: "absolute"
    }).width($(".wrapper2").length * 170).height(70).appendTo("div#viewer2");
    //add images to container2
    $(".wrapper2").each(function () {
        $(this).appendTo("div#container2");
    });
    //work out duration of anim based on number of images (1 second for each image)
    var duration = $(".wrapper2").length * 3100;
    //store speed for later (distance / time)
    var speed = (parseInt($("div#container2").width()) + parseInt($("div#viewer2").width())) / duration;
    //set direction
    var direction = "rtl";
    //set initial position and class based on direction
    (direction == "rtl") ? $("div#container2").css("left", 0) : $("div#container2").css("left", 0 - $("div#container2").width()).addClass("ltr");
    //animator function
    var animator = function (el, time, dir) {
        //which direction to scroll
        if (dir == "rtl") {
            //add direction class
            el.removeClass("ltr").addClass("rtl");
            //animate the el
            el.animate({
                left: "-" + el.width() + "px"
            }, time, "linear", function () {
                //reset container2 position
                $(this).css({
                    left: $("div.imageScroller2").width(),
                    right: ""
                });
                //restart animation
                animator($(this), duration, "rtl");
                //hide controls if visible
                ($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null;
            });
        } else {
            //add direction class
            el.removeClass("rtl").addClass("ltr");
            //animate the el
            el.animate({
                left: $("div#viewer2").width() + "px"
            }, time, "linear", function () {
                //reset container2 position
                $(this).css({
                    left: 0 - $("div#container2").width()
                });
                //restart animation
                animator($(this), duration, "ltr");
                //hide controls if visible
                ($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null;
            });
        }
    }
    //start anim
    animator($("div#container2"), duration, direction);
});