/* classes/categories_carousel.js */

 CategoriesCarousel = Class.create();
CategoriesCarousel.prototype = new BaseCarousel();
Object.extend(CategoriesCarousel.prototype, {
  scrollRight: function() {
    this.next();
    this.toggleButtons();
  },
  scrollLeft: function() {
    this.previous();
    this.toggleButtons();
  },
  notify: function(id) {
    this.observer.react(id);
  },
  toggleButtons: function() {
    if (this.dom.li_items.length > 8) {
      this.dom.previous_button.removeClassName('hide');
      this.dom.next_button.removeClassName('hide');
      this.togglePrevious('disabled_previous');
      this.toggleNext('disabled_next');
    } else {
      this.dom.previous_button.addClassName('hide');
      this.dom.next_button.addClassName('hide');
    }
  },
  togglePrevious: function(class_name) {
    if (this.first_current_item == 1) {
      this.dom.previous_button.addClassName(class_name);
    } else {
      this.dom.previous_button.removeClassName(class_name);
    }
  },
  toggleNext: function(class_name) {
    if (this.last_current_item == this.total_items) {
      this.dom.next_button.addClassName(class_name);
    } else {
      this.dom.next_button.removeClassName(class_name);
    }
  },
  react: function(id) {
    category_id = id + "_category";
    this.selectCategory(category_id);
    this.scrollToFocus(category_id);
  },
  outOfFocus: function(index) {
    return (!(index >= this.first_current_item && index <= this.last_current_item));
  },
  scrollToFocus: function(category_id) {
    index = this.index(category_id) + 1;
    if (this.outOfFocus(index)) {
      var previous = this.first_current_item;
      this.setCurrentItems(index);
      var scroll = new Scroll(previous, this.first_current_item, this.last_current_item, this.total_items, this.config, this.dom, this.callbacks);
      scroll.move();
      this.toggleButtons();
    }
  },
  setCurrentItems: function(index) {
    if (index > this.last_current_item) {
      this.last_current_item = index;
      this.first_current_item = this.last_current_item - (this.config.window_size - 1);
    }
    if (index < this.first_current_item) {
      this.first_current_item = index;
      this.last_current_item = this.first_current_item + (this.config.window_size - 1);
    }
  },
  index: function(id) {
    this.dom.li_items.each(function(item, idx) {
      if (item.id == id) {
        index = idx;
        throw $break;
      }
    });
    return index;
  },
  attachListeners: function() {
    if (!this.attached) {
      this.attached = true;
      if (this.dom.next_button) {
        this.dom.next_button.observe('click', function(ev) {
          Event.stop(ev);
          this.scrollRight();
        }.bindAsEventListener(this));
      }
      if (this.dom.previous_button) {
        this.dom.previous_button.observe('click', function(ev) {
          Event.stop(ev);
          this.scrollLeft();
        }.bindAsEventListener(this));
      }
    }
  },
  calculateWidth: function(no_of_items, margin) {
    if(no_of_items < this.config.window_size) {
      no_of_items = this.config.window_size;
    }
    var element = this.dom.li_items[0];
    var element_width = PixelMath.getCompleteElementWidth(element);
    var total_width = element_width * no_of_items;
    return total_width + margin;
  },
  customize: function() {
    this.attachClick();
    // TODO: review the placement of these calls
    this.selectCategory(this.dom.li_items[0].id);
    this.toggleButtons();
  },
  attachClick : function() {
    this.dom.li_items.each(function(li_item) {
      li_item.observe('click', function(ev) {
        Event.stop(ev);
        this.selectCategory(li_item.id);
        this.notify(li_item.id);
      }.bindAsEventListener(this));
    }.bind(this));
  },
  selectCategory : function(category_id) {
    var categories = this.dom.li_items;
    categories.each(function(category) {
      category.removeClassName('active');
      category.down('a').removeClassName(category.down('span').innerHTML + '_tab_active');
      category.down('a').removeClassName('active');
    });
    category_dom = $(category_id);
    category_dom.addClassName('active');
    category_dom.down('a').addClassName('active');
    category_dom.down('a').addClassName(category_dom.down('span').innerHTML + '_tab_active');
  },
  activateSelectedCategory : function(category_id) {
     this.selectCategory(category_id);
     this.scrollToFocus(category_id);
     this.notify(category_id);
  },  
  scrollByURL : function(url) {
    url_parts = url.split('topic=');
    if(url_parts[1] != null){
      value = url_parts[1].split("&");
      category_id = value[0];
      this.activateSelectedCategory(category_id + "_category");
    }
  }
});