var newHeight;

function loadContent(height, page) {
	var background = $('opaque-background');
	var content = $('content');
	newHeight = height;
	
	if(content.visible()) {
		content.hide();
		new Effect.BlindUp(background, { duration: 0.5, queue: 'end' });
	}
	
	var myAjax = new Ajax.Updater( content, 'fragments/' + page, {
		method: 'get',
		evalScripts: true,
		insertion: animateElement
	});
	
	return false;
}

function animateElement( receiver, response ) {
	$('content').setStyle({
		height: (newHeight - 20) + 'px'
	});
	
	new Effect.BlindDownToHeight('opaque-background', newHeight, { duration: 0.5, queue: 'end' });
	Element.update(receiver, response);	
	new Effect.Appear(receiver, { duration: 1.0, queue: 'end' });
}

/* Created a new Effect to scale an element to a new height
   without having some quirky height behavior */
   
Effect.BlindDownToHeight = function(element, height) {
  element = $(element);
  var elementDimensions = element.getDimensions();
  return new Effect.Scale(element, 100, Object.extend({ 
    scaleContent: false, 
    scaleX: false,
    scaleFrom: 0,
    scaleMode: {originalHeight: height, originalWidth: elementDimensions.width},
    restoreAfterFinish: true,
    afterSetup: function(effect) {
      effect.element.makeClipping().setStyle({height: '0px'}).show(); 
    },  
    afterFinishInternal: function(effect) {
      effect.element.undoClipping();
      effect.element.setStyle({
		height: height + 'px'
	  });
    }
  }, arguments[2] || {}));
}