(function($){
	/**
	 * Gallery plugin
	 * @param {Object} settings
	 */
	$.fn.gallery = function(settings){
		var options = {
			mouseover: 1,
			mouseout: 0.5,
			duration: 5000
		};
			
		return this.each(function(){
			var $gallery = $(this);
			var $canvas = $gallery.find('.gallery-canvas');
			var $stripHolder = $gallery.find('.gallery-thumbs');
			var $strip = $gallery.find('.gallery-thumbs-strip');
			var $images = $strip.find('a');
			var $leftButton = $('<a class="gallery-thumbnail-slider left-button" />').html('left').appendTo($stripHolder);
			var $rightButton = $('<a class="gallery-thumbnail-slider right-button" />').html('right').appendTo($stripHolder);
			var $loading = $gallery.find('.gallery-loading');
			
			var thumbWidth = $images.width();
			var stripOffset = $strip.width() - $stripHolder.width();
			var loaded = [];
			var total = $images.length;
			var cycleAnimId = 0;
			var currentIndex = 0;
			var nextIndex = 0;
			var autoRotate = false;
			var isLoading = false;
			
			if (stripOffset > 0) {
				$stripHolder.hover(function(){
					$leftButton.fadeIn();
					$rightButton.fadeIn();
				}, function(){
					$leftButton.fadeOut();
					$rightButton.fadeOut();
				});
				
				$leftButton.click(function(event){
					moveStrip(0);
					return event.preventDefault();
				});
				
				$rightButton.click(function(event){
					moveStrip(- stripOffset);
					return event.preventDefault();
				});
			}
			
			function moveStrip(left) {
				var cpos = $strip.position();
				if (cpos.left != left) {
					$strip.animate({
						'left': left + 'px'
					}, 'normal');
				}
			}
			
			$images.each(function(i, item){
				$(this).bind('click', { index: i }, function(event){
					clearInterval(cycleAnimId);
					nextIndex = event.data.index;
					if (!isLoading) {
						rotateImages();
					}
					return event.preventDefault();
				}).bind('mouseover', { index: i }, function(event){
					$(this).fadeTo('fast', options.mouseover);
				}).bind('mouseout', { index: i }, function(event){
					if(event.data.index != currentIndex) $(this).fadeTo('fast', options.mouseout);
				});
			});
						
			function rotateImages() {
				clearInterval(cycleAnimId);
				if (loaded[nextIndex]) {
					animate();
				} else {
					if ($loading) {
						$loading.show();
					}
					$('<img />').load(function(event){
						isLoading = false;
						if ($loading) {
							$loading.hide();
						}
						loaded[nextIndex] = $(this);
						animate();
					}).attr('src', $($images[nextIndex]).attr('href'));
					isLoading = true;
				}
			}
			
			function animate() {
				$nextImage = loaded[nextIndex];
				$canvas.prepend($nextImage.hide());	
				
				if ($canvas.find('img').length > 1) {
					$canvas.find('img:last').fadeOut('normal', function(event){
						$(this).remove();
					});
				}
				
				currentIndex = nextIndex;
				
				nextIndex++;
				if(nextIndex > (total - 1)) nextIndex = 0;
				
				// Moving strip to end
				var viewWidth = thumbWidth * (currentIndex + 1);
				if(viewWidth > $stripHolder.width()) {
					moveStrip(- stripOffset);
				}
				
				// Moving strip to 0
				if(currentIndex == 0) {
					moveStrip(0);
				}
					
				$nextImage.fadeIn('normal', function(){
					if (total == 1) return;
					if (!autoRotate) return;
					cycleAnimId = setInterval(function(){
						rotateImages();
					}, options.duration);
				});
				
				$images.each(function(i, item){
					$.log(i);
					if(i == currentIndex) {
						$(this).addClass('selected');
						$(this).fadeTo('fast', options.mouseover)
					} else {
						$(this).removeClass('selected');
						$(this).fadeTo('fast', options.mouseout)
					}
				});
			}
			
			rotateImages();
		});
	}
})(jQuery);