// put everything in here
$(document).ready( 
	
	function() {
		
		$('.large-image').css( "display", "none" );
		$('.large-image').eq(0).addClass( "selected" );
		$('.large-image').eq(0).css( "display", "block" );
		
		
		$('.large-image').click( 
			
			function() {
				
				selectNextImage( $( this ) );
			}
		);
		
		$('#arrowr').click (
		
			function() {
				
				var image = $('#image_box .selected');
				selectNextImage( image );
			}
			
		);
		
		$('#arrowl').click (
		
			function() {
				
				var image = $('#image_box .selected');
				selectPreviousImage( image );
			}
			
		);
		
		
		function selectNextImage( currentImage ) {
		
			// if the next sibling is an image, just select the next one
			if( currentImage.next().is( 'img' ) ) {
			
				// select the next image
				currentImage.next().css( "display", "block" );
				currentImage.next().addClass( "selected" );
				
				// remove the current image
				currentImage.css( "display", "none" );
				currentImage.removeClass( "selected" );
			}
			// if it is not, we have reached the end and we select the first one again
			else {
				
				// select the first one
				$('.large-image').first().css( "display", "block" );
				$('.large-image').first().addClass( "selected" );
				
				// remove the current image
				currentImage.css( "display", "none" );
				currentImage.removeClass( "selected" );	
			}
		}
		
		function selectPreviousImage( currentImage ) {
		
			// if the previous sibling is an image, just select it
			if( currentImage.prev().is( 'img' ) ) {
			
				// select the next image
				currentImage.prev().css( "display", "block" );
				currentImage.prev().addClass( "selected" );
				
				// remove the current image
				currentImage.css( "display", "none" );
				currentImage.removeClass( "selected" );
			}
			// if it is not, we have reached the beginning and we select the last one again
			else {
				
				// select the last one
				$('.large-image').last().css( "display", "block" );
				$('.large-image').last().addClass( "selected" );
				
				// remove the current image
				currentImage.css( "display", "none" );
				currentImage.removeClass( "selected" );	
			}
		}
		
		
		// H2 hover over effect
		// only works in javascript because of Cufon
		$('h2').hover(
			function() {
				$(this).css( "color", "#333333" );
				Cufon.replace('h2');
			},
			function() {
				
				if( !$(this).hasClass('selected') ) {
					$(this).css( "color", "#AAAAAA" );
					Cufon.replace('h2');
				}
			}
		);

		
		
	}
);