$('dc-references').setProperty('tabindex', '1');

var reference = new Class({
  Implements: Options,

  options: {
    item: {
      x: 224
    },
    speed: 500,
    current: 0,
    barItems: 4,
    parent: $("dc-references"),
    next: $$("#dc-references .buttons .next")[0],
    previous: $$("#dc-references .buttons .prev")[0],
    bar: $$("#dc-references .card-short-place")[0],
    items: $$("#dc-references .card-short-place .card-short")
  },
    
  initialize: function(options) {   
    this.setOptions(options);
    this.options.parent.addEvent('keydown', this.keyboardDown.bind(this));
    this.options.parent.addEvent('keyup', this.keyboardUp.bind(this));
    this.options.next.addEvent('click', this.next.bind(this));
    this.options.previous.addEvent('click', this.previous.bind(this));
    this.options.animationIsRunning = 0;
  },
  
  keyboardDown: function(event) {
    if (event.key == 'left') {
      this.previous();
      this.options.previous.addClass('p-active');
    }
    else if (event.key == 'right') {
      this.next();
      this.options.next.addClass('n-active');
    }
  },
  
  keyboardUp: function(event) {
    if (event.key == 'left') {
      this.options.previous.removeClass('p-active');
    }
    else if (event.key == 'right') {
      this.options.next.removeClass('n-active');
    }
  },
  
  next: function() {
    if (this.options.animationIsRunning) {
      return;
    }
      
    if (this.options.current > this.options.items.length-this.options.barItems) {
      this.options.next.addClass('n-disabled');
      return;
    }
    this.options.previous.removeClass('p-disabled');
    this.options.next.removeClass('n-disabled');
    
    new Fx.Morph(this.options.bar, {
      duration:   this.options.speed,
      transition: Fx.Transitions.Sine.easeOut,
      onStart: function() {
        this.options.animationIsRunning = 1;
      }.bind(this),
      onComplete: function() {  
        this.options.animationIsRunning = 0;
      }.bind(this)
    }).start({
        'left': [(this.options.item.x*-1)*this.options.current, (this.options.item.x*-1)*(this.options.current+1)]
    });
      
    new Fx.Morph(this.options.items[this.options.current], {
      duration: this.options.speed,
      transition: Fx.Transitions.Sine.easeOut
    }).start({
      'opacity': [1, 0]
    });
    
    this.options.current++;
    
    if (this.options.current > this.options.items.length-this.options.barItems) {
      this.options.next.addClass('n-disabled');
    }
  },
  
  previous: function() {
    if (this.options.animationIsRunning) {
      return;
    }
    
    if (!this.options.current) {
      this.options.previous.addClass('p-disabled');
      return;
    }

    this.options.previous.removeClass('p-disabled');
    this.options.next.removeClass('n-disabled');
    
    new Fx.Morph(this.options.bar, {
      duration:   this.options.speed,
      transition: Fx.Transitions.Sine.easeOut,
      onStart: function() {
        this.options.animationIsRunning = 1;
      }.bind(this),
      onComplete: function() {  
        this.options.animationIsRunning = 0;
      }.bind(this)
    }).start({
        'left': [(this.options.item.x*this.options.current)*-1, (this.options.item.x*this.options.current-this.options.item.x)*-1]
    });
    
    this.options.current--;
      
    new Fx.Morph(this.options.items[this.options.current], {
      duration: this.options.speed,
      transition: Fx.Transitions.Sine.easeOut
    }).start({
      'opacity': [0, 1]
    });
    
    if (!this.options.current) {
      this.options.previous.addClass('p-disabled');
    }
  }
});

new reference;