var menuPhotoArray1 = new Array();
	var menuPhotoArray2 = new Array();

    menuPhotoArray1[0]="paradise/images/header_img_01.jpg";
	menuPhotoArray1[1]="paradise/images/header_img_02.jpg";
	menuPhotoArray1[2]="paradise/images/header_img_03.jpg";
	menuPhotoArray1[3]="paradise/images/header_img_04.jpg";

	menuPhotoArray2[0]="paradise/images/header_img_01_faded.jpg";
	menuPhotoArray2[1]="paradise/images/header_img_02_faded.jpg";
	menuPhotoArray2[2]="paradise/images/header_img_03_faded.jpg";
	menuPhotoArray2[3]="paradise/images/header_img_04_faded.jpg";



//if started a timer to trigger 'close faded image' action.
var timerStarted	=false;
//if there is another call to 'show faded image' in timer working period.
var callInTimer		=false;

// ----- Popup Control ---------------------------------------------------------

function at_display(x)
{
  var win = window.open();
  for (var i in x) win.document.write(i+' = '+x[i]+'<br>');
}

// ----- Show Aux -----

function at_show_aux(parent, child)
{
  var p = document.getElementById(parent);
  var c = document.getElementById(child );

  var top  = (c["at_position"] == "y") ? p.offsetHeight+2 : 0;
  var left = (c["at_position"] == "x") ? p.offsetWidth +2 : 0;

  for (; p; p = p.offsetParent)
  {
    top  += p.offsetTop;
    left += p.offsetLeft;
  }

  c.style.position   = "absolute";
  c.style.top        = top +'px';
  c.style.left       = left+'px';
  c.style.visibility = "visible";
}

// ----- Show -----

function at_show()
{
	
  	
  var p = document.getElementById(this["at_parent"]);
  if (p.className!="menu_button_selected"){
	  p.className="menu_button2";
  }

  var c = document.getElementById(this["at_child" ]);

  at_show_aux(p.id, c.id);

  clearTimeout(c["at_timeout"]);
  
  if (timerStarted){
  	callInTimer	=true;
  }
  changeHeaderImages(true);
  
}

// ----- Hide -----

function at_hide()
{

  var p = document.getElementById(this["at_parent"]);
  if (p.className!="menu_button_selected"){
	  p.className="menu_button";
  }

  var c = document.getElementById(this["at_child"]);

  timerStarted=true;
  callInTimer =false;
  c["at_timeout"] = setTimeout("document.getElementById('"+c.id+"').style.visibility = 'hidden'; changeHeaderImages(false); timerStarted=false;", 333);
}

function hideMenu(childMenu)
{

 
  var c = document.getElementById(childMenu);

  timerStarted=false;
  callInTimer =false;
  c.style.visibility = 'hidden'; 
  changeHeaderImages(false);
}


// ----- Click -----

function at_click()
{
  	

  var p = document.getElementById(this["at_parent"]);
  var c = document.getElementById(this["at_child" ]);

  if (c.style.visibility != "visible")
       at_show_aux(p.id, c.id);
  else c.style.visibility = "hidden";

  
  return false;

}

// ----- Attach -----

// PARAMETERS:
// parent   - id of visible html element
// child    - id of invisible html element that will be dropdowned
// showtype - "click" = you should click the parent to show/hide the child
//            "hover" = you should place the mouse over the parent to show
//                      the child
// position - "x" = the child is displayed to the right of the parent
//            "y" = the child is displayed below the parent
// cursor   - Omit to use default cursor or check any CSS manual for possible
//            values of this field

function at_attach(parent, child, showtype, position, cursor)
{
  var p = document.getElementById(parent);
  var c = document.getElementById(child);

  p["at_parent"]     = p.id;
  c["at_parent"]     = p.id;
  p["at_child"]      = c.id;
  c["at_child"]      = c.id;
  p["at_position"]   = position;
  c["at_position"]   = position;

  c.style.position   = "absolute";
  c.style.visibility = "hidden";

  if (cursor != undefined) p.style.cursor = cursor;

  switch (showtype)
  {
    case "click":
      p.onclick     = at_click;
      p.onmouseout  = at_hide;
      c.onmouseover = at_show;
      c.onmouseout  = at_hide;
      break;
    case "hover":
      p.onmouseover = at_show;
      p.onmouseout  = at_hide;
      c.onmouseover = at_show;
      c.onmouseout  = at_hide;
      break;
  }
}


function makeImagesFaded(){
		if (headerImg01){
			headerImg01.src	=menuPhotoArray2[0]
		}
		if (headerImg02){
			headerImg02.src	=menuPhotoArray2[1]
		}
		if (headerImg03){
			headerImg03.src =menuPhotoArray2[2]
		}
		if (headerImg04){
			headerImg04.src	=menuPhotoArray2[3]
		}
}

function makeImagesInited(){
		if (headerImg01){
			headerImg01.src	=menuPhotoArray1[0]
		}
		if (headerImg02){
			headerImg02.src	=menuPhotoArray1[1]
		}
		if (headerImg03){
			headerImg03.src =menuPhotoArray1[2]
		}
		if (headerImg04){
			headerImg04.src	=menuPhotoArray1[3]
		}
}

function changeHeaderImages(toFaded){

	if (!toFaded && callInTimer){
		timerStarted	=false;
		callInTimer 	=false;
		return;
	}

	if (toFaded){
		makeImagesFaded();
	}else{
		makeImagesInited();
	}
}

function selOption(optKey,optValue,optType,optTarget){

	var objTarget	=document.getElementById(optTarget);
	var arrowObjTarget	=document.getElementById(optTarget+"_arrow");


	
	if (optType=="SLEEPS"){
		objTarget.innerHTML	="# SLEEPS - "+optValue;
	}else if (optType=="BEDROOMS"){
		objTarget.innerHTML	="# BDRMS - "+optValue;
	}else if (optValue=="ALL"){
		objTarget.innerHTML	=optType+" - ALL";
	}else{
		objTarget.innerHTML	=optValue;
	}
	
	if (optType=="AREA"){
		option_area		=optKey;
	}else if (optType=="AREA TYPE"){
		option_areatype	=optKey;
	}else if (optType=="SLEEPS"){
		option_sleeps	=optKey;
	}else if (optType=="BEDROOMS"){
		option_bedrooms	=optKey;
	}
	
	
	var arrowSelected	="paradise/images/menu_arrow2.jpg";
	var arrowNotSelected="paradise/images/menu_arrow1.jpg";
	
	//change target button color to Red one(search button color)
	if (optValue=="ALL"){
		objTarget.className	="menu_button";
		arrowObjTarget.src	=arrowNotSelected;
	}else{
		objTarget.className	="menu_button_selected";
		arrowObjTarget.src	=arrowSelected;
	}
	
	//bedrooms arrow is the last arrow that near to 'select homes now' button.
	//so it will always high lighted if any other arrows are selected to red.
	if (option_area!="ALL" || option_areatype!="ALL" ||	option_sleeps!="ALL" || option_bedrooms!="ALL"){
			menu_bedrooms_arrow.src =arrowSelected;
	}else{
			menu_bedrooms_arrow.src =arrowNotSelected;
	}
	
		
	//call hide menu
  	hideMenu(optTarget+"_child");
}



function makeSearch(){
    //alert("area="+option_area+",areaType="+option_areatype+",sleeps="+option_sleeps+",bedrooms="+option_bedrooms);
	window.location='properties.html';
}


/**
   Global variables and Initializations
**/
var option_area		="ALL";
var option_areatype	="ALL";
var option_sleeps	="ALL";
var option_bedrooms	="ALL";



//preload images

var img_button_selected	=new Image();
img_button_selected.src="paradise/images/menu_button2.jpg";

function preloadFadedImages(){
	img01.src=menuPhotoArray2[0];
	img02.src=menuPhotoArray2[1];
	img03.src=menuPhotoArray2[2];
	img04.src=menuPhotoArray2[3];
}	


var img01	=new Image();
var img02	=new Image();
var img03	=new Image();
var img04	=new Image();

preloadFadedImages();


var img10	=new Image();
img10.src="paradise/images/menu_arrow1.jpg";
var img11	=new Image();
img11.src="paradise/images/menu_arrow2.jpg";