/*
 * Image Switcher
 *
 * (c) Copyright 2008 Hen's Teeth Network, Inc. All rights reserved. www.hens-teeth.net
 *
 * Sample usage:
    	<div class="imageswitcher">
        	<div class="mainimage" id="mainimage">
            	<a href="/cgi-bin/commerce.cgi?preadd=action&key=9112">
                	<img src="/products/9112/image1.jpg" alt="Art Nouveau Byzantine Lady Locket"><br>
                    Art Nouveau Byzantine Lady Locket
                </a>
            </div>
            <div class="thumbnailBar" id="thumbnailBar"></div>
        </div>
    	<script type="text/javascript">
			var images = [
				{
					img : "/products/9112/image1.jpg",
					thumb : "/products/9112/thumb1.jpg",
					linkto : "9112",
					label : "Art Nouveau Byzantine Lady Locket"
				},
				{
					img : "/products/18307/image1.jpg",
					thumb : "/products/18307/thumb1.jpg",
					linkto : "18307",
					label : "Art Nouveau Ruby & Diamond Perfume Bottle Pendant"
				},
				{
					img : "/products/9184/image1.jpg",
					thumb : "/products/9184/thumb1.jpg",
					linkto : "9184",
					label : "Art Nouveau Old Euro & Rose Cut Diamond Ring 18k"
				},
				{
					img : "/products/5691/image1.jpg",
					thumb : "/products/5691/thumb1.jpg",
					linkto : "5691",
					label : "Art Nouveau Green Stone Bracelet 14k"
				},
				{
					img : "/products/9181/image1.jpg",
					thumb : "/products/9181/thumb1.jpg",
					linkto : "9181",
					label : "Art Nouveau Old Euro & Rose Cut Diamond Ring 18k"
				},
				{
					img : "/products/17416/image1.jpg",
					thumb : "/products/17416/thumb1.jpg",
					linkto : "17416",
					label : "Art Nouveau Old Euro & Rose Cut Flower Pin 18k"
				}
			];
			createSwitcher();
		</script>
*/

function createSwitcher()
{
	var thumbDiv = document.getElementById("thumbnailBar");
	thumbDiv.innerHTML = '';
	for (var i in images)
	{
		var element = images[i];
		var img = '<img src="' + element.thumb + '" alt="' + element.label + '" onClick="switchTo(' + i + ')">';
		thumbDiv.innerHTML += img + "\n";
	}
}

function switchTo(i)
{
	var element = images[i];
	var img = '<img src="' + element.img + '" alt="' + element.label + '"><br>' + element.label;
	if (undefined != element.linkto)
		img = 			  '<a href="/cgi-bin/commerce.cgi?preadd=action&key=' + element.linkto + '">' + img + '</a>' ;
	document.getElementById('mainimage').innerHTML = img;
}



// Assumes global aProducts - even though it is passed in; needed for onclick function
// sDefaultSKU no longer used
function htn_createImageViewer(n, aImages, oThumbDiv, oMainDiv, sURL)
{
	var iPerRow = 4;
	var iRand = 0;
	var aUsed = new Array();
	var element = "";
	var img = "";
	var iStart = 0;
	var aURLParams = sURL.split('&');
	var sInboundSKU = "";

	for (var i=0; i < aURLParams.length; i++)
	{
		if (-1 != aURLParams[i].indexOf('key'))
		{
			var aTmp = aURLParams[i].split('=');
			sInboundSKU = aTmp[1];
		}
	}
	
	// Be safe
	if (n > aImages.length)
	{
		n = aImages.length;
	}	
	
	
	oThumbDiv.innerHTML = '';
	
	var iInboundImageIndex = find_sku_in_array(sInboundSKU, aImages);
	if (-1 != iInboundImageIndex)
	{

	// Add referring SKU first
		element = aImages[iInboundImageIndex];
		img = '<!-- InBound SKU = ' + sInboundSKU + ' --> <img src="' + element.thumb + '" alt="' + element.label + '" onClick="htn_switchTo(' + iInboundImageIndex + ')">';		
		oThumbDiv.innerHTML += img + "\n";
		aUsed[iInboundImageIndex] = 'used';
		iStart = 1;
		
		// Set main image
		oMainDiv.innerHTML = '<a href="/cgi-bin/commerce.cgi?preadd=action&key=' + sInboundSKU + '">' + 
        	'<img src="' + element.image + '" alt="' + element.label + '"><br>' + element.label + '</a>';
		
		
	}
	/*
	else
	{
		var iDefaultIndex =  find_sku_in_array(sDefaultSKU, aImages);
		if (-1 != iDefaultIndex)
		{
			oMainDiv.innerHTML = '';
			element = aImages[iDefaultIndex];
			img = '<!-- InBound SKU = ' + sDefaultSKU + ' --> <img src="' + element.thumb + '" alt="' + element.label + '" onClick="htn_switchTo(' + iDefaultIndex + ')">';	
			oThumbDiv.innerHTML += img + "\n";
			aUsed[iDefaultIndex] = 'used';
			iStart = 1;		
		
			// Set main image
			oMainDiv.innerHTML = '<a href="/cgi-bin/commerce.cgi?preadd=action&key=' + sDefaultSKU + '">' + 
				'<img src="' + element.image + '" alt="' + element.label + '"><br>' + element.label + '</a>';			
		}		
	}
	*/
	
	for (var i = iStart; i < n; i++)
	{
		iRand = Math.floor(Math.random() * aImages.length);
		if (undefined != aUsed[iRand] && 'used' == aUsed[iRand])
		{
			// Walk the list and find an unused piece
			iRand = -1;
			for (var x=0; x <= aImages.length; x++)
			{
				if ('used' != aUsed[x])
				{
					iRand = x;
					break;
				}
			}
			if (-1 == iRand)
			{
				// Somehow we didn't find a piece - so skip it
				continue;
			}
		}
		
		element = aImages[iRand];
		img = '<img src="' + element.thumb + '" alt="' + element.label + '" onClick="htn_switchTo(' + iRand + ')">';
		
		if (0 == (i % iPerRow))
		{ 
			oThumbDiv.innerHTML += "<br>\n";
		}
		
		oThumbDiv.innerHTML += img + "\n";
		aUsed[iRand] = 'used';
		
		
		if (i == 0 && -1 == iInboundImageIndex)
		{
			// Set main image
			oMainDiv.innerHTML = '<a href="/cgi-bin/commerce.cgi?preadd=action&key=' +  element.sku + '">' + 
        	'<img src="' + element.image + '" alt="' + element.label + '"><br>' + element.label + '</a>';
		}
	}


	




}

// Assumes global aProducts - even though it is passed in; needed for onclick function
function htn_switchTo(i)
{
	var element = aProducts[i];
	var img = '<img src="' + element.image + '" alt="' + element.label + '"><br>' + element.label;
	if (undefined != element.linkto)
	{
		//img = '<a href="/cgi-bin/commerce.cgi?preadd=action&key=' + element.linkto + '">' + img + '</a>';
				img = '<table class="floatimage_hist"><tr><td valign="middle">' +
			  '<a href="/cgi-bin/commerce.cgi?preadd=action&key=' + element.linkto + '">' + img + '</a>' +
			  '</td></tr></table>';
	}
	document.getElementById('mainimage').innerHTML = img;
}

function find_sku_in_array(needle, haystack)
{
	for (var i=0; i < haystack.length; i++)
	{
		if (needle == haystack[i].sku)
		{
			return i;
		}
	}
	return -1;
}