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


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

var interface = new Object();

interface.resizerWidth = 6;	// 6 pixel wide DIV plus 1 pixel borders
interface.bdAdj = 1;		// To adjust for DIV borders where necessary
interface.headerCollapsed = false;

interface.ruleHeight = 1;
interface.pageHeaderHeight = 80;
interface.hmenuHeight = 22;
interface.searchbannerHeight = 36;  // div height + padding-top
interface.searchpaneBarHeight = 2;

interface.summaryTop = 0;  // Combined height of "rule", "pageheader", "hmenu", "searchbanner", and "searchbar" (with padding, but excluding their borders) + 1
interface.summaryHeight = 0;

interface.mapTop = 0;
interface.mapLeft = 0;
//interface.mapWidth = 400;
interface.mapWidth = 510;
interface.mapHeight = 600;
interface.minMapWidth = 300;
interface.minMapHeight = 200;
interface.mapCollapsed = false;
interface.mapExpandedSize = 400;

interface.dataTop = 1+80+22+36+2+1 + 54;
interface.dataLeft = 400+6;
//interface.dataWidth = 410;
interface.dataWidth = 300;
interface.dataHeight = 600;
interface.minDataWidth = 300;
interface.minDataHeight = 200;
interface.dataCollapsed = false;
interface.dataExpandedSize = 410;
interface.dataTabCount = 1;
interface.activeDataTab = 1;

interface.paneHeaderHeight = 24;
interface.paneBarHeight = 24;
interface.toggleWidth = 20;
interface.paneCollapsedWidth = 20;

interface.load = function()
{
  var windowSize = getWindowSize();
  var windowWidth = windowSize[0];

  // Resize map pane widths to fit window size (keep data pane width constant):
  this.mapWidth = windowWidth - this.dataWidth - this.resizerWidth;

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

  this.toggleData(true); //collapse the datapane at the start
  // Unhide the map and data panes now that it is properly positioned:
  document.getElementById("mappane").style.visibility = "visible";
  //document.getElementById("datacontrols" + this.activeDataTab).style.width = "90%";
  //document.getElementById("maptogglediv").style.visibility = "visible";
  //document.getElementById("datapane").style.visibility = "visible";
  //document.getElementById("datatogglediv").style.visibility = "hidden";
  //document.getElementById("mapresizer").style.visibility = "visible";
  //document.getElementById("headertogglediv").style.visibility = "visible";
  //document.getElementById("datacontrols" + this.activeDataTab).style.visibility = "visible";
};

interface.redraw = function()
{
  var windowSize = getWindowSize();
  var windowWidth = windowSize[0];
  var windowHeight = windowSize[1] - 1;

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

  // Resize the map and data pane widths and heights:
  this.mapTop = this.summaryTop + this.summaryHeight;
  this.dataTop = this.mapTop;

  //this.mapHeight = windowHeight - this.mapTop;
  //this.dataHeight = this.mapHeight;

  if(this.dataCollapsed) this.mapWidth = windowWidth - this.dataWidth;
  else if(!this.mapCollapsed)
  {
    this.mapWidth = windowWidth - this.dataWidth - this.resizerWidth;
    if(this.mapWidth < this.minMapWidth) this.mapWidth = this.minMapWidth;
  }

  if(this.mapCollapsed || this.dataCollapsed) this.dataWidth = windowWidth - this.mapWidth;
  else this.dataWidth = windowWidth - this.mapWidth - this.resizerWidth;
  if(!this.dataCollapsed && this.dataWidth < this.minDataWidth)
  {
    this.dataWidth = this.minDataWidth;
    this.mapWidth = windowWidth - this.dataWidth - this.resizerWidth;
  }

  this.mapLeft = 0;
  if(this.mapCollapsed) this.dataLeft = this.mapWidth + this.bdAdj;
  else if(this.dataCollapsed) this.dataLeft = this.mapWidth;
  else this.dataLeft = this.mapWidth + this.resizerWidth;

  var resultsContainer = document.getElementById("resultsContainer");
  if(resultsContainer)
  {
    resultsContainer.style.height = "650px";
  }
  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";
  }

  // Resize the map pane components:
  if(!this.mapCollapsed)
  {
    // Resize the map header:
    var header = document.getElementById("mapheader");
    if(header)
    {
      header.style.width = (this.mapWidth - this.toggleWidth - 5) + "px";  // the "-3" adds a little extra insurance against unwanted wrapping from different browser box models
      if(this.paneHeaderHeight > 0) header.style.height = this.paneHeaderHeight + "px";
    }

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

    // Reposition and resize the map resizer:
    if(!this.dataCollapsed)
   {
      var mapresizer = document.getElementById("mapresizer");
      if(mapresizer)
      {
        //mapresizer.style.top = this.mapTop + "px";
        //mapresizer.style.top = "50px";
        //mapresizer.style.top = "26px";
        mapresizer.style.left = this.mapLeft + this.mapWidth + "px";
        mapresizer.style.height = this.mapHeight +this.bdAdj + "px";
        mapresizer.style.width = (this.resizerWidth - 2) + "px";  // Adjust for borders
      }
    }
  }

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

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

    // Resize the data view:
    var view = document.getElementById("dataview1");
    if(view)
    {
      view.style.width = this.dataWidth + "px";
      view.style.height = (this.dataHeight - this.paneHeaderHeight - this.paneBarHeight - 1) + "px";
    }
  }

  if(googleMap && googleMap.map) googleMap.map.checkResize();
};

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("rule").style.position = "absolute";
    document.getElementById("rule").style.visibility = "hidden";
    document.getElementById("rule").style.height = "0px";
    document.getElementById("pageheader").style.position = "absolute";
    document.getElementById("pageheader").style.visibility = "hidden";
    document.getElementById("pageheader").style.height = "0px";
    document.getElementById("headertoggle").src = "layout_images/pane-arrow-down-on.gif";
    document.getElementById("hmenu").style.top = "0px";
    interface.summaryTop = interface.hmenuHeight + interface.searchbannerHeight + interface.searchpaneBarHeight + 1;
  }
  else
  {
    document.getElementById("rule").style.position = "relative";
    document.getElementById("rule").style.visibility = "visible";
    document.getElementById("rule").style.height = interface.ruleHeight + "px";
    document.getElementById("pageheader").style.position = "relative";
    document.getElementById("pageheader").style.visibility = "visible";
    document.getElementById("pageheader").style.height = interface.pageHeaderHeight + "px";
    document.getElementById("headertoggle").src = "layout_images/pane-arrow-up-on.gif";
    interface.summaryTop = interface.ruleHeight + interface.pageHeaderHeight + interface.hmenuHeight + interface.searchbannerHeight + interface.searchpaneBarHeight + 1;
  }
  interface.redraw();
};

// state = true: hide map; state = false: show map.
interface.toggleMap = function(state)
{
  if(state != undefined)
  {
    if(this.mapCollapsed == state) return;
    this.mapCollapsed = state;
  }
  else this.mapCollapsed = !this.mapCollapsed;

  var windowSize = getWindowSize();
  var windowWidth = windowSize[0];

  if(this.mapCollapsed)
  {
    this.mapExpandedSize = this.mapWidth;
    this.mapWidth = this.paneCollapsedWidth;
    this.dataWidth = windowWidth - this.mapWidth - this.bdAdj;
    document.getElementById("mapheader").style.visibility = "hidden";
    document.getElementById("maptoggle").src = "atlas_images/pane-arrow-right-off.gif";
    document.getElementById("maptoggle").title = "Show map";
    document.getElementById("mapview").style.visibility = "hidden";
    document.getElementById("mapresizer").style.visibility = "hidden";
    document.getElementById("datatoggle").style.visibility = "hidden";
  }
  else
  {
    this.mapWidth = this.mapExpandedSize;
    this.dataWidth = windowWidth - this.mapWidth - this.resizerWidth;
    document.getElementById("mapheader").style.visibility = "visible";
    document.getElementById("maptoggle").src = "atlas_images/pane-arrow-left-off.gif";
    document.getElementById("maptoggle").title = "Hide map";
    document.getElementById("mapview").style.visibility = "visible";
    document.getElementById("mapresizer").style.visibility = "visible";
    document.getElementById("datatoggle").style.visibility = "visible";
  }

  this.redraw();
};

// state = true: collapse data pane; state = false: show data pane.
interface.toggleData = function(state)
{
  if(state != undefined)
  {
    if(this.dataCollapsed == state) return;
    this.dataCollapsed = state;
  }
  else this.dataCollapsed = !this.dataCollapsed;

  var windowSize = getWindowSize();
  var windowWidth = windowSize[0];

  if(this.dataCollapsed)
  {
    this.dataExpandedSize = this.dataWidth;
    this.dataWidth = this.paneCollapsedWidth;
    this.mapWidth = windowWidth - this.dataWidth - this.bdAdj;
    //document.getElementById("dataheader").style.visibility = "hidden";
    document.getElementById("datatoggle").src = "atlas_images/pane-arrow-left-off.gif";
    document.getElementById("datatoggle").title = "Show details";
    document.getElementById("databar").style.visibility = "hidden";
    document.getElementById("datacontrols1").style.visibility = "hidden";
    document.getElementById("dataview1").style.visibility = "hidden";
    document.getElementById("mapresizer").style.visibility = "hidden";
    document.getElementById("maptoggle").style.visibility = "hidden";
  }
  else
  {
    this.dataWidth = this.dataExpandedSize;
    this.mapWidth = windowWidth - this.dataWidth - this.resizerWidth;
    document.getElementById("datapane").style.visibility = "visible";
    //document.getElementById("dataheader").style.visibility = "visible";
    document.getElementById("datatoggle").src = "atlas_images/pane-arrow-right-off.gif";
    document.getElementById("datatoggle").title = "Hide details";
    document.getElementById("datatogglediv").style.visibility = "visible";
    document.getElementById("databar").style.visibility = "visible";
    document.getElementById("datacontrols1").style.visibility = "visible";
    document.getElementById("dataview1").style.visibility = "visible";
    document.getElementById("mapresizer").style.visibility = "visible";
    document.getElementById("maptoggle").style.visibility = "visible";
  }

  this.redraw();
};

interface.switchDataTab = function(tabNum)
{
  if(this.dataTabCount < 2) return;
  if(tabNum < 1 || tabNum > this.dataTabCount || tabNum == this.activeDataTab) return;
  if(!document.getElementById("datatab" + tabNum)) 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).className = "inactivetab";
    document.getElementById("datacontrols" + dataControlTab).style.visibility = "hidden";
    document.getElementById("datacontrols" + dataControlTab).style.width = "0px";
    document.getElementById("datacontrols" + dataControlTab).style.height = "0px";
    document.getElementById("datacontrols" + dataControlTab).style.position = "absolute";
    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).className = "activetab";
  document.getElementById("datacontrols" + dataControlTab).style.visibility = "visible";
  //document.getElementById("datacontrols" + dataControlTab).style.width = "90%";
  document.getElementById("datacontrols" + dataControlTab).style.height = "24px";
  document.getElementById("datacontrols" + dataControlTab).style.position = "relative";
  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.paneHeaderHeight - this.paneBarHeight - this.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 = "#CDD3B8";
resizer.activeResizer = "";

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

  var windowSize = getWindowSize();
  var windowWidth = windowSize[0];
  var windowHeight = windowSize[1];

  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 = interface.summaryTop + "px";
  //fadeDiv.style.top = "50px";
  //fadeDiv.style.top = "26px";
  fadeDiv.style.left = "0px";
  fadeDiv.style.width = windowWidth + "px";
  fadeDiv.style.height = windowHeight - interface.summaryTop + "px";
  fadeDiv.style.visibility = "visible";

  if(resizerID == "mapresizer")
  {
    var mapresizerfiller = document.getElementById("mapresizerfiller");
    //mapresizerfiller.style.top = resizerDiv.style.top;
    //mapresizerfiller.style.top = "50px";
    //mapresizerfiller.style.top = "26px";
    //mapresizerfiller.style.left = resizerDiv.style.left;
    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;
  }

  var windowSize = getWindowSize();
  var windowWidth = windowSize[0];
  var windowHeight = windowSize[1];

  // Move the resizer bar by the same amount the cursor has moved:
  resizerDiv = document.getElementById(resizer.activeResizer);
  if(resizer.activeResizer == "mapresizer")
  {
    var resizerLeft = (resizer.elStartLeft + x - resizer.cursorStartX);
    if(resizerLeft < interface.minMapWidth) resizerLeft = interface.minMapWidth;
    if(resizerLeft > (windowWidth - interface.minDataWidth - interface.resizerWidth)) resizerLeft = windowWidth - interface.minDataWidth - interface.resizerWidth;
    resizerDiv.style.left = resizerLeft + "px";
    interface.mapWidth = resizerLeft;
    interface.dataWidth = windowWidth - resizerLeft - interface.resizerWidth;
  }

  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 = "";

  interface.redraw();
}


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

// Code to create a popup div when mouse hovers over one of the download option links:

var tooltip = new Object();
tooltip.offsetx = -200;
tooltip.offsety =  16;
tooltip.tiplist = new Array();
tooltip.tiplist[0] = "Download search results as a tab-delimited text file.  The text file can be opened in Excel and used like a spreadsheet, or the data can be imported into another database.  Column names are included as the first row in the text file.  Beware, however, that Excel may incorrectly convert any values that look like a date into a date, including some collector numbers.";
tooltip.tiplist[1] = "Download search results as an XML file matching the Darwin Core v2 1.2 specification. XML files contain descriptive tags that can allow for easier data exchange between web servers or other software.";
tooltip.tiplist[2] = "Download <u>georeferenced</u> search results as a KML file for viewing in Google Earth.";
tooltip.tiplist[3] = "Download search results formatted as an RTF document. RTF is an open standard for creating text documents with richer content than plain text, and should be readable by any word processing software such as Microsoft Word or Open Office.";

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, tipNumber)
{
  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 = this.tiplist(tipNumber);
  lixlpixel_tooltip.style.display = 'block';
};

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


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

// Helper functions:

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;
  width = 826; // JC - set to content width - 10
  return [width, height];
}