$(document).ready(function(){
						   
	var frameIndex = 0;
	var frameInterval;
	
	setTimeout("init()", 200);
	
	$("#hero #heroNav .navBtn").click(function(){
		if(!$(this).hasClass("active")){
			onBtnClick(this);
		}
		return false;
	});
});	

function init(){
	
	animateFrame(0);
	$("#hero #heroNav #btn1").addClass("active");
	animateTabs();
	
	startTimer();
}

function animateTabs(){
	$("#hero #heroNav #btn1").animate({
		marginTop:"0"
	}, 100, "easeOutQuad", function(){
		$("#hero #heroNav #btn2").animate({
			marginTop:"0"
		}, 100, "easeOutQuad", function(){
			$("#hero #heroNav #btn3").animate({
				marginTop:"0"
			}, 100, "easeOutQuad", function(){
				$("#hero #heroNav #btn4").animate({
					marginTop:"0"
				}, 100, "easeOutQuad", function(){
				
				});
			});
		});
	});
}

function onBtnClick(btn){
	resetTimer();
	startTimer();
	animateFrame($(btn).index());
}

function setBtnActive(index){
	$("#hero #heroNav .navBtn").removeClass("active");
	$($("#hero #heroNav .navBtn")[index]).addClass("active");
}

function animateFrame(index){
	setBtnActive(index);
	var frame = $($("#hero .frame")[index]);
	$("#hero .frame").hide();
	
	$(".inLeft", frame).css("margin-left", "-27px");
	$("h2", frame).css("margin-left", "27px");
	$("p", frame).css("margin-left", "27px");
	$(".frameLink", frame).css("margin-left", "-27px");
	$(frame).children().hide();
	$(frame).children(".createPortfolioBtn").show();
	
	
	$(frame).fadeIn(function(){
		if($(frame).children(".inLeft").length > 0){
			$(".inLeft", frame).animate({
				 "opacity": "toggle",
				 marginLeft: "0"
			}, 450, "easeOutQuad");
		}
		$("h2", frame).animate({
			 "opacity": "toggle",
			 marginLeft: "0"
		}, 450, "easeOutQuad", function(){
			$("p", frame).animate({
				 "opacity": "toggle",
				 marginLeft: "0"
			}, 450, "easeOutQuad", function(){
				$(".frameLink", frame).fadeIn();
				$(".frameLink", frame).animate({
					 marginLeft: "0"
				}, {duration: 450, queue: false, easing:"easeOutBack"});
			});
		});
	});
	
	frameIndex = index;
}

function startTimer(){
	frameInterval = setInterval("if(frameIndex < $('#hero').children('.frame').size() - 1){animateFrame(frameIndex+=1)}else{animateFrame(0)}", 26000);
}

function resetTimer(){
	clearInterval(frameInterval);	
}

function preloadImages(imagePath, arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = imagePath+this;
    });
}