var intransitIn = false;	// This is set to true when a menuitem is shown (while animated)
var intransitOut = false;	// This is set to true when a menuitem is hidden (while animated)
var stoppatransit = false;	// This is set to true when a menuitme has been pressed while menu is being animated either to be shown or hidden
var selectedmenuitem = 0;	// Stores the currently selected menuitem
var divsize, actualheight  = 0;
var changetomenuitem = 0;
var opacity = 0;
var fade = false;

// Preload of arrows
var Pl_RightArrowImage = document.createElement('img');
var Pl_DownArrowImage = document.createElement('img');
var Pl_MouseOverArrowImage = document.createElement('img');

Pl_RightArrowImage.setAttribute('src','../../Style Library/Images/WW/ww_floatingmenuarrow2.png');
Pl_DownArrowImage.setAttribute('src','../../Style Library/Images/WW/ww_floatingmenuarrow3.png');
Pl_MouseOverArrowImage.setAttribute('src','../../Style Library/Images/WW/ww_floatingmenuarrow_onmouseover.png');


function ww_change_floatingmenu_arrow_onmouseover(id){
	        	
	        	switch(id){
	        	case 1:
			        if (selectedmenuitem != id){
			        	document.getElementById('ww_img_ShippingAndLogisticsArrow').src = Pl_MouseOverArrowImage.src;
			        	document.getElementById('ww_shippingandlogistics_link').style.color = '#02225a';
			        }
					break;
				case 2:
			        if (selectedmenuitem != id){
				        document.getElementById('ww_img_MaritimeServicesArrow').src = Pl_MouseOverArrowImage.src;
				        document.getElementById('ww_maritime_link').style.color = '#02225a';
				    }
					break;
				case 3:
			        if (selectedmenuitem != id){
				        document.getElementById('ww_img_AboutArrow').src = Pl_MouseOverArrowImage.src;
				        document.getElementById('ww_about_link').style.color = '#02225a';
				    }
				break;
				}
}

function ww_change_floatingmenu_arrow_onmouseout(id){
	        	
	        	switch(id){
	        	case 1:
			        if (selectedmenuitem != id){
			        	document.getElementById('ww_img_ShippingAndLogisticsArrow').src = Pl_RightArrowImage.src;
			        }
			        document.getElementById('ww_shippingandlogistics_link').style.color = '#003888';
					break;
				case 2:
			        if (selectedmenuitem != id){
			        	document.getElementById('ww_img_MaritimeServicesArrow').src = Pl_RightArrowImage.src;
			        }
				    document.getElementById('ww_maritime_link').style.color = '#003888';			        
				    break;
				case 3:
			        if (selectedmenuitem != id){
			        	document.getElementById('ww_img_AboutArrow').src = Pl_RightArrowImage.src;
			        }
			        document.getElementById('ww_about_link').style.color = '#003888';
				break;
				}
}



function ww_clientSideInclude(id, url) {
/**************************************************
This function loads the information of the parsed 
url async and inserts it into the div element with
the name of the parsed parameter id
**************************************************/
 
  var req = false;
  // For Safari, Firefox, and other non-MS browsers
  if (window.XMLHttpRequest) {
    try {
      req = new XMLHttpRequest();
    } catch (e) {
      req = false;
    }
  } else if (window.ActiveXObject) {
    // For Internet Explorer on Windows
    try {
      req = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        req = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {
        req = false;
      }
    }
  }
 
  var element = document.getElementById(id);
 if (!element) {
  alert("Bad id " + id +
   "passed to clientSideInclude." +
   "You need a div or span element " +
   "with this id in your page.");
  return;
 }
  
 
 if (req) {
    // Synchronous request, wait till we have it all
    req.open('GET', url, false);
    req.send(null);
    
    var start, stop, tramstexten;
    
    // We cut out the information that we are interested in
    start = req.responseText.substr(req.responseText.search('ww_floatingmenucontent') + 24);
    //alert(element.innerHTML);
    tramstexten = req.responseText.substr(req.responseText.search('ww_floatingmenucontent') + 24,req.responseText.substr(req.responseText.search('ww_floatingmenucontent') + 24).search('<!-- SLUT -->'));

	element.style.display = 'none';
    element.innerHTML = tramstexten;
  } else {
    element.innerHTML =
   "Sorry, your browser does not support " +
      "XMLHTTPRequest objects. This page requires " +
      "Internet Explorer 5 or better for Windows, " +
      "or Firefox for any system, or Safari. Other " +
      "compatible browsers may also exist.";
  }
  
}


function WW_floatingmenu_dropin(){
/********************************************
This function animates the menu to be shown.
********************************************/

	if (intransitOut != true && stoppatransit != true){
		// Increase the actual heigh
		//actualheight = actualheight + Math.round(Math.sqrt(divsize - actualheight))
		actualheight = actualheight + 10;
		// Check if we have reached full size
		if (actualheight < divsize){
			document.getElementById('ww_floatingmenu_dropdown_layer').style.height = actualheight + 'px';
			document.getElementById('ww_floatingmenu_dropdown_layer').style.display = 'none';
			document.getElementById('ww_floatingmenu_dropdown_layer').style.display = 'block';
			window.setTimeout(WW_floatingmenu_dropin,10);
		}else{
			// reset actualheight
			actualheight = 0;
			document.getElementById('ww_floatingmenu_dropdown_layer').style.height = divsize + 'px';
			document.getElementById('ww_floatingmenu_dropdown_layer').style.overflow = 'visible';
			document.getElementById('ww_floatingmenu_dropdown_layer').style.height = 'auto'
			document.getElementById('ww_dynamic_menu_content').innerHTML = document.getElementById('ww_floatingmenu_dropdown_layer_' + selectedmenuitem).innerHTML;
			intransitIn = false;
			document.getElementById('ww_floatingmenu_dropdown_layer').style.height = 'auto'
			
			// Start fadein
			fade = true;
			ww_fadeincontent();
		}

	}else{
		if (stoppatransit){
			// This is merely to break the dropin of menu
			stoppatransit = false;
			intransitIn = false;
			// Folding the menu back in
			intransitOut = true;
			ww_fadeoutcontent();
		}	
	}	
}


function ww_fadeincontent(){
	if (opacity < 100){
		opacity = opacity + 10;
		document.getElementById('ww_dynamic_menu_content').style.filter = 'alpha(opacity=' + opacity + ')';
		document.getElementById('ww_dynamic_menu_content').style.opacity = opacity /100;
		window.setTimeout(ww_fadeincontent,5);
	}else{
		fade = false;	
	}
}

function ww_fadeoutcontent(){
	if (opacity > 0){
		opacity = opacity - 10;
		document.getElementById('ww_dynamic_menu_content').style.filter = 'alpha(opacity=' + opacity + ')';
		document.getElementById('ww_dynamic_menu_content').style.opacity = opacity /100;
		window.setTimeout(ww_fadeoutcontent,5);
	}else{
		fade = false;
		document.getElementById('ww_dynamic_menu_content').innerHTML = '';
		WW_floatingmenu_dropout();
	}
}

function WW_floatingmenu_dropout(){
/********************************************
This function animates the menu to be hidden.
********************************************/
	if (intransitIn != true){
		// decrease the actual height
		actualheight = actualheight - (Math.round(Math.sqrt(actualheight)) *1.5);  // MAKE THIS SMOOTH!!
		
		// Check if we have reached 0
		if (actualheight > 0){
			document.getElementById('ww_floatingmenu_dropdown_layer').style.height = actualheight + 'px';
			setTimeout(WW_floatingmenu_dropout,1);
		}else{
			// reset actualheight
	        actualheight = 0;
	        document.getElementById('ww_floatingmenu_dropdown_layer').style.visibility = 'hidden';
	        document.getElementById('ww_dynamic_menu_content').innerHTML = ''; // make sure scrollbars dont return.
	        document.getElementById('ww_floatingmenu_dropdown_layer').style.height = 'auto'; // Extrememly important 
	        intransitOut = false;
	        
	        selectedmenuitem = 0;
	        
	        // Check if we are to show other page
	        if (changetomenuitem != 0){
	        	WW_floatingmenu_showmenu(changetomenuitem);
	        }
		}
	}
}

function WW_floatingmenu_showmenu(menuitem){
/********************************************
The main function for anitmating the menu
*********************************************/
if (fade != true) {
	if (intransitIn == false && intransitOut == false){
		if (document.getElementById('ww_floatingmenu_dropdown_layer').style.visibility == 'visible'){
	        	// Change the image in the menu
	        	switch(selectedmenuitem){
	        	case 1:
			        document.getElementById('ww_img_ShippingAndLogisticsArrow').src = Pl_RightArrowImage.src;
					break;
				case 2:
			        document.getElementById('ww_img_MaritimeServicesArrow').src = Pl_RightArrowImage.src;
					break;
				case 3:
			        document.getElementById('ww_img_AboutArrow').src = Pl_RightArrowImage.src;
				break;
				}
	        
        	actualheight = document.getElementById('ww_floatingmenu_dropdown_layer').offsetHeight;
        	document.getElementById('ww_floatingmenu_dropdown_layer').style.overflow = 'hidden';

	        if (selectedmenuitem != menuitem){
	        	changetomenuitem = menuitem;
			}

			intransitOut = true;
			fade = true;
			ww_fadeoutcontent();

		
		}else{
			changetomenuitem = 0;
			    // Change the image in the menu
	        	switch(selectedmenuitem){
	        	case 1:
			        document.getElementById('ww_img_ShippingAndLogisticsArrow').src = Pl_RightArrowImage.src;
					break;
				case 2:
			        document.getElementById('ww_img_MaritimeServicesArrow').src = Pl_RightArrowImage.src;
					break;
				case 3:
			        document.getElementById('ww_img_AboutArrow').src = Pl_RightArrowImage.src;
				break;
				}

				document.getElementById('ww_floatingmenu_dropdown_layer').style.overflow = 'hidden';
				// This is neccesary for Mozilla.. dont know why..

				switch(menuitem){
	        	case 1:
			        document.getElementById('ww_dynamic_menu_content').innerHTML = document.getElementById('ww_floatingmenu_dropdown_layer_1').innerHTML;
			        document.getElementById('ww_img_ShippingAndLogisticsArrow').src = Pl_DownArrowImage.src;
					break;
				case 2:
			        document.getElementById('ww_dynamic_menu_content').innerHTML = document.getElementById('ww_floatingmenu_dropdown_layer_2').innerHTML;
        	        document.getElementById('ww_img_MaritimeServicesArrow').src = Pl_DownArrowImage.src;
					break;
				case 3:
			        document.getElementById('ww_dynamic_menu_content').innerHTML = document.getElementById('ww_floatingmenu_dropdown_layer_3').innerHTML;
			        document.getElementById('ww_img_AboutArrow').src = Pl_DownArrowImage.src;
				break;
			
			}   
			
			// Set active menu
			selectedmenuitem = menuitem;
			
			// Get heightof layer
			divsize = document.getElementById('ww_floatingmenu_dropdown_layer').offsetHeight;
			//document.getElementById('ww_floatingmenu_dropdown_layer').style.clip = 'rect(0,0,50,0)';
			document.getElementById('ww_floatingmenu_dropdown_layer').style.overflow = 'hidden';
			document.getElementById('ww_floatingmenu_dropdown_layer').style.height = '1px';
			document.getElementById('ww_floatingmenu_dropdown_layer').style.visibility = 'visible';
	        document.getElementById('ww_floatingmenu_dropdown_layer').style.display = 'block';
	        intransitIn = true;
	        // TEST FOR IE7
	        document.getElementById('ww_dynamic_menu_content').innerHTML = '';
			WW_floatingmenu_dropin();	
     
        }
	}else{
		// Here we handle when the menu is in transit.
		if (intransitIn){
			stoppatransit = true;
			// Change the image in the menu
	        switch(selectedmenuitem){
		        case 1:
				document.getElementById('ww_img_ShippingAndLogisticsArrow').src = Pl_RightArrowImage.src;
					break;
				case 2:
			        document.getElementById('ww_img_MaritimeServicesArrow').src = Pl_RightArrowImage.src;
					break;
				case 3:
			        document.getElementById('ww_img_AboutArrow').src = Pl_RightArrowImage.src;
				break;
			}
	        if (selectedmenuitem != menuitem){
	        	changetomenuitem = menuitem;
			}
		}
	}
}        
}

// Here is where we define the links with the content that is to be shown in the menu.
ww_clientSideInclude('ww_floatingmenu_dropdown_layer_1','/pages/MenuPage_ShippingAndLogistics.aspx');
ww_clientSideInclude('ww_floatingmenu_dropdown_layer_2','/pages/MenuPage_MaritimeServices.aspx');
ww_clientSideInclude('ww_floatingmenu_dropdown_layer_3','/pages/MenuPage_About.aspx');