var dropdowns = new Array();   // Holds array of all dropdown menus

// Handle mouse down events so that dropdown lists can be hidden if they are clicked off of
if (f7_ie)
  document.onmousedown = onMouseDown;
else
  document.addEventListener("mousedown", onMouseDown, false);

//-------------------------------------------------------------------
// onMouseDown()
//-------------------------------------------------------------------
function onMouseDown(e)
  {
  if (dropdowns.length <= 0)
    return;

  var mousex = 0;
  var mousey = 0;

  if (f7_ns || f7_ns6) { mousex=e.pageX; mousey=e.pageY; }
  if (f7_ie)           { mousex=event.clientX; mousey=event.clientY; var xy = getScrollXY(); mousex += xy[0]; mousey += xy[1]; }

  if (mousex < 0) mousex = 0;
  if (mousey < 0) mousey = 0;

  for (var i=0; i<dropdowns.length; i++)
    {
    if (dropdowns[i].IsVisible() && checkMousePos(mousex, mousey, dropdowns[i].contents, dropdowns[i].title) == 1)
      dropdowns[i].Show(false);
    }
  }

//-------------------------------------------------------------------
// DropDown()
// class for handling dropdown menus
//-------------------------------------------------------------------
function DropDown(id, name, field)
  {
  this.id           = id;
  this.name         = name;
  this.field        = document.getElementById(field);
  this.options      = new Array();
  this.elm          = document.getElementById(name);
  this.title        = this.elm.getElementsByTagName("div")[0];
  this.contents     = this.elm.getElementsByTagName("div")[1];
  this.leftedge     = this.contents.getElementsByTagName("div")[6];
  this.rightedge    = this.contents.getElementsByTagName("div")[7];
  this.divoptions   = this.contents.getElementsByTagName("div")[8];
  //this.divoptions   = this.divoptions.getElementsByTagName("div")[2];
  this.visible      = false;
  this.heightElms   = new Array();   // Each element that should be adjusted when the height of the popup is changed
  this.widthElms    = new Array();   // Each element that should be adjusted when the width of the popup is changed
  this.selectedItem = 0;
  this.value        = null;
  this.maxwidth     = 0;             // The widest item added to the dropdown list so far
  this.minwidth     = 50;

  this.onchange = function() {};

  // Set behavior to toggle the dropdown list when the dropdown's title bar is clicked
  if (f7_ie)
    {
    this.elm.value = id;
    this.title.onclick = function() { dropdowns[id].Toggle(); };
    if (this.elm.chng) this.onchange = this.elm.chng;
    }
  else
    {
    this.elm.setAttribute("value", id);
    this.title.setAttribute("onClick", "dropdowns['"+id+"'].Toggle();");  // When the title is clicked, open the dropdown menu
    }


  // Make a copy of the node used for each item in the dropdown list
  this.itemtemplate = this.divoptions.getElementsByTagName("div")[0];

  // Remove the "template" copy of the item node from the dropdown list
  this.divoptions.removeChild(this.itemtemplate);


  //-----------------------------------------------------------------
  // AddOption()
  // Adds a new option to the dropdown list
  //-----------------------------------------------------------------
  this.AddOption = function(text, value)
    {
    var doc = this.elm.ownerDocument ? this.elm.ownerDocument : this.elm.document;

    var option     = this.itemtemplate.cloneNode(true);//doc.createElement("div");
    //var textnode = doc.createTextNode(text);
    var optionId   = this.options.length;
    var dropdownId = this.id;
  
    option.className = "drop-item";

    if (f7_ie)
      {
      option.title = text;
      option.alt   = text;
      option.value = value;
      option.onmouseover = function() { this.className='drop-item-ovr'; };
      option.onmouseout  = function() { this.className='drop-item'; };
      option.onclick     = function() { dropdowns[dropdownId].Select(optionId); };
      }
    else
      {
      option.setAttribute("title", text);
      option.setAttribute("alt", text);
      option.setAttribute("value", value);
      option.setAttribute("onMouseOver", "this.className='drop-item-ovr';");
      option.setAttribute("onMouseOut", "this.className='drop-item';");
      option.setAttribute("onClick", "dropdowns['"+this.id+"'].Select("+optionId+");");
      }

    //option.appendChild(textnode);
    option.getElementsByTagName("div")[3].innerHTML = text;

    option = this.divoptions.appendChild(option); 

    this.options[optionId] = option;

    if (optionId == this.selectedItem)
      {
      this.selectedItem = -1;
      this.Select(optionId);
      }
    
    var width  = (text.length * 10) + 60;
    if (width > this.maxwidth || this.maxwidth < this.minwidth)
      {
      this.maxwidth = width > this.minwidth ? width : this.minwidth;
      setStyle(this.contents, "width", this.maxwidth+"px");
      }

    this.AdjustWidth();
    this.AdjustHeight();    
    }

  //-----------------------------------------------------------------
  // AdjustHeight()
  //-----------------------------------------------------------------
  this.AdjustHeight = function()
    {
    var height = (this.options.length > 15) ? (15 * 18) : (this.options.length * 18);

    setStyle(this.divoptions, "height", height+"px");
    setStyle(this.leftedge, "height", height+"px");
    setStyle(this.rightedge, "height", height+"px");
    }

  //-----------------------------------------------------------------
  // AdjustWidth()
  //-----------------------------------------------------------------
  this.AdjustWidth = function()
    {
    var width = 0;
    var text  = "";
    
    this.maxwidth = this.minwidth;
    setStyle(this.contents, "width", this.maxwidth+"px");

    for (var i=0; i<this.options.length; i++)
      {
      if (f7_ie)
        text = this.options[i].title;
      else
        text = this.options[i].getAttribute("title");

      width  = (text.length * 10) + 50;
      if (width > this.maxwidth || this.maxwidth < this.minwidth)
        {
        var bounds = getBoundingBox(this.title);
//        var bounds2 = getBoundingBox(this.contents);
        this.maxwidth = (width > this.minwidth) ? width : this.minwidth;

        setStyle(this.contents, "width", this.maxwidth+"px");
        setStyle(this.contents, "left", ((bounds.r + 8)-(this.maxwidth))+"px");
        }
      }
    }

  //-----------------------------------------------------------------
  // SetOnChange()
  //-----------------------------------------------------------------
  this.SetOnChange = function(func)
    {
    if (func) this.onchange = func;
    }

  //-----------------------------------------------------------------
  // GetTitle()
  // Returns the name of the currently selected item (the name shown
  // in the title bar of the dropdown list)
  //-----------------------------------------------------------------
  this.GetTitle = function()
    {
    return this.title.getElementsByTagName("p")[0].childNodes[0].nodeValue;
    }

  //-----------------------------------------------------------------
  // GetValue()
  // Returns the value of the currently selected item
  //-----------------------------------------------------------------
  this.GetValue = function()
    {
    return this.value;
    }

  //-----------------------------------------------------------------
  // IsVisible()
  // Returns true if the dropdown list is open
  //-----------------------------------------------------------------
  this.IsVisible = function()
    {
    return this.visible;
    }

  //-----------------------------------------------------------------
  // UpdateTitle()
  // Sets the title of the dropdown list to the name of the
  // currently selected item
  //-----------------------------------------------------------------
  this.UpdateTitle = function()
    {
    var title = this.options[this.selectedItem].getElementsByTagName("div")[3].innerHTML;
    
    this.title.getElementsByTagName("p")[0].childNodes[0].nodeValue = title;

    if (f7_ie)
      {
      this.title.title = title;
      this.title.alt   = title;
      }
    else
      {
      this.title.setAttribute("title", title);
      this.title.setAttribute("alt", title);
      }
    }

  //-----------------------------------------------------------------
  // Select()
  // Selects the specified item in the dropdown list
  //-----------------------------------------------------------------
  this.Select = function(id)
    {
    if (this.selectedItem == id)
      return;

    if (this.selectedItem >= 0 && this.selectedItem < this.options.length)
      this.options[this.selectedItem].getElementsByTagName("div")[2].className="item-unchecked";   // Clear the checkbox from the previous item

    this.selectedItem = id;
    this.Show(false);

    this.options[this.selectedItem].getElementsByTagName("div")[2].className="item-checked";   // Set the checkbox for the new item

    if (f7_ie)
      this.value = this.options[this.selectedItem].value;
    else
      this.value = this.options[this.selectedItem].getAttribute("value");

    this.UpdateTitle();

    this.field.value = this.value;

    this.onchange();
    }

  //-----------------------------------------------------------------
  // ClearOptions()
  // Removes all options from the dropdown list
  //-----------------------------------------------------------------
  this.ClearOptions = function(startItem)
    {
    var i = this.options.length-1;
    while (i >= startItem)
      {
      this.divoptions.removeChild(this.options[i]);
      this.options.splice(i, 1);
      i--;
      }

    this.AdjustHeight();
    this.AdjustWidth();

    this.Select(0);
    }

  //-----------------------------------------------------------------
  // Show()
  // Shows/Hides the dropdown list
  //-----------------------------------------------------------------
  this.Show = function(visible)
    {
    this.visible = visible;

    if (visible)
      {
      // Position the dropdown box beneath the dropdown title bar
      var bounds = getBoundingBox(this.title);
      var bounds2 = getBoundingBox(this.contents);

      setStyle(this.contents, "top", (bounds.b - 26)+"px");
      setStyle(this.contents, "left", ((bounds.r + 8)-(this.maxwidth))+"px");
      }

    showObject(this.contents, this.visible);
    }

  //-----------------------------------------------------------------
  // Toggle()
  // Toggles the visibility of the dropdown menu
  //-----------------------------------------------------------------
  this.Toggle = function()
    {
    this.visible = !this.visible;
    this.Show(this.visible);
    }
  }