var numMenu = 0;
var numSubMenu =0;
var numColoredLetters=0

var menus;
var submenus;
var coloredLetters;

var intervalID;

//var oldHeight;
//var newHeight; would need a session variable to keep track of height

var redDotPos;

//for the slideshow
var animatedImages; 
var	scrollingTexts; 
var	intervalID;
var currentIndex;

//for the better algorithm
var zIndex = 1;

jQuery.noConflict();

/* This JavaScript now takes care of all animations on the page.
It would be better to eventually divide it into several specific files.
It handles: 
1. the main graphical menu (fading in and out between two images) on hover
2. the sub menu, which slides on hover 
3. the animated slide-show imagemap menu, which is the most complicated*/

   
		// FIND BROWSER INFO
		var appVersion = navigator.appVersion;
		var appName = navigator.appName;
		var indexOfMSIE = appVersion.indexOf("MSIE");
		//document.write(indexOfMSIE);
		var version;
		var oldIE = false;
		if (indexOfMSIE > -1) //internet explorer
		{
			var subString = appVersion.substring(indexOfMSIE +5);
			version = parseFloat(subString);
			//document.write(version);
			if (version < 7.0)
				oldIE = true;
		}
		//END FIND BROWSER INFO

		
var eventLoad;
if(oldIE)
   eventLoad = window;
else 
	eventLoad = "img.first";
		
jQuery(eventLoad).load(function () { //"img.first"
 //get the animated images and the scrolling texts
 
        
		animatedImages = jQuery("#animated_images img").not("#blank"); //preload images except for the blank one used as a background
		scrollingTexts = jQuery("#scrolling_messages h1, #scrolling_messages h2"); //preload text
		
		//hide everything except the first two images
		
		jQuery("#now_loading").css("opacity","0");
		
		jQuery(scrollingTexts).css("opacity","0"); 
		jQuery(animatedImages).css("opacity","0");
		jQuery(scrollingTexts[0]).css("opacity","1");
		jQuery(animatedImages[0]).css("opacity","1");		
		
		jQuery("#animated_box").css("opacity","0");
		jQuery("#animated_box").css("visibility","visible"); //only show everything once it's been done
		jQuery("#animated_box").animate({opacity:1}, 700); //then fade it in for a nice effect
		/*jQuery(animatedImages).attr("usemap","#map");*/ //doesn't work in ie!
		
		
		currentIndex = 0;
		
		if (!oldIE)
			intervalID = setInterval ( "animateSlideshowZ()", 10000 );
		else
			intervalID = setInterval ( "animateSlideshow()", 10000 );	
		
		// now fade out the current image and fade in the correct one
		
		
		//important: order of area tags must match order of images
		if (!oldIE)
		
			jQuery("#animated_box area").hover(function () {
				clearInterval(intervalID); //turn off the automatic movement stuffs
				var index = jQuery("area").index(this); //witch index 
				if (currentIndex != index) //don't fade out and fade in the image at the same time
					animateFromZ(currentIndex, index);
			},
			function () {
			intervalID = setInterval ( "animateSlideshowZ()", 10000 );
				
			});
			
		else 	
			
			jQuery("#animated_box area").hover(function () {
				clearInterval(intervalID); //turn off the automatic movement stuffs
				var index = jQuery("area").index(this); //which index 
				if (currentIndex != index) //don't fade out and fade in the image at the same time
					animateFrom(currentIndex, index);
			},
			function () {
			intervalID = setInterval ( "animateSlideshow()", 10000 );
				
			});
});

 jQuery(document).ready(function() {
   
		//MAKE SURE THE CORRECT KIND OF MENU IS SHOWN
		jQuery("a.hover_menu img").css("opacity","0");
		jQuery("a.hover_menu_gif img").css("opacity","0");
		jQuery("#red_dot").css("opacity","0");
		jQuery(".firstLevel").css("opacity","1"); 
		jQuery("a.hover_menu_gif img").css("visibility","visible");
		
	 
		//PRELOAD MENUS AND SUBMENUS WHICH DISPLAY HOVER INFO
		menus = jQuery("#navigation li").not(".current, .section");	
		submenus = jQuery("#subcontent li").not(".current");
		
	
		//Following not used, simply splits up the sublogo, which could be used for an animation effect.
		var s = jQuery("#sublogo").html(); 
		var s_array = s.split("");
		
		for (var i=0; i <s_array.length; i++)
		{
			s_array[i] = '<span class ="an_l">' + s_array[i] + '</span>';
		
		}
		
		var final_s = s_array.join(); 
		final_s = final_s.replace(/,/g,'');    
		jQuery("#sublogo").html(final_s);
		// END SPLIT UP LOGO
		
		// Rounded corners for h2 tag backgrounds. Actually doesn't look that great (my opinion, Whittington).
		
		jQuery("#content h2").not("#scrolling_messages h2").corners();
		
		//was used to animate a red dot to the right of the submenu
		//var height = jQuery(".menublock").offset().top;
		//jQuery("#red_dot").css("top", height+"px");
		
		//ANIMATION OF THE LEFT MENU, simply moves in and out
		jQuery(".menublock li").not(".current").hover(function () {
				jQuery(this).stop().animate({marginLeft: "0px"}, 150);
		},
		function() {//hover out 
		
			jQuery(this).stop().animate({marginLeft: "10px"}, 150);
			
		});
		
		
		//The graphical menu (fade in and fade out between two images)
		jQuery("#graphical_menu li").not(".current, .section").hover(function () {
				jQuery(this).find("a.hover_menu img").css("visibility","visible").stop().animate({opacity:1}, 350);
				
		},
		// on mouse out
		function () {
				jQuery(this).find("a.hover_menu img").stop().animate({opacity:0}, 1000);		
		});
		
		//gif version for IE 6, since this browser has poor png-support
		jQuery("#graphical_menu_gif li").not(".current, .section").hover(function () {
				jQuery(this).find("a.hover_menu_gif img").stop().animate({opacity:1}, 350)
		},
		// on mouse out
		function () {
				jQuery(this).find("a.hover_menu_gif img").stop().animate({opacity:0}, 100);		
		});
		

		
	});
	

	
function animateFrom(oldCurrent, newCurrent)
{

	jQuery(animatedImages[newCurrent]).stop().animate({opacity:1}, 600); //fade in the new
	jQuery(animatedImages[oldCurrent]).stop().animate({opacity:0}, 800); //fade out the old
	
	jQuery(scrollingTexts[newCurrent]).css("left", "750px");
	jQuery(scrollingTexts[newCurrent]).css("opacity", "1");
	jQuery(scrollingTexts[oldCurrent]).stop().animate({left:750*-1}, 500);
	jQuery(scrollingTexts[newCurrent]).stop().animate({left:0}, 600);
	
	currentIndex = newCurrent;

}
	
	
function animateSlideshow()
{
	var nextIndex;
	if (currentIndex == (animatedImages.length-1))
		nextIndex = 0;
	else 
		nextIndex = (currentIndex+1);

	jQuery(animatedImages[nextIndex]).stop().animate({opacity:1}, 3000); //fade in the new
	
	
	jQuery(animatedImages[currentIndex]).stop().animate({opacity:0}, 3600); //fade out the old don't fade out the old... just make it go away
	//actually might want to only fade in the new... (which will provide smoother transitions....
	//and then later set the old to 
	
	jQuery(scrollingTexts[nextIndex]).css("left", "750px");
	jQuery(scrollingTexts[nextIndex]).css("opacity", "1");
	jQuery(scrollingTexts[currentIndex]).stop().animate({left:750*-1}, 1000);
	jQuery(scrollingTexts[nextIndex]).stop().animate({left:0}, 1700);
	
	currentIndex = nextIndex;
	
	
}


function animateFromZ(oldCurrent, newCurrent)
{

	//jQuery(animatedImages[newCurrent]).stop().animate({opacity:1}, 600); //fade in the new
	//jQuery(animatedImages[oldCurrent]).stop().animate({opacity:0}, 800); //fade out the old
	
	/*for (var i=0; i <animatedImages.length; i++) //try this for old versions of IE
	{
		if (i!= oldCurrent && i!=newCurrent)
			jQuery(animatedImages[i]).css("zIndex", -1);
	}*/
	
	var start_opacity = jQuery(animatedImages[newCurrent]).css("opacity");
	
	//if ( start_opacity == 1) //doesn't seem to help
	jQuery(animatedImages[newCurrent]).css("opacity", "0"); //make it invisible
	
	jQuery(animatedImages[newCurrent]).css("zIndex", zIndex); //put the next one on top
	jQuery("#blank").css("zIndex", zIndex-2); //put a background to avoid seeing through, when the mouse is moved quickly among
		//the various areas of the map... not employed because it broke something in ie 5 and still does not provide a perfect solution
	zIndex++;
	
	
	jQuery(animatedImages[newCurrent]).stop().animate({opacity:1}, 900); //and fade it in... 
	
	jQuery(scrollingTexts[newCurrent]).css("left", "750px");
	jQuery(scrollingTexts[newCurrent]).css("opacity", "1");
	jQuery(scrollingTexts[oldCurrent]).stop().animate({left:750*-1}, 500);
	jQuery(scrollingTexts[newCurrent]).stop().animate({left:0}, 600);
	
	currentIndex = newCurrent;

}
	
	
function animateSlideshowZ()
{
	var nextIndex;
	if (currentIndex == (animatedImages.length-1))
		nextIndex = 0;
	else 
		nextIndex = (currentIndex+1);

	/*for (var i=0; i <animatedImages.length; i++) //try this for old versions of IE
	{
		if (i!= currentIndex && i!=nextIndex)
			jQuery(animatedImages[i]).css("zIndex", -1);
	}*/	
	//jQuery(animatedImages[currentIndex]).css("zIndex", 0);
	
	jQuery(animatedImages[nextIndex]).css("opacity", "0"); //make it invisible
	jQuery(animatedImages[nextIndex]).css("zIndex", zIndex); //put the next one on top
	
	
	//jQuery("#blank").css("zIndex", zIndex-1); //this puts the blank image down 2 so that only the two images currently animated are displayed
	
	zIndex++;
	jQuery(animatedImages[nextIndex]).stop().animate({opacity:1}, 3000); //and fade it in
	
	
	//jQuery(animatedImages[currentIndex]).stop().animate({opacity:0}, 3600); //fade out the old don't fade out the old... just make it go away
	
	jQuery(scrollingTexts[nextIndex]).css("left", "750px");
	jQuery(scrollingTexts[nextIndex]).css("opacity", "1");
	jQuery(scrollingTexts[currentIndex]).stop().animate({left:750*-1}, 1000);
	jQuery(scrollingTexts[nextIndex]).stop().animate({left:0}, 1700);
	
	currentIndex = nextIndex;
	
	
}	
	
/*
	
function animateNext() {
	jQuery(menus[numMenu]).stop().animate({opacity: 1}, "slow");
	numMenu++;
	if (numMenu >= menus.length)//last menu
	{
		clearInterval(intervalID);
		
		//check if there are submenus and if so animate them
		if(submenus.length>0)
			intervalID = setInterval ( "animateNextSub()", 200 );
		//else	
			//setTimeout('intervalID =  setInterval ( "animateLetters()", 10 )', 500);
	}	
}

function animateNextSub() {
	jQuery(submenus[numSubMenu]).stop().animate({opacity: 1}, "fast");
	numSubMenu++;
	if (numSubMenu >= submenus.length)//last menu
	{
		clearInterval(intervalID);
		//setTimeout('intervalID =  setInterval ( "animateLetters()", 10 )', 500);
	}	
}

function animateLetters() {

	jQuery(coloredLetters[numColoredLetters]).css("color","#ff0000");
	
	if (numColoredLetters > 0)
		jQuery(coloredLetters[numColoredLetters-1]).css("color","#ff5555");
	numColoredLetters++;
	
	if (numColoredLetters == coloredLetters.length)//last menu
	{	
		clearInterval(intervalID);
		numColoredLetters = 0;
		intervalID =  setInterval ( "unanimateLetters()", 10 );
	}

}
function unanimateLetters()
{

	jQuery(coloredLetters[numColoredLetters]).css("color","#ffffff");
	numColoredLetters++;
	if (numColoredLetters == coloredLetters.length)//last menu
	{	
		clearInterval(intervalID);
		
	}

}
*/