var imagePreloader = new Class({
	Implements: [Options],
	options: {
		
	},
	initialize: function(container, options) {
		//slider variables for making things easier below
		this.itemsHolder = container;
		this.myItems = $$(this.itemsHolder.getElements('li'));
		this.thePreloader = $('image_preloader');
		this.theImages = new Array();
		
		//immediately remove scrollbars from container, since we are preloading
		this.itemsHolder.set('overflow', 'hidden');
		this.setImageSrcArray();
		var pb = this.getProgressBar();
		this.loadImages(pb);
	},
	
	//create array from images to preload, and hide (will unhide when loaded)
	setImageSrcArray: function() {
		this.myItems.each(function(el, i){
			var tempImg = $(el.getElement('img'));
			var tempSrc = tempImg.getProperty('src');
			this.theImages.push(tempSrc);
			el.set('opacity', 0);
		}.bind(this));	
	},
	
	getProgressBar: function() {
		//tween preloader into view
		this.thePreloader.set('tween', {duration: 500, transition: 'cubic:out'}).tween('opacity', 1);
		
		
		//determine how much to increment preloader per image load
		var numImgs = this.theImages.length;
		var percentBump = (100/numImgs).toInt();
		
		//thanks to David Walsh for the loader bar class
		return pb = new dwProgressBar({
			container: this.thePreloader,
			startPercentage: 0,
			speed:500,
			boxID: 'pre_box',
			percentageID: 'pre_perc',
			step:percentBump,
			allowMore: 0,
			displayID: 'pre_text',
			displayText: true,
			onComplete: function() {  
		 		//alert('Done!');			
			}
		});	
	},
	
	loadImages: function(pb)  {
		var myItems = this.myItems;
		var thePreloader = this.thePreloader;
		//starts loading images here
		var myImages = new Asset.images(this.theImages, {
			onProgress: function(counter){
				pb.step();
			},
			onComplete: function(){
				//unhide slides			
				myItems.each(function(el){
					el.set('opacity', 1);
				});
				
				thePreloader.tween('opacity', 0);
				
			}
		});	
	}
	
	
});