// JavaScript Document

var timerRunning = true;
var myTimer = null;
var inew = 0;
var icurrent = 100;
var active;
var count = 0;
var old = 0;
var n;

$(document).ready(function() {
	
	//START DYNAMICALLY CREATING HEIGHT OF CONTENT BOXES AND PLACEMENT OF BTNS
	//How many content areas are in the  copy container
	var total = $("#copycont").children(".g").length - 1;
	
	//SET COPY BOX HEIGHT UPON LOADING
	var c = $("#copycont").height();
	var btn = $("#btns").height();
	var pC = parseInt($("#copy").css('paddingTop'));
	var btnH = c + (pC*2);
	$("#copyBkg").height(btnH + pC);
	$("#copy").height(btnH + pC);
	
		//SET CONTENT BTN PLACEMENT
		var cW = $(".c").width();
		var bW = $(".cbtn").width();
		var pB = parseInt($(".cbtn").css('paddingRight'));
		var totalBtns = $("#btns").children(".cbtn").length;
		var totalBtnW = ((bW + (pB * 2)) * totalBtns);
		var btnR = (cW - totalBtnW) - 5;
		
		$("#btns").css('top', btnH);
		$("#btns").css('right', -btnR);
		
		//SET GALLERY BTN PLACEMENT
		var gW = $(".g").width();
		var gbW = $(".gbtn").width();
		var pgB = parseInt($(".gbtn").css('paddingRight'));
		var totalGBtns = $("#btns").children(".gbtn").length;
		var totalGBtnW = ((gbW + (pgB * 2)) * totalGBtns);
		var btnGR = (gW - totalGBtnW) - 5;
		$("#btns").css('top', btnH);
		$("#btns").css('right', -btnGR);
		
		//SET HOME BTN PLACEMENT
		var hC = $("#homecont").height();
		var hBtn = $("#homebtns").height();
		var hP = parseInt($("#home").css('paddingTop'));
		var btnT = hC + hBtn + (hP * 2);
		
		//$("#featMenu").css('top', btnT);
		//$("#featMenu").css('right', -15);
		
		//SET CONTENT LOCATION HEIGHT UPON LOADING
		var links = $("#mapNav").height();
		var totalMH = links + c + (pC*2);
		$("#locationcopy").height(totalMH);
		$("#mapNav").css('top', (c + (pC*2)));

	
	//CLICK HOME BTNS
	//Change background image using the alt set on the home template page.
	$(".hbtn").click(function(){
		$(".hbtn:eq("+old+")").removeClass('grbkg');
		$(".hbtn:eq("+old+")").addClass('rbkg');
		var img = $(this).attr("alt");
		newHomeBG(img);
		
		//the margin of the content class
		var m = parseInt($(".homeTitle").css('marginLeft').replace(/[^-\d\.]/g, ''));

		//index of the content and the width of content class
		var iCont = $(this).index();
		var w = $(".homeTitle").width() + m;
		
		//set the left attr
		var move = (iCont * w) - m;
		$("#homecont").animate({left: -move}, 'slow');
		
		//Change the "Learn More >" link using the alt tag
		var iFeat = $("#homecont").children(".homeTitle:eq("+iCont+")").attr("alt");
		$("#learnMore").attr("href", ""+iFeat+"");
		$(".hbtn:eq("+iCont+")").addClass('grbkg');
		$(".hbtn:eq("+iCont+")").removeClass('rbkg');
		
		//Set old index to reset background later
		old = iCont;
			
	});
		
	//CLICK CONTENT BTNS
	$(".cbtn").click(function(){
		var currClass = $(this).attr('class').replace('cbtn', '');
		$(".cbtn:eq("+old+")").addClass(currClass);
		$(".cbtn:eq("+old+")").removeClass('grbkg');
		
		var img = $(this).attr("alt");
		newBG(img);
		
		//the margin of the content class
		var m = parseInt($(".c").css('marginRight').replace(/[^-\d\.]/g, ''));

		//index of the content and the width of content class
		var iCont = $(this).index();
		var w = $(".c").width() + m;
		
		//set the left attr
		var move = (iCont * w) - m;
		$("#copycont").animate({left: -move}, 'slow');
		
		$(".cbtn:eq("+iCont+")").removeClass(currClass);
		$(".cbtn:eq("+iCont+")").addClass('grbkg');
		old = iCont;
			
	});
	
	//CLICK GALLERY BTNS
	$("#nxtB").click(function(){
		
		if(count == total){
			count = 0;
		}else{
			count++;
		}
		
		var img = $("#copycont").children(".g:eq("+count+")").attr("alt");
		newBG(img);
		moveGallery();
		
	});
	
	$("#prvB").click(function(){
		if(count == 0){
			count = total;
		}else{
			count = count - 1;
		}
		
		var img = $("#copycont").children(".g:eq("+count+")").attr("alt");
		newBG(img);
		moveGallery();
		
	});
	
function moveGallery(){
		
		//the margin of the content class
		var m = parseInt($(".g").css('marginRight').replace(/[^-\d\.]/g, ''));

		//find total container width by adding the width of each content class with their margin
		var w = $(".g").width() + m;
		
		//find total width by multiplying the content class by the total amount of content classes and subtract the margin to counteract the default starting margin
		var move = (count * w) - m;
		$("#copycont").animate({left: -move}, 'slow');
		
}

//When the Content Buttons are clicked the content changes as does the background. This function is for interior pages. The second is for pages with full image backgrounds and no secondary boxes.	
function newBG(e){
		
		//FADE OUT CURRENT BACKGROUND IMG	
		$(".intBkg").animate({opacity:0},function() {
			
			//REPLACE WITH NEW IMG
			$(".intBkg").html("<img src='"+e+"'/>");
			$(".intBkg").animate({opacity:1});
			
			// GRAB DIMENSIONS					   
			var browserwidth = $(window).width();
			var browserheight = $(window).height();
			var homebh = $(window).height() - 100;
			$("#breadBkg").width(browserwidth - 200);
			$("#nav").height(browserheight - 75);
			$("#content").height(browserheight - 75);
			$("#galleryContent").height(browserheight);
			$("#locationContent").height(browserheight);
			$(".intBkg").height(browserheight -75);
			$("#map_canvas").height(browserheight);
			
			//Resize image to proper ratio
			if ((browserheight/browserwidth) > ratio){
				 
				$(".intBkg img").width(((browserheight) / ratio));
				$(".intBkg img").height(browserheight - 100);
				
			} else {
				 
				$(".intBkg img").width(browserwidth);
				$(".intBkg img").height(((browserwidth-100) * ratio));
				
			}	
				
		});
}

function newHomeBG(e){
		
	//FADE OUT CURRENT BACKGROUND IMG	
	$(".homeBkg").animate({opacity:0},function() {
		
		//REPLACE WITH NEW IMG
		$(".homeBkg").html("<img src='"+e+"'/>");
		$(".homeBkg").animate({opacity:1});
		
		// GRAB DIMENSIONS					   
		var browserwidth = $(window).width();
		var browserheight = $(window).height();
		var homebh = $(window).height() - 100;
		$("#homenav").height(homebh);
		$("#content").height(browserheight -75);
		$("#homeContent").height(homebh);
		$(".homeBkg").height(homebh);;
		
		//Resize image to proper ratio
		if ((browserheight/browserwidth) > ratio){
			
			$(".homeBkg img").width((browserheight / ratio));
			$(".homeBkg img").height((browserheight-100) - 100);
			
		} else {
			
			$(".homeBkg img").width(browserwidth);
			$(".homeBkg img").height(((browserwidth - 100) * ratio) - 100);
			
		}
			
	});
}

/* NAVIGATION ANIMATIONS */
	//SET TIMER BOOLEAN
	timerRunning = false;
	
	//TIMERS
	//If user rolls over navigation kill fadeOut timer. If user rolls out of navigation start fadeOut timer.
	function startTimer(){
			myTimer = setTimeout(function(){$(active).delay(200).fadeOut()}, 600);
			timerRunning = true;
		}
	function stopTimer(){
			if(timerRunning){
				clearTimeout(myTimer);
			}
	}
	
	//CLEAR ACTIVE DIV
	function kill(){
		if(icurrent == inew){
			stopTimer();
		}else{
			stopTimer();
			var a = $("#subnav").children(".subnavCont:eq("+icurrent+")");
			$(a).fadeOut();
			
		}
	}
	
	//ROLLOVER & ROLLOUT NAV
	$(".navcont").bind('mouseenter', function(){
		stopTimer();
		inew = $(this).index();
		kill();
		active = $("#subnav").children(".subnavCont:eq("+inew+")");
		$(active).fadeIn();
	});
	
	$(".navcont").bind('mouseleave', function(){
		icurrent = inew;
		$(active).bind('mouseenter', stopTimer);
		$(active).bind('mouseleave', startTimer);
		startTimer();
			
	});
	
	//ROLLOVER & ROLLOUT SUBNAV
		$(active).bind('mouseenter', stopTimer);
		$(active).bind('mouseleave', startTimer);


	//INTERIOR PAGE NAV MORE BTN
	//Scrolls the Page to the top of the secondary boxes
	$('#more').click(function(){
		$("html, body").animate({scrollTop:(document.body.clientHeight - $("#sec").height())}, 600);
		return false;
	});
	
	var _secNav = function(){
		
		return{
			
			getWidth:function(){
				
				//count boxes in the #sec div
				var L = $("#sec").children().length - 1;
				
				//set a total width variable which is later used to set the width of the #sec div
				var totalSW = 0;
				
				for(s=0;s<=L;s++){
					
					//for each of the boxes in #sec, get it's index and then it's width
					var secDiv = $("#sec").children(".secbox").get(s);
					var secDivW = $(secDiv).width();
					
					//add the width of each box to the global totalSW variable
					totalSW = totalSW + secDivW;
				}
				
				//set width of container to the total width of all boxes, so it floats always floats center.
				$("#sec").width(totalSW + 60);
			}
		}
			
	}();
	
	_secNav.getWidth();
	
});