var DDrop = Class.create({

  initialize: function(ddrop) {
    ddrop = $(ddrop);

    this.ctl = ddrop.select('.ddrop-ctl').first();
    this.ctl.observe('mousedown', this.toggleList.bindAsEventListener(this));
    this.lbl = ddrop.select('.ddrop-select-value').first();
    this.dft = this.lbl.innerHTML;
    this.box = ddrop.select('.ddrop-box').first();
    this.box.observe('mousedown', function(event) {
      Event.stop(event);
    });
    this.onBlurHandler = function(event) {
      if (event.element() != this.ctl
          && event.element().up('div.ddrop-ctl') != this.ctl) {
        this.hideList(event);
      }
    }.bindAsEventListener(this);

//    this.listOptions = this.box.select('input[type="checkbox"]');
    this.listOptions = this.box.select('input');
    this.listOptions.each(function(option) {
      option.observe('change', this.onChange.bindAsEventListener(this));
    }.bind(this));

    this.refreshValue();
  },

  serialize: function() {
    var data = [];
    this.listOptions.each(function(option){
      if (option.checked == true) {
        data.push(option.value);
      }
    });

    return data.join(',');
  },

  refreshValue: function() {
    var labels = [];
    this.listOptions.each(function(option) {
      if (option.checked == true) {
        labels.push(getElementText(option.parentNode));
      }
    });
    if (labels.length > 0) {
      this.lbl.innerHTML = labels.join(', ');
      this.lbl.style.textAlign = 'left'
    } else {
      this.lbl.innerHTML = this.dft;
      this.lbl.style.textAlign = 'center'
    }
  },

  showList: function (event) {
    document.observe('mousedown', this.onBlurHandler);
    this.box.show();
  },

  hideList: function (event) {
    document.stopObserving('mousedown', this.onBlurHandler);
    this.box.hide();
    Event.stop(event);
  },

  toggleList: function(event) {
    Element.visible(this.box) ? this.hideList(event) : this.showList(event);
  },

  checkAll: function(event) {
    this.listOptions.each(function(option) {
      option.checked = true;
    });
    this.refreshValue();
    //Event.stop(event);
  },

  uncheckAll: function(event) {
    this.listOptions.each(function(option) {
      option.checked = false;
    });
    this.refreshValue();
    //Event.stop(event);
  },

  onChange: function(event) {
    var checkBox = event.element();
//    checkBox.up('li').select('input[type="checkbox"]').without(checkBox).each(function(option) {
    checkBox.up('li').select('input').without(checkBox).each(function(option) {
      option.checked = checkBox.checked;
    });

    var parentOption = checkBox.up('ul').up('li');
    if(parentOption && parentOption.select('input[type="checkbox"]').length ) {
      if(checkBox.up('ul').select('input[type="checkbox"]:not(:checked)').length > 0) {
//        parentOption.down('input[type="checkbox"]').checked = false;
        parentOption.down('input').checked = false;
      } else {
//        parentOption.down('input[type="checkbox"]').checked = true;
        parentOption.down('input').checked = true;
      }
    }

    this.refreshValue();
  }
});


function getElementText(element) {
  var text = '';
  //element.cleanWhitespace();
  $A(element.childNodes).each(function(childNode) {
    if(childNode.nodeType == Node.TEXT_NODE) {
      text += childNode.nodeValue.strip();
    }
  });

  return text;
}