// JavaScript code to control the interface appearance (eg: pane positions, sizes, and behaviors, plus pane headers, tabs, bars, and views):

// Preload the interface images:
if(document.images)
{
  var paneHeaderBack = new Image();
  paneHeaderBack.src = "../images/pane-header-back-2.gif";

  var tabBackOff = new Image();
  tabBackOff.src = "../images/tab-back-off.gif";

  var tabBackOn = new Image();
  tabBackOn.src = "../images/tab-back-on.gif";

  var tabBackActive = new Image();
  tabBackActive.src = "../images/tab-back-active.gif";

  var tabLeftOff = new Image();
  tabLeftOff.src = "../images/tab-left-off.gif";

  var tabLeftOn = new Image();
  tabLeftOn.src = "../images/tab-left-on.gif";

  var tabLeftActive = new Image();
  tabLeftActive.src = "../images/tab-left-active.gif";

  var tabRightOff = new Image();
  tabRightOff.src = "../images/tab-right-off.gif";

  var tabRightOn = new Image();
  tabRightOn.src = "../images/tab-right-on.gif";

  var tabRightActive = new Image();
  tabRightActive.src = "../images/tab-right-active.gif";
}


// To adjust for IE's box model that places borders outside element dimensions (and thus increases the dimensions):
var bdAdj = 1;  // TODO: set value based on browser type.

// Space between panes (and width of resizers):
var panePad = 5;

var interface = new Object();
interface.headerCollapsed = false;
interface.load = function()
{
  
  var windowSize = getWindowSize();

  // Set the interface size:
  this.width = windowSize[0];
  this.height = windowSize[1] - searchpane.top;

  searchpane.redraw();
  resultspane.redraw();

  // Determine which layout is best suited for the current interface size:
  var ratio = resultspane.width / (resultspane.height - 90);  // 90 = anticipated approx. height of results summary
  if(ratio > 1) this.layout = 2;
  else resultspane.layout = 1;
  resultspane.switchLayout(this.layout);

  // Redraw the results pane (again) to match the new screen size and layout
  resultspane.redraw();

  // Remove the loading icon:
  var loadingicon = document.getElementById("loadingicon");
  loadingicon.innerHTML = "";
  loadingicon.style.visibility = "hidden";

  // Unhide the search and results panes now that they are properly positioned:
  document.getElementById("searchpane").style.visibility = "visible";
  document.getElementById("resultspane").style.visibility = "visible";
  document.getElementById("searchtogglediv").style.visibility = "visible";
  document.getElementById("searchresizer").style.visibility = "visible";
};
interface.toggleHeader = function(state)
{
  if(state != undefined)
  {
    if(this.headerCollapsed == state) return;
    this.headerCollapsed = state;
  }
  else this.headerCollapsed = !this.headerCollapsed;

  if(this.headerCollapsed)
  {
    document.getElementById("pageheader").style.visibility = "hidden";
    document.getElementById("menuwrapper").style.top = "0px";
    document.getElementById("searchbanner").style.top = "29px";
    document.getElementById("pageheadertoggle").src = "../images/pane-arrow-down-on.gif";
    searchpane.top = 62;
    resultspane.top = 62;
  }
  else
  {
    document.getElementById("menuwrapper").style.top = "85px";
    document.getElementById("searchbanner").style.top = "114px";
    document.getElementById("pageheader").style.visibility = "visible";
    document.getElementById("pageheadertoggle").src = "../images/pane-arrow-up-on.gif";
    searchpane.top = 148;
    resultspane.top = 148;
  }
  searchpane.redraw();
  resultspane.redraw();
};



// The search pane:
var searchpane = new Object();
searchpane.top = 148;
searchpane.left = 0;
searchpane.width = 300;
searchpane.height = 500;
searchpane.minWidth = 290;
searchpane.minHeight = 400;
searchpane.visible = true;
searchpane.collapsedSize = 20;
searchpane.expandedSize = 300;
searchpane.headerHeight = 22;
searchpane.tabCount = 3;
searchpane.activeTab = 2;
searchpane.toggleWidth = 20;
searchpane.barHeight = 3;
searchpane.redraw = function(newTop, newLeft, newWidth, newHeight)
{
  if(newTop) this.top = newTop;
  if(newLeft) this.left = newLeft;
  if(newWidth) this.width = newWidth;
  if(newHeight) this.height = newHeight;

  var windowSize = getWindowSize();

  this.height = windowSize[1] - this.top - bdAdj*2;
  if(this.height < this.minHeight) this.height = this.minHeight;

  if(this.visible)
  {
    if(this.width > windowSize[0] - resultspane.minWidth - panePad - bdAdj*4) this.width = windowSize[0] - resultspane.minWidth - panePad - bdAdj*4;
    if(this.width < this.minWidth) this.width = this.minWidth;
  }

  if(this.visible) document.getElementById("searchresizer").style.visibility = "visible";
  else document.getElementById("searchresizer").style.visibility = "hidden";

  var div = document.getElementById("searchpane");
  div.style.top = this.top + "px";
  div.style.left = this.left + "px";
  div.style.width = this.width + "px";
  div.style.height = this.height + "px";

  if(this.visible)
  {
    // Resize the search header:
    var header = document.getElementById("searchheader");
    if(header)
    {
      if(this.width > 0) header.style.width = this.width - this.toggleWidth - 2 + "px";
      if(this.headerHeight > 0) header.style.height = this.headerHeight + "px";
    }

    // Resize the search bar:
    var bar = document.getElementById("searchbar");
    if(bar)
    {
      if(this.width > 0) bar.style.width = this.width + "px";
      if(this.barHeight > 0) bar.style.height = this.barHeight + "px";
    }

    // Resize the search view (or only the active pane view if tabs are defined):
    if(this.viewName != "")
    {
      if(this.tabCount > 0 && this.activeTab > 0) var view = document.getElementById("searchview" + this.activeTab);
      else var view = document.getElementById("searchview");
    }
    if(view)
    {
      if(this.width > 0) view.style.width = this.width + "px";
      if(this.height > 0 && this.headerHeight > 0) view.style.height = this.height - this.headerHeight - this.barHeight - bdAdj + "px";
    }

    // Reposition and resize the search resizer:
    var searchresizer = document.getElementById("searchresizer");
    if(searchresizer)
    {
      searchresizer.style.top = this.top + "px";
      searchresizer.style.left = this.left + this.width + bdAdj*2 + "px";
      searchresizer.style.height = this.height + bdAdj*2 + "px";
      searchresizer.style.width = panePad + "px";
    }
  }
  if(googleMap.map) googleMap.map.checkResize();
};
searchpane.toggle = function(state)
{
  if(state != undefined)
  {
    if(this.visible == state) return;
    this.visible = state;
  }
  else this.visible = !this.visible;

  if(this.visible)
  {
    this.width = this.expandedSize;
    document.getElementById("searchpane").style.background = "#D2D6B4 url(../images/pane-header-back-2.gif) repeat-x";
    document.getElementById("searchtoggle").src = "../images/pane-arrow-left-off.gif";
    document.getElementById("searchheader").style.visibility = "visible";
    document.getElementById("searchbar").style.visibility = "visible";
    if(this.activeTab > 0) document.getElementById("searchview" + this.activeTab).style.visibility = "visible";
    else document.getElementById("searchview").style.visibility = "visible";
    document.getElementById("searchresizer").style.visibility = "visible";
  }
  else
  {
    this.expandedSize = this.width;
    this.width = this.collapsedSize;
    document.getElementById("searchpane").style.background = "#D2D6B4 url(../images/search-header-ver.gif) no-repeat left top";
    document.getElementById("searchtoggle").src = "../images/pane-arrow-right-off.gif";
    document.getElementById("searchheader").style.visibility = "hidden";
    document.getElementById("searchbar").style.visibility = "hidden";
    if(this.activeTab > 0) document.getElementById("searchview" + this.activeTab).style.visibility = "hidden";
    else document.getElementById("searchview").style.visibility = "hidden";
    document.getElementById("searchresizer").style.visibility = "hidden";
  }

  searchpane.redraw();
  resultspane.redraw();
};
searchpane.switchTab = function(tabNum)
{
  if(this.tabCount < 2) return;
  if(tabNum < 1 || tabNum > this.tabCount || tabNum == this.activeTab) return;
  if(!document.getElementById("searchtab" + tabNum + "a")) return;
  if(!document.getElementById("searchview" + this.activeTab)) return;

  // Unset the old active tab and view:
  if(this.activeTab > 0 && this.activeTab <= this.tabCount)
  {
    document.getElementById("searchtab" + this.activeTab + "a").className = "inactivetaba";
    document.getElementById("searchtab" + this.activeTab + "b").className = "inactivetabb";
    document.getElementById("searchtab" + this.activeTab + "c").className = "inactivetabc";
    document.getElementById("searchview" + this.activeTab).style.visibility = "hidden";
    document.getElementById("searchview" + this.activeTab).style.position = "absolute";
  }

  // Set the new active tab and view:
  this.activeTab = tabNum;
  document.getElementById("searchtab" + this.activeTab + "a").className = "activetaba";
  document.getElementById("searchtab" + this.activeTab + "b").className = "activetabb";
  document.getElementById("searchtab" + this.activeTab + "c").className = "activetabc";
  document.getElementById("searchview" + this.activeTab).style.visibility = "visible";
  document.getElementById("searchview" + this.activeTab).style.position = "relative";
  document.getElementById("searchview" + this.activeTab).style.width = this.width + "px";
  document.getElementById("searchview" + this.activeTab).style.height = (this.height - this.headerHeight - this.barHeight - bdAdj) + "px";
};


// The results pane:
var resultspane = new Object();
resultspane.top = 148;
resultspane.left = 252;
resultspane.width = 600;
resultspane.height = 500;
resultspane.minWidth = 550;
resultspane.minHeight = 400;

resultspane.summaryHeight = 80;
resultspane.summaryCollapsed = false;

resultspane.mapTop = 228;
resultspane.mapLeft = 252;
resultspane.mapWidth = 300;
resultspane.mapHeight = 400;
resultspane.minMapWidth = 240;
resultspane.minMapHeight = 150;
resultspane.mapCollapsed = false;
resultspane.mapExpandedSize = 300;

resultspane.dataTop = 228;
resultspane.dataLeft = 252;
resultspane.dataWidth = 294;
resultspane.dataHeight = 400;
resultspane.minDataWidth = 300;
resultspane.minDataHeight = 150;
resultspane.dataCollapsed = false;
resultspane.dataExpandedSize = 300;
resultspane.dataTabCount = 3;
resultspane.activeDataTab = 1;

resultspane.headerHeight = 22;
resultspane.barHeight = 26;
resultspane.toggleWidth = 20;
resultspane.collapsedSize = 20;
resultspane.layout = 2;
resultspane.state = "intro";  // intro = page was just loaded so show instructions; results = data has been fetched so show results panes.
resultspane.showResultsPanes = function()
{
  if(this.state == "results") return;

  if(document.getElementById("layoutselector") != null) document.getElementById("layoutselector").style.visibility = "visible";
  if(document.getElementById("resultstogglediv") != null) document.getElementById("resultstogglediv").style.visibility = "visible";
  if(document.getElementById("additionaloptions") != null) document.getElementById("additionaloptions").style.visibility = "visible";
  if(document.getElementById("maptogglediv") != null) document.getElementById("maptogglediv").style.visibility = "visible";
  if(document.getElementById("mappane") != null) document.getElementById("mappane").style.visibility = "visible";
  if(document.getElementById("mapresizer") != null) document.getElementById("mapresizer").style.visibility = "visible";
  if(document.getElementById("datatogglediv") != null) document.getElementById("datatogglediv").style.visibility = "visible";
  if(document.getElementById("datapane") != null) document.getElementById("datapane").style.visibility = "visible";
  if(document.getElementById("datacontrols1") != null) document.getElementById("datacontrols1").style.visibility = "visible";

  this.state = "results";
};
resultspane.redraw = function(newTop, newLeft, newWidth, newHeight)
{
  var windowSize = getWindowSize();

  if(newTop) this.top = newTop;
  else this.top = searchpane.top;

  if(newLeft) this.left = newLeft;
  else
  {
    if(searchpane.visible) this.left = searchpane.left + searchpane.width + panePad + bdAdj*2;
    else this.left = searchpane.left + searchpane.width + bdAdj;
  }

  if(newWidth) this.width = newWidth;
  else this.width = windowSize[0] - this.left - bdAdj*2;
  if(this.width < this.minWidth) this.width = this.minWidth;

  if(newHeight) this.height = newHeight;
  else this.height = windowSize[1] - this.top - bdAdj*2;
  if(this.height < this.minHeight) this.height = this.minHeight;

  var div = document.getElementById("resultspane");
  if(div)
  {
    div.style.top = this.top + "px";
    div.style.left = this.left + "px";
    div.style.width = this.width + "px";
    div.style.height = this.height + "px";
  }
  
  // Resize the results summary:
  var summary = document.getElementById("resultsview");
  if(summary)
  {
    if(this.width > 0) summary.style.width = this.width + "px";
    var summarySize = getElementSize("resultsview");
    this.summaryHeight = summarySize[1];
    if(this.summaryHeight < 70) this.summaryHeight = 70;
  }

  var actualSummaryHeight = this.summaryHeight;
  if(this.summaryCollapsed) actualSummaryHeight = this.headerHeight;

  // Resize the map and data panes:
  if(this.layout == 1)
  {
    this.mapLeft = this.left + bdAdj;
    this.mapTop = this.top + actualSummaryHeight + bdAdj;
    this.mapWidth = this.width;
    if(this.dataCollapsed) this.mapHeight = this.top + this.height - this.mapTop - this.dataHeight - bdAdj;
    if(!this.mapCollapsed && this.mapHeight < this.minMapHeight) this.mapHeight = this.minMapHeight - bdAdj;

    this.dataLeft = this.left + bdAdj;
    if(this.mapCollapsed) this.dataTop = this.mapTop + this.mapHeight + bdAdj;
    else if(this.dataCollapsed) this.dataTop = this.mapTop + this.mapHeight + bdAdj;
    else this.dataTop = this.mapTop + this.mapHeight + panePad + bdAdj*2;
    this.dataWidth = this.width;
    if(this.mapCollapsed) this.dataHeight = this.top + this.height - this.mapTop - this.mapHeight - bdAdj;
    else if(!this.dataCollapsed)
    {
      this.dataHeight = this.top + this.height - this.dataTop - bdAdj;
      if(this.dataHeight < this.minDataHeight)
      {
        this.dataHeight = this.minDataHeight;
        this.dataTop = this.top + this.height - this.dataHeight - bdAdj;
        this.mapHeight = this.dataTop - this.mapTop - panePad - bdAdj*2;
      }
    }
  }
  else if(this.layout == 2)
  {
    this.mapLeft = this.left + 1;
    this.mapTop = this.top + actualSummaryHeight + bdAdj;
    if(this.dataCollapsed) this.mapWidth = this.left + this.width - this.mapLeft - this.dataWidth;
    if(!this.mapCollapsed && this.mapWidth < this.minMapWidth) this.mapWidth = this.minMapWidth;
    this.mapHeight = this.top + this.height - this.mapTop;

    if(this.mapCollapsed) this.dataLeft = this.mapLeft + this.mapWidth + bdAdj;
    else if(this.dataCollapsed) this.dataLeft = this.mapLeft + this.mapWidth;
    else this.dataLeft = this.mapLeft + this.mapWidth + bdAdj*2 + panePad;
    this.dataTop = this.mapTop;
    if(this.mapCollapsed) this.dataWidth = this.left + this.width - this.mapLeft - this.mapWidth - bdAdj;
    else if(!this.dataCollapsed)
    {
      this.dataWidth = this.left + this.width - this.dataLeft + bdAdj;
      if(this.dataWidth < this.minDataWidth)
      {
        this.dataWidth = this.minDataWidth;
        this.dataLeft = this.left + this.width - this.dataWidth;
        this.mapWidth = this.dataLeft - this.mapLeft - panePad - bdAdj*2;
      }
    }
    this.dataHeight = this.mapHeight;
  }
  var map = document.getElementById("mappane");
  if(map)
  {
    map.style.top = this.mapTop + "px";
    map.style.left = this.mapLeft + "px";
    map.style.width = this.mapWidth + "px";
    map.style.height = this.mapHeight + "px";
  }
  var data = document.getElementById("datapane");
  if(data)
  {
    data.style.top = this.dataTop + "px";
    data.style.left = this.dataLeft + "px";
    data.style.width = this.dataWidth + "px";
    data.style.height = this.dataHeight + "px";
  }

  if(!this.mapCollapsed)
  {
    // Resize the map header:
    var header = document.getElementById("mapheader");
    if(header)
    {
      header.style.width = this.mapWidth - this.toggleWidth - 2 + "px";
      if(this.headerHeight > 0) header.style.height = this.headerHeight + "px";
    }

    // Resize the map view:
    var view = document.getElementById("mapview");
    if(view)
    {
      view.style.width = this.mapWidth - bdAdj*2 + "px";
      view.style.height = this.mapHeight - this.headerHeight - bdAdj*2 + "px";
    }

    // Reposition and resize the map resizer:
    if(!this.dataCollapsed)
   {
      var mapresizer = document.getElementById("mapresizer");
      if(mapresizer)
      {
        if(this.layout == 1)
        {
          mapresizer.style.top = this.mapTop + this.mapHeight + bdAdj + "px";
          mapresizer.style.left = this.mapLeft + "px";
          mapresizer.style.height = panePad + "px";
          mapresizer.style.width = this.mapWidth + "px";
        }
        else if(this.layout == 2)
        {
          mapresizer.style.top = this.mapTop + "px";
          mapresizer.style.left = this.mapLeft + this.mapWidth + "px";
          mapresizer.style.height = this.mapHeight + bdAdj + "px";
          mapresizer.style.width = panePad + "px";
        }
      }
    }
  }

  if(!this.dataCollapsed)
  {
    // Resize the data header:
    var header = document.getElementById("dataheader");
    if(header)
    {
      header.style.width = this.dataWidth - this.toggleWidth - 2 + "px";
      header.style.height = this.headerHeight + "px";
    }

    // Resize the data bar:
    var bar = document.getElementById("databar");
    if(bar)
    {
      bar.style.width = this.dataWidth + "px";
      bar.style.height = this.barHeight + "px";
    }

    // Resize the data view:
    var view = document.getElementById("dataview" + this.activeDataTab);
    if(view)
    {
      view.style.width = this.dataWidth + "px";
      view.style.height = this.dataHeight - this.headerHeight - this.barHeight + "px";
    }
  }
  if(googleMap.map) googleMap.map.checkResize();
};
resultspane.toggleSummary = function(state)
{
  if(state != undefined)
  {
    if(this.summaryCollapsed == state) return;
    this.summaryCollapsed = state;
  }
  else this.summaryCollapsed = !this.summaryCollapsed;

  if(this.summaryCollapsed)
  {
    if(this.layout == 1)
    {
      this.mapTop = this.mapTop - this.summaryHeight + this.headerHeight;
      if(!this.mapCollapsed) this.mapHeight = this.mapHeight + this.summaryHeight - this.headerHeight;
      else { this.dataTop = this.dataTop - this.summaryHeight + this.headerHeight; this.dataHeight = this.dataHeight + this.summaryHeight - this.headerHeight; }
    }
    else if(this.layout == 2)
    {
      this.mapTop = this.mapTop - this.summaryHeight + this.headerHeight;
      this.mapHeight = this.mapHeight + this.summaryHeight - this.headerHeight;
      this.dataTop = this.dataTop - this.summaryHeight + this.headerHeight;
      this.dataHeight = this.dataHeight + this.summaryHeight - this.headerHeight;
    }
    document.getElementById("resultstoggle").src = "../images/pane-arrow-down-off.gif";
    document.getElementById("additionaloptions").style.visibility = "hidden";
  }
  else
  {
    if(this.layout == 1)
    {
      this.mapTop = this.mapTop + this.summaryHeight - this.headerHeight;
      if(!this.mapCollapsed) this.mapHeight = this.mapHeight - this.summaryHeight + this.headerHeight;
      else { this.dataTop = this.dataTop + this.summaryHeight - this.headerHeight; this.dataHeight = this.dataHeight - this.summaryHeight + this.headerHeight; }
   }
    else if(this.layout == 2)
    {
      this.mapTop = this.mapTop + this.summaryHeight - this.headerHeight;
      this.mapHeight = this.mapHeight - this.summaryHeight + this.headerHeight;
      this.dataTop = this.dataTop + this.summaryHeight - this.headerHeight;
      this.dataHeight = this.dataHeight - this.summaryHeight + this.headerHeight;
    }
    document.getElementById("resultstoggle").src = "../images/pane-arrow-up-off.gif";
    document.getElementById("additionaloptions").style.visibility = "visible";
  }
  results.updateSummary();  // Change the text displayed
  this.redraw();
};
resultspane.toggleMap = function(state)
{
  if(state != undefined)
  {
    if(this.mapCollapsed == state) return;
    this.mapCollapsed = state;
  }
  else this.mapCollapsed = !this.mapCollapsed;

  if(this.mapCollapsed)
  {
    if(this.layout == 1)
    {
      this.mapExpandedSize = this.mapHeight;
      this.mapHeight = this.collapsedSize;
      document.getElementById("maptoggle").src = "../images/pane-arrow-down-off.gif";
      document.getElementById("mapview").style.visibility = "hidden";
      document.getElementById("mapresizer").style.visibility = "hidden";
      document.getElementById("datatoggle").style.visibility = "hidden";
    }
    else if(resultspane.layout == 2)
    {
      this.mapExpandedSize = this.mapWidth;
      this.mapWidth = this.collapsedSize;
      document.getElementById("mappane").style.background = "#D2D6B4 url(../images/map-header-ver.gif) no-repeat left top";
      document.getElementById("mappane").style.borderRight = "1px solid #4D6633";
      document.getElementById("mapheader").style.visibility = "hidden";
      document.getElementById("maptoggle").src = "../images/pane-arrow-right-off.gif";
      document.getElementById("mapview").style.visibility = "hidden";
      document.getElementById("mapresizer").style.visibility = "hidden";
      document.getElementById("datatoggle").style.visibility = "hidden";
    }
  }
  else
  {
    if(this.layout == 1)
    {
      this.mapHeight = this.mapExpandedSize;
      document.getElementById("maptoggle").src = "../images/pane-arrow-up-off.gif";
      document.getElementById("mapview").style.visibility = "visible";
      document.getElementById("mapresizer").style.visibility = "visible";
      document.getElementById("datatoggle").style.visibility = "visible";
    }
    else if(this.layout == 2)
    {
      this.mapWidth = this.mapExpandedSize;
      document.getElementById("mappane").style.background = "#D2D6B4 url(../images/pane-header-back-2.gif) repeat-x";
      document.getElementById("mappane").style.borderRight = "";
      document.getElementById("mapheader").style.visibility = "visible";
      document.getElementById("maptoggle").src = "../images/pane-arrow-left-off.gif";
      document.getElementById("mapview").style.visibility = "visible";
      document.getElementById("mapresizer").style.visibility = "visible";
      document.getElementById("datatoggle").style.visibility = "visible";
    }
  }

  this.redraw();
};
resultspane.toggleData = function(state)
{
  // state = true or false; true means collapse the data pane; false means show it.
  if(state != undefined)
  {
    if(this.dataCollapsed == state) return;
    this.dataCollapsed = state;
  }
  else this.dataCollapsed = !this.dataCollapsed;

  if(this.dataCollapsed)
  {
    if(this.layout == 1)
    {
      this.mapHeight = this.mapHeight + (this.dataHeight - this.collapsedSize) + panePad + bdAdj;
      this.dataExpandedSize = this.dataHeight;
      this.dataHeight = this.collapsedSize;
      document.getElementById("datatoggle").src = "../images/pane-arrow-up-off.gif";
      document.getElementById("dataheader").style.visibility = "hidden";
      document.getElementById("databar").style.visibility = "hidden";
      document.getElementById("datacontrols" + this.activeDataTab).style.visibility = "hidden";
      document.getElementById("dataview" + this.activeDataTab).style.visibility = "hidden";
      document.getElementById("mapresizer").style.visibility = "hidden";
      document.getElementById("maptoggle").style.visibility = "hidden";
    }
    else if(this.layout == 2)
    {
      this.mapWidth = this.mapWidth + this.dataWidth - this.collapsedSize + panePad - bdAdj;
      this.dataExpandedSize = this.dataWidth;
      this.dataWidth = this.collapsedSize;
      document.getElementById("datapane").style.background = "#D2D6B4 url(../images/data-header-ver.gif) no-repeat left top";
      document.getElementById("datapane").style.borderLeft = "1px solid #4D6633";
      document.getElementById("dataheader").style.visibility = "hidden";
      document.getElementById("datatoggle").src = "../images/pane-arrow-left-off.gif";
      document.getElementById("databar").style.visibility = "hidden";
      document.getElementById("datacontrols" + this.activeDataTab).style.visibility = "hidden";
      document.getElementById("dataview" + this.activeDataTab).style.visibility = "hidden";
      document.getElementById("mapresizer").style.visibility = "hidden";
      document.getElementById("maptoggle").style.visibility = "hidden";
    }
  }
  else
  {
    if(this.layout == 1)
    {
      this.dataHeight = this.dataExpandedSize;
      this.mapHeight = this.mapHeight - (this.dataHeight - this.collapsedSize) - panePad - bdAdj;
      document.getElementById("datatoggle").src = "../images/pane-arrow-down-off.gif";
      document.getElementById("dataheader").style.visibility = "visible";
      document.getElementById("databar").style.visibility = "visible";
      document.getElementById("datacontrols" + this.activeDataTab).style.visibility = "visible";
      document.getElementById("dataview" + this.activeDataTab).style.visibility = "visible";
      document.getElementById("mapresizer").style.visibility = "visible";
      document.getElementById("maptoggle").style.visibility = "visible";
    }
    else if(this.layout == 2)
    {
      this.dataWidth = this.dataExpandedSize;
      this.mapWidth = this.width - this.dataWidth - panePad - bdAdj;
      document.getElementById("datapane").style.background = "#D2D6B4 url(../images/pane-header-back-2.gif) repeat-x";
      document.getElementById("datapane").style.borderLeft = "";
      document.getElementById("dataheader").style.visibility = "visible";
      document.getElementById("datatoggle").src = "../images/pane-arrow-right-off.gif";
      document.getElementById("databar").style.visibility = "visible";
      document.getElementById("datacontrols" + this.activeDataTab).style.visibility = "visible";
      document.getElementById("dataview" + this.activeDataTab).style.visibility = "visible";
      document.getElementById("mapresizer").style.visibility = "visible";
      document.getElementById("maptoggle").style.visibility = "visible";
    }
  }

  this.redraw();
};
resultspane.switchLayout = function(layout)
{
  if(layout == 1 || layout == 2) this.layout = layout;
  else if(this.layout == 1) this.layout = 2;
  else if(this.layout == 2) this.layout = 1;
  else layout = 1;  // Default to 1

  var windowSize = getWindowSize();
  var mapresizer = document.getElementById("mapresizer");
  var mapresizerfiller = document.getElementById("mapresizerfiller");

  if(this.layout == 1)
  {
    this.mapHeight = Math.floor(resultspane.height / 2);  // An approximation; makes the map slightly taller than the data pane.
    mapresizer.style.background = "#F0F2E9";
    mapresizer.style.cursor = "s-resize";
    mapresizer.style.borderTop = "1px solid #4D6633";
    mapresizer.style.borderLeft = "";
    mapresizer.style.borderRight = "";
    mapresizer.style.borderBottom = "";
    mapresizerfiller.style.borderTop = "1px solid #4D6633";
    mapresizerfiller.style.borderLeft = "";
    mapresizerfiller.style.borderRight = "";
    mapresizerfiller.style.borderBottom = "";
    document.getElementById("maptogglediv").style.float = "right";
    document.getElementById("maptoggle").src = "../images/pane-arrow-up-off.gif";
    document.getElementById("datatoggle").src = "../images/pane-arrow-down-off.gif";
  }
  else if(this.layout == 2)
  {
    this.mapWidth = Math.floor((resultspane.width - panePad - bdAdj*2) / 2);  // An exact 50-50 split
    mapresizer.style.background = "#FDFFF2";
    mapresizer.style.cursor = "w-resize";
    mapresizer.style.borderLeft = "1px solid #4D6633";
    mapresizer.style.borderRight = "1px solid #4D6633";
    mapresizer.style.borderBottom = "1px solid #4D6633";
    mapresizerfiller.style.borderLeft = "1px solid #4D6633";
    mapresizerfiller.style.borderRight = "1px solid #4D6633";
    mapresizerfiller.style.borderBottom = "1px solid #4D6633";
    document.getElementById("maptogglediv").style.float = "right";
    document.getElementById("maptoggle").src = "../images/pane-arrow-left-off.gif";
    document.getElementById("datatoggle").src = "../images/pane-arrow-right-off.gif";
  }
  if(googleMap.map) googleMap.map.checkResize();
};
resultspane.switchDataTab = function(tabNum)
{
  if(this.dataTabCount < 2) return;
  if(tabNum < 1 || tabNum > this.dataTabCount || tabNum == this.activeDataTab) return;
  if(!document.getElementById("datatab" + tabNum + "a")) return;
  if(!document.getElementById("dataview" + this.activeDataTab)) return;

  // For now use the same data controls for tabs 1 and 2:
  var dataControlTab = this.activeDataTab;
  if(this.activeDataTab == 2) dataControlTab = 1;

  // Unset the old active tab and view:
  if(this.activeDataTab > 0 && this.activeDataTab <= this.dataTabCount)
  {
    document.getElementById("datatab" + this.activeDataTab + "a").className = "inactivetaba";
    document.getElementById("datatab" + this.activeDataTab + "b").className = "inactivetabb";
    document.getElementById("datatab" + this.activeDataTab + "c").className = "inactivetabc";
    document.getElementById("datacontrols" + dataControlTab).style.visibility = "hidden";
    document.getElementById("datacontrols" + dataControlTab).style.width = "0px";
    document.getElementById("dataview" + this.activeDataTab).style.visibility = "hidden";
    document.getElementById("dataview" + this.activeDataTab).style.position = "absolute";
  }

  // Set the new active tab and view:
  dataControlTab = tabNum;
  if(tabNum == 2) dataControlTab = 1;
  this.activeDataTab = tabNum;
  document.getElementById("datatab" + this.activeDataTab + "a").className = "activetaba";
  document.getElementById("datatab" + this.activeDataTab + "b").className = "activetabb";
  document.getElementById("datatab" + this.activeDataTab + "c").className = "activetabc";
  document.getElementById("datacontrols" + dataControlTab).style.visibility = "visible";
  document.getElementById("datacontrols" + dataControlTab).style.width = "95%";
  document.getElementById("dataview" + this.activeDataTab).style.visibility = "visible";
  document.getElementById("dataview" + this.activeDataTab).style.position = "relative";
  document.getElementById("dataview" + this.activeDataTab).style.width = this.dataWidth + "px";
  document.getElementById("dataview" + this.activeDataTab).style.height = (this.dataHeight - this.headerHeight - this.barHeight - bdAdj) + "px";
};



// Code given below for resizing divs is modified from http://www.brainjar.com/dhtml/drag/
// technique copyright 2001 by Mike Hall.
// See http://www.brainjar.com for terms of use.

// Determine browser and version.
function Browser()
{
  var ua, s, i;
  this.isIE = false;
  this.isNS = false;
  this.version = null;
  ua = navigator.userAgent;

  s = "MSIE";
  if((i = ua.indexOf(s)) >= 0)
  {
    this.isIE = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }

  s = "Netscape6/";
  if((i = ua.indexOf(s)) >= 0)
  {
    this.isNS = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }

  // Treat any other "Gecko" browser as NS 6.1.
  s = "Gecko";
  if((i = ua.indexOf(s)) >= 0)
  {
    this.isNS = true;
    this.version = 6.1;
    return;
  }
}

var browser = new Browser();


// Global object to hold drag information.
var resizer = new Object();
resizer.zIndex = 0;
resizer.activeColor = "#999999";
resizer.inactiveColor = "#C6CAB4";
resizer.activeResizer = "";

function startResize(event, resizerID)
{
  if(resizerID == "") return;

  resizer.activeResizer = resizerID;
  resizerDiv = document.getElementById(resizerID);
  resizer.inactiveColor = resizerDiv.style.backgroundColor;
  resizerDiv.style.backgroundColor = resizer.activeColor;

  var fadeDiv = document.getElementById("resizertransparancy");
  fadeDiv.style.top = searchpane.top + "px";
  fadeDiv.style.left = searchpane.left + "px";
  fadeDiv.style.width = searchpane.width + resultspane.width + panePad + bdAdj*4 + "px";
  fadeDiv.style.height = searchpane.height + bdAdj*2 + "px";
  fadeDiv.style.visibility = "visible";

  if(resizerID == "mapresizer")
  {
    var mapresizerfiller = document.getElementById("mapresizerfiller");
    mapresizerfiller.style.top = resizerDiv.style.top;
    mapresizerfiller.style.left = resizerDiv.style.left;
    mapresizerfiller.style.width = resizerDiv.style.width;
    mapresizerfiller.style.height = resizerDiv.style.height;
    mapresizerfiller.style.visibility = "visible";
  }

  // Get cursor position with respect to the page.
  var x, y;
  if (browser.isIE)
  {
    x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
    y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
  }
  if (browser.isNS)
  {
    x = event.clientX + window.scrollX;
    y = event.clientY + window.scrollY;
  }

  // Save starting positions of cursor and element.
  resizer.cursorStartX = x;
  resizer.cursorStartY = y;
  resizer.elStartLeft = parseInt(resizerDiv.style.left, 10);
  resizer.elStartTop = parseInt(resizerDiv.style.top,  10);

  if (isNaN(resizer.elStartLeft)) resizer.elStartLeft = 0;
  if (isNaN(resizer.elStartTop))  resizer.elStartTop  = 0;

  // Update element's z-index.
  //resizerDiv.style.zIndex = ++resizer.zIndex;

  // Capture mousemove and mouseup events on the page.
  if(browser.isIE)
  {
    document.attachEvent("onmousemove", moveResizer);
    document.attachEvent("onmouseup", stopResize);
    window.event.cancelBubble = true;
    window.event.returnValue = false;
  }
  if(browser.isNS)
  {
    document.addEventListener("mousemove", moveResizer, true);
    document.addEventListener("mouseup", stopResize, true);
    event.preventDefault();
  }
}

function moveResizer(event)
{
  if(resizer.activeResizer == "") return;

  // Get cursor position with respect to the page:
  var x, y;
  if (browser.isIE)
  {
    x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
    y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
  }
  if (browser.isNS)
  {
    x = event.clientX + window.scrollX;
    y = event.clientY + window.scrollY;
  }

  // Move the resizer bar by the same amount the cursor has moved:
  resizerDiv = document.getElementById(resizer.activeResizer);
  if(resizer.activeResizer == "searchresizer")
  {
    var resizerLeft = (resizer.elStartLeft + x - resizer.cursorStartX);
    if(resizerLeft < searchpane.left + searchpane.minWidth + bdAdj*2) resizerLeft = searchpane.left + searchpane.minWidth + bdAdj*2;
    if(resizerLeft > resultspane.left + resultspane.width - resultspane.minWidth - panePad - bdAdj*2) resizerLeft = resultspane.left + resultspane.width - resultspane.minWidth - panePad - bdAdj*2;
    resizerDiv.style.left = resizerLeft + "px";
    searchpane.width = resizerLeft - searchpane.left - bdAdj*2;
  }
  else if(resizer.activeResizer == "mapresizer")
  {
    if(resultspane.layout == 1)
    {
      var resizerTop = (resizer.elStartTop  + y - resizer.cursorStartY);
      if(resizerTop < resultspane.mapTop + resultspane.minMapHeight + bdAdj) resizerTop = resultspane.mapTop + resultspane.minMapHeight + bdAdj;
      if(resizerTop > resultspane.top + resultspane.height - resultspane.minDataHeight - panePad - bdAdj*2) resizerTop = resultspane.top + resultspane.height - resultspane.minDataHeight - panePad - bdAdj*2;
      resizerDiv.style.top = resizerTop + "px";
      resultspane.mapHeight = resizerTop - resultspane.mapTop;
      resultspane.dataHeight = resultspane.top + resultspane.height - resizerTop - panePad - bdAdj*2;
    }
    else if(resultspane.layout == 2)
    {
      var resizerLeft = (resizer.elStartLeft + x - resizer.cursorStartX);
      if(resizerLeft < resultspane.mapLeft + resultspane.minMapWidth) resizerLeft = resultspane.mapLeft + resultspane.minMapWidth;
      if(resizerLeft > resultspane.left + resultspane.width - resultspane.minDataWidth - panePad - bdAdj*2) resizerLeft = resultspane.left + resultspane.width - resultspane.minDataWidth - panePad - bdAdj*2;
      resizerDiv.style.left = resizerLeft + "px";
      resultspane.mapWidth = resizerLeft - resultspane.mapLeft;
      resultspane.dataWidth = resultspane.width - resultspane.mapWidth - panePad - bdAdj*2;
    }
  }

  if (browser.isIE)
  {
    window.event.cancelBubble = true;
    window.event.returnValue = false;
  }
  if (browser.isNS) event.preventDefault();
};

function stopResize(event)
{
  if(resizer.activeResizer == "") return;

  // Stop capturing mousemove and mouseup events.
  if (browser.isIE)
  {
    document.detachEvent("onmousemove", moveResizer);
    document.detachEvent("onmouseup", stopResize);
  }
  if (browser.isNS)
  {
    document.removeEventListener("mousemove", moveResizer,   true);
    document.removeEventListener("mouseup", stopResize, true);
  }

  document.getElementById(resizer.activeResizer).style.backgroundColor = resizer.inactiveColor;
  document.getElementById("resizertransparancy").style.visibility = "hidden";
  document.getElementById("mapresizerfiller").style.visibility = "hidden";
  resizer.activeResizer = "";

  searchpane.redraw();
  resultspane.redraw();
}


var tooltip = new Object();
tooltip.offsetx = -200;
tooltip.offsety =  16;

tooltip.newelement = function(newid)
{ 
    if(document.createElement)
    { 
        var el = document.createElement('div'); 
        el.id = newid;     
        with(el.style)
        { 
            display = 'none';
            position = 'absolute';
        } 
        el.innerHTML = '&nbsp;'; 
        document.body.appendChild(el); 
    } 
};

tooltip.show = function(e, tip)
{
  if(!document.getElementById('tooltip')) this.newelement('tooltip');
  var lixlpixel_tooltip = document.getElementById('tooltip');
  if(!lixlpixel_tooltip) return;

  // Get cursor position with respect to the page.
  var x, y;
  if (browser.isIE)
  {
    x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
    y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
  }
  if (browser.isNS)
  {
    x = event.clientX + window.scrollX;
    y = event.clientY + window.scrollY;
  }

  lixlpixel_tooltip.style.left = (x+this.offsetx) + 'px';
  lixlpixel_tooltip.style.top = (y+this.offsety) + 'px';
  lixlpixel_tooltip.innerHTML = tip;
  lixlpixel_tooltip.style.display = 'block';
};

tooltip.hide = function()
{
    document.getElementById('tooltip').style.display = 'none';
};


/******************************************************/


function getWindowSize()
{
  var height = 0;
  var width = 0;
  if(window.self && self.innerHeight) height = self.innerHeight;
  if(document.documentElement && document.documentElement.clientHeight) height = document.documentElement.clientHeight;
  if(window.self && self.innerWidth) width = self.innerWidth;
  if(document.documentElement && document.documentElement.clientWidth) width = document.documentElement.clientWidth;
  return [width, height];
}

function getElementPos(element)
{
  var offsetTop = 0;
  var offsetLeft = 0;
  var elem = document.getElementById(element);
  for (var e = elem; e; e = e.offsetParent)
  {
    offsetTop += e.offsetTop;
    offsetLeft += e.offsetLeft;
  }
  return [offsetLeft, offsetTop];
}

function getElementSize(element)
{
  var width = document.getElementById(element).offsetWidth - bdAdj;
  if(isNaN(width))
  {
    width = document.getElementById(element).style.width;
    width = width.split('p');
    width = parseInt(width[0]);
  }

  var height = document.getElementById(element).offsetHeight - bdAdj;
  if(isNaN(height))
  {
    height = document.getElementById(element).style.height;
    height = height.split('p');
    height = parseInt(height[0]);
  }
  return [width, height];
}