/* Javascript routines to implement a photo index page.
	The photo index has a target display area to show the
	pictures, and the calling page keeps javascript arrays
	telling the routine where/what pictures to load. */

/* Path to where the photos to be displayed are kept,
	if this is a blank string then the array must specify where
	the photos are explicitly, or the photos must be in the cwd */

IMG_PATH = "photos/"
IMG_SUFFIX = ".jpg"

/* Absolute Path to where the images for the photo_index are kept */
PI_PATH = "../jscript/"

/* If true; photo_index will preload all the images
	in the list. If false it will load on the fly */
PI_PRELOAD = false

PI_BOX_WIDTH = 55

FRAME_WIDTH = 400
FRAME_HEIGHT = 400
FRAME_INSETX = 100
FRAME_INSETY = 100

/* Global Image Listings */
PI_IMG_LIST = new Array()
PI_IMG_ARRAY = new Array()

PI_TARGET = ""
PI_GLOB_INDEX = 0
PI_DISPLAY = false

PI_MENU_TITLE = "Select Photo to Display"
PI_NOINFO_MSG = "No information available for this image."

PI_BUTTON_COLOR = "_blue.gif"
PI_BWIDTH = 20
PI_BHEIGHT = 20

PI_LABELSIZE = 45

COPYRIGHT_LABEL = "<A HREF=\"mailto:photo_info@jasonya.com\">&copy\;Jason McDermott, 2000</A><BR>Reproduction without express consent is forbidden."

PI_BUTTONS = new Array("JEMWorks Software", "jem_button", "http://www.jasonya.com/jemworks",
					   "First Image", "home_button", "javascript:pi_home()",
					   "Previous Image", "left_arrow", "javascript:pi_back()",
					   "Next Image", "right_arrow", "javascript:pi_fore()",
					   "More Information", "more_button", "javascript:pi_more()",
					   "Slide Show", "movie_button", "javascript:pi_movie()")
					   
PI_ROLLING = false

/* Options to set for photo indexing */

/* If MOUSEOVER_OPTION is true then new images will 
      be loaded on mouseover event, otherwise the user
      must click on the link to load  */
MOUSEOVER_OPTION = true

function photo_index(target, image_list, random) {
	i = PI_IMG_LIST.length
	PI_IMG_LIST = PI_IMG_LIST.concat(image_list)

	PI_TARGET = target
	if (PI_PRELOAD == true) PI_IMG_ARRAY = PI_IMG_ARRAY.concat(preload_list(image_list))
	else PI_IMG_ARRAY = false;
	
	while (PI_IMG_LIST[i]) {
		title = PI_IMG_LIST[i][0]
		if (title.charAt(0) == "+") 
		{
			PI_IMG_LIST[i][0] = title = title.substring(1, title.length)
			start = "<SPAN STYLE=\"text-decoration:underline\;font-weight:bold\;\">&#187\;"
			end = "</SPAN>"
		} else {
			start = end = ""
		}
		command = "img_handle(" + i + ",";
		document.write(start + '<A HREF=\"javascript:' + command + ' 1)\" onMouseover=\"' + command + ' 0)\;return true\;\">')
		document.write(title + '</A><BR>' + end)
		i = i + 1;	
	}
	if (random) {
		result = get_random(PI_IMG_LIST)
		index = result[2]
		
		/* This is necessary since NS processes images in a funny order sometimes 
		   and the random image may get overwritten by the blank in the Target frame */
		setTimeout("img_handle(" + index + ", 2)", 250);
	}	
}

function photo_menu(target, image_list, random) {
	i = PI_IMG_LIST.length
	PI_TARGET = TARGET
	PI_IMG_LIST = PI_IMG_LIST.concat(image_list)

	if (PI_PRELOAD == true) PI_IMG_ARRAY = PI_IMG_ARRAY.concat(preload_list(image_list))
	else PI_IMG_ARRAY = false;
	document.write('<FORM NAME=photo_menu>')
	document.write('<SELECT SIZE=1 onChange=\"menu_over(this)\;\">')
	document.write('<OPTION VALUE=-1>' + PI_MENU_TITLE)
	
	while (PI_IMG_LIST[i]) {
		title = PI_IMG_LIST[i][0]
		document.write('<OPTION VALUE=\"' + i + '\">' + title)
		i = i + 1;	
	}
	document.write('</SELECT></FORM>')
	if (random) {
		ran = 60/(IMG_LIST.length / 2)
	  	currentdate = new Date()
	  	core = currentdate.getSeconds()
	  	core = (Math.floor(core/ran) * 2) + 1
		if (PI_IMG_ARRAY) img_on(target, core)
		else img_over(target, PI_IMG_LIST[core])
	}	
}

function photo_frame() {
	// bar defaults to true
	if (!arguments[0]) bar = true;
	else bar = arguments[0]
	STYLE = "position\: absolute\;width\:"+FRAME_WIDTH+"px\;height\:"+(FRAME_HEIGHT+(bar*50))+"px\;left\:"+FRAME_INSETX+"px\;top\:"+FRAME_INSETY+"px\;"
	document.write("<SPAN STYLE=\"" + STYLE + "\"><A HREF=\"javascript:pi_more()\"><IMG SRC=\"\" ALT=\"Image Frame\"")
	document.write(" NAME=\"IMAGE_FRAME\" WIDTH="+FRAME_WIDTH+" HEIGHT="+FRAME_HEIGHT+" BORDER=0></A>")
	if (bar) {
		photo_bar(document)
	}
	
	document.write("</SPAN>")	
}

function photo_bar(target) {
	PI_DISPLAY = true
	i = 0
	j = 0
	if (arguments[1]) blist = arguments[1]
	else blist = PI_BUTTONS
	button_list = new Array()
	while (blist[j]) {
		button_list[i] = "<A HREF=\"" + PI_BUTTONS[j+2] + "\" onMouseOver=\"self.status=\'" + PI_BUTTONS[j] + "\'\;return true\;\" "
		button_list[i] += "onMouseOut=\"self.status=\'\'\;return true\;\">"
		button_list[i] +="<IMG SRC=\"" + PI_PATH + "pi_images/" + PI_BUTTONS[j+1] + PI_BUTTON_COLOR + "\" "
		button_list[i] += "ALT=\"" + PI_BUTTONS[j] + "\" NAME=\"" + PI_BUTTONS[j+1] + "\" WIDTH=" + PI_BWIDTH + " HEIGHT=" + PI_BHEIGHT
		i++
		j += 3
	}
	
	if (document.all || document.layers) {
		document.write("<CENTER>")
		document.write("<FONT SIZE=4 COLOR=\"#FFFFFF\"><B><DIV ID=\"label\">Image Title</DIV></B></FONT><HR>")
		for (i=0;i<6;i++) {
			document.write(button_list[i])
			document.write(" BORDER=0 ALIGN=CENTER HSPACE=2></A>")
		}
		document.write("<HR></CENTER>")
	} 
	else {
		document.write("CENTER>")
		for (i=0;i<6;i++) {
			document.write(button_list[i])
			document.write(" BORDER=0 ALIGN=CENTER HSPACE=2></A>")
		}
		document.write("</CENTER>")
	}	
}


/* Button Handlers */
function pi_home() {
	pi_stop()
	PI_GLOB_INDEX = 0
	img_handle(0, 2)
}

function pi_back() {
	pi_stop()
	PI_GLOB_INDEX = PI_GLOB_INDEX - 1
	if (PI_GLOB_INDEX < 0) PI_GLOB_INDEX = PI_IMG_LIST.length - 1
	img_handle(PI_GLOB_INDEX, 2)
}

function pi_fore() {
	PI_GLOB_INDEX = PI_GLOB_INDEX + 1
	if (PI_GLOB_INDEX > (PI_IMG_LIST.length - 1)) PI_GLOB_INDEX = 0
	img_handle(PI_GLOB_INDEX, 2)
}

function pi_more() {
	pi_stop()
	make_info_window(PI_GLOB_INDEX)
}

function pi_movie() {
	if (PI_ROLLING) {
		pi_stop()
	} 
	else {
		pi_go()
	}
}

function pi_stop() {
	PI_ROLLING = false
	img_overall('movie_button', PI_PATH + 'pi_images/movie_button' + PI_BUTTON_COLOR)
}

function pi_go() {
	PI_ROLLING = true
	pi_advance()
	img_overall('movie_button', PI_PATH + 'pi_images/stop_button' + PI_BUTTON_COLOR)
}

function pi_advance() {
	if (PI_ROLLING) {
		pi_fore()
		setTimeout("pi_advance()", 5000)
	}
}

function random_photo(image_list) {
	result = get_random(image_list)
	title = result[0]
	file = result[1]
	if (title.charAt(0) == "+") {
		title = title.substring(1, title.length)
	}
	
	document.write('<IMG SRC=\"' + IMG_PATH + file + IMG_SUFFIX + '\" ALT=\"' + title + '\">')
	document.write('<BR><BR><I>\" ' + title + ' \"</I>')
}

function get_random(image_list) {
    ran = 60/image_list.length
  	currentdate = new Date()
  	core = currentdate.getSeconds()
  	core = Math.floor(core/ran)
	return [image_list[core][0], image_list[core][1], core]
}

function menu_over(target, what) {
	value = what.options[what.selectedIndex].value
	if (value == -1) return
	img_handle(value, 1)
}

function img_click(index, how) {
	if (index = PI_GLOB_INDEX) pi_more()
	else img_handle(index, how)
}

function img_handle(index, how) {
	image_title = PI_IMG_LIST[index][0] 
	image_name = PI_IMG_LIST[index][1]
	
	self.status = image_title
	
	if ((how == 1) && (index == PI_GLOB_INDEX)) pi_more()
	else {	
		if ((how &!  MOUSEOVER_OPTION) || (!how && MOUSEOVER_OPTION) || (how > 1)) {
			if (PI_IMG_ARRAY) img_on(PI_TARGET, index)
			else img_over(PI_TARGET, image_name)
			
			PI_GLOB_INDEX = index
			if (PI_DISPLAY) {
				if (document.all) {
					label.innerHTML = image_title
				}
				else {
					// crazy netscape 4.5 and 4.7 both choke on the form for this :( soon
					// box = document.display_form.label
					// n = ((PI_BOX_WIDTH - image_title.length) / 2) - 2
					text = ""
					// for (i=0; i<n; i++) text = text + " ";
					// text = text + "\" " + image_title + " \""
					// box.value = text
				}
			}
		}
	}
	
}

function img_over(target, image_name) {
	img_target = new Image()
	img_target.src = eval('\"' + IMG_PATH + image_name + IMG_SUFFIX + '\"')
	document [target].src = img_target.src
}

function img_overall(target, image_name) {
	img_target = new Image()
	img_target.src = eval('\"' + image_name + '\"')
	document [target].src = img_target.src
}

function img_on(target, index) {
	if (IMG_ARRAY) {
		img_target = IMG_ARRAY[index]
		document [target].src = img_target.src
	}
}

function preload_list(index_list) {
	ret_array = new Array()
	j = 0
	while (index_list[j]) {
		ret_array[j] = load_image_plain(index_list[j][1], 0, "", 0)
		j = j + 1;
	}	
	return ret_array
}

function load_image_plain(image, prefix, sub, suffix) {
	if (prefix == 0) prefix = IMG_PATH;
	if (sub == 0) sub = "";
	if (suffix == 0) suffix = IMG_SUFFIX;
	img_target = image + sub + " = new Image()";
	img_get = image + sub + ".src = \"" + prefix + image + suffix + "\"";
	ret_image = eval (img_target);
	eval (img_get);
	
	return ret_image
}

function make_info_window(index) {
	title = PI_IMG_LIST[index][0]
	file = PI_IMG_LIST[index][1]
	info = PI_IMG_LIST[index][2]
	
	if (!info) info = PI_NOINFO_MSG
	
	win = util_window("", "status_html", 550, 550)
	doc = win.document
	
	// IE5.0 seems to jump the gun and randomly truncate the info
	//		so this will attempt to fix things.
	endpoint = "<CENTER><DIV>" + info + "</DIV></CENTER><BR><BR><CENTER><H3>" + COPYRIGHT_LABEL
	endpoint += "</H3></CENTER></BODY></HTML>"
	
	
	doc.write("<HTML><HEADER><TITLE>Image Information: " + title + "</TITLE>")
	doc.write("<STYLE TYPE=\"text/css\">DIV \{ width:350px\;color:#CCCCFF\;text-align:left\;font-size:14pt")
	doc.write("\;background:#404040\;padding-left:40px\;padding-right:40px\; \}")
	doc.write("EM \{color:#FFFFFF\;\}")
	doc.write("H3 \{color:#AAAAAA\;\}")
	doc.write("A\{color:#AAAAFF\;\} A.hover \{color:#FF0000\;\}</STYLE>")
	doc.write("</HEADER><BODY BGCOLOR=\"#000000\">")
	doc.write("<CENTER><IMG SRC=\"" + IMG_PATH + file + IMG_SUFFIX + "\" ALT=\"" + title + "\"><BR>")
	doc.write("<FONT COLOR=\"#FFFFFF\"><H2><I>" + title + "</I></H2></CENTER>")
	doc.write(endpoint)
}

function util_window(url, title, width, height) {
	features = "width=" + width + ",";
	features += "height=" + height + ",";
	features += "screenx=" + (screen.width-width) / 2 + ",";
    features += "left=" + (screen.width-width) / 2 + ",";
    features += "screeny=" + (screen.height-height) / 2 + ",";
    features += "top=" + (screen.height-height) / 2 + ",";
	return window.open(url, title, features)
}