var Panels = {
  inmotion: false,
  
  initialize: function(){
    if (!document.getElementById) return;
    this.panels  = $A($('main').getElementsByClassName('panel'));
    this.buttons = $A($('main').getElementsByClassName('panel-button'));
    this.buttons.each(function(e){
      e.onclick     = function(){ Panels.toggle(this.parentNode.parentNode); return false };
      e.onmouseover = function(){ Panels.highlight(this) };
      e.onmouseout  = function(){ Panels.dehighlight(this) };
    });
    //this.animate();
  },
  toggle: function(element){
    if (this.inmotion == true) return;
    var current = this.getCurrent();
    this[(current == element) ? 'reset':'enter'](element);
  },
  highlight: function(element){
    element.parentNode.addClassName('hover');
  },
  dehighlight: function(element) {
    element.parentNode.removeClassName('hover');
  },
  animate: function() {
    this.panels.each(function(e, i){
      Effect.Appear(e, {queue:'end', scope:'intro'})
    });
    /*
    this.buttons.each(function(e, i){
      setTimeout(function(){ Panels.highlight(e) }, 100*(i+1));
      setTimeout(function(){ Panels.dehighlight(e) }, 200*(i+1));
    });
    */
  },
  reset: function(element){
    var position = element.previousSiblings().length*87;
    element.hide();
    element.style.top  = '0px';
    element.style.left = position+'px';
    Panels.close(element);
  },
  enter: function(element){
    if (this.moving || !element) return;
    
    Panels.inmotion = true;
    
    var position = element.previousSiblings().length;
    var current  = this.getCurrent();
    
    if (current) this.reset(current);
    
    $('main').addClassName(element.hasClassName('photo')? 'active for-photo':'active');
    
    new Effect.MoveBy(element, 100, 0,
      { duration: 0.5,
        queue: 'front',
        scope: 'panel' });
    new Effect.MoveBy(element, 0, position*-87,
      { duration: position>0 ? 0.5 : 0,
        queue: 'end',
        scope: 'panel',
        afterFinish: function(obj){ Panels.open(obj.element) }});
  },
  open: function(element){
    element.addClassName('open');
    Panels.dehighlight(element.getElementsByClassName('panel-button')[0]);
    Panels.inmotion = false;
  },
  close: function(element){
    element.removeClassName('open');
    this.dehighlight(element.getElementsByClassName('panel-button')[0]);
    $('main').removeClassName('active');
    $('main').removeClassName('for-photo');
    new Effect.Appear(element, { duration: 0.2 });
  },
  getCurrent: function(){
    return this.panels.find(function(e){ return e.hasClassName('open') });
  }
}