Effect.BiFirstStage = Class.create(Effect.Base, {
  initialize: function(element) {
    this.element = $(element);
    
    this.frame1 = $(this.element.getElementsByClassName('f0')[0]);
    this.frame1.setOpacity(0);
    this.frame1.show();
    
    if (!this.element) throw(Effect._elementDoesNotExistError);
    var options = Object.extend({
      curve:    new BezierCurve(-130,90,-90,180,-30,280,20,320)
    }, arguments[1] || { });
    this.start(options);
  },
  setup: function() {
    this.element.makePositioned();
    this.element.setStyle({
    	left: '-130px',
    	top: '90px'
    });
  },
  update: function(position) {
    this.element.setStyle({
      left: this.options.curve.x(1-position).round() + 'px',
      top:  this.options.curve.y(1-position).round() + 'px'
    });
    this.frame1.setStyle({opacity:position});
  }
});

Effect.BiSecondStage = Class.create(Effect.Base, {
  initialize: function(element) {
    this.element = $(element);
    
    this.frame1 = $(this.element.getElementsByClassName('f0')[0]);
    this.image1 = $(this.frame1.getElementsByTagName('IMG')[0]);
    this.arrow1 = $(this.frame1.getElementsByTagName('IMG')[1]);
    this.frame1.show();
    
    this.frame2 = $(this.element.getElementsByClassName('f1')[0]);
    this.image2 = $(this.frame2.getElementsByTagName('IMG')[0]);
    this.arrow2 = $(this.frame2.getElementsByTagName('IMG')[1]);
    this.frame2.show();
                  
    if (!this.element) throw(Effect._elementDoesNotExistError);
    var options = Object.extend({
      curve:    new BezierCurve(20,320,100,400,235,470,374,480)
    }, arguments[1] || { });
    this.start(options);
  },
  setup: function() {
    this.element.makePositioned();
    this.element.setStyle({
    	left: '20px',
    	top: '320px'
    });
  },
  update: function(position) {
    this.element.setStyle({
      left: this.options.curve.x(1-position).round() + 'px',
      top:  this.options.curve.y(1-position).round() + 'px'
    });
    
    var k1 = (257-(257-136)*position)/257;
    this.frame1.setOpacity(1-position);
    this.image1.setStyle({
    	height: (257*k1).round()+'px',
    	width: (229*k1).round()+'px'
    });
    this.arrow1.setStyle({
    	left: (231*k1).round()+'px',
    	top: (105*k1).round()+'px',
    	height: (75*k1).round()+'px',
    	width: (75*k1).round()+'px'
    });
    if ( position==1 )
    	this.frame1.style.display = 'none';
        
		var k2 = (257-(257-136)*position)/136;
		this.frame2.setOpacity(position);
    this.image2.setStyle({
    	height: (136*k2).round()+'px',
    	width: (138*k2).round()+'px'
    });
    this.arrow2.setStyle({
    	left: (114*k2).round()+'px',
    	top: (61*k2).round()+'px',
    	height: (37*k2).round()+'px',
    	width: (37*k2).round()+'px'
    });
  }
});

Effect.BiThirdStage = Class.create(Effect.Base, {
  initialize: function(element) {
    this.element = $(element);
    
    this.frame1 = $(this.element.getElementsByClassName('f1')[0]);
    this.image1 = $(this.frame1.getElementsByTagName('IMG')[0]);
    this.arrow1 = $(this.frame1.getElementsByTagName('IMG')[1]);
    this.frame1.show();
    
    this.frame2 = $(this.element.getElementsByClassName('f2')[0]);
    this.image2 = $(this.frame2.getElementsByTagName('IMG')[0]);
    this.arrow2 = $(this.frame2.getElementsByTagName('IMG')[1]);
    this.frame2.show();
    
    if (!this.element) throw(Effect._elementDoesNotExistError);
    var options = Object.extend({
      curve:    new BezierCurve(374,480,465,470,515,425,532,420)
    }, arguments[1] || { });
    this.start(options);
  },
  setup: function() {
    this.element.makePositioned();
    this.element.setStyle({
    	left: '370px',
    	top: '470px'
    });
  },
  update: function(position) {
    this.element.setStyle({
      left: this.options.curve.x(1-position).round() + 'px',
      top:  this.options.curve.y(1-position).round() + 'px'
    });
        
    var k1 = (136-(136-38)*position)/136;
    this.frame1.setOpacity(1-position);
    this.image1.setStyle({
    	height: (136*k1).round()+'px',
    	width: (138*k1).round()+'px'
    });
    this.arrow1.setStyle({
    	left: (114*k1).round()+'px',
    	top: (61*k1).round()+'px',
    	height: (37*k1).round()+'px',
    	width: (37*k1).round()+'px'
    });
    if ( position==1 )
    	this.frame1.style.display = 'none';
        
		this.frame2.setOpacity(position*position);
  }
});

Effect.BiLastStage = Class.create(Effect.Base, {
  initialize: function(element) {
    this.element = $(element);
    
    this.frame1 = $(this.element.getElementsByClassName('f2')[0]);
    this.image1 = $(this.frame1.getElementsByTagName('IMG')[0]);
    this.arrow1 = $(this.frame1.getElementsByTagName('IMG')[1]);
    
    if (!this.element) throw(Effect._elementDoesNotExistError);
    var options = Object.extend({
      curve:    new BezierCurve(532,420,545,400,510,380,510,400)
    }, arguments[1] || { });
    this.start(options);
  },
  setup: function() {
    this.element.makePositioned();
    this.element.setStyle({
    	left: '530px',
    	top: '400px'
    });
  },
  update: function(position) {
    this.element.setStyle({
      left: this.options.curve.x(1-position).round() + 'px',
      top:  this.options.curve.y(1-position).round() + 'px'
    });
    
    var k1 = 1-position
    this.frame1.setOpacity(1-position);
    this.image1.setStyle({
    	height: (38*k1).round()+'px',
    	width: (127*k1).round()+'px'
    });
    this.arrow1.setStyle({
    	left: (120*k1).round()+'px',
    	top: (15*k1).round()+'px',
    	height: (7*k1).round()+'px',
    	width: (7*k1).round()+'px'
    });
    this.frame1.setOpacity(1-position);
  }
});