/*
	Home page
	
	Large random image loads, never see the image that you saw on the last load.	
	
	Large random image loads, shows loader until other smaller images are preloaded.
	Then it will hide.
	
	If the images are cached a timer should be set for ~ 3 seconds. 
	Perhaps a skip button should replace where loading sits.
	
*/

// How long should the main image be shown
var image_pause = 5000;

Array.prototype.pick_index = function () {
	return Math.floor(Math.random() * this.length);
};

Array.prototype.remove = function(from, to) {
	this.splice(from, to);
	return this;
};

// DOM Ready
$(function() {
	$("ul.thumbnails").hide();

	// Random image prepended into "splash"
	var splashes = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"];
	if($.cookie("splash")) {
		splashes.remove($.cookie("splash"), 1);
	}
	var splash_index = splashes.pick_index();
	var random_splash = splashes[splash_index];
	$.cookie("splash", (splash_index + 1));
	$("#splash").prepend("<img src=\"/templates/saville/images/content/banners_homepage/" + random_splash +"\">");
			
	Splash.preloadImages();
	Splash.addPlusGraphics();
	
	// Start a timer to count the time that the large image has been shown
	var timer_start = new Date();
	
	$(window).load(function () {
		var timer_end = new Date();
		var time_passed = timer_end.getTime() - timer_start.getTime(); // Milliseconds
		
		// Check that five seconds have past, otherwise delay the action for the remainder of the time
		if(time_passed > image_pause) {
			Splash.init();
		} else {
			setTimeout(function () { Splash.init() }, (image_pause - time_passed));
		}
	});
});

var Splash = {
	// Images to load
	images: [
		{
			code: '', 
			small_src: "/templates/saville/images/temp/r1s1.jpg", 
			large_src: "/templates/saville/images/temp/r1s1_large.jpg", 
			first_line_copy: "", 
			second_line_copy: ""
		}, 
		{
			code: '', 
			small_src: "/templates/saville/images/temp/r1s2.jpg", 
			large_src: "/templates/saville/images/temp/r1s2_large.jpg", 
			first_line_copy: "", 
			second_line_copy: ""
		}, 
		{
			code: 'AUS', 
			small_src: "/templates/saville/images/temp/r1s3.jpg", 
			large_src: "/templates/saville/images/temp/r1s3_large.jpg", 
			first_line_copy: "Part of the architectural fibre of flourishing Australian cities", 
			second_line_copy: ""
		}, 
		{
			code: '', 
			small_src: "/templates/saville/images/temp/r1s4.jpg",  
			first_line_copy: "", 
			second_line_copy: ""
		}, 
		{
			code: '', 
			small_src: "/templates/saville/images/temp/r1s5.jpg",
			first_line_copy: "", 
			second_line_copy: ""
		}, 
		{
			code: 'AUS', 
			small_src: "/templates/saville/images/temp/r1s6.jpg", 
			large_src: "/templates/saville/images/temp/r1s6_large.jpg", 
			first_line_copy: "Changing the face of Perth through landmark residential high-rise projects", 
			second_line_copy: ""
		}, 
		{
			code: '', 
			small_src: "/templates/saville/images/temp/r1s7.jpg",
			large_src: "/templates/saville/images/temp/r1s7_large.jpg", 
			first_line_copy: "", 
			second_line_copy: ""
		}, 
		{
			code: '', 
			small_src: "/templates/saville/images/temp/r2s1.jpg",
			large_src: "/templates/saville/images/temp/r2s1_large.jpg", 
			first_line_copy: "", 
			second_line_copy: ""
		}, 
		{
			code: 'AUS', 
			small_src: "/templates/saville/images/temp/r2s2.jpg",
			large_src: "/templates/saville/images/temp/r2s2_large.jpg", 
			first_line_copy: "Innovation in mixed-use development", 
			second_line_copy: ""
		}, 
		{
			code: '', 
			small_src: "/templates/saville/images/temp/r2s3.jpg", 
			large_src: "/templates/saville/images/temp/r2s3_large.jpg", 
			first_line_copy: "", 
			second_line_copy: ""
		}, 
		{
			code: '', 
			small_src: "/templates/saville/images/temp/r2s4.jpg", 
			first_line_copy: "", 
			second_line_copy: ""
		},
		{
			code: 'DEU', 
			small_src: "/templates/saville/images/temp/r2s5.jpg", 
			first_line_copy: "Inspired by attitudes and innovations in Modern art movements", 
			second_line_copy: ""
		}, 
		{
			code: '', 
			small_src: "/templates/saville/images/temp/r2s6.jpg", 
			large_src: "/templates/saville/images/temp/r2s6_large.jpg", 
			first_line_copy: "", 
			second_line_copy: ""
		}, 
		{
			code: 'EGY', 
			small_src: "/templates/saville/images/temp/r2s7.jpg", 
			large_src: "/templates/saville/images/temp/r2s7_large.jpg", 
			first_line_copy: "Attention to detail resulting in elegant and timeless interiors", 
			second_line_copy: ""
		}, 
		{
			code: '', 
			small_src: "/templates/saville/images/temp/r2s8.jpg",
			large_src: "/templates/saville/images/temp/r2s8_large.jpg", 
			first_line_copy: "", 
			second_line_copy: ""
		}, 
		{
			code: 'UAE', 
			small_src: "/templates/saville/images/temp/r2s9.jpg", 
			large_src: "/templates/saville/images/temp/r2s9_large.jpg", 
			first_line_copy: "Architectural ingenuity and fastidious practice", 
			second_line_copy: ""
		}, 
		{
			code: 'AUS', 
			small_src: "/templates/saville/images/temp/r3s1.jpg", 
			large_src: "/templates/saville/images/temp/r3s1_large.jpg", 
			first_line_copy: "Creating inspirational lifestyles", 
			second_line_copy: ""
		}, 
		{
			code: '', 
			small_src: "/templates/saville/images/temp/r3s2.jpg", 
			large_src: '/templates/saville/images/temp/r3s2_large.jpg', 
			first_line_copy: "", 
			second_line_copy: ""
		}, 
		{
			code: '', 
			small_src: "/templates/saville/images/temp/r3s3.jpg",
			first_line_copy: "", 
			second_line_copy: ""
		}, 
		{
			code: '', 
			small_src: "/templates/saville/images/temp/r3s4.jpg", 
			first_line_copy: "", 
			second_line_copy: ""
		}, 
		{
			code: '', 
			small_src: "/templates/saville/images/temp/r3s5.jpg", 
			large_src: "/templates/saville/images/temp/r3s5_large.jpg", 
			first_line_copy: "", 
			second_line_copy: ""
		}, 
		{
			code: '', 
			small_src: "/templates/saville/images/temp/r3s6.jpg", 
			large_src: "/templates/saville/images/temp/r3s6_large.jpg", 
			first_line_copy: "", 
			second_line_copy: ""
		}, 
		{
			code: 'UK', 
			small_src: "/templates/saville/images/temp/r3s7.jpg", 
			large_src: "/templates/saville/images/temp/r3s7_large.jpg", 
			first_line_copy: "Maturity and experience fuse with creativity and passion", 
			second_line_copy: ""
		}
	],
	
	// Load in images
	init: function () {
		// Hide the loader then slide the image
		$('.loader').slideUp({easing: 'easeInOutExpo', duration: 2000}).queue(function () {
			$("ul.thumbnails").show();
			$('#splash').hide(1000).queue(function () {
				Splash.displayImages();
			});
		});
	},
	addPlusGraphics: function () {
		$("ul.thumbnails li").prepend("<img class=\"icon\" src=\"/templates/saville/images/framework/icon_empty.gif\">");
		$("ul.thumbnails li img.icon").hover(function () {
			$(this).attr('src', '/templates/saville/images/framework/icon_plus.gif');
		}, function () {
			$(this).attr('src', '/templates/saville/images/framework/icon_empty.gif');
		});
	},
	preloadImages: function () { // Bad method name, it all just grew from here - along with the scope
		for(var i = 0; i < this.images.length; i++) {
			var img = new Image();
			
			// Map some dom properties to our element for later use
			img.small_src = Splash.images[i].small_src;
			img.large_src = Splash.images[i].large_src;
			img.code = Splash.images[i].code;
			img.first_line_copy = Splash.images[i].first_line_copy;
			img.second_line_copy = Splash.images[i].second_line_copy;
			
			$(img).load(function () {
				$(this).css({visibility: 'hidden'});
				this.start_w = this.offsetWidth;
				this.start_h = this.offsetHeight;
			}).appendTo("ul.thumbnails").wrap("<li><span></span><p>" + Splash.images[i].code + "</p></li>").attr('src', Splash.images[i].small_src).hover(function () {
				if(this.large_src) {
					$(this).parents("li").children("p").show();
					// Switch to plus
					$(this).parents("li").children("img.icon").attr('src', '/templates/saville/images/framework/icon_plus.gif').click(function () {
						$(this).siblings("span").children("img").trigger("click");
					});
				} else {
					$(this).parents("li").children("img.icon").remove();
				}
			}, function () {
				if(this.large_src) {
					$(this).parents("li").children("p").hide();
					$(this).parents("li").children("img.icon").attr('src', '/templates/saville/images/framework/icon_empty.gif');
				}
			}).click(function () {
				if(this.large_src) {
					// Hide nasty edges on aesthetically challenged browsers
					$(this).blur();
					
					// Clear the div.chosen element
					$('div.chosen').empty();

					// Clone the thumbnail as a large image, load it into another element, give it some events to animate and remove itself
					var large = new Image();
					large.start_w = this.offsetWidth;
					large.start_h = this.offsetHeight;

					large.start_l = ($(this).offset().left - $("ul.thumbnails").offset().left); // Minus the distance of the main container to the edge
					large.start_t = ($(this).offset().top - this.offsetHeight) - 20;

					$('div.chosen').css({top: large.start_t, left: large.start_l});
					$(large).css({visibility: 'hidden'});

					// Image
					var image = this;

					// Load and add the image to div.chosen
					$(large).load(function () {
						var large_w = this.offsetWidth;
						var large_h = this.offsetHeight;
						$(this).css({width: this.start_w, height: this.start_h, visibility: 'visible'});

						var container_anim = {
							top: 0, 
							duration: 2500, 
							queue: false
						};

						// Set the container to the left or right of the screen
						if(this.start_l < ($("ul.thumbnails")[0].offsetWidth / 2)) {
							container_anim.left = 0;
						} else {
							container_anim.left = ($("div#home")[0].offsetWidth - large_w);
						}

						// The images' dimensions within this block are correct (actual)
						// CSS should be set to div.chosen for positioning
						$('div.chosen').animate(container_anim);
						
						// Add a minus icon
						$("<img src=\"/templates/saville/images/framework/icon_minus.gif\" class=\"minus\">").prependTo("div.chosen").hide().fadeIn(2500).click(function() {
							Splash.closeLargeImage(large);
						});
						
						$(this).animate({width: large_w, height: large_h, duration: 2500, queue: false}, function () {
							// Text descriptions
							$('div.chosen').prepend('<p class="second-line">' + image.second_line_copy + '</p>').children("p").hide().fadeIn(1250);
							$('div.chosen').prepend('<p class="first-line">' + image.first_line_copy + '</p>').children("p").hide().fadeIn(1250);
							$('div.chosen').prepend('<p class="title">' + image.code + '</p>').children("p").hide().fadeIn(1250);
						});


					}).prependTo("div.chosen").attr('src', this.large_src).click(function () {
						Splash.closeLargeImage(large);
					});
				}
			});
			if(!img.large_src) { // Don't allow images without content to open up
				$(img).unbind("click");
			}
		}
	},
	displayImages: function () {
		$("ul.thumbnails li img").each(function () {
			var rand = Math.floor(Math.random()*3000);
			var image = this;
			setTimeout(function () {
				$(image).css({visibility: 'visible', display: 'none'}).fadeIn(2500);
			}, rand);
		})
	},
	closeLargeImage: function (large) {
		// Animate the large image down to the thumbs' size
		$(large).animate({width: large.start_w, height: large.start_h, duration: 2500, queue: false});
		$("div.chosen p").hide(); // Hide the text
		$("div.chosen img.minus").remove(); // Remove minus icon
		$('div.chosen').animate({top: large.start_t, left: large.start_l, duration: 2500, queue: false}, function () {
			$(this).empty();
		});
	}
};