var THUMBSIZEWIDTH = 75;
var THUMBSIZEHEIGHT = 50;
var THUMBCONTAINERWIDTH = 90;
var RIBBONSIZE = 4;
var PREVIMGSRC = "/images/homeworks_arrow_left.jpg";
var NEXTIMGSRC = "/images/homeworks_arrow_right.jpg";
var DISABLEDPREVIMGSRC = "/images/homeworks_arrow_left_disabled.jpg";
var DISABLEDNEXTIMGSRC = "/images/homeworks_arrow_right_disabled.jpg";
var MAXLEFT;

var CURRENTIMAGE = 0;
var CURRENTPOS = 0;
var PREVIOUSEND = true;
var NEXTEND = false;
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/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/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/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/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/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/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/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/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][1] != ""){
		
			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 div1 = Builder.node('div', {
				className: "ui_roundedimage_top_left"
			});
			div1 = $(div1);
			span.appendChild(div1);
			
			var div2 = Builder.node('div', {
				className: "ui_roundedimage_top_right"
			});
			div2 = $(div2);
			div1.appendChild(div2);
			
			var div3 = Builder.node('div', {
				className: "ui_roundedimage_bottom_left"
			});
			div3 = $(div3);
			div2.appendChild(div3);
			
			var div4 = Builder.node('div', {
				className: "ui_roundedimage_bottom_right"
			});
			div4 = $(div4);
			div3.appendChild(div4);*/
			
			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][1], 
				width: THUMBSIZEWIDTH, 
				height: THUMBSIZEHEIGHT, 
				alt: "", 
				border: "0", 
				id: "RIMAGE" + i
			});
			img = $(img);
			a.appendChild(img);
			
		}
		
	}
	
	//alert(table.innerHTML);

	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);
		}
	
	}
}

function loadNextImage(){
	var imgNEXTIMG = $("NEXTIMG");
	if(imgNEXTIMG){
		if(ACTUALIMAGES.length <= RIBBONSIZE || NEXTEND == true){
			imgNEXTIMG.src = DISABLEDNEXTIMGSRC;
			imgNEXTIMG.parentNode.className = "UI_NoLink";
		}else{
			imgNEXTIMG.src = NEXTIMGSRC;
			imgNEXTIMG.parentNode.className = "";
		}
	}
}

function loadPrevImage(){
	var imgPREVIMG = $("PREVIMG");
	if(imgPREVIMG){
		if(PREVIOUSEND){
			imgPREVIMG.src = DISABLEDPREVIMGSRC;
			imgPREVIMG.parentNode.className = "UI_NoLink";
		}else{
			imgPREVIMG.src = PREVIMGSRC;
			imgPREVIMG.parentNode.className = "";
		}
	}
}

function loadThisImage(which){
	var imgMAINIMAGE = $("ProductImage");
	if(imgMAINIMAGE){
		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;
			
		}
	}
}

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;
}