var SimpleDropdown = Base.extend({  
  constructor: function (id) {
    this.id = id;
    this.options = [];
    this.selection = null;
    this.lastload = new Date().getTime();
  },

  addOption: function(title) {
      this.options.push(title);
      this.lastoption = new Date().getTime();
  },

  select: function(title) {
      this.selection = title;
      if ( this.outer ) {
          GEvent.trigger(this.toplevel,'makechange',title);
      }
  },

  destroy: function() {
      if ( this.clicklistener ) {
          GEvent.removeListener(this.clicklistener);
      }
      
  },

  toDom: function() {
      if ( ! this.outer || this.lastoption > this.lastload ) {
          if ( this.clicklistener ) {
              GEvent.removeListener(this.clicklistener);
          }

          this.lastload = new Date().getTime();
          if ( ! this.selection && this.options.length > 0 ) {
             this.selection = this.options[0];
          } else {
             this.selection = "";
          }

          var outer = document.createElement("div");
          var menu = document.createElement("ul");
          var me = this;
          menu.class="sdd";
          menu.style.listStyle="none";
          menu.style.padding="0px";
          menu.style.margin="0px";

          outer.appendChild(menu);

          var inner = document.createElement("li");
          inner.style.listStyle="none";
          inner.style.padding="0px";
          inner.style.margin="0px";
          menu.appendChild(inner);

          var toplevel = document.createElement("a");
          if ( ! this.selection ) 
              toplevel.innerHTML = " ";
          else
              toplevel.innerHTML = this.selection;

          toplevel.style.backgroundColor="#FFFFFF";
          toplevel.style.color = "#000000";
          toplevel.style.border="1px solid #333333";
          toplevel.style.cursor="pointer";
          toplevel.style.decoration = "none";
          toplevel.style.display = "inline-block";
          toplevel.style.MozBorderRadius = "4px";
          toplevel.style.WebkitBorderRadius = "4px";
          toplevel.style.borderRadius = "4px";
          toplevel.style.padding="1px 26px 1px 7px";
          toplevel.style.WebkitBoxSizing="border-box";
          toplevel.style.boxSizing="border-box";
          toplevel.style.MozBoxSizing="border-box";
          toplevel.style.backgroundImage='url("/images/mapicons/downarrow3.png")';
          toplevel.style.backgroundRepeat="no-repeat";
          toplevel.style.backgroundPosition="right 1px";

          inner.appendChild(toplevel);
          this.toplevel = toplevel;

          var slist = document.createElement("div");
          slist.style.visibility = "hidden";
          slist.style.position="absolute";
          slist.style.backgroundColor="#DDDDDD";
          slist.style.color="#000000";
          slist.style.border="1px solid #333333";
          slist.style.margin = "-1px 0px 0px 0px";
          slist.style.zIndex = "99";
          slist.style.borderRadiusBottomLeft = "4px";
          slist.style.borderRadiusBottomRight = "4px";
          slist.style.WebkitBorderBottomLeftRadius = "4px";
          slist.style.WebkitBorderBottomRightRadius = "4px";
          slist.style.MozBorderRadiusBottomLeft = "4px";
          slist.style.MozBorderRadiusBottomRight = "4px";
          slist.style.boxSizing="border-box";
          slist.style.WebkitBoxSizing="border-box";
          slist.style.MozBoxSizing="border-box";
          inner.appendChild(slist);

          var clearnode = document.createElement("div");
          clearnode.style.clear="both";
          outer.appendChild(clearnode);

          for ( var i = 0; i < this.options.length; i++ ) {
              var opt = document.createElement("a");
              opt.href="#";
              opt.title = this.options[i];
              opt.innerHTML = this.options[i];
              opt.index = i;
              opt.style.color="#000000";
              opt.style.display="block";
              opt.style.padding="1px 7px";
              opt.style.textDecoration="none";
              GEvent.addDomListener(opt,'mouseover',function(e) {
                  this.style.backgroundColor="#AAAAAA";
              });
              GEvent.addDomListener(opt,'mouseout',function(e) {
                  this.style.backgroundColor="transparent";
              });
              GEvent.addDomListener(opt,'click',function(e) {
                  toplevel.innerHTML = this.title;
                  me.selection = this.title;
                  slist.style.visibility = "hidden";
                  toplevel.style.WebkitBorderBottomRightRadius = "4px";
                  toplevel.style.WebkitBorderBottomLeftRadius = "4px";
                  toplevel.style.MozBorderRadiusBottomRight = "4px";
                  toplevel.style.MozBorderRadiusBottomLeft = "4px";
                  GEvent.trigger(outer,'change',this.title);
                  e.returnValue=false; 
              });

              slist.appendChild(opt);
          }
          GEvent.addListener(toplevel,'makechange',function(e,title) {
              for ( var i = 0; i < slist.childNodes.length; i++ ) {
                  if ( slist.childNodes[i].innerHTML == title ) {
                      toplevel.innerHTML = title;
                      me.selection = title;
                      slist.style.visibility = "hidden";
                  }
              }
          });

          toplevel.list = slist;
          GEvent.addDomListener(toplevel,'click',function(e) {
              if ( ! this.list.objwidth ) {
                  this.list.objwidth = this.list.offsetWidth;
              }
              this.style.width = (this.list.objwidth+20) + "px";
              this.list.style.width = (this.list.objwidth+20) + "px";
              this.style.WebkitBorderBottomRightRadius = "0px";
              this.style.WebkitBorderBottomLeftRadius = "0px";
              this.style.MozBorderRadiusBottomRight = "0px";
              this.style.MozBorderRadiusBottomLeft = "0px";
              this.list.style.visibility = "visible";
              e.cancelBubble = true;
              e.stopPropagation=true;
          });

          var body = document.getElementsByTagName("body");
          this.clicklistener = GEvent.addDomListener(body[0],'click',function(e) {
              slist.style.visibility = "hidden";     
              e.cancelBubble = true;
              e.stopPropagation=true;
              toplevel.style.WebkitBorderBottomRightRadius = "4px";
              toplevel.style.WebkitBorderBottomLeftRadius = "4px";
              toplevel.style.MozBorderRadiusBottomRight = "4px";
              toplevel.style.MozBorderRadiusBottomLeft = "4px";
          });

          this.outer = outer;
      }
      return this.outer;
  },
});