var crgScroller = new Class({
  Implements: [Options],
  options: {
    container_id: 'carousel',
    content_classname: '.scrollable_content',
    invoker_up_classname: '.scroll_prev_cmd',
    invoker_down_classname: '.scroll_next_cmd',
    item_classname: '.item',
    item_on_classname: 'on',
    nb_visible_elements: 8,
    step_unit: 2
  },

  initialize: function(options){
    this.setOptions(options);

    this.container = $(this.options.container_id);

    if (this.container) {
      if (this.content = this.container.getElement(this.options.content_classname)) {
        this.scroller = new Fx.Scroll(this.content, { duration: 500 });
        this.items = this.content.getElements(this.options.item_classname);
        if (selected_item = this.content.getElement('.'+this.options.item_on_classname)) {
          this.moveTo(selected_item);
        }
      } 

      if (this.container && this.content && this.scroller) {
        this.container.getElements(this.options.invoker_up_classname).each(function(item) {
          item.addEvent('click', this.moveUp.bindWithEvent(this));
        }, this);

        this.container.getElements(this.options.invoker_down_classname).each(function(item) {
          item.addEvent('click', this.moveDown.bindWithEvent(this));
        }, this);
      }
    }
  },

  moveUp: function(event) {
    event = new Event(event).stop();

    step = this.current_index.limit(0, this.options.step_unit);
    this.current_index -= step;
    this.scroller.toElement(this.items[this.current_index]);
    this.updateInvokerState();
  },

  moveDown: function(event) {
    event = new Event(event).stop();
    remain = this.items.length - this.options.nb_visible_elements - this.current_index;

    step = remain.limit(0, this.options.step_unit);

    this.current_index += step;
    this.scroller.toElement(this.items[this.current_index]);
    this.updateInvokerState();
  },

  moveTo: function(item) {
    
    this.scroller.toElement(item);

    idx = this.items.indexOf(item).limit(0, this.items.length - this.options.nb_visible_elements);
    this.current_index = idx;

    this.updateInvokerState();
  },

  buildItemCssId: function(itemId) { return itemId; }, //abstract
  getItemId: function() { return '-1'; }, //abstract

  selectItemFromId: function(itemId, hasToMove) {
    if (itemToSelect = this.container.getElementById(this.buildItemCssId(itemId))) {
      this.selectItem(itemToSelect, hasToMove);
    }
  },

  selectItem: function(itemToSelect, hasToMove) {
    if (itemToSelect) {
      this.container.getElements('.'+this.options.item_on_classname).each(function(item) {
        item.removeClass(this.options.item_on_classname);
      }.bind(this));
      itemToSelect.addClass(this.options.item_on_classname);
      if (hasToMove) this.moveTo(itemToSelect);
    }
  },

  enableUp: function() {
    this.container.getElements(this.options.invoker_up_classname).each(function(item) {
      item.removeClass('disabled');
    }, this);
  },

  disableUp: function() {
    this.container.getElements(this.options.invoker_up_classname).each(function(item) {
      item.addClass('disabled');
    }, this);
  },

  enableDown: function() {
    this.container.getElements(this.options.invoker_down_classname).each(function(item) {
      item.removeClass('disabled');
    }, this);
  },

  disableDown: function() {
    this.container.getElements(this.options.invoker_down_classname).each(function(item) {
      item.addClass('disabled');
    }, this);
  },

  updateInvokerState: function() {
    if (this.current_index > 0 && this.items.length > this.options.nb_visible_elements) { 
      this.enableUp(); 
    } else { 
      this.disableUp(); 
    }

    if (this.current_index < (this.items.length - this.options.nb_visible_elements)) { 
      this.enableDown(); 
    } else {
      this.disableDown();
    }
  },

  listener: null,
  container: null,
  content: null,
  scroller: null,
  items: [],
  current_index: 0
});

var ListScroller = new Class({
  Extends: crgScroller,

  initialize: function() {  
    this.parent();
    this.items.each(function(item) {
      item.getElement('a').addEvent('click', this.selectFile.bindWithEvent(this, item));
    }.bind(this));
  },

  selectFile: function(event, item) {
    event = new Event(event).stop();
    if (this.filescroller) {
      this.filescroller.selectItemFromId(this.getItemId(item), true);
      this.selectItem(item, false);
    }
  },

  getCurrentItemId: function() {
    this.getItemId(this.items[this.current_index]);
  },

  getItemId: function(item) {
    var reg = /item-([a-z0-9\-]+)/;
    if (matches = item.id.match(reg)) {
      return matches[1];
    }
  },

  buildItemCssId: function(itemId) {
    return 'item-' + itemId;
  },

  filescroller: null
});

var CrgFileScroller = new Class({
  Extends: crgScroller,

  moveDown: function(event) {
    this.parent(event);
    this.updateListScroller();
  },

  moveUp: function(event) {
    this.parent(event);
    this.updateListScroller();
  },

  updateListScroller: function() {
    if (this.listscroller) {
      this.listscroller.selectItemFromId(this.getItemId(this.items[this.current_index]), true);
    }
  },

  getItemId: function(item) {
    var reg = /file-([a-z0-9\-]+)/;
    if (matches = item.id.match(reg)) {
      return matches[1];
    }
  },

  buildItemCssId: function(itemId) {
    return 'file-' + itemId;
  },

  listscroller:null
});

var PilotFileScroller = new Class({
  Extends: CrgFileScroller,

  moveDown: function(event) {
    this.parent(event);
    if(event.target && event.target.href) this.resetPanels(event.target.href);
  },

  moveUp: function(event) {
    this.parent(event);
    if(event.target && event.target.href) this.resetPanels(event.target.href);
  },

  moveTo: function(item) {
    this.parent(item);
  },

  resetPanels: function(url) {
    new Request.HTML({
    url: url,
    method: 'get',
    update: 'panel_container',
    evalScripts: true
    }).send();
  }
});

var PilotListScroller = new Class({
  Extends: ListScroller,

  selectFile: function(event, item) {
    this.parent(event, item);
    if(event.target && event.target.href) this.resetPanels(event.target.href);
  },

  resetPanels: function(url) {
    new Request.HTML({
    url: url,
    method: 'get',
    update: 'panel_container',
    evalScripts: true
    }).send();
  }
});


var crgSelectButton = new Class({
  Implements: [Options],
  options: { 
  },

  initialize: function(element, options) {
    this.list = element.getElement('.submenu');
    this.slideFx = new Fx.Slide(this.list);
    element.addEvent('click',  function(event){
      event = new Event(event).stop();
      this.slideFx.toggle();
    }.bindWithEvent(this));

  },

  slideFx: null,
  list: null
});

String.implement({
  truncate: function(length, truncation) {
    length = length || 30;
    truncation = truncation === undefined ? '...' : truncation;
    return this.length > length ?
    this.slice(0, length - truncation.length) + truncation : this;
  }
});
/*
var PilotPanelsSlide = new Class({
  Implements: [Fx, Chain, Options],
  options: { create_accordion: false },

  initialize: function(options) {
    this.setOptions(options);
  },

  toto: function() {
      console.log('create accordion');
      this.chain(function() {
        if (this.options.create_accordion) {
          console.log('create accordion');
          photoAcc = new Accordion( $('accordion') , 'div.toggle', 'div.g-element', { });
        }
      }).chain(function() {
        console.log('slide panel');
        elm = $('panel_content');
        elm.store('wrapper', $('my_wrapper'));
        fx = new Fx.Slide('panel_content', { duration: 1000 });
        fx.slideIn();
      });
      this.callChain();
  }

});

var pilotPanelsSlide;
*/


function update_panel(panel, url) {
  anchors = $('pilot-tabs').getElements('a');
  new Request.HTML({
  url: url,
  method: 'get',
  update: 'panel_container',
  evalScripts: true,
  onRequest: function() {
    //cursor
    document.body.style.cursor = 'wait';
    anchors.setStyles({cursor: 'wait'});

    // panel
    panelElt = $('panel_content');
    wrapper = $('my_wrapper');
    my_chain = new Chain();
    if ( panelElt && wrapper) {
      panelElt.store('wrapper', wrapper);// for slide effect
      fx = new Fx.Slide(panelElt, { duration: 1000 });
      my_chain.chain( function() { fx.slideOut(); });
    }
    my_chain.chain( function() {
      if (current_panel = $('pilot-tabs').getElement('li.on')) current_panel.removeClass('on');
      $('tab_' + panel).addClass('on');
    });

    my_chain.callChain();
  },
  onComplete: function(){ 
    document.body.style.cursor = '';
    anchors.setStyles({cursor: ''});
  }
}).send();
}