//	*********************************************************************************************
//	*** This JavaScript file contains the functions and variables for The Faith Coin Web site ***
//	*********************************************************************************************

	
	$(document).ready(function() {	
	
		// This creates the hover indicator for the menu buttons.			
			$(".button").hover(
				function() {					
					this.src = this.src.replace("-Off", "-On");					
				},
					function() {						
						this.src = this.src.replace("-On", "-Off");						
					}
			);
			
		// This creates the hover indicator for the home flag on the Winged TAO symbol.	
			$("#wingedTAO").hover(
				function() {
					$("#taoHomeTag").addClass("taoHome-hover");
				}, 
					function() {
						$("#taoHomeTag").removeClass("taoHome-hover");
						$("#taoHomeTag").addClass("taoHome");
					}	
			);
			
		// This allows for the coin picture on the front page to switch between front and back views.
			$(".switchPic").toggle(
			
				function() {					
					$(".switchPic").attr("src", "Images/New CoinBack 500.gif");
					$(".switchPic").attr("alt", "Coin Back");					
				}, 	function() {					
					$(".switchPic").attr("src", "Images/New CoinFront 500.gif");
					$(".switchPic").attr("alt", "Coin Front");
					}
			);
			
		// This allows for changing the page location based on the fake button that was clicked.
			$(".button").click(function() {
				var x = $(this).attr("id");
				
				if (x == "legacy" || x == "booklet" || x == "coin" || x == "store" || x == "links" || x == "contact") {
					self.location = x + ".shtml";
				}	
			});
			
		// This allows for the winged TAO symbol to act as a link to the home page.	
			$("#wingedTAO").click(function() {
				self.location = "index.shtml";
			});
			
		// This creates the hover indicator for the blog page selection based on which Legacy Tree image map area is targeted.
			$("#submit").hover(
				function() {
					$("#blogLabel").html("SUBMIT A STORY");
				}, 
					function() {
						$("#blogLabel").html("<span style='color: black;'>.</span>");
					}	
			);
			
			$("#read").hover(
				function() {
					$("#blogLabel").html("READ STORIES");
				}, 
					function() {
						$("#blogLabel").html("<span style='color: black;'>.</span>");
					}	
			);			
		
		// This creates the page turning effect for the booklet page
		/*	$(".bookCover").click(
				function() {
					var x; 
					x = $(this).attr("id");
					
					switch(x) {
						case "page1":
							$(this).animate({
								height: 738 + 'px',
								width: 0 + 'px'								
							}, 950);
							//document.getElementById("page1").style.display = "none";
							$("#bookHolder").animate({
								width: 968 + 'px'
							}, 1000);
							
							break;
													
						case "page20":
						
							break;
					}
					

					/*
					if (x == "page1") {
						
							$(this).animate({
								height: 738 + 'px',
								width: 0 + 'px'							
							}, 950);
							//$(this).css("display", "none");
							$("#bookHolder").animate({
								width: 966 + 'px'
							}, 1000);
							//$("#page2").css("display", "block");
							$("#page2").animate({
								display: 'block',
								height: 738 + 'px',
								width: 475 + 'px'
							}, 950);
							//$("#page3").css("display", "block");
							$("#page3").animate({
								display: 'block',
								height: 738 + 'px',
								width: 475 + 'px'
							}, 950);
						
					}	else if (x == "page20") {	
							
								$(this).animate({
									height: 738 + 'px',
									width: 0 + 'px'							
								}, 950);
								$("#bookHolder").animate({
									width: 966 + 'px'
								}, 1000);
								$("#page18").animate({
									height: 738 + 'px',
									width: 475 + 'px'
								}, 950);
								$("#page19").animate({
									height: 738 + 'px',
									width: 475 + 'px'
								}, 950);
							
						}
					
				}		
			);
			
			$(".bookPage").click(
				function() {
					var x; 
					x = $(this).attr("id");
					
					switch(x) {
													
						case "page2":
							//document.getElementById("page1").style.display = "block";
							$("#page1").animate({
								height: 738 + 'px',
								width: 475 + 'px'								
							}, 950);							
							$("#bookHolder").animate({
								width: 487 + 'px'
							}, 1000);
							$("#page2").animate({ height: 738 + 'px', width: 0 + 'px' }, 950);
							
							$("#page3").animate({
								height: 738 + 'px',
								width: 0 + 'px'								
							}, 950);
							
							
							break;
							
						case "page3":
						
							break;
					}
				}	
			); */
	});