// ----------------------------------------------------------------------------------
//
// photo_gallery.js
//
// Copyright 2007 Rob Laddish. All rights reserved.
// Version: 1.1, Oct 20, 2007
//
// This script works in conjunction with fix_psindex.pl to move aside index.html
// files from popular "web gallery" creation software, such as Adobe Photoshop
// Elements, and replaces it with enhanced functionality from this script. 
//
// To use this script, run fix_psindex.pl to move aside and replace your index.html
// files (for photo galleries only!) and to create image_properties.js files.
//
//
// TODO:
// - Get zoom to work & fix focus.
// - Add buttons: play/pause/delay#/quit (eject?)/help
// - Capture photo gallery caption with fix_psindex, put into our title!
// - Change fix_psindex to move aside index code & replace with ours.
//   Make sure ours has a good comment so we can replace it later as needed.
// - Check for leading slash on items, don't prepend otherwise.
// - Write code to parse picassa photo albulm into order.js & make it work with this code.
// - Use better unescape/escape code for fix_psindex to translate next into filename.
// - Check & disable html from caption and path names read in from order.js.
// - Allow param for image to start on? Put into address bar? This lets people bookmark/send exact image.
// - ButtonPress always advances, check for left button only.
// - When playing slideshow, can we do equivalent of F11 to go full screen?
// - Look for tags, perhaps add to the description? (fix_psindex can find them & add to order.js)
// - Look for date & time of image taken? (not file timestamp)
// - See if we can speed things up by loading just the changed caption & pic & not the full html contents. (single pic window)
// - Force screen save to use timeout (just 1 load), and restart time AFTER the next image loads.
//   Otherwise it flashes by and hangs up the CPU when it tries to skip too fast.
// - Deploy to all existing web pages.
// - Create main web page comments to tell others how to make this work.
// - Create web help page for this script. Reference from elsewhere?
// - Refactor and simplify code!
// - Turn off other modification code in fix_psindex. This superceedes all.
// - i=icon size works in firefox, broken in ie. (broken in both)
// - Icon sizes picasa: 72, 144, 288!
// - Change fix_psindex to create new icons for us from base images, 256x256 max? 50% quality or less. (make small)
// - Add edit page properties button to call cgi-bin with fixed password to update all collection properties.
// - IE appears to have lots of space between thumbnail and caption, thumb not align=bottom. fix!
// - Preload next image: img = new Image(); img.src = "path"; do after page is loaded so it goes in background.
//
// Internet Explorer Major README!
// - IE caches files even when we tell it not too. Shift/refresh will NOT grab new code.
// - When coding, bring up internet properties & delete temporary internet files after EACH change.
// - Reload the new page by hitting enter in the url bar of the browser.
// - To ensure it works, change the full version each time & use alert to see it in the browser. (or in caption?)
// - OnResize seriously broken, it gets called on no resize and continuously during a resize. It gets triggered
//   so quickly that OnResize events get pre-empted in the middle and the stack overflows. "error 800a001c"
// - TODO: add version to debug + main grid page
// - TODO: IE lost transparency on buttons and captions. Ugh.
// - TODO: IE works first time, fails on 2+ time,multiple resize callbacks, then error, then whitescreen.
// - TODO: Ignore OnResize for IE only or prevent pre-empting of OnResize.
//
// Testing process:
// - Always work on photo_gallery2.js & with a hand edited index.shtml that calls it.
//   This way we don't break production code, and it could stay broken for a while fixing IE bugs.
// - Test changes with firefox, ie.
// - Try all modes, keypress, buttonpress, then torture test by leaving on 1-sec slideshow for an hour.
// - Copy/paste on photo_gallery.js, this creates photo_gallery copy.js. Rename it to photo_gallery1 and accept overwrite.
// - Edit it and change version to "1".
// 
// Notes:
// - Thumbs are often created as 128x96 (WxH) for pse 4.0.
//
// ----------------------------------------------------------------------------------

// User overridable variables, change in your html header if you wish
//var slideshow_interval;
//var method;
//var zoom_level;
//var cur_image;
//var slideshow_delay;
var version = "2";
var full_version = "2.020 (2007, Oct 14, 9:10pm)";
var no_cache = "<meta http-equiv=\"Pragma\" content=\"no-cache\"><meta http-equiv=\"expires\" content=\"-1\">\n";
var js_includes = "<script type=\"text/javascript\" src=\"/admin/js/photo_gallery"+version+".js\"></script>\n\
     <script type=\"text/javascript\" src=\"image_properties.js\"></script>\n\
     <script type=\"text/javascript\" src=\"collection_info.js\"></script>\n\
";
var doctype = "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">\n";

// IE: large # resize events worked around with timer, but still cause IE to slow down. Skip for now.
var ie_skip_resize=1;
var max_zoom=6; // must be at least 2.

// Templates for web document layouts
var frameset1_array = new Array();
var frameset2_array = new Array();
var header_height = 96;
var info_width = 160;
var ie=0;
if (navigator.appName == "Microsoft Internet Explorer") {ie=1;header_height=108;} // fix font later to make it the same

// todo: these work in firefox, not ie, figure out why & convert
frameset1_array['vlthumb'] = header_height + ',0,*,0';
frameset2_array['vlthumb'] = info_width + ',*,0';
frameset1_array['vrthumb'] = header_height + ',0,*,0';
frameset2_array['vrthumb'] = '0,*,160';
frameset1_array['htthumb'] = header_height +',160,*,0';
frameset2_array['htthumb'] =  '0,*,0';
frameset1_array['hbthumb'] = header_height +',0,*,160';
frameset2_array['hbthumb'] =  '0,*,0';
frameset1_array['grid'] = header_height +',0,*,0';
frameset2_array['grid'] =  '220,*,0';
frameset1_array['grid_image'] = header_height +',0,*,0';
frameset2_array['grid_image'] =  '0,*,0';
frameset1_array['zoom1'] = '0,0,*,0';
frameset2_array['zoom1'] =  '0,*,0';

//alert("framset2_array[grid]=" + frameset2_array['grid']);

// Main frameset
var frameset_layout=doctype+"<html>\n<head><title>Web Photo Gallery</title>\n\
     <META http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\">\n\
     " + no_cache + js_includes + "\n\
   </head>\n\
\n\
   <FRAMESET id=\"frameset1\" framespacing=\"0\" frameborder=\"0\" border=\"0\" rows=\""+frameset1_array['grid']+"\">\n\
	 <FRAME src=\"/admin/ssi/menubar.shtml\" scrolling=no NAME=\"header_frame\">\n\
     <FRAME NAME=\"hthumb_frame1\">\n\
     <FRAMESET id=\"frameset2\" onLoad=\"top.loaded=true;return true;\" framespacing=\"0\" frameborder=\"0\" border=\"0\" cols=\""+frameset2_array['grid']+"\">\n\
       <FRAME NAME=\"vthumb_frame1\">\n\
       <FRAME NAME=\"main_frame\">\n\
       <FRAME NAME=\"vthumb_frame2\">\n\
     </FRAMESET>\n\
     <FRAME NAME=\"hthumb_frame2\">\n\
     <NOFRAMES>\n\
<BODY>\n\
Viewing this page requires a browser capable of displaying frames.\n\
</BODY>\n\
     </NOFRAMES>\n\
   </FRAMESET>\n\
</HTML>";


// document.navbar.url.value
// var args = getArgs(  );             // Get arguments
// if (args.x) x = parseInt(args.x); 

// ----------------------------------------------------------------
// init_photo_gallery
//
// Called once from the static, near empty, html page on the web
// server. From here we create and fill all the frames.
//
// Notes:
// - xxx
// TODO:
// - Look for ?image=xxx or image=num to set the first image.
// - Allow cookies to set defaults?
// ----------------------------------------------------------------
function init_photo_gallery(command)
{
	// init from fixed web page
	//alert("Called init_photo_gallery(command=" + command+")");
	if (command == "fixed") {
		top.loaded=false;
		top.num_checks=0;
		top.document.write(frameset_layout);
    	top.document.close();
    	// firefox needs time to load the page, otherwise frames are undefined
    	// can't use a wait loop, or we're too busy to paint the content...
    	// once frameset loads, all top.* variables become unset.
    	top.init_interval = setInterval("top.init_photo_gallery('check_fixed');", 500);
    	// alert("note: version = " + version + "; full version = " + full_version);
    } else if (command == "check_fixed") {
    	// make sure frameset has loaded, abort if we wait too long.
    	if (typeof(top.num_checks)=="undefined"){top.num_checks=0;}
    	top.num_checks=top.num_checks+1;
    	if (top.frames.length<2) {
    		//alert("check_fixed found top.loaded is still false: top.loaded="+top.loaded+", top.num_checks="+top.num_checks);
    		if (top.num_checks>200) {
    			window.clearInterval(top.init_interval);
    			display_message("An error has occured","Sorry, we timed out waiting for your browser to update");
    		}
    		return;
    	}
    	window.clearInterval(top.init_interval);
    	//top.debug_frames("list_frames");
    	
    	// now that frames have loaded, init vars, load their content
    	// TODO: allow us to set them via cookies? permanent prefs?
		top.cur_image=1;
		top.method = "hbthumb";
		top.method = "grid";
		top.grid_page="main";
		top.zoom_level = 0;
		top.slideshow_delay = 0;
		top.icon_size = 2;
		top.debug=0;
		top.fill_frames_resize = 0;
		top.display_image_resize = 0;
		top.resize_timer = 0;
		window.clearTimeout(top.resize_timer);
		
		// set defaults for vars that could be set in collection info (but may be unset)
		top.collection_title = collection_title;
		if (typeof(top.collection_title)=="undefined") {top.collection_title="";}
    	if (top.collection_title=="") {top.collection_title = "Web Photo Gallery";}
    	top.collection_subtitle = collection_subtitle;
		if (typeof(top.collection_subtitle)=="undefined") {top.collection_subtitle="";}
    	if (top.collection_subtitle=="") {top.collection_subtitle = "";}
    	top.collection_description = collection_description;
    	if (typeof(top.collection_description)=="undefined") {top.collection_description="";}
    	if (top.collection_description=="") {top.collection_description= "No description exists";}
    	
    	// set the title
    	top.document.title = top.collection_title;
		
		// create the content
    	top.fill_frames("init");

    	return;
	} else {
		alert("Error: init_photo_gallery called with invalid arg. command="+command);
	}
	return;
}

// ----------------------------------------------------------------
// ----------------------------------------------------------------
function debug_frames(command)
{
	var a=0;
	var msg;
	
	// define msg
	msg="";
    if (command == "list_frames") {
		msg=msg + "top.frames.length = " + top.frames.length + "\n";
		msg=msg + "windows.frames.length = " + window.frames.length + "\n";
		msg=msg + "parent.frames.length = " + parent.frames.length + "\n";
		msg=msg + "parent.parent.frames.length = " + parent.parent.frames.length + "\n";
		while (a<top.frames.length) {
			msg=msg + "  top.frames["+a+"].name="+top.frames[a].name;
			// works for both ie and firefox 2+
			msg=msg + " [clientWidth="+top.frames[a].document.body.clientWidth+", clientHeight="+top.frames[a].document.body.clientHeight+"]";
			// ie works with this, but returns undefined:
			//msg=msg + " [innerWidth="+top.frames[a].innerWidth+", innerHeight="+top.frames[a].innerHeight+"]";
			msg=msg + "\n";
			a=a+1;
		}
		msg=msg + "top.loaded = " + top.loaded + "\n";

	} else {
		msg=msg + "Error: debug_frames passed invalid command.\n";
	}
	alert(msg);
}

// ----------------------------------------------------------------
// fill_frames
//
// Notes:
// - PSE 4.X creates thumbs 128x96 (WxH) for large thumbs.
// TODO:
// - Get actual thumbnail sizes from order.js.
// - Determine new width/heigh if captions are allowed.
// - Change banner & other elements based on IE vs. netscape.
// - Don't let click advance image if clicking on button box!
// - Create slideshow buttons bar prev/next/play/pause/timer value.
// - Form grid of thumbs, base it on window width for max width,
//   height of each row based on max image height in that row, repaint
//   when window is resized.
// - Turn off key.button press advance when grid_frame is active!
// ----------------------------------------------------------------
function fill_frames(command)
{

    // self.focus();

	// check for and initialize globals if needed, avoids later div by zero errors.
	// note: IE says max_thumb_width undefined here, but top.max_thumb_width is ok.
	// note: ie sometimes calls us repeatedly on resize!
	if (0 && command=="resize") {
		return true;
		if (top.fill_frames_resize>0) {return true;}
		top.fill_frames_resize=1;
	}
	
	if (top.method == "grid") {
		top.create_grid_html("main");
		top.fill_frames_resize=0;
    	return(true);
	}
	
	
	if (top.max_thumb_width<=0) {
		top.max_thumb_width=64;
	}
	if (top.max_thumb_height<=0) {
		top.max_thumb_height=64;
	}

    //if (typeof(top.cur_image)=="undefined") {top.cur_image=0;}
    //if (typeof(top.slideshow_delay)=="undefined") {top.slideshow_delay=0;}
    //if (typeof(top.method)=="undefined") {top.method="hthumb";}
    //top.zoom_level=0;
    //top.slideshow_delay=0;
    
    // Create thumb html
    var resize_cmd = "";
    var thumb_header=doctype+"<HTML>\n\
<HEAD>\n\
<TITLE>Thumbnail Frame</TITLE>\n\
  <META http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\">\n\
     " + no_cache + js_includes + "\n\
  <style type=\"text/css\">\n\
      .hlt {\n\
      		background-color: #444444;\n\
      }\n\
   </style>\n\
</HEAD>\n\
<BODY bgcolor=\"#000033\" leftmargin=\"0\" marginwidth=\"0\" topmargin=\"0\" marginheight=\"0\" text=\"#666699\" link=\"#666699\" vlink=\"#666699\" alink=\"#666699\" onkeypress=\"process_keypress(event,'main');return true;\" "+resize_cmd+" >\n\
\n";
	var thumb_footer="</BODY>\n\
</HTML>";


	var thumb_horizontal = thumb_header + "\n\
		<table height=\"96\" border=\"0\" cellpadding=\"4\" cellspacing=\"0\">\n\
		   <tr align=\"center\">\n\
    ";
	var thumb_vertical = thumb_header + "\n\
		<table width=\"128\" border=\"0\" cellpadding=\"4\" cellspacing=\"0\">\n\
    ";
    var hover_highlight = "onmouseover=\"this.className = 'hlt';\" onmouseout=\"this.className = '';\"";

	var pos = 0;
	var thumb_src;
	var max_width=top.main_frame.document.body.clientWidth;
	var cell_spacing=10;
	if (max_width<=0) {max_width=1000;}
	// defined by order.js:
	//max_thumb_width=128;
	//max_thumb_height=128;

	// figure out our maximum cell width and height
	var max_cell_width;
	var max_cell_height;
	if (top.icon_size==1) {
		max_cell_width=64;
		max_cell_height=64;
	} else if (top.icon_size==2) {
		max_cell_width=128;
		max_cell_height=128;
	} else if (top.icon_size==3) {
		max_cell_width=256;
		max_cell_height=256;
	} else {
		max_cell_width=128;
		max_cell_height=128;
	}
	

	// determine scale factor for icons
	// todo: change table to use only div's - should speed it up!
	var icon_scale=1;
	if (max_thumb_width>max_thumb_height) {
		icon_scale = max_cell_width/max_thumb_width;
	} else {
		icon_scale = max_cell_height/max_thumb_height;
	}
	var scaled_icon_width;
	var scaled_icon_height;
	
	// todo: make this dynamic, in case users text size or browser uses non-std font.
	// see: http://www.thescripts.com/forum/thread92437.html
	// <div id=Test style="visibility:hiddern;height:1px">Xxxxx</div>
	//   function TextHeight(text,points,family){
	//      test=document.getElementById("Test")
	//      test.style.fontFamily=family
	//		test.style.fontSize=points
	//		test.innerHTML=text
	//	return test.clientHeight+' px height'
	//}
	//   
	var caption_height=20;

	var max_thumb_width=128;
	var cur_width=0;
	while (pos<num_files && pos <10000) {
		thumb_src = thumb_file_array[pos];
		scaled_icon_width = parseInt(thumb_width_array[pos]*icon_scale);
	    scaled_icon_height = parseInt(thumb_height_array[pos]*icon_scale);
	    thumb_horizontal = thumb_horizontal + "<td align=\"center\" valign=\"middle\" " + hover_highlight + " >\n\
	        <a onclick=\"top.display_image('thumb a onclick'," + pos + ");return true;\">\n\
	        <img onclick=\"top.display_image('thumb img onclick'," + pos + ");return true;\" src=\"" + thumb_src + "\"></a>\n\
	        </td>\n";
	    thumb_vertical = thumb_vertical + "<tr align=\"center\">\n\
	        <td align=\"center\" valign=\"middle\" " + hover_highlight + " >\n\
	        <a onclick=\"top.display_image('thumb a onclick'," + pos + ");return true;\">\n\
	        <img onclick=\"top.display_image('thumb img onclick'," + pos + ");return true;\" src=\"" + thumb_src + "\"></a>\n\
	        </td></tr>\n";
	 	pos=pos+1; 
	}
	thumb_horizontal = thumb_horizontal + "</tr></table>" + thumb_footer;
	thumb_vertical = thumb_vertical + "</table>" + thumb_footer;
	
    if (top.method == "vlthumb") {
		parent.vthumb_frame1.document.write(thumb_vertical);
		parent.vthumb_frame1.document.close();	
		top.display_image("fill_frames vlthumb",top.cur_image);
    } else if (top.method == "vrthumb") {
		parent.vthumb_frame2.document.write(thumb_vertical);
		parent.vthumb_frame2.document.close();	
		top.display_image("fill_frames vrthumb",top.cur_image);
    } else if (top.method == "htthumb") {
   		parent.hthumb_frame1.document.write(thumb_horizontal);
		parent.hthumb_frame1.document.close();	
		top.display_image("fill_frames htthumb",top.cur_image);
    } else if (top.method == "hbthumb") {
   		parent.hthumb_frame2.document.write(thumb_horizontal);
		parent.hthumb_frame2.document.close();	
		top.display_image("fill_frames hbthumb",top.cur_image);
	} else {
    	alert("Error: fill_frames called for invalid top.method="+top.method);	
    }
    top.fill_frames_resize=0;
    return(true);
}

// ----------------------------------------------------------------
// create_grid_html
//
// 
// ----------------------------------------------------------------
function create_grid_html(command)
{
	//alert("Called create_grid_html(top.max_thumb_width=" + top.max_thumb_width+", command="+command+")");
	//window.clearInterval(top.init_interval);
	
	// set defaults
	var grid_type = "table";	// valid values: table, div, span; only table works right now
	var info_location = "frame";	// valid values: frame, main
	top.grid_page = "grid";

	// default some globals to avoid division by zero errros.
	// todo: move to top & just call error dialog if not set properly.
	if (top.max_thumb_width<=0) {
		top.max_thumb_width=64;
	}
	if (top.max_thumb_height<=0) {
		top.max_thumb_height=64;
	}
    //if (typeof(top.cur_image)=="undefined") {top.cur_image=0;}
    //if (typeof(top.slideshow_delay)=="undefined") {top.slideshow_delay=0;}
    //if (typeof(top.method)=="undefined") {top.method="hthumb";}
    //top.zoom_level=0;
    //top.slideshow_delay=0;

    
    // Set overall page title
    if (command != "resize") {
		top.set_frame_sizes(); // fix from when quit called lower down (what about resize?)
	}
    
    
    // get window frame width/height
	var max_width=top.main_frame.document.body.clientWidth;
	if (max_width<=0) {max_width=1000;}
	if (info_location == "main") {
		max_width = max_width - info_width;
	}
	
    // figure out our maximum cell width and height
	var max_cell_width;
	var max_cell_height;
	if (top.icon_size==1) {
		max_cell_width=64;
		max_cell_height=64;
	} else if (top.icon_size==2) {
		max_cell_width=128;
		max_cell_height=128;
	} else if (top.icon_size==3) {
		max_cell_width=256;
		max_cell_height=256;
	} else {
		max_cell_width=128;
		max_cell_height=128;
	}
	
	// determine scale factor for icons
	var icon_scale=1;
	if (max_thumb_width>max_thumb_height) {
		icon_scale = max_cell_width/max_thumb_width;
	} else {
		icon_scale = max_cell_height/max_thumb_height;
	}
    
    // Resize action special for IE to avoid stack overflow on huge number of calls
    var resize_cmd = "onresize=\"top.fill_frames('resize');\"";
    if (navigator.appName == "Microsoft Internet Explorer") {
    	resize_cmd = "onresize=\"clearTimeout(top.resize_timer);top.resize_timer=setTimeout('top.resize_timeout(2,2);',500);return true;\"";
    	if (ie_skip_resize) {
    		resize_cmd = "";
    	}
    }

	thumb_grid=doctype+"<HTML>\n\
<HEAD>\n\
<TITLE>Thumbnail Frame</TITLE>\n\
   <META http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\">\n\
     " + no_cache + js_includes + "\n\
   <style type=\"text/css\">\n\
      .hlt {\n\
      		background-color: #eeeeee;\n\
      }\n\
   </style>\n\
</HEAD>\n\
<BODY leftmargin=\"0\" marginwidth=\"0\" topmargin=\"0\" marginheight=\"0\" onkeypress=\"process_keypress(event,'main');\" "+resize_cmd+" >\n\
\n";
	if (grid_type == "table") {
		thumb_grid = thumb_grid + "<table width=\"100%\" border=\"0\" cellpadding=\"4\" cellspacing=\"0\" \
		\>\n\<tr>\n";
	}
	
	var cell_spacing=12;
	if (navigator.appName == "Microsoft Internet Explorer") {cell_spacing=cell_spacing+3;}
	var scaled_icon_width;
	var scaled_icon_height;
	// todo: make this dynamic, in case users text size or browser uses non-std font.
	// see: http://www.thescripts.com/forum/thread92437.html
	// <div id=Test style="visibility:hiddern;height:1px">Xxxxx</div>
	//   function TextHeight(text,points,family){
	//      test=document.getElementById("Test")
	//      test.style.fontFamily=family
	//		test.style.fontSize=points
	//		test.innerHTML=text
	//	return test.clientHeight+' px height'
	//}
	//   
	var caption_height=20;
	
	
	var hover_highlight = "onmouseover=\"this.backgroundColor='#FF00FF';\" onmouseout=\"this.backgroundColor='#FFFFFF';\"";
	hover_highlight = "onmouseover=\"this.className = 'hlt';\" onmouseout=\"this.className = '';\"";
	//hover_highlight="";

	var thumb_src;
	var cur_width=0;
	var pos = 0;
	while (pos<num_files && pos <10000) {
		thumb_src = thumb_file_array[pos];
	    if (cur_width + max_cell_width>max_width) {
	    	if (grid_type=="table") {
	    		thumb_grid = thumb_grid + "</tr><tr>\n";
	    	}
	    	cur_width=0;
	    }
	    scaled_icon_width = parseInt(thumb_width_array[pos]*icon_scale);
	    scaled_icon_height = parseInt(thumb_height_array[pos]*icon_scale);
	    // todo: expand caption to full length (hover window?) when user hovers over it
	    if (grid_type=="table") {
	    	thumb_grid = thumb_grid + "<td width=\"" + max_cell_width + "\" align=\"center\" valign=\"bottom\" "+hover_highlight+" onclick=\"top.display_image('thumb grid a onclick'," + pos + ");return true;\">\n";
	    	thumb_grid = thumb_grid + "\n\
		        <img align=\"bottom\" border=\"1\" width=\"" + scaled_icon_width + "\" height=\"" + scaled_icon_height + "\" src=\"" + thumb_src + "\">\n\
		        <br><div style=\"border:0 margin:0 padding:0 height:"+caption_height+"px;overflow:hidden;width:"+max_cell_width+"px;\"><font><nobr>" + file_array[pos] + "</nobr></font></div>\n\
		        ";
	    } else if (grid_type=="div") {
	    	thumb_grid = thumb_grid + "<div style=\"border:0 margin:0 padding:0; overflow:hidden; width:" + max_cell_width + ";\" onclick=\"top.display_image('thumb grid a onclick'," + pos + ");return true;\">\n\
	    	    <img align=\"bottom\" border=\"1\" width=\"" + scaled_icon_width + "\" height=\"" + scaled_icon_height + "\" src=\"" + thumb_src + "\">\n\
				<br><font><nobr>" + file_array[pos] + "</nobr></font></div>\n";
	    } else if (grid_type=="span") {
	    	thumb_grid = thumb_grid + "<span style=\"border:0 margin:0 padding:0; overflow:hidden; width:" + max_cell_width + ";\" onclick=\"top.display_image('thumb grid a onclick'," + pos + ");return true;\">\n\
	    	    <img align=\"bottom\" border=\"1\" width=\"" + scaled_icon_width + "\" height=\"" + scaled_icon_height + "\" src=\"" + thumb_src + "\">\n\
				<br><font><nobr>" + file_array[pos] + "</nobr></font></span>\n";
		}
	    if (grid_type=="table") {
	    	thumb_grid = thumb_grid + "</td>\n";
	    } else if (grid_type=="div") {
	    	//thumb_grid = thumb_grid + "</div>";
	    } else if (grid_type=="span") {
	    	//thumb_grid = thumb_grid + "</span>";
	    }
	 	cur_width=cur_width+max_cell_width+cell_spacing;
	 	pos=pos+1  
	}
	if (grid_type=="table") {
		thumb_grid = thumb_grid + "</tr></table>";
	} else {
	}
	thumb_grid = thumb_grid + "</body></html>\n";
	
	// figure out owner information
	var owner="<u>Owner</u><br>\n";
	if (top.collection_email == "publicrob1@laddish.net" || top.collection_email == "robl@laddish.net") {
		owner = "<center><img width=80 height=100 src=\"http://laddish.net/intro_photos/people/rob_laddish.jpg\"><br>\n";
		owner = owner + "<a href=\"http://laddish.net\">Rob Laddish</a><br>\n";
		owner = owner + "<a href=\"mailto:"+top.collection_email+"\">"+top.collection_email+"</a></center>\n";
	} else if (top.collection_email != "") {
		owner = owner + "<a href=\"mailto:"+top.collection_email+"\">"+top.collection_email+"</a>\n";
	} else {
		owner = owner + "Unknown";
	}
	var subtitle = "";
	if (top.collection_subtitle != "") {
		subtitle = top.collection_subtitle + "<br>\n";
	}
	
	// create grid information panel in left frame
	// TODO: Add picture of person _ link to their home page
	// TODO: Add map links
	// TODO: May want to add a big intro pic in upper left corner.
	// TODO: Add collection info, total # pictures, date
	var info_width2 = info_width-10;
	var info_width3 = info_width2-20;
	
	var grid_info = doctype+"<HTML>\n\
<HEAD>\n\
<TITLE>Info Frame</TITLE>\n\
  <META http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\">\n\
     " + no_cache + js_includes + "\n\
</HEAD>\n\
<BODY valign=top width="+info_width2+" onkeypress=\"top.process_keypress(event,'main');\" >\n\
<table valign=top border=0 cellspacing=10 width="+info_width3+" ><tr valign=top><td bgcolor=\"#EEEEEE\">\n\
  <font size=\"+1\" align=\"center\"><u>" + top.collection_title + "</u></font><br>\n\
  " + subtitle + "\
  <font size=\"-1\">" + top.collection_date + "<br>\n\
  " + top.num_files + " photos</font><br><br>\n\
  " + top.collection_description + "</td></tr><br><br>\n\n\
  <tr><td bgcolor=\"#EEEEEE\">" + owner + "</td></tr><br><br>\n\n\
  <tr><td bgcolor=\"#EEEEEE\"><nowrap><u>Buttons</u></nowrap><br>\n\
  <button onclick=\"top.display_image('slideshow',0,4);return true;\">Slideshow</button><br>\n\
  <button onclick=\"top.location='"+top.parent_index_file+"';return true;\">Quit</button><br>\n\
  </td></tr><br><br>\n\
";
	if (1) {
		// add sizes
		grid_sizes="<tr><td bgcolor=\"#EEEEEE\"><nowrap><u>Sizes</u></nowrap><br>";
		if (top.icon_size==1) {
			grid_sizes = grid_sizes + "<a onclick=\"return true;\"><img src=\"/images/zoom1on.gif\"></a>";
		} else {
			grid_sizes = grid_sizes + "<a onclick=\"top.icon_size=1;top.fill_frames('i');return true;\"><img src=\"/images/zoom1off.gif\"></a>";
		}
		if (top.icon_size==2) {
			grid_sizes = grid_sizes + "<a onclick=\"return true;\"><img src=\"/images/zoom2on.gif\"></a>";
		} else {
			grid_sizes = grid_sizes + "<a onclick=\"top.icon_size=2;top.fill_frames('i');return true;\"><img src=\"/images/zoom2off.gif\"></a>";
		}
		if (top.icon_size==3) {
			grid_sizes = grid_sizes + "<a onclick=\"return true;\"><img src=\"/images/zoom3on.gif\"></a>";
		} else {
			grid_sizes = grid_sizes + "<a onclick=\"top.icon_size=3;top.fill_frames('i');return true;\"><img src=\"/images/zoom3off.gif\"></a>";
		}
		grid_sizes = grid_sizes + "</nowrap></td></tr><br><br>\n";
		grid_info = grid_info + grid_sizes;

	}
	if (1) {
		// add debug information
		grid_info = grid_info + "\n\
<tr><td bgcolor=\"#EEEEEE\"><nowrap><u>Debug</u></nowrap><br>\n\
  version="+full_version+"<br>\n\
  cur_image="+top.cur_image+"<br>\n\
  num_files="+top.num_files+"<br>\n\
  zoom_level="+top.zoom_level+"<br>\n\
  slideshow_delay="+top.slideshow_delay+"<br>\n\
  method="+top.method+"<br>\n\
  icon_size="+top.icon_size+"<br>\n\
  max_width="+max_width+"<br>\n\
  parent_index_file="+top.parent_index_file+"<br>\n\
  </td></tr><br><br>\n\
";
	}
	grid_info = grid_info + "\n\
</table></body></html>\n\
\n";

	parent.main_frame.document.write(thumb_grid);
	parent.main_frame.document.close();
	
	// write to info window
	parent.vthumb_frame1.document.write(grid_info);
	parent.vthumb_frame1.document.close();
	
	// pre-load first image while user looks at grid
	if (top.num_files>0) {
		var next_img = new Image();
		next_img.src = image_file_array[0];
	}

}


// ----------------------------------------------------------------
// display_image
//
// 
// todo:
// - create more fancy tables with image info
// - advance position of thumb frame to show this thumbnail (in middle of frame if possible)
// - try to load next image + header without replacing all the html contents. (faster!)
// ----------------------------------------------------------------
function display_image(command,pos,delay)
{
	if (0 && command=="resize") {
		return true;
		if (top.display_image_resize>0) {return true;}
		top.display_image_resize=1;
	}

	// look for odd conditions
	var alert_debug=0;
	if (top.num_files<=0) {return;}
	if (typeof(pos)=="undefined"||typeof(pos)=="NaN"||(pos==""&&pos!=0)) {pos="same";}
	if (typeof(delay)=="undefined"||typeof(delay)=="NaN"||(delay==""&&delay!=0)) {delay=0;}
	if (command=="resize") {return true;} // temporary ie workaround?
	//alert("Called display_image(command="+command+",pos="+pos+",delay="+delay+")");
	if (alert_debug) {alert("pos1");}
	
	// set display options
	var button_location = "tfloat"; // options: top, tfloat
	var caption_location = "bfloat"; // options: top, bottom, bfloat
	var caption_font = "size=\"+2\"";
	var rewrite_html = 1; // options: 0,1; implement 0 later to just load image

	// show we have zoomed in on the image
	top.grid_page = "image";
	
	// see if we should resize our frames
	if (command=="thumb grid a onclick"||command=="thumb grid img onclick"||command=="slideshow") {
		top.zoom_level=2;
		top.set_frame_sizes();
	}
	
	// change image if needed
	if (alert_debug) {alert("pos2");}
	if (pos == "next") {
		top.cur_image +=1;
		if (top.cur_image>=top.num_files) {
			top.cur_image=0;
		}
	} else if (pos == "prev") {
		top.cur_image -=1;
		if (top.cur_image<0) {
			top.cur_image=top.num_files-1;
		}
		if (top.cur_image<0) {
			top.cur_image=0;
		}
	} else if (pos == "same") {
		// do nothing, it's just a refresh or initial load
	} else if (pos == "quit") {
		// go back one level, out of place here, used for a simple callback
		window.clearTimeout(top.slideshow_interval);
	    if (top.method=="grid" && top.grid_page=="image") {
	    	top.grid_page="grid";
	    	top.fill_frames('quit');
	    	return;
	    }
	    top.location = top.parent_index_file;
	    return;
	} else {
		top.cur_image = pos;
	}
	
	// figure out aspect ratios
    var zoom_param="";
    var imageAR=1;
    var frameAR=1;

	if (alert_debug) {alert("pos3");}
	if (self.innerWidth) {
		frameWidth = self.innerWidth;
		frameHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientWidth) {
		frameWidth = document.documentElement.clientWidth;
		frameHeight = document.documentElement.clientHeight;
	} else if (document.body) {
		frameWidth = document.body.clientWidth;
		frameHeight = document.body.clientHeight;
	}
	if (alert_debug) {alert("pos4");}
	frameAR = frameWidth/frameHeight;
	imageAR = image_width_array[top.cur_image]/image_height_array[top.cur_image];
	
	// expand image for the right zoom levels
	if (alert_debug) {alert("pos5");}
	if (top.zoom_level>=2) {
		if (imageAR>=frameAR) {
			zoom_param = "width=\"100%\"";
		} else {
			zoom_param = "height=\"100%\"";
		}
    }
    if (top.zoom_level>=3) {
    	zoom_param = "width=\""+top.image_width_array[top.cur_image]*(top.zoom_level-2)+"\" height=\""+top.image_height_array[top.cur_image]*(top.zoom_level-2)+"\"";
    }

	// Resize action special for IE to avoid stack overflow on huge number of calls
    var resize_cmd = "onresize=\"top.display_image('resize','same',0);\"";
    if (navigator.appName == "Microsoft Internet Explorer") {
    	resize_cmd = "onresize=\"clearTimeout(top.resize_timer);top.resize_timer=setTimeout('top.resize_timeout(1,1);',500);return true;\"";
   	    if (ie_skip_resize) {
    		resize_cmd = "";
    	}
 
    }
	
	// Create main html
	//<script>cur_image2=" + top.cur_image + ";method2='"+top.method+"';slideshow_delay2="+top.slideshow_delay+";zoom_level2="+top.zoom_level+";</script>\n\
    // onclick=\"process_click(event,'main');\"
    // background=\"/images/pattern01.gif\"
    // onresize=\"top.display_image('resize','same');return true;\"
    if (alert_debug) {alert("pos6");}
    // Warning!! Do NOT use doctype or it will no longer center correctly.
	var main_header="<HTML>\n\
<HEAD>\n\
   <TITLE>Main Frame</TITLE>\n\
   <META http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\">\n\
   " + no_cache + js_includes + "\n\
</HEAD>\n\
<BODY style=\"margin:0px;\" bgcolor=\"black\" onkeypress=\"top.process_keypress(event,'main');return true;\" "+resize_cmd+" >\n\
\n\
<table width=\"100%\" height=\"100%\">\n\
\n";
    var main_footer="</body></html>";
    var main_body="";
    var caption = file_array[top.cur_image];
    var caption_html = "";
    if (typeof(top.cur_image)=="undefined") {
    	caption="Error: cur_image is undefined.";
    } else if (typeof(file_array[top.cur_image])=="undefined") {
    	caption="Error: file_array[top.cur_image] is undefined. top.cur_image="+top.cur_image;
    }
    
    // Add debug info into caption
    if (alert_debug) {alert("pos7");}
    if (top.debug==1) {
	    caption = caption + "<br>top: cur_image="+top.cur_image+";num_files="+num_files+"; zoom_level="+top.zoom_level+"; method="+top.method+"; slideshow_delay="+top.slideshow_delay+"; icon_size="+top.icon_size+";";
	    caption = caption + "<br>parent: cur_image="+parent.cur_image+";num_files="+num_files+"; zoom_level="+parent.zoom_level+"; method="+parent.method+"; slideshow_delay="+parent.slideshow_delay+";";
    }
    
    // Create box of buttons
    // todo: add onMouseOver="changeImages('nextArrow', '../images/nextArrowover.gif'); return true;" onMouseOut="changeImages('nextArrow', '../images/nextArrow.gif'); return true;">
    //       to get buttons to change colors, maybe try another method
    var button_box;
    button_box = "\n\
       <a onclick=\"top.display_image('picture main buttons prev','prev');return true;\"><img src=\"/images/previousArrow.gif\" alt=\"previous image\"></a>\n\
       <a onclick=\"top.display_image('picture main buttons quit','quit');return true;\"><img src=\"/images/home.gif\" alt=\"quit\"></a>\n\
       <a onclick=\"top.display_image('picture main buttons next','next');return true;\"><img src=\"/images/nextArrow.gif\" alt=\"next image\"></a>\n";
    
    caption_html = "<font " + caption_font + " >" + caption + "</font>\n";
    if (alert_debug) {alert("pos8");}
    if (button_location == "top" || caption_location == "button_box") {
    	var balign = "center";
    	if (caption_location == "button_box") {
    		balign = "left";
    	}
    	button_box = "<tr height=20><td width=150 align=\"" + balign + "\" valign=\"top\">" + button_box + "</td>";
    	if (caption_location == "button_box") {
    		button_box = button_box + "\n\
    			<td align=\"center\" valign=\"top\">" + caption_html + "</td>\n";
    		caption_html = "";
    	}
    	button_box = button_box+"</tr>";
    }
    if (button_location == "tfloat") {
    	var float1 = "\n<!-- floating buttons -->\n<div style=\"position:absolute;top:20px;left:0px;width:100%;\">\n\
        <center><table><div style=\"opacity:60;-moz-opacity:0.6;filter:alpha(opacity=60);\">\n\
        <font align=\"center\" " + caption_font + " ><center><nobr>";
    	var float2 = "</nobr></center></font></div></table></center></div>\n\n";
    	var float1 = "\n<!-- floating buttons -->\n<div style=\"text-align:center;position:absolute;top:20px;width:100%;margin-left:0;margin-right:0;padding:5px;opacity:60;-moz-opacity:0.6;filter:alpha(opacity=60);\">\n";
    	var float2 = "</div>\n\n";
    	button_box = float1 + button_box + float2;
    }
      	
	if (alert_debug) {alert("pos9");}
    if (caption_location == "bfloat") {
    	// caption is floating; works in ie; firefox box is full screen width, fix later
    	var float1 = "\n<!-- floating caption -->\n<div style=\"position:absolute;bottom:20px;left:0px;width:100%;\">\n\
            <center><table><div style=\"border: 1px solid black;background-color: #ffffff;padding:5px;opacity:60;-moz-opacity:0.6;filter:alpha(opacity=60);\">\n\
            <font align=\"center\" " + caption_font + " ><nobr>";
    	var float2 = "</nobr></font></div></table></center></div>\n\n";
    	var float1 = "\n<!-- floating caption -->\n<div style=\"border: 1px solid black;text-align:center;background-color: #ffffff;position:absolute;bottom:40px;width:100%;margin-left:0;margin-right:0;padding:5px;opacity:60;-moz-opacity:0.6;filter:alpha(opacity=60);\">\n\
            <font align=\"center\" " + caption_font + " ><nobr>";
    	var float2 = "</nobr></font></div>\n\n";

    	caption_html = float1+caption+float2; // shows up off the screen!
    	//main_body = main_body + float1+caption+float2; // messes things up!
    	
    }
    
 
    var	image_file = image_file_array[top.cur_image];

   	// add stuff to the top of the table
	if (button_location=="top") {
		main_body = main_body + button_box + "\n";
	}
	if (caption_location=="top") {
		main_body = main_body + "\n\
<tr><td colspan=2 align=\"center\" valign=\"bottom\">\n\
" + caption_html + "\n\
</td></tr>";
	}
	
	// add the image or middle of the table
	if (alert_debug) {alert("pos10");}
	main_body = main_body + "\n\
<tr><td colspan=2 align=\"center\" valign=\"center\">\n\
<img onClick=\"top.process_click(event,'main');return true;\" src=\""+image_file+"\" "+zoom_param+" >\n\
</td></tr>\n";
	
	// add stuff to the bottom of the table and finish off the table
	if (button_location=="bottom") {
		main_body = main_body + button_box + "\n";
	}

	if (caption_location == "bottom") {
		// add caption to bottom
		main_body = main_body + "\n\
<tr><td colspan=2 align=\"center\" valign=\"bottom\">\n\
" + caption_html + "\n\
</td></tr>";
	}
	main_body = main_body + "</table>";
	
	// add in floater stuff if not added already. It must go outside the table
	if (alert_debug) {alert("pos11");}
	if (button_location == "tfloat" || button_location == "bfloat") {
		main_body = main_body + button_box;
	}
	if (caption_location == "tfloat" || caption_location == "bfloat") {
		main_body = main_body + caption_html;
	}
    
    // IE reports incorrect line numbers for error lines. Test header, body, and footer separately.
    if (alert_debug) {alert("pos11.1");}
    parent.main_frame.document.write(main_header+main_body+main_footer);
    //parent.main_frame.document.write("<html><body>no data</body></html>\n");
    //parent.main_frame.document.write("<html><body>testing body+footer\n"+main_body+main_footer);
    //parent.main_frame.document.write(main_header+"<h1>testing header</h1></body></html>\n");
    if (alert_debug) {alert("pos11.2");}
    parent.main_frame.document.close();
    if (alert_debug) {alert("pos11.3");}
    parent.main_frame.focus();
    if (delay>0) {
    	top.slideshow_interval = setTimeout("top.display_image('display_image timeout','next',"+delay+");", delay*1000);
    }
    if (alert_debug) {alert("pos12");}
    
    // pre-load next/prev image
	if (top.num_files>0) {
		var next = top.cur_image+1;
		if (next>=top.num_files) {next=0;}
		var prev = top.cur_image-1;
		if (prev<0) {prev=top.num_files-1;}
		var next_img = new Image();
		next_img.src = image_file_array[next];
		var prev_img = new Image();
		prev_img.src = image_file_array[prev];
	}

    top.display_image_resize=0;
    return true;
}

// Function to load image into cache, then read width and height.
//function getWidthAndHeight() {
//   alert("'" + this.name + "' is " + this.width + " by " + this.height + " pixels in size.");
//   return true;
//}
//function loadFailure() {
//   alert("'" + this.name + "' failed to load.");
//   return true;
//}
//var myImage = new Image();
//myImage.name = "someimg.jpg";
//myImage.onload = getWidthAndHeight;
//myImage.onerror = loadFailure;
//myImage.src = "someimg.jpg";

function set_frame_sizes(command)
{
	//alert("Called set_frame_sizes(method="+top.method+",grid_page="+top.grid_page+",zoom_level="+top.zoom_level+")");
	var frame1_change = "";
	var frame2_change = "";
	if (top.method == "grid" && top.grid_page == "grid") {
		frame1_change = frameset1_array['grid'];
		frame2_change = frameset2_array['grid'];
	} else {
		if (top.zoom_level<=0) {
		    if (top.method == "vlthumb") {
		    	frame1_change = frameset1_array['vlthumb'];
		    	frame2_change = frameset2_array['vlthumb'];
		    } else if (top.method == "vrthumb") {
		    	frame1_change = frameset1_array['vrthumb'];
		    	frame2_change = frameset2_array['vrthumb'];
		    } else if (top.method == "htthumb") {
		    	frame1_change = frameset1_array['htthumb'];
		    	frame2_change = frameset2_array['htthumb'];
		    } else if (top.method == "hbthumb") {
		    	frame1_change = frameset1_array['hbthumb'];
		    	frame2_change = frameset2_array['hbthumb'];
			} else if (top.method == "grid") {
				frame1_change = frameset1_array['grid_image'];
		    	frame2_change = frameset2_array['grid_image'];
			} else {
				display_message("error","error, zoom out doesn't understand top.method="+top.method);
			}
		} else if (top.zoom_level>=1) {
			// error: zoom doesn't seem to remove columns fot method==vlthumb or vrthumb
			frame1_change = frameset1_array['zoom1'];
			frame2_change = frameset2_array['zoom1'];
		} else if (top.zoom_level>=2) {
			// handled elsewhere in display_image
		}
	}
	//alert("frame1_change='"+frame1_change+"' ; 2='"+frame2_change+"'");
	if (frame1_change != "") {
		parent.document.getElementById('frameset1').rows = frame1_change;
	}
	if (frame2_change != "") {
		parent.document.getElementById('frameset2').cols = frame2_change;
	}
	top.main_frame.focus();
}

// ----------------------------------------------------------------
// process_clicl
// ----------------------------------------------------------------
function resize_timeout(src,dest)
{
	//alert("Called resize_timeout(src="+src+",dest="+dest+")");
	if (dest==2) {
		top.fill_frames("resize");
	} else if (dest==1) {
		top.display_image("resize","same",0);
	} else {
		alert("Error: resize_timeout called for invalid dest="+dest);
	}
}

// ----------------------------------------------------------------
// process_click
// ----------------------------------------------------------------
function process_click(e,name)
{
	// todo: make sure it is right click only & we are on the image & not the button box!
	// may need to use mousedown event handler instead. Some onclicks don't pass button info.
	//alert("Called process_click(name=" + name+")");
	top.display_image('process_click','next');
	window.clearTimeout(top.slideshow_interval);

}

// ----------------------------------------------------------------
// process_keypress
// ----------------------------------------------------------------
function process_keypress(e,name)
{
	var keynum
	var keychar
	
	keynum = (e.which) ? e.which : e.keyCode
	keychar = String.fromCharCode(keynum)
	//alert("Called process_keypress(name=" + name+",keynum="+keynum+",keychar="+keychar+")");
	
	// advance to the correct locaiton based on the key pressed
	if(keynum==39||keynum==32||keynum==13||keychar=='+'||keychar=='=') {
		// advance to the right on: right arrow, space, return, enter
		window.clearTimeout(top.slideshow_interval);
		if (top.method=="grid" && top.grid_page =="grid") {
			// todo: scroll down icon page listing?
		} else {
			top.display_image('process_keypress right arrow',"next");

		}
	} else if (keynum==37||keynum==46||keychar=='-'||keychar=='_') {
		if (top.method=="grid" && top.grid_page =="grid") {
			// todo: scroll down icon page listing?
		} else {
			window.clearTimeout(top.slideshow_interval);
			top.display_image('process_keypress left arrow',"prev");
		}
	} else if (keychar=='0') {
	    setCookie("slideshow_timer",0,1);
	    window.clearTimeout(top.slideshow_interval);
	    top.slideshow_delay = parseInt(keychar)+0;
	} else if (keychar=='1'||keychar=='2'||keychar=='3'||keychar=='4'||keychar=='5'||keychar=='6'||keychar=='7'||keychar=='8'||keychar=='9') {
		if (top.method=="grid" && top.grid_page =="grid") {
			// perhaps jump into the first image and start the slideshow?
			top.display_image('process_keypress 1-9',0,parseInt(keychar));
		} else {
			setCookie("slideshow_timer",keychar,1);
			//window.location = next+"value='" + parseInt(keychar)+ "'.html";
			top.slideshow_interval = setTimeout("top.display_image('process_keypress 1-9 timeout','next',"+parseInt(keychar)+");", parseInt(keychar)*1000);
			top.slideshow_delay = parseInt(keychar)+0;
		}
	} else if (keynum==36||keynum==27||keynum==35||keychar=='q'){
	    // go back to home on: home, end, escape
	    // Warning: we could not trap escape, I think the browser may be using it?
	    window.clearTimeout(top.slideshow_interval);
	    if (top.method=="grid" && top.grid_page=="image") {
	    	top.grid_page="grid";
	    	top.fill_frames('q');
	    	return;
	    }
	    top.location = top.parent_index_file;
	} else if (keychar=='hhhhh') {
		// stretch picture to full width horizontal
		///top.display_image();
	} else if (keychar=='d') {
		if (top.debug==0) {
			top.debug=1;
		} else {
			top.debug=0;
		}
		top.display_image('process_keypress d','same');
	} else if (keychar=='v') {
		top.display_image('process_keypress v','same');
	} else if (keychar=='dddd') {
		// stretch picture to ideal dimensions given pic and window dimensions
		top.display_image('process_keypress dd','same');
	} else if (keychar=='t') {
		// use this to test functions
	} else if (keychar=='T') {
		// test function #2 - recovery from test?
	} else if (keychar=='i') {
		top.icon_size = top.icon_size+1;
		if (top.icon_size>3) {top.icon_size=1;}
		//top.display_image();
		top.fill_frames('i');
	} else if (keychar=='m') {
		if (1) {
			if (top.method == "hbthumb") {
				top.method = "vrthumb";
			} else if (top.method == "vrthumb") {
				top.method = "htthumb";
			} else if (top.method == "htthumb") {
				top.method = "vlthumb";
			} else if (top.method == "vlthumb") {
				top.method = "grid";
				top.grid_page = "grid";
			} else if (top.method == "grid") {
				top.method = "hbthumb";
			} else {
				top.method = "hbthumb";
			}
		}
		top.zoom_level=0;
		top.fill_frames('m');
		top.set_frame_sizes(); 
	} else if (keychar=='z') {
		if (top.method == "grid" && top.grid_page == "grid") {
		} else {
			if (typeof(top.zoom_level)=="undefined") {top.zoom_level=0;}
			top.zoom_level=top.zoom_level+1;
			if (top.zoom_level>max_zoom) {top.zoom_level=max_zoom;}
			top.set_frame_sizes();
		    top.display_image('process_keypress z','same');
		    top.main_frame.focus();
		}
	} else if (keychar=='Z') {
		if (top.method == "grid" && top.grid_page == "grid") {
		} else {
			if (typeof(top.zoom_level)=="undefined") {top.zoom_level=0;}
			top.zoom_level=top.zoom_level-1;
			if (top.zoom_level<0) {top.zoom_level=0;}
			top.set_frame_sizes();
		    top.display_image('process_keypress Z','same');
		    top.main_frame.focus();
	    }
	} else {
		window.clearTimeout(top.slideshow_interval);
		display_help();
	}
}

// ----------------------------------------------------------------
// display_message - used for debug and error messages
// ----------------------------------------------------------------
function display_message(title,message)
{
	top.document.write(doctype+"<html>\n<head><title>" + title + "</title>\n</head>\n\
	    <body onkeypress=\"history.go(-1);return true;\" onclick=\"history.go(-1);return true;\">\n\
	    <h1>" + title + "</h1>" + message + "\n</body></html>\n");
	top.document.close();
}

// ----------------------------------------------------------------
// display_help
//
// going back messes us up! 
// ----------------------------------------------------------------
function display_help()
{
	parent.main_frame.document.write(doctype+"<html>\n<head>\n\
	  <title>Web gallery help information</title>\n\
	  " + no_cache + "\n\
	</head>\n\
	<body onkeypress=\"top.fill_frames('help_keypress');return true;\" onclick=\"top.fill_frames('help_click');return true;\">\n\
	<h1>Web gallery and slideshow help</h1>\n\
    Main features:\n\
    <ul>\n\
       <li> Left click, use keys or buttons to advance to the next image.\n\
       <li> Press 1-9 to start a slideshow with N seconds delay. 0 to stop.\n\
       <li> Press z to zoom in or Z to reduce zoom on an image.\n\
    </ul>\n\
    <h2>Detailed help</h2>\n\
    On all slideshow / web gallery pages, you can use the following keys to change your image: (works for all browsers)\n\
    <ul>\n\
        <li> move to the next image     : left click, space, enter, +\n\
        <li> move to the previous image : backspace, -\n\
        <li> quit to the main event page: q\n\
        <li> see this help information  : ? (or any unknown key)\n\
    </ul>\n\
    There are 3 levels of zoom:\n\
    <ul>\n\
        <li> zoom into more detail      : z\n\
        <li> zoom out to less detail    : Z\n\
        <li> on some screens, zoom level 1 shows the image, headers, and all image icons\n\
        <li> zoom level 2 hides the headers and image icons\n\
        <li> zoom level 3 expands the image to fit the window\n\
    </ul>\n\
    These commands run an automatic slideshow, you may want to zoom in first\n\
    <ul>\n\
        <li> start slideshow, advance to next slide in N seconds : Press 1-9 to set delay\n\
        <li> stop slideshow                                      : Press 0\n\
        <li> change web browser to full screen mode              : F11 (try this when you zoom in)\n\
    </ul>\n\
    Other commands:\n\
    <ul>\n\
       <li> Change display mode         : m (icon list on bottom, on left, or icon page)\n\
       <li> Change icon size            : i (icon sizes for icon page more, not implemented)\n\
	   <li> Display full picture props  : p (not yet implemented)\n\
    </ul>\n\
    These additional key shortcuts are useful, but don't work in all browsers:\n\
    <ul>\n\
       <li> Addtional keys to advance the image    : right arrow, page down. (firefox only)\n\
       <li> Additional keys to go to previous image: left arrow, page up. (firefox only)\n\
       <li> Additional keys to quit to main event page: escape (IE only)\n\
    </ul>\n\
    When you are done reading this information, press any key or select back to return to your image.\n\
    </body>\n\
    </html>\n");
	parent.main_frame.document.close();
    parent.main_frame.focus();
}


// TODO: Set for entire site if possible.
// TODO: Set expiration to +4 hours
function setCookie(c_name,value,expiredays)
{
    var exdate=new Date()
    exdate.setDate(exdate.getDate()+expiredays)
    document.cookie=c_name+ "=" +escape(value)+
       ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}

function getCookie(c_name)
{
    if (document.cookie.length>0) {
       c_start=document.cookie.indexOf(c_name + "=")
       if (c_start!=-1) { 
          c_start=c_start + c_name.length+1 
          c_end=document.cookie.indexOf(";",c_start)
          if (c_end==-1) c_end=document.cookie.length
          return unescape(document.cookie.substring(c_start,c_end))
       } 
    }
    return ""
}