// *****************************************************************************
// Chaos Class
// *****************************************************************************

/**
 * @class Chaos
 * @constructor
 * @description Provides common client side behavior for boulderchaos.com.
 */

var Chaos_Class = function() {

	//
	// Data members
	//
	
	this.timeoutInterval = 5000;

	//
	// Element handles
	//
	
	this.activeImage = null; 
	this.hiddenImage = null;

};



// *****************************************************************************
// Event Handling methods
// *****************************************************************************

Chaos_Class.prototype.initEvents = function() {

	var that = this;

	//
	// Get element handles
	// 
	
	this.activeImage = $("img.activeImage");;
	this.hiddenImage = $("img.hiddenImage");;

	//
	// Bind events
	// 
	
	$("a.descriptionLink").unbind("click").bind("click", function(e) { that.descriptionLink_click(e); });

	//
	// Update the comment link and preload the images so the slide show can start.
	//
	
	this.writeCommentLink();	
	this.preloadImages();

}; // end Chaos_Class.initEvents()


/**
 * @description When a description link is clicked on hide or show the event details.
 */

Chaos_Class.prototype.descriptionLink_click = function(e) {

	e.preventDefault();

	var aElem = $(e.target);
	var li = $(aElem).closest("li");
	var ul = $(li).closest("ul");
	var description = $(li).find("div.description");

	if ($(li).hasClass("collapsed")) {
		$(description).slideDown(
			function() { 
				$(li).removeClass("collapsed").addClass("expanded") 
				$(aElem).html("(Show less ↑)");
			}
		);
	}
	else {
		$(description).slideUp(
			function() { 
				$(li).removeClass("expanded").addClass("collapsed"); 
				$(aElem).html("(Show more ↓)");
			}
		);
	}

};// end Chaos_Class.descriptionLink_click()



// *****************************************************************************
// Rendering methods
// *****************************************************************************

Chaos_Class.prototype.writeCommentLink = function() {

	var aCommentLink = $("#a-CommentLink");

	$(aCommentLink).attr("href", "mailto:emailgnome@boulderchaos.org");
	$(aCommentLink).html("emailgnome@boulderchaos.org");
};


/**
 * @description Rotate the images displayed in the sub header, fading the active
 * image out into the hidden one; and then swapping the active and hidden images
 * in preparation for the next iteration.
 */

Chaos_Class.prototype.rotateImages = function() { 

	//
	// Get the next image index
	//

	flickrPhotoIndex = flickrPhotoIndex + 1;

	if (flickrPhotoIndex >= flickrPhotos.length) {
		flickrPhotoIndex = 0;
	}

	//
	// Load the next image and set up the onload event handler
	//

	$(this.hiddenImage).attr("src", flickrPhotos[flickrPhotoIndex]);

	//
	// Fade out the active image and then:
	//
	// 1) Then swap the active and hidden images, making the hidden image the new active image.
	// 2) Get fresh handles to the active and hidden images for the next iteration.
	// 3) Ensure both images are dispayed in preparation for the next iteration.
	//
	
	var that = this;
	
	$(this.activeImage).fadeOut(
		1000,
		function() {
			// The active image is has been set to display none by the fade out so we 
			// can make it the hidden image with out accidentally showing it again!
			
			$(that.activeImage).removeClass("activeImage").addClass("hiddenImage");
			$(that.hiddenImage).removeClass("hiddenImage").addClass("activeImage");

			that.activeImage = $("img.activeImage");;
			that.hiddenImage = $("img.hiddenImage");;

			$(that.activeImage).css("display", "block");
			$(that.hiddenImage).css("display", "block");

			window.setTimeout(function() { that.rotateImages(); }, that.timeoutInterval);
		}
	);

}; // end Chaos_Class.rotateImages()



// *****************************************************************************
// Data methods
// *****************************************************************************

/**
 * @description Preload the images in prepartion to start roating images
 * in the sub header, and once all are loaded rotate the image and then
 * continue rotating them every 10 seconds.  
 */

Chaos_Class.prototype.preloadImages = function() {

	var body = $("body");
	var that = this;
	var index = 0;

	var fCallback = function() {
		index++;

		if (index < flickrPhotos.length) {
			$("<img>")
				.load(fCallback)
				.attr("style", "display: none;")
				.attr("src", flickrPhotos[index]);
		}
		else {
			window.setTimeout(function() { that.rotateImages(); }, that.timeoutInterval);
		}
	};

	//
	// Note that the load handler is set before specifying the image element's src attribute
	// because if the image is being loaded from cache, IE (and Opera too) will load the image,
	// instantly. In fact, it will have finished loading the image before the load event 
	// handler is even wired up, which means, it won't fire!
	// 	
	// See: http://blog.stchur.com/2008/02/26/ie-quirk-with-onload-event-for-img-elements/
	//

	$('<img>')
		.load(fCallback)
		.attr("style", "display: none;")
		.attr("src", flickrPhotos[index]);

}; // end Common.preloadImages()