var MediaViewer = function () {
	/*
	 * Create the Modules variables available to itself.
	 * Getters and setters will be defined as needed.
	 */ 
	var self = this,
		viewer = null,
		currentGallery = null,
		/*
		 * An object of key value pairs that defines default acceptable nodes for MediaViewer's use
		 */ 
		defaults = {
			'viewer' : '#media-viewer',
			'galleries' : '.galleries'
		},
		/*
		 * Internal reference to be used in any instance where things should be the same.
		 * @extends defaults and config on initialization
		 */ 
		options = {},
	
	/* 
	 * Delegates events for clicking and opening a gallery through the MediaViewer
	 * @params container This is usually given as whatever the gallery container is (default galleryGrid)
	 */
	_setGalleries = function ( container ) {
		$( container ).delegate('.viewGallery', 'click', function ( event ) {
			currentGallery = $(this).parent('.gallery').data('id');
			open();
		});
		
		$( container ).delegate('.gallery', 'mouseover', function ( event ) {
			$(this).css('cursor', 'pointer');
		});
		
		$( container ).delegate('.gallery', 'mouseout', function ( event ) {
			$(this).css('cursor', 'default');
		});
	},
	
	/*
	 * Open the current instance of the media viewer and retrieve whatever content is available
	 * based on the selected gallery
	 */
	open = function () {
		$.fn.colorbox({
			inline : true, 
			href   : "div#media-dialog",
			onLoad : function () {
					$( 'div#media-dialog' ).show();
				},
			onCleanup : function () {
					/*
					 * Clear out the info dialog to prevent artifacts and set its display back to none
					 */
					$( 'div#media-dialog' ).html('');
					$( 'div#media-dialog' ).hide();
				}
			});
		
		$.get(baseUrl + 'gallery/index/view',
		{
			gallery : currentGallery,
			width   : '600px',
			height  : '500px'
		},
		function ( result ) {				
			$( 'div#media-dialog' ).html( result );
			$('div#media-dialog').colorbox.load();
		}, 'html');
		/*
		self.viewer.dialog('open');
		$( options.viewer ).html('<div class="loading"><p>Loading...</p></div>');
		
		// Retrieve the gallery grid for this gallery
		$.get(
			baseUrl + 'gallery/ajax/gallery-grid', 
			{
				gallery : currentGallery
			},
			function ( result ) {				
				$( options.viewer ).html( result );
			}
		, 'html');
		*/
	},
	
	/*
	 * Initializes the media viewer, setup the jquery ui dialog, and galleries
	 * @params config An array of key value pairs that can be used to customize this instance
	 */
	init = function ( config ) {
		$.extend( options, defaults, config );

		// create dialog div if it does not already exist
		if(!$('#media-dialog').length){
			$('body').append('<div id="media-dialog"></div>');
		}
		
		// Create a viewer if it doesn't exist
		if ( $( options.viewer ).length == 0 ) {
			$('body').append('<div id="' + options.viewer.split('#')[1] + '" style="display:none;"></div>');
		}
		
		$( options.viewer ).dialog({
			autoOpen : false,
			title : 'Media Gallery Viewer',
			width : 800,
			height : 400,
			minWidth : 800,
			minHeight : 400,
			zIndex: 9000,
			modal: true
		});
		
		self.viewer = $( options.viewer );
		_setGalleries( options.galleries );
	};
	
	/*
	 * Return publicly accessible members
	 */
	return {
		init : init
	}
}

