<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. -->
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gallery</title>
<link href="scripts/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/xpath.js"></script>
<script type="text/javascript" src="scripts/SpryData.js"></script>
<script type="text/javascript" src="scripts/SpryEffects.js"></script>
<script type="text/javascript">
var dsAlbumBook = new Spry.Data.XMLDataSet("slideshow.xml", "/AlbumBook");
var dsAlbums = new Spry.Data.XMLDataSet("slideshow.xml", "/AlbumBook/Album");
var dsSlides = new Spry.Data.XMLDataSet("slideshow.xml", "/AlbumBook/Album[@path = '{dsAlbums::@path}']/Slide");
</script>
<script src="scripts/gallery.js"  type="text/javascript"></script>
</head>
<body id="gallery">
<noscript>
<h1>This page requires JavaScript. Please enable JavaScript in your browser and reload this page.</h1>
</noscript>
<div id="wrap">

  <div spry:region="dsAlbumBook dsAlbums" spry:choose="">
    <div spry:when="{dsAlbums::ds_RowCount} &gt; 1">
      <p class="albumName">{@title}</p>
      <p class="albumDesc">{@description}</p>
    </div>
    <div spry:default="">
      <p class="albumName">{dsAlbums::@title}</p>
      <p class="albumDesc">{dsAlbums::@description}</p>
    </div>
  </div>
  <div id="previews">
    <div id="galleries" spry:detailregion="dsAlbums" spry:if="{ds_RowCount} &gt; 1">
	  <div>
      <p class="descTitle">Viewing Album:</p>
      <select name="select" id="gallerySelect" onchange="dsAlbums.setCurrentRowNumber(this.selectedIndex);" spry:repeatchildren="dsAlbums">
        <option spry:if="{ds_RowNumber} == {ds_CurrentRowNumber}" selected="selected">{@title}</option>
        <option spry:if="{ds_RowNumber} != {ds_CurrentRowNumber}">{@title}</option>
      </select>
      <p class="descTitle" spry:if="'{@description}' != ''">Description:</p>
      <p class="albumBookDesc" spry:if="'{@description}' != ''">{@description}</p>
	  </div>

    </div>
    <div id="controls">
      <ul id="transport">
        <li><a href="#" onclick="StopSlideShow(); AdvanceToNextImage(true); return false;" title="Previous">Previous</a></li>
        <li class="pausebtn"><a href="#" onclick="if (gSlideShowOn) StopSlideShow(); else StartSlideShow(); return false;" title="Play/Pause" id="playLabel">Play</a></li>
        <li><a href="#" onclick="StopSlideShow(); AdvanceToNextImage(); return false;" title="Next">Next</a></li>
      </ul>
    </div>
    <div id="thumbnails" spry:region="dsSlides dsAlbums">
      <div spry:repeat="dsSlides" onclick="HandleThumbnailClick('{ds_RowID}');" onmouseover="GrowThumbnail(this.getElementsByTagName('img')[0], '{@thumbWidth}', '{@thumbHeight}');" onmouseout="ShrinkThumbnail(this.getElementsByTagName('img')[0]);"> <img id="tn{ds_RowID}" alt="thumbnail for {@src}" src="{dsAlbums::@path}/{@src}" width="24" height="24" style="left: 0px; right: 0px;" /> </div>
      <p class="ClearAll"></p>
    </div>
  </div>
  <div id="picture">
    <div id="mainImageOutline" style="width: 0px; height: 0px;"><img id="mainImage" alt="main image" />
    </div>
	<div align="center" id="caption" spry:detailregion="dsSlides">{@caption}</div>
  </div>
  <p class="clear"></p>
</div>
</body>
</html>
