var _select_counter = 0;

var Select = $.klass({
  
  initialize: function(select, options)
    {
    this.select = $(select);
    this.options = $.extend({
      className:  "select_box",
      buttonClass: "select_field",
      base_id: "select_box_",
      speed: 200,
      max_height: 280
      }, options);
    
    if(this.select.length == 0) return false;
    
    this.opened = false;
    this.id = this.options.base_id + _select_counter;
    
    this.select.parent().append('<div id="'+ this.id +'" class="'+ this.options.className +'"><div class="container"><ul></ul></div></div>');
    this.container = $("#"+ this.id);
    var container = this.container;
    
    this.position = this.select.position();
    this.initial = this.select.position().top + 10;
    // bug on position
    this.container.css({ top: this.position.top + 10, left: this.position.left - 8 });
    
    var className = ' class="bottom"';
    this.select.find("option").each(function(){
      var text = $(this).get(0).innerHTML;
      if(text == "-")
        {
        container.find("ul").append('<li class="separator"></li>');
        if(className == ' class="bottom"') className = ' class="top"';
        else className = ' class="bottom"';
        }
      else container.find("ul").append('<li '+className+'><a href="'+ $(this).attr("value") +'">'+ text +'</a></li>');
      });
    
    var max_width = 0;
    this.container.find("li").each(function(){
      if(parseInt($(this).width()) > max_width) max_width = parseInt($(this).width());
      });
    this.container.find("div.container").css({ width: max_width + 6 + "px" });
    
    this.height = this.container.height();
    this.animate_height = this.height;
    if(this.height > this.options.max_height)
      {
      this.animate_height = this.options.max_height;
      this.container.find("div.container").css({ height: this.animate_height + "px" }).jScrollPane({ scrollbarWidth: 15, dragMinHeight: 38, dragMaxHeight: 38 });
      }
    this.container.css({ top: this.initial + "px" }).hide();
    
    this.initial_value = this.select.val();
    this.initial_text = (this.select.find("option[value="+this.select.val()+"]").length > 0)? this.select.find("option[value="+this.select.val()+"]").html() : this.select.find("option").first().html();
    this.select.after('<a href="#" rel="'+ this.id +'" class="select_field">'+ this.initial_text +'</a>');
    this.select.after('<input type="hidden" name="'+ this.select.attr("name") +'" style="display:none;" class="select '+ this.id +'" value="'+ this.initial_value +'" />');
    this.select.remove();
    
    this.button = $("a.select_field[rel="+this.id+"]");
    
    this.button.bind("click", this, function(e){
      e.data.open.apply(e.data, [e]);
      });
    this.button.bind("focus", this, function(e){
      e.data.open.apply(e.data, [e]);
      });
  
    this.button.bind("blur", this, function(e){
      //e.data.close.apply(e.data, [e]); # take car this one is fired on firefox and makes the select fail
      });
    
    this.input = $("input.select."+ this.id+"[type=hidden]");
    
    this.container.find("a").bind("click", this, function(e){
      e.data.change_value.apply(e.data, [e]);
      });
    
    this.container.click(function(e){ e.stopPropagation(); });
    $("body").bind("click", this, function(e){
      if(e.data.opened == true) e.data.close.apply(e.data, [e]);
      });
    
    _select_counter++;
    },
  
  open: function(e)
    {
    e.preventDefault();
    e.stopPropagation();
    
    this.container.css({ height:0 }).show().animate({
      top: this.initial - (this.animate_height / 2),
      height: this.animate_height
      }, this.options.speed);
    
    this.opened = true;
    },
  
  close: function(e)
    {
    try{ e.preventDefault(); e.stopPropagation(); } catch(e){};
    
    var obj = this;
    this.container.animate({
      top: this.initial,
      height: 0
      }, this.options.speed, function(){ obj.container.hide(); });
    
    this.opened = false;
    },
  
  change_value: function(e)
    {
    e.preventDefault();
    e.stopPropagation();
    
    this.input.val($(e.target).attr("href"));
    this.button.text($(e.target).text());
    
    this.close();
    
    (this.options.onChange || function(){}).apply(this, [e]);
    },
  
  reset: function()
    {
    if(this.input)
      {
      this.input.val(this.initial_value);
      this.button.html(this.initial_text);
      }
    }
  
  });