function initSwap(defs, hovers, defaultNum) {
	var loaded = 0;
	var init = false;
	var imgs = new Array();
	var swap = new Array();
	var wrappers = new Array();
	var maps = new Array();

	var swapDone;
	var swapImgs = new Array();
	var curNum = defaultNum;
	var nextNum = null;
	
	for(var i=0; i < defs.length; i++) {
		/*
		 * Replace the swap image with a div (wrapper) with the image as
		 * background.
		 */
		wrappers[i] = Ext.getBody().createChild({
			tag: 'div',
			style: defs[i]['style']
		});
		
		wrappers[i].setStyle('background-image', 'url(\''+ defs[i]['defImgPath'] +'\')');
		
		wrappers[i].replace(Ext.get(defs[i]['swapImg']));
		Ext.destroy(Ext.get(defs[i]['swapImg']));
		
		swapImgs[i] = wrappers[i].createChild({
			tag: 'img',
			src: defs[i]['defImgPath'],
			usemap: defs[i]['usemap']
		});
		
		maps[i] = defs[i]['usemap'];
		
		/*
		 * Preload the images and set init to true when done.
		 */
		imgPaths = defs[i]['paths'];
		
		imgs[i] = new Array();
		
		for(var j=0; j < imgPaths.length; j++) {
			imgs[i][j] = new Image();
			
			/* Be sure to define the onload function before setting the src! */
			imgs[i][j].onload = function() {
				loaded++;
				
				if(loaded == imgPaths.length * defs.length) {
					init = true;
				}
			};
			
			imgs[i][j].src = imgPaths[j];
		}
	}

	/*
	 * Set mouseover function for the elements
	 */
	for(var i=0; i < hovers.length; i++) {
		var childs = Ext.get(hovers[i]['el']).query(hovers[i]['query']);

		Ext.each(childs, function(obj, num) {
			Ext.get(obj).hover(function(){
				mouseOut = false;
				swapImg(num);
			}, function() {})
		});
		
		/* Set mouseout function for the areas. */
		Ext.get(hovers[i]['el']).hover(function() {}, function() {
			mouseOut = true;
			
			setTimeout(function() {
				if(mouseOut)
					swapImg(defaultNum);
			}, 150);
		});
	}

	swapDone = wrappers.length;

	function swapImg(num) {
		/* When fading queue the required swap as next. */
		if(init && swapDone < wrappers.length)
			nextNum = num;
		
		if(init && swapDone == wrappers.length && curNum != num) {
			for(var i=0; i < wrappers.length; i++) {
				nextNum = null;
				swapDone = 0;
				
				Ext.destroy(swapImgs[i]);
				
				swapImgs[i] = wrappers[i].createChild({
					tag: 'img',
					src: imgs[i][curNum].src,
					usemap: maps[i]
				});
				
				wrappers[i].setStyle(
						'background-image', 'url(\''+ imgs[i][num].src +'\')');
				
				curNum = num;
				
				/* give i to the callback function
				   (i changes before the function is called) */
				swapImgs[i].i = i;
				
				swapImgs[i].fadeOut({
					duration: .3,
					callback: function(obj) {
						/* The fade is done, replace the image. */
						
						swapImgs[obj.i] = wrappers[obj.i].createChild({
							tag: 'img',
							src: imgs[obj.i][num].src,
							usemap: maps[obj.i]
						});
						
						swapDone++;
						
						/* Run the queued switch. */
						if(nextNum != null)
							swapImg(nextNum);
					},
					remove: true
				});
			}
		}
	}
}