(function($) {
	$.fn.SlidingImages = function(settings) {
		var config = {
			slidespeed : 500,
			width : '100%',
			height : '540px',
			easing : 'easeInOutCubic'
		};
		
		if (settings) $.extend(config, settings);
		
		this.each(function() {
			var $this = $(this);
			var _inspeed = settings.slidespeed;
			var _outspeed = _inspeed * 2;
			var _maskwidth = settings.width;
			var _maskheight = settings.height;
			var _lowopacity = 0.2;
			var _midopacity = 0.6;
			var _easing = settings.easing;
			
			var galleryopen = false;
			
			var thisTarget = $(this).attr('id');
			
			$('#nav li a').click(function() {
				
				var thisNumber = $(this).parent('li').index();
				if( $(this).attr('href') == '#'+thisTarget ) {
					waitLoad();
					galleryopen = true;
				} else{
					$this.parent('.image-mask').fadeOut('normal');
					galleryopen = false;
				}
			});
			
			
			
			
			$(this).wrap('<div class="image-mask"></div>'); // Wrap image container in mask div.
			$('.image-mask').hide();
			
			//Set css of the mask div.
			$(this).parent('.image-mask').css({
				width : _maskwidth,
				height : _maskheight,
				overflow : 'hidden',
				position: 'absolute',
				left : '0%',
				top: '115px'/*,
				'backgroundColor' : '#222'*/
			});
			
			//Set css of the image container.
			$(this).css({
				position : 'absolute',
				width: '30000px'
			});
			
			//Set css of the images.
			$(this).children('img').css({
				opacity : _lowopacity,
				cursor : 'pointer'
			});
			// Set img src to alt attribute.
			$(this).children('img').each(function(){
				$(this).attr('alt', $(this).attr('src'))
			});
			
			// Replace image with loading image.
			$(this).children('img').attr('src', './images/elements/loading.gif');
			// Add loading class to images.
			$(this).children('img').addClass('loading');
			// Setup image nav box.
			var navBox = '<ul></ul>';
			$(this).parent('.image-mask').append(navBox);
			$(this).children('img') .each(function(index) {
				var navItem = '<li><a href="#"></a></li>';
				$this.parent('.image-mask').children('ul').append(navItem);
			});
			
			//ADD LOADING CLASS TO IMAGE-MASK
			$(this).parent('.image-mask').addClass('loading');
			
			
			$(this).parent('.image-mask').children('ul').children('li').children('a').css({
				display: 'block', 
				height: '20px', 
				width : '20px',
				'border-bottom' : '1px solid #111',
				opacity : _lowopacity
			});
			$(this).parent('.image-mask').children('ul').children('li').css({
				display: 'block', 
				float : 'left',
				'margin-left' : '1px'
			});
			$(this).parent('.image-mask').children('ul').css({
				display: 'block', 
				position : 'absolute',
				top : '500px',
				left : '216px'
			});
			
			$(this).children('img').bind({
				
				click:function(){
					var imgNumber = $(this).index();
					var imgPos = $(this).position().left;
					if ( $this.children('img.current').width != null ) {
						
						$this.children('img.current').fadeTo(_outspeed,_lowopacity);
						$this.children('img.current').removeClass('current');
					};
					$this.parent('.image-mask').children('ul').children('li').eq(imgNumber).children('a').trigger('fromimage');
					
					
					$(this).addClass('current');
					$this.animate({
						'margin-left' : -imgPos+216
					},_outspeed, _easing, function(){  $this.children('img.current').fadeTo(_inspeed,1);});
				},
				mouseenter:function(){
					if($(this).hasClass('current')){return;}
					$(this).stop().fadeTo(_inspeed,_midopacity);
				},
				mouseleave:function(){
					if($(this).hasClass('current')){return;}
					$(this).stop().fadeTo(_outspeed,_lowopacity);
				}
			});
			
			$(this).parent('.image-mask').children('ul').children('li').children('a').bind({
				click:function(){
					var thisNumber = $(this).parent('li').index();
					$this.children('img').eq(thisNumber).trigger('click');
				},
				mouseenter:function(){
					if($(this).hasClass('current')){return;}
					$(this).stop().fadeTo(_inspeed,_midopacity);
				},
				mouseleave:function(){
					if($(this).hasClass('current')){return;}
					$(this).stop().fadeTo(_outspeed,_lowopacity);
				},
				fromimage:function(){
					if ($this.parent('.image-mask').children('ul').children('li').children('a.current').width() != null ) {
						$this.parent('.image-mask').children('ul').children('li').children('a.current').stop().fadeTo(_outspeed,_lowopacity);
						$this.parent('.image-mask').children('ul').children('li').children('a.current').removeClass('current');
					};
					$(this).addClass('current');
					$(this).stop().fadeTo(_inspeed, 1);
				}
			});
			
			// WAIT FOR IMAGES TO LOAD 
			function waitLoad() {
				var loadNumber = $this.children('img.loading:first').index();
				if( ( loadNumber >= 3 ) || (loadNumber == -1) ) {
					$this.parent('.image-mask').children('ul').children('li:first').children('a').click();
					$this.parent('.image-mask').fadeTo('normal',1);
					if (loadNumber != -1) { loadtheimage(); }; //Start image loading if not all images has been loaded.
				} else { loadtheimage(); } // End else
			}
			
			function loadtheimage() {
				var number = $this.children('img.loading:first').index();
				if(number == 3) {
					$this.parent('.image-mask').stop().children('ul').children('li:first').children('a').click();
					$this.parent('.image-mask').stop().fadeIn('normal');
					
				}
				
				var img = new Image();
				img.onload = function() {
					$this.children('img').eq(number).attr('src', url);
					$this.children('img').eq(number).removeClass('loading');
					if( (number != -1) || galleryopen ) {
						loadtheimage();
					} else {
						
					}
				}
				if (number != -1) {
					var url = $this.children('img.').eq(number).attr('alt');
					img.src = url;
				};
			}
		});
		return this;
	};
})(jQuery);