$(document).ready(function(){
	
	// check for safari only.
	var browser = jQuery.uaMatch(navigator.userAgent).browser;
	if (navigator.userAgent.match(/Safari/) && !navigator.userAgent.match(/Chrome/)) $("body").css("background-color", "#f1f1f1"); // change color of background to fit video
	
	// Declare variables
	var windowWidth;
	var margins;
	
	// Set margins on screens			
	function setScreenMargins() {

		windowWidth = $(window).width(); // fetch window width;
		margins = Math.ceil((windowWidth - 960) / 2);
		$(".screen").each(function() {
			$(this).css("margin", "0 "+margins+"px");
		});
	}			
	// set the initial margins on screens
	setScreenMargins();
	
	// Update margins on window resize
	$(window).resize(function(){
		setScreenMargins();
		//_gaq.push(['_trackEvent', 'Site', 'ResizeBrowser']); // GA Trigger if user resizes window
	});
	
	//debug
	$("#debug p").text("window width: "+windowWidth + ", Margins: "+ margins);
	
	//move the whole shebang
	function moveScreens(pos) {
		$("#screenwrap").animate({
			left: pos
		}, 400, "easeOutQuint", function() {
			//callback
		});
		return false;
	}
	
	$("#screenIntro a").click(function(){ 
		moveScreens(-windowWidth); return false; 
		_gaq.push(['_trackEvent', 'Intro', 'Button', 'Read more']); // GA Trigger if user clicks the big read more button
	});
	
	$("p.return a").click(function(){ 
		moveScreens(0); return false;
		_gaq.push(['_trackEvent', 'What-I-Do', 'Button', 'Return']); // GA Trigger if user clicks return to intro from What-I-Do		
	});
			
	
	// Loop video in firefox
	$("video.portrait").bind('ended',{},function() {
		$(this).trigger('play');
	});
	
// ========================= 
// ! Work with me overlays   
// ========================= 
	
	var currentcolor;
	var putmeontop = 100;

	$("h2.what-i-do > span").mouseenter(function(){

		currentcolor = $(this).css("color");
		$(this).css("background-color",currentcolor);
		$(this).css("color","#fff");
		$(this).css("z-index",putmeontop);
		$(this).find("span").css("z-index",putmeontop++);	
		$(this).find("span").stop(true,true).hide();
		$(this).find("span").slideDown(100);
		
		
		_gaq.push(['_trackEvent', 'What-I-Do', 'Hover', $(this).attr("class")]); // GA Trigger hover on mouse over words

		if ($(this).hasClass("i")) {
			$(".contactarrowoverlay").slideDown("fast");
		}

	}).mouseleave(function(){

		$(this).css("background-color","transparent");
		$(this).css("color",currentcolor);

/* 		$(this).find("span").stop(true,true).hide();		 */
		$(this).find("span").slideUp(100);
/* 		$(this).find("span").hide();		 */

		if ($(this).hasClass("i")) {
			$(".contactarrowoverlay").slideUp(50);
		} 
		
	});	
	
	
// =================== 
// ! Spotlight areas   
// =================== 

	
	var currentArea = 1;
	
	var slideTitle = $(".area" + (currentArea) + " h2").text();
	//alert ("Första slidetitel: " + slideTitle);
	_gaq.push(['_trackEvent', 'Metabar', 'Slide', slideTitle ]); // GA Trigger initial slide title
	$(".area").click(function() {
		$(this).fadeOut("fast", function(){
			$(this).addClass("move-aside");
			$(".areaposition img:eq(" + (currentArea) + ")").attr("src", "images/areaposition_on.png");
			$(".areaposition img:eq(" + (currentArea -1) + ")").attr("src", "images/areaposition_off.png");

			if (currentArea < 4) {
				currentArea++;
			} else {
				currentArea = 1;
				$(".areaposition img:eq(" + (currentArea-1) + ")").attr("src", "images/areaposition_on.png");				
			}

			slideTitle = $(".area" + (currentArea) + " h2").text();	
			_gaq.push(['_trackEvent', 'Metabar', 'Slide', slideTitle ]); // GA Trigger sequential slide interactions
		
			$(".area"+currentArea).hide();
			$(".area"+currentArea).removeClass("move-aside");
			$(".area"+currentArea).fadeIn("fast");	
		});
	});

});

//Google tracking syntax
// _gaq.push(['_trackEvent', 'Videos', 'Play', 'Baby\'s First Birthday']);