/*	#################################################################
#																	#
#		handling the sub-navigation	(plans)							#
#																	#
################################################################## */


/*
*	defines the button array for the sub navigation
*	in the interior area
*	
*	everytime a rollover is invoked, the current button is added to "overOutArray"
*	if "overOutArray" size/ length exceeds 2, the first element is cutt out (= button before) and is set to inactive agian
*/
var overOutArray = new Array (  );
var new_plan = new Array (  );
var new_image = new Array (  );

/*
*	the function "setChangePlan" is invoked in the body tag of the interior area
*	
*	the first part adds the first element to the "overOutArray", so the first button
*	is highlighted and active when loading the page
*
*	the second part adds an eventHandler (= onmouseout = changePlan) to the buttons
*	so everytime a rollover is invoked, the function changePlan starts
*
*	at the end the function preloadPlans is invoked, which preloads the various plans
*/
function setChangePlan (  )
	{
		overOutArray.push ( "p_1" );
		document.getElementById ( "p_1" ).className = "active";
		// document.getElementById ( "1_1" ).innerHTML = "<img src='img/interior_subNav/nav01_over.gif' border='0' />";
		
		/*
		*	preload plan images
		*/
		document.getElementById ( "p_1" ).onmouseover = changePlan;
		document.getElementById ( "p_2" ).onmouseover = changePlan;
		document.getElementById ( "p_3" ).onmouseover = changePlan;
		// document.getElementById ( "p_4" ).onmouseover = changePlan;
		document.getElementById ( "p_5" ).onmouseover = changePlan;
		
		/*
		*	starts the function "checkForBrowser (  )"
		*/
		checkForBrowser (  );
		
		/*
		*	starts the function "preloadPlans (  )"
		*/
		preloadPlans (  );
		setLegend ( "p_1" );
		return false;
	}
	
/*
*	IE 6 doesnt load background-images from cache
*	so we force him
*/
function checkForBrowser (  )
	{
		var browserName = navigator.appName;
		var browserVersion = navigator.appVersion;
		
		var isIE6 = browserVersion.indexOf ( "MSIE 6.0" );
		
		if ( browserName == "Microsoft Internet Explorer" && browserVersion != -1 ) 
			{
				/*
				*	browser is IE 6 and doesnt load hover pictures from cache
				*	so we force him to do so
				*/
				document.execCommand('BackgroundImageCache', false, true);
			}
			else 
			{ 
				return false;
			}
	}

/*
*	function which preloads the plans in the interior area
*	that ensures the availability of the plans when a rollover is invoked
*/
function preloadPlans (  )
	{
		var preload_plans = [ 
							  	"interior_view_p_1.gif", "interior_view_p_2.gif",
								"interior_view_p_3.gif", "interior_view_p_4.gif", 
								"interior_view_p_5.gif" ];
		
		var preload_images = [ "nav_interior_norm.gif" ];
		
		maxPlan 	= preload_plans.length;
		maxImage 	= preload_images.length;
		
		for ( var p = 0; p < maxPlan; p++ )
			{
				new_plan[p] = new Image (  );
				new_plan[p].src = "../img/" + preload_plans[p];
			}	
		
		
		for ( var i = 0; i < maxImage; i++ )
			{
				new_image[i] = new Image (  );
				new_image[i].src = "../img/" + preload_images[i];
			}
	}

/*
*	thats finally the function which is invoked whenever a rollover is initiated
*
*	i.e.
*	the button has the ID "interior_view1"
*
*	"document.getElementById ( "aus_viewHolder" ).innerHTML" 	=> gets the HTML-ELEMENTS ID from the plan-holder-div and writes a value inside (= innerHTML)
*	"<img class='dsR19' src='img/" + this.id + ".gif />"		=> thats the image path, where "this.id" = "interior_view1"
*
*/
function changePlan (  )
	{
		if ( overOutArray[0] != this.id )
			{
				var id 				= this.id.toString (  ).substr ( 2 );
				var cacheImgSrc 	= new_plan[id - 1].src;
				
				// document.getElementById ( "aus_viewHolder" ).innerHTML = "<img class='dsR19' src='../img/interior_eng_view_" + this.id + ".gif' />";
				document.getElementById ( "aus_viewHolder" ).innerHTML = "<img class='dsR19' src='" + cacheImgSrc + "' />";
				overOutArray.push ( this.id );
				if ( overOutArray.length >= 2 )
					{
						var lastButton = overOutArray.shift (  );
						document.getElementById ( lastButton ).className = "inActive";
						
					}
				document.getElementById ( this.id ).className = "active";
				
				setLegend ( this.id );
			}
	}

/*
*	@ allLegends => all possible plans
*/
var allLegends = new Array ( 
								"suiteMini", "suiteJunior", "suiteDeluxe", "suiteQueen", "wellness", 
								"restaurant", "cafe", "dampfschiff", "clubraum", "panorama",
								"taichi", "puttinggreen", "shuffleboard", "schachbrett", "eingang" );	
	
/*
*	onRollOver a button the button id is passed
*	and the proper plans are 100% opacity, all others are at 30%
*/
function setLegend ( legendNum )
	{
		switch ( legendNum )
			{
				case "p_1":
					for ( var i = 0; i < allLegends.length; i++ )
						{
							document.getElementById ( allLegends[i] ).className = "inVisible";
						}
						
					document.getElementById ( "puttinggreen" ).className 	= "visible";
					document.getElementById ( "taichi" ).className 			= "visible";
					document.getElementById ( "shuffleboard" ).className 	= "visible";
					document.getElementById ( "schachbrett" ).className 	= "visible";
				break;
				case "p_2":
					for ( var i = 0; i < allLegends.length; i++ )
						{
							document.getElementById ( allLegends[i] ).className = "inVisible";
						}
						
					document.getElementById ( "restaurant" ).className 		= "visible";
					document.getElementById ( "clubraum" ).className 		= "visible";
					document.getElementById ( "dampfschiff" ).className 	= "visible";
					document.getElementById ( "suiteJunior" ).className 	= "visible";
					document.getElementById ( "suiteDeluxe" ).className 	= "visible";
					document.getElementById ( "suiteQueen" ).className 		= "visible";
					document.getElementById ( "cafe" ).className 			= "visible";
					document.getElementById ( "panorama" ).className 		= "visible";
				break;
				case "p_3":
					for ( var i = 0; i < allLegends.length; i++ )
						{
							document.getElementById ( allLegends[i] ).className = "inVisible";
						}
						
					document.getElementById ( "suiteJunior" ).className = "visible";
					document.getElementById ( "suiteDeluxe" ).className = "visible";
					document.getElementById ( "eingang" ).className = "visible";
					document.getElementById ( "wellness" ).className = "visible";
				break;
				case "p_4":
					for ( var i = 0; i < allLegends.length; i++ )
						{
							document.getElementById ( allLegends[i] ).className = "inVisible";
						}
						
					document.getElementById ( "suiteMini" ).className = "visible";
				break;
				case "p_5":
					for ( var i = 0; i < allLegends.length; i++ )
						{
							document.getElementById ( allLegends[i] ).className = "inVisible";
						}
				break;
			}
	}