/*	-- css sprites 2 / nav behaviour / http://www.alistapart.com/articles/sprites2 */

function generateSprites(parent, selectedPrefix, setActive, hoverSpeed, style) {
	// throw the parent object's class into a variable
	var parentClass = $(parent).attr("class");

	// start a loop that cycles through each of the li elements inside the parent element
	$(parent).children("li").each(function() {
		// create a few variables that we'll need during this function:
		// myClass = the class of the object we're currently inspecting
		// current = what the selected class should look like for the parent of the object we're currently inspecting
		var myClass = ($(this).attr("class"))
		var current = parent.substring(1) + " current-" + ($(this).attr("class"));

		// turn on nav events for element this loop identifies
		attachNavEvents(parent, myClass, setActive, hoverSpeed, style);
	
		// let's hide the CSS-defined background image, but only if this isn't the currently-selected item
		if (parentClass != current) {
			$(this).children("a").css({backgroundImage:"none"});
		}

	});
}

function attachNavEvents(parent, myClass, setActive, hoverSpeed, style) {
	$(parent + " ." + myClass).mouseover(function() {
		// create pseudo-link
		$(this).append('<div class="nav-' + myClass + '"></div>');
		$("div.nav-" + myClass).css({display:"none"}).fadeIn(hoverSpeed);
	}).mouseout(function() {
		// fade out & destroy pseudo-link
		$("div.nav-" + myClass).fadeOut(hoverSpeed, function() {
			$(this).remove();
		});
	});

	// we only want to check the mousedown/up events if the CSS exists for :active states
	// if so, let's apply our selective filtering to undo the events above
	if (setActive) {
		$(parent + " ." + myClass).mousedown(function() {
			$("div.nav-" + myClass).attr("class", "nav-" + myClass + "-click");
		}).mouseup(function() {
			$("div.nav-" + myClass + "-click").attr("class", "nav-" + myClass);
		});
	}
}


$(document).ready(function() {
						   
//Transition effect - http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/
$("#container").css("display", "none");
$("#container").fadeIn(2000);
$('.home header nav').hide().delay(200).fadeIn(4000); 

// Following effects only load for devices wider than 600px
if (document.documentElement.clientWidth > 600) {	

//Menu rollover effects
generateSprites("nav ul", "current-", false, 500, "fade");

//Page load fade-in/out
$("header a").click(function(event){
	event.preventDefault();
	linkLocation = this.href;
	$("#container").fadeOut(1000, redirectPage);
});

function redirectPage() {window.location = linkLocation}
	
// Scroll through the logo background image
$('header div.logo').css( {backgroundPosition: "-5500px 0"} ).animate( {backgroundPosition:"-10px 0"}, 50000);  
						   
// http://flowplayer.org/tools/demos/toolbox/flashembed/index.html		
flashembed("flash", {src: "http://www.sparkler.co.uk/wp-content/themes/sparkler/flash/flash-element.swf", bgcolor: '#D2D2D2', wmode: 'opaque'});
};

$('footer.rollover .box').hover (
function() {
$(this).stop().animate({"bottom": "230px"});
$(this).find("h2").css( "background-color", "#CCCCCC").css( "color", "#252242");

},
function() {
$(this).stop().animate({"bottom": "0"});
$(this).find("h2").css( "background-color", "#F0F0F0").css( "color", "#949494");
}
);

//Scrollable Grids

$("<a class='prev'>Previous</a>").insertBefore(".page-id-16 div.scrollable"); 	
$("<a class='next'>Next</a>").insertAfter(".page-id-16 div.scrollable");	
$("<div class='navi'></div>").insertBefore(".page-id-16 div.scrollable"); 

//$(".items div").wrapAll("<div class='page'></div");

$("#scroll").scrollable({speed: 1000}).navigator();

//Preload Images

$(function($) {
	var imgList = [];
	$.extend({
		preload: function(imgArr, option) {
			var setting = $.extend({
				init: function(loaded, total) {},
				loaded: function(img, loaded, total) {},
				loaded_all: function(loaded, total) {}
			}, option);
			var total = imgArr.length;
			var loaded = 0;
			
			setting.init(0, total);
			for(var i in imgArr) {
				imgList.push($("<img />")
					.attr("src", imgArr[i])
					.load(function() {
						loaded++;
						setting.loaded(this, loaded, total);
						if(loaded == total) {
							setting.loaded_all(loaded, total);
						}
					})
				);
			}
			
		}
	});
});

if (document.documentElement.clientWidth > 600) {
$(function() {
	
	$.preload([
		"/wp-content/uploads/2010/11/1C1O1048.jpg",
		"/wp-content/uploads/2010/11/1C1O1070.jpg",
		"/wp-content/uploads/2010/11/1C1O1086.jpg",
		"/wp-content/uploads/2010/11/1C1O1124.jpg",
		"/wp-content/uploads/2010/11/1C1O1152.jpg"
		
	], {
		init: function(loaded, total) {
			$("#indicator").html("Loaded: "+loaded+"/"+total);
		},
		loaded: function(img, loaded, total) {
			$("#indicator").html("Loaded: "+loaded+"/"+total);
			$("#full-screen").append(img);
		},
		loaded_all: function(loaded, total) {
			$("#indicator").html("Loaded: "+loaded+"/"+total+". Done!");
		}
	});

});
};


// Add the missing hocks for overlays into site links
$("ul#menu-services-insight li a , ul#menu-services-brand-strategy li a , ul#menu-services-innovation li a , ul#menu-services-sparkler-studio li a").attr("rel","#overlay");

$(".comments-link a").attr("rel","#overlay");

$("#recent-posts-2 ul li a").attr("rel","#overlay");

//overlays
	// if the function argument is given to overlay,
	// it is assumed to be the onBeforeLoad event listener
	
	$("a[rel='#overlay']").attr('href', function() {
  	return this.href + ' #hijax'
	});	
	
	
	$("a[rel='#overlay']").overlay({

		mask: 'darkred',
		effect: 'apple',

		onBeforeLoad: function() {
			
			$(".contentWrap #hijax").empty();

			// grab wrapper element inside content
			var wrap = this.getOverlay().find(".contentWrap");

			// load the page specified in the trigger
			wrap.load(this.getTrigger().attr("href"));
			
		}

	});
	
	$("a[rel='#video-overlay']").overlay({

		mask: 'darkred',
		effect: 'apple'

	});
	
	
// Fade-in/out Profile labels on people page
$("span.profile").css("opacity", "0");
$("span.profile").hover(
function() {
$(this).stop().animate({"opacity": ".8"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
});

// JS for unsupported browsers (no-csstransitions)

$(".no-csstransitions.opacity a.menu").hover(
function() {
$(this).stop().animate({"opacity": "0.3"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});

/* manual overide for current object */

$(".no-csstransitions.opacity li.current a.menu").hover(
function() {
$(this).stop().animate({"opacity": ".3"}, "slow");
},
function() {
$(this).stop().animate({"opacity": ".4"}, "slow");
});
	

});