var otherProducts =  new Array();
var indexPosition = 0;

function OtherProduct(productId, productName){

	this.productId = productId;
	this.productName = productName;

	return true;

} // end class OtherProduct

function OtherProducts_LoadDisplay(){
	// Show four items from the current index position, if we hit the end start at zero (but don't update the index)
	var myId = indexPosition;
	for(var i = 0;i < 4;i++){
		myId++;
		if(myId > (otherProducts.length -1)){
		myId = 0;
		}
				
		// Display in appropriate box
		// First clear the box content then insert the new content
		if($('OtherProduct' + (i+1)).hasChildNodes()){
			while($('OtherProduct' + (i+1)).childNodes.length >= 1 ) {
				$('OtherProduct' + (i+1)).removeChild($('OtherProduct' + (i+1)).firstChild);
			}
		}
		
		// Load up new data
		var myLink = document.createElement('a');
		myLink.setAttribute('href','product.php?id=' + otherProducts[myId].productId);
		myLink.setAttribute('title',otherProducts[myId].productName);
		// Setting the ProductLink class for auto-mouseover goodness.
		// PLEASE NOTE. This doesn't work in Firefox because the event handlers have been defined prior to this script being run. It does work in IE. This worries me.
		myLink.setAttribute('class','ProductLink');
		myLink.setAttribute('className','ProductLink');
		
		var myImage = document.createElement('img');
		myImage.setAttribute('src','/productImages/' + otherProducts[myId].productId + "_main_thumb.jpg");
		myImage.setAttribute('alt',otherProducts[myId].productName);
		myImage.setAttribute('border',0);

		myLink.appendChild(myImage);
		
		$('OtherProduct' + (i+1)).appendChild(myLink);
	}

} // end OtherProducts_LoadDisplay

function OtherProducts_MoveIndex(){
	indexPosition++;
	if(indexPosition > (otherProducts.length - 1)){
	indexPosition = 0;
	}
} // end OtherProducts_MoveIndex

function OtherProducts_MoveIndexBack(){
	indexPosition--;
	if(indexPosition < 0){
	indexPosition = otherProducts.length - 1;
	}
} // end OtherProducts_MoveIndexBack

function OtherProducts_Initialise(){
	// Only initialise if there are any products to play with
	if(otherProducts.length > 0){

		// Load the display
		OtherProducts_LoadDisplay();

		// Set event handler on button to move index and load display
		addEvent($('OtherProductArrow_Left'), 'click', function(){OtherProducts_MoveIndex(); OtherProducts_LoadDisplay();}, false);
		addEvent($('OtherProductArrow_Right'), 'click', function(){OtherProducts_MoveIndexBack(); OtherProducts_LoadDisplay();}, false);
	}
} // end OtherProducts_Initialise

addEvent(window, 'load', OtherProducts_Initialise, false);