window.addEvent('domready', function() {
	
	if (typeof(marketSectorsBannerImages) == 'undefined' || marketSectorsBannerImages.length == 0) return;

	if (window.ie6) {
		try {
			document.execCommand('BackgroundImageCache', false, true);
		} catch(e) { }
	}

	images = marketSectorsBannerImages;

	var marketSectorsDiv = $('market_sectors');
	if (!marketSectorsDiv) return;
	
	var marketSectorsWrapper = $('market_sectors_wrapper')
	if (!marketSectorsWrapper) return;
	
	marketSectorsWrapper.setStyle('position', 'relative');
	
	var element = new Element('div', {
		styles : {
			width : '730px',
			height : '220px',
			'position' : 'absolute',
			'left' : 0,
			'top' : '1em'
		}
	}).inject(marketSectorsDiv, 'before');
	marketSectorsDiv.setStyles({
		'background-color' : 'transparent',
		'position' : 'absolute',
		'left' : 0,
		'top' : '1em'
	});
	
	element.setStyle('backgroundImage', 'url(' + images[0] + ')');

	var bannerImages = new Asset.images(images, {
	
		onComplete : function() {
			
			var banner = element;
			
			if (banner) {
				
				// Create the div that is to fade.
				var fadingDiv = new Element('div', {
					styles : {
						width : '100%',
						height : '100%',
						opacity : 0,
						backgroundPosition : 'top left',
						backgroundRepeat : 'no-repeat'
					}
				}).injectInside(banner);
				
			
				var fader = new Fx.Tween(fadingDiv, {
					property : 'opacity',
					duration : 2500,
					link : 'cancel'
				});
				
				// The function that is used to fade divs.
				var fadeToNewImage = function(index) {
					fadingDiv.setStyles({
						opacity : 1,
						backgroundImage : banner.getStyle('backgroundImage')
					});
					banner.setStyle('backgroundImage', 'url(' + bannerImages[index].src + ')');
					fader.start(1).chain(function() {
						fader.start(0);
					}).chain(function() {
						fadeToNewImage((index + 1) % bannerImages.length)
					});
				};
				
				fadeToNewImage(1);
				
			}
		}
	});	
});