jQuery.fn.productScroll = function(options) {

    settings = jQuery.extend({
        container: '',
        content: '',
        tabs: '',
        buttons: '',
        scrollRightImage: '',
        scrollLeftImage: '',
        maxWidth: ''
    }, options);

    var $control;

    function displayArrows() {
        var $activeContent = $(settings.content + ' .active');
        var currentWidth = $activeContent.find('img:first').width();
        //document.title = currentWidth;
        if (currentWidth > settings.maxWidth) {
            $control.find('.leftArrow, .rightArrow').fadeIn('fast');
        } else {
            $control.find('.leftArrow, .rightArrow').fadeOut('fast');
        }
    };

    return this.each(function() {
        $control = $(settings.container);

        displayArrows();
        
        /* if we have a scroll left and right image create them */
        $control.append('<a href="#" class="leftArrow"><img src="' + settings.scrollLeftImage + '" /></a>')
        $control.append('<a href="#" class="rightArrow"><img src="' + settings.scrollRightImage + '" /></a>')

        

        var $imageToAnimate;
        /* animate the image left */
        $control.find('.leftArrow').hover(
        function() {
            var $activeContent = $(settings.content + ' div.active');
            $imageToAnimate = $activeContent.find('img:first');
            $imageToAnimate.animate({ queue: false, left: 0 - ($imageToAnimate.width() - settings.maxWidth) }, 1800);
        }, function() { $imageToAnimate.stop(); });

        /* animate the right left */
        $control.find('.rightArrow').hover(function() {
            var $activeContent = $(settings.content + ' div.active');
            $imageToAnimate = $activeContent.find('img:first');
            $imageToAnimate.animate({ left: 0 }, 1800);
        }, function() { $imageToAnimate.stop(); });


        var inProgress = false;

        $.each($(settings.buttons).find('a'), function(index, item) {
            $(item).mousemove(function() {



                if (!inProgress) {
                    inProgress = true;

                    var $currentButton = $(settings.buttons).find('a.active img:first');
                    var $hoveredButton = $(item).find('img:first');

                    var $currentContent = $(settings.content + ' div.active');
                    var $hoveredContent = $(settings.content + ' ' + $hoveredButton.parent().attr('href'));

                    if ($currentContent.attr('id') != $hoveredContent.attr('id')) {
                        //get the active button and switch it off					
                        $currentButton.attr('src', $currentButton.attr('src').replace('-on', ''));
                        $currentButton.parent().removeClass('active');

                        //activate the button we are hovering on
                        $hoveredButton.attr('src', $hoveredButton.attr('src').replace('.gif', '-on.gif'));
                        $hoveredButton.parent().addClass('active');

                        //hide the current active content
                        $currentContent.fadeOut('fast', function() {
                            //hide the current content and remove the active class
                            $currentContent.css('display', 'none');
                            $currentContent.removeClass('active');

                            //display the new current content 
                            $hoveredContent.fadeIn('fast', function() {
                                $hoveredContent.css('display', '');
                            });
                            $hoveredContent.addClass('active');
                            displayArrows();

                            inProgress = false;

                        });
                    } else {
                        inProgress = false;
                    }


                }

            }, function() { });
        });

    });

};