var video = {

	init: function() {
	
		$('videoBtn').observe( 'click', function() {
		
			$('video').setOpacity(0).show().setStyle('width: 490px; height: 232px; bottom: 138px;');
			new Effect.Morph( 'video', { style: 'width: 720px; height: 540px; opacity: 1;', duration: 0.5 } )
		
			video.setup.delay(1);
		
		} );
	
	},
												
	setup: function() {
		
		Event.observe( 'video_close_btn', 'click', function() {
		  fp.stop();
		  fp.unload();
			//location.reload();
			$('video_player').hide()
			$('video_close_btn').hide()
			new Effect.Morph( 'video', { style: 'width: 490px; height: 232px; bottom: 138px; opacity: 0.6', duration: 0.5, afterFinish: function() { $('video').hide() } } )
		});
	
		$('video_player').show();
		$('video_close_btn').show();
		var fp = flowplayer( "video_player", { src: "video/flowplayer-3.1.5.swf", wmode: 'opaque' }, {
		
			canvas: {
				backgroundColor: "#ffffff",
				backgroundGradient: 'none'
				},
			
			clip: {
				url: 'video/video.m4v'
			},
			
			plugins: {
				
				controls: {
					
					bufferColor: '#666666',
					bufferGradient: 'none',
					volumeSliderColor: '#aba195',
					buttonColor: '#666666',
					durationColor: '#ffffff',
					tooltipColor: '#181515',
					tooltipTextColor: '#aba195',
					buttonOverColor: '#181515',
					volumeSliderGradient: 'medium',
					sliderGradient: 'medium',
					backgroundGradient: 'none',
					backgroundColor: '#181515',
					borderRadius: '0',
					progressGradient: 'medium',
					progressColor: '#ffffff',
					sliderColor: '#aba195',
					height: 24,
					opacity: 0.5,
					time: false,
					fullscreen: false,
					//autoHide: "always", 
					hideDelay: 1000
					
				}
				
			}
		
		});
		
		fp.play();

	}
	
}

Event.observe( document, 'dom:loaded', video.init );


//object to handle the picture fading
var slideshow = {

	speed: 1,
	duration: 2,
	//speed: 0.5,
	//duration: 1,
	path: 'images/slideshow/', //path to photos
	photos: new Array(),
	current: 1,
	total: 0,
	order: [1,2,3,4],
	
	init: function() {

		//total images in the slideshow
		slideshow.total = slideshow.order.length;

		//preload images and set photo order
		for( var i = 0; i < slideshow.total; i++ ) {
			slideshow.photos[i] = new Image();
			slideshow.photos[i].src = slideshow.path + slideshow.order[i] + '.jpg';
		}
		
		//initialise rotation
		setTimeout( function() { slideshow.advance() }, slideshow.duration * 1000 );

		//set handler
		Event.observe( $('photo2'), 'load', function() { slideshow.animate() } );
		
	},

	//work out next image to show
	advance: function() {

		//set the src of photo 2 and update current pointer
		$('photo2').src = slideshow.photos[ slideshow.current ].src;
		slideshow.current = slideshow.current == slideshow.total - 1 ? 0 : slideshow.current + 1

	},
	
	//when it's loaded...
	animate: function() {

		//show it and set the opacity to 0
		$('photo2').show();
		$('photo2').setStyle( { opacity: 0 } );
		
		//fade the photos into each other
		new Effect.Opacity( 'photo1', { from: 1, to: 0, duration: slideshow.speed } );
		new Effect.Opacity( 'photo2', { from: 0, to: 1, duration: slideshow.speed } );
		
		//recurse
		setTimeout( function() {
		
			//swap the src of the 2 and hide photo 2
			$('photo1').src = $('photo2').src;
			$('photo1').setStyle( { opacity: 1 } );
			$('photo2').setStyle( { opacity: 0 } );
			$('photo2').hide();
		
		}, ( slideshow.speed * 1000 ) + 100 );
		
		//recurse
		setTimeout( function() {
		
			slideshow.advance();
		
		}, ( ( slideshow.speed + slideshow.duration ) * 1000 ) + 100 );
	
	}
	
}

Event.observe( window, 'load', slideshow.init );