var MainMenuActive = '';
var CountryActiveMenu = '';
var MainMenuItems = 5;
var IsClicked = false;
var ScrollAmount = 5;
var ScrollInterval = 40;
var ScrollHeight = 160;
var req = new XMLHttpRequest(); 
var LOCATION_COUNTRY_LOADING = '';
var LOCATION_CITY_LOADING = '';

function ShowCountryAt(TheLayerName, Param) {
  var TopPos = 0;
  var LeftPos = 0;
  var TheLayer = document.getElementById(TheLayerName);  
  TheLayer.className = 'MainMenuSectionClick';	
  var TheImg  = document.images['Img' + TheLayerName]
  LeftPos = (document.all ? getOffsetLeftX(TheImg) : TheImg.x);
  TopPos  = (document.all ? getOffsetTopX(TheImg) : TheImg.y);
  //window.alert('LeftPos: ' + LeftPos + ', TopPos: ' + TopPos); 
  TheCountry = document.getElementById('CountryList') ;
  TheCountry.style.left = (LeftPos + 134) ;
  TheCountry.style.top = TopPos -10 ;  
  TheCountry.style.display = 'block';
  
  //remove the contents of country
  var Country = document.getElementById('LayerInner');  
  Country.style.top = '0px';
  Country.innerHTML = '<P><font color="#FFFFFF">' + LOCATION_COUNTRY_LOADING  + '</font</P>';
  var URL = '../mytravelcommunity/getCountryList_menu.asp' + 
  '?TheLayerName=' + TheLayerName + 
  '&ParentID=' + Param;
  //window.open(URL);
  req.abort(); //abort any previous request send
  if (req) {     
    req.open('GET', URL, true); 
    req.onreadystatechange=function() {
      if (req.readyState==4) {
        generateCountry(req.responseText);
      } 
    }
    req.send(null); 
  }      
	setScrollButtons('LayerInner');	
	/*
  for(var I = 1; I <= MainMenuItems; I++) {
  	if((I+'') != MainMenuActive) document.getElementById('MainMenu' + I).className = 'mainmenusection_n';
  }
  */
  IsClicked = false;
}

function generateCountry(ResponseText) {
  var Country = document.getElementById('LayerInner');
  Country.innerHTML = ResponseText;
  setScrollButtons('LayerInner', '');
}

function ShowCityAt(TheLayerName, Param) {
  var TopPos = 0;
  var LeftPos = 0;
  var TheLayer = document.getElementById(TheLayerName);  
  var TheImg  = document.images['ImgMainMenu' + MainMenuActive]
	//window.alert('TheLayerName: ' + TheLayerName + ', TheLayer : ' + TheLayer + ', TheImg  : ' + TheImg  ); 
  LeftPos = (document.all ? getOffsetLeftX(TheImg) : TheImg.x);
  TopPos  = (document.all ? getOffsetTopX(TheImg) : TheImg.y);
  TheCountry = document.getElementById('CityList') ;
  TheCountry.style.left = (LeftPos + 288) ;
  TheCountry.style.top = TopPos -10 ;  
  TheCountry.style.display = 'block';
  IsClicked = false;

  //remove the contents of country
  var City = document.getElementById('LayerInnerCity');  
  City.style.top = '0px';
  City.innerHTML = '<P><font color="#FFFFFF">' + LOCATION_CITY_LOADING  + '</font</P>';
  var URL = '../mytravelcommunity/getCityList_menu.asp' + 
  '?TheLayerName=' + TheLayerName+ 
  '&ParentID=' + Param;
  
  req.abort(); //abort any previous request send
  if (req) {     
    req.open('GET', URL, true); 
    req.onreadystatechange=function() {
      if (req.readyState==4) {
        generateCity(req.responseText);
      } 
    }
    req.send(null); 
  }      
  
}

function generateCity(ResponseText) {
  var City = document.getElementById('LayerInnerCity');
  City.innerHTML = ResponseText;
  setScrollButtons('LayerInnerCity', '');
}

function MOver(Section, TheID) {
	var Object = null;
	switch(Section) {
	case 'MAIN':
		Object = document.getElementById('MainMenu' + TheID)
		if(TheID !=MainMenuActive) Object.className = 'MainMenuSectionHover';
		CountryActiveMenu = '';
		break;		
	case 'COUNTRY':
		Object = document.getElementById('Country_' + TheID)
		Object.className = 'CountryMenuSectionHover';
		break;		
	case 'CITY':
		Object = document.getElementById('City_' + TheID)
		Object.className = 'CityMenuSectionHover';
		break;		
	}	
}

function MOut(Section, TheID) {
	var Object = null;
	switch(Section) {
	case 'MAIN':
		Object = document.getElementById('MainMenu' + TheID)	
		if(TheID != MainMenuActive || MainMenuActive == '') {
		  Object.className = 'mainmenusection_n';
		} else if(TheID == MainMenuActive ) {
		  Object.className = 'mainmenusectionClick';
		}
		break;  	
	case 'COUNTRY':
		Object = document.getElementById('Country_' + TheID)	
		if(TheID != CountryActiveMenu || CountryActiveMenu == '') Object.className = 'Countrymenusection_n';
		break;  	
	case 'CITY':
		Object = document.getElementById('City_' + TheID)	
		Object.className = 'Citymenusection_n';
		break;  				
	}
}

var CityURL = '../mytravelcommunity/public.asp?categorycode=';
var IsItemClicked = false;
function MClick(Section, TheID, Param) {
  if(IsItemClicked) return;
	var Object = null;
	switch(Section) {
	case 'MAIN':	  
		Object  = document.getElementById('MainMenu' + MainMenuActive)
		if(Object) Object.className = 'mainmenusection_n';
		Object = document.getElementById('MainMenu' + TheID)			
		MainMenuActive = TheID;
		var LayerID = 'MainMenu' + TheID
		document.getElementById('CityList').style.display = 'none';	
		window.setTimeout("ShowCountryAt('" + LayerID + "','" +  Param + "')", 10);
		IsClicked = true;		
		break;
	case 'COUNTRY':
		var LayerID  =  'Country_' + TheID
		Object = document.getElementById(LayerID )		
	  if(CountryActiveMenu != TheID && CountryActiveMenu  != '') {
			Object = document.getElementById('Country_' + CountryActiveMenu )			  
			if(Object) Object.className = 'Countrymenusection_n';
		}
		Object = document.getElementById(LayerID )		
		CountryActiveMenu = TheID;
		window.setTimeout("ShowCityAt('" + LayerID + "','" +  Param + "')", 10);		
		IsClicked = true;
		break;		
	case 'CITY':
	  IsItemClicked = true;
	  var URL = CityURL + escape(Param);
	  window.location.href=URL;
	}
	
}
function HideMenus() {
	if(IsClicked ) return;
	if(document.getElementById('MainMenu' + MainMenuActive)) 
  	document.getElementById('MainMenu' + MainMenuActive).className = 'mainmenusection_n';
  if(document.getElementById('CountryList'))
    document.getElementById('CountryList').style.display = 'none';	
  if(document.getElementById('CityList'))
    document.getElementById('CityList').style.display = 'none';	  
  MainMenuActive = '';
  CountryActiveMenu ='';
}

var isScrolling = false;
var NextScrollTimeout = null;

function Scroll(Direction, strOuterLayer, strInnerLayer) {
	if(Direction == 'dn1' || Direction == 'up1') {
		var Object = document.getElementById('Country_' + CountryActiveMenu)		
		if(Object) Object.className = 'Countrymenusection_n';
    document.getElementById('CityList').style.display = 'none';	
    CountryActiveMenu = '';
	}
	isScrolling = true;
	ScrollIt(Direction, strOuterLayer, strInnerLayer);
}
function StopScroll(strLayerName) {
	if(NextScrollTimeout != null) window.clearTimeout(NextScrollTimeout);
	NextScrollTimeout = null;
	isScrolling=false;
  var TopLayr = document.getElementById(strLayerName + '_Top');
  var BtmLayr = document.getElementById(strLayerName + '_Bottom');	
  if(TopLayr && TopLayr.className.toLowerCase() == 'scrollbuttontop_inactive') {
  } else {
    TopLayr.className = 'ScrollButtonTop_Normal';
  }
  if(BtmLayr && BtmLayr.className.toLowerCase() != 'scrollbuttonbottom_inactive') {
    BtmLayr.className = 'ScrollButtonBottom_Normal';
  }
}

function ScrollIt(Direction, strOuterLayer, strInnerLayer) {	
	if(!isScrolling) return false;
  var TheLayer = document.getElementById(strInnerLayer)
  var MaxScrollLayer = ScrollHeight;
  var ScrollingHeight = ScrollHeight;
  var Top = parseInt(TheLayer.style.top);  
  var LayerHeight = TheLayer.clientHeight;  
  
  if(isNaN (LayerHeight)) LayerHeight = 0;  
  if(isNaN (Top)) Top = 0;  
  if(LayerHeight < MaxScrollLayer) LayerHeight = MaxScrollLayer;  
  if(Direction == 'up1' || Direction == 'up2' ) {
    var iTop = (Top < 1 ? -Top : Top);
    if( (iTop + ScrollingHeight) < LayerHeight) {     
      Top = Top - ScrollAmount ;
      TheLayer.style.top = (Top + 'px');
      NextScrollTimeout = window.setTimeout("ScrollIt('" + Direction + "','" + strOuterLayer+ "','" + strInnerLayer+ "')", ScrollInterval );
    } else { //if(Top)
      //setScrollButtons(strInnerLayer)
    }
  }else if(Direction == 'dn1' || Direction == 'dn2') {
    var iTop = (Top < 1 ? -Top : Top);
    if(iTop > 0) {  
	    Top = Top + ScrollAmount ;	
	    if(Top > 0) Top = 1;
      TheLayer.style.top = (Top + 'px');
      NextScrollTimeout = window.setTimeout("ScrollIt('" + Direction + "','" + strOuterLayer+ "','" + strInnerLayer+ "')", ScrollInterval );	    
    } else {
      //setScrollButtons(strInnerLayer)
    }
  }//if(Direction)
  setScrollButtons(strInnerLayer, Direction)
}//function

function setScrollButtons(strInnerLayer, Direction) {
  var ScrollingHeight = ScrollHeight;
  var TheLayer = document.getElementById(strInnerLayer)
  var Top = parseInt(TheLayer.style.top);  
  var LayerHeight = TheLayer.clientHeight;    
  if(isNaN (LayerHeight)) LayerHeight = 0;  
  if(isNaN (Top)) Top = 0;   
  var iTop = (Top < 1 ? -Top : Top);
  if(Top > 0) Top = 0; 
  if(LayerHeight < ScrollingHeight) LayerHeight = ScrollingHeight;

  var TopLayr = document.getElementById(strInnerLayer + '_Top');
  var BtmLayr = document.getElementById(strInnerLayer + '_Bottom');
  
  if(Top == 0) {
    TopLayr.className = 'ScrollButtonTop_InActive';
  } else {    
    TopLayr.className = (Direction == 'dn1'||Direction=='dn2') ? 
      'ScrollButtonTop_Hover' : 'ScrollButtonTop_Normal';  
  }
  var MaxHeight = (iTop + ScrollingHeight);
  /*window.status =  '(SCROLL): ' +
  'TopLayr.className: ' + TopLayr.className + ', ' +
  'Direction: ' + Direction + ', ' +
  'iTop:' + iTop + ', ' +
  'ScrollingHeight:' + ScrollingHeight +  ', ' +
  'iTop + ScrollingHeight:' + MaxHeight  + ', ' +
  'LayerHeight:' + LayerHeight;
  */
  
  if(MaxHeight < LayerHeight) {     
    BtmLayr.className = (Direction == 'up1'||Direction=='up2') ? 
      'ScrollButtonBottom_Hover' : 'ScrollButtonBottom_Normal';  
    //BtmLayr.className = 'ScrollButtonBottom_Normal';      
  } else {
    BtmLayr.className = 'ScrollButtonBottom_InActive';    
  }  
}