var Panel = Class.create({
  initialize: function(data) {
    this.animating = false;
    this.expanded = false;

    this.expanded_width = 430;
    this.contracted_width = 220;
    this.expand_time = 0.6;
    this.contract_time = 0.6;

    this.name = data.name;
    this.name_en = data.name_en;
    this.img_id= data.img_id;
    this.img_src = '/engine/picture.php?id='+this.img_id+'&w=230&h=230&g=1';

    this.desc = data.desc;
    this.profile_link = data.profile_link;

    this.holder = new Element('div', {'class': 'panel'});
    this.panelbg = new Element('img', {'class': 'panelbg png', src: '/topanim/pane.png'});
    this.pickup_hd = new Element('div', {'class': 'pickup'});
    this.name = new Element('div', {'class': 'name'}).update(this.name);
    this.name_en = new Element('div', {'class': 'name_en'}).update(this.name_en);
    this.profile_but = new Element('a', {'class': 'profile', href: this.profile_link}).update('Profile');
    this.img = new Element('img', {'class': 'img', src: this.img_src});
    this.infobar = new Element('div', {'class': 'infobar png'}).update(this.desc);

    this.holder.appendChild(this.panelbg);
    this.holder.appendChild(this.pickup_hd);
    this.holder.appendChild(this.name);
    this.holder.appendChild(this.name_en);
    this.holder.appendChild(this.profile_but);
    this.holder.appendChild(this.img);
    this.holder.appendChild(this.infobar);
  },

  expand: function(quick) {
    if (this.animating) return false;
    this.animating = true;
    this.expanded = true;

    var maintime = this.expand_time;
    var delaytime = this.expand_time;
    var infobartime = 0.5;

    if (quick==true) {
      maintime = 0;
      delaytime = 0;
      infobartime = 0;
    }

    this.panelbg.morph("width:"+(this.expanded_width)+"px;height:250px;left:0px", {duration: maintime});
    this.holder.morph("width:"+this.expanded_width+"px;height:250px", {duration: maintime});
    this.img.morph("width:228px;height:228px;left:11px;top:11px", {duration: maintime});
    if (!Prototype.Browser.IE) {
      new Effect.Opacity(this.infobar, {from: 0, to: 1, duration: infobartime, delay: delaytime});
    }
    this.showbar.bind(this).delay(infobartime);
    this.infobar.morph("height:40px", {duration: infobartime, delay: delaytime, afterFinish: this.mark_animation_complete.bind(this)});
  },

  showbar: function() {
    this.infobar.show();
  },

  contract: function(quick) {
    if (this.animating) return false;
    this.animating = true;
    this.expanded = false;

    var maintime = this.contract_time;
    var delaytime = 0.3;
    var infobartime = 0.3;

    if (quick==true) {
      maintime = 0;
      delaytime = 0;
      infobartime = 0;
    }

    this.panelbg.morph("width:"+(this.contracted_width-8)+"px;height:"+(this.contracted_width)+"px;left:4px", {duration: maintime, delay: delaytime});
    this.holder.morph("width:"+this.contracted_width+"px;height:"+this.contracted_width+"px", {duration: maintime, delay: delaytime});
    this.img.morph("width:200px;height:200px;left:10px;top:10px", {duration: maintime, delay:delaytime});
    if (!Prototype.Browser.IE) {
      new Effect.Opacity(this.infobar, {from: 1, to: 0, duration: infobartime});
    }
    this.infobar.morph("height:0px", {duration: infobartime, afterFinish: this.contract_complete.bind(this)});
  },

  contract_complete: function() {
    this.infobar.hide();
    this.animating = false;
  },

  mark_animation_complete: function() {
    this.animating = false;
    //this.finalize_anim.bind(this).delay(2);
  },

  finalize_anim: function() {
    this.animating = false;
  }

});