window.addEvent('domready', function() {
	
	//1.2.3 compatibility fix for $
	window.$ = document.id;
	
	//variables for making things more simple below
	var detailsBox = $('details');
	var myStage = $('thumbslider').getElement('ul');
	var myItems = $$(myStage.getElements('li'));
	
	//hide details window
	detailsBox.set('opacity', 0);
	
	$('thumbslider').set('opacity', .001);
	
	var theSources = new Array();
	myItems.each(function(el, i){
		var tempLink = $(el.getElement('img'));
		var tempSrc = tempLink.getProperty('src');
		theSources.push(tempSrc);
	});	
	
	//starts loading images here
	var myImages = new Asset.images(theSources, {
		onProgress: function(counter){
			//
		},

		onComplete: function(){
			blastOff();
		}
		
	});
	//end images load
	
	
	function blastOff(){
		//unhide images box
		$('thumbslider').tween('opacity', 1);
		
		//thePreloader.set('tween', {duration: 500, transition: 'cubic:in'}).tween('opacity', 0);
		
		var myThumbs = new ThumbSlider({
			transitionType: 'cubic:out', 	//transition type 
			items:  myItems,				//array of items (thumbs)
			stageBox: myStage,				//stage to contain the slider and it's slides
			curPic: 0,  					//current pic
			spacing: 10,						//spacing between thumbs (on right)		
			contentBox: $(document.getElement('content'))
		});
	}
	
	
	
	//details box stuff
	var detBox = new DetailsBox({
		theClosebtn: $('details').getElement('a.close'),	//div for close btn
		transitionTime: 1000, 		//transition time (1 second = 1000) for box opening animation & image fade-in/out animation
		theStage: $('wrapper'),		//test
		theBox: $('details'),		//the 'details' div
		overlayOpacity: .8,			//opacity of item rollover (thumbnail rollover)
		startBtn: $('startbox')	//element to open box (typically a link)			 
	});
			
	
	
});