function createGalleryNavigation(arr, options){
	//arr = a JS array - of images with large and small images
	//options.thumbContainer = string - the id of the container with all the thumbnails
	//options.imgLarge = string - id of the large image
	//options.imgSmallCSS = string - CSS name for the small image style 
	//options.linkCSS = string - CSS name for the next/back links
	
	this.container = document.getElementById(options.thumbContainer); if (!this.container) return;
	this.image = document.getElementById(options.imgLarge); if (!this.image) return;
	
	//step 1: figure out pagination
	this.totalImage = 0;
	arr.totalImages ? this.totalImage = arr.totalImages : this.totalImage = arr.images.length;
	arr.totalPerPage ? this.totalPerPage = arr.totalPerPage : 5;
	
	this.totalPages = this.totalImage/this.totalPerPage;
	if (this.totalPages.toString().indexOf(".") > -1){
		this.totalPages = Math.floor(this.totalPages) + 1;
	}
	
	
	//step 2: create the first page
	this.createPage = function(currPage){
		this.crrentPage = currPage;
		this.container.innerHTML = "";
		
		var startImage = (currPage * this.totalPerPage) - this.totalPerPage;
		var endImage = currPage * this.totalPerPage;
		var i = 0;
		var clss = this;
		
		//insert the images
		for (i=startImage;i<endImage;i++){
			//get the small image
			if (i >= arr.images.length) break;
			var img = new Image();
			img.src = arr.images[i].small;
			
			//var imgSmall = document.createElement("img"); 
			//imgSmall.src = arr.images[i].small;
			
			var imgSmall = document.createElement("div");
			imgSmall.style.background = "url(" + arr.images[i].small + ") no-repeat";
			
			imgSmall.className =  options.imgSmallCSS;
			imgSmall.index = i;
			
			//insert the small image
			this.container.appendChild(imgSmall);
			
			//add the click event
			var image = this.image;
			imgSmall.onclick = function(){
				image.src = arr.images[this.index].large;
			};
		}
		
		//check what type of nav link needs to be placed
		var isNext = false; isBack = false;
		(this.totalPages == 1 || currPage == this.totalPages) ? isNext = false : isNext = true;
		(this.totalPages == 1 || currPage == 1) ? isBack = false : isBack = true;
		
		if (isNext || isBack){
			var divider = document.createElement("span");
			divider.innerHTML = "<br />";
			this.container.appendChild(divider);
		}
		
		//create the back link
		if (isBack){
			var backLink = document.createElement("a");
			backLink.className = options.linkCSS ;
			backLink.href = "javascript: void(0);";
			backLink.innerHTML = "Back";
			
			//var createPage = this.createPage;
			backLink.onclick = function(){
				clss.createPage(currPage - 1);
			};
			
			//insert the link
			this.container.appendChild(backLink);
		}
		
		//create the next link
		if (isNext){
			var nextLink = document.createElement("a");
			nextLink.className = options.linkCSS ;
			nextLink.href = "javascript:void(0); ";
			nextLink.innerHTML = "Next";
			
			//var createPage = this.createPage;
			nextLink.onclick = function(){
				clss.createPage(currPage + 1);
			};
			
			//check if back is already there
			if (isBack){
				var divider = document.createElement("span");
				divider.innerHTML = " &nbsp;| ";
				this.container.appendChild(divider);
			}
			
			//insert the link
			this.container.appendChild(nextLink);
		}
			
		//new line for a psuedo even handler
		if (options.onLoadHandler){
			options.onLoadHandler();
		}
	}
	this.createPage(1);
	
	
	//step 3: for IE 6 pre-cache images
	var browName = navigator.userAgent;
	if (browName.indexOf("MSIE 6") > -1){
		var hidden = document.createElement("div");
		hidden.id = "hidden_loader";
		hidden.style.display = "none";
		document.body.appendChild(hidden);
		
		for (i=0;i<arr.images.length;i++){
			var img = document.createElement("img")
			img.src = arr.images[i].small;
			hidden.appendChild(img);
		}
	}
}