function preLoadImages(patternimg,xphotoarraythumbs,xphotoarray,xphotonames) {
	$('pattern_title_back').setOpacity(0.7);
	$('pattern_additional_photos_back').setOpacity(0.5);
	$('progress').setStyles({display: 'block' }).setOpacity(0).effect('opacity', {duration: 700, transition: Fx.Transitions.linear}).start(0,1).chain(function() {
		//list all the images here
		var path = '/000_X/img/';
		var images = [
		'/images/multiheader_next.gif',
		'/images/multiheader_previous.gif',
		'/images/picture_frame.png',
		patternimg
		];
		var mainimg = new Image;
		mainimg.src = images[3];
		var widthTransition = new Fx.Style('progress_bar', 'width',{duration: 100});
		$$('.bar').setOpacity(0.6);
		new Asset.images(images, {
			onProgress: function(i) {
				var curwidth = $('progress').getStyle('width').toInt();
				var percent = ((i + 1) * curwidth) / images.length;
				widthTransition.start(percent);
			},
			onComplete: function() {
				widthTransition.start(100).chain(function() {
					$('progress').effect('opacity', {duration: 700, transition: Fx.Transitions.linear}).start(1,0).chain(function() {
						$('progress').setStyle('display','none');
						$('pattern_additional_photos').setOpacity(0).setStyle('display','block');

					});
					/*
					$('pattern_title').addEvent('mouseenter', function(){
						$('pattern_title').effect('opacity', {duration: 300, transition: Fx.Transitions.linear}).start(1,0);
					});
					$('pattern_title').addEvent('mouseleave', function(){
						$('pattern_title').effect('opacity', {duration: 300, transition: Fx.Transitions.linear}).start(0,1);
					});
					*/
					if (xphotoarray.length > 0) {
						//make the casing visible
						new Asset.images(xphotoarraythumbs, {
							onProgress: function(increment) {
								if (increment<xphotoarraythumbs.length) {
									//add the thumbnails
									var thumbimg = xphotoarraythumbs[increment]; 
									new Element('div').addClass('xphoto_thumbnails').setProperty('id','thumb_' + increment).setProperty('title',xphotonames[increment]).setProperty('alt',xphotonames[increment]).setStyles({ background: '#FFF url(' + thumbimg + ') top left no-repeat', border: '1px solid #666' }).injectInside('pattern_additional_photos');
									//change border color onmouseover
									$('thumb_' + increment).addEvent('mouseover', function(){
										this.setStyles({ cursor: 'pointer', border: '1px solid #FFF' });
									});
									$('thumb_' + increment).addEvent('mouseout', function(){
										this.setStyles({ cursor: 'pointer', border: '1px solid #666' });
									});				
									//add the click function
									$('thumb_' + increment).addEvent('click', function(){
										Lightbox.show('/thumb/phpThumb.php?src=' + xphotoarray[increment] + '&w=550',xphotonames[increment]);
									});
								}
							},
							onComplete: function() {
								$$('.picture_frame').addEvent('mouseenter', function(){
									$('pattern_additional_photos').effect('opacity', {duration: 300, transition: Fx.Transitions.linear}).start(0,1);
								});
								$$('.picture_frame').addEvent('mouseleave', function(){
									$('pattern_additional_photos').effect('opacity', {duration: 300, transition: Fx.Transitions.linear}).start(1,0);
								});
							}
						});
					} 
				});
			}
		});
	});
}