<!--
    * Licensed to the Apache Software Foundation (ASF) under one
    * or more contributor license agreements.  See the NOTICE file
    * distributed with this work for additional information
    * regarding copyright ownership.  The ASF licenses this file
    * to you under the Apache License, Version 2.0 (the
    * "License"); you may not use this file except in compliance
    * with the License.  You may obtain a copy of the License at
    *
    *   http://www.apache.org/licenses/LICENSE-2.0
    *
    * Unless required by applicable law or agreed to in writing,
    * software distributed under the License is distributed on an
    * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    * KIND, either express or implied.  See the License for the
    * specific language governing permissions and limitations
    * under the License.
-->
<html>
<head>
<title>Photo Gallery</title>

<link href="styles.css" rel="stylesheet">

<script type="text/javascript" src="SCADomain/scaDomain.js"></script>
<script language="JavaScript">

	//@Reference
	var album = Gallery;

	var albumItems;
	var currPos = 0;

	function album_getResponse(items, exception) {
		if(exception) {
			alert(exception.msg);
			return;
		}
		albumItems = items;
		showAlbum();
	}

   function showImage(pos) {
   	var img = document.createElement("img");
	img.onload = function(evt) {
		document.getElementById("albumImage").src = this.src;
        document.getElementById("albumImage").width=this.width;
        document.getElementById("albumImage").height=this.height;
    }
    img.src = albumItems[pos];
    return false;
   }

   function showAlbum() {
      if(albumItems.length > 0) {
		showImage(currPos);
	  }
   }

   function goNext() {
   	 if(currPos < albumItems.length) {
	 	currPos++;
		showImage(currPos);
	 }
   }

   function goPrevious() {
   	if(currPos > 0) {
		currPos--;
		showImage(currPos);
	}
   }

	function init() {
		try {
			album.getPictures(album_getResponse);
		} catch(exception) {
			alert(e);
		}
	}


	index_off= new Image(31,31); index_off.src = "index.gif";
    index_on = new Image(31,31); index_on.src = "index_on.gif";
    next_off = new Image(31,31); next_off.src = "next.gif";
	next_on  = new Image(31,31); next_on.src = "next_on.gif";
	prev_off = new Image(31,31); prev_off.src = "prev.gif";
	prev_on  = new Image(31,31); prev_on.src = "prev_on.gif";

</script>

</head>

<body onload="init()">
<br>
<h1><center>Apache PhotArk Gallery</center></h1>
<br>
<br>
  <div id="gallery">
	<div id="album">
		<!--img id="albumImage" border="0" src=""-->
	</div>
	<br>
  </div>

  <center>

  <table style="height:54px;" cellspacing="0" cellpadding="0" border="0">
     <tr>
     	<td valign="middle">
     	   <!-- Navigation Header -->
		   <table style="width:100%;" cellspacing="0" cellpadding="0" border="0">
             <tr>
             	<td style="width:31px;"><a href="javascript:showAlbum()" onmouseover="document.index.src=index_on.src" onmouseout="document.index.src=index_off.src"><img src="index.gif" width="31" height="31" border="0" title="Index page" name="index" alt=""></a></td>
                <td style="width:31px;"><a href="javascript:goPrevious()" onmouseover="document.previous.src=prev_on.src" onmouseout="document.previous.src=prev_off.src"><img src="prev.gif" width="31" height="31" border="0" title="Previous image" name="previous" alt=""></a></td>
                <td style="width:31px;"><a href="javascript:goNext()" onmouseover="document.next.src=next_on.src" onmouseout="document.next.src=next_off.src"><img src="next.gif" width="31" height="31" border="0" title="Next image" name="next" alt=""></a></td>
                <td style="width:31px;"><a href="javascript:void(0)" onmouseover="show_over();" onmouseout="show_out();" onmousedown="show_down();" ondblclick="change_delay();"><img src="show_slide.gif" width="31" height="31" border="0" title="Start/Stop slideshow - DoubleClick to change speed" name="show" alt=""></a></td>
             </tr>
		   </table>
		</td>
	</tr>
  </table>

  <table style="width:720px;" border="0" cellspacing="0" cellpadding="0">
    <tr>
     	<td align="center"> <!-- Image without original -->
        <img id="albumImage" src="space.gif" class="slideImage" width="720" height="540" ondragstart="return false" onselectstart="return false" oncontextmenu="return false" galleryimg="no" usemap="#imagemap" alt="">
		</td>
    </tr>
  </table>

  </center>

</body>
</html>