var RichMediaCorse = new Class({

  initialize: function(layerUrl) {
    this.layerUrl = layerUrl;
    this.panel = $('rich-media-corse').getElement('.panel');
    this.head = this.panel.getElement('span.head');
    this.racesNav = this.panel.getElement('.races-nav');

    this.fx = new Fx.Slide(this.racesNav, {
      mode: 'vertical',
      duration: 500,
      onStart: function() {
        if (this.fx.to[0] == 0) this.panel.addClass('expanded');
      }.bind(this),
      onComplete: function() {
        if (this.fx.to[1] == 0) this.panel.removeClass('expanded');
      }.bind(this)
    });
    this.fx.hide();

    this.mouseenterHandler = function() {
      this.fx.cancel();
      this.fx.slideIn();
    }.bind(this);
    this.mouseleaveHandler = function() {
      this.fx.cancel();
      this.fx.slideOut();
    }.bind(this);
    [ this.head, this.panel ].each(function(el) { el.addEvent('mouseenter', this.mouseenterHandler) }, this);
    this.panel.addEvent('mouseleave', this.mouseleaveHandler);

    var races = this.racesNav.getElement('.races');
    var navUp = this.racesNav.getElement('a.nav-up');
    var navDown = this.racesNav.getElement('a.nav-down');

    var i = 0, n = races.getElements('.race').length;

    var updateView = function() {
      races.setStyle('marginTop', '-' + (50 * i) + 'px');
      navUp.setStyle('visibility', i > 0 ? 'visible' : 'hidden');
      navDown.setStyle('visibility', i + 5 < n - 1 ? 'visible' : 'hidden');
    };

    navUp.addEvent('click', function(e) {
      new Event(e).stop();
      i--;
      updateView();
    });
    navDown.addEvent('click', function(e) {
      new Event(e).stop();
      i++;
      updateView();
    });
    updateView();

    this.toggle1 = this.panel.getElement('.toggle1');
    this.toggle2 = this.panel.getElement('.toggle2');

    this.fx1 = new Fx.Slide(this.toggle1, {
      mode: 'horizontal',
      duration: 250
    });
    this.fx2 = new Fx.Slide(this.toggle2, {
      mode: 'horizontal',
      duration: 250
    });

    var infos = races.getElements('a.info');
    infos.each(function(info, index) {
      info.addEvent('click', this.handleRaceClick.bindWithEvent(this, info));
    }, this);
  },

  handleRaceClick: function(e, info) {
    e.stop();
    var spinner = new Spinner().show(info);
    new Request.HTML({
      url: this.layerUrl,
      data: { async: true, uuid: info.name },
      update: this.toggle2,
      onComplete: function() {
        spinner.hide().destroy();
        var close = this.toggle2.getElement('a.close');
        if (close) close.addEvent('click', this.handleCloseLayer.bindWithEvent(this));
        [ 'mouseenter', 'mouseleave' ].each(function(evt) {
          this.panel.removeEvent(evt, this[evt + 'Handler']);
        }, this);
        this.fx1.slideOut().chain(this.openLayer.bind(this));
      }.bind(this)
    }).get();
  },

  openLayer: function() {
    this.toggle1.setStyle('display', 'none');
    this.fx2.hide();
    this.toggle2.setStyle('display', '');
    this.fx2.slideIn();
  },

  handleCloseLayer: function(e) {
    e.stop();
    this.fx2.slideOut().chain(function() {
      this.toggle2.setStyle('display', 'none');
      this.fx1.hide();
      this.toggle1.setStyle('display', '');
      this.fx1.slideIn().chain(function() {
        [ 'mouseenter', 'mouseleave' ].each(function(evt) {
          this.panel.addEvent(evt, this[evt + 'Handler']);
        }, this);
      }.bind(this));
    }.bind(this));
  }

});