var accordian = Class.create();
accordian.prototype = {
 
  animating: false,
  current: null,
  showing: null,

  initialize: function(container,json) {
    this.container = $(container);
    this.data = json;
  },

  create_html: function() {
    this.data.each(function(t){
      var toggle = Builder.node('div',{className:'toggle'},[
        Builder.node('img',{src:t.image}),
        Builder.node('h2',t.label),
        Builder.node('div',{className:'indicator'})
        ]);
      this.container.appendChild(toggle);

      var contents = Builder.node('div',{className:'contents',style:'height:0px'});
      t.products.each(function(p){
        var product = Builder.node('div',{className:'product'},[
          Builder.node('a',{href:p.link,className:'pack'},Builder.node('img',{src:p.image})),
          Builder.node('a',{href:p.link},p.name)
          ]);
        contents.appendChild(product);
      }.bind(this));
      this.container.appendChild(contents);
      
      Event.observe( toggle, 'click', this.activate.bind(this, toggle) );
    }.bind(this));

    var toggles = $$('#' + this.container.id + ' .toggle');
    this.first = toggles[0];
    this.first.addClassName('toggle-top');
    this.last = toggles[toggles.size()-1];
    this.last.addClassName('toggle-bottom');

    var contents = $$('#' + this.container.id + ' .contents');
    contents[contents.size()-1].addClassName('contents-bottom');
  },

  activate: function(accordian) {
    if (this.animating) return false;

    var effects = [];
    this.current = $(accordian.next(0));

    if (this.current != this.showing) {

      var rows = Math.ceil(this.current.childElements().size()/3)

      var options = {
        sync: true,
        scaleFrom: 1,
        scaleContent: false,
        transition: Effect.Transitions.sinoidal,
        scaleX: false,
        scaleY: true,
        scaleMode: { 
          originalHeight: 145*rows
        }
      };

      effects.push( new Effect.Scale( this.current, 100, options ) );
    }

    if (this.showing) {
      options = {
        sync: true,
        scaleContent: false,
        transition: Effect.Transitions.sinoidal,
        scaleX: false,
        scaleY: true
      };
      effects.push( new Effect.Scale( this.showing, 1, options ) );
    }


    new Effect.Parallel( effects, {
      duration:0.35,
      queue: {
        position: 'end',
        scope: 'accordianAnimation'
      },
      beforeStart: function() {
        this.animating = true;
        if (this.showing) this.showing.previous(0).removeClassName('active');
        if (this.current.previous(0)==this.last) this.last.removeClassName('toggle-bottom');
        if (this.current!=this.showing) {
          this.current.previous(0).addClassName('active');
          this.current.show();
        }
      }.bind(this),
      afterFinish: function() {
        if (this.showing) {
          this.showing.hide();
          if (this.showing.previous(0)==this.last) this.last.addClassName('toggle-bottom');
        }
        if (this.current!=this.showing) {
          this.showing = this.current;
        } else {
          this.showing = null;
        }
        this.animating = false;
      }.bind(this)
    });

  }
}

Event.observe(window,'load',function(){
  a = new accordian('accordian',accordian_json);
  a.create_html();
});