// JavaScript Document
var loaderBarValue = 0.01;
var loaderBar;
var loaderBarContext;
var fps = 40;
var fpsSet = 1000/fps;
var $loadContainer;
var myInit = false;
var nav;
var navTop;
var navBottom;
var barsCanvas;
var bgVideo;
var volumeBarAlpha = 0;
var isPlaying = "false";
var barsInterval;
var score;
var myPlayer;
//========== VIDEO FUNCTIONS =========//
function initVideo() {
	myPlayer = VideoJS.setup("BA_bgVideo", {
		playerFallbackOrder: ["html5"],
		buffPercentStart: .5
	});
	if (myPlayer) {
		bindVideoEvents(myPlayer);
	}
}

//BG VIDEO EVENTS
function bindVideoEvents(vidElement) {
	initLoader();
	_V_.addListener(vidElement, "canplaythrough", onCanPlayFullVid(vidElement));	
	vidElement.onBufferedUpdate(function () {
		if (!myInit) {$loadContainer.show();};
		myInit=true;
		if ($loadContainer.is(":visible")) {
			var bufferedPercent = vidElement.bufferedPercent().toFixed(2);
			bufferedPercent = bufferedPercent*2;
			if (bufferedPercent>=1) {
				bufferedPercent = 1;
				hideLoader();
			} else {
				updateLoaderBar(bufferedPercent); 
			}
		}
	});	
	
	vidElement.onPlay(function () {
		hideLoader();
		audioInit();
		playScore();	
	});
	
	vidElement.onError(function () {
		showFinal();	
	});
	
	vidElement.onEnded(function () {
		showFinal();	
	})
}

function onCanPlayFullVid(vidplayer) {
	var t=setTimeout("delayedPlay()",5000);
}

function delayedPlay(){
	myInit=true;
	myPlayer.play();
	hideLoader();
}

function hideLoader() {
	$loadContainer.fadeOut('fast');
}

function showFinal() {
	$loadContainer.remove();
	$('.video-js-box').remove();
	enableNavTicks();
}

function enableNavTicks () {
	//make the top and bottom track animate on roll-in; stop animating on roll-out
	$('#mainNav').hover(function(){
		animateBottom();
		animateTop();
	},function(){
		$('#mainNav ul').stop();
		$('#mainNav .top').stop();
	});
};

//========== VIDEO LOADER FUNCTIONS =========//
function initLoader() {
	var loaderBarValue = 0;
	loaderBar = document.getElementById("loaderBar");
	loaderBarContext = loaderBar.getContext("2d");
	loaderWords = document.getElementById("loaderWords");
	loaderWordsContext = loaderWords.getContext("2d");
	drawWords(loaderWordsContext);
	draw(loaderBarContext); 
}

function updateLoaderBar(myVal) {
	loaderBarValue = myVal;
	draw(loaderBarContext); 
}

function drawWords(loaderWordsContext) {
  // "L"
  loaderWordsContext.beginPath();
  loaderWordsContext.moveTo(1.7, 0.2);
  loaderWordsContext.lineTo(0.0, 0.2);
  loaderWordsContext.lineTo(0.0, 8.8);
  loaderWordsContext.lineTo(4.8, 8.8);
  loaderWordsContext.lineTo(4.8, 7.4);
  loaderWordsContext.lineTo(1.7, 7.4);
  loaderWordsContext.lineTo(1.7, 0.2);
  loaderWordsContext.closePath();

  // "O"
  loaderWordsContext.moveTo(8.3, 0.0);
  loaderWordsContext.bezierCurveTo(5.7, 0.0, 5.4, 1.9, 5.4, 4.5);
  loaderWordsContext.bezierCurveTo(5.4, 7.1, 5.7, 9.0, 8.3, 9.0);
  loaderWordsContext.bezierCurveTo(11.0, 9.0, 11.3, 7.1, 11.3, 4.5);
  loaderWordsContext.bezierCurveTo(11.3, 1.9, 11.0, 0.0, 8.3, 0.0);
  loaderWordsContext.closePath();

  loaderWordsContext.moveTo(8.3, 7.7);
  loaderWordsContext.bezierCurveTo(7.3, 7.7, 7.2, 6.8, 7.2, 4.5);
  loaderWordsContext.bezierCurveTo(7.2, 2.2, 7.3, 1.3, 8.3, 1.3);
  loaderWordsContext.bezierCurveTo(9.4, 1.3, 9.5, 2.2, 9.5, 4.5);
  loaderWordsContext.bezierCurveTo(9.5, 6.8, 9.4, 7.7, 8.3, 7.7);
  loaderWordsContext.closePath();

  // "A"
  loaderWordsContext.save();
  loaderWordsContext.moveTo(13.7, 0.2);
  loaderWordsContext.lineTo(11.4, 8.8);
  loaderWordsContext.lineTo(13.2, 8.8);
  loaderWordsContext.lineTo(13.6, 7.0);
  loaderWordsContext.lineTo(15.9, 7.0);
  loaderWordsContext.lineTo(16.3, 8.8);
  loaderWordsContext.lineTo(18.1, 8.8);
  loaderWordsContext.lineTo(15.9, 0.2);
  loaderWordsContext.lineTo(13.7, 0.2);
  loaderWordsContext.closePath();

  loaderWordsContext.moveTo(13.9, 5.5);
  loaderWordsContext.lineTo(14.8, 1.7);
  loaderWordsContext.lineTo(14.8, 1.7);
  loaderWordsContext.lineTo(15.6, 5.5);
  loaderWordsContext.lineTo(13.9, 5.5);
  loaderWordsContext.closePath();

  // "D"
  loaderWordsContext.moveTo(21.7, 0.2);
  loaderWordsContext.lineTo(18.8, 0.2);
  loaderWordsContext.lineTo(18.8, 8.8);
  loaderWordsContext.lineTo(21.6, 8.8);
  loaderWordsContext.bezierCurveTo(23.9, 8.8, 24.5, 7.4, 24.5, 4.4);
  loaderWordsContext.bezierCurveTo(24.5, 1.8, 24.1, 0.2, 21.7, 0.2);
  loaderWordsContext.closePath();
  
  loaderWordsContext.moveTo(21.3, 7.5);
  loaderWordsContext.lineTo(20.6, 7.5);
  loaderWordsContext.lineTo(20.6, 1.5);
  loaderWordsContext.lineTo(21.3, 1.5);
  loaderWordsContext.bezierCurveTo(22.6, 1.5, 22.8, 2.5, 22.8, 4.4);
  loaderWordsContext.bezierCurveTo(22.8, 6.8, 22.5, 7.5, 21.3, 7.5);
  loaderWordsContext.closePath();

  // "I"
  loaderWordsContext.restore();
  loaderWordsContext.moveTo(25.8, 8.8);
  loaderWordsContext.lineTo(27.5, 8.8);
  loaderWordsContext.lineTo(27.5, 0.2);
  loaderWordsContext.lineTo(25.8, 0.2);
  loaderWordsContext.lineTo(25.8, 8.8);
  loaderWordsContext.closePath();

  // "N"
  loaderWordsContext.moveTo(32.9, 6.1);
  loaderWordsContext.lineTo(32.9, 6.1);
  loaderWordsContext.lineTo(30.8, 0.2);
  loaderWordsContext.lineTo(28.8, 0.2);
  loaderWordsContext.lineTo(28.8, 8.8);
  loaderWordsContext.lineTo(30.4, 8.8);
  loaderWordsContext.lineTo(30.4, 2.8);
  loaderWordsContext.lineTo(30.4, 2.8);
  loaderWordsContext.lineTo(32.5, 8.8);
  loaderWordsContext.lineTo(34.5, 8.8);
  loaderWordsContext.lineTo(34.5, 0.2);
  loaderWordsContext.lineTo(32.9, 0.2);
  loaderWordsContext.lineTo(32.9, 6.1);
  loaderWordsContext.closePath();

  // "G"
  loaderWordsContext.moveTo(38.5, 4.1);
  loaderWordsContext.lineTo(38.5, 5.4);
  loaderWordsContext.lineTo(39.6, 5.4);
  loaderWordsContext.lineTo(39.6, 6.3);
  loaderWordsContext.bezierCurveTo(39.6, 7.2, 39.0, 7.7, 38.6, 7.7);
  loaderWordsContext.bezierCurveTo(37.6, 7.7, 37.4, 6.4, 37.4, 4.3);
  loaderWordsContext.bezierCurveTo(37.4, 2.2, 37.7, 1.3, 38.6, 1.3);
  loaderWordsContext.bezierCurveTo(39.3, 1.3, 39.6, 2.1, 39.6, 2.7);
  loaderWordsContext.lineTo(41.2, 2.7);
  loaderWordsContext.bezierCurveTo(41.2, 1.0, 40.4, 0.0, 38.5, 0.0);
  loaderWordsContext.bezierCurveTo(36.3, 0.0, 35.6, 1.5, 35.6, 4.4);
  loaderWordsContext.bezierCurveTo(35.6, 7.4, 36.1, 9.0, 38.2, 9.0);
  loaderWordsContext.bezierCurveTo(39.0, 9.0, 39.6, 8.7, 40.0, 8.0);
  loaderWordsContext.lineTo(40.0, 8.0);
  loaderWordsContext.lineTo(40.0, 8.8);
  loaderWordsContext.lineTo(41.3, 8.8);
  loaderWordsContext.lineTo(41.3, 4.1);
  loaderWordsContext.lineTo(38.5, 4.1);
  loaderWordsContext.closePath();
  
  // Yellow Gradient Fill
  var gradient = loaderWordsContext.createLinearGradient(20.7, 9.4, 20.7, 0.7);
  gradient.addColorStop(0.00, "rgb(144, 140, 95)");
  gradient.addColorStop(0.49, "rgb(146, 136, 49)");
  gradient.addColorStop(1.00, "rgb(127, 118, 51)");
  loaderWordsContext.fillStyle = gradient;
  loaderWordsContext.fill();
}

function draw(loaderBarContext) {

  var gradient; 	
	
  // Yellow Gradient Fill
  gradient = loaderBarContext.createLinearGradient(20.7, 9.4, 20.7, 0.7);
  gradient.addColorStop(0.00, "rgb(144, 140, 95)");
  gradient.addColorStop(0.49, "rgb(146, 136, 49)");
  gradient.addColorStop(1.00, "rgb(127, 118, 51)");
  loaderBarContext.fillStyle = gradient;
  loaderBarContext.fill();
  
  // Loader Bar Frame
  loaderBarContext.fillRect(0, 0, 80, 8);
  
  // Blue Gradient Fill
  gradient = loaderBarContext.createLinearGradient(0.7, 4.3, 148.0, 4.3);
  gradient.addColorStop(0.00, "rgb(20, 51, 79)");
  gradient.addColorStop(0.49, "rgb(20, 51, 79)");
  gradient.addColorStop(1.00, "rgb(7, 55, 86)");
  loaderBarContext.fillStyle = gradient;
  
  // Loader Bar
  loaderBarContext.fillRect(1, 1, 78 * loaderBarValue, 6);
  
}

//========== NAV BUILD FUNCTIONS =========//
function initNav() {
	//append animation attributes
	$('#mainNav').attr("style", "-moz-transform: rotate(25deg) translate(-200px, -20px) scale(2); -ms-transform: rotate(25deg) translate(-200px, -20px) scale(2); opacity:0;");
	$("#navDemo").attr("style", "-moz-transform: translate(0px, 40px); -webkit-transform: translate(0px, 40px); -ms-transform: translate(0px, 40px); opacity:0");
	$("#navAircraft").attr("style", "-moz-transform: translate(0px, 40px); -webkit-transform: translate(0px, 40px); -ms-transform: translate(0px, -40px); opacity:0");
	$("#navShow").attr("style", "-moz-transform: translate(0px, 40px); -webkit-transform: translate(0px, 40px); -ms-transform: translate(0px, 40px); opacity:0");
	$("#navLeftArrow").attr("style", "-moz-transform: translate(40px, 0px); -webkit-transform: translate(40px, 0px); -ms-transform: translate(0px, 0px); opacity:0");
	$("#navRightArrow").attr("style","-moz-transform: translate(-40px, 0px); -webkit-transform: translate(-40px, 0px); -ms-transform: translate(-40px, 0px); opacity:0; float:right");
	$("#navHeader").attr("style", "-moz-transform: translate(0px, 20px); -webkit-transform: translate(0px, 20px); -ms-transform: translate(0px, 20px); opacity:0;");
	$("#twitterWidget").attr("style", "opacity:0");
	$("#newsWidget").attr("style", "opacity:0");
	$("#footBase").attr("style", "-moz-transform: translate(0px, -150px); -webkit-transform: translate(0px, -150px); -ms-transform: translate(0px, -150px);");
	$("#navy").attr("style","-moz-transform: translate(-150px, 0px); -webkit-transform: translate(-150px, 0px); -ms-transform: translate(-150px, 0px);");
	$("#marines").attr("style","-moz-transform: translate(150px, 0px); -webkit-transform: translate(150px, 0px); -ms-transform: translate(150px, 0px);");
	setTimers();
}

function setTimers() {
	doFrame1();
	setTimeout(doFrame10, 10*fpsSet);
	setTimeout(doFrame18, 20*fpsSet);
	setTimeout(doFrame28, 30*fpsSet);
	setTimeout(doFrame40, 40*fpsSet);
	setTimeout(doFrame50, 50*fpsSet);
	setTimeout(doFrame60, 60*fpsSet);
	setTimeout(doFrame70, 70*fpsSet);
	setTimeout(doFrame80, 80*fpsSet);
	setTimeout(doClearAnim, 95*fpsSet);
}

function doFrame1(){
	nav = $('#mainNav')[0];
	//animate from original position to zero rotation in 30 frames.  At 30 fps this is 1000 milliseconds.
	animateOpacity(nav, 1, 10*fpsSet);
	animateTransformRotate(nav, 0, 30*fpsSet);
	animateTransformScale(nav, 1.05, 60*fpsSet);
	animateTransformTranslate(nav, 0, 0, 30*fpsSet);
}

function doFrame10(){
 	//animate "demo" up 
 	var demo= $("#navDemo")[0];
 	animateOpacity(demo, 1, 0);
	animateTransformTranslate(demo, 0, 0, 8*fpsSet);
}

function doFrame18(){
 	//animate "aircraft" down 
 	var aircraft = $("#navAircraft")[0];
 	animateOpacity(aircraft, 1, 0);
	animateTransformTranslate(aircraft, 0, 0, 30*fpsSet);
}

function doFrame28(){
 	//animate "show" up 
 	var show = $("#navShow")[0];
 	animateOpacity(show, 1, 0);
	animateTransformTranslate(show, 0, 0, 8*fpsSet);
}

function doFrame40(){
	//animate "left-arrow" up 
	var lArrow = $("#navLeftArrow")[0];
	animateOpacity(lArrow, 1, 8*fpsSet);
	animateTransformTranslate(lArrow, 0, 0, 8*fpsSet);
	var navy = $("#navy")[0];
	animateTransformTranslate(navy, 0, 0, 8*fpsSet);
}

function doFrame50(){
	//animate "right-arrow" up 
	var rArrow = $("#navRightArrow")[0];
	animateOpacity(rArrow, 1, 0);
	animateTransformTranslate(rArrow, -1, 0, 8*fpsSet);
	var marines = $("#marines")[0];
	animateTransformTranslate(marines, 0, 0, 8*fpsSet);
}

function doFrame60(){
	//animate "header" up 
	var header = $("#navHeader")[0];
	animateOpacity(header, 1, 0);
	animateTransformTranslate(header, 0, 0, 8*fpsSet);
	var newsFeed = $("#newsWidget")[0];
	animateOpacity(newsFeed, 1, 15*fpsSet);
	animateTransformScale(nav, 1, 5*fpsSet);
}

function doFrame70() {
	var twitterFeed = $("#twitterWidget")[0];
	animateOpacity(twitterFeed, 1, 15*fpsSet);
}

function doFrame80(){
	var footBase = $("#footBase")[0];
	animateTransformTranslate(footBase, 0, 0, 15*fpsSet);
	initVideo();
}

function doClearAnim() {
	clearInterval(intAnim);
	clearInterval(intClean);
}

function animateBottom(element){
	navBottom.animate({backgroundPosition: '+=20px 40px'}, 300, 'linear', animateBottom);
}

function animateTop(){
	navTop.animate({backgroundPosition: '+=20px bottom'}, 300, 'linear', animateTop);
}

/* AUDIO PLAYER
================================================================================ */
function audioInit() {
	//draw items
	drawBars();
	drawPlayer();
	//set variables and events
	var audioPlayer = document.getElementById("audioPlayer");
	audioPlayer.addEventListener("click", playScore, false);
	score.addEventListener('ended', function(){
		this.currentTime = 0;
		isPlaying = "true";
		playScore();
	}, false);
}
//play or pause the audio
function playScore() {
	if (isPlaying == "false") {
		score.play();
		isPlaying = "true";
		volumeBarAlpha = 1;
		drawPlayer();
		barsInterval = setInterval(drawBars, 1000/24);
	} else {
		score.pause();
		clearInterval(barsInterval);
		isPlaying = "false";
		volumeBarAlpha = 0;
		drawPlayer();
		drawBars();
	}
}
	
function drawPlayer() {
	var playerCanvas = document.getElementById("playerCanvas");
	var player = playerCanvas.getContext("2d");
	var alpha = player.globalAlpha;
	var gradient;
	
	// Background
	gradient = player.createLinearGradient(107.3, 36.1, 107.3, -4.8);
	gradient.addColorStop(0.00, "rgb(9, 54, 85)");
	gradient.addColorStop(0.67, "rgb(26, 75, 130)");
	gradient.addColorStop(1.00, "rgb(42, 96, 174)");
	player.fillStyle = gradient;
	player.fillRect(37, 0, 177, 35);
	
	player.globalAlpha = alpha * 0.25;
	player.fillStyle = "rgb(255, 255, 255)";
	player.fillRect(37, 0, 177, 17);
	
	player.globalAlpha = alpha * 1.00;
	player.beginPath();
	player.moveTo(0.0, 0.0);
	player.lineTo(34.6, 34.6);
	player.lineTo(34.6, 0.0);
	player.lineTo(0.0, 0.0);
	player.closePath();
	gradient = player.createLinearGradient(17.3, 36.2, 17.3, -4.8);
	gradient.addColorStop(0.00, "rgb(9, 54, 85)");
	gradient.addColorStop(0.67, "rgb(26, 75, 130)");
	gradient.addColorStop(1.00, "rgb(42, 96, 174)");
	player.fillStyle = gradient;
	player.fill();
	
	// Outter Volume Bar
	player.beginPath();
	player.moveTo(65.6, 11.2);
	player.bezierCurveTo(65.3, 10.8, 64.7, 10.7, 64.4, 11.1);
	player.bezierCurveTo(64.0, 11.4, 63.9, 11.9, 64.2, 12.3);
	player.bezierCurveTo(65.4, 13.8, 66.1, 15.7, 66.1, 17.8);
	player.bezierCurveTo(66.1, 19.9, 65.4, 21.8, 64.2, 23.3);
	player.bezierCurveTo(63.9, 23.7, 64.0, 24.3, 64.4, 24.6);
	player.bezierCurveTo(64.5, 24.7, 64.7, 24.8, 64.9, 24.8);
	player.bezierCurveTo(65.2, 24.8, 65.4, 24.7, 65.6, 24.5);
	player.bezierCurveTo(67.1, 22.6, 67.9, 20.3, 67.9, 17.8);
	player.bezierCurveTo(67.9, 15.3, 67.1, 13.0, 65.6, 11.2);
	player.closePath();
	gradient = player.createLinearGradient(66.0, 10.9, 66.0, 24.8);
	gradient.addColorStop(0.00, "rgba(251, 237, 49, "+volumeBarAlpha+")");
	gradient.addColorStop(0.33, "rgba(251, 237, 49, "+volumeBarAlpha+")");
	gradient.addColorStop(1.00, "rgba(251, 237, 49, "+volumeBarAlpha+")");
	player.fillStyle = gradient;
	player.fill();
	
	// Inner Volume Bar
	player.beginPath();
	player.moveTo(61.4, 13.5);
	player.bezierCurveTo(61.0, 13.8, 60.9, 14.4, 61.2, 14.8);
	player.lineTo(61.2, 14.8);
	player.bezierCurveTo(61.8, 15.6, 62.2, 16.7, 62.2, 17.8);
	player.bezierCurveTo(62.2, 19.0, 61.8, 20.0, 61.2, 20.9);
	player.bezierCurveTo(60.9, 21.3, 61.0, 21.8, 61.4, 22.1);
	player.bezierCurveTo(61.6, 22.2, 61.7, 22.3, 61.9, 22.3);
	player.bezierCurveTo(62.2, 22.3, 62.5, 22.2, 62.6, 21.9);
	player.bezierCurveTo(63.5, 20.8, 64.0, 19.4, 64.0, 17.8);
	player.bezierCurveTo(64.0, 16.3, 63.5, 14.9, 62.6, 13.7);
	player.bezierCurveTo(62.4, 13.3, 61.8, 13.2, 61.4, 13.5);
	player.closePath();
	gradient = player.createLinearGradient(62.5, 13.4, 62.5, 22.3);
	gradient.addColorStop(0.00, "rgba(251, 237, 49, "+volumeBarAlpha+")");
	gradient.addColorStop(0.33, "rgba(251, 237, 49, "+volumeBarAlpha+")");
	gradient.addColorStop(1.00, "rgba(251, 237, 49, "+volumeBarAlpha+")");
	player.fillStyle = gradient;
	player.fill();
	
	// Speaker Icon
	player.beginPath();
	player.moveTo(50.4, 14.4);
	player.lineTo(50.4, 21.2);
	player.lineTo(56.4, 21.2);
	player.lineTo(58.8, 23.6);
	player.lineTo(58.8, 12.1);
	player.lineTo(56.4, 14.4);
	player.lineTo(50.4, 14.4);
	player.closePath();
	gradient = player.createLinearGradient(54.6, 12.1, 54.6, 23.6);
	gradient.addColorStop(0.00, "rgb(251, 237, 49)");
	gradient.addColorStop(0.33, "rgb(251, 237, 49)");
	gradient.addColorStop(1.00, "rgb(251, 237, 49)");
	player.fillStyle = gradient;
	player.fill();
}

function drawBars() {
	var bars = barsCanvas.getContext("2d");
	//clear the canvas
	bars.clearRect(0,0,barsCanvas.width, barsCanvas.height);
	//draw all the volume bars
	var i = 0;	
	var startPoint = 78;
	var numBars = 24;
	var barWidth = 2;
	var barGap = 4;
	var midline = 17;
	var maxBarHeight = 14;
	bars.fillStyle = "rgb(251, 237, 49)";
	var height;
	if(isPlaying=="true"){
		for(i=0; i<numBars; i++){
			height=Math.floor(Math.random()*(maxBarHeight+1));
			bars.fillRect(startPoint+(i*barGap), midline, barWidth, height);
			bars.fillRect(startPoint+(i*barGap), midline, barWidth, -1*height);
		}
	} else {
		for(i=0; i<numBars; i++){
			height=1;
			bars.fillRect(startPoint+(i*barGap), midline, barWidth, height);
			bars.fillRect(startPoint+(i*barGap), midline, barWidth, -1*height);
		}
	}
}

$(function (){
//////////////////////////////////////////////////////////////////////////////////////////////////////////
	//DOM dependent vars
	barsCanvas = document.getElementById("barsCanvas");
	score = document.getElementById('score');
	var $mainnav = $('#mainNav');
	navTop = $mainnav.find('.top');
	navBottom = $mainnav.find('ul');
	if (playVideo=="true" && VideoJS.browserSupportsVideo()) {
		if (VideoJS.isMobile()) {
			$('.video-js-box').hide().remove();
		} else {
			$('.video-js-box').show();
			$loadContainer = $("#bgLoadingContainer");
			initNav();
		}
	} else {
		$('.video-js-box').remove();
		$mainnav.removeAttr("style");
		enableNavTicks();
	}
	
	// apply hover events to nav items
	$('ul li', $mainnav).hover(function(){
		$(this).find('.overlay').show().stop().animate({height: '40px'}, 200, function(){});
	}, function(){
		$(this).find('.overlay').stop().animate({height: '0px'}, 200, function(){
			var $this = $(this); 
			if ($this.hasClass('overlay')){
				$this.hide();
			}
		});
	});
//////////////////////////////////////////////////////////////////////////////////////////////////////////
});//close the DocReady*/