﻿$(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(170).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 * 5000;



    //store speed for later (distance / time)
    var speed = (parseInt($("div#container").width()) + parseInt($("div#viewer").width())) / duration;
    //animator function
    var animator = function (el, time) {
        //alert(el.width() + '--' + time + ' - ' + $("#viewer").width())
        //animate the el
        //alert(el.width())
        //alert($("div#imageScroller").width())
        //alert(el.width() - $("div#imageScroller").width())
        var a = el.width() - $("div#imageScroller").width() -600;
        
        el.animate({ left: "-" + a + "px" }, time, "linear", function () {
            //alert(duration + '--' + time);
            //reset container position
            $(this).css({ left: 0, right: "" });

            //restart animation
            animator($(this), time);
        });
    }

    //start anim
    animator($("div#container"), duration);
});
