(function($) {

    function init(scroller, opts) {
        var leftControl = $('<a/>').addClass('sterech-left').attr('href', '#').text('<'),
            rightControl = $('<a/>').addClass('sterech-right').attr('href', '#').text('>'),
            tableWrap = $('<table/>'),
            target = $('<tr/>').appendTo(tableWrap),
            itemCount = 0,
            scrolled = 0;
        itemCount = scroller.children().length;

        leftControl = $(opts.left || leftControl);
        rightControl = $(opts.right || rightControl);

        scroller.children().each(function() {
            var item = $(this),
                itemCellWrap = $('<td/>'),
                itemTableWrap = $('<table/>').addClass('strech-table').appendTo(itemCellWrap),
                itemTargetRow = $('<tr/>').appendTo(itemTableWrap),
                itemTargetCell = $('<td/>').appendTo(itemTargetRow);
            itemTableWrap.width(opts.width);
            item.appendTo(itemTargetCell);
            itemCellWrap.appendTo(target);
        });
        tableWrap.appendTo(scroller);
        if (!opts.left && !opts.right) {
            leftControl.appendTo(scroller);
            rightControl.appendTo(scroller);
        }


        function hideExcess() {
            var scrollerWidth = scroller.width();
            var mustBeVisible = Math.floor(scrollerWidth / opts.width);
            target.children().each(function(i) {
                if(i < scrolled - 1) {
                    $(this).addClass('invisible').find('.strech-table').width(opts.width);
                } else {
                    if (i == scrolled - 1) {
                        $(this).removeClass('invisible').find('.strech-table').width(opts.width);
                    } else {
                        if (i > (scrolled + mustBeVisible) + 1) {
                            $(this).addClass('invisible').find('.strech-table').width(opts.width);
                        } else {
                            $(this).removeClass('invisible');
                        }
                    }
                }
            });
        }
        function updateSizes() {
            var scrollerWidth = scroller.width();
            var mustBeVisible = Math.floor(scrollerWidth / opts.width);
            var freeSpace = (scrollerWidth - (mustBeVisible * opts.width));
            target.children().filter(':not(.invisible)').slice(scrolled ? 1 : 0).
                              find('.strech-table').
                              width((freeSpace / (mustBeVisible-1)) + opts.width);
        }

        rightControl.click(function($) {
            var scrollerWidth = scroller.width();
            var mustBeVisible = Math.floor(scrollerWidth / opts.width);
            if ((scrolled + mustBeVisible) >= itemCount) {
                return false;
            }
            scrolled++;
            hideExcess();
            updateSizes();
            tableWrap.animate({
                left: '-=' + opts.width + 'px'
            });
            return false;
        });

        leftControl.click(function($) {
            var scrollerWidth = scroller.width();
            var mustBeVisible = Math.floor(scrollerWidth / opts.width);
            if (scrolled <= 0) {
                return false;
            }
            scrolled--;
            hideExcess();
            updateSizes();
            tableWrap.animate({
                left: '+=' + opts.width + 'px'
            });
            return false;
        });

        $(window).bind('resize', function() {
            hideExcess();
            updateSizes();
        });

        hideExcess();
        updateSizes();


    }

    $.fn.strechScroll = function(opts) {
        $(this).each(function() {
            init($(this), opts);
        });
    }
})(jQuery);

