// Display a slideshow of pictures.
// {"number":"1","name":"Week 1","image":"images/modern.200408.jpg" },
$(document).ready(function() {
    var curWeek = 0; 	/* The Current week being shown. */
	var maxWeek = 0; 	/* The Newest week */ 
	var jsonObj; 		/* Ajax Request */

 	jQuery.ajax({ 	url: '/media/slidebox/data.json',
					dataType: 'json',
					success: function(msg){ setupWeeks(msg); } });

	var setupWeeks = function(commands) {
 		jsonObj = commands;	// Save this for later use.

		// Set to the most current week.
		maxWeek = curWeek = jsonObj.weeks.length - 1;

		var week = jsonObj.weeks[maxWeek];

		// Preloads all of the images.
  		for(var i = 0; i < maxWeek; i++) {
    		jQuery("<img>").attr("src", jsonObj.weeks[i].image);
	  	}

		disable( $('.next') );
	
		$('#SlideBoxImage').hide();
		$('#SlideBoxName').html( week.name );
		$('#SlideBoxImage').attr({	src: week.image,
									alt: week.name 	});
		$('#SlideBoxImage').show("normal");
		
	};

	/* Sets the enabled classes */
	var enable = function(element) {
		$(element).removeClass( 'sbdisable' ); 
		$(element).addClass( 'sbenable' );
	};

	/* Sets the disabled class */
	var disable = function(element) {
		$(element).removeClass( 'sbenable' );
		$(element).addClass( 'sbdisable' ); 
	};

	/* Show the next week */
	var nextWeek = function() {
		curWeek += 1 ;		

		if ( curWeek > maxWeek ) {
			curWeek = maxWeek;
	
			disable( $('.next') );
		}
		else {
			var week = jsonObj.weeks[curWeek];

			enable( $('.prev') );

			if ( curWeek == maxWeek ) {
				disable( $('.next') );
			}

			$('#SlideBoxImage').hide();
			$('#SlideBoxName').html( week.name );
			$('#SlideBoxImage').attr({ src: week.image, alt: week.name });
			$('#SlideBoxImage').fadeIn("normal");
		}
	};

	/* Show the previous week */
	var prevWeek = function() {
		curWeek -= 1;

		if ( curWeek < 0 ) {
			curWeek = 0;
		}
		else {
			var week = jsonObj.weeks[curWeek];

			enable( $('.next') );

			if ( curWeek == 0 ) {
				disable( $('.prev') );
			}

			$('#SlideBoxImage').hide();
			$('#SlideBoxName').html( week.name );
			$('#SlideBoxImage').attr({ src: week.image, alt: week.name });
			$('#SlideBoxImage').fadeIn("normal");
		}
	};

	// Register next button.
	$('.next').bind('click', function(e) { nextWeek(); });

	// Register previous button
	$('.prev').bind('click', function(e) { prevWeek(); });
});