jQuery.preloadImages = function()
{
  for(var i = 0; i<arguments.length; i++)
  {
    jQuery("<img>").attr("src", arguments[i]);
  }
}
$.preloadImages("../img/C70416.jpg", "../img/C30494.jpg", "../img/C30508.jpg","../img/C61107.jpg","../img/C61099.jpg","../img/C30534.jpg","../img/C30465.jpg","../img/C61198.jpg");

$(function() {
  	$('#bigBox, #bigBox_donate, .backButton1, .backButton2, .backButton3, .moreInfoButton').corner();
	$('#box1,#box2,#box3,#bigBox,h1,.page1 p,p.caption, #copyright,.nextButton1,#bottomContainer').css("opacity","0");
	$('#obwLink').css("display","none");
	$('div.page1').append("<a class='nextButton1'>Next &rarr;</a>");		//for JS enabled browsers
	$('div.page2').append("<a class='nextButton2' href='DonateLaptops.php'>Next &rarr;</a>");
	$('.page1,.nextButton1,.backButton1,.nextButton2').css("display","block");	//for JS enabled browsers
	$('#box1,#box2,#box3').width(216).height(144);

//set link styling for JS enabled browsers
	setTimeout('$("#here").css({textDecoration: "underline", color: "#03c", fontStyle: "normal", cursor: "default"})', 3000);
   setTimeout('$("#mulbah").css({textDecoration: "underline", color: "#03c", fontStyle: "normal", cursor: "default"})', 3000);

//site opening
	$('#wrapper,#banner').fadeIn();
  	setTimeout('$("#bottomContainer").animate({opacity: ".8"}, 1000)', 500);
	setTimeout('$("#box1").animate({width: "180px", height: "120px", marginTop: "0", marginLeft: "0", opacity: "1"}, 1000)', 400);
	$('.photo_caption1').append('Rev. Joseph Mulbah');
	setTimeout('$("#box2").animate({width: "180px", height: "120px", marginTop: "10", marginLeft: "0", opacity: "1"}, 1000)', 700);
	$('.photo_caption2').replaceWith("<p class='photo_caption2' style='width: 135px;'>Josephine, 8th grade</p>");
	setTimeout('$("#box3").animate({width: "180px", height: "120px", marginTop: "10", marginLeft: "0", opacity: "1"}, 1000)', 1000);
	$('p.photo_caption3').append('Precious, 8th grade');
	setTimeout('$(".magnifyingGlass").fadeIn(1000)', 1000);
	setTimeout('$("#bigBox,#copyright").animate({opacity: "1"}, 1000)', 800);
	setTimeout('$("h1").animate({opacity: "1"}, 750)', 1200);
	setTimeout('$(".page1 p").animate({opacity: "1"}, 800)', 1800);
	setTimeout('$("p.caption").animate({opacity: "1"}, 800)', 3000);
	$(".nextButton1").css({opacity:"0"});
	setTimeout('$(".nextButton1").animate({opacity: "1"}, 750)', 3000);

//buttons
	$('.nextButton1').click(function() {
    document.title = "Liberian Education - page 2";
	$('.page1').fadeOut(400);
	$('#box1,#box2,#box3').fadeOut(400);
	setTimeout('$("#box1").attr("src","img/C30534.jpg")', 420);
	$('p.photo_caption1').replaceWith("<p class='photo_caption1' style='width: 126px;'>Diamond, 8th grade</p>");
	setTimeout('$("#box2").attr("src","img/C61099.jpg")', 420);
	$('p.photo_caption2').replaceWith("<p class='photo_caption2' style='width: 120px;'>Unused classroom</p>");
	setTimeout('$("#box3").attr("src","img/C70416.jpg")', 420);
	$('p.photo_caption3').replaceWith("<p class='photo_caption3' style='width: 175px;'>Adam Kobrin &amp; Mark Flomo</p>");
	setTimeout('$(".page2").fadeIn(1700)', 500);
	setTimeout('$("#box1").fadeIn(600)', 500);
	setTimeout('$("#box2").fadeIn(600)', 600);
	setTimeout('$("#box3").fadeIn(600)', 700);
});
	
	 $('.backButton1').click(function() {
  	document.title = "Liberian Education - page 1";
	$('.page2').fadeOut(400);
	setTimeout('$(".page1").fadeIn(400)', 500);
	$('#box1').attr('src','img/C30508.jpg');
	$('.photo_caption1').replaceWith("<p class='photo_caption1'>Rev. Joseph Mulbah</p>");
	$('#box2').attr('src','img/C30494.jpg');
	$('.photo_caption2').replaceWith("<p class='photo_caption2' style='width: 135px;'>Josephine, 8th grade</p>");
	$('#box3').attr('src','img/C61107.jpg');
	$('.photo_caption3').replaceWith("<p class='photo_caption3'>Precious, 8th grade</p>");
});
	
  $('.nextButton2').click(function() {
	$('.page2,#bigBox,p.caption').fadeOut(200);
	$('#box1,#box2,#box3,.magnifyingGlass').fadeOut(200);
});
	
  $('.backButton2').click(function() {
  	document.title = "Liberian Education - page 2";
	$('.page3,#obwLink').fadeOut(400);
	setTimeout('$(".page2").fadeIn(400)', 500);
	$('#box1').attr('src','img/C30534.jpg');
	$('p.photo_caption1').replaceWith("<p class='photo_caption1' style='width: 126px;'>Diamond, 8th grade</p>");
	$('#box2').attr('src','img/C61099.jpg');
	$('p.photo_caption2').replaceWith("<p class='photo_caption2' style='width: 120px;'>Unused classroom</p>");
	$('#box3').attr('src','img/C70416.jpg');
	$('p.photo_caption3').replaceWith("<p class='photo_caption3' style='width: 175px;'>Adam Kobrin &amp; Mark Flomo</p>");
});
//end buttons

	$("#mulbah").hover(
		function() {
			makeLarger1();
		},
		function() {
			$('.photo_caption1').fadeOut(50);
  			$('#box1').animate ({width: "180px", height: "120px", border: "1pt solid"}, 350);
  			$('#box2,#box3, .magnifyingGlass').animate({opacity: "1"}, 400);
		});
	
	$(".magnifyingGlass:eq(0)").toggle(
		function() {
			makeLarger1();
		},
		function() {
			$('.photo_caption1').fadeOut(50);
  			$('#box1').animate ({width: "180px", height: "120px", border: "1pt solid"}, 350);
  			$('#box2,#box3, .magnifyingGlass').animate({opacity: "1"}, 400);
		});
		
	$('.magnifyingGlass:eq(1)').toggle (
		function() {
			makeLarger2();
			},
			function() {
			$('.photo_caption2').fadeOut(50);
  			$('#box2').animate ({width: "180px", height: "120px", border: "1pt solid"}, 350);
  			$('#box1,#box3, .magnifyingGlass').animate({opacity: "1"}, 400);
			});
			
	$("#here").hover(
		function() {
			makeLarger3();
		},
		function() {
			$('.photo_caption3').fadeOut(50);
  			$('#box3').animate ({width: "180px", height: "120px", marginTop: "10px", border: "1pt solid"}, 350);
  			$('#box1,#box2, .magnifyingGlass').animate({opacity: "1"}, 400);
		});
		
		$(".magnifyingGlass:eq(2)").toggle(
		function() {
			makeLarger3();
		},
		function() {
			$('.photo_caption3').fadeOut(50);
  			$('#box3').animate ({width: "180px", height: "120px", marginTop: "10px", border: "1pt solid"}, 350);
  			$('#box1,#box2, .magnifyingGlass').animate({opacity: "1"}, 400);
		});
	
	$('.magnifyingGlass:eq(0)').mouseout(function() {
		$('.photo_caption1').fadeOut(50);
  		$('#box1').animate ({width: "180px", height: "120px", border: "1pt solid"}, 350);
  		$('#box2,#box3, .magnifyingGlass').animate({opacity: "1"}, 400);
	});
	
	$('.magnifyingGlass:eq(1)').mouseout(function() {
		$('.photo_caption2').fadeOut(50);
  		$('#box2').animate ({width: "180px", height: "120px", border: "1pt solid"}, 350);
  		$('#box1,#box3, .magnifyingGlass').animate({opacity: "1"}, 400);
	});
	
	$('.magnifyingGlass:eq(2)').mouseout(function() {
		$('.photo_caption3').fadeOut(50);
  		$('#box3').animate ({width: "180px", height: "120px", marginTop: "10px", border: "1pt solid"}, 350);
  		$('#box1,#box2, .magnifyingGlass').animate({opacity: "1"}, 400);
	});
});

//************** HOVER INTENT *****************
	setTimeout('$("#box1").hoverIntent({interval: 100, over: makeLarger1, out: makeSmaller1})', 3000); 
   setTimeout('$("#box2").hoverIntent({interval: 100, over: makeLarger2, out: makeSmaller2})', 3000);
   setTimeout('$("#box3").hoverIntent({interval: 100, over: makeLarger3, out: makeSmaller3})', 3000);
   setTimeout('$("#banner").hoverIntent({interval: 100, over: bannerNote_reveal, out: bannerNote_hide})', 3000);
	
function makeLarger1() {
  $('#box1').animate ({width: "+=120px", height: "+=80px", border: "3pt solid"}, 500);
  $('#box2, .magnifyingGlass').animate({opacity: ".4"}, 400);
  setTimeout('$("#box3").animate({opacity: ".4"}, 400)', 100);
  $(".photo_caption1").fadeIn(400);
}
function makeSmaller1() {
  $('.photo_caption1').fadeOut(50);
  $('#box1').animate ({width: "-=120px", height: "-=80px", border: "1pt solid"}, 350);
  $('#box2,#box3, .magnifyingGlass').animate({opacity: "1"}, 400);
}

function makeLarger2() {
  $('#box2').animate ({width: "+=120px", height: "+=80px", border: "3pt solid"}, 500);
  $('#box1, .magnifyingGlass').animate({opacity: ".4"}, 400);
  setTimeout('$("#box3").animate({opacity: ".4"}, 400)', 100);
  $(".photo_caption2").fadeIn(400);
}
function makeSmaller2() {
	$('.photo_caption2').fadeOut(50);
  	$('#box2').animate ({width: "-=120px", height: "-=80px", border: "1pt solid"}, 350);
  	$('#box1,#box3, .magnifyingGlass').animate({opacity: "1"}, 400);
}

function makeLarger3() {
  $('#box3').animate ({width: "+=120px", height: "+=80px", marginTop: "-=60px", border: "3pt solid"}, 500);
  $('#box2, .magnifyingGlass').animate({opacity: ".4"}, 400).css("zIndex","0");
  setTimeout('$("#box1").animate({opacity: ".4"}, 400)', 100);
  $(".photo_caption3").fadeIn(400);
}
function makeSmaller3() {
	$('.photo_caption3').fadeOut(50);
  $('#box3').animate ({width: "-=120px", height: "-=80px", marginTop: "+=60px", border: "1pt solid"}, 350);
  $('#box2,#box1, .magnifyingGlass').animate({opacity: "1"}, 400);
  setTimeout('$("#box2").css("zIndex","2")',450);
  setTimeout('$("#box1").css("zIndex","3")',450);
}

function bannerNote_reveal() {
	$('#bannerNote').css({display: "block", opacity: "0"});
	$("#bannerNote").animate({opacity: "1", marginLeft: "+=50px", color: "darkred", fontSize: "+=.1em"}, {duration: 750, easing: "easeOutQuint"});
}
function bannerNote_hide() {
	$("#bannerNote").animate({opacity: "0", marginLeft: "-=50px", color: "black", fontSize: "-=.1em"}, 300);
}