//see docs at http://net.tutsplus.com/tutorials/javascript-ajax/building-a-jquery-image-scroller/
        function scrollBrands(nr) {

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

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

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

            //work out duration of anim based on number of images
            var duration = nr * 500;

            //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", 0 - $("div#container").width()).addClass("ltr");

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

                if (nr < 10)
                    return false;
                //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: 400 - $("div#container").width() });

                        //restart animation
                        animator($(this), duration, "ltr");

                    });
                }
            }

            //pause when list ends
            $("a.mywrapper").live("mouseover", function() {

                //stop anim
                $("div#container").stop(true);
 
            });
            
            //pause on mouseover
            $("a.mywrapper").live("mouseover", function() {

                //stop anim
                $("div#container").stop(true);
 
            });

            //pause on mouseout
            $("img.arrow").live("mouseout", function() {

                //stop anim
                $("div#container").stop(true);
               
            });

            //handler for ltr button onclick
            $("img.rtl").live("click", function() {

                //stop anim
                $("div#container").stop(true);

                //swap class names
                $("div#container").removeClass("rtl").addClass("ltr");

                //work out total travel distance
                var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());

                //work out remaining distance
                var distanceLeft = totalDistance - (parseInt($("div#container").css("left")) + parseInt($("div#container").width()));

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

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

            //handler for ltr button
            $("img.rtl").live("mouseover", function() {

                //stop anim
                $("div#container").stop(true);

                //swap class names
                $("div#container").removeClass("rtl").addClass("ltr");

                //work out total travel distance
                var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());

                //work out remaining distance
                var distanceLeft = totalDistance - (parseInt($("div#container").css("left")) + parseInt($("div#container").width()));

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

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

            //handler for rtl button
            $("img.ltr").live("mouseover", function() {

                //stop anim
                $("div#container").stop(true);

                //swap class names
                $("div#container").removeClass("ltr").addClass("rtl");

                //work out total travel distance
                var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());

                //work out remaining distance
                var distanceLeft = totalDistance - (parseInt($("div#viewer").width()) - (parseInt($("div#container").css("left"))));

                //new duration is distance left / speed)
                var newDuration = distanceLeft / speed;
               
                //restart anim
                animator($("div#container"), newDuration, "rtl");
            });
            //handler for rtl button on click
            $("img.ltr").live("click", function() {

                //stop anim
                $("div#container").stop(true);

                //swap class names
                $("div#container").removeClass("ltr").addClass("rtl");

                //work out total travel distance
                var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());

                //work out remaining distance
                var distanceLeft = totalDistance - (parseInt($("div#viewer").width()) - (parseInt($("div#container").css("left"))));

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

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