var tabs = new Class({
  Implements: [Events, Options],  
    options: {
      containerHeight: 320,
      containerWidth: 320
    },
    initialize: function(container){
      var params = Array.link(arguments, {'options': Object.type, 'element': $defined});
      this.setOptions(params.options || { });
      this.container = $(container);
      this.items = this.container.getChildren();
      this.tabs = this.items[0].getChildren();
      this.navBar = this.items[1];
      this.content = this.items[2];
      
      this.initTabs();
    },
    initTabs: function(){
      this.content.getChildren()[0].getChildren().setStyle('left', 0);
      this.tabs.each(function(item, index){
        item.addEvent('click', function(e){
          if(!item.hasClass("selected")){
            this.content.getChildren()[0].getChildren().tween('left', -index*this.options.containerWidth);
            this.initFilters(index,0);
            this.tabs.each(function(item){
              if(item.hasClass('selected')){
                item.toggleClass('selected');
                item.getChildren()[0].toggleClass('r2d2');
              }
            });
            item.toggleClass('selected');
            item.getChildren()[0].toggleClass('r2d2');
          }
          e.stop()
        }.bind(this));
      },this);
      this.initFilters(0,0);
    },
    initBlock: function(id,pos){
      var buttons = new Array();
      this.content.getChildren()[0].getChildren()[id].getChildren().each(function(item){
        item.setStyle('display', 'none');
        //item.slide('hide');
        buttons.push(item);
      });
      this.content.getChildren()[0].getChildren()[id].getChildren()[pos].setStyle('display', 'block');
      this.content.getChildren()[0].getChildren()[id].getChildren()[pos].setStyle('overflow', 'hidden');
      this.content.setStyle('height', this.content.getChildren()[0].getChildren()[id].getChildren()[pos].getScrollSize().y+25);
      //this.content.getChildren()[0].getChildren()[id].getChildren()[pos].slide('in');
      return buttons;
    },
    initFilters: function(id,pos){
      var buttons =  this.initBlock(id,pos);
      this.navBar.empty();
      buttons.each(function(item, index){
        var anchor = new Element('a', {'text': item.getChildren('span').get('text')});
        var elem = new Element('li', {'class': 'color'});
        anchor.inject(elem);
        elem.inject(this.navBar);
      }.bind(this));
      this.navBar.getFirst().toggleClass('color');
      this.navBar.getLast().addClass('last');
      this.initFilterButtons(id);
    },
    initFilterButtons: function(id){
      this.navBar.getChildren().each(function(items,index){
        items.addEvent('click', function(e){
          if(items.hasClass('color')){
            this.initBlock(id, index);
            this.addColor();
            items.toggleClass('color');
          };
          e.stop();
        }.bind(this));
      }.bind(this));
    },
    addColor: function(){
      this.navBar.getChildren().each(function(item){
        item.addClass('color');
      });
    }
});