(function( $ ){

  $.fn.mainGallery = function( items ) {  

    return this.each(function() {
		
		function GetItemHTML(item)
		{
			return '<img src="' + item.url + '" alt="' + item.title + '" />';
		};
		
		function BuildGallery ($MainGallery, items) {
			
			function MainGallery_initCallback(carousel) {
				$MainNext.bind('click', function() {
					carousel.next();
					return false;
				});
				
				$MainPrev.bind('click', function() {
					carousel.prev();
					return false;
				});

				$SliderNext.bind('click', function() {
					carousel.next();
					return false;
				});
				
				$SliderPrev.bind('click', function() {
					carousel.prev();
					return false;
				});
			}; 
			
			function MainGallery_itemFirstInCallback(carousel, item, idx, state) {
				var i = (idx + 2 - 1) % items.length;
				while (i < 0) i += items.length;
				
				var $dc = carousel.options.DetailInner;
				
				// Complex method
				$zIndex = 0;
				if ($dc.children().size() > 0)
					$zIndex = parseInt($dc.children().eq($dc.children().size() -1).css('z-index'));
				
				$newFrame = $('<div class="mainGalleryDetailContainerSlide" />');
				$newFrame.css('z-index', $zIndex + 1).hide();
				$newFrame.html(GetItemHTML(items[i]));
				$dc.append($newFrame);
				
				$newFrame.stop(true, true).fadeIn(1200, function() {
					if ($dc.children().size() > 1)
						$dc.children().eq(0).remove();
				});

			};
			
			function MainGallery_itemLoadCallback(carousel, state)
			{
				for (var i = carousel.first; i <= carousel.last; i++) {
					var idx = i - 1;
					while (idx < 0) idx += items.length;
					carousel.add(i, GetItemHTML(items[idx % items.length]));
				}
			};
			
			$RowContainer = $('<div class="mainGalleryRowContainer" />');
			$DetailContainer = $('<div class="mainGalleryDetailContainer" />');
			$DetailInner = $('<div class="mainGalleryDetailInner" />');
			$ListContainer = $('<div class="mainGalleryListContainer" />');
			$List = $('<ul class="mainGalleryList" />');
			$SliderPrev = $('<a class="mainGallerySliderPrevButton" href="#" />');
			$SliderNext = $('<a class="mainGallerySliderNextButton" href="#" />');
			$Overlay = $('<div class="mainGalleryOverlay" />');
			$MainPrev = $('<a class="mainGalleryPrevButton" href="#" />');
			$MainNext = $('<a class="mainGalleryNextButton" href="#" />');
			$clearMe = $('<div class="clearMe" />');
			
			$DetailContainer.append($DetailInner);
			$DetailContainer.append($MainNext);
			$DetailContainer.append($MainPrev);
			$ListContainer.append($List);
			$Overlay.append($SliderPrev);
			$Overlay.append($SliderNext);
			$ListContainer.append($Overlay);
			$MainGallery.append($ListContainer);
			$MainGallery.append($DetailContainer);
			
			$List.jcarousel({
				size: items.length,
				scroll: 1,
				vertical: true,
				wrap: 'circular', 
				buttonNextHTML: null,
				buttonPrevHTML: null,
				initCallback: MainGallery_initCallback,
				itemFirstInCallback: MainGallery_itemFirstInCallback,
				itemLoadCallback: {onBeforeAnimation: MainGallery_itemLoadCallback},
				DetailInner: $DetailInner
			});
		};
							  
		if (items.length > 0) {
			$MainGallery = $(this);
			$MainGallery.empty();
			$MainGallery.addClass('mainGallery');			
			BuildGallery($MainGallery, items);
		}
    });

  };
})( jQuery );