$(function() {
	// ======================= imagesloaded plugin ===============================
	// https://github.com/desandro/imagesloaded

	// $('#my-container').imagesloaded(myfunction)
	// execute a callback when all images have loaded.
	// needed because .load() doesn't work on cached images

	// callback function gets image collection as argument
	//  this is the container

	// original: mit license. paul irish. 2010.
	// contributors: oren solomianik, david desandro, yiannis chatzikonstantinou

	$.fn.imagesloaded 		= function( callback ) {
	var $images = this.find('img'),
		len 	= $images.length,
		_this 	= this,
		blank 	= 'data:image/gif;base64,r0lgodlhaqabaiaaaaaaap///ywaaaaaaqabaaacauwaow==';

	function triggercallback() {
		callback.call( _this, $images );
	}

	function imgloaded() {
		if ( --len <= 0 && this.src !== blank ){
			settimeout( triggercallback );
			$images.off( 'load error', imgloaded );
		}
	}

	if ( !len ) {
		triggercallback();
	}

	$images.on( 'load error',  imgloaded ).each( function() {
		// cached images don't fire load sometimes, so we reset src.
		if (this.complete || this.complete === undefined){
			var src = this.src;
			// webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
			// data uri bypasses webkit log warning (thx doug jones)
			this.src = blank;
			this.src = src;
		}
	});

	return this;
	};

	// gallery container
	var $rggallery			= $('#rg-gallery'),
	// carousel container
	$escarousel			= $rggallery.find('div.es-carousel-wrapper'),
	// the carousel items
	$items				= $escarousel.find('ul > li'),
	// total number of items
	itemscount			= $items.length;
	
	gallery				= (function() {
			// index of the current item
		var current			= 0, 
			// mode : carousel || fullview
			mode 			= 'carousel',
			// control if one image is being loaded
			anim			= false,
			init			= function() {
				
				// (not necessary) preloading the images here...
				$items.add('<img src="'+_mobanurl+'res/images/ajax-loader.gif"/><img src="'+_mobanurl+'res/images/black.png" />').imagesloaded( function() {
					// add options
					_addviewmodes();
					
					// add large image wrapper
					_addimagewrapper();
					
					// show first image
					_showimage( $items.eq( current ) );
						
				});
				
				// initialize the carousel
				if( mode === 'carousel' )
					_initcarousel();
				
			},
			_initcarousel	= function() {
				
				// we are using the elastislide plugin:
				// http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/
				$escarousel.show().elastislide({
					imagew 	: 65,
					onclick	: function( $item ) {
						if( anim ) return false;
						anim	= true;
						// on click show image
						_showimage($item);
						// change current
						current	= $item.index();
					}
				});
				
				// set elastislide's current to current
				$escarousel.elastislide( 'setcurrent', current );
				
			},
			_addviewmodes	= function() {
				
				// top right buttons: hide / show carousel
				
				var $viewfull	= $('<a href="#" class="rg-view-full"></a>'),
					$viewthumbs	= $('<a href="#" class="rg-view-thumbs rg-view-selected"></a>');
				
				$rggallery.prepend( $('<div class="rg-view"/>').append( $viewfull ).append( $viewthumbs ) );
				
				$viewfull.on('click.rggallery', function( event ) {
						if( mode === 'carousel' )
							$escarousel.elastislide( 'destroy' );
						$escarousel.hide();
					$viewfull.addclass('rg-view-selected');
					$viewthumbs.removeclass('rg-view-selected');
					mode	= 'fullview';
					return false;
				});
				
				$viewthumbs.on('click.rggallery', function( event ) {
					_initcarousel();
					$viewthumbs.addclass('rg-view-selected');
					$viewfull.removeclass('rg-view-selected');
					mode	= 'carousel';
					return false;
				});
				
				if( mode === 'fullview' )
					$viewfull.trigger('click');
					
			},
			_addimagewrapper= function() {
				
				// adds the structure for the large image and the navigation buttons (if total items > 1)
				// also initializes the navigation events
				
				$('#img-wrapper-tmpl').tmpl( {itemscount : itemscount} ).appendto( $rggallery );
				
				if( itemscount > 1 ) {
					// addnavigation
					var $navprev		= $rggallery.find('a.rg-image-nav-prev'),
						$navnext		= $rggallery.find('a.rg-image-nav-next'),
						$imgwrapper		= $rggallery.find('div.rg-image');
						
					$navprev.on('click.rggallery', function( event ) {
						_navigate( 'left' );
						return false;
					});	
					
					$navnext.on('click.rggallery', function( event ) {
						_navigate( 'right' );
						return false;
					});
				
					// add touchwipe events on the large image wrapper
					$imgwrapper.touchwipe({
						wipeleft			: function() {
							_navigate( 'right' );
						},
						wiperight			: function() {
							_navigate( 'left' );
						},
						preventdefaultevents: false
					});
				
					$(document).on('keyup.rggallery', function( event ) {
						if (event.keycode == 39)
							_navigate( 'right' );
						else if (event.keycode == 37)
							_navigate( 'left' );	
					});
					
				}
				
			},
			_navigate		= function( dir ) {
				
				// navigate through the large images
				
				if( anim ) return false;
				anim	= true;
				
				if( dir === 'right' ) {
					if( current + 1 >= itemscount )
						current = 0;
					else
						++current;
				}
				else if( dir === 'left' ) {
					if( current - 1 < 0 )
						current = itemscount - 1;
					else
						--current;
				}
				
				_showimage( $items.eq( current ) );
				
			},
			_showimage		= function( $item ) {
				
				// shows the large image that is associated to the $item
				
				var $loader	= $rggallery.find('div.rg-loading').show();
				
				$items.removeclass('selected');
				$item.addclass('selected');
					 
				var $thumb		= $item.find('img'),
					largesrc	= $thumb.data('large'),
					title		= $thumb.data('description');
				
				$('<img/>').load( function() {
					
					$rggallery.find('div.rg-image').empty().append('<img src="' + largesrc + '"/>');
					
					if( title )
						$rggallery.find('div.rg-caption').show().children('p').empty().text( title );
					
					$loader.hide();
					
					if( mode === 'carousel' ) {
						$escarousel.elastislide( 'reload' );
						$escarousel.elastislide( 'setcurrent', current );
					}
					
					anim	= false;
					
				}).attr( 'src', largesrc );
				
			},
			additems		= function( $new ) {
			
				$escarousel.find('ul').append($new);
				$items 		= $items.add( $($new) );
				itemscount	= $items.length; 
				$escarousel.elastislide( 'add', $new );
			
			};
		
		return { 
			init 		: init,
			additems	: additems
		};
	
	})();

	gallery.init();
	
	/*
	example to add more items to the gallery:
	
	var $new  = $('<li><a href="#"><img src="images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="from off a hill whose concave womb reworded" /></a></li>');
	gallery.additems( $new );
	*/
});