
			var oldBox = 1; //set the deafault featured village

			var stopAnimation = "false";

			

			$(document).ready(function(){


				  $("#new2").animate( {opacity: 0.0}, 1, function() { $("#new2").hide("fast");} );

				  $("#new3").animate( {opacity: 0.0}, 1, function() { $("#new3").hide("fast");} );

				  $("#new4").animate( {opacity: 0.0}, 1, function() { $("#new4").hide("fast");} );

				  $("#new5").animate( {opacity: 0.0}, 1, function() { $("#new5").hide("fast");} );
				  

				document.getElementById("box"+oldBox).style.backgroundColor = "#553e30";

				automate();

			});

			

			// function for changing the featured village on the home page

				function fade(newBox, stopMotion){

					// when nav is clicked the varibale stop motion is set to true. This perminantly stops all animations

					if (stopMotion == "true"){

						window.clearTimeout(animationTimer);

						stopAnimation = "clicked";

					}

					//alert("oldBox = "+oldBox+" newBox ="+newBox);

					if ((newBox) != oldBox){

						

						var villageIn = ('#new'+newBox); //set div id to a string for animation

						var villageOut = ('#new'+oldBox);

						

						$(villageIn).show("fast");

						

						// animate the old box out and the new box in

						//$(villageOut).slideUp("slow");

						//$(villageIn).slideDown("slow");

						//$(villageOut).slideUp("slow", function() {

						//	$(villageIn).slideDown("slow");

							

						//});

						$(villageOut).animate( {opacity: 0}, 500, function() {

							$(villageIn).animate( {opacity: 1.0}, 500, function() {$(villageOut).hide("fast");});

							

						});

						

						var activeNav = ("box"+newBox); //set nav div id to a string for animation

						var oldNav = ("box"+oldBox);

						

						//set the nav to an active color then resets to old one to default color

						document.getElementById(activeNav).style.backgroundColor = "#553e30";

						document.getElementById(oldNav).style.backgroundColor = "#e2d6c3";

											

						oldBox = newBox; //set newBox as the oldBox so we now what to fade out next time

						automate();





					}

   				}; //close fade

				

				// function to set automation timer

				var animationTimer = '';

				function automate(change){

						if (stopAnimation == "false"){

							animationTimer = window.setTimeout(function() { setBox(); }, 7000); // set time

						}

				};

				

				//sets which box to load and to fade

				function setBox(){

					newBox = (oldBox+1); // adds 1 to the current box

					if (newBox >= 6){									   

						newBox = 1;

					} 

					fade(newBox); // starts the function fade as if it was clicked with a newBox to load

				};

				

				// pauses animation on mouse over

				function mouseOver(){ 

					if (stopAnimation != "clicked"){

						stopAnimation = "true";

						window.clearTimeout(animationTimer);

					}

				};

				

				// unpauses animation on mouse out

				function mouseOut(){ 

					if (stopAnimation != "clicked"){

						stopAnimation = "false";

						automate();

					}

				};

