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();
        
        if (currentWidth > settings.maxWidth) {
            $control.find('.leftArrow, .rightArrow').fadeIn('fast');
        } else {
        	$control.find('.leftArrow, .rightArrow').fadeOut('fast');
        }
    };

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

        /* 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>')

        displayArrows();
        
        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() { });
		});
        
    });

};