/*
 * expandSelectBox
 */

var isClosed = true; 
var selectContainer;
 
function openSelectBox(){
  
  selectContainer = document.getElementById("suburbSelectContainer");
  if(selectContainer){
    document.getElementById("suburbSelectBox").focus();
    
    if(isClosed){
      selectContainer.style.height = "147px";
      selectContainer.style.border = "1px solid #000000";
      isClosed = false;
    
      //hide other form elements for ie6 bug workaround  
      if(getInternetExplorerVersion() > -1){
        var maxPrice = document.getElementById("toSelect");
        if(maxPrice){
          maxPrice.style.visibility = "hidden";
        }
        var minPrice = document.getElementById("fromSelect")
        if(minPrice){
          minPrice.style.visibility = "hidden";
        }
        var category = document.getElementById("propertyTypeSelect")
        if(category){
          category.style.visibility = "hidden";
        }
        var bedrooms = document.getElementById("select5")
        if(bedrooms){
          bedrooms.style.visibility = "hidden";
        }
      }
    }
    else{
      closeSelectBox();
    }
  }
  
 return false;
}

/*
 * closeSelectBox
  */
function closeSelectBox(){
  //redisply the search fields that were previously hidden as a ie6 workaround
  if(getInternetExplorerVersion() > -1){
    var maxPrice = document.getElementById("toSelect");
    if(maxPrice){
      maxPrice.style.visibility = "visible";
    }
    var minPrice = document.getElementById("fromSelect")
    if(minPrice){
     minPrice.style.visibility = "visible";
    }
    var category = document.getElementById("propertyTypeSelect")
    if(category){
      category.style.visibility = "visible";
    }
    var bedrooms = document.getElementById("select5");
    if(bedrooms){
      bedrooms.style.visibility = "visible";
    }
  }
 
 var selectContainer = document.getElementById("suburbSelectContainer");
  if(selectContainer){
    selectContainer.style.height = "0px";
    selectContainer.style.border = "none";
    isClosed = true;
  }
}

function populateMultiSuburbBox(){
  var suburbSelect = document.getElementById("suburbSelect");
  var multiSelect = document.getElementById("suburbSelectBox");
 // suburbSelect.style.display = "none";
  if(multiSelect){  
    multiSelect.innerHTML = "";
    if(suburbSelect){
      for(var i=0;i<suburbSelect.length;i++){
    
        if(isSuburbSelected(suburbSelect[i].value)){
          multiSelect.innerHTML = multiSelect.innerHTML + '<p><input checked=""checked"" type="checkbox" class="suburbCheckBox" onclick="return onChangeMultipleSuburb(this);" id="' + suburbSelect[i].value + '" name="multiSuburb_' + suburbSelect[i].value +  '" /><span>'+ suburbSelect[i].innerHTML +'</span></p>';
        }
        else{
          multiSelect.innerHTML = multiSelect.innerHTML + '<p><input type="checkbox" class="suburbCheckBox" onclick="return onChangeMultipleSuburb(this);" id="' + suburbSelect[i].value + '" name="multiSuburb_' + suburbSelect[i].value +  '" /><span>'+ suburbSelect[i].innerHTML +'</span></p>';
        }
      }
      suburbSelect.innerHTML = "";
      multiSelect.style.padding = "5px";
    }
    return false;
  }
}

/*
*check if suburbID exists in cookie. Return true if so. 
*/
function isSuburbSelected(suburbID){
    
  var isInCookie = false;
  var suburbString;
 
  if(getCookie("multipleSuburb")){
    suburbString = getCookie("multipleSuburb");
    var tempArray = Array();
    tempArray = suburbString.split(",");
    for(var i=0;i<tempArray.length;i++){
      if(tempArray[i] == suburbID){
        isInCookie = true;
      }
      else if(suburbID == "" && getCookie("multipleSuburb") == "all"){
         isInCookie = true; 
      }
    }
  }
   return isInCookie;
}

/*
* toggles the suburb display box depending on what suburbs have beeen selected in the multiple suburb select box
*/
function toggleDisplay(){

  var suburbs = getCookie("multipleSuburb");
  var tempArray;
  var checkboxNode;
  var display = document.getElementById("selectSuburbsHeader");
  var displayBox = document.getElementById("displayBox");
  var suburbString = "";
  var childNodes;
  var isFirst = true
  if(suburbs){
    if(suburbs == 'all'){
      //display.innerHTML = "All Suburbs";
      displayBox.value = "All Suburbs";
    }
    else{
      tempArray = suburbs.split(",");
      for(var i=0;i<tempArray.length;i++){
        if(tempArray[i] != ""){
          checkboxNode = document.getElementById(tempArray[i]);
          if(checkboxNode){   
            childNodes = checkboxNode.parentNode.childNodes;
            for(var j = 0;j < childNodes.length; j++){
              if(childNodes[j].tagName.toLowerCase() == "span"){
                if(isFirst == true){
                  suburbString = suburbString + childNodes[j].innerHTML;
                  isFirst = false;
                }
                else{
                   suburbString = suburbString + ", " + childNodes[j].innerHTML;
                }
              }
            }
          } 
        }
        displayBox.value = suburbString
      }
    }
    
  }
  else{
  
   if (displayBox){
    if(isSafari()){
      setTimeout('displayBox.value = "Click here to select suburb(s)"', 500);
    }else{
      displayBox.value = "Click here to select suburb(s)";
    }
   }
  }
}

function isSafari() {
  var agt=navigator.userAgent.toLowerCase();
  if (agt.indexOf("safari") != -1){
    return true;
  }else{
    return false;
  }
}


//deals with closing the open div(multiple selectbox) when clicking on an area outside the open div
document.onclick = closeOpenSelectbox;
  
function closeOpenSelectbox(e){
  if(!e){
    e = window.event;
    if(!e){
      e = event;
    }
  }
  var srcElement;
  srcElement = e.target;
  if(!srcElement){
    srcElement = e.srcElement;
  }
       
  if (srcElement.parentNode.id != 'suburbSelectBox'){
      
    if (srcElement.parentNode.parentNode.id != 'suburbSelectBox'){  
      if (srcElement.parentNode.id != 'singleSelectContainer'){
        closeSelectBox();
      }
    }
  }
}

//changes backround color of the display box when mouseover and mouseout

function changeColour(node){

  if(node){
    node.style.backgroundColor = "#dddddd"
  }
  return false;
}

function restoreColour(node){
  if(node){
    node.style.backgroundColor = "#ffffff"
  }
  return false;
}