window.addEvent('domready', function() {
	
	var picHolder = $('pic_box');
	//var numNavHolder = $('num_nav').getElement('ul');
	var myItems = $$('.pic');
	var firstPic = myItems[0];
	//var thePlayBtn = $('playbtn');
	var thePreloader = $('preloader');
	var theDesc = $('desc');
	
	picHolder.setStyle('overflow', "hidden");  //remove scrollbar(s)
	picHolder.setStyle('opacity', "0"); 
	firstPic.setStyle('opacity', 0);
	theDesc.setStyle('opacity', "0");  
	
	var contentCoords = $('content_box').getCoordinates();
	var contentX = contentCoords.left;
	var contentY = contentCoords.top;
	var contW = contentCoords.width;
	var contH = contentCoords.height;
	
	//preloader bar stuff
	thePreloader.set('tween', {duration: 1000, transition: 'cubic:out'}).tween('opacity', 1);
	
	var preX = contentX + ((contW - 200) / 2);
	var preY = contentY + ((contH - 10) / 2);
	
	thePreloader.setStyles({
		'top': preY,
		'left': preX
	});
	
	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: 'box',
		percentageID: 'perc',
		step:percentBump,
		allowMore: 0,
		displayID: 'text',
		displayText: true,
		onComplete: function() {  
		 	//alert('Done!');			
			//mySlider.start();
		}
	});
	
	
	//starts loading images here
	var myImages = new Asset.images(theImages, {
		onProgress: function(counter){
			pb.step();
		},

		onComplete: function(){
			thePreloader.set('tween', {duration: 500, transition: 'cubic:in'}).tween('opacity', 0);
				
			var mySlider = new Showcase({
				slideTimer: 6000, 
				items: myItems,
				leftBox: $('left_box'),
				rightBox: $('right_box'),
				initBox: picHolder
			});
			mySlider.start();
			
		}
		
	});
	//end images load
					 
});