/*
	UniteU Alternate Images
	MSR 10/26/07
	
	Usage:
	
	1. Place AlternateImages.js in assets/images/includes/
	
	2. Add script tag to product.asp:
	<script src="assets/images/includes/AlternateImages.js"></script>
	
	3. Call DisplayAlternateImages() on product.asp where you want the images to display.
	
	Notes:
	- By default, alternate images must be located in assets/images/alternates/ (See ImagePath var)
	- Will use info attributes for each view if defined (<display name>:<image suffix>[,...])
	- The alternate images div has an id of "AlternateImages-Container"
	
	Revisions:
	02/12/08 - MSR - Doesn't require info attributes and hides container if no images are displayed
	11/15/07 - MSR - Hides broken alternate images using onerror
*/

// Image array
var AlternateImages = new Array();

function DisplayAlternateImages()
{
	// Capture original main image
	var OriginalMainImage = document.getElementById("mainimg").src
	
	// Configure image path
	var ImagePath = "assets/images/altviews/";	
	
	// Image views array
	var ImageViews = new Array();

	// Output buffer
	var UU_Output = "";
	
	// If there are info attributes...
	if(info_attributes != ""){
		
		// Split info attributes
		var InfoAttributes = info_attributes.split(",");
		
		// For each attribute...
		for(CurrentAttribute in InfoAttributes){
			
			// Add the view 
			ImageViews.push(InfoAttributes[CurrentAttribute].split(":"));
		}
	} else {
		
		// Build image views
		// (Label, FilenamePrefix)
		// Filespec: <PFID>_FilenamePrefix_<sm|lg>.jpg
		ImageViews[0] = new Array("View 1","1");
		ImageViews[1] = new Array("View 2","2");
		
	}
	
	// If there are alternate images...
	if(ImageViews.length > 0){
	
		// Start feature tag
		UU_Output += "<!-- FEATURE BEGIN: Alternate Images -->";
		
		// Start div
		UU_Output += "<div id=\"AlternateImages-Container\">";
		
		// Show title
		UU_Output += "<strong>Alternate views:</strong>";
		
		// Start ul
		UU_Output += "<ul style=\"list-style-type: none; padding: 0px; margin: 0px;\">";
		
		// For each view...
		for (i=0; i < ImageViews.length; i++)
		{	
		
			// Setup the corresponding images
			AlternateImages[i] = new AlternateImageObject(ImagePath + pf_id + "_" + ImageViews[i][1] + "_sm.jpg", ImagePath + pf_id + "_" + ImageViews[i][1] + "_lg.jpg", ImageViews[i][0]);
	
			// Show a link
			UU_Output += "<li style=\"display: inline; \">";
			UU_Output += "<a href=\"javascript:;\" onMouseOut=\"ShowMainImage('" + OriginalMainImage + "');\" onMouseOver=\"ShowMainImage('" + AlternateImages[i].ImageURL + "')\" >";
			UU_Output += "<img name=\"" + AlternateImages[i].Label + "\" id=\"" + AlternateImages[i].Label + "\" src=\"" + AlternateImages[i].ThumbImageURL + "\" onerror=\"getElementById('" + AlternateImages[i].Label + "').style.display ='none'; HideOnNoAlternateImages();\">";
			UU_Output += "</a>";
			UU_Output += "</li>";
		}
	
		// End ul
		UU_Output += "</ul>";
	
		// End div
		UU_Output += "</div>";
	
		// End feature tag
		UU_Output += "<!-- FEATURE END: Alternate Images -->";
		
		// Show output
		document.write(UU_Output);
	
	}
	
}
function HideOnNoAlternateImages(){
	
	// If there are no alternate images...
	if(NoAlternateImages()){
		
		// Hide the alternate images container
		document.getElementById("AlternateImages-Container").style.display = "none";
	}
}

function NoAlternateImages(){
	
	// For each alternate image label...
	for(CurImage in AlternateImages){
		
		// If the image is loaded/visible...
		if(document.getElementById(AlternateImages[CurImage].Label).style.display != "none"){
			
			return false;
		}
	}
	
	return true;
}

function ShowMainImage(ImageURL){

	// Change the main image to ImageURL
	document.getElementById("mainimg").src = ImageURL;
}

function AlternateImageObject(ThumbImageURL, ImageURL, Label){

	// AlternateImage constructor
	this.ThumbImageURL = ThumbImageURL;
	this.ImageURL = ImageURL;
	this.Label = Label;
}