/**
 * Implements AJAX loading on the classes page.
 */

var height_duration = 500;
var height_easing   = 'easeInOutCubic';
var scroll_duration = 500;
var scroll_easing   = 'easeInOutExpo';

/**
 * Initialise the DOM to cope with all the AJAX-loaded content
 * and transition animations.
 */
function init() {
  // Enhance the DOM with a few extra elements to hold the
  // default primary content and the AJAX-loaded content.
  $('#content-a')
    .before('<div id="content-a-dummy"></div>')
    .before('<div id="content-a-ajax"></div>');
    
  $('body').append('<div id="ajax-loading"><p>Loading...</p></div>');
  
  // Ensure our dummy content is the same height as the height
  // of the actual content-a div.
  $('#content-a-dummy').height($('#content-a').outerHeight() + 'px');
  
  // Set a flag to show that the page has been enhanced by JavaScript.
  $('body').addClass('enhanced');
  
  // Hijack the "course details" links.
  $('table p.xoxo a').click(function(e) {
    url = $(this).attr('href');
    
    // Display the "loading" animation.
    $('div#ajax-loading').css({
			'top'			: $(window).scrollTop(),
			'left'		: $(window).scrollLeft(),
			'width'		: $(window).width(),
			'height'	: $(window).height()
		});

		$(window).bind('scroll', function() {
			$('div#ajax-loading').css({
				'top'		: $(window).scrollTop(),
				'left'	: $(window).scrollLeft()
			});
		}).bind('resize', function() {
			$('div#ajax-loading').css({
				'width'		: $(window).width(),
				'height'	: $(window).height()
			});
		});

		$('div#ajax-loading').fadeIn('fast');
    
    // Make the AJAX request.
    $.post(url, {ajax : 'y'}, display_course_details, 'html');
    
    // Prevent default link behaviour.
    e.preventDefault();
    e.stopPropagation();
  });
}


/**
 * Performs the transition between the default content and the AJAX content.
 */
 function perform_transition(show_ajax) {
   if (show_ajax === true) {
     new_height = $('#content-a-ajax').outerHeight();
     default_x = -950;
     ajax_x = 0;
   } else {
     new_height = $('#content-a').outerHeight();
     default_x = 0;
     ajax_x = 950;
   }

   if (new_height >= $('#content-a-dummy').outerHeight()) {
     $('#content-a-dummy').animate({'height' : new_height + 'px'}, height_duration, height_easing, function() {
       $('#content-a').animate({'left' : default_x + 'px'}, scroll_duration, scroll_easing);
       $('#content-a-ajax').animate({'left' : ajax_x + 'px'}, scroll_duration, scroll_easing);
     });
   } else {
     $('#content-a').animate({'left' : default_x + 'px'}, scroll_duration, scroll_easing);
     $('#content-a-ajax').animate({'left' : ajax_x + 'px'}, scroll_duration, scroll_easing, function() {
       $('#content-a-dummy').animate({'height' : new_height + 'px'}, height_duration, height_easing);
     });
   }
 }


/**
 * Handles the response from our AJAX request.
 */
function display_course_details(data) { 
  // Load the returned AJAX content into the content-a-ajax DIV.   
  $('#content-a-ajax').html(data);
  
  // Hijack the "back" link in the new AJAX content.
  $('#content-a-ajax p.back a').click(function(e) {
    // Scroll back to the default content.
    perform_transition();
    
    // Prevent default link behaviour.
    e.preventDefault();
    e.stopPropagation();
  });
  
  // Hide the loading animation.
  $(window).unbind('scroll').unbind('resize');		
	$('div#ajax-loading').fadeOut('fast');
  
  // Display the AJAX content.
  perform_transition(true);
}


// Start the ball rolling.
$(document).ready(init);