// list of all products
allProducts = new Array();

allProducts['bendino'] = 6;



/////////////////////////////////////////
// show a specific photo
/////////////////////////////////////////
function showPhoto(productName, photoNumber) {
	// get photo info	
	numPics = allProducts[productName];

	if (photoNumber < 1) {
		photoNumber = numPics;
	}
	else if (photoNumber > numPics) {
		photoNumber = 1;
	}

  	// create nav bar
  	theNav = "";
	if (numPics > 1) {
	  	// left arrow
	  	theNav += "<a href='javascript:showPhoto(" + '"' + productName + '",' + (photoNumber-1) + ");'>&lt;</a>";
	  	// loop through pictures
	  	for (i=1; i <= numPics; i++) {
	  		theNav += "&nbsp;&nbsp;&nbsp;";
			if (i == photoNumber) {
  			   theNav += "<b>";
			}
            else {
                theNav += "<a href='javascript:showPhoto(" + '"' + productName + '",' + i + ");'>";
            }
   			theNav += (i);
  			if (i == photoNumber) {
  			   theNav += "</b>";
  			}
            else {
  			    theNav += "</a>";
  			}
  		}
  		// right arrow
  		theNav += "&nbsp;&nbsp;<a href='javascript:showPhoto(" + '"' + productName + '",' + (photoNumber+1) + ");'>&gt;</a>";
	}
		
	// display nav bar
	setHTML('product-nav', theNav);

	// update image	
	myImage = "products/" + productName + "/" + photoNumber + ".jpg";

	loadImage(myImage);
}



/////////////////////////////////////////
// image loading
/////////////////////////////////////////
function loadImage(imageName) {
    loadingImage = 'images/loading.gif';
    thePhoto = $('the-photo')
   
    thePhoto.src = loadingImage;
    
    imgPreloader = new Image();
    imgPreloader.onload=function(){
	    thePhoto.src = imageName;
	    imgPreloader = null;
    }
	imgPreloader.src = imageName;
}


/////////////////////////////////////////
// helper methods for dhtml updates
/////////////////////////////////////////
function setHTML(element, text) {
	$(element).innerHTML = text;
}

function getHTML(item) {
	text = $(item).innerHTML;
	return text;
}

/////////////////////////////////////////
// get html element
/////////////////////////////////////////
function $(el) {
	if (typeof el == 'string') el = document.getElementById(el);
		return el;
}

/////////////////////////////////////////
// show/hide divs
/////////////////////////////////////////
function show(element) {
	$(element).style.display = 'block';
    $(element).style.visibility = 'visible';
}

function hide(element) {
		$(element).style.display = 'none';
		$(element).style.visibility = 'hidden';
}