window.addEvent('domready', function() {
		
	//slider variables for making things easier below
	var itemsHolder = $('container');
	var myItems = $$(itemsHolder.getElements('.item'));
	
	//controls for slider
	var theControls = $('controls1');
	var numNavHolder = $(theControls.getElement('ul'));
	var thePlayBtn = $(theControls.getElement('.play_btn'));
	var thePrevBtn = $(theControls.getElement('.prev_btn'));
	var theNextBtn = $(theControls.getElement('.next_btn'));
	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		
			var mySlider = new SL_Slider({
				slideTimer: 8000,
				orientation: 'horizontal',    	  //vertical, horizontal, or none: None will create a fading in/out transition.
				fade: false,                    //if true will fade the outgoing slide - only used if orientation is != None
				isPaused: false,
				container: itemsHolder,
				items: myItems,
				numNavActive: true,
				numNavHolder: numNavHolder,
				playBtn: thePlayBtn,
				prevBtn: thePrevBtn,
				nextBtn: theNextBtn
			});
			mySlider.start();
			
			//unhide slides			
			myItems.each(function(el){
				el.set('opacity', 1);
			});
			
			thePreloader.tween('opacity', 0);
			
		}
		
	});
	//end images load
	
	
	//adding a little animated rollover highlight to the play and prev/next buttons
	var origBkgdColor = thePlayBtn.getStyle('background-color');
	var newBkgdColor = "#bcbcbc";
	var btnArray = new Array(thePlayBtn, thePrevBtn, theNextBtn);
	
	btnArray.each(function(e, i){
		e.set('tween', {duration: 350, transition: 'cubic:out', link: 'cancel'});
		e.addEvents({ 
			'mouseenter' : function() {
				this.tween('background-color', newBkgdColor);
			},
			'mouseleave' : function() {
				this.tween('background-color', origBkgdColor);
			}
		});
	});
				 
});