/* ----------------------------------------------------------------------------- */
// ANIMATION SCRIPT FOR KEVINJAKO.COM
// requires jquery 1.2.6 + easing plugin
/* ----------------------------------------------------------------------------- */

/* FUNCTIONS TO SHOW & HIDE CONTACT MINI-PAGE */

showContactInfo = function() {
	//force-hide masks before showing them
	$("#black-mask").css({"display":"block","opacity":0}); 
	$("#contact-popup").css({"display":"block","opacity":0 });
	//start animation	
	$("#black-mask").animate({"opacity" : "0.9"}, 1000,function(){
		//build page content through JS (I dont want to use AJAX)
		var contactMeContent='<div id="contact-popup-wrapper"><h2>Email me</h2>';
		contactMeContent+='<img id="email-address-dark" src="_img/email-dark.gif" width="170" height="43" />';		
		contactMeContent+='<p>In an effort to cut back on the amount of <span style="color:#f00;">spam</span> I receive on a ';
		contactMeContent+='daily basis, I am no longer providing any direct links or textual references to my e-mail address. ';
		contactMeContent+='</p><p>Sorry for the inconvenience!</p>';
		contactMeContent+='<a id="close-popup" href="">Done</a></div>';
		$("#contact-popup").html(contactMeContent); //show contact window
		$("#close-popup").click(function(e){ e.preventDefault(); hideContactInfo();	}); //bind close link click event
		$("#contact-popup").animate({"opacity" : "0.8"}, 300);  //show inner window
	});
}

hideContactInfo = function() {
	$("#contact-popup").animate({"opacity" : "0"}, 300, function(){  //hide contact mini-page
		$("#black-mask").animate({"opacity" : "0"}, 1000, function() {
		 	$("#black-mask").hide(); $("#contact-popup").hide();
		});
	});
}

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

/* WHEN DOM HAS FINISHED LOADING: */
$(document).ready(function(){
	
	/* FIX CONTACT ME LINKS AND EXTERNAL LINKS*/
	/* ----------------------------------------------------------------------------- */	
	$("a[@rel~='contact-me']").click(function(e){ e.preventDefault(); showContactInfo(); });
	$("a[@rel~='external']").attr("target","_blank");
	
	/* HIDE ORIGINAL SIGNATURE ANCHOR AND INJECT MASKS */
	/* ----------------------------------------------------------------------------- */	

	//build signatureMask string
	var signatureMasks = "";
	for (i=0; i<10; i++) { signatureMasks += '<a href="" class="signature-mask" id="signature-link-'+ i + '" title="email me"></a>';	}
	
	$("#contact-me").hide(); //hide original link
	$("#signature").addClass("signature-background").append(signatureMasks); //add 10 invisible masks
	$("#signature-background").ifixpng();  //stupid IE 6.
	$(".signature-mask").hover( //add hover effects
	function() { //ON MOUSE-OVER
		$("#signature").removeClass("signature-background").addClass("signature-background-hover");	
	}, function() { //ON MOUSE-OUT
		$("#signature").removeClass("signature-background-hover").addClass("signature-background");		
	}).click(function(e){ e.preventDefault(); showContactInfo(); }); //click on masked signature 

	/* INJECT CONTACT PAGELET STRUCTURE */
	$("#wrapper").append('<div id="black-mask"></div><div id="contact-popup"></div>');
	$("#black-mask").hide(); $("#contact-popup").hide();
	
	/* INJET 'NEXT' LINK FOR CONTENT PAGINATION AND CREATE EVENTS*/
	$("#content").css({"overflow": "hidden", "height": "510px", "padding": "0"}); //remove scrollbars, bump height
	$(".content-block").addClass("content-block-paginated").removeClass("content-block"); //swap CSS styles
	$("#content").append('<div class="current-page-1" id="content-next-button"><a title="next page" href="#">next</a></div>');		
	var newHeight= $("#content-section-1 .content-wrapper").height() + 30 + "px";
	$("#content-next-button").css({"top":newHeight});
	$("#content-section-1").css({"left":"0px","top":"0px"});




	/* -- -- PAGINATION ANIMATION -- -- */
/* ----------------------------------------------------------------------------- */

	$("#content-next-button").click(function(e){
		e.preventDefault(); //kill DOM event
		//find current and next page numbers
		var currentPageName=$("#content-next-button").attr('class'); //get current page
		var currentPage=currentPageName.substr((currentPageName.length-1),1); //isolate number
		currentPageName="#content-section-"+currentPage; //get DOM id
		var currentPage=currentPage*1; //convert to integer
		var nextPage=(currentPage+1); //select next page
		var nextPageName="#content-section-" + nextPage;
		if ($("#content").children(nextPageName).attr('id')) { //test if next page exists
			//exists, do nothing... continue loading next page
		} else {
			//doesn't exit, load first page instead
			nextPage=1;
			nextPageName="#content-section-" + nextPage;			
		}
		
		$("#content-next-button").animate({top: "-=5px"}, 100, "easeOutExpo" ,function() {   //animation sequence...
			$("#content-next-button").animate({top: "+=30px",opacity:0}, 200, "easeOutBounce"); 
			$(currentPageName).animate({"top" : "20px"}, 400, "easeOutBounce", function(){
				$(currentPageName).animate({left: "-=250px"}, 600, "easeInOutExpo");
				$(nextPageName).animate({left: "-=250px"}, 600, "easeInOutExpo",function(){
					$(nextPageName).animate({"top" : "0px"}, 400, "easeOutBounce", function(){
						$(currentPageName).css({"left":"250px","top":"20px"});
						$("#content-next-button").fadeIn(400).addClass('current-page-' + nextPage).removeClass('current-page-' + currentPage);
						var newHeight = $(nextPageName + " .content-wrapper").height() //reposition next button
						if (newHeight>300) {newHeight=300;} //break gracefully
						newHeight= newHeight+50 + "px";
						$("#content-next-button").css({"top":newHeight});
						$("#content-next-button").animate({opacity: 100, top:"-=20px"}, 2000, "easeOutExpo");
					});
				});			
			});
		});
	});
	
/*  END DOM-READY EVENT */

});