function runOnDOMready() { 
	var thumbs = $$('#thumbs li');
	var links = $$('#thumbs li a');
	var slides = $$('div.slide');
	var index = 0;
	var timer = 8;
	var pe = new PeriodicalExecuter(autoScroll, timer);
	
	//Setup initial view state
	slides.each(function(el){
		el.setStyle({ display: 'none' });
	});
	links.each(function(el){ el.writeAttribute('href','javascript:void(0)'); });
	thumbs[index].addClassName('active');
	$('thumbs').setStyle({ position: 'absolute' });
	slides[index].setStyle({ display: 'block' });

	function autoScroll() {
		var slide = slides[index];
		var thumb = thumbs[index];
		
		slide.setStyle({ display: 'none' });
		thumb.removeClassName('active');
		
		if (index < 2) {
			index++;
			slide.next().setStyle({ display: 'block' });
			thumb.next().addClassName('active'); 
		} else {
			index = 0;
			slides.first().setStyle({ display: 'block' });
			thumbs.first().addClassName('active');
		}
	}
	
	function resetInterval() {
		pe.stop();
		pe = new PeriodicalExecuter(autoScroll, timer);
	}
	
	//Thumbnail actions
	thumbs.each(function(el){
		el.observe('click', function(event) {
			var element = Event.element(event);
			thumbs.each(function(el){ el.removeClassName('active')});
			slides.each(function(el){ el.setStyle({ display: 'none' }) });
			
			if (element.up().up().hasClassName('t1')) {
				index = 0;
			}
			if (element.up().up().hasClassName('t2')) {
				index = 1;
			}
			if (element.up().up().hasClassName('t3')) {
				index = 2;
			}
			
			element.up().up().addClassName('active');
			slides[index].setStyle({ display: 'block' });
			
			resetInterval();
		});
	});
};
document.observe("dom:loaded", runOnDOMready);
document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"/templates/default/css/system/home.js.css\" media=\"screen\" />");