<!--
/*
 * gal_view.js: Javascript for the gallery viewer.
 * Note that the data setup is still handled in view.php as the information has to be handed in from the PHP code.
*/

// init_gallery(): Place any necessary initialisation in here.
function init_gallery() {
	thumbs_el = document.getElementById('thumbs');

	// Image rescaling has been shifted into the PHP for the sake of non-Javascript browsers.

	// It shall be a rule that the gallery MUST start on the first photo, even if the index pic is not the first one.
	// Update: if a pic was specified in the GET request we advance to it, otherwise we start at zero.
	swap_pic(initial_pic);
}

// swap_pic()
// swaps the main picture with 'num'.  'index' is the position of the selected pic in the gallery and is used to
// update the text underneath the pic.  Note it starts at zero.
function swap_pic(pic_index) {
	thumbs_out(); // removes the thumbnails if they're showing
	if((pic_index == current_pic_index) || (pic_index < 0) || (pic_index >= pic.count))
		return false;

	// I've seen Safari leave bits behind if we update the page while leaving the info open.
	// It still does it if we close/re-open the info within this function (unless I add an alert() or something inbetween).
	// Using setTimeout() seems to run the open_info() in a slightly different context, even if the specified delay is zero, which
	// gets around the problem.
	if(info_visible) {
		close_info();
		window.setTimeout('open_info();', 0);
	}

	var el = document.getElementById('prev_link');
	if(pic_index == 0) {
		el.src = 'img/prev_r.gif';
		el.title = 'At the first photo';
	}
	else {
		el.src = 'img/prev_g.gif';
		el.title = 'Previous photo: ' + unescape(pic.title[pic_index - 1]);
	}

	el = document.getElementById('next_link');
	if(pic_index == (pic.count - 1)) {
		el.src = 'img/next_r.gif';
		el.title = 'At the last photo';
	}
	else {
		el.src = 'img/next_g.gif';
		el.title = 'Next photo: ' + unescape(pic.title[pic_index + 1]);
	}

	// Update the number and title
	var el = document.getElementById('photo_title');
	el.innerHTML = '&quot;' + unescape(pic.title[pic_index]) + '&quot;';
	el = document.getElementById('photo_num');
	el.innerHTML = 'Photo ' + (pic_index  + 1) + ' of ' + pic.count + ': ';

	// Now update the main pic and the info hyperlink.
	el = document.getElementById('image_container');
	/*
		Rescale the pic if the window is vertically too small.  I do this to allow everything to fit on a 1024x768 screen with toolbar.
		Dreamweaver tells me 600px is the height to use for a maximised 1024x768 browser, and I know that this _just_ fits with 500px, so
		a 700px height should fit with a 600px image.  With Safari I've found that about 720px is necessary.
	*/
	var x_px = pic.x[pic_index];
	var y_px = pic.y[pic_index];
	if((y_px > 500) && (get_window_height() < 720)) {
		x_px = Math.round(x_px * 500 / y_px);
		y_px = 500;
	}
	el.innerHTML = '<img align="center" width="' + x_px + '" height="' + y_px + '" class="main_pic" src="../prints/' + pic.code[pic_index] + '.jpg" alt="' + unescape(pic.title[pic_index]) + '" title="' + unescape(pic.title[pic_index]) + '">';

	el = document.getElementById('info_code');
	el.innerHTML = pic.code[pic_index];
	el = document.getElementById('pic_location');
	el.innerHTML = unescape(pic.location[pic_index]);
	el = document.getElementById('pic_comments');
	el.innerHTML = unescape(pic.comments[pic_index]);
	el = document.getElementById('static_link');
	el.href = '../view.php?p=' + pic.id[pic_index];

	current_pic_index = pic_index;
	return false;
}

// toggle_thumbs(): toggles display of the thumbnails.  Used by the keyboard handler.
function toggle_thumbs() {
	return thumbs_visible ? thumbs_out() : thumbs_in();
}

// thumbs_in(): slides the thumbnails onto the screen.
function thumbs_in() {
	if(thumbs_visible || animating)
		return false;
	// We make sure the previously-highlighted thumbnail is unhighlighted before revealing the thumbs.
	unhighlight_thumb();
	thumbs_el.style.left = Math.floor((get_window_width() - 700) / 2) + 'px'; // Keep this synchronised with #thumbs/width in the CSS.
	thumbs_el.style.display = 'block';
	animating = true;
	thumbs_dir = true;
	thumbs_pos_index = 0;
	anim_handle = window.setInterval('set_thumbs_pos();', 50); // this way works in Mac IE5, but supposedly won't work in IE4.
	return false;
}

// thumbs_out(): slides the thumbnails off the screen.
function thumbs_out() {
	if(!thumbs_visible || animating)
		return false;
	animating = true;
	thumbs_dir = false;
	thumbs_pos_index =  0;
	anim_handle = window.setInterval('set_thumbs_pos();', 50);
	return false;
}

// These are fractions of (thumbs height + thumbs dest).  Note it goes out much faster than it goes in.
// Pre-calculating these makes it easier for me to control the easing.
var thumbs_pos_in = new Array(0.20, 0.35, 0.50, 0.60, 0.70, 0.81, 0.88, 0.93, 0.97, 0.99, 1.00);
var thumbs_pos_out = new Array(0.90, 0.80, 0.65, 0.50, 0.30, 0.00);
var thumbs_pos_index;
// set_thumbs_pos(): This updates the position of the thumbnails table while animating.
// if the global variable 'thumbs_dir' is true, the thumbnails are going downwards onto the screen.
function set_thumbs_pos() {
	thumbs_pos = thumbs_dir ? thumbs_pos_in[thumbs_pos_index] : thumbs_pos_out[thumbs_pos_index];
	thumbs_pos = -thumbs_height + Math.floor(thumbs_pos * (thumbs_height + thumbs_dest));
	thumbs_el.style.top = thumbs_pos + 'px';
	++thumbs_pos_index;
	if(thumbs_dir && (thumbs_pos_index == thumbs_pos_in.length)) {
		window.clearInterval(anim_handle);
		animating = false;
		thumbs_visible = true;
		var control_el = document.getElementById('thumb_control');
		control_el.title = ''; // If the mouse isn't moved away, some browsers seem to continue showing the title text.
	}
	else if(!thumbs_dir && (thumbs_pos_index == thumbs_pos_out.length)) {
		window.clearInterval(anim_handle);
		thumbs_el.style.display = 'none';
		animating = false;
		thumbs_visible = false;
		var control_el = document.getElementById('thumb_control');
		control_el.title = 'Show thumbnail images';
	}
}

// show_next(): Moves to the next picture in the gallery.  Called as an onClick handler on the "next" link.
function show_next() {
	if(current_pic_index == (pic.count - 1))
		return false;
	swap_pic(current_pic_index + 1);
	return false;
}

// show_prev(): Moves to the previous picture in the gallery.  Called as an onClick handler on the "prev" link.
function show_prev() {
	if(current_pic_index == 0)
		return false;
	swap_pic(current_pic_index - 1);
	return false;
}

// get_window_width(): returns the width of the window.  I hate browser compatibility.
// If neither method works, we fall back on 700 pixels as this is the specified width of the thumbs table.
function get_window_width() {
	return window.innerWidth ? window.innerWidth : document.body.clientWidth ? document.body.clientWidth : 700;
}

// get_window_height(): returns the height of the window.  I hate browser compatibility.
// If neither method works, we fall back on 500 pixels to force a rescale.
function get_window_height() {
	return window.innerHeight ? window.innerHeight : document.body.clientHeight ? document.body.clientHeight : 500;
}

// open_info(): shows the information panel.
function open_info() {
	var el = document.getElementById('pic_info');
	el.style.display = 'block';
	el = document.getElementById('info_control');
	el.title = 'Hide the information panel';
	info_visible = true;
	return false;
}

// close_info(): hides the information panel.
function close_info() {
	var el = document.getElementById('pic_info');
	el.style.display = 'none';
	el = document.getElementById('info_control');
	el.title = 'Show more information about this photo';
	info_visible = false;
	return false;
}

// toggle_info(): toggles visibility of the information panel.
function toggle_info() {
	return info_visible ? close_info() : open_info();
}

// nav_thumbs_left(): selects and highlights the "previous" thumbnail.  Wraps around to the end if necessary.
function nav_thumbs_left() {
	var temp_thumb = current_thumb - 1;
	if(temp_thumb < 0)
		temp_thumb = pic.count - 1;
	highlight_thumb(temp_thumb);
}

// nav_thumbs_right(): selects and highlights the "next" thumbnail.  Wraps around to the beginning if necessary.
function nav_thumbs_right() {
	var temp_thumb = current_thumb + 1;
	if(temp_thumb >= pic.count)
		temp_thumb = 0;
	highlight_thumb(temp_thumb);
}

/*
	Safari seems to have a bug where I can't unset a borderColor attribute, so I only use the backgroundColor (ie the thick border).
	Unfortunately this means Windows IE5.5 won't work, as it doesn't apply background-color CSS attributes to images.  Screwing around
	with spans tends to stuff things up as well.
	Update: I've given up and used a 6px border + manual onMouseOver/Out attributes.  See the CSS file for further details.
*/

// highlight_thumb(): highlights the numbered thumnnail.
function highlight_thumb(num) {
	if((num == -1) || (num == current_thumb))
		return false;
	unhighlight_thumb();
	current_thumb = num;
	el = document.getElementById('thumb_' + num);
	el.style.borderColor = '#AAAA66';
	return false;
}

// highlight_thumb(): unhighlights the currently-highlighted thumnnail.
function unhighlight_thumb() {
	if(current_thumb == -1)
		return false;
	el = document.getElementById('thumb_' + current_thumb);
	el.style.borderColor = '#666666';
	current_thumb = -1;
	return false;
}

// choose_thumb(): loads up the image associated with the currently-highlighted thumbnail.
function choose_thumb() {
	if(current_thumb != -1)
		swap_pic(current_thumb);
}

// handle_key(): handles keypresses, funnily enough.
function handle_key(ev) {
	if(animating) // don't handle keypresses while the thumbnails are animating, as the effect might not be what the user expects.
		return;
	var key_code = (window.event == null) ? ev.which : window.event.keyCode; // FireFox is being fussy about how I test for window.event.
	var key_timestamp_old = key_timestamp;
	key_timestamp = new Date();
	var time_diff = key_timestamp.getTime() - key_timestamp_old.getTime();
	if(time_diff < 100) // Some keys (eg arrow keys) generate multiple events, so I only process keypresses 100ms apart.  Of course, I'm not using arrow keys anymore...
		return;
	// Arrow keys are no longer used as they're needed for scrolling.  Esc isn't used as some browsers don't pass it.
	switch(key_code) {
		case 13: // enter
			if(thumbs_visible)
				choose_thumb();
			break;
		case 72: // h
		case 191: // / (ie ?)
			toggle_help();
			break;
		case 73: // 'i'
			toggle_info();
			break;
		case 84: // 't'
			toggle_thumbs();
			break;
		case 190: // . (ie >)
		case 221: // ]
		case 187: // = (ie +)
			if(!thumbs_visible)
				show_next();
			else
				nav_thumbs_right();
			break;
		case 188: // , (ie <)
		case 219: // [
		case 189: // -
			if(!thumbs_visible)
				show_prev();
			else
				nav_thumbs_left();
			break;
		case 81: // 'q'
			if(help_visible)
				toggle_help();
			else if(thumbs_visible)
				thumbs_out();
			else
				document.location = 'browse.php';
			break;
		default:
			break;
	}
}

// toggle_help(): toggles visibility of the help panel.
function toggle_help() {
	var button_el = document.getElementById('help_control');
	var text_el = document.getElementById('help_text');
	if(help_visible) {
		text_el.style.display = 'none';
		button_el.title = 'Show the help panel';
	}
	else {
		text_el.style.left = Math.floor((get_window_width() - 318) / 2) + 'px'; // centre the help: keep the width figure synchronised with #help_text/(width + margins + borders) in the CSS.
		text_el.style.display = 'block';
		button_el.title = 'Hide the help panel';
	}
	help_visible = !help_visible;
	return false;
}

-->