(function($){
	
	$.fn.imageGallery = function(options){
			var defaults = {
							//galleryWidth: 200,
							//galleryHeight: 400,
							//numColumns : 2,
							//numRows : 4
							};
							
			var $this = this;
			var numCols = 0;
			var numRows = 0;
			var numItems = 0;
			var numItemsPerPage = 0;
			var numPages = 0;
			var currentPage;
			var currentImage;
			
			var galleryWidth;
			var galleryHeight;
			var itemWidth;
			var itemHeight;
			
			var $pages = $();
			var $items;
			var $nav;
			var $overlay;
			var $template;
			
			var $setData;
			var $cb;
			var $pb;
			var $nb;
			
			/*var width = $this.width();
			var height = $this.height();
			var $items;
			var currentImage;
			var $overlay;
			var $template;
			var $setData;
			var setCount = 0;
			var $selectedImg;
			var $cb;
			var $pb;
			var $nb;
			*/
			
			
			if(options){
				$.extend(defaults,options);
			}
			
			
			
			
			
			function init(){
				galleryWidth = $this.width();
				galleryHeight = $this.height();
				itemWidth = $this.find('li:first').outerWidth(true);
				itemHeight = $this.find('li:first').outerHeight(true);
				numCols = Math.floor(galleryWidth / itemWidth);
				numRows = Math.floor(galleryHeight / itemHeight);
				numItemsPerPage = numCols * numRows;
				$items = $this.find('ul > li');
				numItems = $items.length;
				numPages = Math.ceil(numItems / numItemsPerPage);
				
				$items.each(function(i){
					$items[i] = $($items[i]);	
				})
				layoutGallery();
				createPageNav();	
			}
			
			function layoutGallery(){
				$this.find('ul:first').addClass('temp');
				if($this.css('overflowY') == 'scroll'){ $this.css('overflowY','hidden');}
				
				for(var i = 0 , j = numPages ; i < j ; i++){
						var $newPage = $('<div class="gallery_page" />').addClass(String(i));
						if(i === 0){ $newPage.addClass('active');}
						var $list = $('<ul />');
						for(var k = i * numItemsPerPage, l = (i * numItemsPerPage) + numItemsPerPage ; k < l ; k++){
							if($items[k]){
								var $item = $items[k];
								var imageFile = $item.find('a').attr('href');
								$item.bind('click',{'file':imageFile, 'index':k},handleImageSelection);
								$list.append($item);
							}
						}
						$newPage.append($list);
						$this.append($newPage);
						$pages.push($newPage);
						console.log("new page: " + $newPage + " : " + $pages.size());
				}
				currentPage = 1;
				$this.find('ul.temp').remove();
			}
			
			
			function createPageNav(){
				$nav = $('<p class="gallery_page_nav" />');
				for(var i = 1 , j = numPages ; i <= j ; i++){
					var $btn = $('<a class="gallery_page_btn" />').attr('href', '#' + i).text(i);
					if( i === 1){
						$btn.addClass('active');	
					}
					$btn.bind('click',{'page': i}, updatePage);
					$nav.append($btn);
					//$nav.append('<a class="gallery_page_btn" href=\"#' + i + '\" >' + i + '</a>'); 	
				}
				$this.append($nav);
				var x = $nav.position().left;
				var y  = $nav.position().top;
				$nav.css({'position':'absolute','top':y, 'left': x});
				$nav.css({'marginLeft': (galleryWidth - $nav.outerWidth())/2 });
				
				console.log("x" + x);
			}
			
			function updatePage(caller){
					var newPage = caller.data.page;
					console.log("update page: " + $(this).html());
					if(newPage === currentPage){ console.log('same btn');return false; };
					$($pages[currentPage -1]).removeClass('active');
					$($pages[newPage -1]).addClass('active');
					currentPage = newPage;
					
					$nav.find('a.active').removeClass('active');
					$(this).addClass('active');
					
					return false;
			}
			
			
			function handleImageSelection(caller){
				var newImage = caller.data.file;
				currentImage = caller.data.index;
				console.log("enlarge image: " + currentImage);
				
				if(!$overlay){
					console.log('hit');
					$overlay = $('<div />',{id:'overlay',class:'test',
								click:function(){
								handleCloseImage();
								}});
					$overlay.css('display','none');
					$('body').prepend($overlay);
					$overlay.fadeIn(500,function(){
						loadNewImage(newImage);
					});
				}
				return false;
			}
			
			function handleCloseImage(){
				console.log('remove overlay');
				$overlay.remove();
				$overlay = null;
				$template = null;
			}
			
			function handleNextImage(){
				console.log('load next image: ' + currentImage);
				var newImg;
				if($items[currentImage + 1]){
					newImg = $items[currentImage + 1].find('a').attr('href');
					currentImage++;
					loadNewImage(newImg);
					
				}else{
					newImg = $items[0].find('a').attr('href');
					currentImage = 0;
					loadNewImage(newImg);
					
				}
				return false;
			}
			
			function handlePrevImage(){
				console.log('load prev image');
				var newImg;
				if($items[currentImage - 1]){
					newImg = $items[currentImage - 1].find('a').attr('href');
					currentImage--;
					loadNewImage(newImg);
					
				}else{
					newImg = $items[$items.length-1].find('a').attr('href');
					currentImage = $items.length-1;
					loadNewImage(newImg);
					
				}
				return false;
			}
			
			function loadNewImage(newImage){
				console.log('load new image: ' + newImage);
				if(!$template){
					$template = $(createTemplate());
					$cb = $template.find('div.close').css({textAlign:'left',marginLeft:0}).bind('click',handleCloseImage);
					$pb = $template.find('a.prev').bind('click',handlePrevImage);
					$nb = $template.find('a.next').bind('click',handleNextImage);
					$setData = $template.find('span.set_data');
				}else{
					$template.find('.image_holder img').remove();	
				}
				$template.css('display','none');
				$overlay.append($template);
				var $imgHolder = $overlay.find('div.image_holder');
				var image = new Image();
				$(image).load(function(){
					$imgHolder.append(this);
					
					$template.fadeIn(1000);
					var w = $(image).width();
					$template.find('a.close').css('marginLeft',$(this).position().left);
					//console.log("offest: " + w);
					
				}).attr('src',newImage);
				$setData.text(" " + eval(currentImage +1) + " of " + $items.size() + " " );
			}
			
			function createTemplate(){
				template = '<div class="img_viewer_wrapper">';
				template += '<div><p><a href="#" class="close">Close</a></p></div>';
				template += '<div class="image_holder loading"></div>';
				template += '<div class="controls"><p><a href="#" class="prev">Previous</a>';
				template += '<span class="set_data">Set Data </span>';
				template += '<a href="#" class="next">Next</a></p></div>';
				template += '</div>';
				return template;
			}
			
			console.log("init: " + galleryWidth  + " : " + numItems + " : " + numItemsPerPage + " : " + numPages);
			
			
			
			
			
			
			init();
			// Objects to return to chain
			return this;
		
	}
	
	
})(jQuery);