$(document).ready(function () {

	var viewportHeight;
	var viewportWidth;
	var isWide = false;

	var userAgent = navigator.userAgent.toLowerCase();
	jQuery.browser = {
		version: (userAgent.match(/.+(?:rv|it|ra|ie|me)[\/: ]([\d.]+)/) || [])[1],
		chrome: /chrome/.test(userAgent),
		safari: /webkit/.test(userAgent) && !/chrome/.test(userAgent),
		opera: /opera/.test(userAgent),
		msie: /msie/.test(userAgent) && !/opera/.test(userAgent),
		mozilla: /mozilla/.test(userAgent) && !/(compatible|webkit)/.test(userAgent)
	};

	var isChrome = jQuery.browser.chrome;
	var isSafari = jQuery.browser.safari;

	if (isChrome) { $("footer").addClass("chrome"); }
	if (isSafari) { $("footer").addClass("safari"); }

	var isHomepage = $("#splash").length > 0;
	if (isHomepage) {
		$(".wrapper").hide();
		$("footer").hide();
	}

	var introPlayedCookie = $.cookie("introPlayed");
	initialiseHomepage();

	/*if (introPlayedCookie == null) {*/
	$("#splash").show().delay(3000).fadeOut(800, function () {
		$(".wrapper").fadeIn(800);
		$("footer").fadeIn(800);
		startSlideShow();
	});
	/*$.cookie("introPlayed", "1", { expires: 30, path: "/" });
	} else {
	showHomePage();
	startSlideShow();
	}*/
	initialiseHomepage();
	startSlideShow();

	function startSlideShow() {
		var $ss = $('#slideshow');
		$ss.cycle({
			fx: "custom",
			fit: 1,
			timeout: 6000,
			cssBefore: { display: "block" },
			cssAfter: { display: "none" },
			after: onBefore
		});
	}

	function onAfter(curr, next, opts) {
		var index = opts.currSlide;
		$('#prev')[index == 0 ? 'hide' : 'show']();
		$('#next')[index == opts.slideCount - 1 ? 'hide' : 'show']();
		calculateViewport();
	}

	function schmeeSize(viewportWidth) {
		$('#slideshow>img').each(function () {
			//$(this).data("size", { width: $(this).width(), height: $(this).height() });

			var maxWidth = isWide ? 1200 : 966; // Max width for the image
			var maxHeight = viewportHeight;    // Max height for the image
			var ratio = 0;  // Used for aspect ratio
			var width = $(this).width();    // Current image width
			var height = $(this).height();  // Current image height

			// Check if the current width is larger than the max
			if (width > maxWidth) {
				ratio = maxWidth / width;   // get ratio for scaling image
				$(this).css("width", maxWidth); // Set new width
				$(this).css("height", height * ratio);  // Scale height based on ratio
				height = height * ratio;    // Reset height to match scaled image
				width = width * ratio;    // Reset width to match scaled image
			}

			// Check if current height is larger than max
			if (height > maxHeight) {
				ratio = maxHeight / height; // get ratio for scaling image
				$(this).css("height", maxHeight);   // Set new height
				$(this).css("width", width * ratio);    // Scale width based on ratio
				width = width * ratio;    // Reset width to match scaled image
			} else {
				if (width < maxWidth) {
					ratio = maxHeight / height; // get ratio for scaling image
					$(this).css("height", maxHeight);   // Set new height
					$(this).css("width", width * ratio);    // Scale width based on ratio
					width = width * ratio;    // Reset width to match scaled image
				}
			}

			/*if (width > height) {
			var leftOffset = (maxWidth - width) / 2;
			$(this).css("left", leftOffset)
			}*/
		});
	}

	function onBefore(curr, next, opts) {

		//var maxWidth = viewportWidth; // Max width for the image
		var maxWidth = isWide ? 1200 : 966; // Max width for the image
		var maxHeight = viewportHeight;    // Max height for the image
		var ratio = 0;  // Used for aspect ratio
		var width = $(this).width();    // Current image width
		var height = $(this).height();  // Current image height

		// Check if the current width is larger than the max
		if (width > maxWidth) {
			ratio = maxWidth / width;   // get ratio for scaling image
			$(this).css("width", maxWidth); // Set new width
			$(this).css("height", height * ratio);  // Scale height based on ratio
			height = height * ratio;    // Reset height to match scaled image
			width = width * ratio;    // Reset width to match scaled image
		}

		// Check if current height is larger than max
		if (height > maxHeight) {
			ratio = maxHeight / height; // get ratio for scaling image
			$(this).css("height", maxHeight);   // Set new height
			$(this).css("width", width * ratio);    // Scale width based on ratio
			height = height * ratio;    // Reset height to match scaled image
			width = width * ratio;    // Reset width to match scaled image
		}
	}

	function showHomePage() {
		$(".wrapper").show();
		$("footer").show();
	}

	function initialiseHomepage() {
		calculateViewport();
	}

	function calculateViewport() {
		viewportHeight = $(window).height() - 162;
		viewportWidth = $(window).width();

		if (viewportWidth >= 1500) {
			$(".wrapper").addClass("wide");
			$("footer").addClass("wide");
			$("ul.portfolio img").each(function () {
				var original = $(this).attr("src");
				var newAttr = original.replace("images/thumb", "images/wide_thumb");
				$(this).attr("src", newAttr);
			});
			$(".profile img").each(function () {
				var original = $(this).attr("src");
				var newAttr = original.replace("images/profile", "images/wide_profile");
				$(this).attr("src", newAttr);
			});
			isWide = true;
			scaleSlideshowImages(1200);
		} else {
			$(".wrapper").removeClass("wide");
			$("footer").removeClass("wide");

			$("ul.portfolio img").each(function () {
				var original = $(this).attr("src");
				var newAttr = original.replace("images/wide_thumb", "images/thumb");
				$(this).attr("src", newAttr);
			});
			$(".profile img").each(function () {
				var original = $(this).attr("src");
				var newAttr = original.replace("images/wide_profile", "images/profile");
				$(this).attr("src", newAttr);
			});

			scaleSlideshowImages(966);
		}
	}

	function scaleSlideshowImages(viewportWidth) {
		schmeeSize(viewportWidth);
		/*$("#slideshow>img").aeImageResize({ height: viewportHeight, width: viewportWidth });
		if (isChrome) {
		setTimeout(function () {
		$("#slideshow>img").each(function () {
		//console.log("Element width: " + $(this).width());
		var foo = viewportWidth - $(this).width();
		$(this).css({
		left: foo / 2
		})
		});
		}, 50);
		} else {
		$("#slideshow>img").each(function () {
		//console.log("Element width: " + $(this).width());
		var foo = viewportWidth - $(this).width();
		$(this).css({
		left: foo / 2
		})
		});
		}*/
	}

	// Handle image resize when browser window is resized
	$(window).resize(function () {
		calculateViewport();
		scaleSlideshowImages();
		// Following line is experiment with Cufon resizing - keeping in for reference
		//$("footer nav ul").css("font-size", "20px");
		//Cufon.refresh('footer nav ul li a');
		verticalCenterElements();
	});

	verticalCenterElements();

	function verticalCenterElements() {
		verticalCenterContent(".portfolio");
		verticalCenterContent(".contact");
		verticalCenterContent(".clients");
		verticalCenterContent("#flashContent");
	}

	function verticalCenterContent(container) {
		var portfolioHeight = $(container).height()
		var availableSpace = viewportHeight - portfolioHeight;
		var topOffset = availableSpace / 2;
		$(container).css({ top: topOffset });
	}


	function doStuff() {
		var flash = $("#flashContent");
		var viewpy = isWide ? 1200 : 966;
		var foo = viewpy - $(flash).width();
		$(flash).css({
			left: foo / 2
		})
	}
	doStuff();


	$("footer nav ul li:first").hover(
		function () {
			$(".smwrapper").fadeIn("slow");
		},
		function () {
			$(".smwrapper").fadeOut("slow");
		}
	);
});