// These two functions handle the image rollovers for the images thumbnails, based on arrays of
// image objects defined in each gallery js defintion files. Before swapping the image, they 
// compare the named image to the "currentDetail" variable. If it is the currently elected thumbnail, 
// they won't perform the image swap.

function thumbnail_rollOver(imgName) {
  if (document.images) {
  	if (imgName != ("original" + currentDetail)) { document.images[imgName].src = eval(imgName + "_on.src"); }
  }
}

function thumbnail_rollOut(imgName) {
  if (document.images) {
    if (imgName != ("original" + currentDetail)) { document.images[imgName].src = eval(imgName + "_off.src"); }
  }
}


// This function loads the new detial when the user clicks on a thumbnail image:
//   1. Swap out previously selected thubnail image for it's "off" version.
//   2. Update the 'currentDetail' variable to reflect newly selected detail.
//   3. Asemble the new HTML displaying image/text for newly selected detail.
//	 4. Replace the old detail with the new detail.
//	 5. Swap in the "on" version of the image thumbnail for newly selected thumbnail.

function loadOriginalDetail(originalNum) {

	// "Turn off" old thumbnail image
	var imgName = ("original" + currentDetail);
	document.images[imgName].src = eval(imgName + "_off.src"); 
	
	// Update to reflect thumbnail the user just clicked on.
	currentDetail = originalNum;	
	
	// Need to set these variables in order to send to the pop-open script (can't do an eval() statement as an attribute delivered to the script because of the parentheses involved)
	originalTitle = eval("original" + currentDetail + ".title");
	windowWidth = eval("original" + currentDetail + ".popOpen_width");
	windowHeight = eval("original" + currentDetail + ".popOpen_height");
	
	// build the HTML for the new detail
	var newHTML;
	
	//WIDTH=\"278\" HEIGHT=\"194\"
	newHTML = ( "<DIV STYLE=\"position:relative; width:278px; margin-right:-7px\"><IMG SRC=\"../images/originals/gallery" + galleryID + "/original"  + currentDetail + "_med.jpg\" ></DIV>");
	newHTML += ( "<H1>" + eval("original" + currentDetail + ".title") + "</H1>" );
	
	// Catch all for any additional content that falls out of the standard format ( Triptychs & Diptychs, etc)
	if (eval("original" + currentDetail + ".addInfo") != " ") { 
		newHTML += ( "<P>" + eval("original" + currentDetail + ".addInfo") + "</P>" );
	}
					
	newHTML += ("<DIV STYLE=\"position:relative; width:425px; height:2px; z-index:1; margin-right: -153px; margin-bottom: 8px; visibility: visible;\"><IMG SRC=\"../images/originals/divider.gif\" WIDTH=\"425\" HEIGHT=\"2\"></DIV>");
	
	newHTML += ( "<FORM ACTION=\"javascript:openOrderForm()\" METHOD=\"post\" NAME=\"orderForm\" ID=\"orderForm\">" );
	newHTML += ( "<INPUT TYPE=\"hidden\" NAME=\"GalleryID\" VALUE=\"" + galleryID + "\">" );
	newHTML += ( "<INPUT TYPE=\"hidden\" NAME=\"OriginalID\" VALUE=\"" + currentDetail + "\">" );
	newHTML += ( "<INPUT TYPE=\"hidden\" NAME=\"Title\" VALUE=\"" + originalTitle + "\">" );
	newHTML += ( "<INPUT TYPE=\"hidden\" NAME=\"Format\" VALUE=\"" + eval("original" + currentDetail + ".format") + "\">" );
	newHTML += ( "<INPUT TYPE=\"hidden\" NAME=\"Width\" VALUE=\"" + eval("original" + currentDetail + ".width" ) + "\">" );
	newHTML += ( "<INPUT TYPE=\"hidden\" NAME=\"Height\" VALUE=\"" + eval("original" + currentDetail + ".height" ) + "\">" );
	newHTML += ( "<INPUT TYPE=\"hidden\" NAME=\"WidthFramed\" VALUE=\"" + eval("original" + currentDetail + ".widthFramed" ) + "\">" );
	newHTML += ( "<INPUT TYPE=\"hidden\" NAME=\"HeightFramed\" VALUE=\"" + eval("original" + currentDetail + ".heightFramed" ) + "\">" );
	newHTML += ( "<INPUT TYPE=\"hidden\" NAME=\"Price\" VALUE=\"" + eval("original" + currentDetail + ".price") + "\">" );
	
	newHTML += ( "<P>" );
	newHTML += ( eval("original" + currentDetail + ".format") + "<BR>" );
	newHTML += ( eval("original" + currentDetail + ".height") + "\" x " + eval("original" + currentDetail + ".width") + "\"" );
	
	// If this is a painting composed of multiple pieces that form one large painting, add the word "overall" behind the "width" and "hight" attribute.
	if (eval("original" + currentDetail + ".multiplePieces")) { 
		newHTML += ( " overall" );
	}
	
	// If there are values for the framed dimensions, include on the same line of HTML as actual dimensions
	if ( (eval("original" + currentDetail + ".heightFramed") != " ") && (eval("original" + currentDetail + ".widthFramed") != " ") ) { 
		newHTML += ( " [" + eval("original" + currentDetail + ".heightFramed") + "\" x " + eval("original" + currentDetail + ".widthFramed") + "\" framed]" );
	}
	
	
	// PAINTING AVAILABILITY / PURCHASABILITY:
	// IF SOLD...
	if (eval("original" + currentDetail + ".availability") == "sold") {
		// Add "SOLD"in front of price
		newHTML += ( "<BR><SPAN style=\"color:#537d85\"><B>SOLD </B></SPAN>" );
		// If a price exists, add that info as well
		if ( eval("original" + currentDetail + ".price") )  { 
			newHTML += ( " - $" + eval("original" + currentDetail + ".price") + "<BR>" );
		}
	}
	// IF AVAILABLE VIA AN AUCTION
	else if (eval("original" + currentDetail + ".availability") == "auction") {
		// If a price exists, add that info
		if ( eval("original" + currentDetail + ".auctionInfo") )  { 
			newHTML += ( "<BR><BR><strong>" + eval("original" + currentDetail + ".auctionInfo") + "</strong><BR>" );
		}
	}
	// IF AVAILABLE FOR PURCHASE
	else if (eval("original" + currentDetail + ".availability") == "available") {
		// If a price exists, add that info
		if ( eval("original" + currentDetail + ".price") )  { 
			newHTML += ( "<BR>$" + eval("original" + currentDetail + ".price") + "<BR>" );
		}
		// Add Purchase button
		newHTML += ( "<DIV CLASS=\"orderButton\"><A HREF=\"javascript:openOrderForm();\"><IMG SRC=\"../images/shared/btn_order_off.gif\" WIDTH=\"93\" HEIGHT=\"24\" BORDER=\"0\"</A></DIV>");
	}
	// OTHERWISE... (UNAVAILABLE)
	else {
		newHTML += ( "<P style=\"color:#537d85\"><B>Currently unavailable for purchase</B></P>");
	}
	
	
	
	newHTML += ( "</FORM>");		
	
	// Display the new detail
	document.getElementById('detailColumn').innerHTML = newHTML;

	// Swap to the "on" state for the corresponding thumbnail image
	var imgName = ("original" + currentDetail);
	document.images[imgName].src = eval(imgName + "_on.src"); 
}



// Used to open and send from contents to Order Form window

function openOrderForm( ) {
	
	
	var url = "order.php";
	url += "?";
	url += ("galleryID=" + document.orderForm.GalleryID.value);
	url += ("&originalID=" + document.orderForm.OriginalID.value);
	url += ("&title=" + document.orderForm.Title.value);
	url += ("&format=" + document.orderForm.Format.value);
	url += ("&width=" + document.orderForm.Width.value);
	url += ("&height=" + document.orderForm.Height.value);
	url += ("&widthFramed=" + document.orderForm.WidthFramed.value);
	url += ("&heightFramed=" + document.orderForm.HeightFramed.value);
	url += ("&price=" + document.orderForm.Price.value);
	
	popWin = window.open( url, '', 'width=625,height=520,status=0,scrollbars=yes,toolbar=no,resizable=yes');
	popWin.focus();

}
	

// This function dynamically creates and writes to a new pop-open window to display a larger version of the Original detail image.

function openGalleryWindow(galleryID, originalID, originalName, winWidth, winHeight) {	
	galleryWin = window.open('', '' ,'toolbar=no,resize=yes,scrollbars=no,menubar=no,width=' + winWidth + ',height=' + winHeight);
	galleryWin.document.write("<HTML><HEAD><LINK HREF=\"/css/global.css\" REL=\"stylesheet\" TYPE=\"text/css\"></HEAD><BODY><IMG SRC='/images/originals/gallery" + galleryID + "/original"  + originalID + "_lg.jpg'></BODY></HTML>");
	galleryWin.document.close();
}