document.observe('dom:loaded', function() {
	// dom ready fires too early in IE. Delay it for some miliseconds to fix this problem
	(function() {
	var images = $('images');
	
	if (self.noBackgroundImageCache || !images) {
		return;
	}
	
	var zIndex = 3;
	
	$$('#images a').each(function(anchor, i) {
		anchor.effectQueue = Effect.Queues.get('images_'+i);
		
		var textAnchor = $('nav_'+anchor.id.replace(/^image_/, ''));
		
		var mouseover = function(event) {
			anchor.effectQueue.each(function(e) { e.cancel() });
			new Effect.Morph(anchor, { queue: {position: 'end', scope: anchor.effectQueue }, style: {left: '0px', width: images.offsetWidth+'px'}, beforeStart: function() {
				anchor.setStyle({zIndex: zIndex++});
			}, afterUpdate: function() {
				var left = parseInt(anchor.getStyle('left'));
				var width = Math.ceil(parseFloat(anchor.getStyle('width')));
				anchor.setStyle({left: left+'px', backgroundPosition: -left+'px 0px', width: width+'px'});
			}});
			
			textAnchor.addClassName('hover');
		};
		
		var mouseout = function(event) {
			anchor.effectQueue.each(function(e) { e.cancel() });
			new Effect.Morph(anchor, { queue: {position: 'end', scope: anchor.effectQueue }, style: {left: i*150+'px', width: '150px'}, afterUpdate: function() {
				var left = parseInt(anchor.getStyle('left'));
				var width = Math.ceil(parseFloat(anchor.getStyle('width')));
				anchor.setStyle({left: left+'px', backgroundPosition: -left+'px 0px', width: width+'px'});
			}});
			
			textAnchor.removeClassName('hover');
		};
		
		anchor.observe('mouseover', mouseover);
		anchor.observe('mouseout', mouseout);
		textAnchor.observe('mouseover', mouseover);
		textAnchor.observe('mouseout', mouseout);
	});
	}).delay(0.01);
});