(function($) {
    $.fn.filmstrip = function(options) {
        var defaults = {
            controls: true
        };

        options = $.extend(defaults, options);


        return this.each(function() {
            var filmstrip = this;
            $(filmstrip).addClass("filmstrip");
            var width = 0;
            var thumbs = $(filmstrip).children().addClass("filmstrip-thumb");

            var computeWidth = function() {
                width = 0;
                thumbs.each(function() {
                    width += $(this).outerWidth(true);
                });
            };

            thumbs.wrapAll('<div class="filmstrip-scroll" />');
            computeWidth();
            $(".filmstrip-scroll", filmstrip).css({width:width + "px"});
            var imgList = $("img", filmstrip);

            //$(filmstrip).css({visibility:"hidden"});
            var imgLoaded = 0;
            imgList.load(function() {
                computeWidth();
                $(".filmstrip-scroll", filmstrip).css({width:width + "px"});


            });

            $(".filmstrip-scroll", filmstrip).wrapAll('<div class="filmstrip-content"/>');

            $(".filmstrip-scroll", filmstrip).css({width: width + "px"});
            var left = $('<div class="filmstrip-left"/>');
            var right = $('<div class="filmstrip-right"/>');

            var isLeftScrollable = function() {
                return $(".filmstrip-content", filmstrip).scrollLeft() != 0;

            };
            var isRightScrollable = function() {
                if (width < $(".filmstrip-content").width()) {
                    return false;
                }

                return $(".filmstrip-content", filmstrip).scrollLeft() != width - $(".filmstrip-content").width();
            };

            var checkScrollBounds = function() {
                if (isLeftScrollable()) {
                    left.fadeIn();
                } else {
                    left.fadeOut();
                }
                if (isRightScrollable()) {
                    right.fadeIn();
                } else {
                    right.fadeOut();
                }
            };

            var scrollLeft = function() {
                var scroll = $(".filmstrip-content", filmstrip).scrollLeft() - $(".filmstrip-content", filmstrip).width() * 0.7;
                $(".filmstrip-content", filmstrip).animate({scrollLeft: scroll}, checkScrollBounds);
            };

            var scrollRight = function() {
                var scroll = $(".filmstrip-content", filmstrip).scrollLeft() + $(".filmstrip-content", filmstrip).width() * 0.7;
                $(".filmstrip-content", filmstrip).animate({scrollLeft: scroll}, checkScrollBounds);
            };


            $(".filmstrip-content", filmstrip).scrollLeft(0);
            checkScrollBounds();
            left.click(scrollLeft).hide();
            right.click(scrollRight).hide();

            if (options.controls) {
                $(".filmstrip-content", filmstrip).after(left);
                $(".filmstrip-content", filmstrip).after(right);
            }

            $(filmstrip).mouseenter(
                    function() {
                        if (isLeftScrollable()) {
                            left.fadeIn();
                        }
                        if (isRightScrollable()) {
                            right.fadeIn();
                        }
                    }).mouseleave(function() {
                left.fadeOut();
                right.fadeOut();
            });


            var hoverScroll = function(a) {
                var scroll = $(".filmstrip-content", filmstrip).scrollLeft() + a;
                $(".filmstrip-content", filmstrip).scrollLeft(scroll);
                checkScrollBounds();
            };
            var interval = null;
            left.mouseover(
                    function() {
                        interval = setInterval(function() {
                            hoverScroll(-2);
                        }, 20);
                    }).mouseleave(function() {
                clearInterval(interval);
            });

            right.mouseover(
                    function() {
                        interval = setInterval(function() {
                            hoverScroll(2);
                        }, 20);
                    }).mouseleave(function() {
                clearInterval(interval);
            });
            return this;
        });
    }
})(jQuery);