var ua = navigator.userAgent;

//user-editable variables
var ignoreCookies = true;    //for intro video
var subPageFadeSpeed = 600;  //cross-fade between page2/page3 bodies on subnav click
var numPages = 6;
var peopleChangeSpeed = 5000;
var useIntroPNGs = false;    //should the ipad show a png sequence or a video?

var carouselSettings = {     //main left/right page slider
	minimumDrag: 20          //minimum px length to drag page to snap to next/prev
}
var sketchSettings = {       //'sketch' animation on subnav click (page2)
	num: 30,
	fps: 30,
	step: 1
}

var tooltips = [
	{x: 100, y: 450, delay: 0,    text: "You can slide left and right with your mouse."},
	{x: 350, y: 450, delay: 1000, text: "You can also use the left and right keys."},
	{x: 600, y: 450, delay: 2000, text: "Make sure to check out the mobile site."}
];

var tooltipSettings = {
	show: false,
	speed: {
		fadeIn: 600,
		fadeOut: 600
	},
	fadeOutDelay: 3000
}

var pageTracking = [
	{name: 'Home'},
	{name: "What We're About"},
	{name: 'How We Do It'},
	{name: 'Fusionary Work'},
	{name: 'Join Our Team'},
	{name: 'Get In Touch'}
];

var elementTracking = [
	"#page1 .cta a",
	"#ExtLink_InventivHealthBody",
	"#page2 .nav li.li1 a",
	"#page2 .nav li.li2 a",
	"#page2 .nav li.li3 a",
	"#page2 .nav li.li4 a",
	"#page2 .nav li.li5 a",
	"#page2 .nav li.li6 a",
	"#page2 .nav li.li7 a",
	"#page3 .cta a",
	"#page3 .nav li.li1 a",
	"#page3 .nav li.li2 a",
	"#page3 .nav li.li3 a",
	"#page3 .nav li.li4 a",
	"#ExtLink_JobOpenings",
	"#ExtLink_DirectionsToColumbus",
	"#ExtLink_DirectionsToNewtown",
	"#ExtLink_Terms",
	"#ExtLink_InventivHealthFooter"
];

var modalFusionarySettings = {
	opacity: 80,
	overlayCss: {backgroundColor:"#000"},
	persist: true,
	position: [140, null],
	closeClass: 'simplemodalclose',
	overlayClose: true,
	onOpen: function (dialog) {
		if($.browser.msie) {
			swfobject.embedSWF("videos/videoPlayer_fusionary.swf", "fusionaryflash", "640", "396", "9.0.0", "expressInstall.swf", 
							   {}, 
							   {wmode:'transparent', allowscriptaccess: 'always'}, 
							   {id: 'fusionaryflash', name: 'fusionaryflash'});
		}
		dialog.overlay.fadeIn('fast', function () {
			dialog.data.hide();
			dialog.container.fadeIn('fast', function () {
				dialog.data.show();
				if(supports_video() && fusionary.length > 0) {
					fusionary[0].play();
				}
			});
		});
	},
	onClose: function (dialog) {
		if(supports_video() && fusionary.length > 0) {
			fusionary[0].pause();
		} else {
			tellFlash("fusionaryflash", "PAUSE");
		}
		dialog.container.fadeOut('fast', function () {
			dialog.overlay.fadeOut('fast', function () {
				$.modal.close(); // must call this!
			});
		});
	}
}

var modalReelSettings = {
	opacity: 80,
	overlayCss: {backgroundColor:"#000"},
	persist: true,
	position: [140, null],
	closeClass: 'simplemodalclose',
	overlayClose: true,
	onOpen: function (dialog) {
		if($.browser.msie) {
			swfobject.embedSWF("videos/videoPlayer_reel.swf", "reelflash", "640", "396", "9.0.0", "expressInstall.swf", 
							   {}, 
							   {wmode:'transparent', allowscriptaccess: 'always'}, 
							   {id: 'reelflash', name: 'reelflash'});
		}
		dialog.overlay.fadeIn('fast', function () {
			dialog.data.hide();
			dialog.container.fadeIn('fast', function () {
				dialog.data.show();
				if(supports_video() && reel.length > 0) {
					reel[0].play();
				}
			});
		});
	},
	onClose: function (dialog) {
		if(supports_video() && reel.length > 0) {
			reel[0].pause();
		} else {
			tellFlash("reelflash", "PAUSE");
		}
		dialog.container.fadeOut('fast', function () {
			dialog.overlay.fadeOut('fast', function () {
				$.modal.close(); // must call this!
			});
		});
	}
}

//ipad fix for click handlers
var clickEvent = (ua.match(/iPad/i)) ? "touchstart" : "click";
var iDevice = (ua.match(/iPad/i) || ua.match(/iPhone/i) || ua.match(/iPod/i));
var isDragging = false;

/* ================================================================================================ */
/*                                        INIT                                                      */
/* ================================================================================================ */

var carousel, pngsequence, reel, fusionary;
var justSetHash = false;

$(document).ready(function(){
	
	//intro video - flash all the time now
	if(!iDevice) {
		if(ignoreCookies || !(($.cookies.get('introFinished') != null) && ($.cookies.get('introFinished').toString() == "true"))) {
			swfobject.embedSWF("videos/videoPlayer_intro.swf", "intro", "934", "408", "9.0.0", "expressInstall.swf", 
							   {}, 
							   {wmode:'transparent', allowscriptaccess: 'always'}, 
							   {id: 'intro', name: 'intro'});
		}
	}
	
	//initialize carousel
	carousel = $("#pages").carousel({
		minimumDrag: carouselSettings.minimumDrag
	});
	
	//set up hashchange listeners for bookmarking
	if(window.location.hash == "") {
		carousel.setHash();
	} else {
		carousel.checkHash();
	}
	$(window).hashchange(function(){
		if(!justSetHash) {
			carousel.checkHash();
		}
		justSetHash = false;
	});

	//set up individual pages
	setupPage0();
	setupPage1();
	setupPage2();
	setupPage3();
	setupPage4();
	setupTooltips();

	//click handlers for header links
	$("#header #logo").click(        function(e) { carousel.gotoPage(1); e.preventDefault(); });
	$("#header .nav .item1 a").click(function(e) { carousel.gotoPage(2); e.preventDefault(); });
	$("#header .nav .item2 a").click(function(e) { carousel.gotoPage(3); e.preventDefault(); });
	$("#header .nav .item3 a").click(function(e) { carousel.gotoPage(4); e.preventDefault(); });
	$("#header .nav .item4 a").click(function(e) { carousel.gotoPage(5); e.preventDefault(); });
	$("#header .nav .item5 a").click(function(e) { carousel.gotoPage(6); e.preventDefault(); });

	//click handlers for arrows
	$("#prev").click(function(e) { carousel.moveRight(1, false); e.preventDefault(); });
	$("#next").click(function(e) { carousel.moveLeft(1, false);  e.preventDefault(); });
	
	//right/left handlers
	$(document).keyup(keyPressed);
	
	//disable selectable text
	disableSelection(document.getElementById("body"));
	setupTracking();
});

function getQuerystring(key, default_) {
	if (default_==null) default_=""; 
	key = key.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
	var regex = new RegExp("[\\?&]"+key+"=([^&#]*)");
	var qs = regex.exec(window.location.href);
	if(qs == null)
		return default_;
	else
		return qs[1];
}

function setupTracking() {
	for(var i=0; i<elementTracking.length; i++) {
		registerElementClick(elementTracking[i]);
	}
}

/* ================================================================================================ */
/*                                       TOOLTIPS                                                   */
/* ================================================================================================ */

function setupTooltips() {
	if(tooltipSettings.show) {
		for(var i=0; i<tooltips.length; i++) {
			var t = tooltips[i];
			$('#page0').append('<div style="display: none; left: ' + t.x + 'px; top: ' + t.y + 'px;" id="tooltip' + i + '" class="tooltip">' + 
							       '<div class="top"></div>' + 
							       '<div class="text">' + 
										t.text + 
								   '</div>' +
								   '<div class="bottom"></div>' + 
							   '</div>');
			var tDiv = $('#page0').find('#tooltip'+i);
			tDiv.fadeOut(1);
			setTimeout("showTooltip(" + i + ")", t.delay);
		}
	}
}

function showTooltip(num) {
	$('#page0').find('#tooltip' + num).fadeIn(tooltipSettings.speed.fadeIn);
	setTimeout("hideTooltip(" + num + ")", tooltipSettings.fadeOutDelay);
}

function hideTooltip(num) {
	$('#page0').find('#tooltip' + num).fadeOut(tooltipSettings.speed.fadeOut);
}

/* ================================================================================================ */
/*                                       PAGE 0                                                     */
/* ================================================================================================ */

var page0 = {
	fadeSpeed: 'slow'
}

function setupPage0() {
	
	var video   = $("#intro");
	var still   = $("#page0 .still").fadeOut(1);
	var tagline = $("#page0 p").fadeOut(1);
	var speed   = page0.fadeSpeed;
	
	if(iDevice) {
		if(useIntroPNGs) {
			$("#page0").append('<img class="introsequence"></div>');
			$('img.introsequence').flipbook({
				'start': 1,
			    'end': 75,
			    'loop': true,
			    'fps': 15,
			    'mobileStep': 1,
				'loop': false,
			    'images': 'images/body_page0_intro/Intro%2d.png'
			});
		} else {
			still.fadeIn(speed, function() {
				tagline.fadeIn(speed);
			});
		}
	} else {
		if(!ignoreCookies && ($.cookies.get('introFinished') != null) && ($.cookies.get('introFinished').toString() == "true")) {
			$("#intro").remove();
			still.fadeIn(speed, function() {
				tagline.fadeIn(speed);
			});
		}
	}
	
	$("#page0").append('<div class="cover"></div>');
	
}


/* ================================================================================================ */
/*                                       PAGE 1                                                     */
/* ================================================================================================ */

var people, peopleInterval, peopleTimeout;

function setupPage1() {
	
	//put random people into frames
	setupPeople();
	
	//set up modal (fusionary)
	page1setupModal();
	
}

/* ------------------------------------------------------------------------ */

function setupPeople() {
	people = $("#page1 .left .people");
	people.css('background','none');
	people.css('position','relative');
	people.append('<div class="frame"></div>');
	
	var ar = randomArray(8, 108);
	for(var i=0; i<8; i++) {
		people.append('<img src="images/body_page1_people/' + ar[i] + '.jpg" class="image' + (i+1) + '" />');
		people.append('<img src="images/body_page1_people/cover.gif" class="cover' + (i+1) + '" />');
	}
}

function changePerson(ar, num) {
	var useNum = ar1[num-1];
	if(arLast.indexOf(useNum) > -1 && !changePeopleFirstRun) {
		useNum = ar2[num-1];
	}
	$('#page1 .left .people img.image' + (num)).remove();
	people.append('<img style="display:none;" src="images/body_page1_people/' + useNum + '.jpg" class="image' + (num) + '" />');
	$('#page1 .left .people img.image' + (num)).fadeOut(1).fadeIn(150, function() {
		if(this.className.substr(5) == 8) {
			arLast = ar1.slice(0);
			changePeopleFirstRun = false;
		}
	});
}

function callChangePerson(e) {
	var num = this.className.substr(5);
	changePerson(ar, num);
}

var ar, ar1, ar2, arLast, changePeopleFirstRun = true;

function changePeople() {

	ar = randomArray(16, 108);
	ar1 = ar.slice(0, 8);       //array to use
	ar2 = ar.slice(8);          //backup array for dupes
	
	if(changePeopleFirstRun) {
		arLast = ar1.slice(0);
	}
	
	for(var i=0; i<8; i++) {
		preloadImage("images/body_page1_people/"+ar[i]+".jpg");
		setTimeout("$('#page1 .left .people img.image' + " + (i+1) + ").fadeOut(150, callChangePerson)", i * peopleChangeSpeed); 
	}
}

/* ------------------------------------------------------------------------ */

function page1setupModal() {
	
	//check for android and link directly to video
	if((ua.match(/Android/i))) {
		$('.modal_fusionary_link').click(function(e) {
			if(!isDragging)
				window.location.href = "videos/Fusionary.mp4";
		});
	} else {
		//check for ipad and link directly to video
		if(ua.match(/iPad/i)) {
			$('.modal_fusionary_link').click(function(e) {
				if(!isDragging)
					window.location.href = "videos/Fusionary.mp4";
			});
		} else {
			//otherwise show modal
			fusionary = $('#fusionary');
	
			videoModalSetup(fusionary, 
							modalFusionarySettings, 
							$("#modal_fusionary"), 
							$('#modal_fusionary .close'), 
							$('#modal_fusionary .play'), 
							$('#modal_fusionary .volume'), 
							$('.modal_fusionary_link'), 
							fusionaryPlayPause, 
							fusionaryVolume);
		}
	}
	
}

/* ================================================================================================ */
/*                                       PAGE 2                                                     */
/* ================================================================================================ */

var numPages2 = 8;                           // 7 people plus 1 intro (0) state
var page2hover, page2close, page2current;    // hidden a elements that overlay nav
var sketchDiv;
var page2cur = 0;

function setupPage2() {
	
	var nav = $("#page2 .nav");
	var navContainer = $("#page2");
	
	//set up bodies
	for(var i=1; i<numPages2; i++) {
		var el = $("#page2_sub"+i);
		el.fadeOut(1);
	}
	
	//set up nav hover states
	$('#page2').append('<div class="hover"></div>');
	page2hover = $('#page2').find("div.hover");
	page2hover.hide();
	
	//bind hover and click events
	for(var i=1; i<numPages2; i++) {
		var el = nav.find("li.li"+i);
		el.attr('num',i);
		el.hover(page2navRollover, page2navRollout);
		el.bind(clickEvent, page2navClick);
	}
	
	//set up nav "on" state
	$("#page2").append('<div class="sketch_box"></div>');
	
	//set up nav current state
	nav.append('<a href="#" class="current"></a>');
	page2current = nav.find("a.current");
	page2current.hide();
	
	//set up nav close
	navContainer.append('<a href="#" class="close"></a>');
	page2close = navContainer.find("a.close");
	page2close.hide();
	page2close.click(function(e) {
		changePage2(0);
		page2hover.hide();
		e.preventDefault();
	})
}

/* ------------------------------------------------------------------------ */

function page2navRollover(e) {
	var num = $(this).attr('num');
	page2hover.attr('num', num);
	page2close.css('z-index','400');
	page2hover.removeClass().addClass("hover").addClass("hover"+num);
	page2hover.show();
}

function page2navRollout(e) {
	var num = $(this).attr('num');
	if(num != page2cur) {
		page2close.css('z-index','1100');
		page2hover.hide();
	}
}

function page2navClick(e) {
	var num = $(this).attr('num');
	var calcOn = 1960 + 222 + (num * 80);
	page2close.css('left', calcOn + 'px');
	page2hover.hide();
	changePage2(num);
	e.preventDefault();
}

/* ------------------------------------------------------------------------ */

function changePage2(num) {
	if(page2cur != num) {
		$("#page2_sub"+page2cur).fadeOut(subPageFadeSpeed);
		$("#page2_sub"+num).fadeIn(subPageFadeSpeed);
		page2cur = num;
		
		// var calcHover = -10 + ((num-1) * 80);
		if(page2cur == 0) {
			sketchDiv.hide();
		} else {
			var calcHover = 1960 + 202 + ((num-1) * 80);
			drawSketchBox(calcHover);
		}
		
		if(page2cur == 0) { 
			page2close.hide(); 
			page2current.hide();
		}
	}
}

function page2closeButton() {
	//show or hide close button
	if(page2cur != 0) { 
		page2close.show(); 
		page2close.css('z-index','1100');
	}
}

/* ================================================================================================ */
/*                                       PAGE 3                                                     */
/* ================================================================================================ */

var numPages3 = 5;  // 4 people plus 1 intro (0) state
var page3hover, page3close, page3current;    //hidden a elements that overlay nav
var page3cur = 0;
var page3closeButtonCoordinates = [-1, 80, 236, 410, 550];

function setupPage3() {
	
	var nav = $("#page3 .nav");
	var navContainer = $("#page3");
	
	//set up bodies
	for(var i=1; i<numPages3; i++) {
		var el = $("#page3_sub"+i);
		el.fadeOut(1);
	}
	
	//set up nav click states
	for(var i=1; i<numPages3; i++) {
		var el = nav.find("li.li"+i);
		el.attr('num',i);
		el.bind(clickEvent, page3navClick);
	}
	
	//set up nav close
	navContainer.append('<a href="#" class="close"></a>');
	page3close = navContainer.find("a.close");
	page3close.hide();
	page3close.click(function(e) {
		changePage3(0);
		e.preventDefault();
	})
	
	//set up modal (reel)
	page3setupModal();
	
}

function page3navClick(e) {
	var num = $(this).attr('num');
	page3close.css('left', 3160 + page3closeButtonCoordinates[num] + 'px');
	changePage3(num);
	e.preventDefault();
}

/* ------------------------------------------------------------------------ */

function changePage3(num) {
	if(page3cur != num) {
		$("#page3_sub"+page3cur).fadeOut(subPageFadeSpeed);
		$("#page3_sub"+num).fadeIn(subPageFadeSpeed);
		for(var i=0; i<numPages3; i++) {
			$("#overall").removeClass("body_page3_sub"+i);
		};
		page3cur = num;
	}
	
	//show or hide close button
	if(page3cur != 0) { 
		page3close.show(); 
	} else { 
		page3close.hide(); 
	}
	
	$("#overall").addClass("body_page3_sub"+page3cur);
}

/* ------------------------------------------------------------------------ */

function page3setupModal() {
	
	//check for android and link directly to video
	if((ua.match(/Android/i))) {
		$('.modal_reel_link').click(function(e) {
			if(!isDragging)
				window.location.href = "videos/Reel.mp4";
		});
	} else {
		
		//check for ipad and link directly to video
		if(ua.match(/iPad/i)) {
			$('.modal_reel_link').click(function(e) {
				if(!isDragging)
					window.location.href = "videos/Reel.mp4";
			});
		} else {
			reel = $('#reel');
	
			videoModalSetup(reel, 
							modalReelSettings, 
							$("#modal_reel"), 
							$('#modal_reel .close'), 
							$('#modal_reel .play'), 
							null, 
							$('.modal_reel_link'), 
							reelPlayPause, 
							reelVolume);
		}
	}
	
	var qs = getQuerystring('modal');
	var hsh = window.location.hash.substr(1);
	var timeOut = ($.browser == "mozilla") ? 2000 : 1000;  //necessary to wait for video to load before pulling up modal
	
	if(qs=="true" && hsh=="work") {
		setTimeout('$(".modal_reel_link").trigger("mouseup")', timeOut);
	}
}

/* ================================================================================================ */
/*                                       PAGE 4                                                     */
/* ================================================================================================ */

function setupPage4() {
	
	setupPeoplePage4();
	
}

/* ------------------------------------------------------------------------ */

var arPage4, peoplePage4;

function setupPeoplePage4() {
	
	$("#page4").append('<div class="people"></div>');
	peoplePage4 = $("#page4 .people");
	
	arPage4 = randomArray(2, 108);
	for(var i=0; i<2; i++) {
		peoplePage4.append('<img width="80" height="80" src="images/body_page1_people/' + arPage4[i] + '.jpg" class="image' + (i+1) + '" />');
	}
}

function changePersonPage4(arr, num) {
	var useNum = arr[num-1];
	$('#page4 .people img.image' + (num)).remove();
	peoplePage4.append('<img style="display:none;" width="80" height="80" src="images/body_page1_people/' + useNum + '.jpg" class="image' + (num) + '" />');
	$('#page4 .people img.image' + (num)).fadeOut(1).fadeIn(150);
}

function callChangePersonPage4(e) {
	var num = this.className.substr(5);
	changePersonPage4(arPage4, num);
}

function changePeoplePage4() {

	arPage4 = randomArray(2, 108);
	
	for(var i=0; i<2; i++) {
		preloadImage("images/body_page1_people/"+arPage4[i]+".jpg");
		setTimeout("$('#page4 .people img.image' + " + (i+1) + ").fadeOut(150, callChangePersonPage4)", i * peopleChangeSpeed); 
	}
}

/* ================================================================================================ */
/*                                       PAGE 5                                                     */
/* ================================================================================================ */





/* ================================================================================================ */
/*                                       MODAL                                                      */
/* ================================================================================================ */

function videoModalSetup(videoObject, modalSettings, modalObject, closeButton, playButton, volumeButton, openLink, playPauseFunction, volumeFunction) {
	
	//close
	// closeButton.unbind('click').click(function(e) {
	// 	if(supports_video() && videoObject.length > 0) {
	// 		videoObject[0].pause();
	// 	} else {
	// 		//pause flash
	// 	}
	// 	$.modal.close();
	// 	e.preventDefault();
	// });
	
	//play pause and video click
	playButton.unbind('click').click(playPauseFunction);
	videoObject.unbind('click').click(playPauseFunction);
	
	//volume
	if(volumeButton) {
		videoObject[0].volume = 1;
		volumeButton.unbind('click').click(volumeFunction);
	}

	//link setup
	openLink.unbind('mouseup').mouseup(function(e) {
		if(!isDragging) 
			modalObject.modal(modalSettings);
		e.preventDefault();
	});
	
}

/* ------------------------------------------------------------------------ */

function reelPlayPause(e) {
	if(reel[0].ended) {
		reel[0].play();
	} else {
		if (reel[0].paused) {
			reel[0].play();
		} else {
			reel[0].pause();
		}
	}
	e.preventDefault();
}

function reelVolume(e) {
	reel[0].volume = (reel[0].volume == 0) ? 1 : 0;
}

/* ------------------------------------------------------------------------ */

function fusionaryPlayPause(e) {
	if(fusionary[0].ended) {
		fusionary[0].play();
	} else {
		if (fusionary[0].paused) {
			fusionary[0].play();
		} else {
			fusionary[0].pause();
		}
	}
	e.preventDefault();
}

function fusionaryVolume(e) {
	fusionary[0].volume = (fusionary[0].volume == 0) ? 1 : 0;
}

/* ================================================================================================ */
/*                                       UTILS                                                      */
/* ================================================================================================ */

function keyPressed(e) {
	var code = (e.keyCode ? e.keyCode : e.which);
	switch(code) {
		case 37:
			carousel.moveRight(1, false);
		break;
		case 39:
			carousel.moveLeft(1, false);
		break;
	}
}

/* ------------------------------------------------------------------------ */

function randomArray(pick, tot) {
	var ary = [];
	for (var i = 0; i < tot; i++) {
		ary[i] = i+1;
	}
	function randOrd(){
		return (Math.round(Math.random())-0.5);
	}
	ary.sort(randOrd);
	return ary.slice(0,pick);
}

/* ------------------------------------------------------------------------ */

function drawSketchBox(leftPos) {
	var holdTime = 1000/(sketchSettings.fps/sketchSettings.step);
	
	sketchDiv = $('div.sketch_box');
	sketchDiv.css('background-position', '0 0');
	sketchDiv.css('left', leftPos + 'px');
	sketchDiv.show();
	
	for(var i=0; i<sketchSettings.num; i++) {
		var xPos = -1 * (i * 111);
		var bgPos = xPos + 'px 0';
		setTimeout("sketchDiv.css('background-position', '" + bgPos + "')", i*holdTime);
	}
	
	page2closeButton();
}

/* ------------------------------------------------------------------------ */

var introDone = false;

function callFromFlash(str) {
	if(str == "INTRO DONE" && !introDone) {
		
		var still   = $("#page0 .still");
		var tagline = $("#page0 p");
		var speed   = page0.fadeSpeed;
		var aoy     = $("#man_aoy").fadeOut(1);
		
		introDone = true;
		$.cookies.set('introFinished', 'true');
		
		still.fadeIn(speed, function() {
			$("#intro").remove();
			$("#introflash").remove();
			tagline.fadeIn(speed);
		});
	}
}

function tellFlash(id, str){ document.getElementById(id).hearJS(str); }

/* ------------------------------------------------------------------------ */

function supports_video() { return !!document.createElement('video').canPlayType; }
function preloadImage(url) {
    var img=new Image();
    img.src=url;
}

/* ------------------------------------------------------------------------ */

if (!Array.indexOf) {
  Array.prototype.indexOf = function (obj, start) {
    for (var i = (start || 0); i < this.length; i++) {
      if (this[i] == obj) {
        return i;
      }
    }
    return -1;
  }
}

/* ------------------------------------------------------------------------ */

function disableSelection(element) {
	element.onselectstart = function() {
		return false;
	};
	element.unselectable = "on";
	element.style.MozUserSelect = "none";
	element.style.cursor = "default";
}