// Various Javscript stuff needed for the site
// (C) Steph Reed 2009

var photoLink = "";

function getHTTPObject() { 
	if (typeof XMLHttpRequest != 'undefined') { 
		return new XMLHttpRequest(); 
		} 
	try { 
		return new ActiveXObject("Msxml2.XMLHTTP"); 
		} catch (e) { 
			try { 
				return new ActiveXObject("Microsoft.XMLHTTP"); 
			} catch (e) {} 
		} 
		return false;
	}

function expand( name, other ) {
	// Expand or shrink a section
	var d = document.getElementById(name);
	if( !d )
		return;

	// Show / hide the requested DIV
	if( $("#" + name).is(':visible') )
		$("#" + name).hide();
	else
		$("#" + name).show();

	// Hide all the others
	var selector = "ul ul:not(#" + name + ")";
	$(selector).hide();	

   }

function changePage( page ) {
	// Change the main section to the specified page with a fade
	var url = "index_ajax.php?page=" + page;

	// Show the loading animation
	$("#loader").show();

	// Reset the video player status
	video_ready = false;

	if( httpD )
		delete httpD;

	var httpD = getHTTPObject();
 	httpD.onreadystatechange = function () {
		if (httpD.readyState == 4) {
			contentReady( httpD.responseText );
			}
		}
 	httpD.open("GET", url, true);
 	httpD.send(null);
 
}

$(document).ready(function() {
	$("#mainNew").hide();

	// Show a message to IE6 users
	if($.browser.msie && $.browser.version=="6.0") {
		$("#browser").html( "We have detected you are using an old or incompatible browser. \
		Our website uses modern web standards which may not be supported by older browsers \
		such as Internet Explorer 6. You should consider upgrading to the latest version of \
		your browser. We recommend one of the following browsers (all free to download and use). \
		<br /><br /><center> \
		<a href=\"http://www.mozilla.com/en-US/firefox/upgrade.html?from=getfirefox\" target=\"_blank\"><img src=\"images/firefox.png\"></a>&nbsp; \
		<a href=\"http://www.opera.com/\" target=\"_blank\"><img src=\"images/opera.png\"></a>&nbsp; \
		<a href=\"http://www.google.com/chrome\" target=\"_blank\"><img src=\"images/chrome.png\"></a>&nbsp; \
		<a href=\"http://www.apple.com/safari/\" target=\"_blank\"><img src=\"images/safari.png\"></a>&nbsp; \
		<br /><br /><button onclick=\"$('#browser').hide();\" >Close this window</button> \
		</center>" );
		$("#browser").show();
		}

	// Load the facebook button (if earlier it prevents the JS from working until loaded)
//	var facebook = "<script type=\"text/javascript\">FB.init(\"13db7cccc89e0feed6e340b5d2af5880\");</script>";
//	facebook += "<fb:fan profile_id=\"89975229415\" stream=\"\" connections=\"\" width=\"190\"></fb:fan>";

//	$("#facebook").html( facebook );

	} );

function contentReady( result ) {
 // Called when AJAX content is ready to be shown

	// Extract the new page title
	var pageTitle = "";
	var start = result.indexOf("<!-- Title:");
	var end = result.indexOf( "-->", start );

	if( start != -1 && end != -1 )
		pageTitle = result.substring( start + 12, end );

	document.title = pageTitle;

	// Hide the new DIV (Needed for first time it's used)
	$("#mainNew").hide();

	// Set the content of the new DIV
	$("#mainNew").html("<div class=\"box scroll\" id=\"boxNew\">" + result + "</div>\n");

	// Hide the loading animation
	$("#loader").hide();
	
	// Fade out the old div
	$("#main").fadeOut(1000);

	// Fade in the new DIV
	$("#mainNew").fadeIn(1000, function () {  
		// Called when fade is finished

		// Set the old div's content to the same as the new one
		$("#main").html( $("#mainNew").html() );

		// Show the old one, hide the new one
		$("#main").fadeIn(0);
		$("#mainNew").fadeOut( 0 );
		} );

}

function debug( message, indent ) {
 // Adds a debug message to the debug div if it exists
 var tabs = ""; 

 if( indent == 0 )
	tabs = "<br />";

 for( var i=0 ; i<indent ; i++ )
	tabs += "&nbsp;&nbsp;&nbsp;&nbsp;"

 if ( $("#debug").length > 0 ) {
 	$("#debug").html( $("#debug").html() + "<br \>" +tabs + message );
	$("#debug").attr({ scrollTop: $("#debug").attr("scrollHeight") });
	}

 }

function expandCase( item ) {
 var time = 1000;
 // Get the parent's parent (The "case" class) 
 thisCase = $( item ).parent().parent();

 if( $( item ).html() == "Read More.." ) {
	// Set the content to transparent
	$( item ).next().css('opacity', .0); 

	// Show the content
	$( item ).next().show();

	// Remove scrollbars from the containing box
	thisCase.parent().removeClass( "scroll" );

	// Figure out the real height we should be at
//	fullHeight = $( item ).next().height() + 52;
	fullHeight = 422;	

	// Remove the 'fade' class from this case
	thisCase.removeClass( "fade " );

	// Fade out the other cases
	$( ".case.fade" ).animate( { opacity: 0.2 }, time / 2, function() { 

		// See if we are at the top
		position = thisCase.position().top;
			
		// Figure out where the container needs to be scrolled to		
		offset = ( position - 10 ) + thisCase.parent().scrollTop()
			
		// Scroll the container so this case is at the top
		thisCase.parent().animate( { scrollTop : offset }, time );

		// Animated to the new size
		thisCase.animate( { height : fullHeight + "px" }, time, function() {

			// Callback to fade in the text
			$( item ).next().fadeTo( time / 2, 1.0 );
	
			// Set new text for the button
//			$( item ).html( "Hide.." );
	
			} ); 	
		// Set new text for the button
		$( item ).html( "Hide.." );

		} );
	}
 else {
	// Fadeout the text
	$( item ).next().fadeOut( 500, function() {
		// Callback to resize the parent DIV
		thisCase.animate( { height : 160 + "px" }, time, function () { 
			// Fade back in the other cases
			$( ".case.fade" ).animate( { opacity: 1.0 }, time / 2, function() { 
				// Add the fade class back to this case
				thisCase.addClass( "fade" );

				// Add the scrollbars to the container
				thisCase.parent().addClass( "scroll" );
				} );
			} );

		// Set new text for the button
		$( item ).html( "Read More.." );
		} );
	}

}

function showPhoto( photo ) {
 // Resize the photo div, fade it in, load and then show the photo
 var time = 500;

 // Show the loading animation
 $( "#photo_inner" ).addClass('loading');
 $( "#overlay" ).show();
 $( "#photo_overlay" ).show();

 // Create an new image
 var img = new Image();
	
 // Figure out the URL for the photo
 url = window.location.protocol + "//" + window.location.host;
 if( window.location.pathname.charAt(  window.location.pathname.length -1 ) == "/" )
	url += window.location.pathname;
 else
	url += window.location.pathname.substr( 0, window.location.pathname.lastIndexOf( "/" ) + 1 );

 // Set the global 'photoLink'
 photoLink = url + photo.substr( 0, photo.lastIndexOf( "-" ) ) + "-large.jpg"; 
  
 // Add an 'onClick' handler to the photo
 $( img ).click( function() { closePhoto(); } );

 // Warp it in a JQuery object and set a function to run on loading
 $( img ).load( function () {
	// Hide the image for now
	$( this ).hide();
	
	// with the holding div #loader, apply:
	$( "#photo_inner" )
		// remove the loading class (so no background spinner), 
		.removeClass('loading')
		// then insert our image
		.append(this);
		
		// When loaded, get dimensions of the photo
		p_h = this.height;
		p_w = this.width;

		// Get the height of the viewport
		s_h = $(window).height(); 
	
		// Calculate the top margin
		// TODO: use .height() instead of hard-coded values
		margin = ( s_h /2 ) - ( ( p_h + 50 ) / 2 );

		if( margin < 0 )
			margin = 0;
	
		// Resize the inner and outer divs
		$( "#photo_inner" ).animate( { width: p_w, height: p_h }, time );
		$( "#photo_outer" ).animate( { 	width: p_w + 5, height: p_h + 30, marginTop: margin	}, time, function() {
			// Fade in the image
			$( img ).fadeIn( time );
			} );		
		})

	// Handle any errors
    .error(function () {
		// notify the user that the image could not be loaded
		})
    
    // Set the source for the image (start's it loading)
    .attr('src', photo );
 }

function closePhoto() {
 // Fade out the photo
 var time = 888;

 $( "#photo_overlay" ).fadeOut( time );
 $( "#overlay" ).fadeOut( time, function () {
	// Remove the photo we added
	$( "#photo_inner" ).empty();
	
	// Reset the size
	$( "#photo_inner" ).animate( { width: 200, height: 200 }, 0 );
	$( "#photo_outer" ).animate( { width: 205 ,height: 230 }, 0 ); 
    $( "#photo_outer" ).animate( { marginTop: 100 }, 0 );	
	} );
 }

function showLargePhoto() {
 // Show the currently set large photo in a new window
 if( photoLink != "" ) 
 	window.open( photoLink ) 
}