document.observe('dom:loaded',function(){   
	
	if($('gallery').down('ul.gallery')){
		var thumbs = $('gallery').down('ul.gallery').select('li');        
		thumbs.each(function(t){      
						   
			// get rollover div; setup trigger
			el = $(t).down('p');   
			el.hide();
			new RolloverDetail(t,el);   
		
			// fix z-index in IE    
			/*
			if(browser.isIE) {
				container = el.getOffsetParent();
				container.style.zIndex = i;
				i--;
			}     
			*/
		
		 })
	}

})     



/*** Classes ***/
function RolloverDetail(trigger,htmlElement,action) { // this is really slow in IE7 for some reason... may need to optimize
	if(action == undefined) {action = 'mouseover';}
	this.trigger = trigger;
	this.htmlElement = htmlElement;
	var self = this;
	
	this.hittest = false; // keep track of the rollover's hit state
	
	// set up triggers
	trigger.observe(action,function(event) {
		self.delay = setTimeout( function(){
			   htmlElement.show();
			} , action == 'mouseover' ? 400 : 0) // htmlElement.appear({duration: 0.3});
		Event.stop(event);
	 })
	trigger.observe('mouseout',function(event) {
		clearTimeout(self.delay);
	 })
	
	if(action == 'mouseover') {
		// we only need a mouseout if originally triggered by mouseover
		// otherwise, we'll rely on a cancel button to get us out
		trigger.observe('mouseout',function(event) {
			if(self.hittest == false) {
				htmlElement.hide();
				// htmlElement.fade({duration: 0.3});
			}
		 })

		// set up rollovers to toggle hitstate
		htmlElement.observe('mouseover',function(event) {
			self.hittest = true;
			this.show();
			// this.appear({duration: 0.3});
		 })
		htmlElement.observe('mouseout',function(event) {
			self.hittest = false;
			this.hide();
			// this.fade({duration: 0.3});
		 })
	}

	return this;
}