var mySlider; 
window.addEvent('domready', function() {
		
	//slider variables for making things easier below
	var itemsHolder = $('slider');
	var myItems = $$(itemsHolder.getElements('.item'));
	
	if ($('preloader')) {
		
		var thePreloader = $('preloader');
		
		//immediately remove scrollbars from container, since we are preloading
		itemsHolder.set('overflow', 'hidden');
		
		//create array from images to preload, and hide (will unhide when loaded)
		var theImages = new Array();
		myItems.each(function(el, i){
			var tempImg = $(el.getElement('img'));
			var tempSrc = tempImg.getProperty('src');
			theImages.push(tempSrc);
			el.set('opacity', 0);
		});	
		
		//tween preloader into view
		thePreloader.set('tween', {duration: 500, transition: 'cubic:out'}).tween('opacity', 1);
	
		//determine how much to increment preloader per image load
		var numImgs = theImages.length;
		var percentBump = (100/numImgs).toInt();
		
		//thanks to David Walsh for the loader bar class
		var pb = new dwProgressBar({
			container: thePreloader,
			startPercentage: 0,
			speed:500,
			boxID: 'pre_box',
			percentageID: 'pre_perc',
			step:percentBump,
			allowMore: 0,
			displayID: 'pre_text',
			displayText: true,
			onComplete: function() {  
			 	//alert('Done!');			
			}
		});
	
		//starts loading images here
		var myImages = new Asset.images(theImages, {
			onProgress: function(counter){
				pb.step();
			},
		
			onComplete: function(){
	
				//create instance of the slider, and start it up		
				mySlider = new SL_Slider({
					slideTimer: 6000,
					isPaused: false,
					container: itemsHolder,
					items: myItems
				});
				mySlider.start();
				
				//unhide slides			
				myItems.each(function(el){
					el.set('opacity', 1);
				});
				
				thePreloader.tween('opacity', 0);
				
			}
			
		});
		//end images load
	}
				 
});