<!--
// global vars
var boundary = 10;
var x_init	 = 20;
var y_init   = 20;
var x_min, x_max, y_min, y_max;
var winY, winX;
var photo_container;
var photo_title;
var photo_img;
var init_photo = null;

// window events
window.onload	= Init;
window.onresize	= resetPhotoPosition;

function Init() {
	// get reference to photo elements
	getPhotoElements();
	// hide photo
	hidePhoto();
	// attach onClick events to thumbs
	attachOnClickToThumbs();
	// set boundaries for photo drag n drop
	setPhotoBoundaries();
	// attach drag and drop handler to Photo
	DragHandler.attach(photo_container);
	// show inital image if required
	showInitialPhoto();
}

function getPhotoElements() {
	photo_container	= document.getElementById("gallery_photo_container");
	photo_title		= document.getElementById("gallery_photo_title");
	photo_img		= document.getElementById("gallery_photo_img");
}

function attachOnClickToThumbs() {
	if (document.getElementById("gallery") != null) {
		var gallery	= document.getElementById("gallery");
		var thumbs	= gallery.getElementsByTagName("img");
		var thumbCnt= thumbs.length;
		for (i=0; i<thumbCnt; i++) {
			thumbs[i].onclick = showPhotoOnClick;
		}
	}
	
	var slideshowImg = document.getElementById("slideshow_thumb");
	slideshowImg.onclick = showPhotoOnClick;
}

function showPhotoOnClick(evt) {
	evt = (evt) ? evt : ((window.event) ? event : null);
	if (evt) {
		var elem = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
		if (elem ) {
			var src   = elem.src.replace("thumb_", "photo_");
			var title = elem.alt;
			showPhoto(src, title);
		}
	}
}

function setInitialPhoto(src, title) {
	init_photo = { src: src, title: title };
}

function showInitialPhoto() {
	if (init_photo != null) {
		showPhoto(init_photo.src, init_photo.title);
	}
}

function showPhoto(src, title) {
	photo_img.src = src;
	photo_title.innerHTML = title;
	photo_img.onLoad = setTimeout("photo_container.style.visibility = 'visible'", 500);
}

function hidePhoto() {
	photo_container.style.visibility = "hidden";
	photo_container.style.position   = "absolute";
	photo_container.style.top        = y_init + "px";
	photo_container.style.left       = x_init + "px";	
	photo_img.src = "";
}

function setPhotoBoundaries() {
	// available screen dimensions
	if (window.innerWidth) {
		winX = window.innerWidth -15; // mozilla scrollbar
		winY = window.innerHeight;
	}
	else if (document.documentElement && document.documentElement.clientWidth) {
		winX = document.documentElement.clientWidth;
		winY = document.documentElement.clientHeight;
	}
	else if (document.body) {
		winX = document.body.clientWidth;
		winY = document.body.clientHeight;
	}
	else {
		winX = screen.availWidth;
		winY = screen.availHeight;
	}
	// validate boundary value
	n = ((boundary === undefined) || (boundary > winX) || (boundary > winY)) ? 0 : boundary;
	// set min max values
	x_min = n;
	x_max = winX - n;
	y_min = n;
	y_max = winY - n;
	// alert("x_min = " + x_min + "\n" + "x_max = " + x_max + "\n" + "y_min = " + y_min + "\n" + "y_max = " + y_max);
}


function resetPhotoPosition() {
	var x_old = parseInt(photo_container.style.left);
	var y_old = parseInt(photo_container.style.top);
	var winY_old = winY;
	var winX_old = winX;
	setPhotoBoundaries();
	var x = (x_old <= winX) ? x_old : x_old + winX - winX_old;
	var y = (y_old <= winY) ? y_old : y_old + winY - winY_old;
	photo_container.style.left = x + "px";
	photo_container.style.top  = y + "px";
	// alert("x old: " + x_old + "\nx new: " + x + "\ny old: " + y_old + "\ny new: " + y);	
}


/**
*
*  Crossbrowser Drag Handler
*  http://www.webtoolkit.info/javascript-drag-handler.html
*
**/

var DragHandler = {
	// private property.
	_oElem : null,

	// public method. Attach drag handler to an element.
	attach : function(oElem) {
		oElem.onmousedown = DragHandler._dragBegin;
		
		// callbacks
		oElem.dragBegin = new Function();
		oElem.drag = new Function();
		oElem.dragEnd = new Function();
		return oElem;
	},

	// private method. Begin drag process.
	_dragBegin : function(e) {
		var oElem = DragHandler._oElem = this;

		// customized - if invalid set to min boundaries
		if (isNaN(parseInt(oElem.style.left))) { oElem.style.left = y_min + 'px'; }
		if (isNaN(parseInt(oElem.style.top ))) { oElem.style.top  = x_min + 'px'; }

		var x = parseInt(oElem.style.left);
		var y = parseInt(oElem.style.top);

		e = e ? e : window.event;
		oElem.mouseX = e.clientX;
		oElem.mouseY = e.clientY;

		oElem.dragBegin(oElem, x, y);

		document.onmousemove = DragHandler._drag;
		document.onmouseup = DragHandler._dragEnd;
		return false;
	},

	// private method. Drag (move) element.
	_drag : function(e) {
		var oElem = DragHandler._oElem;

		var x = parseInt(oElem.style.left);
		var y = parseInt(oElem.style.top);
		
		// customized - check min / max boundaries
		x = (x <= x_min) ? x_min : (x >= x_max) ? x_max : x;
		y = (y <= y_min) ? y_min : (y >= y_max) ? y_max : y;
		
		e = e ? e : window.event;
		oElem.style.left = x + (e.clientX - oElem.mouseX) + 'px';
		oElem.style.top = y + (e.clientY - oElem.mouseY) + 'px';

		oElem.mouseX = e.clientX;
		oElem.mouseY = e.clientY;

		oElem.drag(oElem, x, y);

		return false;
	},

	// private method. Stop drag process.
	_dragEnd : function() {
		var oElem = DragHandler._oElem;

		var x = parseInt(oElem.style.left);
		var y = parseInt(oElem.style.top);

		oElem.dragEnd(oElem, x, y);

		document.onmousemove = null;
		document.onmouseup = null;
		DragHandler._oElem = null;
	}
}
//-->