function photoGallery(groups,layout)
	{
		//list of current images src
		var images = [];
		images = groups[0].photos;
		
		//add by Justin November 24 2009
		var current_group = 0;
		
		/**
		 *	added Nov 21 2007
		 *  by Justin
		 */
		//speed up load times
		var preloadedImage = [];
		for(var i=0;i<images.length;i++) {
			preloadedImage[i] = new Image();
			preloadedImage[i].src = layout.path + images[i];
		}
		
		//list of current captions
		var captions = [];
		captions = groups[0].captions;
		
		//list of current texts
		var text = [];
		text = groups[0].text;
		
		var urls = [];
		urls = groups[0].urls;
		
		/**
		 *	added Nov 7 2007
		 *  by Justin
		 */
		var targets = [];
		targets = groups[0].targets;
		
		//number of pages needed
		var numPages;
		
		//number of rows produced
		var numRows;
		
		//screen width and height
		var screenW;
		var screenH;
		
		//get screen width and height
		if(document.body.offsetWidth)
		{
			//IE
			screenW = document.body.offsetWidth/2;
			screenH = document.body.offsetHeight/2;
		}
		if(document.body.clientWidth)
		{
			//Opera
			screenW = document.body.clientWidth/2;
			screenH = document.body.clientHeight/2;	
		}
		if(window.innerWidth)
		{
			//Firefox,Netscape
			screenW = window.innerWidth/2;
			screenH = window.innerHeight/2;
		}
		
		//global objects
		var message,bar,cimg,wrapper,progress,slideWrapper,darkBox,pageItems,pages,currentPage;
		
		//list of current image objects
		imagesObj = [];
		
		//preload current image objects
		preload(true);
		
		//preload image function
		function preload(doSetup)
		{
			//setup message and progress bar
			if(doSetup)
			{
				cimg = 0;
				wrapper = document.getElementById(layout.wrapper);
				//wrapper.className = "PhotoGalleryWrapper";
			
				createDarkBox(75);
				progress = document.createElement("div");
				setAppearance(progress,{	width:"250px",
											background:"#f6f3f6",
											border:"1px solid #b8b8b8",
											padding:"5px",
											position:"absolute",
											top:(screenH-25)+"px",
											left:(screenW-125)+"px"});
										
				message = document.createElement("div");
				setAppearance(message,{	padding:"5px",
										color:"#818181",
										fontSize:"11px",
										fontFamily:"verdana,sans-serif",
										textAlign:"center"});
									
				bar = document.createElement("div");
				setAppearance(bar,{	background:"#b8b8b8",
									height:"25px",
									width:"0px"});
								
				progress.appendChild(message);
				progress.appendChild(bar);
				document.body.appendChild(progress);
			}
			
			if(cimg >= images.length)
			{
				//done
				document.body.removeChild(progress);
				removeDarkBox();
				draw();
				//source();
			}
			else
			{
				//load next image
				imagesObj[cimg] = new Image();
				imagesObj[cimg].onload = function(){preload(false)};
				imagesObj[cimg].src = layout.path + images[cimg] + "?" + cimg;
				
				message.innerHTML = "Loading Gallery<br/>Image <strong>" + (cimg + 1) + "</strong> of <strong>" + images.length + "</strong>";
				bar.style.width = Math.ceil((cimg + 1) / images.length * 100) + "%";
				
				cimg++;
			}
		}
		
		//draw images to screen
		function draw()
		{
			if(layout.showGalleryName == "true")
				wrapper.innerHTML += "<div class=\"PhotoGalleryName\">" + layout.galleryName + "</div>";
		
			var c = 0;
			var r = 1;
			var i = 0;			
			
			//display groups if more than 1 group
			if(groups.length > 1)
			{
			var groupWidth;
			if(document.all)	//IE
				groupWidth = wrapper.offsetWidth-10;
			else				//normal browsers
				groupWidth = wrapper.clientWidth-40;
				
			//if(groupWidth < 0) groupWidth = 0;
			
			//box to hold group labels
			var groupWrapper = document.createElement("div");
			groupWrapper.className = "PhotoGalleryGroupWrapper";
			/*setAppearance(groupWrapper,{	margin:"5px",
											width:groupWidth+"px",
											padding:"5px",
											border:"1px solid #949694",
											background:"#FEFEF4"});*/
			wrapper.appendChild(groupWrapper);
											
			var list = document.createElement("ul");
			setAppearance(list,{	margin:"0",
									padding:"0",
									listStyleType:"none"});
			groupWrapper.appendChild(list);
			
			//display groups
			var item,name,num;							
			for(var group=0;group<groups.length;group++)
			{
				name = groups[group].name;
				num = groups[group].photos.length;
				item = document.createElement("li");
				item.id = "group_" + group;
				//Justin nov 24 2009
				if(group == current_group) {
					item.className = "PhotoGalleryGroupTab CurrentGroup";
				}
				else {
					item.className = "PhotoGalleryGroupTab";
				}
				/*setAppearance(item,{	display:"block",
										float2:"left",
										padding: "3px",
										width:"100px",
										fontSize:"12px",
										textDecoration:"underline",
										textAlign:"center"});*/
								
				list.appendChild(item);
				
				var groupName = name;	
				if(layout.showNumberOfImagesInGroup != null && layout.showNumberOfImagesInGroup == "true") {
					groupName += "(" + num + ")";
				}
				item.appendChild(document.createTextNode(groupName));
			}
			var br = document.createElement("br");
			setAppearance(br,{clear:"both"});
			groupWrapper.appendChild(br);	
			}	
			
			//number of rows produced
			numRows = parseInt(images.length / layout.columns);
			if(images.length % layout.columns > 0)
				numRows++;
			
			//number of pages needed	
			numPages = parseInt(numRows / layout.rows);
			if(numRows % layout.rows > 0)
				numPages++;
				
			pages = [];
			for(var i=0;i<numPages;i++)
			{
				pages[i] = document.createElement("div");
				pages[i].id = "photos_page_" + (i+1);	
				wrapper.appendChild(pages[i]);
				if(i == 0)
					setAppearance(pages[i],{display:"block"});
				else
					setAppearance(pages[i],{display:"none"});
			}
			
			var p = 0;
			currentPage = pages[0];
			for(image in imagesObj)
			{
				if(c >= layout.columns)
				{
					pages[p].innerHTML += '<br style="clear:left"/>';
					c = 0;
					r++;
				}
				
				if(r > layout.rows)
				{
					r=1;
					p++;
				}
				
				var imageWrapper = document.createElement("div");
				setAppearance(imageWrapper,{	float2:"left",
												margin:"5px",
												width:layout.thumbWidth+"px",
												display:"block",
												textAlign:"center"});
				
				if(layout.thumbAspect != "true")
				{
					//force dimensions
					setAppearance(imagesObj[image],{	width:layout.thumbWidth+"px",
														height:layout.thumbHeight+"px"});
				}
				else
				{
					//resize with aspect
					var ratio;
					var diffW = imagesObj[image].width - layout.thumbWidth;
					var diffH = imagesObj[image].height - layout.thumbHeight;
					var needsResize = (diffW > 0 || diffH > 0) ? true : false;
					if(needsResize)
					{
						if(diffW > diffH)
							ratio = layout.thumbWidth / imagesObj[image].width;
						else
							ratio = layout.thumbHeight / imagesObj[image].height;
							
						setAppearance(imagesObj[image],{	width:(imagesObj[image].width * ratio)+"px",
															height:(imagesObj[image].height * ratio)+"px"});
					}
					else
					{
						setAppearance(imagesObj[image],{	width:layout.thumbWidth+"px",
															height:layout.thumbHeight+"px"});
					}					
				}
				imageWrapper.appendChild(imagesObj[image]);
				imageWrapper.innerHTML += "<br/>";
				if(layout.galleryNames == "true")imageWrapper.appendChild(document.createTextNode(captions[image]));
				pages[p].appendChild(imageWrapper);
				c++;
			}
			pages[p].innerHTML += '<br style="clear:left"/>';
			pages[p].innerHTML += '<!--[if IE]><br style="font-size:0"/><![endif]-->';
			wrapper.innerHTML += '<br style="clear:left"/>';
			
			var pagingWrapper = document.createElement("div");
			if(numPages > 1)
			{
				wrapper.appendChild(pagingWrapper);
				setAppearance(pagingWrapper,{padding:"5px"});
				
				for(var i=0;i<numPages;i++)
				{
					var pageItem = document.createElement("div");
					pageItem.className = "PhotoGalleryPagingItem";
					pagingWrapper.appendChild(pageItem);
					setAppearance(pageItem,{	float2:"left"});
					pageItem.appendChild(document.createTextNode(i+1));
					pageItem.id = "pageItem_" + i;
					if(i==0)
						setAppearance(pageItem,{fontWeight:"bold"});
				}
				pagingWrapper.innerHTML += "<br style=\"clear:left\"/>";
			}
			
			//set onmouseover and onclick events
			var imageTags = wrapper.getElementsByTagName("img");
			for(i=0;i<imageTags.length;i++)
			{
				imageTags[i].onmouseover = photoMouseOver;
				imageTags[i].onmouseout = photoMouseOut;
				imageTags[i].onclick = photoOnClick; 
			}
			
			if(layout.dock.length > 0)
				dock(imageTags[0]);
			
			//setup grouping events if more than 1 group
			if(groups.length > 1)
			{	
				var items = wrapper.getElementsByTagName("li");
				for(i=0;i<items.length;i++)
				{
					items[i].onmouseover = itemMouseOver;
					items[i].onmouseout = itemMouseOut;
					items[i].onclick = itemOnClick;
				}
			}
			
			//set pageItem events
			pageItems = pagingWrapper.getElementsByTagName("div");
			for(var i=0;i<pageItems.length;i++)
			{
				pageItems[i].onmouseover = pageItemMouseOver;
				pageItems[i].onmouseout = pageItemMouseOut;
				pageItems[i].onclick = pageItemOnClick;
			}
		}
		
		function pageItemMouseOver()
		{
			this.style.color = "red";
			this.style.cursor = "pointer";
		}
		
		function pageItemMouseOut()
		{
			this.style.color = "#000000";
		}
		
		function pageItemOnClick()
		{
			for(var i=0;i<pageItems.length;i++)
			{
				pageItems[i].style.fontWeight = "normal";
			}
			this.style.fontWeight = "bold";
			document.getElementById(currentPage.id).style.display = "none";
			var newPage = parseInt(this.id.replace("pageItem_",""));
			document.getElementById(pages[newPage].id).style.display = "block";
			currentPage = pages[newPage];
		}
		
		function photoMouseOver()
		{
			this.style.cursor = "pointer"
				this.style.opacity = ".5";
				if(document.all)
					this.style.filter = "alpha(opacity=50)";
		}
		
		function photoMouseOut()
		{
			this.style.opacity = "1";
			if(document.all)
				this.style.filter = "alpha(opacity=100)";
		}
		
		function itemMouseOver()
		{
			setAppearance(this,{	textDecoration:"none",
									cursor:"pointer"});
		}
		
		function itemMouseOut()
		{
			setAppearance(this,{textDecoration:"underline"});
		}
		
		function itemOnClick()
		{
			var group = parseInt(this.id.replace("group_",""));
			
			//added by Justin Nov 24 2009
			current_group = group;
			
			var alreadyLoaded = true;
			
			//is this group already loaded
			if(images.length == groups[group].photos.length)
			{
				//if(!document.all) { alert("same length"); }
				for(var i=0;i<images.length;i++)
				{
					//if(!document.all) { alert(images[i]); }
					if(images[i] != groups[group].photos[i]) {
						alreadyLoaded = false;
						break;
					}
				}
			}
			else {
				alreadyLoaded = false;
			}
				
			
			
			//prevent reloading same group
			if(!alreadyLoaded)
			{
				wrapper.innerHTML = "";
				images = null;
				images = groups[group].photos;
				imagesObj = null;
				imagesObj = [];
				captions = null;
				captions = groups[group].captions;
				text = null;
				text = groups[group].text;
				urls = null;
				urls = groups[group].urls
				
				/**
				 *	added Nov 7 2007
				 */
				targets = null;
				targets = groups[group].targets;
				preload(true);
			}
		}
		
		function photoOnClick()
		{
			if(layout.dock.length < 1)
				show(this)
			else
				dock(this)
		}
		
		function setAppearance(object,args)
		{
			for(key in args)
			{
				if(key == "float2")
				{
					if(navigator.appName == "Microsoft Internet Explorer")
						eval("object.style.float='" + args[key] + "'")
					else
						eval("object.style.cssFloat='" + args[key] + "'")
				}
				else
				{
					try
					{
						eval("object.style." + key + "='" + args[key] + "'")
					}
					catch(err)
					{
						eval("object.style.cssText='"+key+":"+args[key]+"'");
					}
				}
			}
		}
		
		function source()
		{
			var source = document.getElementById("source");
			source.value = wrapper.innerHTML;
			source.style.display = "block";
		}
		
		function show(image,arr)
		{
			createDarkBox(75);
		
			slideWrapper = document.createElement("div");
			setAppearance(slideWrapper,{	background:"#ffffff",
											border:"1px solid #818181",
											position:"absolute",
											//top:(screenH-(parseInt(layout.viewerHeight.replace("px","")/2))) + "px",
											top:"50px",
											left:(screenW-(parseInt(layout.viewerWidth.replace("px","")/2))) + "px",
											width:layout.viewerWidth,
											//height:"480px",
											overflowY:"auto",
											textAlign:"center"});
			document.body.appendChild(slideWrapper);
			
			var closeButton = new Image();
			closeButton.src = layout.gfxPath + "x.png";
			closeButton.onmouseover = closeButtonOver;
			closeButton.onmouseout = closeButtonOut;
			
			var offsetL = 15;
			var wrapperW = parseInt(slideWrapper.style.width.replace("px",""));
			if(navigator.appName == "Microsoft Internet Explorer")
				offsetL = 17;
			setAppearance(closeButton,{	position:"relative",
										top:"5px",
										left:(wrapperW-closeButton.width-offsetL)/2+"px"});
										
			closeButton.onclick = closeImageViewer;
			slideWrapper.appendChild(closeButton);
			
			var img = new Image();
			img.src = image.src;
			img.id = "img";
			setAppearance(img,{	display:"block",
								margin:"auto"});
			slideWrapper.appendChild(document.createElement("br"));			
			
			index = parseInt(image.src.split('?')[1]);
			
			var selector = document.createElement("table");
			setAppearance(selector,{	width:(parseInt(layout.viewerWidth.replace("px",""))-90)+"px",
										margin:"auto"});
										
			var tbody = document.createElement("tbody");
			var row = document.createElement("tr");
			selector.appendChild(tbody);
			tbody.appendChild(row);
			var cell1 = document.createElement("td");
			setAppearance(cell1,{	textAlign:"left"});	
			var cell2 = document.createElement("td");
			setAppearance(cell2,{	textAlign:"right"});
			row.appendChild(cell1);
			row.appendChild(cell2);
			
			var left = new Image();
			left.src = layout.gfxPath + "left.gif";
			
			setAppearance(left,{cursor:"pointer"});
			if((index-1) > -1)
				left.onclick = last;
			var right = new Image();
			right.src = layout.gfxPath + "right.gif";
			setAppearance(right,{cursor:"pointer"});
			if((index+1) < images.length)
				right.onclick = next;
			
			cell1.appendChild(left);
			cell2.appendChild(right);
			
			
			//slideWrapper.appendChild(document.createElement("br"));
			
			
			//append caption
			var caption = document.createElement("div");
			caption.innerHTML = captions[image.src.split('?')[1]];
			/*setAppearance(caption,{	fontSize:"16px",
									fontWeight:"bold"});*/
			caption.className = "PhotoGalleryCaption";
			if(layout.viewerNames == "true")slideWrapper.appendChild(caption);
			
			//append image
			if(urls[index].length > 0)
			{
				var link = document.createElement("a");
				link.href = urls[index];
				if(targets[index] == "blank")
					link.target = "_blank";
				
				img.border = "0";
				link.appendChild(img);
				slideWrapper.appendChild(link);
			}
			else
				slideWrapper.appendChild(img);	
			imgResize(img.id,(parseInt(layout.viewerWidth.replace("px",""))-90),(parseInt(layout.viewerHeight.replace("px","")-200)),true);	
			//slideWrapper.appendChild(document.createElement("br"));
			
			var textWrapper = document.createElement("div");
			textWrapper.className = "PhotoGalleryText";
			/*setAppearance(textWrapper,{	width:(parseInt(layout.viewerWidth.replace("px",""))-90)+"px",
										height:"100px",
										overflowY:"auto",
										padding:"10px",
										textAlign:"left",
										margin:"auto"});*/
										
			textWrapper.innerHTML = text[index];							
			
			if(text[index].length > 0 && layout.viewerText == "true")							
				slideWrapper.appendChild(textWrapper);
				
			
			
			//append selector
			if(layout.showSelector != null && layout.showSelector == "true") {
				slideWrapper.appendChild(selector);
			}
			
			slideWrapper.appendChild(document.createElement("br"));
		}
		
		function last()
		{
			closeImageViewer();
			var newImage = new Image();
			newImage.src = layout.path + images[index-1] + "?" + (index-1);
			show(newImage);
		}
		
		function next()
		{
			closeImageViewer();
			var newImage = new Image();
			newImage.src = layout.path + images[index+1] + "?" + (index+1);
			show(newImage);
		}
		
		function dockLast()
		{
			var newImage = new Image();
			newImage.src = layout.path + images[index-1] + "?" + (index-1);
			dock(newImage);
		}
		
		function dockNext()
		{
			var newImage = new Image();
			newImage.src = layout.path + images[index+1] + "?" + (index+1);
			dock(newImage);
		}
		
		function clearDock(object)
		{
			object.innerHTML = "";
		}
		
		function dock(image)
		{
			var slideWrapper = document.getElementById(layout.dock);
			setAppearance(slideWrapper,{width:(parseInt(layout.viewerWidth.replace("px","")))+"px"});
			clearDock(slideWrapper);
			
			index = parseInt(image.src.split('?')[1]);
			
			var selector = document.createElement("table");
			setAppearance(selector,{	width:(parseInt(layout.viewerWidth.replace("px",""))-90)+"px",
										margin:"auto"});
										
			var tbody = document.createElement("tbody");
			var row = document.createElement("tr");
			selector.appendChild(tbody);
			tbody.appendChild(row);
			var cell1 = document.createElement("td");
			setAppearance(cell1,{	textAlign:"left"});	
			var cell2 = document.createElement("td");
			setAppearance(cell2,{	textAlign:"right"});
			row.appendChild(cell1);
			row.appendChild(cell2);
			
			var left = new Image();
			left.src = layout.gfxPath + "left.gif";
			
			setAppearance(left,{cursor:"pointer"});
			if((index-1) > -1)
				left.onclick = dockLast;
			var right = new Image();
			right.src = layout.gfxPath + "right.gif";
			setAppearance(right,{cursor:"pointer"});
			if((index+1) < images.length)
				right.onclick = dockNext;
			
			cell1.appendChild(left);
			cell2.appendChild(right);
			
			
			//slideWrapper.appendChild(document.createElement("br"));
			
			var img = new Image();
			img.src = image.src;
			img.id = "img";
			setAppearance(img,{	display:"block",
								margin:"auto"});
			
			
			var caption = document.createElement("div");
			caption.innerHTML = captions[image.src.split('?')[1]];
			caption.className = "PhotoGalleryCaption";
			/*setAppearance(caption,{	fontSize:"16px",
									fontWeight:"bold"});*/
			
			//append caption
			if(layout.viewerNames == "true")slideWrapper.appendChild(caption);
			//slideWrapper.appendChild(document.createElement("br"));
			
			//append image
			if(urls[index].length > 0)
			{
				var link = document.createElement("a");
				link.href = urls[index];
				if(targets[index] == "blank")
					link.target = "_blank";
				img.border = "0";
				link.appendChild(img);
				slideWrapper.appendChild(link);
			}
			else
				slideWrapper.appendChild(img);
			imgResize(img.id,(parseInt(layout.viewerWidth.replace("px",""))-90),(parseInt(layout.viewerHeight.replace("px",""))-200),true);	
			
			//slideWrapper.appendChild(document.createElement("br"));
			
			var textWrapper = document.createElement("div");
			textWrapper.className = "PhotoGalleryText";
			/*setAppearance(textWrapper,{	width:(parseInt(layout.viewerWidth.replace("px",""))-90)+"px",
										height:"100px",
										overflowY:"auto",
										padding:"10px",
										textAlign:"left",
										margin:"auto"});*/
										
			textWrapper.innerHTML = text[index];							
			
			//append text
			if(text[index].length > 0 && layout.viewerText == "true")							
				slideWrapper.appendChild(textWrapper);
				
			
			//slideWrapper.appendChild(document.createElement("br"));
			
			//append selector
			if(layout.showSelector != null && layout.showSelector == "true") {
				slideWrapper.appendChild(selector);
			}
		}
		
		function closeImageViewer()
		{
			document.body.removeChild(slideWrapper);
			//document.body.removeChild(darkBox);
			removeDarkBox();
		}
		
		function closeButtonOver()
		{
			this.src = layout.gfxPath + "xover.png";
		}
		
		function closeButtonOut()
		{
			this.src = layout.gfxPath + "x.png";
		}
		
		function createDarkBox(opac)
		{
			darkBox = document.createElement("div");
			setAppearance(darkBox,{	width:"100%",
									height:screenH*2+"px",
									background:"#000000",
									opacity:opac/100,
									filter:"alpha(opacity="+opac+")",
									position:"absolute",
									top:"0",
									left:"0"});
			document.body.appendChild(darkBox);
		}
		
		function removeDarkBox()
		{
			document.body.removeChild(darkBox);
		}
	}