/* 	Globals
	 *	
	 *********************/
	
	var isLightBox = false;
	var noheader = true;
	var fromSection;
	var animating = false;
	var furtherDelay = false;
	var STOPALL = false;
	var console; //for IE	
	var topLine = "120px";
	var botLine = "680px";
	var midLine1 = "306px";
	var midLine2 = "491px";
	var lineTransition = "easeInOutExpo";
	
	var T_LINES = 200; //time to animate lines into place

	/*
		PARTS
	**/
	var $fullstop = $("#fullstop");
	var $section = $(".section");
	var $topline = $(".ltop");
	var $midLine1 = $(".midLine1");
	var $midLine2 = $(".midLine2");
	var $botline = $(".lbotwrap");
	
	var fsLeftPosAbout = '740px';
	var fsLeftPosWork = '490px';
	var fsLeftPosContact = '330px';

	var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
	var videoReelHtml = $("#videoreel").html();
	
	$(document).ready(function() {				

		initMain(); 

		if((navigator.userAgent.match(/iPhone/i)) || 
			 (navigator.userAgent.match(/iPod/i)) ||
			 (navigator.userAgent.match(/iPad/i))) {
			   $("body").addClass("ipad");
			}
	});
	
	
	/* 	initMain():
	 *	main Initialize function, bound to DOMREADY
	 *
	 *********************/
	function initMain() {
		
		fromSection = "sectionAbout"; //Default page
		
		$("#contentwrap").fadeIn();
		// Create SVG circle and bring into initial position
		Raphael(function () {	
					  
		//Main full stop
		var r = Raphael("fullstop"),
			c = r.set(r.circle(20, 20, 1).attr({stroke: "#fff", fill: "#fff"}));
			setTimeout(function() {
				c.animate({
					//"50%": {r:5, easing: "<"},
					"100%": {r:19, easing: ">"}
				}, 800);
				$fullstop.animate({"left": [fsLeftPosAbout, 'easeOutExpo'] }, 400);
			});
		});


		$("#navMaps").click(function() {
			
			$fullstop.animate({"left": "500px"}, function() {
				openLightBoxMaps()	
				$(this).animate({ "top": "-319px"}, 
					function(){ 
					
						$(this).hide()
						
					});
			});
		});
	}

	 
	/* 	fadeSwapSections():
	 *  @toSection, @fade
	 *	fade out current section, and fade in newly requested one
	 *
	 **********************/
	function fadeSwapSections(toSection, fade) {
		if(fade!=false)
		{
			$(".section:visible").fadeOut(300, function() {

				setTimeout(function() {
					$("#"+toSection).fadeIn(400, function() {
						animating = false; //complete
					});
				}, 500)						
			})
		}	
	}
	
	
	
	
	/* gotoSection():
	 *  @toSection
	 *	switch on section and pass animation lines
	 *
	**********************/
	function gotoSection(toSection) {
		
		//Replace prefix to toggle content
		var toSection = toSection.replace("nav", "section");
		fromSection = fromSection.replace("nav", "section");
		
		try {
			$.colorbox.close()
			$fullstop.stop();
		} catch(e) { }

			
		if(fromSection!= toSection) {
			
			//if(console) console.log("fromSection: " + fromSection + " | id: " + toSection + " | isLightBox:" + isLightBox + " | STOPALL:" + STOPALL);	
			
			
			if(fromSection == "sectionContact" && toSection == "sectionWork") furtherDelay = true;
			
		
			
			fromSection = toSection; //Syncrhonize
			

				//Fade out current, with callback for next part
			
				//Switch by section name
				switch(toSection) {
					case "sectionContact" :
						animateLinesDots("contact");
						fadeSwapSections(toSection);
					break;
					case "sectionWork" :
	
						if(STOPALL != true) {
							setTimeout(function() {
								animateLinesDots("work");
								fadeSwapSections(toSection);
							}, (furtherDelay) ? 500 : 0); //Delay in place to allow contact section to transition out
						} else {
							//if(console) console.log("delay");
							setTimeout(function() {
								animateLinesDots("work");
								fadeSwapSections(toSection);
							}, 1400); //Delay in place to allow contact section to transition out
						}
						
						
					break;
					case "sectionAbout" :
	
						if(STOPALL != true) {
							setTimeout(function() {
								animateLinesDots();
								fadeSwapSections(toSection);
								STOPALL = false;
							}, (furtherDelay) ? 500 : 0); //Delay in place to allow contact section to transition out
						} else {
							//if(console) console.log("delay");
							setTimeout(function() {
								animateLinesDots();
								fadeSwapSections(toSection);
							}, 1400); //Delay in place to allow contact section to transition out
						}
						
					break;
					
				}
		
		
			
		} else animating = false;
		
	}
	
	
	/* ---------------------------------
	|
	|	ANIMATION OF SECTIONS	
	|	
	----------------------------------- */
	
	function animateLinesDots(type) {
	
		
		if(type!="contact")
		{
		
			turnOffExtraLines(true);
			furtherDelay = false
	
			setTimeout(function() {
								
				$topline.animate({"top": [(type!="work") ? topLine : midLine1, lineTransition] }, resetLines);
				$botline.animate({"top": [(type!="work") ? botLine : midLine2, lineTransition] }, resetLines);
			
				setTimeout(function() {
					$fullstop.animate({"left": [(type!="work") ? fsLeftPosAbout : fsLeftPosWork, 'easeOutExpo'] }, 600);

				}, 600);
			}, 100);
		} 
		
		else {

			setTimeout(function() {		
								
				$topline.animate({"top": [topLine, lineTransition] }, resetLines);
				
				turnOffExtraLines(false);
				
				setTimeout(function() {
				
					$(".stops").animate({
						"left": [fsLeftPosContact, lineTransition]
						
						}, 300, 
						function() {
							
							$(".temp1").animate({"top" : ['-210px', lineTransition] });
							$(".temp2").animate({"top" : ['-395px', lineTransition] });
							$(this).css("display", "block");
						}
					);

				}, 600);
			}, 100);

		}
		
	}	


	/* ----------------------------------
	|	
	|	ALL ABOUT LINES			
	|	
	------------------------------------*/

	function resetLines() {
		$midLine1.css("top", $topline.css("top"));
		$midLine2.css("top", $botline.css("top"));
	}
	


	function turnOffExtraLines(bool) {

		if(!bool) {

			$('#fullstop').clone().addClass("temp1").appendTo(".lbotwrap").hide();
			$('#fullstop').clone().addClass("temp2").appendTo(".lbotwrap").hide();
			
			$midLine1.css("display", "block").animate({"top": [midLine1, lineTransition] });
			$midLine2.css("display", "block").animate({"top": [midLine2, lineTransition] });
			$botline.animate({"top": [botLine, lineTransition] });	
			
		} else {
				$(".temp1, .temp2").animate({"top" : ['-21px', lineTransition] }, function() {
					$(".temp1, .temp2").remove();
					
				});
				$midLine1.animate({"top": [topLine, lineTransition] }, function() { $(this).css("display", "none"); } );
				$midLine2.animate({"top": [botLine, lineTransition] }, function() { $(this).css("display", "none"); } );
		}

	
	}
	
	
	function watchVideo() {
		setTimeout(function() {
			$topline.animate({"top": [topLine, 'easeOutExpo'] }, resetLines);
			$botline.animate({"top": [botLine, 'easeOutExpo'] }, resetLines);
			
			setTimeout(function() {
				$fullstop.animate({"left": ['0', lineTransition] });
				openLightboxVideo()

			}, 500);
		}, 100);
	}
	


	
	
	Raphael(function () {	
		//Nav indicator
		var navs = [
			{"id": "navAbout"},
			{"id": "navWork"},
			{"id": "navContact"}
		]
	
		var startingX = 25;
		var s = Raphael("nav-indicator"),
			c2 = s.set(s.circle(-20,10, 5).attr({stroke: "", fill: "#fff"}));		
	
			c2.animate({
				"100%": {cx:startingX, easing: "backOut"}
			}, 800);
			for (var x = 0; x<navs.length; x++){
	
			document.getElementById(navs[x].id).onclick = function() {
				
				if(!animating)
				{
					animating = true //Flag ends with section callback
					c2.animate({
						"100%": {cx:this.getAttribute("rel"), easing: "backIn"}
					}, 800);
					gotoSection(this.getAttribute("id"))
				} //else if(console) console.warn("animation in progress" + animating)
			}
		}
	});
	
		
	function openLightBoxMaps() {
		
		$.colorbox({
			open: true,
			href: "maps.htm",
			iframe:true,
			top:"130px",
			initialWidth: 20,
			initialHeight:20,
			innerWidth:'1000px',
			innerHeight:'505px',
			onOpen:function() { isLightBox = true;  STOPALL = true; },
			onClosed:function() {
				
				isLightBox = false;
				STOPALL = false;
				
				$fullstop.css({"display": "block"});

				//if(fromSection=="sectionContact") {
					$fullstop.animate({"top": "-21px"}, function() {
						$(this).animate({ "left": fsLeftPosContact});
					});
				//} else {
				//	$fullstop.animate({"top": "-21px"});
				//	$fullstop.animate({ "left": fsLeftPosContact});
				//}
				
			}
	   });
		
	}
		
	function openLightboxVideo(url) {
			
		var URL = url;
		STOPALL = false;
		var options = {
			open: true,
			html: videoReelHtml,
			top:"130px",
			initialWidth: 20,
			initialHeight:20,
			innerWidth:'1000px',
			onOpen: function() { 				
			
				isLightBox = true;					
				
				$.getScript('js/video.js', function(data, textStatus){					
					playVideo();
					$fullstop.hide();
					$("#scrubber").show();
				});
			},
			innerHeight:'505px',
			onClosed: function() {
				// reset video player
				resetPlayer();
				$("#scrubber").removeAttr("class").hide()
				$fullstop.css({"left":$("#scrubber").css("left")}).show();

				isLightBox = false;
				STOPALL = false;

				if(fromSection=="sectionWork") {
					animateLinesDots("work");
				}	
			}
		};
		if (isChrome) {
			options.onComplete = function() {
				$("#videoreel").html("");
			};
		}
		$.colorbox(options);
	}