<%-- 

Shows enlarged image of artist's artwork.

TODO:
- make slideshow controls contrasting with background
- react on PgDn, PgUp events (next and prev artworks)
- ignore any and all double clicks
- Mac: Safari: fit does not fit into window - draws scrollbar
- Bug: slideshow controls are not seen on dark backgrounds.
- Glitch: copyright notice floats when window height increases

Browser issues:
	PC
		IE
		Firefox
	Mac
		Safari
		Firefox

--%>
<%@ page import="javax.swing.ImageIcon" %>
<%@ include file="globalPaths.jsp" %>
<%@ include file="globalDefinitions.jsp" %>
<%
	Connection connection = null;
	Statement statement = null;
	ResultSet resultSet = null;
	String query = null;
	String artwork = null;
	String screenshot = null;
	String bigshot = null;
	boolean bigshotExists = false;
	boolean bigshotExistsAmongAll = false;
	boolean curArtworkBigshotExists = false;
	String artistName = null;
	String server = "";
	String md = "0";
	String id = null;
	Vector artworkIDs = new Vector();
	Vector screenshots = new Vector();
	Vector bigshotExistss = new Vector();
	int curArtworkIndex = -1;
	int artworkCount = 0;
	int width = 440;
	boolean slideshowOn = false;
	boolean slideshowAutostart = false;
	String mode = null;
	int imageWidth = 0;
	boolean isMagnified = false;
%>
<%
	try
	{
		artwork = request.getParameter("artwork");
		if (artwork == null)
		{
			throw new UserInputException("Parameter \'Artwork\' is missing.");
		}
		// Get mode parameter. Mode parameter is either 'default'
		// to display using zoom settings as they are remembered in cookies,
		// or 'fixed' or 'magnified', to display picture original (big size)
		mode = request.getParameter("mode");
		if (mode == null)
		{
			mode = "default";
		}
		if ("magnified".equals(mode) || "fit".equals(mode))
		{
			isMagnified = true;
		}
		slideshowAutostart = "start".equals(request.getParameter("slideshow"));
		slideshowOn = "on".equals(request.getParameter("slideshow"));
		connection = openConnection();
		statement = connection.createStatement();
		query = "SELECT W.id, W.screenshot, W.bigshot, W.widthImage,"
			+ " A.firstName, A.lastName, W.modifiedDate, Srv.httppath FROM galleryArtwork W "
			+ " JOIN galleryArtist A ON W.artist=A.id"
			+ " JOIN galleryArtwork W2 ON W2.id=" + quoteString(artwork) + "AND W.artist=W2.artist"
			+ " LEFT JOIN galleryServer Srv ON W.ftpserver=Srv.id"
			+ " WHERE W.activeflag IN ('Y', 'L', 'V') OR W.id=" + quoteString(artwork)
			+ " ORDER BY W.sortid";
		
		resultSet = statement.executeQuery(query);
		boolean onCurrentArtwork = false;
		while (resultSet.next())
		{
			id = resultSet.getString("W.id");
			artworkIDs.addElement(id);
			onCurrentArtwork = artwork.equals(id);
			if (onCurrentArtwork)
			{
				curArtworkIndex = artworkIDs.size() - 1;
			}
			server=resultSet.getString("Srv.httppath");
			screenshot = resultSet.getString("screenshot");
			if (screenshot == null)
			{
				throw new UserInputException("Incorrect value in \'Artwork\' parameter.");
			}
			// In 'magnified' mode, replace screenshots with big images (if they exist)
			bigshot = resultSet.getString("W.bigshot");
			bigshotExists = bigshot != null && bigshot.length() > 0;
			bigshotExistsAmongAll = bigshotExistsAmongAll || bigshotExists;
			bigshotExistss.addElement(bigshotExists);
			if (isMagnified && bigshotExists)
			{
				screenshot = bigshot;
			}
			screenshot = server + screenshot + "?" + getTimestampDigits(resultSet, "W.modifiedDate");
			screenshots.addElement(screenshot);
			
			if (onCurrentArtwork)
			{
				curArtworkBigshotExists = bigshotExists;
				imageWidth = resultSet.getInt("W.widthImage");
			}
			if (resultSet.getString("A.firstName").equals("")) 
				artistName = resultSet.getString("A.lastName"); 
			else 
				artistName = resultSet.getString("A.firstName") 
					+ " " + resultSet.getString("A.lastName");
		}

		if (curArtworkIndex == -1)
		{
			throw new UserInputException("Artwork not found.");
		}
		
		screenshot = (String)screenshots.elementAt(curArtworkIndex);
		bigshotExists = curArtworkBigshotExists;
		artworkCount = artworkIDs.size();
		resultSet.close();
	}
	catch (UserInputException uie)
	{
		session.setAttribute("404.log", "0");
		session.setAttribute("404.errorDescription", uie.getMessage());
		response.sendError(response.SC_NOT_FOUND);
		return;
	}
	catch (Exception e)
	{
		errorLog(e, query);
		sendRedirect(globalErrorPage + "?errorDescription="
			+ URLEncoder.encode(e.getMessage()));
		return;
	}
	finally
	{
		if (resultSet != null) resultSet.close();
		if (connection != null && !connection.isClosed()) connection.close();
	}
%><%
	String bodyBgColor = "FFFFFF";
	String controlPanelToggleMode = null;
	String controlPanelHidden = null;

	Cookie[] cookies = request.getCookies();
	for (int i = 0; cookies != null && i < cookies.length; i++)
	{
		Cookie cookie = cookies[i];
		if (cookie.getName().equals("slideshow.background"))
		{
			bodyBgColor = cookie.getValue(); 
		}
		if (cookie.getName().equals("slideshow.controlPanelToggleMode"))
		{
			controlPanelToggleMode = cookie.getValue(); 
		}
		if (cookie.getName().equals("slideshow.controlPanelHidden"))
		{
			controlPanelHidden = cookie.getValue(); 
		}		
	}

	if ("auto".equals(controlPanelToggleMode) && slideshowOn)
	{
		controlPanelHidden = "true";
	}
	
	String userAgent = request.getHeader("User-Agent");
	boolean isMac = (userAgent != null) && (userAgent.indexOf("Mac") != -1);
	boolean isIE = (userAgent != null) && (userAgent.indexOf("MSIE") != -1);
	String mainTableHeight = isMac ? "93%" : isIE ? "94.5%" : "95%";
	boolean enableMagnified = bigshotExists;
	
	if (bigshotExistsAmongAll)
	{
		// Change default width (440 px) to 550 px 
		// since this is the standard size bigshots
		// are scaled down to produce 'screenshots'
		width = 550;
	}	
	
	if (isMagnified && bigshotExists)
	{
		//screenshot = bigshot;
		// Change default width (440 px) to original width of big image
		width = imageWidth;
	}	
%>
<html>
<head>
<title><%= artistName %></title>
<meta name="classification" content="illustration agency">
<meta name="keywords" http-equiv="keywords" content="art hosting,affordable,fine art,virtual gallery">
<meta name="description" http-equiv="description" content="art hosting,affordable,fine art,virtual gallery">
<!-- head begin -->
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1">
<meta name="author" content="MesArt">
<meta name="copyright" content="Copyright (c) Taitl Design">
<meta name="rating" content="general">
<meta name="robots" content="all">
<meta name="revisit-after" content="5 days">
<meta http-equiv="reply-to" content="service@taitl.com">
<meta name="resource-type" content="document">
<meta name="distribution" content="global">
<meta name="language" content="english">
</head>
<script language="JavaScript">
<!-- 
// Specify stylesheet appropriate for current platform

if (((navigator.appVersion.indexOf("Win") != -1
  && navigator.appName.indexOf("Netscape") != -1
  && (!(navigator.appVersion.indexOf("5.0") != -1)))) 
  ||((navigator.appVersion.indexOf("Mac") != -1
  && navigator.appName.indexOf("Microsoft") != -1
  && ((navigator.appVersion.indexOf("4.0") != -1)||(navigator.appVersion.indexOf("5.0") != -1)))))
{
  document.write("<link rel='stylesheet' type='text/css' href='nnwin.css'>")
}    			
else
{
  document.write("<link rel='stylesheet' type='text/css' href='normal.css'>")
} 
//-->
</script>
<noscript>
<link rel="STYLESHEET" type="text/css" href="normal.css">
</noscript>
<script language=JavaScript1.2 src="js/jsource.js"></script>
<script language=JavaScript1.2 src="js/fw_menu.js"></script>
<script language=JavaScript1.2 src="js/rb.js"></script>
<script language=JavaScript1.2 src="js/browsercheck.js"></script>
<script language=JavaScript1.2 src="js/head.js"></script>
<script language=JavaScript1.2 src="js/cookies.js"></script>
<script language=JavaScript src="js/errorhandler.js"></script>
<script language=JavaScript src="js/slideshow.js"></script>
<script language=JavaScript src="js/layers.js"></script>
<style type="text/css">
#main { visibility:hidden; }
#mainImage { cursor:pointer; }
#extraInfo { margin-top:6px; }
#controlPanel { visibility:<%= "true".equals(controlPanelHidden) ? "hidden" : "inherit" %>; }
#slideshowSpeedControls { visibility:hidden; }
#slideshowStaticControls { visibility:inherit; }
</style>

<!-- Methods specific to this page -->
<script language="JavaScript1.2"><!--

// Data and methods specific to this page

var artworkCount = <%= artworkCount %>;
var artworks = new Array(artworkCount);
var screenshots = new Array(artworkCount);
var bigshotExistss = new Array(artworkCount);
var foregroundColor = '#2C3838';
var artworkImages = new Array(screenshots.length);
var today = new Date();
var mode = '<%= mode %>';
var isMagnified = (mode == 'magnified') || (mode == 'fit');
var bigshotExists = <%= bigshotExists %>;

// Load artwork arrays into javascript
<%
for (int i = 0; i < artworkIDs.size(); i++)
{
	%>artworks[<%= i %>]=<%= artworkIDs.elementAt(i) %>;<%= ((i + 1) % 7 == 0) ? "\n" : " " %><%
}	
%>

<%
for (int i = 0; i < screenshots.size(); i++)
{
	%>screenshots[<%= i %>]='<%= screenshots.elementAt(i) %>';<%= ((i + 1) % 2 == 0) ? "\n" : " " %><%
}	
%>

<%
for (int i = 0; i < bigshotExistss.size(); i++)
{
	%>bigshotExistss[<%= i %>]=<%= bigshotExistss.elementAt(i) %>;<%= ((i + 1) % 7 == 0) ? "\n" : " " %><%
}	
%>

// The main object: Slideshow
var slideshow = new Slideshow('slideshow', 'enlarge.jsp', artworks, screenshots, 
	<%= curArtworkIndex %>, <%= width %>);

if (isMagnified)
{
	slideshow.enableLastOriginalArtwork = false;
	slideshow.rememberZoom = false;
}

// Set default cookie expiration to 1 month
cookieDefaultExpiration = today;
var month = today.getMonth();
if (month < 11)
{
	cookieDefaultExpiration.setMonth(month + 1);
}
else
{
	cookieDefaultExpiration.setYear(today.getYear() + 1);
	cookieDefaultExpiration.setMonth(0);
}

// Call loadImages() through setTimeout() 
// to enforce a separate thread. Otherwize
// browser waits for loadImages() to complete
// before letting user continue with the UI.
//setTimeout('loadImages()', 1000);
function loadImages()
{
	var image;
	
	for(var i = 0; i < screenshots.length; i++)
	{
		image = new Image();
		image.src = screenshots[i];
		artworkImages[i] = image;
	}
}

/* Methods specific to this page*/

function setBackground(color)
{
		document.bgColor = color;
		slideshow.setCookie('slideshow.background', color.substring(1));
		foregroundColor = getContrastColor(color);
		var slideshowPanel = slideshow.findItem('slideshowPanel');
		if (slideshowPanel)
		{
			slideshowPanel.style.color = foregroundColor;
		}		
}

function getContrastColor(bgColor)
{
	var invert;
	
	switch (bgColor)
	{
		case '#FFFFFF': invert = '#2C3838'; break;
		case '#E5E5E5': invert = '#2C3838'; break;
		case '#CCCCCC': invert = '#2C3838'; break;
		case '#B3B3B3': invert = '#2C3838'; break;
		case '#999999': invert = '#2C3838'; break;
		case '#808080': invert = '#2C3838'; break;
		case '#666666': invert = '#E5E5E5'; break;
		case '#4D4D4D': invert = '#E5E5E5'; break;
		case '#333333': invert = '#E5E5E5'; break;
		case '#1A1A1A': invert = '#E5E5E5'; break;
		case '#000000': invert = '#E5E5E5'; break;
		default: invert = '#2C3838';
	}
	
	return invert;
}


// Page data

function init()
{
	onResize();
	slideshow.init();
	if (isMagnified)
	{
		// Hide control panel without making a call to 
		// slideshow.hideControlPanel(), so that it would
		// be visible again in other modes.
		var controlPanel = slideshow.findItem('controlPanel');
		if (controlPanel)
		{
			controlPanel.style.visibility = 'hidden';
		}
		if (mode == 'magnified')
			slideshow.showActualSize();
		else if (mode == 'fit')
		{
			if (bigshotExists)
				slideshow.showFitHorizontallyPageSize();
			else		
				slideshow.showFitPageSize();
		}
	}

	var slideshowAutostart = <%= slideshowAutostart %>
	if (slideshowAutostart && !slideshow.inSlideshow)
	{
		slideshow.start();
	}	
}

function onResize()
{
	slideshow.onResize();
}

window.onresize=onResize;

function onClickIntoMainImage()
{
	if (slideshow.inSlideshow) 
	{ 
		slideshow.stop(); 
	} 
	else if (mode == 'magnified')
	{ 
		if (bigshotExists)	
			location='enlarge.jsp?artwork=' + slideshow.artwork + '&mode=fit';
		else
			history.go(-1);
	}
	else if (mode == 'fit') 
	{
		var isComingFromMagnifiedMode = (document.referrer && document.referrer.indexOf('mode=magnified') != -1);
		history.go((isComingFromMagnifiedMode) ? -2 : -1);
	} 
	else 
	{ 
		if (bigshotExists)	
			location='enlarge.jsp?artwork=' + slideshow.artwork + '&mode=magnified'; 
		else
			location='enlarge.jsp?artwork=' + slideshow.artwork + '&mode=fit'; 
	} 
	
	return false;
}

function onSetArtwork(slideshow, artwork)
{
	bigshotExists = bigshotExistss[artwork];
	
	if (bigshotExists && !isMagnified && !slideshow.inSlideshow)
	{
		var html = '<a href="#" onClick="return onClickIntoMainImage();" id="dkSmall6black">Click for high resolution image</a>';
		layerWrite('extraInfo', 'main', html);
	}
	else
	{
		layerWrite('extraInfo', 'main', '');
	}	
}

slideshow.afterSetArtwork = onSetArtwork;

//function onSetZoom(slideshow, artwork, percent, temporarily)
//{
	//var html = layerRead('extraInfo', 'main');
	//html += " +" + percent;
	//alert('onSetZoom' + percent)
	//layerWrite('extraInfo', 'main', html);	
//}

//slideshow.afterSetZoom = onSetZoom;

//-->
</script>
<body bgcolor="#<%= bodyBgColor %>" topmargin=0 leftmargin=0 marginheight=0 marginwidth=0 onLoad="onloadHandler(); init();">
<center>
  <table cellpadding="0" cellspacing="0" border="0" height="5%" width="100%">
    <tr>
      <td valign="top" width="30%" align="center"><div id="slideshowPanel" align="left">
        <table cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td colspan="15" align="left" nowrap><% if (!isMagnified){ %><a href="#" id="slideshowTrigger" onClick="if (!slideshow.inSlideshow) slideshow.start(); else slideshow.stop(); return false;"><font id="dkSmall6black">&nbsp;Slideshow </font></a><span id="slideshowStaticControls"><a href="#" onClick="slideshow.stop(); slideshow.prevArtwork(); blur(); return false;" id="dkSmall6black">| Previous</a><a href="#" onClick="slideshow.stop(); slideshow.nextArtwork(); blur(); return false;" id="dkSmall6black"> | Next |</a><%}%><a href="#" onClick="slideshow.stop(); history.back(); blur(); return false;" id="dkSmall6black">&nbsp;Back</a></span></td>
          </tr>
					<tr>
            <td colspan="15" align="left" nowrap><span id="slideshowSpeedControls"><a href="#" onClick="if (!slideshow.inSlideshow) { slideshow.start(); } slideshow.speedup(); blur(); return false;" id="dkSmall6black">&nbsp;+ </a><a href="#" onClick="if (!slideshow.inSlideshow) { slideshow.start(); } slideshow.slowdown(); blur(); return false;" id="dkSmall6black">| - </a><a href="#" onClick="if (slideshow.inSlideshow) { slideshow.stop(); } blur(); return false;" id="dkSmall6black"> Stop </a></span></td>
          </tr>
          <tr>
          
        </table>
      </div></td>
      <td valign="top" width="40%" height="5%" align="center"></td>
      <td valign="top"  align="right"><div id="controlPanel" align="center">
          <table width="200" border="0" align="right" cellpadding="0" cellspacing="0" >
            <tr>
              <td bgcolor="#FFFFFF" onClick="setBackground('#FFFFFF')" height="15" width="20"><img src="ima/e1.gif" width=1 height=1 border=0>&nbsp;</td>
              <td bgcolor="#E5E5E5" onClick="setBackground('#E5E5E5')" height="15" width="20"><img src="ima/e1.gif" width=1 height=1 border=0>&nbsp;</td>
              <td bgcolor="#CCCCCC" onClick="setBackground('#CCCCCC')" height="15" width="20"><img src="ima/e1.gif" width=1 height=1 border=0>&nbsp;</td>
              <td bgcolor="#B3B3B3" onClick="setBackground('#B3B3B3')" height="15" width="20"><img src="ima/e1.gif" width=1 height=1 border=0>&nbsp;</td>
              <td bgcolor="#999999" onClick="setBackground('#999999')" height="15" width="20"><img src="ima/e1.gif" width=1 height=1 border=0>&nbsp;</td>
              <td bgcolor="#808080" onClick="setBackground('#808080')" height="15" width="20"><img src="ima/e1.gif" width=1 height=1 border=0>&nbsp;</td>
              <td bgcolor="#666666" onClick="setBackground('#666666')" height="15" width="20"><img src="ima/e1.gif" width=1 height=1 border=0>&nbsp;</td>
              <td bgcolor="#4D4D4D" onClick="setBackground('#4D4D4D')" height="15" width="20"><img src="ima/e1.gif" width=1 height=1 border=0>&nbsp;</td>
              <td bgcolor="#333333" onClick="setBackground('#333333')" height="15" width="20"><img src="ima/e1.gif" width=1 height=1 border=0>&nbsp;</td>
              <!--<td bgcolor="#1A1A1A" onClick="setBackground('#1A1A1A')" height="15" width="20"><img src="ima/e1.gif" width=1 height=1 border=0>&nbsp;</td>-->
              <td bgcolor="#000000" onClick="setBackground('#000000')" height="15" width="20"><img src="ima/e1.gif" width=1 height=1 border=0>&nbsp;</td>
            </tr>
            <tr>
              <td height=1 colspan="10"><img src="ima/e1.gif" width=1 height=1 border=0></td>
            </tr>
            <tr>
            <tr>
              <td colspan="10" align="center" height="3" ><table align="right" border=0>
              	<tr height="3" ><td valign="top" height="3" nowrap style="padding-top:0px;padding-bottom:1px;line-height:9px"><!--<a href="#" onClick="slideshow.setZoom(10); return false;" id="dkSmall7b">&nbsp;10%&nbsp;</a> <a href="#" onClick="slideshow.setZoom(25); blur(); return false;" id="dkSmall7b">&nbsp;25%&nbsp;</a> <a href="#" onClick="slideshow.setZoom(50); blur(); return false;" id="dkSmall7b">&nbsp;50%&nbsp;</a> --><a href="#" onClick="slideshow.setZoom(75); blur(); return false;" id="dkSmall6black">&nbsp;&nbsp;75%&nbsp;</a><a href="#" onClick="slideshow.setZoom(100); blur(); return false;" id="dkSmall6black">&nbsp;100%&nbsp;</a><a href="#" onClick="slideshow.setZoom(125); blur(); return false;" id="dkSmall6black">&nbsp;125%&nbsp;</a><a href="#" onClick="slideshow.setZoom(150); blur(); return false;" id="dkSmall6black">&nbsp;150%&nbsp;</a><a href="#" onClick="slideshow.setZoom(200); return false;" id="dkSmall6black">&nbsp;200%&nbsp;</a><a href="#" onClick="slideshow.setZoom('fit'); blur(); return false;" id="dkSmall6black">&nbsp;Fit&nbsp;</a><!--<% if(bigshotExists) { %><a href="#" onClick="location='enlarge.jsp?artwork=' + slideshow.artwork + '&mode=magnified';" id="dkSmall6black">&nbsp;Magnify&nbsp;&nbsp;</a><% } %>--></td>
              </tr></table></td>
            </tr>
          </table>
        </div></td>
    </tr>
  </table>
  <table id="mainTable" cellpadding="0" cellspacing="0" border="0" height="<%= mainTableHeight %>" width="100%">
    <tr>
      <!--<td align="center" valign="middle" height="96%"><br>-->
      <td align="center" valign="top" height="96%"><br>
        <br>
        <div id="main" align="center"><img id="mainImage" src="<%= screenshot %>" onClick="return onClickIntoMainImage();"
        style="cursor:<%= enableMagnified ? "pointer" : "default" %>" />
        <div id="extraInfo"></div>
        </div>
        </td>
    </tr>
    <tr>
      <td valign="bottom" nowrap align="right" width="100%" height="4%"><div id="item"> <font id="dkSmall6black"> <br>
          &copy;&nbsp;<%= artistName %>&nbsp; </font> </div></td>
    </tr>
  </table>
</center>
</body>
</html>
<%@ include file="globalFinally.jsp" %>