/**
 * @author Sam Cartwright
 */

function update(url,index,isSuper) {
document['PhotoBig'].src=url;
}


	/***********************************************************************************************
	
		Large Images Scripts
	
	***********************************************************************************************/
	/***********************************************************************************************
	FUNCTION OVERLAY
	Overlay is the main function in this script, at present it creates the basic HTML structure of 
	the overlay, then it detects the URL of the image  currently displayed and rewrites it to give 
	the large image then it adds this to the #largeImage SRC and appends the lot to the DOM in the 
	body tag.
	
	OBJECTS CREATED
	* #overlay - the grey, semi-opaque background which covers the whole page
		* #largeImageWrapper - scrollable wrapper for the image to sit in
			* #largeImageTitleBar - a title bar which contains buttons
				* #closeOverlay - button which cancels the overlay
			* #largeImage - The Large Image itself
	
	***********************************************************************************************/
	function overlay(){
		//Build Overlay
		$overlay = $('<div id="overlay"><div><div id="largeImageTitleBar"><span id="overlayProductName"></span><span id="closeText">Close</span></div><div id="largeImageWrapper"><img id="largeImage"></div></div></div>');
		//Add Product Name
		$overlayProductName = $overlay.find('#overlayProductName');
		$productName = $('#productColumnLeft h2').clone();
		productName = $productName.text();
		$overlayProductName.append(productName);
		
		if($overlayProductName.text().length > 60){
			$overlayProductName.addClass('shrunk');
		}
		
		//photo URL retrieval and rewritind
		imageURL = $('#mainImage img:first').attr('src');
		imageURLArray = imageURL.split("-");
		imageIdentifier = imageURLArray[imageURLArray.length-1].split(".");
		imageIdentifier = imageIdentifier[0];
		imageURLArray.splice(imageURLArray.length-1, 1);
		
		
		if(imageIdentifier.match(/m[0-9]/i)){
			imageIdentifier = imageIdentifier.replace(/m/i, "F");
			imageURL = imageURLArray.join("-");
		} else {
			imageIdentifier = "F1";
			imageURL = imageURL.substring(0, imageURL.length-4);
		}
		imageURL = imageURL + "-" + imageIdentifier + ".jpg";		
		
		$overlay.find('#largeImage').attr("src", imageURL);

		//append overlay and adjust for IE users
		$('html').append($overlay);
		
		/*if($('#overlay').css('position') == 'absolute'){
			$('#overlay').height($(document).height());
			$('#overlay').css('padding-top',$('body').scrollTop() + 15);	
			$('#overlay>div').height($(window).height() - 30);
		}*/
		$('#overlay').show();
		

	};
	/***********************************************************************************************
	FUNCTION RESIZE
	This function ensures that the image never overflows the sides of the #largeImageWrapper Box
	
	***********************************************************************************************/	
	function resize(){
		largeImageWidth = $('#largeImage').width();
		largeImageWrapperWidth = $('#largeImageWrapper').width();
		if(largeImageWidth > largeImageWrapperWidth){
			$('#largeImage').css('width', '730');
		}
		overlayDivHeight = $('#overlay>div').height();
		largeImageWrapperHeight = overlayDivHeight - 35;
		$('#largeImageWrapper').height(largeImageWrapperHeight);
		$(window).resize(function() {
			overlayDivHeight = $('#overlay>div').height();

			largeImageWrapperHeight = overlayDivHeight - 35;
			$('#largeImageWrapper').height(largeImageWrapperHeight);			
		});

	};
	
	/***********************************************************************************************
	FUNCTION LARGEIMAGES
	This function sets up the page with the large image controlls and defines the most basic event 
	handling.
	
	OBJECTS CREATED
	* #enlargeSmall - The text version of the click to enlarge control
	
	***********************************************************************************************/
	function largeImages(){
		$('#mainImage').addClass('hasLargeImage').append('<p style="text-align: center;"><a href="javascript:;" id="enlargeSmall" onclick="javascript:pageTracker._trackEvent(\'content\', \'image actions\', \'enlarge\');"><img src="/graphics/enlargeSmall.png" style="margin-right: 5px; position: relative; top: 5px;">Click to Enlarge Image</a></p>');

		$('html').click(function(event){
			if ($(event.target).is('#overlay, #closeOverlay, #closeText, body')) {
				$('#overlay').remove();
			}else if ($(event.target).is('#enlargeImage, #enlargeSmall, #mainImage img')){
				overlay();
				resize();
			}
		});
	};