/*
 * This file has general-purpose functions for the web site...
 *
 */

/*
 * We'll start with some defaults for color, etc... 
 */


var today = new Date()
var bgTitle = 'yellow';
var bgBanner = 'lightgrey';
var fgTitle = 'cornsilk';
var fgBanner = 'white';
var bgMainArea = 'black';
var titleHeader = 'Gaynor Cooke Nelson';
var mailAddress='gaynorn@mindspring.com';
var displayMailAddress = "<img src='img/contact.jpg' border=0 />";
var displayMailAddress = "gaynorn@mindspring.com";
var borderWidth='5%';


/* Work out height and widths for the images */

var realBrowserWidth = 0, realBrowserHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    realBrowserWidth = window.innerWidth;
    realBrowserHeight = window.innerHeight;
  } else {
    realBrowserWidth = screen.width-50;
    realBrowserHeight = screen.height-200;
  } 
var nameHeight = Math.max(75,0.1 * realBrowserHeight); /* Height for the name icon at the top of the page */
var mainImageHeight = 0.65 * realBrowserHeight; /* Height of main image (and the thumbnail strip) */
var thumbnailWidth = 0.10 * realBrowserWidth; /* Width of the thumbnail strip */
var thumbnailStripWidth = thumbnailWidth + 30; /* allow for the slider bar */



/* Generate a title. Call this from within <head> */
function generateTitle(title)
{
    var t = titleHeader;
    if (title != "" && title != t) { t = t + " - "+title; }
    document.writeln("<title>"+t+"</title>");
}

function buildCommonBanner()
{

   var l = new Array();
   l.push ("<table border=0 cellpadding=0 cellspacing=10><tr><td>");
   l.push ("<img src='img/signatureBanner.jpg' height="+nameHeight+" />");
   l.push ("</td><td align=center><strong>-<strong></td><td valign=center>");
   l.push ("<h1>"+title+"</h1>");
   l.push ("</td></tr></table>");
   for (var i = 0;i<l.length;i++) { document.writeln(l[i]); }

}

artMenu = [ 
             ['Portraits', 'portraitsPage.html']
           , ['Animals &amp; Pets', 'animalsPage.html']
           , ['Landscapes', 'landscapesPage.html']
           , ['Still Lifes', 'stilllifePage.html']
          ];


textMenu = [ 
              ['Commissions', 'commissionPage.html']
            , ['Sitting technique', 'sittingPage.html']
            , ['About Gaynor', 'aboutPage.html']
           ];

function formatMenu(menuArray, alignment)
{
    var l = Array();
    l.push("<table width='100%' boder=0 cellpadding=4 cellspacing=4>");
    l.push("<tr>");
    for (var i = 0; i < menuArray.length; i++) {
         l.push("<td valign=top height=1 nowrap align="+alignment+"><a href='"+menuArray[i][1]+"'>&nbsp;"+menuArray[i][0]+"&nbsp;</a></td>");
    }
    l.push("</tr>");
    if (alignment == "left") {
        l.push("<tr><td valign=top colspan="+menuArray.length+">Contact: <a href='mailto:"+mailAddress+"'>"+displayMailAddress+"</a></td></tr>");
    }
    l.push("</table>");
    for (var i = 0;i<l.length;i++) { document.writeln(l[i]); }
}


/* Build the standard menu in the banner */
function buildStandardTextMenuBar()
{
   document.writeln("<table width='100%' border=0><tr><td align=left valign=top>");
   formatMenu(artMenu,"left");
   document.writeln("</td><td width='90%'>&nbsp;</td><td align=right valign=top>");
   formatMenu(textMenu,"right");
   document.writeln("</td></tr></table>");

}

/* build icon menu -- tedious, cause it needs icons */
function buildStandardMenuBar()
{
   var l = Array();
   l.push("<table width=100% boder=0 cellpadding=4 cellspacing=4>");
   l.push("<tr><td width=20></td>");
   for (var i = 0; i<standardMenu.length; i++) {
        l.push("<td valign=top height=1><a href='"+standardMenu[i][2]+"'><img src='img/"+standardMenu[i][0]+"' border=0></a></td>");
   }
   l.push("</tr><tr><td></td><td valign=top colspan="+standardMenu.length+"><a href='mailto:"+mailAddress+"'>"+displayMailAddress+"</a></td></tr>");
   l.push("</table>");
   for (var i = 0;i<l.length;i++) { document.writeln(l[i]); }

   /* Table is closed in buildPageBanner */

}

function buildPageBanner(titleIcon, subPages)
{

   var l = Array();
   l.push("<td width='90%' valign=top align=right>");
   l.push("<img src='img/"+titleIcon+"' />");

   if (subPages.length > 0) {
      l.push("<br /><table width='100%' border=0 cellpadding=4 cellspacing=4><tr>");
      for (var i = 0; i<subPages.length; i++) {
           l.push("<td valign=top><a href='"+subPages[i][2]+"'>"+subPages[i][0]+"</a></td>");
      }
      l.push("</tr></table>");
   }
   l.push("</tr></table>");

   for (var i = 0;i<l.length;i++) { document.writeln(l[i]); }

}


/* Start the page. Called just inside of <body>. 
*  Creates the menu, sets up the main table and logo, and page title. 
*  Use one of the endPagexxxx functions to finish afterwards
*/
function startPage()
{
   buildCommonBanner();
   /* Put left-right border */ document.writeln("<table width='100%' border=0 cellspacing=0 cellpadding=0 ><tr><td width='"+borderWidth+"'></td><td>");
      document.writeln("<table width='100%' border=0 cellspacing=0 cellpadding=0 ><tr><td>");
      buildStandardTextMenuBar();
      document.writeln("<hr />");
      /* document.writeln("</td></tr></table></td>"); */
      /* buildPageBanner(titleIcon, subPages); */
}

/* assume that artDirectory and artImages is already set somewhere */
function changePhoto(imgID, cellID, photoInfo)
 {
   	var ns6 = document.getElementById && !document.all;
	   var ie = document.all;
	
    var photo = "art/"+artDirectory+"/Large/"+photoInfo[1];
    var info = "<h2>"+photoInfo[2]+"</h2><p>"+photoInfo[3]+"<p>"+photoInfo[4];

    var loading = "... New image loading ...";

		if(ie){
         eval("document.all."+cellID).innerHTML = loading;
			eval("document.all."+imgID).src = photo;
			eval("document.all."+imgID).height = mainImageHeight;
			eval("document.all."+cellID).innerHTML = info;
		}
		else if(ns6){
			document.getElementById(cellID).innerHTML = loading;
			document.getElementById(imgID).src = photo;
			document.getElementById(imgID).height = mainImageHeight;
			document.getElementById(cellID).innerHTML = info;
		}
 }

function buildThumbnailDisplay()
{
   var l = Array();
   
   var thumb = 'art/'+artDirectory+'/Thumbnail/';
   var large = 'art/'+artDirectory+'/Large/';
   var firstPhoto = large+artImages[0][1];


   l.push("<table width='100%' border=0 cellspacing=10 cellpadding=10>");
   l.push("<tr><td valign=top width='10'> <!--- menu section -->");
   l.push("<div style='overflow:auto; height:"+mainImageHeight+"px; width:"+thumbnailStripWidth+"px;'>"); /* create the scroll box */
   l.push(     "<table width='100%' border=0>");
   for (var i = 0; i < artImages.length; i++) 
   {
      l.push(       "<tr><td align=top height=10><a href='#' onclick=changePhoto('mainImage','photoInfo',artImages["+i+"]) ><img src='"+thumb+artImages[i][0]+"' border=0 width="+thumbnailWidth+" /></a></td></tr>");
   }
   l.push(      "</table>");
   l.push("</div>");
   l.push(" </td><td valign=top align=center width='50%'>");
   l.push("     <img id=mainImage name=mainImage src='"+firstPhoto+"'' border=0 />");
   l.push("     </td>");
   l.push("     <td align=left id=photoInfo name=photoInfo valign=top width='25%'></td></tr></table>");


   for (var i = 0;i<l.length;i++) { document.writeln(l[i]); }
   changePhoto('mainImage','photoInfo',artImages[0]);

}




function endPage()
{

    var l = new Array();
    
     l.push("<hr />");
     l.push("<table width=100% border=0>");
     l.push("<tr><td align=center height=10 valign=bottom><small><font color='"+fgTitle+"'>All content and images copyright &copy; "+today.getFullYear()+" "+titleHeader+". All rights reserved.</font></small></td></tr>");
     l.push("</TABLE>");
     l.push("</td><td width='"+borderWidth+"'></tr></table>");

     l.push("</BODY>");
     l.push("</HTML>");

     for (var i = 0;i<l.length;i++) { document.writeln(l[i]); }
}
