addLoadEvent(initSlide);


fadeimages2 = new Array();
fadeimages2[0]=["http://www.motorcyclesupermarket.com/images/btol-main-img-v3.jpg", "http://www.motorcyclesupermarket.com/buy-bikes.php", "","boat_thumb","boat_thumbimg"] //plain image syntax
fadeimages2[1]=["http://www.motorcyclesupermarket.com/images/ctol-main-img-v3.jpg", "http://motorcyclesupermarket.com/Sell-Motorcycles/", "","cycle_thumb","cycle_thumbimg"] //plain image syntax
fadeimages2[2]=["http://www.motorcyclesupermarket.com/images/rvtol-main-img-v3.jpg", "http://www.motorcyclesupermarket.com/motorcycle-accessories/", "","rv_thumb","rv_thumbimg"] //plain image syntax
fadeimages2[3]=["http://www.motorcyclesupermarket.com/images/etol-main-img-v3.jpg", "http://www.motorcyclesupermarket.com/motorcycle-parts/", "","equip_thumb","equip_thumbimg"] //plain image syntax
fadeimages2[4]=["http://www.motorcyclesupermarket.com/images/ttol-main-img-v3.jpg", "http://www.motorcyclesupermarket.com/motorcycle-insurance/", "","truck_thumb","truck_thumbimg"] //plain image syntax
fadeimages2[5]=["http://www.motorcyclesupermarket.com/images/atol-main-img-v3.jpg", "http://www.motorcyclesupermarket.com/motorcycle-finance/", "","aero_thumb","aero_thumbimg"] //plain image syntax
// fadeimages2[6]=["http://www.motorcyclesupermarket.com/images/btol-main-img-v3.jpg", "http://www.motorcyclesupermarket.com/index.php", "","atv_thumb","atv_thumbimg"] //plain image syntax
// fadeimages2[7]=["http://www.motorcyclesupermarket.com/images/ctol-main-img-v3.jpg", "http://www.motorcyclesupermarket.com/motorcycle-clothing/", "","pwc_thumb","pwc_thumbimg"] //plain image syntax
// fadeimages2[8]=["http://www.motorcyclesupermarket.com/images/rvtol-main-img-v3.jpg", "http://www.motorcyclesupermarket.com/motorcycle-accessories/", "","snow_thumb","snow_thumbimg"] //plain image syntax
// fadeimages2[9]=["http://www.motorcyclesupermarket.com/images/etol-main-img-v3.jpg", "www.motorcyclesupermarket.com/motorcycle-parts/", "","sail_thumb","sail_thumbimg"] //plain image syntax
// fadeimages2[10]=["http://www.motorcyclesupermarket.com/images/ttol-main-img-v3.jpg", "www.motorcyclesupermarket.com/motorcycle-insurance/", "","yacht_thumb","yacht_thumbimg"] //plain image syntax
		
// The class definition for the fadeShow class that fades images around
function cFadeShow( sImageContainer, arImages )
{
	// If the image container isn't set, let the user know
	if( ! sImageContainer || sImageContainer.length == 0 )
	{
		alert( 'Error in cFadeShow: image container not set.' );
		return;
	}// End if
	
	// Get the container element from the document
	this.oContainer = document.getElementById( sImageContainer );
	
	// If we couldn't get the container element
	if( ! this.oContainer )
	{
		alert( 'Error in cFadeShow: image container not found in the document' );
		return;
	}// End if
	
	// If there are no images, set an error
	if( ! arImages || arImages.length == 0 )
	{
		alert( 'Error in cFadeShow: no images where passed in' );
		return;
	}// End if
	
	// Set the images in this object
	this.arImages = arImages;
	
	// The index to the current image that we are showing
	this.iCurrentImageIndex = 0;
	
	// The index to the previous image
	this.iPreviousImageIndex = 0;
	
	// Holds the id of the interval event for the fade show
	this.iTimeoutId = -1;
	
	// Get a named reference to this object
	var self = this;
	
	// Sets the opacity for the current and previous images
	this.setOpacity = function( iCurrentValue, iPreviousValue )
	{
		// Get a reference to the previous and current images
		var oPrev = document.getElementById( 'canvas_previous' );
		var oCurr = document.getElementById( 'canvas_current' );
		
		// Set their opacity values
		oPrev.style.opacity = iPreviousValue / 10;
		oPrev.style.filter = 'alpha(opacity=' + iPreviousValue * 10 + ')';
		
		oCurr.style.opacity = iCurrentValue / 10;
		oCurr.style.filter = 'alpha(opacity=' + iCurrentValue * 10 + ')';
	}// End cFadeShow.setOpacity

	
	// Shows the current images based on the current image index
	this.showCurrentImage = function()
	{
		// Get both canvas's
		var oPreviousCanvas = document.getElementById( 'canvas_previous' );
		var oCurrentCanvas = document.getElementById( 'canvas_current' );
		
		// If both canvas's exists
		if( oPreviousCanvas && oCurrentCanvas )
		{
			// Set the source for the previous canvas
			oPreviousCanvas.src = self.getImageSrc( self.iPreviousImageIndex );

			oPreviousCanvas.className = 'lgImg';
			oCurrentCanvas.className = 'lgImg transparent';
			
			setTimeout( function()
			{
				oCurrentCanvas.src = self.getImageSrc();
				
				oCurrentCanvas.parentNode.href = self.getImageHref();
				oCurrentCanvas.parentNode.target = self.getImageTarget();
			}, 100 );
		}// End if
		else
		{
			// Otherwise, create the canvas objects
			// Build the image and its link and put it into the document
			var sImgHtml = '';
			
			sImgHtml += '<span class="canvas">';
			sImgHtml += '<img id="canvas_previous" src="' + self.getImageSrc( self.iPreviousImageIndex ) + 
							'" border="0px" class="lgImg">';
			sImgHtml += '</span>';
			
			sImgHtml += '<a href="' + self.getImageHref() + '" target="' + self.getImageTarget() + 
						'" class="canvas">';
			sImgHtml += '<img style="z-index:99;" id="canvas_current" src="' + self.getImageSrc() + '" border="0px" class="lgImg">';
			sImgHtml += '</a>';
			
			// Put the image into the container
			self.oContainer.innerHTML = sImgHtml;
		}// End else
	}// End cFadeShow.showCurrentImage

	
	// Sets the current image in the fade show based on the thumb id
	this.setCurrentImageByThumbId = function( sThumbId )
	{
		// If the thumb id isn't set, return
		if( ! sThumbId )
			return;
			
		// A variable to hold the index of the image we are looking for
		var iImageIndex = -1;
		
		// For each image in the slide array
		for( var n = 0; ( n < self.arImages.length ) && ( iImageIndex < 0 ); ++n )
		{
			// If we found the slide that matches the passed in thumb id, set
			// the index value
			if( self.getImageThumbId( n ) == sThumbId )
				iImageIndex = n;
		}// End for n
		
		// If we found the image we are looking for, set the current image
		// index to it and show it to the user
		self.iPreviousImageIndex = self.iCurrentImageIndex;
		self.iCurrentImageIndex = iImageIndex;
		self.showCurrentImage();
		
		// Hide the previous image canvas
//		document.getElementById( 'canvas_previous' ).className = 'transparent';
	}// End cFadeShow.setCurrentImageByThumbId

	
	// Returns the image source of the currently selected image
	// If iIndex is set, it will return that images src instead
	this.getImageSrc = function( iIndex )
	{
		// If the index was passed in, use that, otherwise, use the current image
		var iImgIndex = ( typeof iIndex == 'number' )? iIndex: self.iCurrentImageIndex;
		
		// If that image is set, return its source
		if( self.arImages[iImgIndex] && self.arImages[iImgIndex][0] )
			return self.arImages[iImgIndex][0];
	}// End cFadeShow.getImageSrc
	
	
	// Returns the href of the currently selected image.  If iIndex
	// is set, it will return that images href instead
	this.getImageHref = function( iIndex )
	{
		// If the index was passed in, use that, otherwise, use the current image
		var iImgIndex = ( typeof iIndex == 'number' )? iIndex: self.iCurrentImageIndex;
		
		// If that image is set, return its source
		if( self.arImages[iImgIndex] && self.arImages[iImgIndex][1] )
			return self.arImages[iImgIndex][1];
	}// End cFadeShow.getImageHref
	
	// Returns the alt text of the currently selected image.  If iIndex is
	// set, it will return that images target instead
	this.getImageTarget = function()
	{
		// If the index was passed in, use that, otherwise, use the current image
		var iImgIndex = ( typeof iIndex == 'number' )? iIndex: self.iCurrentImageIndex;
		
		// If that image is set, return its source
		if( self.arImages[iImgIndex] )
			return self.arImages[iImgIndex][2];
	}// End cFadeShow.getImageTarget
	
	// Returns the thumb id that correspondes to the currently selected image.  If
	// iIndex is set, it will return the thumb id for that image instead
	this.getImageThumbId = function( iIndex )
	{
		// If the index was passed in, use that, otherwise, use the current image
		var iImgIndex = ( typeof iIndex == 'number' )? iIndex: self.iCurrentImageIndex;
		
		// If that image is set, return its source
		if( self.arImages[iImgIndex] && self.arImages[iImgIndex][3] )
			return self.arImages[iImgIndex][3];
	}// End cFadeShow.getImageThumbId
	
	// Starts the fadeshow
	// iInterval is the time in seconds between slides
	this.doFadeShow = function( iInterval )
	{
		// If the fadeshow is already running
		if( self.iIntervalId > -1 )
		{
			// Show the next slide
			window.oSlider.fadeNext();
			
			// Set the current slide to be transparent
			document.getElementById( 'canvas_current' ).className = "lgImg transparent";
		}// End if
		else
		{
			// Otherwise, just set the interval
			self.iIntervalId = setInterval( 'window.oFadeShow.doFadeShow()', iInterval * 1000 );
		}// End else
		
		// Set up the opacity calls
		var iPreviousOpacity = 11;
		for( var iCurrentOpacity = 0; iCurrentOpacity < 11; ++iCurrentOpacity )
		{
			iPreviousOpacity--;
			setTimeout( 'window.oFadeShow.setOpacity(' + iCurrentOpacity + ', ' + iPreviousOpacity + ' )', 
						100 * iCurrentOpacity );
		}// End for iCurrentOpacity
	}// End cFadeShow.startFadeShow
	
	// Stops the fade show if its running
	this.stopFadeShow = function()
	{
		// If the timeout id is set, stop it
		if( self.iIntervalId > -1 )
		{
			clearInterval( this.iIntervalId );
			this.iIntervalId = -1;
		}// End if
	}// End cFadeShow.stopFadeShow
	
	// Put the first image into the container
	this.showCurrentImage();
}// End cFadeShow class definition



// The class definition for the images slider class
// sContainerId is the id of the element that holds all of the slides
// iNumVisibleSlides is the number of slides to have visible at a time
function cSlider( sContainerId, iNumVisibleSlides )
{
	// If the container id isn't set, return
	if( ! sContainerId || sContainerId.length == 0 )
	{
		alert( 'Error in cSlider: container id not set' );
		return;
	}// End if
	
	// Get the container from the body of the document
	this.oContainer = document.getElementById( sContainerId );
	
	// If we couldn't get the container from the document
	if( ! this.oContainer )
	{
		alert( 'Error in cSlider: container not found in the document' );
		return;
	}// End if
	
	// Make sure the user entered something for the number of visible slides
	if( ! iNumVisibleSlides || iNumVisibleSlides <= 0 )
	{
		alert( 'Error in cSlider: iNumVisibleSlides must be greater than zero' );
	}// End if
	
	// Set the number of visible slides
	this.iNumVisibleSlides = iNumVisibleSlides;
	
	// Set the currently selected slide index
	this.iCurrentSelectedSlide = 0;
	
	// Set the current index of the first visible slide
	this.iCurrentVisibleStartSlide = 0;
	
	// A flag set to true if we are supposed to highlight the selected slide *For the initial slide - code later on turns it to on for subsequent slides*
	this.bHighLightSelected = true;
	
	// Remove all of the slides from the container and store them in an array
	// for later use
	this.arSlides = new Array();
	var iSlideNum = 0;
	for( var n = 0; n < this.oContainer.childNodes.length; ++n )
	{
		if( this.oContainer.childNodes[n].nodeType == 1 )
			this.arSlides[iSlideNum++] = this.oContainer.childNodes[n];
	}// End for n
	
	// Get a named reference to this object
	var self = this;
	
	// Keeps track of the selected thumb id
	var sThumbId = '';
	
	// Populates the slider bases on the current start index
	// This should be private, but javascript doesn't have that
	this.populateSlideContainer = function()
	{
		// Clear out the container of slides
		while( self.oContainer.firstChild )
			self.oContainer.removeChild( self.oContainer.firstChild );

		// Put the current set of slides into the slider container
		var iSlideIndex = self.iCurrentVisibleStartSlide;
		for( var n = 0; n < self.iNumVisibleSlides; ++n )
		{
			// Put the next slide into the container
			self.oContainer.appendChild( self.arSlides[iSlideIndex] );
			
			// Put the class name onto the image for the current slide
			if( iSlideIndex == self.iCurrentSelectedSlide && self.bHighLightSelected )
			{
				self.oContainer.lastChild.getElementsByTagName( 'img' )[0].className = 'thumbNailSelected';
				sThumbId = self.oContainer.lastChild.id;
			}// End if
			else
				self.oContainer.lastChild.getElementsByTagName( 'img' )[0].className = 'thumbNailUnSelected';

			// Move the slide index forward and make sure its still in bounds
			iSlideIndex++;
			if( iSlideIndex >= self.arSlides.length )
				iSlideIndex = 0;
		}// End for n
		
		// Show the selected slide in the large image
		if( window.oFadeShow )
			window.oFadeShow.setCurrentImageByThumbId( sThumbId );
	}// End cSlider.populateSlideContainer
	
	
	// Selects an image based on its thumb id
	// sThumbId is the id of thumb to select
	this.selectImageByThumbId = function( sThumbId )
	{
		// If the thumb id isn't set, return
		if( ! sThumbId || sThumbId.length == 0 )
		{
			alert( 'thumb id not set ' + sThumbId );
			return;
		}// End if
			
		// Set the highlight flag to true
		self.bHighLightSelected = true;
		
		// Stop the fade show
		window.oFadeShow.stopFadeShow();

		// Keeps track the index of the image with matching ids
		var iImageIndex = -1;
		
		// Foreach of our thumb nails
		for( var n = 0; ( n < self.arSlides.length ) && ( iImageIndex < 0 ); ++n )
		{
			// If we found a matching id
			if( self.arSlides[n].id == sThumbId )
				iImageIndex = n;
		}// End for n
		
		// If we couldn't find the image
		if( iImageIndex < 0 )
			alert( 'Error in cSlider.selectImageByThumbId: Unable to find thumbnail with id of ' +
					sThumbId );
		else
		{
			// Set that slide to the current slide and repopulate the slider
			self.iCurrentSelectedSlide = iImageIndex;
			self.populateSlideContainer();
		}// End else
	}// End cSlider.selectImageByThumbId
	
	
	// Called when we want to go to the next slide
	this.scrollNext = function()
	{
		// Stop the fade show
		window.oFadeShow.stopFadeShow();
		
		// If the highlighted flag is false, set it to true
		if( ! self.bHighLightSelected )
			self.bHighLightSelected = true
		else
		{
			// Set the highlight flag to true
			self.bHighLightSelected = true;
	
			// Increment the current start slide
			self.iCurrentSelectedSlide++;
				
			// Make sure the start slide is still in bounds
			if( self.iCurrentSelectedSlide >= self.arSlides.length )
				self.iCurrentSelectedSlide = 0;
				
			// Count the distance between the start and current slides
			var iDist = 0;
			for( var n = self.iCurrentVisibleStartSlide; n != self.iCurrentSelectedSlide; n )
			{
				iDist++; n++;
				if( n >= self.arSlides.length )
					n = 0;
			}// End if
			
			// If we need to increment the start slide back to the first slide
			if( iDist >= self.iNumVisibleSlides )
			{
				self.iCurrentVisibleStartSlide++;
				if( self.iCurrentVisibleStartSlide >= self.arSlides.length )
					self.iCurrentVisibleStartSlide = 0;
			}// End if
		}// End else
			
		// Put the next set of slides into the container
		this.populateSlideContainer();
	}// End cSlider.scrollNext
	
	
	// Called when we want to go to the previous slide
	this.scrollPrevious = function()
	{
		// Stop the fade show
		window.oFadeShow.stopFadeShow();

		// If the highlighted flag is false, set it to true
		if( ! self.bHighLightSelected )
			self.bHighLightSelected = true
		else
		{
			// De-increment the current start slide
			self.iCurrentSelectedSlide--;
			
			// Make sure the start slide is still in bounds
			if( self.iCurrentSelectedSlide < 0 )
				self.iCurrentSelectedSlide = self.arSlides.length - 1;
	
			// Count the distance between the first visible and selected slides
			var iDist = 0;
			for( var n = self.iCurrentVisibleStartSlide; n != self.iCurrentSelectedSlide; n )
			{
				iDist++; n++;
				if( n > self.arSlides.length )
					n = 0;
			}// End for n
				
			// If we distance is greater that the number of slides we can show
			if( iDist >= self.iNumVisibleSlides )
			{
				self.iCurrentVisibleStartSlide--;
				if( self.iCurrentVisibleStartSlide < 0 )
					self.iCurrentVisibleStartSlide = self.arSlides.length - 1;
			}// End if
		}// End else
		
		// Put the next set of slides into the container
		this.populateSlideContainer();
	}// End cSlider.scrollPrevious
	
	// To be called from the fadeshow to show the next slide
	// Called when we want to go to the next slide
	this.fadeNext = function()
	{
		// If the highlighted flag is false, set it to true
		if( ! self.bHighLightSelected )
			self.bHighLightSelected = true
		else
		{
			// Set the highlight flag to true
			self.bHighLightSelected = true;
	
			// Increment the current start slide
			self.iCurrentSelectedSlide++;
				
			// Make sure the start slide is still in bounds
			if( self.iCurrentSelectedSlide >= self.arSlides.length )
				self.iCurrentSelectedSlide = 0;
				
			// Count the distance between the start and current slides
			var iDist = 0;
			for( var n = self.iCurrentVisibleStartSlide; n != self.iCurrentSelectedSlide; n )
			{
				iDist++; n++;
				if( n >= self.arSlides.length )
					n = 0;
			}// End if
			
			// If we need to increment the start slide back to the first slide
			if( iDist >= self.iNumVisibleSlides )
			{
				self.iCurrentVisibleStartSlide++;
				if( self.iCurrentVisibleStartSlide >= self.arSlides.length )
					self.iCurrentVisibleStartSlide = 0;
			}// End if
		}// End else
			
		// Put the next set of slides into the container
		this.populateSlideContainer();
	}// End cSlider.scrollNext
	
	// Put the first set of slides into the slider container
	this.populateSlideContainer();
}// End cSlider class definition

function initSlide()// will be called by window.onload in the navbar.js file to initiate slideshow
{
	// Create the images slider object
	window.oSlider = new cSlider( 'thumbNail', 5 );
	
	// Create the fadeshow object
	window.oFadeShow = new cFadeShow( 'largeRealmImg', fadeimages2 );
	window.oFadeShow.doFadeShow( 5 );
}


// Wraps calls to the fadeshow and slider to make the code neater
function fadeAndSlideById( sThumbId )
{
	// If the thumb id isn't set, return
	if( ! sThumbId || sThumbId.length == 0 )
		return;
	
//	window.oFadeShow.setCurrentImageByThumbId( sThumbId );
	window.oSlider.selectImageByThumbId( sThumbId );
}// End function fadeAndSlideById