/**************************************************************************************
===================================== carousel.js =====================================
***************************************************************************************/ 
var currentItem,currentIdx;
var prevItem,prevIdx;
var nextItem,nextIdx;
var lastItem,lastIdx;    
// used to keep track of which product user is viewing (i.e. 4 of 7)
var productCounter = 1;
var productTotal; 
var timingLong = 300; // * animation timing for viewable item state changes
var timingShort = 300; // * animation timing for the item that disappears.    
var animation1done = false; // * one of the 3 flags used to disable links until animation finished
var animation2done = false; // * one of the 3 flags used to disable links until animation finished
var animation3done = false; // * one of the 3 flags used to disable links until animation finished
var animationComplete = false;	// * flag to indicate carousel animation complete	
var productImagesDiv; // * HTML div containing the product carousel images
var imagesFolder = "/cs/Satellite?ssbinary=true&blobcol=urldata&blobtable=MungoBlobs&blobkey=filevalue&blobwhere=";
var arrCarouselImages = new Array();    
// * Carousel image sizes. To maintain quality ratio width:hight should be same as original size * //
// * Currently the ration is set to 3:2 (although product8 image is 3 pixels off) * //
var imageWidthSmall = 90;
var imageHeightSmall = 60;
var imageWidthLarge = 180;
var imageHeightLarge = 120;

/***************************************************************************************************
* Function that does the management of the images including the movement and current index changes.
*/
function carouselClick(pAction, pNewItem, pSelectedItem, pPreviousItem, pOriginalNextItem){
	// * Get the newly ordered 'CarouselArea' images - store in array local to CAROUSEL.JS so that other functions can use it * //
	var j = 0;
	var d = document.getElementById('CarouselArea');
	arrCarouselImages = new Array(); // Defined at begining of CAROUSEL.JS
	var imgs = document.getElementsByTagName('IMG');
	for (i=0; i<imgs.length; i++){
		if (imgs[i].parentNode.id == 'CarouselArea'){
			arrCarouselImages[j] = imgs[i];
			j++;
		}
	}
	animation1done=false;
	animation2done=false;
	animation3done=false;
	animationComplete=false;
            
	// * Disable the click events as fast-clicking causes odd behaviour due to queue-less animations * //
	$("#linkprevious").unbind("click",aPrevClick);
	$("#linknext").unbind("click",aNextClick);            

	// * Shrink the previous 'current' image  * //
	$('#'+arrCarouselImages[pPreviousItem].id).animate({ 
		width:imageWidthSmall+"px",
		height:imageHeightSmall+"px",
		marginLeft:0,
		marginRight:0
	}, timingLong, '',  function(){set1(pAction);});

	// * Shrink previous 'next' image then run finalising function  * //
	$('#'+arrCarouselImages[pOriginalNextItem].id).animate( {                
		width:"0px",
		height:"0px",
		opacity:0
	}, timingShort, function(){ set2(pAction); } );            
            
	// * Grow the new 'current' image  * //
	$('#'+arrCarouselImages[pSelectedItem].id).animate( { 
		width:imageWidthLarge+"px",
		height:imageHeightLarge+"px" ,
		marginLeft:30,
		marginRight:30
	}, timingLong, '', function(){set3(pAction);});

	// * Display the new 'prev' or 'next' image (depending on direction of movement)  * //
	$('#'+arrCarouselImages[pNewItem].id).width(0);
	$('#'+arrCarouselImages[pNewItem].id).animate( { 
		width:imageWidthSmall+"px",
		height:imageHeightSmall+"px",
		opacity: 1
	}, { queue:false, duration:timingLong } );

	// * Change current index/item * //
	if (pAction == 'next'){
		currentIdx++;
	}
	else if (pAction == 'prev'){
		currentIdx--;
	}            
	currentItem = arrCarouselImages[currentIdx];        
}

/***************************************************************************************************
* Function to perform final steps of animation process.
* To be called after main steps have finished.
*/
function animateFinalStep(pDirection){
	if (doubleProducts == false && tripleProducts == false) {
		productTotal = arrCarouselImages.length;
	} else {
		if (doubleProducts == true) {
			productTotal = arrCarouselImages.length/2;
			} else if (tripleProducts == true) {
				productTotal = arrCarouselImages.length/3;
			}
	}

	if (pDirection == 'prev'){            
		// * Hide the 'next' (now unseen) item * //
		$('#'+arrCarouselImages[3].id).hide();
               
		// * Move very last item to beginning of image div * //
		$('#'+arrCarouselImages[arrCarouselImages.length-1].id).insertBefore('#'+arrCarouselImages[0].id);

		// * Now make adjustment in array - Remove last item (pop) then stick it at the beginning (unshift the 'popped' item) * //
		arrCarouselImages.unshift(arrCarouselImages.pop());
                
		// * decrement position counter * //
		if (productCounter == 1){
			productCounter = productTotal;
		}else{
			productCounter--;
		}
	}
	else if (pDirection == 'next'){            
		// * Hide the 'prev' (now unseen) item * //
		$('#'+arrCarouselImages[1].id).hide();

		// * Move first item to end of image div * //
		$('#'+arrCarouselImages[0].id).insertAfter('#'+arrCarouselImages[arrCarouselImages.length-1].id);

		// * Now make adjustment in array - Remove first item (shift) then stick it at the end (push the 'shift'ed item) * //
		arrCarouselImages.push(arrCarouselImages.shift());
                
		// * increment position counter * //
		if (productCounter == productTotal){
			productCounter = 1;
		}else{
			productCounter++;
		}                
	}

	// * Change page number  * //
	document.getElementById('ProductPositionNumber').innerHTML = productCounter + '/' + productTotal;

	// * Get the product code from the product image * //
	var currentProductCode = getProductCode(arrCarouselImages[2].title);

	// * Populate all product details from array * //
	loadProductData(currentProductCode);

	// * bind the click events * //
	if (animationComplete == true){ 
		$("#linkprevious").bind("click",aPrevClick);
		$("#linknext").bind("click",aNextClick);
	}
}

/***************************************************************************************************
* Load the current products data into DIVs 
* @param - pCode - string containing product code
*/
function loadProductData(pCode /*string*/){
	// * Get the DIVs  * //
	var ProductNameSpan = document.getElementById('ProductNameSpan');
	var ProductDetailsDiv = document.getElementById('ProductDetailsArea');
	var ProductQuickLinksDiv = document.getElementById('QuickLinks');
	var ProductAwardsImgDiv = document.getElementById('ProductAwardImgDiv');
	var ProductBuyLinkDiv = document.getElementById('ProductBuyLink');
	var ProductIdx = 0;

	// * Get index of array for product code supplied
	for (var i=0; i<AJAXProductArray.length; i++ ){
		if (AJAXProductArray[i][0].toLowerCase() == pCode.toLowerCase()){
			ProductIdx = i;
		}
	}

	// * Populate DIVs with data * //
	ProductDetailsDiv.innerHTML = AJAXProductArray[ProductIdx][2];
	ProductNameSpan.innerHTML = AJAXProductArray[ProductIdx][0] + " " + '<br/>' + AJAXProductArray[ProductIdx][3];

	// * Click on main image to open 3D product link if it is available - Begin
	arrCarouselOnClickImages = new Array(); 
	var imgsOnClick = document.getElementsByTagName('IMG');
	var aa = 0;
	for (i=0; i<imgsOnClick.length; i++){
		if (imgsOnClick[i].parentNode.id == 'CarouselArea'){
			arrCarouselOnClickImages[aa] = imgsOnClick[i].id;
			aa++;
		}
	}

	for(j=0; j<arrCarouselOnClickImages.length; j++){
		$("#" + arrCarouselOnClickImages[j]).unbind("click");

		$("#"+ arrCarouselOnClickImages[j]).mouseover(function(){
			this.style.cursor='';	
		});
	}

	if (AJAXProductArray[ProductIdx][8] != ''){
		$("#"+ arrCarouselOnClickImages[2]).mouseover(function(){
			this.style.cursor='pointer';	
		});

		$("#"+ arrCarouselOnClickImages[2]).click(function(){
			window.open(AJAXProductArray[ProductIdx][8], '_blank');
		});
	}

	// * Click on main image to open 3D product link if it is available - End
	ProductQuickLinksDiv.innerHTML = AJAXProductArray[ProductIdx][7];
	ProductBuyLinkDiv.innerHTML = AJAXProductArray[ProductIdx][5];
	if (AJAXProductArray[ProductIdx][6] != '')
	{				
		ProductAwardsImgDiv.innerHTML = '<img src="'+ AJAXProductArray[ProductIdx][6] + '" title="'+AJAXProductArray[ProductIdx][6]+'" alt="'+AJAXProductArray[ProductIdx][6]+'"/>';
	}else{
		ProductAwardsImgDiv.innerHTML = '';
	}

	// * Attach a function to each of the links within the tabs the sets the clicked tba to selected and de-selects all the other tabs
	$("#ProductDescTabs > div > h2 > a").each(function(i){
		$(this).click(function(event) {
			var tabID = $(this).parent().parent("div.Tab").attr("id");
			$("#"+tabID).addClass("Selected");
			$("#ProductDescTabs > div[id!=" + tabID + "]").removeClass("Selected");
			$("#" + tabID + "Content").show();
			$("#ProductDescContent > div[id!=" + tabID + "Content]").hide();

			// How many tabs do we have?
			var tabClass = $("#ProductDescTabs").attr("class");

			// To get the Tab color
			var tabColour = "blue";
			var tabColourStatus = tabClass.indexOf("red");
			if (tabColourStatus != -1){
				tabColour = "red";
			}

			var tabNumberIndex = tabClass.indexOf(" ");
			var numberOfTabs = tabClass.substring(tabNumberIndex, tabClass.length).replace(/tabs/g,"").replace(/tab/g,"").replace(/^\s\s*/, '').replace(/\s\s*$/, '');

			var tabString = "tabs";
			if (numberOfTabs == "one") {
				tabString = "tab";
			}			

			$("#ProductDescTabs").attr("class", numberOfTabs + tabString + "_" + tabID.toLowerCase() + "_" + tabColour + " " + numberOfTabs+ tabString);
			$("#ProductDescGradientContainer").attr("class", "gradient_"+ numberOfTabs + tabString + "_" + tabID.toLowerCase() + "_" + tabColour);
		});
	});

	// * Set the class values of the tabs and gradient containers  * //
	var tabClass = $("#ProductDescTabs").attr("class");

	// To get the Tab color
	var tabColour = "blue";
	var tabColourStatus = tabClass.indexOf("red");
	if (tabColourStatus != -1){
		tabColour = "red";
	}
	
	var tabNumberIndex = tabClass.indexOf(" ");
	var numberOfTabs = tabClass.substring(tabNumberIndex, tabClass.length).replace(/tabs/g,"").replace(/tab/g,"").replace(/^\s\s*/, '').replace(/\s\s*$/, '');
	var tabString = "tabs";
	if (numberOfTabs == "one") {
		tabString = "tab";
	}
	$("#ProductDescTabs").attr("class", numberOfTabs + tabString + "_tab1_" + tabColour + " " + numberOfTabs+ tabString);
	$("#ProductDescGradientContainer").attr("class", "gradient_"+ numberOfTabs + tabString + "_tab1_" + tabColour);
}

/***************************************************************************************************
* Get the product code from a string where the code in encased in square brackets [<code>]
* @param - s - string containing product code
* EXAMPLE: source = 'image for [pcode1]', getProductCode(source) = 'pcode1'
*/
function getProductCode(s /*string*/){
	var p1,p2;
	p1 = s.indexOf('[')+1;
	p2 = s.indexOf(']');
	return s.substring(p1,p2);
}

/***************************************************************************************************
* Flag setting function for checking animation1 has finished
*/       
function set1(pDirection){
	animation1done = true;
	if (animation1done == true && animation2done == true && animation3done == true){
		animationComplete = true;
		animateFinalStep(pDirection);
	}
}

/***************************************************************************************************
* Flag setting function for checking animation2 has finished
*/
function set2(pDirection){
	animation2done = true;
	if (animation1done == true && animation2done == true && animation3done == true){
		animationComplete = true;
		animateFinalStep(pDirection);
	}
}

/***************************************************************************************************
* Flag setting function for checking animation2 has finished
*/
function set3(pDirection){
	animation3done = true;
	if (animation1done == true && animation2done == true && animation3done == true){
		animationComplete = true;
		animateFinalStep(pDirection);
	}
}

/***************************************************************************************************
* Function for click event of button - uses first 4 items of array
*/
function aPrevClick(){
	carouselClick('prev', 0, 1, 2, 3);
}

/***************************************************************************************************
* Function for click event of button - uses 4 items of array (second - fifth)
*/
function aNextClick(){
	carouselClick('next', 4, 3, 2, 1);
}

$(document).ready(function(){
	$("#linkprevious").bind("click",aPrevClick);
	$("#linknext").bind("click",aNextClick);
});

/**************************************************************************************
================================ productfilter.js =====================================
***************************************************************************************/
var iResults= new Array();
var arrSelectedSubFamilies= new Array();
var productarray;

function repopulate_results(s){		
	var c = document.getElementById(s);
	if (c.checked){
		iResults.push(c.name);
	}
	else{
		// 15.06.2009 || Add following code to remove exact element rather than last element - Begin
		for (var i = 0; i < iResults.length; i++) {
			if (iResults[i]==c.name){
				iResults.splice(i,1);
			}
		}
		// 15.06.2009 || Add following code to remove exact element rather than last element - End
	}
	
	var formInputs = document.getElementsByTagName("input");
	for(var i = 0; i < formInputs.length;i++) {
		if(formInputs[i].type == "checkbox"){
			formInputs[i].disabled = "disables";
		}
	}
	
	filter_results(iResults);	
}

/***
* Build a new array of product objects that match the criteria
*/
function filter_results(categoryarray){	
	var arrProducts = new Array();
	// Array of Master Sub-Families and members
	var arrMasterFamiliesItems = new Array();
	var arrAvailableSubFamilies = new Array(5);

	var allInputs = document.getElementsByTagName("input");
	
	var serviceRelatedProductCode = "";	
	if (document.getElementById('serviceRelatedDropDown') != null){		
		serviceRelatedProductCode = $("#serviceRelatedDropDown option:selected").attr('value');
	}
	
	if (iResults == null || iResults.length == 0) {
		//makeHttpRequest(productPaneUrl, 'GetProductDetails', false);
		
		var queryString = "";
		queryString = queryString + "selectedProductCode=" + serviceRelatedProductCode + "&";
		queryString = escape(queryString);
		var url = productPaneUrl + "&packedargs=" + queryString;				
		makeHttpRequest(url, 'GetProductDetails', false);
		
	} else {
		var queryString = "";
		for (var i = 0; i < iResults.length; i++) {
			queryString = queryString + iResults[i] + "=checked&";			
		}
		
		queryString = queryString + "selectedProductCode=" + serviceRelatedProductCode + "&";
		queryString = escape(queryString);
		
		var url = productPaneUrl + "&packedargs=" + queryString;
		makeHttpRequest(url, 'GetProductDetails', false);
	}	
	
	var typeUrl = productTypePaneUrl + "&packedargs=" + queryString;
		
	// Also need to update the checkboxes here
	$.get( typeUrl, function(data){
		if (eval(data)== null){
			var allFormInputs = document.getElementsByTagName("input");
			for(var i = 0; i < allFormInputs.length;i++) {
				if(allFormInputs[i].type == "checkbox"){	
					allFormInputs[i].disabled = false;
				}
			}
		}

		var newCheckBoxArray = eval(data);
		masterCheckboxArray = newCheckBoxArray.slice();
		for(var i = 0; i < masterCheckboxArray .length;i++) {
			for(var c=0;c<masterCheckboxArray[i][2].length;c++){
				var id = masterCheckboxArray[i][2][c][0];

				if (masterCheckboxArray[i][2][c][4] == "disabled" && $("input:checkbox[id=" + id +"]").attr("checked") != true) {
					$("input:checkbox[id=" + id +"]").attr("disabled","disabled");
					$("label[id=l" + id +"]").addClass("disabled");
				} else {
					$("input:checkbox[id=" + id +"]").removeAttr("disabled");
					$("label[id=l" + id +"]").removeClass("disabled");
				}
			}
		}					
	});
	
	/***
	* Output the results
	*/
	//var d = document.getElementById('ProductsResults');
	//d.innerHTML = outputHTML(productarray);
	//Update the number of products found
	//document.getElementById('numberproducts').innerHTML = productarray.length;
}

function outputHTML(pProducts){	
	var sHTML = "";
	var iCount = 1;
	for(var x=0;x<pProducts.length;x++){
		if (iCount%2 != 0){
			//Odd row - left column
			sHTML +=    '<div class="ResultsRow">' + '<div class="ResultsItemLeft">' + pProducts[x][7] + '</div>';
		}
		else{
			//Even row - right column
			sHTML +=    '<div class="ResultsItemRight">' + pProducts[x][7] + '</div>';
			// close row
			sHTML += '<div class="ClearProduct"> </div></div>';
		}
		iCount ++;
	}

	if (pProducts.length%2 != 0){
		// No more items so add one to the right
		sHTML +=    '<div class="ResultsItemRight">&nbsp; </div><div class="ClearProduct"> </div></div>';
	}
	return sHTML
}
    
function prodfamilystart() {
	//makeHttpRequest(productTypePaneUrl, 'GetProductHTML', false)
}

/**************************************************************************************
================================ AJAX_return_functions.js =============================
***************************************************************************************/
/**
 * AJAX_RETURN_FUNCTIONS
 * Functions that are called using the result of a HTTP call as the parameter
 */
/**
 * create the Product Finder extended textbox
 * @param - pArrayDataString : String representation of an array - '["element1","element2","element3","element4"]'
 */
function CreateProductFinder(pArrayDataString){
	var oProductFinder = new AutoSuggestControl( document.getElementById("txtProductFinder"), new ProductSuggestions( eval(pArrayDataString) ) );
}

/**
 * populate criteria range checkboxes panel HTML
 * @param - pRangeCode : string containing range code
 */
function GetProductHTML(pCheckboxArray /*string*/){
	// Populate the DIV with HTML	
	pCheckboxArray = eval(pCheckboxArray);
	masterCheckboxArray = pCheckboxArray.slice();
	var strHTML = '';
	for(var s=0;s<masterCheckboxArray.length;s++){
		strHTML += '<div class="FloatLeft"><div class="LabelColumn"><div class="ColumnTitle">' + masterCheckboxArray[s][1] + '</div>';
		// Label col
		for(var c=0;c<masterCheckboxArray[s][2].length;c++){
			strHTML += '<div class="CheckBoxRow"><label ' + masterCheckboxArray[s][2][c][2] + ' id="l' + masterCheckboxArray[s][2][c][0] + '" for="' + masterCheckboxArray[s][2][c][0] + '">' + masterCheckboxArray[s][2][c][1] + '</label></div>';
		}
		strHTML += '</div>';
		// Checkbox column : add extra class if needed
		strHTML += '<div class="CheckBoxColumn ';
		if (s == masterCheckboxArray.length-1){strHTML += 'FinalColumn';}
		strHTML += '"><div class="ColumnTitle">&nbsp;</div>';

		for(var c=0;c<masterCheckboxArray[s][2].length;c++){
			strHTML += '<div class="CheckBoxRow">';
			strHTML += '<input type="checkbox" ' + masterCheckboxArray[s][2][c][3] + ' name="' + masterCheckboxArray[s][2][c][0] + '" value="' + s + '" id="' + masterCheckboxArray[s][2][c][0] + '" onclick="repopulate_results(this.name,\'' + s + '\');" /></div>';
		}
		strHTML += '</div></div>'    ;
	}    
	var MainDivName = 'CheckBoxesColumns';
	var d = document.getElementById(MainDivName);
	d.innerHTML = strHTML;
	// Now the HTML is loaded, get the data 
	makeHttpRequest(productPaneUrl, 'GetProductDetails', false);
}

/**
 * Check the checkboxes and call the filter
 * @param - pProductCode : string containing product code to display
 */
function GetProductDetails(pProductRangeString){
	// Populate the array with the data    
	productarray = eval(pProductRangeString);    
	// Now we've got the HTML and the Array we can filter
	//filter_results(iResults);
	var d = document.getElementById('ProductsResults');
	d.innerHTML = outputHTML(productarray);             
	//Update the number of products found
	document.getElementById('numberproducts').innerHTML = productarray.length;
}

/**
 * populate page with appropriate content
 * @param - pContent : string containing page html
 */
function GetPageDetails(pContent /*string*/){
	var MainDivName = 'MainBodyArea';
	var d = document.getElementById(MainDivName);
	d.innerHTML = pContent;
}

/**
 * Fetch the HTML for the Downloads Centre tabs (4)
 * @param - pTabHTMLString : string containing Tab HTML
 */
function CreateTabs(pTabHTMLString){
	/* Render the tabs HTML*/
	var TabDivName = 'DownloadsTabs';
	var d = document.getElementById(TabDivName);
	d.innerHTML = pTabHTMLString;
	/* Now render the tab content for the first time*/
	makeHttpRequest('snippet_downloads.asp?createtabs=false&id=1', 'CreateTabContent', false);
}

/**
 * Fetch the HTML for the Downloads Centre Content
 * @param - pContentHTMLString : string containing content HTML
 */
function CreateTabContent(pContentHTMLString){
	/* Render the tabs HTML*/
	var ContentDivName = 'DownloadsContent';
	var d = document.getElementById(ContentDivName);
	d.innerHTML = pContentHTMLString;
}

function CreateProductContent(pDownloadProductString){
	// Populate the productarray with data    
	productarray = eval(pDownloadProductString);
	//Get the HTML for checkboxes for Tab 2
	makeHttpRequest('snippet_downloads.asp?createtabs=false&id=2', 'CreateTab2HTML', false);
}   

function CreateTab2HTML(pDownloadProductHTML){
	/* Render the tabs HTML*/
	var ContentDivName = 'DownloadsContent';
	var d = document.getElementById(ContentDivName);
	d.innerHTML = pDownloadProductHTML;
	// Set the product count element to be visible
	document.getElementById("DownloadsTotalFound").className= 'visible';
	// Filter the results (first time through)
	filter_results(iResults);
}

/**
 * Fetch the HTML for the product title (Product Description Page)
 * @param - pTitleString : string containing content HTML
 */
function PopulateProductTitle(pTitleString){
	/* Render the product title HTML*/
	var ProductTitleDivName = 'ProductNameDiv';
	var d = document.getElementById(ProductTitleDivName);
	var preHTML = '<h2 class="blue">';
	var postHTML = '</h2>';    
	d.innerHTML = preHTML + pTitleString + postHTML;
}

/**
 * Fetch the HTML for the product title (Product Description Page)
 * @param - pDetailsString : string containing content HTML
 */
function PopulateProductDetails(pDetailsString){
	/* Render the product title HTML*/
	var ProductDetailsDivName = 'ProductDetailsArea';
	var d = document.getElementById(ProductDetailsDivName);    
	d.innerHTML = pDetailsString;
}

/**
 * Fetch the HTML for the product title (Product Description Page)
 * @param - pQuickLinksString : string containing quick links content HTML
 */
function PopulateQuickLinks(pQuickLinksString){
	/* Render the product quick links HTML*/
	var ProductQuickLinksDivName = 'QuickLinks';
	var d = document.getElementById(ProductQuickLinksDivName);    
	d.innerHTML = pQuickLinksString;
}

/**
 * Fetch the HTML for the product awards image (Product Description Page)
 * @param - pAwardsImgString : string containing quick links content HTML
 */
function PopulateAwardsImg(pAwardsImgString){
	/* Render the product quick links HTML*/
	var ProductAwardsImgDiv = 'ProductAwardImgDiv';
	var d = document.getElementById(ProductAwardsImgDiv);
	d.innerHTML = pAwardsImgString;
}

/**
 * 
 * @param - pDataString : string containing data
 */
function CreateProductObjects(pDataString){
	// * Get 2D product array data * //
	//var AJAXProductArray = eval(pDataString);
	AJAXProductArray = eval(pDataString);
	var AJAXImageArray = new Array();

	// * Create products image array * //
	for ( var i=0, len=AJAXProductArray.length; i<len; ++i ){
		// * Create the element and assign ID * //
		var tmp = document.createElement("IMG");
		tmp.id = 'productImage' + i;
		tmp.name = 'productImage' + i;
		// * Get the image details for the code * //
		tmp.src = 'productImages/' + AJAXProductArray[i][1];
		tmp.alt = 'Image for [' + AJAXProductArray[i][0] + ']';
		tmp.title = 'Image for [' + AJAXProductArray[i][0] + ']';
		// * Add default class then determine if we need to add another * //
		tmp.className = 'block';  
		if (i == 2){tmp.className = 'block mainblock';}
		if (i == 0 || i > 3){tmp.className = 'block hiddenblock';}			
		// * assign current index to created IMG element
		AJAXImageArray[i] = tmp;
		// * Set the last item * //
		lastIdx = i;
		lastItem = tmp;
	}
	var productCounter = 1;
	var productTotal = AJAXImageArray.length;
	// * Clear the progress image * //
	document.getElementById('CarouselArea').innerHTML = '';
	// * Populate carousel DIV with image data * //
	for ( var i=0, len=AJAXProductArray.length; i<len; ++i ){
		document.getElementById('CarouselArea').appendChild(AJAXImageArray[i]);
	}
	// * Display numbering information * //
	document.getElementById('ProductPositionNumber').innerHTML = productCounter + '/' + productTotal;
	// * Display link * //
	document.getElementById('ProductBuyLink').innerHTML = '<a href="javascript:void(0);" title="' + AJAXProductArray[2][0] + '" alt="' + AJAXProductArray[2][0] + '" class="blue">Buy this product now</a>';
	// * Populate title * //
	document.getElementById('ProductNameSpan').innerHTML = AJAXProductArray[2][3];
	// * Populate awards img (if there is one) * //
	if (AJAXProductArray[2][6] != ''){
		document.getElementById('ProductAwardImgDiv').innerHTML = '<img src="/images/' + AJAXProductArray[2][6] + '" title="'+AJAXProductArray[2][6]+'" alt="'+AJAXProductArray[2][6]+'"/>';
	}
	// * Populate 'Quick Links' * //
	document.getElementById('QuickLinks').innerHTML = AJAXProductArray[2][7];
	// * Populate product data * //
	document.getElementById('ProductDetailsArea').innerHTML = AJAXProductArray[2][2];
	$(document).ready(function(){
		$("#linkprevious").bind("click",aPrevClick);
		$("#linknext").bind("click",aNextClick);
	});    
}