var NB = NB || {};
NB.HRS = NB.HRS || {};
NB.HRS.Filter = NB.HRS.Filter || {};
NB.HRS.Filter.DropDown = NB.HRS.Filter.DropDown || {};

YUI().use('*', function(Y) {
	NB.HRS.Filter.DropDown = function(options) {
		this.id               = options.elementId;
		this.name             = options.elementName;
		this.options          = options.filterOptions;
		this.parent           = options.parentNode;
		this.elementToUpdate  = options.elementToUpdate;
		this.renderFilterMenu();
	}

	NB.HRS.Filter.DropDown.prototype = {
		renderFilterMenu: function(){
			this.dropDownElement = Y.DOM.create('<select name="' + this.name + '_category" id="' + this.id + '-category"></select>');
    	var option = Y.DOM.create('<option value="" selected="selected">Wonach möchten Sie filtern?</option>');
				
				this.dropDownElement.appendChild(option);
     
      for(optionKey in this.options)
	  {
			  option = Y.DOM.create('<option value="' + optionKey + '">' + this.options[optionKey].label + '</option>');
			this.dropDownElement.appendChild(option);
      }
   
      this.dropDownNode = Y.one(this.parent).appendChild(this.dropDownElement);
      this.dropDownNode.set("selectedIndex",0);
      this.dropDownNode.on('change',function(e)
      {
        Y.each(Y.all(".dropdown-filters"),function(v){
          v.remove();
        });
        this.secondaryDropDownElement = Y.DOM.create('<select name="' + this.name + '_filter" id="' + this.id + '-filter" class="dropdown-filters"></select>');
        if(this.options[e.target.get('value')])
        {
          var filters = this.options[e.target.get('value')]["filters"];
    			option = Y.DOM.create('<option value="">Bitte wählen</option>');
				this.secondaryDropDownElement.appendChild(option);
          //this.secondaryDropDownElement.options[this.secondaryDropDownElement.length] = option;
          Y.each(filters,function(v){
    			  option = Y.DOM.create('<option value="' + v + '">' + v + '</option>');
				  this.secondaryDropDownElement.appendChild(option);
            //this.secondaryDropDownElement.options[this.secondaryDropDownElement.length] = option;
          },this)
        
          this.secondaryDropDownNode = Y.one(this.parent).appendChild(this.secondaryDropDownElement);    
          this.secondaryDropDownNode.set("selectedIndex",0);     
          this.secondaryDropDownNode.on("change",function(v){
              this.filterData(this.dropDownNode.get("value"),this.secondaryDropDownNode.get("value"));
          },this);
        }
      },this);
                  
		},
		filterData: function(category,filter,orderby,direction){
		  var additional = "";
      if(orderby && direction)
		  {
        additional = '&orderby= ' + orderby + '&' + direction;
      }
    
      var uri = '?ajax=1&category=' + category + '&filter=' + filter + additional;

      function complete(id, o, args) {
          Y.get(this.elementToUpdate).set("innerHTML",o.responseText);
      };

      Y.on('io:complete', complete, this, ['lorem', 'ipsum']);
   
      var request = Y.io(uri);
    }
	};
})
