var PageCurl = Class.create({
  initialize: function(curl, side) {
    this.curl = $(curl);
    this.image = this.curl.down('img');
    this.image.hide();
    this.image.setStyle({width: '0px', height: '0px'})
    this.page = $('page');
    this.side = side;
    this.page.observe('mousemove', this.mousemove.bind(this));
    this.page.observe('mouseout', this.hide.bind(this));
  },
  mousemove: function(event) {
    if (this.side == 'left') {
      if (event.pointerX() - this.page.cumulativeOffset()[0] < 100)
        this.show();
      else
        this.hide();
    } else if (this.side == 'right') {
      if (event.pointerX() - this.page.cumulativeOffset()[0] - this.page.getWidth() > -100)
        this.show();
      else
        this.hide();
    }
  },
  show: function() {
    if (this.showing) return;
    this.showing = true;
    if (this.hideEffect) {
      this.hideEffect.clearTimer();
      this.hideEffect = null;
    }
    this.showEffect = new Fx.Styles(this.image, {
      duration: 250,
      onStart: function() {this.image.show()}.bind(this),
      onComplete: function() {
        this.showEffect = null;
      }.bind(this)
    });
    this.showEffect.custom({height: [this.image.getHeight(), 36], width: [this.image.getWidth(), 36]})
  },
  hide: function() {
    if (!this.showing) return
    this.showing = false;
    if (this.showEffect) {
      this.showEffect.clearTimer();
      this.showEffect = null;
    }
    this.hideEffect = new Fx.Styles(this.image, {
      duration: 250,
      onComplete: function() {
        this.image.hide();
        this.hideEffect = null;
      }.bind(this)
    });
    this.hideEffect.custom({height: [this.image.getHeight(), 0], width: [this.image.getWidth(), 0]})
  }
})