// This script adds additional content to a page (depending on what page it is).
$(document).ready(function() {
	if (window.location.href.search(".com/clients") != -1) {
		if (navigator.appName == "Microsoft Internet Explorer") {
			$("#nav_column").css("margin-top","60px");		
		}
		else {
			$("#nav_column").css("margin-top","44px");
		}
		imagesHTML = "<div id='imgDiv1'></div><div id='imgDiv2'></div><div id='imgDiv3'></div><div id='imgDiv4'></div><div id='test'></div>";
		$("#nav_column").html(imagesHTML);

		//Make the 4 imgDivs evenly-sized:
		for (var i = 1; i <= 4; i++) {
			$("#imgDiv"+i).css("width","154px");
			$("#imgDiv"+i).css("height","78px");
			$("#imgDiv"+i).css("margin-left","30px");
			$("#imgDiv"+i).css("margin-right","30px");
			$("#imgDiv"+i).css("margin-bottom","60px");			
		}

		Array.prototype.shuffle = function (){ for(var rnd, tmp, i=this.length; i; rnd=parseInt(Math.random()*i), tmp=this[--i], this[i]=this[rnd], this[rnd]=tmp);};		
		imagesArray = [1,2,3,4,5];		
		imagesArray.shuffle();
		imagesPointer = 0;
		stopFade = new Array(0,0,0,0);

		//Specify 4 different initial fade-in timeouts (one for each div):
		timeoutArray = [1,2,3,4];
		timeoutArray.shuffle();
		
		timer = new Array();		

		changeLogo = new Array();

		//Start fading in an image in each div at their specified timeouts:
		for (var i = 1; i <= 4; i++) {
			setTimeout("displayImage("+i+");", timeoutArray[i-1] * 1000);			
		}
		
		changeLogo[1] = true;
		changeLogo[2] = true;
		changeLogo[3] = true;
		changeLogo[4] = true;		
		
		//Set 4 listeners (one for each logo div) to control animation pausing:		
		$("#imgDiv1").mouseover(function() {
			changeLogo[1] = false;
			clearTimeout(timer[1]);
		});
		$("#imgDiv1").mouseout(function() {
			changeLogo[1] = true;
			timer[1] = setTimeout("changeImage(1);", 10000);
		});		

		$("#imgDiv2").mouseover(function() {
			changeLogo[2] = false;
			clearTimeout(timer[2]);
		});
		$("#imgDiv2").mouseout(function() {
			changeLogo[2] = true;
			timer[2] = setTimeout("changeImage(2);", 10000);
		});	

		$("#imgDiv3").mouseover(function() {
			changeLogo[3] = false;
			clearTimeout(timer[3]);
		});
		$("#imgDiv3").mouseout(function() {
			changeLogo[3] = true;
			timer[3] = setTimeout("changeImage(3);", 10000);
		});	
		
		$("#imgDiv4").mouseover(function() {
			changeLogo[4] = false;
			clearTimeout(timer[4]);
		});
		$("#imgDiv4").mouseout(function() {
			changeLogo[4] = true;
			timer[4] = setTimeout("changeImage(4);", 10000);
		});						
	}
	else if (window.location.href.search("/contact") != -1) {
		$(".textInput").each(function() {
			if ($(this).attr("name") == "word") {
				$(this).attr("id", "word");
			}
		});
		//$("#something").attr("onsubmit","return validateForm();");
		$("#something").submit(validateForm);
		
		if (window.location.href.search("/?option=done") != -1) {
			$("#contact").prepend("<span style='color: red; display: block; margin-bottom: 20px;'>Thank you. Your submission will be processed soon.</span>");
		}
	}	
});

function displayImage(divNumber) {
	fadeInDiv(divNumber);

	$("#imgDiv"+divNumber).html(getImageHTML(imagesArray[imagesPointer]));
	
	if (imagesPointer == 4) {
		imagesPointer = 0;
	}
	else {
		imagesPointer++;
	}
	//$("#test").html(imagesPointer);
	/*timer[divNumber] = */
	
	timer[divNumber] = setTimeout("changeImage("+divNumber+");", 10000);	
}

function fadeInDiv(divNumber) {
	if (stopFade[divNumber-1] != 10) {
		stopFade[divNumber-1]++;
		$("#imgDiv"+divNumber)[0].style.opacity = stopFade[divNumber-1]/10;
		$("#imgDiv"+divNumber)[0].style.filter = 'alpha(opacity=' + stopFade[divNumber-1]*10 + ')';
		setTimeout("fadeInDiv("+divNumber+");", 100);
	}
	if (stopFade[divNumber-1] == 10) {
		//$("#imgDiv"+divNumber)[0].style.display = "none";
	}		
}

function fadeOutDiv(divNumber) {
	if (stopFade[divNumber-1] != 0) {
		stopFade[divNumber-1]--;
		$("#imgDiv"+divNumber)[0].style.opacity = stopFade[divNumber-1]/10;
		$("#imgDiv"+divNumber)[0].style.filter = 'alpha(opacity=' + stopFade[divNumber-1]*10 + ')';
		setTimeout("fadeOutDiv("+divNumber+");", 100);
	}
	if (stopFade[divNumber-1] == 0) {
		//$("#imgDiv"+divNumber)[0].style.display = "none";
	}		
}

function changeImage(divNumber) {
	fadeOutDiv(divNumber);
	
	//This line fixes the crazy image switch bug:
	clearTimeout(timer[divNumber]);
	
	setTimeout("displayImage("+divNumber+");",2000);		
}

function getImageHTML(imgNumber) {
		switch (imgNumber) {
			case 1:
				return "<a class='img1' href='http://nonprofit.quantummethod.com/work/beverly-hills-bar-association/'><img id='img1' src='../images/clientsCarousel/1.5.png' onmouseover='$(\"#img1\").attr(\"src\",\"../images/clientsCarousel/1.png\");' onmouseout='$(\"#img1\").attr(\"src\",\"../images/clientsCarousel/1.5.png\");' /></a>";
				break;
			case 2:
				return "<a class='img2' href='http://nonprofit.quantummethod.com/work/foothill-vocational-opportunities/'><img id='img2' src='../images/clientsCarousel/2.5.png' onmouseover='$(\"#img2\").attr(\"src\",\"../images/clientsCarousel/2.png\");' onmouseout='$(\"#img2\").attr(\"src\",\"../images/clientsCarousel/2.5.png\");' /></a>";
				break;
			case 3:
				return "<a class='img3' href='http://nonprofit.quantummethod.com/work/para-los-ninos/'><img id='img3' src='../images/clientsCarousel/3.5.png' onmouseover='$(\"#img3\").attr(\"src\",\"../images/clientsCarousel/3.png\");' onmouseout='$(\"#img3\").attr(\"src\",\"../images/clientsCarousel/3.5.png\");' /></a>";
				break;
			case 4:
				return "<a class='img4' href='http://nonprofit.quantummethod.com/work/shields-for-families/'><img id='img4' src='../images/clientsCarousel/4.5.png' onmouseover='$(\"#img4\").attr(\"src\",\"../images/clientsCarousel/4.png\");' onmouseout='$(\"#img4\").attr(\"src\",\"../images/clientsCarousel/4.5.png\");' /></a>";
				break;
			case 5:
				return "<a class='img5' href='http://nonprofit.quantummethod.com/work/los-angeles-county-tech-week/'><img id='img5' src='../images/clientsCarousel/5.5.png' onmouseover='$(\"#img5\").attr(\"src\",\"../images/clientsCarousel/5.png\");' onmouseout='$(\"#img5\").attr(\"src\",\"../images/clientsCarousel/5.5.png\");' /></a>";
				break;
		}
}