PetitTeton/public/slideshow.html

<div id="slide-show" class="page">
	<h1>SLIDE SHOW</h1>
	<div style="width: 580px; margin: 0 auto;">
		<div style="height: 30px; width: 580px; background: white;">
		<div id="slideTitleDiv" style="float: left;">
		</div>
		</div>
		<div id="slideDiv" style="position: relative; height: 580px; width: 580px; background: white;">
		</div>
		<div id="slideDescriptionDiv" style="margin: 16px 0;">
		</div>
		<div id="slideControlsDiv" style="background: white; height: 30px; text-align: center;">
			<img id="previousButton" src="images/arrow-grey-left.png" style="cursor: pointer; cursor: hand; margin-right: 12px;"/><img id="nextButton" src="images/arrow-grey-right.png" style="margin-left: 12px; cursor: pointer; cursor: hand;"/>
		</div>
	</div>
</div>
<script type="text/javascript" language="JavaScript">
	function showSlide() {
		if(!slideShowSlides) {throw "Slide show slides not loaded!";}
		var maxSize = 580;
		var previous = slideShowIndex - 1 < 0 ? slideShowSlides.length - 1 : slideShowIndex - 1;
		var next = slideShowIndex + 1 == slideShowSlides.length ? 0 : slideShowIndex + 1;
		var currentUrl = "/slideshow/" + slideShowSlides[slideShowIndex][0];
		var nextUrl = "/slideshow/" + slideShowSlides[next][0];
		var previousUrl = "/slideshow/" + slideShowSlides[previous][0];
		var title = slideShowSlides[slideShowIndex][1];
		var description = slideShowSlides[slideShowIndex][2];
		var width = slideShowSlides[slideShowIndex][3];
		var height = slideShowSlides[slideShowIndex][4];
		var wide = height < width;
		var smallSideSize = wide ? height * (maxSize / width) : width * (maxSize / height);
		var padding = (maxSize - smallSideSize) / 2;
		
		$("#slideTitleDiv")[0].innerHTML = title;
		$("#slideDiv")[0].innerHTML = "<img " + (wide ? "style='margin-top: " + padding + "px' height='" + smallSideSize + "px' width='" + maxSize + "px'" : "style='margin-left: " + padding + "px' height='" + maxSize + "px' width='" + smallSideSize + "px'") + " src='" + currentUrl + "'></img><img class='hidden' src='" + previousUrl + "' width='1' height='1' border='0'></img><img class='hidden' src='" + nextUrl + "' width='1' height='1' border='0'></img>";
		$("#slideDescriptionDiv")[0].innerHTML = description;
	}
	
	$('#previousButton').click(function() {
		slideShowIndex--;
		
		if(slideShowIndex == -1) {
			slideShowIndex = slideShowSlides.length - 1;
		}
		
		showSlide();
	});
	
	$('#nextButton').click(function() {
		slideShowIndex++;
		
		if(slideShowIndex == slideShowSlides.length) {
			slideShowIndex = 0;
		}
		
		showSlide();
	});
	
	$.getJSON('/SlideShowViewController.java?Request=List', null, function(data, textStatus, httpRequest) {
		if(httpRequest.readyState == 4) {
			if((httpRequest.status == 200) || (httpRequest.status == 0)) {
				slideShowSlides = data.slides;
				showSlide();
			}
		}
	});
</script>