function drawMainImage(key, caption){
	var elementName = 'prodMainImage' + key;

	//First let's hide all of the other displayed element.
	if(displayedMain >= 0){
		var tempElementName = 'prodMainImage' + displayedMain;
		document.getElementById(tempElementName).style.display = 'none';
	}
	
	//Now let's display the one we want
	document.getElementById(elementName).style.display = 'block';
	displayedMain = key;
	
	//Now let's display the caption should there be one;
	var html = ' ';
	if(caption && caption != ''){
		html = caption;
	}
	
	document.getElementById("prodCaption").innerHTML = html;
}

function cycleThumbs(pID, direction, key, url){
	var start;
	var end;
	var indexes = new Array();

	//First let's get our starting and ending points.
	if(direction > 0){
		start = parseInt(key) + parseInt(1);
		
		if(start > parseInt(totalCount) - parseInt(1)){
			start = parseInt(0);
		} else {
			//Nothing
		}
		
		end = parseInt(start) + (parseInt(maxThumbs) - parseInt(1));
		
		if(end > (parseInt(totalCount) - parseInt(1))){
			end = (parseInt(key) + parseInt(maxThumbs)) - parseInt(totalCount);
		} else {
			//Nothing
		}
	} else {
		end = parseInt(key) - parseInt(1);
		
		if(end < parseInt(0)){
			end = parseInt(totalCount) - parseInt(1);
		}
		
		start = parseInt(end) - (parseInt(maxThumbs) - parseInt(1));
		
		if(start < parseInt(0)){
			start = parseInt(totalCount) - (parseInt(start) * parseInt(-1));
		}
	}
	
	indexes.push(start);
	
	//Now that we have our starting and ending indexes we can grab the images and their respective alt tags, captions, etc.
	//to build the html we will return to the page.
	var photoSubGroups = new Array();
	photoSubGroups.push(photoGroups[start]);
	var trueStart = start;
	var current = start++;
	
	//We know the end points here, the trick is filling in the rest.  The minus one accounts for the end point.
	while(parseInt(photoSubGroups.length) < (parseInt(maxThumbs) - parseInt(1))){
		current++;
		if(!photoGroups[current]){
			current = 0;
		}

		photoSubGroups.push(photoGroups[current]);
		indexes.push(current);
	}

	photoSubGroups.push(photoGroups[end]);
	
	indexes.push(end);
	
	
	var html;
	var groupLength = photoSubGroups.length;

	html = '<table><tr><td>';
	html += '<a href="javascript:cycleThumbs';
	html += "('" + pID + "', '-1', '" + trueStart + "', '" + url + "')";
	html += '"><img src="' + url + '/images/left_photo.gif" width="13" height="20" alt="" border="0" /></a>';
	html += '</td><td nowrap="nowrap">';

	for(var i=0;i<groupLength;i++){
		var photoGroup = photoSubGroups[i];
		var thumb = photoGroup[0];
		var main = photoGroup[1];
		var popup = photoGroup[2];
		
		//If a url has been specified for this image then use that.
		if(thumb[5]){
			var finalImageURL = thumb[5];
		} else {
			var finalImageURL = imageLocation + '/' + imageURL + '/' + thumb[2];
		}

		html += '<a href="javascript:swapImage()" onclick="javascript:drawMainImage';
		html += "('" + indexes[i] + "', '" + sanitizeString(main[3]) + "')";
		html += '">';
		html += '<img src="' + finalImageURL + '"';
		html += ' alt="' + thumb[4] + '" title="' + thumb[4] + '" border="0" width="' + thumb[0] + '" height="' + thumb[1] + '" />';
		html += '</a>&nbsp;&nbsp;';

	}

	html += '</td><td>';
	html += '<a href="javascript:cycleThumbs';
	html += "('" + pID + "', '1', '" + end + "', '" + url + "')";
	html += '"><img src="' + url + '/images/right_photo.gif" width="13" height="20" alt="" border="0" /></a>';
	html += '</tr></table>';

	document.getElementById("prodThumbnails").innerHTML = html;
}

function sanitizeString(string){
	var length = string.length;
	var newString = '';
	var watch = '';
	var watchstring = '';
	
	for(i=0;i<length;i++){
		var char = string.charAt(i);
		
		if(char == "'"){
			char = "\'";
		} else if(char == '&'){
			watch = true;
		}
		
		if(watch != true){
			newString += char;
		}		
		
		if(watch == true){
			watchstring += char;
			
			if(char == ';'){
				watch = false;
				
				if(watchstring == '&#039;'){
					newString += "\\'";
				}
			}
		}
	}

	return newString;
}

//This is just a dummy function.  The reason this is here is because previously the thumbnail images on the product detail page referenced # which
//would reload the page and always go to the top of the page.  By doing this the page does not need to be reloaded and will always remain at
//the position the user has scrolled to.
function swapImage(){

}