// Show more stuff
var ShowMore = function(){

	/**
	 * Div containing photos
	 * @property {HTMLDivElement}
	 */
	this.contentDiv;
	
	/**
	 * The url to request more data from
	 * @property {String}
	 */
	this.url;
	
	/**
	 * Sorting field on the media page
	 * @property {HTMLSelectElement}
	 */
	this.sortField;
	
	/**
	 * The show more link
	 * @property {HTMLSelectElement}
	 */
	this.showMore;
	
	/**
	 * Number of items already requested
	 * @property {Number}
	 */
	this.requestSet = 2;
	
	/**
	 * Milliseconds to play each fade in animation
	 * @property {Number}
	 */
	var FADE_IN_TIME = 150;

	/**
	 * Closure
	 */
	var me = this;

	/**
	 * Create a new ShowMore
	 * @method
	 */
	this.construct = function(config){

		// Get photo grid div
		this.contentDiv = $(config.contentId);
		
		// Get show more link
		this.showMore = $(config.linkId);
		
		// Get sort field
		this.sortField = $("#sort");
		
		// The thumbnail class
		this.thumbnailClass = config.thumbnailClass;
		
		// Add sort field value to the url if it exists
		this.url = (this.sortField.length) ? config.url + this.sortField.attr("value") + "/" : config.url;
			
		// If there are less than 20 results
		if(this.contentDiv.find(this.thumbnailClass).length < 20){

			// Hide the link
			this.hide();
		
		// More than 20 results
		} else {
			
			// Attach click handler
			this.showMore.click(function(){
				
				// Inside an anonymous function to retain scope
				return me.clickHandler();
			});
		}

		// Return this instance
		return this;
	}

	/**
	 * Handler show more click
	 * @method
	 */
	this.clickHandler = function(){
		
		// Hide link
		this.showMore.addClass("loading_more");

		// Unbind click event
		this.showMore.unbind("click");
		
		// Prevent default click action
		this.showMore.click(function(){
			return false;
		});

		// Ajax /media/ for more content
		$.get(this.url, {"more": this.requestSet}, function(data){
			
			// Handle the response
			me.dataHandler(data);
		});
		
		// Prevent default action
		return false;
	}

	/**
	 * Handles data requested from the server
	 * @method
	 */
	this.dataHandler = function(data){

		// Create a temporary div
		var tempDiv = document.createElement("div");

		// Add the new content
		tempDiv.innerHTML = data;

		// Get the new divs
		var divs = $(tempDiv).find(this.thumbnailClass);
		
		// Defining the counter out here so we can access it at the end of the loop
		var i;

		// Loop through divs
		for(i = 0; i < divs.length; i++){

			// Distill iteration
			var div = $(divs[i]);

			// Hide the div initially
			div.css({display: "none"});

			// Remove it from the temp div
			div.remove();

			// Append it to the photo grid
			this.contentDiv.append(div);

			// Calculate animation delay
			delay = (i == 0) ? 1 : i * FADE_IN_TIME;

			// Using jQuery's animate method to cause a delay before fading the div in
			div.animate({dummy: 10}, delay).fadeIn(FADE_IN_TIME);
		}

		// Show the link again
		setTimeout(function(){

			// 20 results came back?
			if(divs.length == 20){
				
				// Toggle visibility
				me.showMore.removeClass("loading_more");
				
				// When the link is clicked....
				me.showMore.click(function(){

					// Handle it
					return me.clickHandler();
				});
				
			// Out of results
			} else {

				// Hide the link
				me.hide();
			}

		// After everything has animated in
		}, i * FADE_IN_TIME);

		// Setup bottom rollovers function exists?
		if(window.setup_bottom_rollovers) {
			
			// Use it
			setup_bottom_rollovers();
		}

		// Update requested items
		this.requestSet++;
	}

	/**
	 * Hide the show more link
	 * @method
	 */
	this.hide = function(){

		// Hide the link
		this.showMore.addClass("hide_more");

		// Remove click handler
		this.showMore.unbind("click");
	}

	/**
	 * Show the show more link
	 * @method
	 */
	this.show = function(){
		
		// Reset css
		this.showMore.removeClass("hide_more");
		
		// Unbind click
		this.showMore.unbind("click");
	
		// When the link is clicked....
		this.showMore.click(function(){
			
			// Handle it
			return me.clickHandler();
		});
	}
	
	/**
	 * Reset the instance
	 * @method
	 */
	this.reset = function(){

		// Reset requests
		this.requestSet = 2;
		
		// If there are less than 20 results
		if(this.contentDiv.find(this.thumbnailClass).length < 20){

			// Hide the link
			this.hide();
			
		// Otherwise....
		} else {
		
			// Unbind click
			this.show();		
		}
	}
}