var OFAccordion = {
start: function () {
  this.sections = $$('#accordion .section');
  this.fx = new Fx.Elements(this.sections, {
    wait:false,
    duration:500,
    transition:Fx.Transitions.Circ.easeOut
  });
  this.sections.setOpacity(0.5).addClass('hidden');
  this.active = false;
  this.current = 0;
  this.o = {
    phase1:{},
    phase2:{}
  };
  this.display(0);
},
display: function (index){
  this.active = true;
  this.o.phase1 = {};
  this.o.phase2 = {};
  this.hideOuter(index - 2);
  this.hideOuter(index + 2);
  this.hideInner(index - 1);
  this.hideInner(index + 1);
  this.sections[index].removeClass('small')
   .removeClass('hidden')
   .removeEvents('click')
   .setOpacity(1);
  this.o.phase1[index] = {height:260};
  this.fx.start(this.o.phase1).chain(function () {
    this.fx.start(this.o.phase2);
  }.bind(this)).chain(function () {
    this.active = false;
  }.bind(this));
},
displayNext: function () {
  if (this.active == true) return;
  this.display(++this.current);
},
displayPrevious: function () {
  if (this.active == true) return;
  this.display(--this.current);
},
hideOuter: function(index) {
  if (this.sections[index]) {
    this.sections[index].removeClass('small')
     .addClass('hidden')
     .setStyle('visibility', 'hidden')
     .removeEvents('click');
    this.o.phase1[index] = {height:0};
  }
},
hideInner: function(index) {
  if (this.sections[index]) {
    this.o.phase1[index] = {height:75};
    this.o.phase2[index] = {opacity:0.5};
    this.sections[index].removeClass('hidden')
     .addClass('small')
     .setStyle('visibility', 'visible');
    if (index < this.current) {
      this.sections[index].addEvent('click', this.displayPrevious.bind(this));
    } else {
      this.sections[index].addEvent('click', this.displayNext.bind(this));
    }
  }
}
};
window.addEvent('domready', function(){
  OFAccordion.start();
});