var THUMBSIZEWIDTH = 47;
var THUMBSIZEHEIGHT = 47;
var THUMBCONTAINERWIDTH = 60;
var RIBBONSIZE = 5;
var PREVIMGSRC = "/images/quiltsetc_ribbon_left_btn.gif";
var NEXTIMGSRC = "/images/quiltsetc_ribbon_right_btn.gif";
var MAXLEFT;

var CURRENTIMAGE = 0;
var CURRENTPOS = 0;
var PREVIOUSEND = true;
var NEXTEND = false;
var DISABLEZOOM = true;
var ACTUALIMAGES = new Array();

function loadImages(){

	/*****************
	/** BUILDS THE FOLLOWING STRUCTURE

		<table cellpadding="0" cellspacing="0" border="0" height="65">
			<tbody>
				<tr>
					<td><span class="UI_RibbonImage"><a href="javascript:void(0);" onclick="loadThisImage(0);"><img src="/images/quiltsetc_ribbon_image_1.jpg" width="47" height="47" alt="Ribbon Image 1" border="1" id="RIMAGE0" /></a></span></td>
					<td><span class="UI_RibbonImage"><a href="javascript:void(0);" onclick="loadThisImage(1);"><img src="/images/quiltsetc_ribbon_image_2.jpg" width="47" height="47" alt="Ribbon Image 2" border="1" id="RIMAGE1" /></a></span></td>
					<td><span class="UI_RibbonImage"><a href="javascript:void(0);" onclick="loadThisImage(2);"><img src="/images/quiltsetc_ribbon_image_3.jpg" width="47" height="47" alt="Ribbon Image 3" border="1" id="RIMAGE2" /></a></span></td>
					<td><span class="UI_RibbonImage"><a href="javascript:void(0);" onclick="loadThisImage(3);"><img src="/images/quiltsetc_ribbon_image_4.jpg" width="47" height="47" alt="Ribbon Image 4" border="1" id="RIMAGE3" /></a></span></td>
					<td><span class="UI_RibbonImage"><a href="javascript:void(0);" onclick="loadThisImage(4);"><img src="/images/quiltsetc_ribbon_image_5.jpg" width="47" height="47" alt="Ribbon Image 5" border="1" id="RIMAGE4" /></a></span></td>
					<td><span class="UI_RibbonImage"><a href="javascript:void(0);" onclick="loadThisImage(5);"><img src="/images/quiltsetc_ribbon_image_6.jpg" width="47" height="47" alt="Ribbon Image 6" border="1" id="RIMAGE5" /></a></span></td>
					<td><span class="UI_RibbonImage"><a href="javascript:void(0);" onclick="loadThisImage(6);"><img src="/images/quiltsetc_ribbon_image_7.jpg" width="47" height="47" alt="Ribbon Image 7" border="1" id="RIMAGE6" /></a></span></td>
					<td><span class="UI_RibbonImage"><a href="javascript:void(0);" onclick="loadThisImage(7);"><img src="/images/quiltsetc_ribbon_image_8.jpg" width="47" height="47" alt="Ribbon Image 8" border="1" id="RIMAGE7" /></a></span></td>
				</tr>
			</tbody>
		</table>
		
	********************/

	var table = Builder.node('table', {
		cellpadding: "0", 
		cellspacing: "0", 
		border: "0", 
		height: "65"
	});
	table = $(table);

	var tbody = Builder.node('tbody');
	tbody = $(tbody);
	table.appendChild(tbody);
	
	var tr = Builder.node('tr');
	tr = $(tr);
	tbody.appendChild(tr);
	
	for(i=0; i<=IMAGES.length-1;i++){
	
		if(IMAGES[i][0] != "" && IMAGES[i][2] != ""){
		
			ACTUALIMAGES.push(IMAGES[i]);
			
			var td = Builder.node('td');
			td = $(td);
			tr.appendChild(td);
			
			var span = Builder.node('span', {
				className: "UI_RibbonImage"
			});
			span = $(span);
			td.appendChild(span);
			
			var a = Builder.node('a', {
				href: "javascript:void(0);", 
				onclick: "loadThisImage(" + i + ");" 
			});
			a = $(a);
			span.appendChild(a);
			
			var img = Builder.node('img', {
				src: IMAGES[i][2], 
				width: THUMBSIZEWIDTH, 
				height: THUMBSIZEHEIGHT, 
				alt: "", 
				border: "1", 
				id: "RIMAGE" + i
			});
			img = $(img);
			a.appendChild(img);
			
		}
		
	}

	if(ACTUALIMAGES.length > 0){
	
		MAXLEFT = (((ACTUALIMAGES.length-RIBBONSIZE)*THUMBCONTAINERWIDTH)*-1);
	
		$(table).setStyle({
			width: (ACTUALIMAGES.length*THUMBCONTAINERWIDTH) + 'px'
		});
	
		$('UI_ImageRibbon').insert(table);

		loadPrevImage();
		loadNextImage();
		
		var imgMAINIMAGE = $("ProductImage");
		if(imgMAINIMAGE && ACTUALIMAGES[0][0] != ""){
			
			var img = Builder.node('img', {
				src: ACTUALIMAGES[0][0], 
				alt: "", 
				border: "0"
			});
			img = $(img);
			imgMAINIMAGE.update('');
			imgMAINIMAGE.appendChild(img);
			
			var imgLARGEIMAGE = $("ZoomRegion");
			if(imgLARGEIMAGE){
				if(ACTUALIMAGES[0][1] == ""){
			
					var img = Builder.node('img', {
						src: "/SiteCM3/i/shim.gif", 
						alt: "", 
						border: "0"
					});
					img = $(img);
					imgLARGEIMAGE.update('');
					imgLARGEIMAGE.appendChild(img);
					
					DISABLEZOOM = true;
				}else{
			
					var img = Builder.node('img', {
						src: ACTUALIMAGES[0][1], 
						alt: "", 
						border: "0"
					});
					img = $(img);
					imgLARGEIMAGE.update('');
					imgLARGEIMAGE.appendChild(img);
					
					DISABLEZOOM = false;
				}
			}
		}
	
	}
}

function loadNextImage(){
	var imgNEXTIMG = $("NEXTIMG");
	if(imgNEXTIMG){
		if(ACTUALIMAGES.length <= 5 || NEXTEND == true){
			imgNEXTIMG.src = "/SiteCM3/i/shim.gif";
			imgNEXTIMG.parentNode.className = "UI_NoLink";
		}else{
			imgNEXTIMG.src = NEXTIMGSRC;
			imgNEXTIMG.parentNode.className = "";
		}
	}
}

function loadPrevImage(){
	var imgPREVIMG = $("PREVIMG");
	if(imgPREVIMG){
		if(PREVIOUSEND){
			imgPREVIMG.src = "/SiteCM3/i/shim.gif";
			imgPREVIMG.parentNode.className = "UI_NoLink";
		}else{
			imgPREVIMG.src = PREVIMGSRC;
			imgPREVIMG.parentNode.className = "";
		}
	}
}

function loadThisImage(which){
	var imgMAINIMAGE = $("ProductImage");
	var imgLARGEIMAGE = $("ZoomRegion");
	if(imgMAINIMAGE && imgLARGEIMAGE){
		if(which>=0 && which<=ACTUALIMAGES.length-1){
			
			var img = Builder.node('img', {
				src: ACTUALIMAGES[which][0], 
				alt: "", 
				border: "0"
			});
			img = $(img);
			imgMAINIMAGE.update('');
			imgMAINIMAGE.appendChild(img);
			
			CURRENTIMAGE = which;
			if(ACTUALIMAGES[which][1] == ""){
			
				var img = Builder.node('img', {
					src: "/SiteCM3/i/shim.gif", 
					alt: "", 
					border: "0"
				});
				img = $(img);
				imgLARGEIMAGE.update('');
				imgLARGEIMAGE.appendChild(img);
				
				DISABLEZOOM = true;
			}else{
			
				var img = Builder.node('img', {
					src: ACTUALIMAGES[which][1], 
					alt: "", 
					border: "0"
				});
				img = $(img);
				imgLARGEIMAGE.update('');
				imgLARGEIMAGE.appendChild(img);
				
				DISABLEZOOM = false;
			}
		}
	}
}

var SCROLLINGRIBBON = false;

function showNext(){
	if(!SCROLLINGRIBBON){
	
		SCROLLINGRIBBON = true;
		
		var offsets = $('UI_ImageRibbon').positionedOffset();
		if(MAXLEFT < offsets.left){
			CURRENTPOS -= THUMBCONTAINERWIDTH;
			new Effect.Move('UI_ImageRibbon', { x: (THUMBCONTAINERWIDTH*-1), y: 0, mode: 'relative', afterFinish: showNextEnd });
			
		}else{
			NEXTEND = true;
			loadNextImage();
			SCROLLINGRIBBON = false;
		}
	
	}
}

function showNextEnd(){
	PREVIOUSEND = false;
	loadPrevImage();
	if(CURRENTPOS == MAXLEFT){
		NEXTEND = true;
		loadNextImage();
	}
	SCROLLINGRIBBON = false;
}

function showPrevious(){
	if(!SCROLLINGRIBBON){
	
		SCROLLINGRIBBON = true;
		
		var offsets = $('UI_ImageRibbon').positionedOffset();
		if(offsets.left<0){
			CURRENTPOS += THUMBCONTAINERWIDTH;
			new Effect.Move('UI_ImageRibbon', { x: THUMBCONTAINERWIDTH, y: 0, mode: 'relative', afterFinish: showPreviousEnd });
			
		}else{
			PREVIOUSEND = true;
			loadPrevImage();
			SCROLLINGRIBBON = false;
		}
	
	}
}

function showPreviousEnd(){
	NEXTEND = false;
	loadNextImage();
	if(CURRENTPOS == 0){
		PREVIOUSEND = true;
		loadPrevImage();
	}
	SCROLLINGRIBBON = false;
}