var MediaGalleryInterface = new Class({

	options: {
		Webroot:				 Class.empty,				// REQUIRED: The webroot of the page calling this script
		Pageroot:				 Class.empty,				// REQUIRED: The filename and extension of the page calling this script
		MediaURL:				 Class.empty,				// REQUIRED: The media url for this site
		PaginationWrapper:		'content_wrapper',			// REQUIRED: ID of the wrapper that we will dump our AJAX paginated results back into
		ContentWrapper:		'content_loading_wrapper',	// REQUIRED: ID of the wrapper that we will dump our AJAX content result back into
		NavTabs:				'.nav_tab',				// REQUIRED: Class of all navigation tab elements
		PrevBtn: 				'Prev',					// REQUIRED: ID of the Prev link/button
		NextBtn:				'Next',					// REQUIRED: ID of the Next link/button
		AJAXLinks:			'.AJAXLink',				// REQUIRED: Class of all AJAX medai gallery links
		PaginationOverlay:		'library_loading',			// REQUIRED: ID of the pagination overlay element
		ViewMoreLink:			'view_more',				// REQUIRED: ID of the view more link ( Appears on the detail page to jump back to the listings/landing )
		GalleryPhotoWrapper:	'gallery_image_container',	// REQUIRED: ID of the container that holds the large active gallery photo
		GalleryThumbs:			'.gallery_thumb'			// REQUIRED: Class of all thumbs for a gallery
	},
	
	initialize: function( options ) {
		
		this.setOptions( options );

		this.Webroot			=     this.options.Webroot;
		this.Pageroot			=     this.options.Pageroot;
		this.MediaURL			=     this.options.MediaURL;
		this.PaginationWrapper	=     this.options.PaginationWrapper;
		this.ContentWrapper		=     this.options.ContentWrapper;
		this.NavTabs			= $$( this.options.NavTabs );
		this.PrevBtn			=  $( this.options.PrevBtn );
		this.NextBtn			=  $( this.options.NextBtn );
		this.AJAXLinks			= $$( this.options.AJAXLinks );
		this.PaginationOverlay	=  $( this.options.PaginationOverlay );
		this.ViewMoreLink		=  $( this.options.ViewMoreLink );
		this.GalleryPhotoWrapper	=  $( this.options.GalleryPhotoWrapper );
		this.GalleryThumbs		= $$( this.options.GalleryThumbs );

		// Set Nav Tab button events
		if( this.NavTabs )
			for( var i = 0; i < this.NavTabs.length; i++ ) {
				var Name	= this.NavTabs[i].getAttribute( 'name' ).split( '_' );
				var Type	= Name[0];
				var Page	= Name[1];
				var Count	= Name[2];
				this.NavTabs[i].addEvent( 'click', this.FirePagination.bindWithEvent( this, [ Type, Page, Count, true ] ) );
			}
		
		// Set next button pagination
		if( this.PrevBtn ) {
			var Name	= this.PrevBtn.getAttribute( 'name' ).split( '_' );
			var Type	= Name[0];
			var Page	= Name[1];
			var Count	= Name[2];
			this.PrevBtn.addEvent( 'click', this.FirePagination.bindWithEvent( this, [ Type, Page, Count, false ] ) );
		}

		// Set previous button pagination
		if( this.NextBtn ) {
			var Name	= this.NextBtn.getAttribute( 'name' ).split( '_' );
			var Type	= Name[0];
			var Page	= Name[1];
			var Count	= Name[2];
			this.NextBtn.addEvent( 'click', this.FirePagination.bindWithEvent( this, [ Type, Page, Count, false ] ) );
		}
		
		// Set up AJAX link events for the detail page
		if( this.AJAXLinks ) {
			if( this.PaginationOverlay ) {
				this.LoadingFx = new Fx.Tween( this.PaginationOverlay, { duration: '250', link: 'chain' } );
				this.LoadingFx.start( 'opacity', '0', '0' );
				this.PaginationOverlay.setStyle( 'visibility', 'visible' );
			}
			for( var i = 0; i < this.AJAXLinks.length; i++ ) {
				var Name	= this.AJAXLinks[i].getAttribute( 'name' ).split( '_' );
				var ID	= Name[0];
				var Type	= Name[1];
				this.AJAXLinks[i].addEvent( 'click', this.FireAJAXLink.bindWithEvent( this, [ ID, Type ] ) );
			}
		}
		
		// Set up the gallery image swapping events for the detail page
		if( this.GalleryThumbs )
			for( var i = 0; i < this.GalleryThumbs.length; i++ )
				this.GalleryThumbs[i].addEvent( 'click', this.GalleryPhotoSwap.bindWithEvent( this, [ i, this.GalleryThumbs[i].getAttribute( 'rel' ) ] ) );
		
	},
	
	GalleryPhotoSwap: function ( event, i, File ) {
		
		this.GalleryPhotoWrapper.set( 'html', '<img src="' + this.MediaURL + 'media_center/images/rendered/Media/large/' + File + '" alt="' + File + '" />' );
		
		for( var j = 0; j < this.GalleryThumbs.length; j++ )
			if( this.GalleryThumbs[j].hasClass( 'active' ) )
				this.GalleryThumbs[j].removeClass( 'active' );
		
		this.GalleryThumbs[i].addClass( 'active' );
		
		event.stop();
		
	},
		
	FirePagination: function( event, Type, Page, Count, ResetNav ) {
		
		var TheURL = this.Webroot + this.Pageroot + '?AJAXRequest=Pagination&CurrentType=' + Type + '&CurrentPage=' + Page + '&ItemsPerPage=' + Count;
		
		var myRequest = new Request.HTML({
			url:			TheURL,
			update:		this.PaginationWrapper,
			method:		'post',
			link:		'ignore',
			onRequest:	function(){
							if( this.LoadingFx )
								this.LoadingFx.start( 'opacity', '0', '1' );
						}.bind( this ),
			onComplete:	function(){
							if( this.LoadingFx )
								this.LoadingFx.start( 'opacity', '1', '0' );
						}.bind( this ),
			onSuccess:	function(){
							this.ResetNav( ResetNav, Type );
							this.ReInitialize( 'pagination' );
						}.bind( this ),
			onFailure:	function(){}
		}).send();

		event.stop();
		
	},
	
	FireAJAXLink: function( event, ID, Type ) {
		
		var TheURL = this.Webroot + this.Pageroot + '?AJAXRequest=Content&ContentType=' + Type + '&ContentID=' + ID;

		var myRequest = new Request.HTML({
			url:			 TheURL,
			update:		 this.ContentWrapper,
			method:		'post',
			link:		'ignore',
			onRequest:	 function(){},
			onComplete:	 function(){},
			onSuccess:	 function(){ this.ReInitialize( 'gallery' ); }.bind( this ),
			onFailure:	 function(){}
		}).send();
		
		event.stop();
		
	},
	
	ResetNav: function( ResetNav, Type ) {
	
		if( ResetNav ) {
			
			if( this.NavTabs ) {
				
				for( var i = 0; i < this.NavTabs.length; i++ )
					this.NavTabs[i].removeClass( 'active' );
					
				if( $( Type ) )
					$( Type ).addClass( 'active' );
			
			}
			
			if( this.ViewMoreLink )
				this.ViewMoreLink.setAttribute( 'href', this.Webroot + 'Media-Gallery.html&Display=' + Type );
				
		}
	
	},
	
	ReInitialize: function( ResetWhat ) {
		
		this.PrevBtn			= $( this.options.PrevBtn );
		this.NextBtn			= $( this.options.NextBtn );
		this.AJAXLinks			= $$( this.options.AJAXLinks );
		this.GalleryPhotoWrapper	=  $( this.options.GalleryPhotoWrapper );
		this.GalleryThumbs		= $$( this.options.GalleryThumbs );

		if( ResetWhat == 'pagination' ) {

			if( this.PrevBtn ) {
				var Name	= this.PrevBtn.getAttribute( 'name' ).split( '_' );
				var Type	= Name[0];
				var Page	= Name[1];
				var Count	= Name[2];
				this.PrevBtn.addEvent( 'click', this.FirePagination.bindWithEvent( this, [ Type, Page, Count ] ) );
			}
	
			if( this.NextBtn ) {
				var Name	= this.NextBtn.getAttribute( 'name' ).split( '_' );
				var Type	= Name[0];
				var Page	= Name[1];
				var Count	= Name[2];
				this.NextBtn.addEvent( 'click', this.FirePagination.bindWithEvent( this, [ Type, Page, Count ] ) );
			}
	
			if( this.AJAXLinks ) {
				for( var i = 0; i < this.AJAXLinks.length; i++ ) {
					var Name	= this.AJAXLinks[i].getAttribute( 'name' ).split( '_' );
					var ID	= Name[0];
					var Type	= Name[1];
					this.AJAXLinks[i].addEvent( 'click', this.FireAJAXLink.bindWithEvent( this, [ ID, Type ] ) );
				}
			}

		} else if( ResetWhat == 'gallery' ) {

			if( this.GalleryThumbs )
				for( var i = 0; i < this.GalleryThumbs.length; i++ )
					this.GalleryThumbs[i].addEvent( 'click', this.GalleryPhotoSwap.bindWithEvent( this, [ i, this.GalleryThumbs[i].getAttribute( 'rel' ) ] ) );

		}

	}
	
});


// /////////////////////////////////////////////////////////////////////////////// // IMPLMENTATION //


MediaGalleryInterface.implement( new Options );

