//-------------------------------------------------------------
     // ImageStrip()
     // - viewportSearch : Is a jQuery search string that allows us to find the viewport Div of this Image Strip control.
     // - stripSearch :   Is a jQuery search string that allous us to find the full image strip Div.
     // - cellWidth :     Is the width of the images in this strip 
     // - speed : Is the speed at wich the animation will occur when moving the strip one page.
     // - btnPrevLeftIn :  The starting left for the Prev button
     // - btnNextLeftIn :  The starting left for the Next button
     // - btnBarsWidthIn : The width of the Next and Prev buttonn bars.
     //
     function ImageStrip(viewportSearch, stripSearch, cellWidth, speed, cellsOnPageIn, numberOfCellsIn, 
                         prevBtnSearchIn, nextBtnSearchIn, btnPrevLeftIn, btnNextLeftIn, btnBarsWidthIn, 
                         imgPrevBtnSearchIn, imgNextBtnSearchIn ) 
     {
	    this.viewport = $(viewportSearch);
	    
	    this.strip = this.viewport.find(stripSearch);
    	
	    this.cellWidth = cellWidth;

	    this.speed = speed;
	    
	    this.currentIndex = 0;
	    
	    this.cellsOnPage = cellsOnPageIn;
	    
	    this.numberOfCells = numberOfCellsIn;
	    	    
        this.mouseIsIn = false;
        this.processingMouseOut = false;
        this.hideDelayTimer = null;
        this.speedShowHide = 300;
        this.hideDelay = 50;
        
        this.btnPrevLeft = btnPrevLeftIn;
        this.btnNextLeft   = btnNextLeftIn;
        this.btnBarsWidth  = btnBarsWidthIn;

        this.prevBtnBarSearch  = prevBtnSearchIn;
        this.nextBtnBarSearch  = nextBtnSearchIn;
        
        this.buttonBarOpacityOut = 0.6;
        this.buttonBarOpacityOver = 0.8;
        
        this.buttonOpacityDisabled = 0.2;
        this.buttonOpacityEnabled = 1;
        
        this.imgPrevBtnSearch = imgPrevBtnSearchIn;
        this.imgNextBtnSearch = imgNextBtnSearchIn;
        
        $(this.prevBtnBarSearch).css( 'opacity', this.buttonBarOpacityOut );             
        $(this.nextBtnBarSearch).css( 'opacity', this.buttonBarOpacityOut );       
        
        this.enableButtons();       
    } 

    ImageStrip.prototype = 
    {
        
	    // Move the strip to show the image at the given position as the first image.
	    // - newIndex : The index of the image/cell that we want to show. (Zero based)
	    move: function(newIndex) 
	    {
		    if (this.currentIndex == newIndex) 
		    {
			    return false;
		    }

            this.currentIndex = newIndex; // Remember it for next time
            
            // Calculate the new offset
		    var newLeft = (this.cellWidth * newIndex * -1);

		    if (this.speed > 0) 
		    {
			    this.strip.animate({left:newLeft},this.speed);
		    }
		    else 
		    {
			    this.strip.left(newLeft+'px');
		    }
            
            this.enableButtons();
            
		    return true;
	    },
	    
        // Set the enabled state of the buttons
        enableButtons: function()
        {
            // Note that the indexes are zero based.
            var lastPossibleIndex = this.numberOfCells;
            var pageLeftIndex = this.currentIndex;
            var pageRightIndex = this.currentIndex + this.cellsOnPage;
            
            if (pageLeftIndex <= 0)
                $(this.imgPrevBtnSearch).css( 'opacity', this.buttonOpacityDisabled );       
            else
                $(this.imgPrevBtnSearch).css( 'opacity', this.buttonOpacityEnabled );       
            
            if (pageRightIndex < lastPossibleIndex)
                $(this.imgNextBtnSearch).css( 'opacity', this.buttonOpacityEnabled );       
            else
                $(this.imgNextBtnSearch).css( 'opacity', this.buttonOpacityDisabled );       
        },	    
	    
        moveNext: function()
        {
            var newLeftIndex = 0;
            var lastPossible = this.numberOfCells - this.cellsOnPage;
            var desiredIndex = this.currentIndex + this.cellsOnPage;
            if (desiredIndex <= lastPossible)
                newLeftIndex = desiredIndex;
            else
                newLeftIndex = lastPossible;
                
            this.move(newLeftIndex);
        },	    
	    
        movePrev: function()
        {
            var newLeftIndex = 0;
            if (this.currentIndex > this.cellsOnPage)
                newLeftIndex = this.currentIndex - this.cellsOnPage;
                
            this.move(newLeftIndex);
        },	    

        onMouseOverButtonBarPrev: function()
	    {
            $(this.prevBtnBarSearch).css( 'opacity', this.buttonBarOpacityOver );       
	    },
	    	    
        onMouseOutButtonBarPrev: function()
        {
            $(this.prevBtnBarSearch).css( 'opacity', this.buttonBarOpacityOut );       
        },
        
        onMouseOverButtonBarNext: function()
	    {
            $(this.nextBtnBarSearch).css( 'opacity', this.buttonBarOpacityOver );       
	    },
	    	    
        onMouseOutButtonBarNext: function()
        {
            $(this.nextBtnBarSearch).css( 'opacity', this.buttonBarOpacityOut );       
        },
        
        onMouseOver: function()
        {
            if (this.hideDelayTimer) 
		        clearTimeout(this.hideDelayTimer);

            if (this.mouseIsIn == true)
                return;
            
            if (this.processingMouseOut)
                return;
            
            var prevLeft = this.btnPrevLeft + this.btnBarsWidth;
            $(this.prevBtnBarSearch).animate( {left:prevLeft}, this.speedShowHide);       
            
            var nextLeft = this.btnNextLeft - this.btnBarsWidth;
            $(this.nextBtnBarSearch).animate( {left:nextLeft}, this.speedShowHide);       
            
            this.mouseIsIn = true;
        },
        
        onMouseOut: function()
        {
            if (this.processingMouseOut)
                return;
                
            if (this.hideDelayTimer) 
		        clearTimeout(this.hideDelayTimer);
            
            var this2 = this; // So we can use it inside of the anonymous function run by the timer.

            this.hideDelayTimer = setTimeout(
                function ()
                {
                    this2.processingMouseOut = true;
                    this2.hideDelayTimer = null;
                    
                    var prevLeft = this2.btnPrevLeft;
                    $(this2.prevBtnBarSearch).animate( {left:prevLeft}, this2.speedShowHide);       
                    
                    var nextLeft = this2.btnNextLeft;
                    $(this2.nextBtnBarSearch).animate( {left:nextLeft}, this2.speedShowHide);       
                    
                    this2.mouseIsIn = false;
                    this2.processingMouseOut = false;
                },
                this2.hideDelay
            );
        }

    }