window.addEvent('domready', function() {
	
	//1.2.3 compatibility fix for $
	window.$ = document.id;
	
	//variables for making things more simple below
	var myStage = $('thumbslider').getElement('ul');
	var myItems = $$(myStage.getElements('li'));
	

	$('thumbslider').set('opacity', .001);
	
	var theHeader = $('content').getElement('h2');
	var theIntro = $('content').getElement('p');
	var contentArray = new Array(theHeader, theIntro);
	
	contentArray.each(function(el){
		el.set('opacity', .001);
		el.set('tween', { 'duration': 1000, 'ease' : 'cubic:out' });
		el.tween('opacity', 1);		  
	});
	
	
	
	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)				 
		});
	}
			
	
	
});