$(function(){
	  
	
	  
	  var cache = [];
	  // Arguments are image paths relative to the current page.
	  $.preLoadImages = function() {
	    var args_len = arguments.length;
	    for (var i = args_len; i--;) {
	      //var cacheImage = document.createElement('img');
	      //cacheImage.src = arguments[i];
	      cache.push(arguments[i]);
	    }
	  }

	$.preLoadImages("/web/images/content/trends/twilight_cinders/bedroom_nav.jpg", "/web/images/content/trends/twilight_cinders/dining_room_nav.jpg","/web/images/content/trends/twilight_cinders/hallway_nav.jpg");

	
	var henryHollandMasthead = $("#henry-holland");
	var ninaCampellMasthead = $("#nina-campbell");
	var initialMasthead = $("#colour-splash");
	
	var i = 0;
	
	//hide these for use later
	$("#henry-holland").remove();
	$("#nina-campbell").remove();
	initialMasthead.addClass("current");
	
	//append preloaded images to list items for hovering
	
	$("#trends-nav li").each(function(){
		
		var $h2 = $(this).find("h2").html();
		
		if(i <= 3){
			$(this).find(".content").before('<div class="hoverstate" style="background-image: url('+ cache[i]+');"><h2>'+$h2+'</h2><p style="color:#fff">Click to view scheme</p></div>');
		}
		i++;
		
		$(this).click(function(e){
			window.location.href = $(this).find("a").attr("href");
		});
		
	});
	$("#hallway, #dining-room, #bedroom").hover(function(){
		
		$(this).find(".content, .hoverstate").animate({
			top	:	"+=239"
		}, 500, function(){
			
		});
	}, function(){
		$(this).find(".content, .hoverstate").animate({
			top	:	"-=239"
		}, 500, function(){
			
		});
	});
	
	//set all elements to have absolute positioning (this makes life easier)
	
	$("#masthead ul:first li").each(function(){
		$(this).css({
			"position"	:	"absolute",
			"left"		:	"0"	
		});
	});
	
	function animateContents(contentToAdd){
		$("#masthead ul:first").append(contentToAdd);
		contentToAdd.css({
			"position"	:	"absolute",
			"left"		:	"-728px"
				});
		
		//begin animation
		$(".current").animate({
						"left"	:	"728px"
					}, 500, function(){
						$(".current").removeClass("current")
						.remove();
					})
		contentToAdd.animate({
						"left"	:	"0"
					}, 500, function(){
						contentToAdd.addClass("current");
					});
					
	}
	$("#masthead-nav li a").click(function(e){
		if($(this).parent("#hh-nav").length){
			
			animateContents(henryHollandMasthead);
			$("#masthead-nav li:not(:visible)").fadeIn(500).show();
			$("#masthead-nav li#hh-nav").fadeOut(500).hide();
			
			$("#masthead-nav").css({"background":"none"});
			
			if($("#masthead-nav p:visible")){
				$("#masthead-nav p").fadeOut(500);
			}
			Cufon.replace("h1, h2, h3");
			
		}else if($(this).parent("#nc-nav").length){
			
			animateContents(ninaCampellMasthead);
			$("#masthead-nav li:not(:visible)").fadeIn(500).show();
			$("#masthead-nav li#nc-nav").fadeOut(500).hide();
			
			$("#masthead-nav").css({"background":"none"});
			
			if($("#masthead-nav p:visible")){
				$("#masthead-nav p").fadeOut(500);
			}
			Cufon.replace("h1, h2, h3");
			
		}else if($(this).parent("#colour-nav").length){
			
			animateContents(initialMasthead);
			$("#masthead-nav li:not(:visible)").fadeIn(500).show();
			$("#masthead-nav li#colour-nav").fadeOut(500).hide();
			
			$("#masthead-nav").css({"background":"#645962"});
			
			if($("#masthead-nav p:not(:visible)")){
				$("#masthead-nav p").fadeIn(500);
			}
			Cufon.replace("h1, h2, h3");
			
		}else{
			alert("something has gone wrong");
		}
		
		return false;
	});
	
	// New code for rolling over images
	
	var methods = {
			
			config:{
				offsetX: 10,
				offserY: 10,
				offsetW: 9,
				offsetH: 9
			},	
			init: function(){
				
				// find all images with a class of collect and wrap a span around them
				var rollovers = $("img.collect");
				
				rollovers.wrap('<span class="collect-span" />');
				
				rollovers.parent().hover(function(){
					methods.show($(this));
				},function(){
					methods.hide($(this));
				});

			},
			show: function(el){
				
				var rolloverSpan = $("span.collect-span")
				el.css({
					"position" 		: "absolute",
					"padding"		: "10px",
					"border"		: "1px solid #dedede",
					"margin-top"	: "-11px",
					"margin-left"	: "-11px",
					"width"			: el.width(),
					"background"	: "#fff",
					"z-index"		: "999",
					"cursor"		: "pointer"
				});
				imageToAdd = el.find("img");
				
				imageToAddSrc = imageToAdd.attr("src").replace("/web/images/collect/", "").replace(".jpg","");
				
				if(!imageToAdd.parent().find("p").length > 0){
					imageToAdd.parent().append("<p><a href='#' title='"+imageToAddSrc+"'>Add to my scrapbook</a></p>");
				}
			},
			hide: function(el){
				el.css({
					"position" 		: "absolute",
					"padding"		: "0",
					"border"		: "none",
					"margin-top"	: "0",
					"margin-left"	: "0",
					"width"		: el.width(),
					"background"	: "none",
					"z-index"	: "1"
				});
				el.find("p").remove();
			}
	}
	
})