window.addEvent('domready', function() {	
	
	var heading = $('content_box').getElement('h2');
	var picBox = $('image_box');
	var thumbBox = $('thumb_box');
	var details = $('details');
	var catItems = $$('#items_box li');
	var items = $$('#image_box li');
	var theImages = new Array();
	var viewLargeBtn = $('viewlarge_link');
	
	
	picBox.setStyle('opacity',0);	
	details.setStyle('opacity',0);	
	picBox.setStyle('overflow', 'hidden');
	
	items.each(function(e){
		var thisImg = e.getElement('img.mid_img');
		var thisSrc = thisImg.getAttribute('src');
		thisImg.setStyle('opacity', 0);
		theImages.push(thisSrc);
	});
			
	
	//fade in function (so I can bind stuff)
	var showIt = function(el){ 
		
		var fade_in = new Fx.Morph(el, {
			     duration: 1000, 
			     transition: Fx.Transitions.Cubic.easeOut, 
			     link: 'ignore'
		});
		
		fade_in.start({
		'opacity': 1
		});
		
	};
	
	//preload images, then call one of my slider classes
	var myImages = new Asset.images(theImages, {
		
		onComplete: function(){
			var myStoutbox = new StoutBox({
				overOpacity: '.9',
				overlayOpacity: '.6',
				spacer: 2
			});
			
			var myPics = new itemDisplay({
				transitionTime: 1000,
				thumbsBox: thumbBox,
				imgContainer: picBox,
				imgclass: '.mid_img',
				thumbclass: '.tiny_thumb',
				items:  items, 
				activeColor: '#4A4136', 
				inactiveColor: '#7D745B'
			});
			
			myPics.start();
			
			viewLargeBtn.addEvents({
			     'click': function() {
				    var curItem = myPics.itemNum;
				    var curMids =  $$('#image_box li');
				    var curMid = curMids[curItem].getElement('a');
				    curMid.fireEvent('click');
				},
				'mouseenter': function() {
					this.setStyle('cursor', 'pointer');
				}
			});
			
			
		}
		
	});

	
	showIt.delay(100, null, details);
	showIt.delay(400, null, picBox);
					 
});