// JavaScript Document

$(document).ready(function(){
		
	// delays
	var dropDownDelay = 300;
	var popupDelay = 300;
	var valuesDelay = 3000;
	
	// timers
	var delayMenuOff = false;
	var delayMenuOn = false;
	var delayPop = false;
	var delayValues = false	
	
	var inMenu = false;
	
	/* SHOW/HIDE MENU WITH MOUSEOVER DELAY */ 
	
	function showDelayedMenu(menu)
	{
		// already in the menu?
		if (inMenu) {
			// cancel the timer thats going to say we're not in the menu
			if (delayMenuOff) {
				clearTimeout(delayMenuOff);
			}
			// immediately show the menu, because if we're in the menu we don't need a delay
			showMenu(menu);
		} else {
			// start timer to show the menu after certain delay and says we're now in the menu
			delayMenuOn = setTimeout(function(){
				showMenu(menu);
				}, dropDownDelay);
		}
	}
	
	function hideMenu(menu)
	{
		// is there a timer running to show the menu? too bad, we've already moved away, so cancel it
		if (delayMenuOn) {
			clearTimeout(delayMenuOn);
		} 
		// start a timer that will say we're not in the menu. if we move into another menu after hiding this one fast enough (within 100ms),
		// this timer will be canceled, and we still regard ourself to being in the menu
		delayMenuOff = setTimeout(function(){
			inMenu = false;
			}, 100);
		// we still have to hide the given menu, though
		$("#menu ." + menu + " ul").hide();
		$("#menu ." + menu + " .parent").removeClass(menu + "hover");
		$(".main, .body").removeClass("transparent");
	}

	function showMenu(menu)
	{
		inMenu = true;
		$("#menu ." + menu + " ul").show();
		$("#menu ." + menu + " .parent").addClass(menu + "hover");
		$(".main, .body").addClass("transparent");
	}

	/* DROP DOWN MENUS = HOME */

	$("#menu .home .parent, #menu .home ul").hover(function(){
		showDelayedMenu("home");
	}, function() {
		hideMenu("home");
	});

	/* DROP DOWN MENUS = PRODUCTS */

	$("#menu .products .parent, #menu .products ul").hover(function(){
		showDelayedMenu("products");
	}, function() {
		hideMenu("products");
	});
	
	/* DROP DOWN MENUS = ABOUT */

	$("#menu .about .parent, #menu .about ul").hover(function(){
		showDelayedMenu("about");
	}, function() {
		hideMenu("about");
	});

	/* DROP DOWN MENUS = EMPLOYMENT */

	$("#menu .employment .parent, #menu .employment ul").hover(function(){
		showDelayedMenu("employment");
	}, function() {
		hideMenu("employment");
	});

	/* DROP DOWN MENUS = CONTACT */

	$("#menu .contact .parent, #menu .contact ul").hover(function(){
		showDelayedMenu("contact");
	}, function() {
		hideMenu("contact");
	});
	
	/* SEARCHBOX */

	$("#search").focus(function(){
		$(this).addClass("active");
	});
	
	$("#search").blur(function(){
		if ($(this).val() == "") {
			$(this).removeClass("active");
			$(this).val("");
		}
	});
	
	/* POPUPBALLOONS */
	/* using mouseover/out for compatibility with ie6 (instead of hover) */
	/* the popup will be delayed for 500ms so if we move out quick enough, the delay will be canceled so the popup won't be shown */
	
	function showDelayedPopup(popupID)
	{
		delayPop = setTimeout(function(){
			$("#" + popupID).animate({
				opacity: "show", marginTop: "+=10"
			}, 300)
		}, popupDelay);
	}
	
	function hidePopup(popupID) {
		clearTimeout(delayPop);
		$("#" + popupID).animate({
			opacity: "hide", marginTop: "-=10"
		}, 200);
	}

	$("#pop1link").mouseover(function(){
		showDelayedPopup("pop1");
	});
	$("#pop1link").mouseout(function(){
		hidePopup("pop1");
	});

	$("#pop2link").mouseover(function(){
		showDelayedPopup("pop2");
	});
	$("#pop2link").mouseout(function(){
		hidePopup("pop2");
	});
	
	$("#pop3link").mouseover(function(){
		showDelayedPopup("pop3");
	});
	$("#pop3link").mouseout(function(){
		hidePopup("pop3");
	});
	
	$("#pop4link").mouseover(function(){
		showDelayedPopup("pop4");
	});
	$("#pop4link").mouseout(function(){
		hidePopup("pop4");
	});
	
	/* VALUES */
	// like with the popup balloons, we use mouseover and out for the exact same reason
	
	// start the rotation
	rotateValues(0, valuesDelay);

	function rotateValues(value, time)
	{
		// get the next and previous valueID (wraps around with modulo)
		newValue = (value + 1) % 5;
		oldValue = (value + 4) % 5;
		// set z-indexes so that a 'newer' image will always be on top of an old one
		$('#valueimage'+oldValue).css({zIndex: 0});
		$('#valueimage'+newValue).css({zIndex: 1});
		// after a certain time, we fade in the next image and hide the old one.
		// so at any point, at least 2 images are visible: the old and current, or current and (fading in) next image
		delayValues = setTimeout (function(){
	   		$('#valueimage'+newValue).fadeIn(1000);
	   		$('#valueimage'+oldValue).hide();
			// recursion, we move to the next image
			rotateValues(newValue, valuesDelay);
		}, time);
	}

	// if we want to display an image because of a mouseover action, we do so and cancel the timer for the rotator
	// also, we show the previous image, which has a lower z-index (thanks to rotateValues) so normally won't be visible,
	// but if the image that triggers the mouseover is fading in at the moment, it will keep fading in nicely on the underlying
	// image, instead of on a white background
	function displayValues(value)
	{
		oldValue = (value + 4) % 5;
		$('#valueimage' + oldValue).css({zIndex: 0});
		$('#valueimage' + value).css({zIndex: 1});		
		// hide all images
		$(".values").hide();
		// show previous and current
		$("#valueimage" + oldValue).show();
		$("#valueimage" + value).show();
		clearTimeout(delayValues);
	}

	$("#values0").mouseover(function(){
		displayValues(0);
	});
	$("#values0").mouseout(function(){
		rotateValues(0, 500);
	});

	$("#values1").mouseover(function(){
		displayValues(1);
	});
	$("#values1").mouseout(function(){
		rotateValues(1, 500);
	});
	
	$("#values2").mouseover(function(){
		displayValues(2);
	});
	$("#values2").mouseout(function(){
		rotateValues(2, 500);
	});
	
	$("#values3").mouseover(function(){
		displayValues(3);
	});
	$("#values3").mouseout(function(){
		rotateValues(3, 500);
	});
	
	$("#values4").mouseover(function(){
		displayValues(4);
	});
	$("#values4").mouseout(function(){
		rotateValues(4, 500);
	});
	
	$("div.specialisms div.item").click(function(){
		window.location = $(this).find("a").attr("href");
	});

	$("div.testimoniallinks div.testimonial").click(function(){
		window.location = $(this).find("a").attr("href");
	});

});