function imageReplace(image, name)
{
	image.src = name;
	image.style.marginTop = "0px";
}

function hideImage()
{
	
	
	
	var showReferences = $('referenceBox');
	var contentTransition = new Fx.Transition(Fx.Transitions.Back, 3);
	var contentTransitionFx = new Fx.Style('left', {transition: contentTransition.easeOut});
	
	var myFx = new Fx.Style('referenceBox', 'left', 
		{
			transition: contentTransition.easeIn, duration: 1000, 
			onComplete: function()
			{
				var jsEscape = $('jsEscape');
				jsEscape.style.display='block';
				showReferences.style.display='none';
				var jsEscapeFx = new Fx.Style('jsEscape', 'left', 
					{
						transition: contentTransition.easeIn, 
						duration: 1000
					}).start(100, 0);
			}
		}
	).start(100, 950);
}

function changeContent(name, width, height)
{
	var referenceBox = $('referenceBox');
	var image = $('referenceImage');
	image.src = "/images/activity_indicator.gif";
	image.style.marginTop = (height/2)+"px";
	
	var ref_image = new Asset.images(name, {
	    onComplete: function(){	imageReplace(image, name);}
	});
	
	referenceBox.style.width = width+"px";
	referenceBox.style.height = height+"px";
	
	var jsEscape = $('jsEscape');
	var contentTransition = new Fx.Transition(Fx.Transitions.Back, 3);
	var contentTransitionFx = new Fx.Style('left', {transition: contentTransition.easeOut});
	
	var myFx = new Fx.Style('jsEscape', 'left', 
		{
			transition: contentTransition.easeIn, duration: 1000, 
			onComplete: function()
			{
				var showReferences = $('referenceBox');
				showReferences.style.display='block';
				jsEscape.style.display='none';
				var showReferencesFx = new Fx.Style('referenceBox', 'left', 
					{
						transition: contentTransition.easeIn, 
						duration: 1000
					}).start(0, 100);
			}
		}
	).start(0, -950);
}