Effect.Base.addMethods({
  stop: function() {
    this.options.queue.remove(this);
    return this;
  }
});

document.observe('dom:loaded', function() {
  var closedSize = $('square-1').getDimensions().width,
      openedSize = 233,
      options = {
        duration: .45,
        transition: Effect.Transitions.spring,
        after: function(animation) {
          animation.element.animation = null;
        }
      };
  
  function zoomTo(size) {
    return function(e) {
      var square = e.findElement('div.square');
      if (!square) return;
      if (square.animation) {
        square.animation.stop();
        square.animation = null;
      }
      square.animation = square.morph({
        width: size + 'px',
        height: size + 'px'
      }, options);
    };
  }
  
  $('squares').observe('mouseover', zoomTo(openedSize))
              .observe('mouseout',  zoomTo(closedSize));
});