// JavaScript Document
(function($){

$.chooseBestImage = function (images, screen){
	var closestRatio;
	$.each(images,	function(index, image){
						image.ratio = image.w/image.h;
						
						if (typeof closestRatio == "undefined")
						{
							closestRatio = image.ratio;
							return true;
						}
						
						if (Math.abs(image.ratio - screen.ratio) < Math.abs(closestRatio - screen.ratio))
						{
							closestRatio = image.ratio;
						}
						
						//must loop through ALL to set ALL images' ratios
						//return (closestRatio != screen.ratio); //loop if not equal
					});
	
	screen.area = screen.w * screen.h;
	var closestArea, closestImage;
	$.each(images, function(index, image){
							image.area = image.w * image.h;
							
							if (closestRatio != image.ratio)
								return true;
							
							if (typeof closestArea == "undefined")
							{
								closestArea = image.area;
								closestImage = image;
								return true;
							}
							
							if (Math.abs(image.area - screen.area) < Math.abs(closestArea - screen.area))
							{
								closestArea = image.area;
								closestImage = image;
							}
							
							return (closestArea != screen.area); //loop if not equal
						});

	return closestImage;
}		  

$.fn.recommendSize = function(){
	$(this).each(function(){
		var imageList = [];
	
		$(this).find(".images")
			.find("br")
				.remove()
			.end()
			.before("<h6>Other sizes available...</h6>")
			.find("a")
				.each(function(i){
					var image = {};
					
					image.w = parseInt($(this).find(".fullwidth").text());
					image.h = parseInt($(this).find(".fullheight").text());
					image.fullurl = $(this).attr("href");
					image.thumburl = $(this).find("img").attr("src");
					image.link = this;
					
					$(this).find("img").hide();
					
					if (i > 0) $(this).before("&nbsp;|&nbsp;");
					
					imageList[imageList.length] = image;
				}
		);
	
		var screen = {w: window.screen.width, h:window.screen.height};
		screen.ratio = screen.w / screen.h;
		screen.area = screen.w * screen.h;
		
		var bestImage = $.chooseBestImage(imageList, screen);
		
		//remove link wrapping text
		$(bestImage.link).replaceWith("&uarr;{html}&uarr;".bulkReplace({html:$(bestImage.link).html()}));
		
		var downloadLink = $("<a href='{url}' />".bulkReplace({url:bestImage.fullurl}));
		var thumbnail = $("<img src='{url}' />".bulkReplace({url:bestImage.thumburl}));
		var downloadText = "Click here to download";
		
		downloadLink.append(thumbnail).append($("<br />")).append(downloadText).css({display:"block", textAlign:"center", marginLeft:"10%", marginRight:"40%"});
		
		var message;
		if (bestImage.ratio == screen.ratio && bestImage.area == screen.area)
		{
			// we found an exact match
			message = "Your screen is {screenw} x {screenh}. This image is an exact match!";
		}
		else if (bestImage.ratio == screen.ratio)
		{
			// we found a matching ratio but not area
			message = "Your screen is {screenw} x {screenh} which is a ratio of {screenr}. Our closest match is {imagew} x {imageh} which also a ratio of {imager}.";
		}
		else if (Math.abs(bestImage.area - screen.area) < (0.75 * screen.area))
		{
			// neither matched this is the closest, but a relatively close match was found
			message = "Your screen is {screenw} x {screenh} which is a ratio of {screenr}. We do not have an exact match, the closest we could find is {imagew} x {imageh} which is a ratio of {imager}.";
		}
		else
		{
			// neither matched and a relatively close match was not found
			message = "Your screen is {screenw} x {screenh} which is a ratio of {screenr}. Unfortunately we do not have a close match, the closest is {imagew} x {imageh} which is a ratio of {imager}";
		}
		
		var strings = {		
			screenw: screen.w,
			screenh: screen.h,
			screenr: screen.ratio.toFixed(2),
			screena: screen.area,
			imagew: bestImage.w,
			imageh: bestImage.h,
			imager: bestImage.ratio.toFixed(2),
			imagea: bestImage.area
		};
		
		message = message.bulkReplace(strings);

		$(this).find(".recommendationContainer")
			.show()
			.find(".imageMessage")
				.html(message)
			.end()
			.find(".downloadLink")
				.css({marginLeft:"2em"})
				.html(downloadLink);
	});//end each
}//end recommendSize
})(jQuery);

String.prototype.bulkReplace = function(replacements)
{
	var replaced = this;
	for (var replacement in replacements)
	{
		replaced = replaced.replace("{" + replacement + "}", replacements[replacement]);
	}
	return replaced;
}

$( function() {
	$(".recommendImage").recommendSize();
});