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

	// Scroller for thumbs
	var scrollFx = new Fx.Scroll($('brandingThumbs'));
	
	// Define photos
	var thumbList = [{"item": "1", "title": "Aerial View"}
						, {"item": "2", "title": "John's Island Rainbow"}
						, {"item": "3", "title": "Wabi Canoes"}
						, {"item": "4", "title": "Lolly Gag Lookout"}
						, {"item": "5", "title": "Sunrise"}
						, {"item": "6", "title": "Sunrise"}
						, {"item": "7", "title": "Tower"}
						, {"item": "8", "title": "Wabi Map Aerial"}
						, {"item": "9", "title": "Burning W"}];
						
	
	// Load thumbnails
	thumbList.each(function(pic) {
		
		new Element('img').set({'src': '/img/slide/'+pic.item+'t.jpg'
							, 'alt': pic.item
							, 'id': 'sp'+pic.item
							, 'class': 'headerThumb'})
		.setStyle('border', '1px solid #FFF')
		.addEvent('click', function() {
			change_photo_fast(pic.item - 1);
		})
		.inject($('brandingThumbs'), 'bottom');
		
	});

	
	// Load initial photo
	new Element('img').set({'src': '/img/slide/1.jpg'
							, 'alt': '1'
							, 'id': 'headerPhoto'})
		.inject($('brandingPhoto'), 'bottom');
	
	$('sp1').setStyle('border', '1px solid #e0b484');
	
	// Rotator
	
	var slideshow = function rotator() {
		var thisPic = $('headerPhoto').get('alt');
		change_photo(thisPic);
	};
	
	slideshow.periodical(15000);
	
	// main photo slow transition
	
	var BPtween = new Fx.Tween($('brandingPhoto'), {
		'duration': '2500'
	});
	
	
	// Change Photo Slow
	function change_photo(photo) {
		photo++;
		
		if(photo > 9) {
			photo = 1;
		}
		
		var BPhide = new Fx.Tween($('brandingPhoto'), {
			'duration': '2500',
			onComplete: function() {
			$('headerPhoto').dispose();
		
			scrollFx.toElement($('sp'+photo));
			
			new Element('img').set({'src': '/img/slide/'+photo+'.jpg'
								, 'alt': photo
								, 'id': 'headerPhoto'})
			.inject($('brandingPhoto'), 'bottom');
			
			$$('.headerThumb').each(function(element) {
				element.setStyle('border', '1px solid #FFF');
			});
			
			$('sp'+photo).setStyle('border', '1px solid #e0b484');
			
			
				
			BPtween.start('opacity', 0, 1);
			$('brandingPhoto').set('opacity', 1);
			
			}
		});
		BPhide.start('opacity', 1, 0);
	};
	
	// Change Photo Fast
	function change_photo_fast(photo) {
		photo++;
		
		if(photo > 9) {
			photo = 1;
		}
		
		$('brandingPhoto').set('opacity', 0);
		$('headerPhoto').dispose();
		
		scrollFx.toElement($('sp'+photo));
			
			new Element('img').set({'src': '/img/slide/'+photo+'.jpg'
								, 'alt': photo
								, 'id': 'headerPhoto'})
			.inject($('brandingPhoto'), 'bottom');
			
			$$('.headerThumb').each(function(element) {
				element.setStyle('border', '1px solid #FFF');
			});
			
			$('sp'+photo).setStyle('border', '1px solid #e0b484');
			
			
				
			BPtween.start('opacity', 0, 1);
			$('brandingPhoto').set('opacity', 1);
			
	};
	
});