photark-ui/src/main/webapp/gallery.html - photark - Git at Google

 <!--
     * 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>Apache PhotArk - Photo Gallery</title>

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

 <script type="text/javascript" src="constants.js"></script>
 <script type="text/javascript" src="dojo/dojo.js"></script>

 <script language="JavaScript">

     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";
     slide_before_start  = new Image(31,31); slide_before_start.src = "slide_before_start.gif";
     slide_pause  = new Image(31,31); slide_pause.src = "slide_pause.gif";
     show_slide  = new Image(31,31); show_slide.src = "show_slide.gif";
     show_slide_on  = new Image(31,31); show_slide_on.src = "show_slide_on.gif";
     show_slide_slow  = new Image(31,31); show_slide_slow.src = "show_slide_slow.gif";
     show_slide_slow_on  = new Image(31,31); show_slide_slow_on.src = "show_slide_slow_on.gif";

     var gallery;
 	var galleryName;
 	var galleryAlbums;
 	var albumCovers = new Array();
 	var albumName;
 	var albumItems;
 	var albumPos = 0;
     var pos = 0;
     var slideShowSpeed=0;
     var timer;

 	dojo.addOnLoad(function() {
 		dojo.require("dojo.rpc.JsonService");
 	    dojo.addOnLoad(initServices);
 	    dojo.addOnLoad(initGallery);
 	 });

 	function initServices(){
 		gallery = new dojo.rpc.JsonService( photark.constants.GalleryServiceEndpoint );
 	}

 	function initGallery() {
 		try {
 			if( !gallery) {
 				gallery = new dojo.rpc.JsonService( photark.constants.GalleryServiceEndpoint );
 			}
 			gallery.getAlbums().addCallback(gallery_getAlbumsResponse);
 		} catch(exception) {
 			alert(e);
 		}
 	}

 	function gallery_getAlbumsResponse(albums, exception) {
 		if(exception) {
 			alert(exception.msg);
 			return;
 		}
 		galleryAlbums = albums;

 		for(i=0; i< galleryAlbums.length; i++)
 		{
 			gallery.getAlbumCover(galleryAlbums[i].name).addCallback(gallery_getAlbumCoverResponse);
 		}
 	}


 	function gallery_getAlbumCoverResponse(cover, exception) {
 		if(exception){
 			alert(exception.msg);
 			return;
 		}
 		albumCovers[pos] = cover;
 		pos += 1;
 		if(albumCovers.length == galleryAlbums.length)
 		{
 			initializeGallery();
 			displayGallery();
 		}
 	}

 	function initializeGallery() {
 		var table=document.getElementById('tableGallery');
 		var lastRow = table.rows.length;
 		for (i = 0; i < galleryAlbums.length; i++) {
 			var row = table.insertRow(lastRow++);
 			var column = row.insertCell(0);

 			if (albumCovers[i] != null) {

 				var albumName = galleryAlbums[i].name;
 				var img = document.createElement("img");
 				img.src = window.location.href + "gallery/"+ albumName +"/" + albumCovers[i];
 				var img_html = "<img src=" + img.src + " class=\"slideImage\" height=85% width=85% ondragstart=\"return false\" onselectstart=\"return false\" oncontextmenu=\"return false\" galleryimg=\"no\" usemap=\"#imagemap\" alt=\"\"/>";
 				var html = "<a href=\"javascript:initializeAlbum('" + albumName + "')\">" + img_html + "</a>";
 				column.innerHTML = html;

 				column = row.insertCell(1);
 				column.innerHTML = "<div style=\"width:500\">"+galleryAlbums[i].description+"</div>";

 				row = table.insertRow(lastRow++);
 				column = row.insertCell(0)
 				column.innerHTML = albumName;

 				row = table.insertRow(lastRow++);
 				column = row.insertCell(0)
 				column.innerHTML = "<img src=\"space.gif\" class=\"slideImage\" width=\"10\" height=\"10\" ondragstart=\"return false\" onselectstart=\"return false\" oncontextmenu=\"return false\" galleryimg=\"no\" usemap=\"#imagemap\" alt=\"\">";
 			}
 	   }
 	}

 	function displayGallery() {
 		setVisibility('gallery',true);
 		setVisibility('album',false);
 	}

 	function initializeAlbum(albumName) {
 		try {
 			this.albumName = albumName;
 			gallery.getAlbumPictures(albumName).addCallback(gallery_getAlbumPicturesResponse);
 		} catch(exception) {
 			alert(e);
 		}
 	}

 	function gallery_getAlbumPicturesResponse(items, exception) {
 		if(exception) {
 			alert(exception.msg);
 			displayGallery();
 			return;
 		}
 		albumItems = items;
 		albumPos = 0;
 		showAlbum();
 	}

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

 	function displayAlbum() {
 		setVisibility('gallery',false);
 		setVisibility('album',true);
 	}

 	function showImage(albumPos) {
 	   	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 = window.location.href + "gallery/"+ this.albumName +"/" + albumItems[albumPos];
 	    return false;
 	}

 	function goNext() {
 		if(albumPos < albumItems.length - 1) {
 			albumPos++;
 			showImage(albumPos);
 		}
 	}

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

 	function setVisibility(divId, visible) {
 		//valid values { visible, hidden }
 		if (document.getElementById) {
 			var element = document.getElementById(divId)
 			if(visible) {
 				element.style.display = 'block';
 				element.style.visibility = 'visible';
 			} else {
 				element.style.display = 'none';
 				element.style.visibility = 'hidden';
 			}
 		}
 	}

 	function onGoPreviousMouseOver(){
 		if(albumPos == 0){
 			document.previous.src=prev_off.src;
 		}else{
 			document.previous.src=prev_on.src;
 		}
 	}

 	function onGoNextMouseOver(){
 		if(albumPos == albumItems.length - 1){
 			document.next.src=next_off.src;
 		}else{
 			document.next.src=next_on.src;
 		}
 	}

 	function goSlideShow(){
 		if(slideShowSpeed==0){
 			slideShowSpeed=1;
 			clearTimeout(timer);
 			startTimer(5000);
 		}else if(slideShowSpeed==1) {
 			slideShowSpeed=2;
 			clearTimeout(timer);
 			startTimer(2000);
 		}else{
 			slideShowSpeed=0;
 			clearTimeout(timer);
 		}
 	}

 	function beforeClick(){
 			clearTimeout(timer);
 			slideShowSpeed=0;
 			document.show.src=slide_before_start.src;
 	}

 	function onSlideShow(){
 		if(slideShowSpeed==0){
 			document.show.src=show_slide_slow_on.src;
 		}else if(slideShowSpeed==1){
 			document.show.src=show_slide_on.src;
 		}else{
 			document.show.src=slide_pause.src;
 		}
 	}

 	function offSlideShow(){
 		if(slideShowSpeed==0){
 			document.show.src=slide_before_start.src;
 		}else if(slideShowSpeed==1){
 			document.show.src=show_slide_slow.src;
 		}else{
 			document.show.src=show_slide.src;
 		}
 	}

 	function startTimer(time){
 		if(albumPos < albumItems.length - 1) {
 			albumPos++;
 		}else{
 			albumPos=1;
 		}
 		showImage(albumPos);
 		timer=setTimeout("startTimer("+time+")",time);
 	}

 </script>

 </head>

 <body onload="initGallery()">
 <br>
 <h1><center>Apache PhotArk Gallery</center></h1>
 <br>
 <br>

 <div id='gallery' style='display:none;visibility:hidden;'>
      <center>
      <table id='tableGallery' style='width:720px;' border='0' cellspacing='0' cellpadding='1'></table>
      </center>
 </div>

 <div id="album" style="display:none;visibility:hidden;">
   <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:displayGallery()" onmouseover="document.index.src=index_on.src" onmouseout="document.index.src=index_off.src" onmousedown="beforeClick();"><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="onGoPreviousMouseOver();" onmouseout="document.previous.src=prev_off.src" onmousedown="beforeClick();"><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="onGoNextMouseOver();" onmouseout="document.next.src=next_off.src" onmousedown="beforeClick();"><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:goSlideShow()" onmouseover="onSlideShow();" onmouseout="offSlideShow();"><img src="slide_before_start.gif" width="31" height="31" border="0" title="Start(Slow)/Fast/Stop slideshow" 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>
 </div>

 </body>
 </html>
	<!--
	* 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>Apache PhotArk - Photo Gallery</title>

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

	<script type="text/javascript" src="constants.js"></script>
	<script type="text/javascript" src="dojo/dojo.js"></script>

	<script language="JavaScript">

	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";
	slide_before_start = new Image(31,31); slide_before_start.src = "slide_before_start.gif";
	slide_pause = new Image(31,31); slide_pause.src = "slide_pause.gif";
	show_slide = new Image(31,31); show_slide.src = "show_slide.gif";
	show_slide_on = new Image(31,31); show_slide_on.src = "show_slide_on.gif";
	show_slide_slow = new Image(31,31); show_slide_slow.src = "show_slide_slow.gif";
	show_slide_slow_on = new Image(31,31); show_slide_slow_on.src = "show_slide_slow_on.gif";

	var gallery;
	var galleryName;
	var galleryAlbums;
	var albumCovers = new Array();
	var albumName;
	var albumItems;
	var albumPos = 0;
	var pos = 0;
	var slideShowSpeed=0;
	var timer;

	dojo.addOnLoad(function() {
	dojo.require("dojo.rpc.JsonService");
	dojo.addOnLoad(initServices);
	dojo.addOnLoad(initGallery);
	});

	function initServices(){
	gallery = new dojo.rpc.JsonService( photark.constants.GalleryServiceEndpoint );
	}

	function initGallery() {
	try {
	if( !gallery) {
	gallery = new dojo.rpc.JsonService( photark.constants.GalleryServiceEndpoint );
	}
	gallery.getAlbums().addCallback(gallery_getAlbumsResponse);
	} catch(exception) {
	alert(e);
	}
	}

	function gallery_getAlbumsResponse(albums, exception) {
	if(exception) {
	alert(exception.msg);
	return;
	}
	galleryAlbums = albums;

	for(i=0; i< galleryAlbums.length; i++)
	{
	gallery.getAlbumCover(galleryAlbums[i].name).addCallback(gallery_getAlbumCoverResponse);
	}
	}


	function gallery_getAlbumCoverResponse(cover, exception) {
	if(exception){
	alert(exception.msg);
	return;
	}
	albumCovers[pos] = cover;
	pos += 1;
	if(albumCovers.length == galleryAlbums.length)
	{
	initializeGallery();
	displayGallery();
	}
	}

	function initializeGallery() {
	var table=document.getElementById('tableGallery');
	var lastRow = table.rows.length;
	for (i = 0; i < galleryAlbums.length; i++) {
	var row = table.insertRow(lastRow++);
	var column = row.insertCell(0);

	if (albumCovers[i] != null) {

	var albumName = galleryAlbums[i].name;
	var img = document.createElement("img");
	img.src = window.location.href + "gallery/"+ albumName +"/" + albumCovers[i];
	var img_html = "<img src=" + img.src + " class=\"slideImage\" height=85% width=85% ondragstart=\"return false\" onselectstart=\"return false\" oncontextmenu=\"return false\" galleryimg=\"no\" usemap=\"#imagemap\" alt=\"\"/>";
	var html = "<a href=\"javascript:initializeAlbum('" + albumName + "')\">" + img_html + "</a>";
	column.innerHTML = html;

	column = row.insertCell(1);
	column.innerHTML = "<div style=\"width:500\">"+galleryAlbums[i].description+"</div>";

	row = table.insertRow(lastRow++);
	column = row.insertCell(0)
	column.innerHTML = albumName;

	row = table.insertRow(lastRow++);
	column = row.insertCell(0)
	column.innerHTML = "<img src=\"space.gif\" class=\"slideImage\" width=\"10\" height=\"10\" ondragstart=\"return false\" onselectstart=\"return false\" oncontextmenu=\"return false\" galleryimg=\"no\" usemap=\"#imagemap\" alt=\"\">";
	}
	}
	}

	function displayGallery() {
	setVisibility('gallery',true);
	setVisibility('album',false);
	}

	function initializeAlbum(albumName) {
	try {
	this.albumName = albumName;
	gallery.getAlbumPictures(albumName).addCallback(gallery_getAlbumPicturesResponse);
	} catch(exception) {
	alert(e);
	}
	}

	function gallery_getAlbumPicturesResponse(items, exception) {
	if(exception) {
	alert(exception.msg);
	displayGallery();
	return;
	}
	albumItems = items;
	albumPos = 0;
	showAlbum();
	}

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

	function displayAlbum() {
	setVisibility('gallery',false);
	setVisibility('album',true);
	}

	function showImage(albumPos) {
	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 = window.location.href + "gallery/"+ this.albumName +"/" + albumItems[albumPos];
	return false;
	}

	function goNext() {
	if(albumPos < albumItems.length - 1) {
	albumPos++;
	showImage(albumPos);
	}
	}

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

	function setVisibility(divId, visible) {
	//valid values { visible, hidden }
	if (document.getElementById) {
	var element = document.getElementById(divId)
	if(visible) {
	element.style.display = 'block';
	element.style.visibility = 'visible';
	} else {
	element.style.display = 'none';
	element.style.visibility = 'hidden';
	}
	}
	}

	function onGoPreviousMouseOver(){
	if(albumPos == 0){
	document.previous.src=prev_off.src;
	}else{
	document.previous.src=prev_on.src;
	}
	}

	function onGoNextMouseOver(){
	if(albumPos == albumItems.length - 1){
	document.next.src=next_off.src;
	}else{
	document.next.src=next_on.src;
	}
	}

	function goSlideShow(){
	if(slideShowSpeed==0){
	slideShowSpeed=1;
	clearTimeout(timer);
	startTimer(5000);
	}else if(slideShowSpeed==1) {
	slideShowSpeed=2;
	clearTimeout(timer);
	startTimer(2000);
	}else{
	slideShowSpeed=0;
	clearTimeout(timer);
	}
	}

	function beforeClick(){
	clearTimeout(timer);
	slideShowSpeed=0;
	document.show.src=slide_before_start.src;
	}

	function onSlideShow(){
	if(slideShowSpeed==0){
	document.show.src=show_slide_slow_on.src;
	}else if(slideShowSpeed==1){
	document.show.src=show_slide_on.src;
	}else{
	document.show.src=slide_pause.src;
	}
	}

	function offSlideShow(){
	if(slideShowSpeed==0){
	document.show.src=slide_before_start.src;
	}else if(slideShowSpeed==1){
	document.show.src=show_slide_slow.src;
	}else{
	document.show.src=show_slide.src;
	}
	}

	function startTimer(time){
	if(albumPos < albumItems.length - 1) {
	albumPos++;
	}else{
	albumPos=1;
	}
	showImage(albumPos);
	timer=setTimeout("startTimer("+time+")",time);
	}

	</script>

	</head>

	<body onload="initGallery()">
	<br>
	<h1><center>Apache PhotArk Gallery</center></h1>
	<br>
	<br>

	<div id='gallery' style='display:none;visibility:hidden;'>
	<center>
	<table id='tableGallery' style='width:720px;' border='0' cellspacing='0' cellpadding='1'></table>
	</center>
	</div>

	<div id="album" style="display:none;visibility:hidden;">
	<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:displayGallery()" onmouseover="document.index.src=index_on.src" onmouseout="document.index.src=index_off.src" onmousedown="beforeClick();"><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="onGoPreviousMouseOver();" onmouseout="document.previous.src=prev_off.src" onmousedown="beforeClick();"><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="onGoNextMouseOver();" onmouseout="document.next.src=next_off.src" onmousedown="beforeClick();"><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:goSlideShow()" onmouseover="onSlideShow();" onmouseout="offSlideShow();"><img src="slide_before_start.gif" width="31" height="31" border="0" title="Start(Slow)/Fast/Stop slideshow" 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>
	</div>

	</body>
	</html>