window.addEvent('domready', function() {

	// CONFIGURATION

	var headerId = 'header_image';
	var thumbnailClass = 'thumb'; 

	var initialScrollDelay = 5000;
	var scrollDelay        = 5000;

	// SCRIPT VARS

	var headerTimer;

	// HELPER FUNCTIONS

	function scrollHeader(header, headerImg, overlay, overlayImg, numberDivs, images, nextImgIdx) {
		if(overlayImg) {	
			overlayImg.dispose();
		}
		overlayImg = headerImg;
		overlay.adopt(overlayImg);
		overlay.set('opacity', 1);
		
		headerImg = images[nextImgIdx];
		header.adopt(headerImg);

		overlay.get('tween', {property: 'opacity'}).start(0).chain(function() {
			numberDivs[this.prev].removeClass('active'); 
			numberDivs[this.next].addClass('active');
		}.bind({prev: (nextImgIdx > 0 ? nextImgIdx - 1 : 5), next: nextImgIdx}));
				
		nextImgIdx = (nextImgIdx < 5 ? nextImgIdx + 1 : 0);
		
		headerTimer =
			window.setTimeout(scrollHeader.pass([header, headerImg, overlay, overlayImg, numberDivs, images, nextImgIdx]), scrollDelay);
	}

	function switchToImage(header, overlay, numberDivs, images, nextImgIdx) {
		window.clearTimeout(headerTimer);
		
		header.getElement('div.active').removeClass('active');
		var headerImages = header.getElements('img');
		
		scrollHeader(header, headerImages[1], overlay, headerImages[0], numberDivs, images, nextImgIdx);
	}

	function substitute(image, newSrc) {
		if(image.getProperty('original') == null) {
			image.setProperty('original', image.src);
		}
		image.src = newSrc;
	}

	function revert(image) {
		image.src = image.getProperty('original');
	}

	function addThumbnailMouseoverHandlers() {
		document.getElements('.' + thumbnailClass).each(function(thumbnail) {
			var fullsize = thumbnail.getParent().getChildren()[0];
			var newSrc = fullsize.src.substr(0, fullsize.src.lastIndexOf('/')) +
		    	         thumbnail.src.substring(thumbnail.src.lastIndexOf('/'), thumbnail.src.length);

			thumbnail.addEvent('mouseover', substitute.pass([fullsize, newSrc]));
			thumbnail.addEvent('mouseout', revert.pass(fullsize)); 
		});
	}
	
	function initializeHeaderScroll() {
		var header        = $(headerId);
		var headerImg     = header.getChildren()[0];
		var headerImgPath = headerImg.src.substr(0, headerImg.src.lastIndexOf('/') + 1);
	 	
	 	// create overlay
		var overlay = new Element('div', {opacity: 0});
		overlay.setStyles({width: '100%', height: '100%', position: 'absolute', left: 0, top: 0});
		header.adopt(overlay);
		
		// create number layer
	 	var numberLayer = new Element('div', {id: 'image_listing'});
	 	header.adopt(numberLayer);
	
		// preload the images and create numbers in the number layer
		var images = new Array();
		for(var i = 1; i <= 6; i++) {
			images[i - 1] = new Element('img', {src: headerImgPath + i + '.jpg', alt: ''});
			var numberDiv = new Element('div', {text: i});
			numberLayer.adopt(numberDiv);
		}
		
		var numberDivs = numberLayer.getChildren();
		
		numberDivs.each(function(numberDiv, i) {
			numberDiv.addEvent('click', switchToImage.pass([header, overlay, numberDivs, images, i]));
		});
		
		headerImg.dispose();
		header.adopt(images[0]);
	
		// run the first scroll
		numberLayer.getChildren()[0].addClass('active');
		headerTimer =
			window.setTimeout(scrollHeader.pass([header, images[0], overlay, images[5], numberDivs, images, 1]), initialScrollDelay);		
	}
	
	// INITIALIZATION
	
	addThumbnailMouseoverHandlers();
	initializeHeaderScroll();
});