Index: /main/trunk/greenstone3/web/interfaces/default/js/document_scripts.js
===================================================================
--- /main/trunk/greenstone3/web/interfaces/default/js/document_scripts.js	(revision 26202)
+++ /main/trunk/greenstone3/web/interfaces/default/js/document_scripts.js	(revision 26203)
@@ -1233,2 +1233,209 @@
 	_baseURL = gs.xsltParams.library_name;
 }
+
+function showSlideShow()
+{
+	var visible = $("#ssOption").attr('checked');
+	if(visible)
+	{
+		$("#gs-document").hide();
+		if(!($("#gs-slideshow").length))
+		{
+			var slideshowDiv = $("<div>", {id:"gs-slideshow"});
+			var loadingImage = $("<img>", {src:gs.imageURLs.loading});
+			slideshowDiv.append(loadingImage);
+			
+			$("#gs-document").after(slideshowDiv);
+			
+			retrieveImagesForSlideShow(function(imageIDArray)
+			{
+				loadingImage.hide();
+				if(imageIDArray && imageIDArray.length > 0)
+				{
+					var imageURLs = new Array();
+					for(var i = 0; i < imageIDArray.length; i++)
+					{
+						if(imageIDArray[i].source && imageIDArray[i].source.search(/.*\.(gif|jpg|jpeg|png)$/) != -1)
+						{
+							imageURLs.push(gs.collectionMetadata.httpPath + "/index/assoc/" + gs.documentMetadata.assocfilepath + "/" + imageIDArray[i].source);
+						}
+					}
+					new SlideShowWidget(slideshowDiv, imageURLs, imageIDArray);
+				}
+			});
+		}
+		else
+		{
+			$("#gs-slideshow").show();
+		}
+	}
+	else
+	{
+		if($("#gs-slideshow").length)
+		{
+			$("#gs-slideshow").hide();
+		}
+		$("#gs-document").show();
+	}
+}
+
+function retrieveImagesForSlideShow(callback)
+{
+	var template = "";
+	template += '<xsl:template match="/">';
+	template +=   '<images>[';
+	template +=     '<xsl:for-each select="//documentNode">';
+	template +=       '<xsl:text disable-output-escaping="yes">{"source":"</xsl:text><gsf:metadata name="Source"/><xsl:text disable-output-escaping="yes">",</xsl:text>';
+	template +=       '<xsl:text disable-output-escaping="yes">"id":"</xsl:text><xsl:value-of select="@nodeID"/><xsl:text disable-output-escaping="yes">"}</xsl:text>';
+	template +=       '<xsl:if test="position() != count(//documentNode)">,</xsl:if>';
+	template +=     '</xsl:for-each>';
+	template +=   ']</images>';
+	template += '</xsl:template>';
+
+	var url = gs.xsltParams.library_name + "/collection/" + gs.cgiParams.c + "/document/" + gs.cgiParams.d + "?ed=1&ilt=" + template.replace(" ", "%20");
+
+	$.ajax(
+	{
+		url:url,
+		success: function(data)
+		{
+			var startIndex = data.indexOf(">", data.indexOf(">") + 1) + 1;
+			var endIndex = data.lastIndexOf("<");
+			var arrayString = data.substring(startIndex, endIndex);
+			var imageIDArray = eval(arrayString);
+
+			callback(imageIDArray);
+		}
+	});
+}
+
+function SlideShowWidget(mainDiv, images, idArray)
+{
+	var _inTransition = false;
+	var _images = new Array();
+	var _mainDiv = mainDiv;
+	var _imageDiv = $("<div>", {id:"ssImageDiv"});
+	var _navDiv = $("<div>", {style:"height:2em;"});
+	var _nextButton = $("<img>", {src:gs.imageURLs.next, style:"float:right; cursor:pointer;"});
+	var _prevButton = $("<img>", {src:gs.imageURLs.prev, style:"float:left; cursor:pointer;"});
+	var _clearDiv = $("<div>", {style:"clear:both;"});
+	var _currentIndex = 0;
+	
+	_navDiv.append(_nextButton);
+	_navDiv.append(_prevButton);
+	_navDiv.append(_clearDiv);
+	_mainDiv.append(_navDiv);
+	_mainDiv.append(_imageDiv);
+	
+	for(var i = 0; i < images.length; i++)
+	{
+		_images.push($("<img>", {src:images[i], "class":"slideshowImage"}));
+	}
+	
+	_imageDiv.append(_images[0]);
+	
+	this.nextImage = function()
+	{
+		if(!_inTransition)
+		{
+			_inTransition = true;
+			if((_currentIndex + 1) < _images.length)
+			{
+				_imageDiv.fadeOut(1000, function()
+				{
+					_imageDiv.empty();
+					_imageDiv.append(_images[_currentIndex + 1]);
+					_currentIndex++;
+					_imageDiv.fadeIn(1000, function()
+					{
+						_inTransition = false;
+					});
+				});
+			}
+			else
+			{
+				_inTransition = false;
+			}
+		}
+	}
+	
+	this.prevImage = function()
+	{
+		if(!_inTransition)
+		{
+			_inTransition = true;
+			if((_currentIndex - 1) >= 0)
+			{
+				_imageDiv.fadeOut(1000, function()
+				{
+					_imageDiv.empty();
+					_imageDiv.append(_images[_currentIndex - 1]);
+					_currentIndex--;
+					_imageDiv.fadeIn(1000, function()
+					{
+						_inTransition = false;
+					});
+				});
+			}
+			else
+			{
+				_inTransition = false;
+			}
+		}
+	}
+	
+	var getRootFilenameFromURL = function(url)
+	{
+		var urlSegments = url.split("/");
+		var filename = urlSegments[urlSegments.length - 1];
+		return filename.replace(/_thumb\..*$/, "");
+	}
+	
+	var setLink = function(currentLink, index)
+	{
+		$(currentLink).click(function()
+		{
+			_inTransition = true;
+			_currentIndex = index;
+			_imageDiv.fadeOut(1000, function()
+			{
+				_imageDiv.empty();
+				_imageDiv.append(_images[_currentIndex]);
+				_imageDiv.fadeIn(1000, function()
+				{
+					_inTransition = false;
+				});
+			});
+		});
+	}
+
+	var sliderLinks = $(".pageSliderCol a");
+	for(var i = 0; i < sliderLinks.length; i++)
+	{
+		var currentLink = sliderLinks[i];
+		var id = $(currentLink).attr("href").split("'")[1];
+
+		for(var j = 0; j < idArray.length; j++)
+		{
+			if(idArray[j].id == id)
+			{
+				var image = idArray[j].source;
+				
+				for(var l = 0; l < images.length; l++)
+				{
+					var filename = getRootFilenameFromURL(images[l]);
+					if (filename == image)
+					{
+						setLink(currentLink, l);
+						break;
+					}
+				}
+				
+				break;
+			}
+		}
+	}
+
+	_nextButton.click(this.nextImage);
+	_prevButton.click(this.prevImage);
+}
Index: /main/trunk/greenstone3/web/interfaces/default/style/core.css
===================================================================
--- /main/trunk/greenstone3/web/interfaces/default/style/core.css	(revision 26202)
+++ /main/trunk/greenstone3/web/interfaces/default/style/core.css	(revision 26203)
@@ -652,4 +652,8 @@
 }
 
+.tocTextCell {
+	padding-left:5px;
+}
+
 .tableOfContentsContainer {
 	padding:1px;
@@ -834,4 +838,12 @@
 }
 
+#gs-slideshow{
+	width:65%;
+}
+
+.slideshowImage{
+	width:100%;
+}
+
 /*
 ul.childrenlist li {
Index: /main/trunk/greenstone3/web/interfaces/default/transform/javascript-global-setup.xsl
===================================================================
--- /main/trunk/greenstone3/web/interfaces/default/transform/javascript-global-setup.xsl	(revision 26202)
+++ /main/trunk/greenstone3/web/interfaces/default/transform/javascript-global-setup.xsl	(revision 26203)
@@ -110,5 +110,6 @@
 			<xsl:text disable-output-escaping="yes">gs.imageURLs.pageIcon = "</xsl:text><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'page_icon_image')"/><xsl:text disable-output-escaping="yes">";</xsl:text>
 			<xsl:text disable-output-escaping="yes">gs.imageURLs.trashFull = "</xsl:text><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'trash_full_image')"/><xsl:text disable-output-escaping="yes">";</xsl:text>
-			<xsl:text disable-output-escaping="yes">gs.imageURLs.blank = "</xsl:text><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'blank_image')"/><xsl:text disable-output-escaping="yes">";</xsl:text>
+			<xsl:text disable-output-escaping="yes">gs.imageURLs.next = "</xsl:text><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'next_image')"/><xsl:text disable-output-escaping="yes">";</xsl:text>
+			<xsl:text disable-output-escaping="yes">gs.imageURLs.prev = "</xsl:text><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'prev_image')"/><xsl:text disable-output-escaping="yes">";</xsl:text>
 		</script>
 	</xsl:template>
Index: /main/trunk/greenstone3/web/interfaces/default/transform/layouts/toc.xsl
===================================================================
--- /main/trunk/greenstone3/web/interfaces/default/transform/layouts/toc.xsl	(revision 26202)
+++ /main/trunk/greenstone3/web/interfaces/default/transform/layouts/toc.xsl	(revision 26203)
@@ -176,5 +176,5 @@
 				
 				<!-- The section name, links to the section in the document -->
-				<td>				
+				<td class="tocTextCell">				
 					<a id="toclink{@nodeID}" href="javascript:focusSection('{@nodeID}');">
 						<xsl:if test="util:hashToSectionId(@nodeID)">
@@ -216,5 +216,5 @@
 					<xsl:attribute name="style">
 						<xsl:choose>
-							<xsl:when test="count(//documentNode/metadataList/metadata[@name = 'Screen']) > 0 or /page/pageResponse/document/documentNode/@docType = 'paged' or /page/pageResponse/document/documentNode/@docType = 'pagedhierarchy'">
+							<xsl:when test="count(//documentNode/metadataList/metadata[@name = 'Screen']) > 0 or /page/pageResponse/document/@docType = 'paged' or /page/pageResponse/document/@docType = 'pagedhierarchy'">
 							</xsl:when>
 							<xsl:otherwise>
@@ -242,4 +242,21 @@
 						</xsl:choose>
 					</select>
+				</li>
+				
+				<!-- Slide-show options -->
+				<li id="slideShowOptions">
+					<xsl:attribute name="style">
+						<xsl:choose>
+							<xsl:when test="count(//documentNode/metadataList/metadata[@name = 'Screen']) > 0 or /page/pageResponse/document/@docType = 'paged' or /page/pageResponse/document/@docType = 'pagedhierarchy'">
+							</xsl:when>
+							<xsl:otherwise>
+								display:none;
+							</xsl:otherwise>
+						</xsl:choose>
+					</xsl:attribute>
+					<img>
+						<xsl:attribute name="src"><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'slideshow_image')"/></xsl:attribute>
+					</img>
+					<input id="ssOption" type="checkbox" onclick="showSlideShow()" class="optionCheckBox"/>
 				</li>
 			
@@ -282,5 +299,5 @@
 							$("#zoomToggle").change(function()
 							{
-								_imageZoomEnabled = !_imageZoomEnabled;
+								_imageZoomEnabled = $("#zoomToggle").attr("checked");
 							});
 						</xsl:text>
@@ -301,6 +318,6 @@
 									if(divs[i].getAttribute("id") &amp;&amp; divs[i].getAttribute("id").search(/^mover.*/) != -1)
 									{
-										divs[i].style.height = 200 + (2 * sliderValue) + "px";
-										divs[i].style.width = 200 + (2 * sliderValue) + "px";
+										divs[i].style.height = 400 + (2 * sliderValue) + "px";
+										divs[i].style.width = 400 + (2 * sliderValue) + "px";
 									}
 								}
