/**
	*	Javascript functions to manage product images on the product details page.
	*	This includes the image swapping when thumbnails are clicked, the main image
	*	zooming and the scrolling of the thumbnail area.
	*
	*/
	

	/**
	 * JQuery function to scroll the product thumbnail images UP. 
	 */
	function scrollUp(thumbImagesDivId, scrollUpLinkID, scrollDownLinkID) {
		
		var div = $('#'+thumbImagesDivId);
		var li = $('li',div);
		
		// First check if we are already at the top
		if(div.scrollTop() > 0) {
			
			// Scroll Up by the height of each LI or to the top
			if(div.scrollTop()-li.height() <= 0) {
				div.animate({scrollTop: 0}, 500);
				
				// Hide up link and send to back
				$('#'+scrollUpLinkID).fadeTo(500, 0);
				$('#'+scrollUpLinkID).css("z-index",-1);
				
			} else {
				div.animate({scrollTop: div.scrollTop()-li.height()}, 500);
			}
			
			// Show down link if not already visible
			if(!$('#'+scrollDownLinkID).css("opacity") == 0) {
				$('#'+scrollDownLinkID).fadeTo(500, 1);
				$('#'+scrollDownLinkID).css("z-index",50);
			}
		}
	}
	
	/**
	 * JQuery function to scroll the product thumbnail images DOWN. 
	 */
	function scrollDown(thumbImagesDivId, scrollUpLinkID, scrollDownLinkID) {
		
		var div = $('#'+thumbImagesDivId);
		var li = $('li',div);
		
		// First check if we are already at the bottom
		if(div.scrollTop() < (div[0].scrollHeight-div.outerHeight())) {
			
			// Scroll down by the height of each LI or to the bottom
			if(div.scrollTop()+li.height() >= div[0].scrollHeight-div.outerHeight()) {
				div.animate({scrollTop: div[0].scrollHeight-div.outerHeight()}, 500);
				
				// Hide Down link and send to back
				$('#'+scrollDownLinkID).fadeTo(500, 0);
				$('#'+scrollDownLinkID).css("z-index",-1);
				
			} else {
				div.animate({scrollTop: div.scrollTop()+li.height()}, 500);
			}
			
			// Show up link if not already visible
			if(!$('#'+scrollUpLinkID).css("opacity") == 0) {
				$('#'+scrollUpLinkID).fadeTo(500, 1);
				$('#'+scrollUpLinkID).css("z-index",50);
			}
		}
	}
	
	

	/**
	*	JQuery function to swap the main product image with the clicked thumbnail.
	**/
	function swapMainImage(baseurl,imageid,extension) {
		
		// Pre-load the image
		var image1 = $('<img />').attr('src', baseurl+'/media/productimages/'+imageid+'_product.'+extension);
		
		// Fade out the original
		$('#mainProductImage img').fadeOut(500, function() {
			// Change the src attribute and the href for clicking to view the larger image			
			$('#mainProductImage img').attr('src', baseurl+'/media/productimages/'+imageid+'_product.'+extension);
			$('#mainProductImage').attr('href', baseurl+'/media/productimages/'+imageid+'_main.'+extension);
			
			// Fade back in
			$('#mainProductImage img').fadeIn(500);
		});
		
	}
	
	/**
	 * Function automatically executed when the document is ready. Checks to see if we need scroll buttons
	 * for the product thumbnails and shows the scroll down if needed. Also checks if there is a category
	 * introduction and calculates if we need a 'read more' button.
	 */
	$(document).ready(function () {
		if($('#productThumbnailImages').size() == 1) {
			var div = $('#productThumbnailImages'); 
			if(div[0].scrollHeight > div.outerHeight()) {
				$('#scrollDownButton').fadeTo(500, 1);
				$('#scrollDownButton').css("z-index",50);
			}
		}
		if($('#introduction').size() == 1) {
			var div = $('#introduction'); 
			if(div[0].scrollHeight > div.outerHeight()) {
				$('#readMoreControls').css("display", "block");
				$('#readMoreControls').css("z-index",50);
				$('#readMoreControls, #introduction').addClass("collapsed");
			}
		}
	});
	
	
	/**
	 * Function to expand the introduction to it's full height and hide the read more button on completion.
	 */
	function toggleIntroduction(readMoreText,closeText) {
		
		// Fetch introduction DIV
		var div = $('#introduction');
		
		if(div.hasClass("collapsed")) {
			// Calculate original height
			div.data("originalheight",div.outerHeight());
			
			// Set the height in CSS and remove the max-height attribute
			div.css("height", div.data("originalheight"));
			div.css("max-height", "none");
				
			div.animate({height: div[0].scrollHeight}, 500, function() {
				$('#readMoreControls,#introduction').removeClass("collapsed");
				$('#readMoreControls,#introduction').addClass("expanded");
				$('#readMoreControls a').html(closeText);
			});
		} else {
			
			$('#readMoreControls,#introduction').removeClass("expanded");
			$('#readMoreControls,#introduction').addClass("collapsed");
			
			div.animate({height: div.data("originalheight")}, 500, function() {
							
				// Set the max-height
				div.css("height", "none");
				div.css("max-height", div.data("originalheight"));
								
				$('#readMoreControls a').html(readMoreText);
			});
		}
		
	}

	/**
	*	JQuery function to zoom the product image.
	**/
	function zoomImage(link) {
		
		if($(document).ready) {
			
			// Create plain javascript object for new large image
			var largeImage = new Image();
			
			// Wrap into JQuery and assign function when loaded (prevents issue we were seeing whereby size of image appears to be 0)
			$(largeImage).load(function() {
				
				// Fetch original image object to find size/position
				var originalImage = $('#'+$(link).attr('id')+' img');
				var originalPosition = originalImage.offset(); 
				
				// Form the new image
				var newImageSrc = $(link).attr('href');
				var newImage = $('<img />').attr('src', newImageSrc);
				newImage.attr('id', 'largeProductImage');
				newImage.css('position', 'absolute');
				newImage.css('z-index', '100');
				newImage.css('cursor', 'pointer');
				
				if(largeImage.width > originalImage.width() || largeImage.height > originalImage.height()) {
					if(largeImage.width > largeImage.height) {
					
						var imageRatio = largeImage.height/largeImage.width;			
						var tempHeight = Math.round(originalImage.height()*imageRatio);
						
						newImage.attr('width', originalImage.width());
						newImage.attr('height', tempHeight);
						newImage.css('top', (originalPosition.top + ((originalImage.height()-tempHeight) / 2))+'px');
						newImage.css('left', originalPosition.left+'px');
						
					} else if(largeImage.height > largeImage.width) {
					
						var imageRatio = largeImage.width/largeImage.height;
						var tempWidth = Math.round(originalImage.width()*imageRatio);
						
						newImage.attr('width', tempWidth);
						newImage.attr('height', originalImage.height());
						newImage.css('top', originalPosition.top+'px');
						newImage.css('left', (originalPosition.left + ((originalImage.width()-tempWidth) / 2))+'px');
						
					} else {
						
						newImage.attr('width', originalImage.width());
						newImage.attr('height', originalImage.height());
						newImage.css('top', originalPosition.top+'px');
						newImage.css('left', originalPosition.left+'px');
						
					}
				} else {
					
					newImage.attr('width', largeImage.width);
					newImage.attr('height', largeImage.height);
					newImage.css('top', originalPosition.top+Math.round((originalImage.height()-largeImage.height)/2)+'px');
					newImage.css('left', originalPosition.left+Math.round((originalImage.width()-largeImage.width)/2)+'px');
				}
				
				// Set click function to hide overlay and image
				newImage.click(function() {
					resetImages();
				});
				
				// Calculate position for new image
				var newTop = Math.round($(window).scrollTop() + $(window).height()/2 - largeImage.height/2);
				var newLeft = Math.round($(window).width()/2 - largeImage.width/2);
								
				// create overlay
				var overlayDiv = $('<div></div>');
				overlayDiv.attr('id', 'overlay');
				overlayDiv.css('cursor', 'pointer');
				
				// Set click function to hide overlay and image
				overlayDiv.click(function() {
					resetImages();
				});
				
				// Get page height
				var docHeight = $(document).height();
				
				// Get the top of the viewport
				var viewportTop = $(window).scrollTop();
				
				// Get the height of the viewport
				var viewportHeight = $(window).height();
				
				// Set the overlay to be the full available height
				if(viewportHeight > docHeight) {
					docHeight = viewportHeight;
				}
				overlayDiv.css('height', docHeight);
								
				// Hide all select fields
				hideSelects();
				
				// Add overlay and new image			
				$('body').append(overlayDiv);
				$('#productImages').append(newImage);
				
				// Centre image and return to it's original size (animated), then once complete add the close button
				$(newImage).animate({width:largeImage.width, height:largeImage.height, top:newTop, left:newLeft}, function() {
					
					// Create basic javascript object for close button image
					var closeIcon = new Image();
					
					// Wrap in JQuery and create a function for when it is loaded
					$(closeIcon).load(function() {
						
						iconMargin = 5; // Used to space the icon from the top right corner (top and right)
						
						$(closeIcon).attr('id', 'closeButton');
						$(closeIcon).css('position', 'absolute');
						$(closeIcon).css('z-index', '110');
						$(closeIcon).css('top', (newTop+iconMargin)+'px');
						$(closeIcon).css('left', (newLeft+largeImage.width-closeIcon.width-iconMargin)+'px'); // Position in top right corner
						$(closeIcon).css('cursor', 'pointer');
						$(closeIcon).css('display', 'none'); // Initially hidden, will be shown with a fade in
						
						// Add the image to the DOM
						$('#productImages').append(closeIcon);
						$(closeIcon).fadeIn(500);
						
						// Set click function to hide overlay and image
						$(closeIcon).click(function() {
							resetImages();
						});
						
					});
					
					// Set image source (should trigger the onload function above)
					$(closeIcon).attr('src', "http://dev.ballyhoocommerce.co.uk/images/close_icon.png");
					
				});
			});

			// Set image source (should trigger the onload function above)
			$(largeImage).attr('src', $(link).attr('href'));

		}
	}
	
	/**
	 * Auxiliary function to remove the zoomed image, the overlay and the close button then re-show the select fields.
	 * Should gracefully complete even if any of the above are not part of the DOM.
	 * @returns
	 */
	function resetImages() {
		$('#overlay').fadeOut(500, function() {
			$('#overlay').remove();
		});
		$('#largeProductImage').fadeOut(500, function() {
			$('#largeProductImage').remove();
		});
		$('#closeButton').fadeOut(500, function() {
			$('#closeButton').remove();
		});
		
		showSelects();
	}