window.addEvent('domready', function() {
	
	var images = [];
	
	var img_paths = ['img/img1.jpg','img/img2.jpg','img/img3.jpg','img/img4.jpg','img/img5.jpg'];
	var loader = new Asset.images(img_paths, {
		onProgress: function(counter,index) {
			$('frame').set('html','loaded '+ (counter + 1) * (100 / img_paths.length) + '%');			
		},
		onComplete: function() {
			//fill our img array
			img_paths.each(function(im) {
				images[im] = new Element('img', {
				    'src': im,
				    'styles': {
						'visibility': 'hidden',
						'opacity': '0',
						'border': 'none'
				    }
				});			
			});
			//assign click events
			$$('#photos a').addEvent('click', function(e) {
				e.stop();
				$('frame').empty();
				images[this.rel].set('opacity','0').inject($('frame')).fade(1);				
			});
			//show first img in frame
			$('frame').empty();
			images[ img_paths[0] ].set('opacity','0').inject($('frame')).fade(1);
		}
	});
	

});