var thumbWidth = 64;
var scopeWidth = 448;
var currentPictureID = -1;
var lastPictureID = -1;
var switchDir = 1;
var picCount = 0;
var runSlideshow = false;
var slideshowSpeed = 3000;

function thumbSwitch(obj) {
	var source	= obj.src;
	var length	= source.length;
	var format	= source.slice(length - 4, length);
	var over	= source.slice(length - 9,length - 4);
	if (over == '_over')  {
		newFile = source.slice(0, length - 9) + format;
	} else {
		newFile = source.slice(0, length - 4) + '_over' + format;
	}
	obj.src = newFile;
}

function getLastPicID() {
	if (!document.getElementById('tx-zmarubafe-thumblist')) return false;
	var thumblist = document.getElementById('tx-zmarubafe-thumblist');
	var thumbs = thumblist.getElementsByTagName('li');
	if (thumbs.length != 0) {
		return parseInt(thumbs[thumbs.length - 1].id.replace('thumb', ''));
	} else {
		return -1;
	}
}

function getCurrentPicNr() {
	if (!document.getElementById('tx-zmarubafe-thumblist')) return false;
	var thumblist = document.getElementById('tx-zmarubafe-thumblist');
	var thumbs = thumblist.getElementsByTagName('li');
	for (i = 0; i < thumbs.length; i++) {
		if (thumbs[i].id == 'thumb' + currentPictureID) {
			return i;
		}
	}
	return -1;
}

function getPictureFromCurr(diff) {
	if (!document.getElementById('tx-zmarubafe-thumblist')) return false;
	var thumblist = document.getElementById('tx-zmarubafe-thumblist');
	var thumbs = thumblist.getElementsByTagName('li');
	var curr = getCurrentPicNr();
	if (diff < 0 && curr == 0) return false;
	if (diff > 0 && (curr == thumbs.length - 1 || curr == -1)) return false; 
	return parseInt(thumbs[curr + diff].id.replace('thumb', ''));
}

/*
 * UNUSED: Loading applets dynamically this way doesn't work in Safari
 */
function switchPanoramaPicture(id) {
	var loaderEl = document.getElementById("tx-zmarubafe-loader");
	loaderEl.style.visibility = "visible";
	// prepare the AJAX request by prototype
	var url = 'index.php';
	var data = 'eID=zm_aruba_fe_pictureloader&picture=' + id;
	// do the AJAX request using prototype
 	var request = new Ajax.Request(url, {method: 'get', parameters: data, onSuccess: updatePanoramaPicture});
}

function switchPicture(id, fromSlideshow) {
	if (fromSlideshow === undefined) fromSlideshow = false;
	if (runSlideshow && !fromSlideshow) slideshowStop();
	var loaderEl = document.getElementById("tx-zmarubafe-loader");
	loaderEl.style.visibility = "visible";
	// prepare the AJAX request by prototype
	var url = 'index.php';
	var data = 'eID=zm_aruba_fe_pictureloader&picture=' + id;
	// do the AJAX request using prototype
 	var request = new Ajax.Request(url, {method: 'get', parameters: data, onSuccess: updatePicture});
}

function switchToPreviousPicture() {
	switchDir = -1;
	var id = getPictureFromCurr(-1);
	if (id) switchPicture(id, false);
}

function switchToNextPicture(fromSlideshow) {
	if (fromSlideshow === undefined) fromSlideshow = false;
	switchDir = 1;
	var id = getPictureFromCurr(1);
	if (runSlideshow && id == lastPictureID) slideshowStop();
	if (id) switchPicture(id, fromSlideshow);
}

function slideshowNext() {
	if (runSlideshow) switchToNextPicture(true);
}

function slideshowStart() {
	lastPictureID = getLastPicID();
	if (currentPictureID != lastPictureID) {
		runSlideshow = true;
		var indicator = document.getElementById('tx-zmarubafe-slideshow-indicator');
		var start = document.getElementById('tx-zmarubafe-slideshow-start');
		var stop = document.getElementById('tx-zmarubafe-slideshow-stop');
		if (indicator) indicator.style.visibility = 'visible';
		if (start) start.style.display = 'none';
		if (stop) stop.style.display = 'block';
		slideshowNext();
	}
}

function slideshowSwitch() {
	if (runSlideshow) {
		slideshowStop();
	} else {
		slideshowStart();
	}
}

function slideshowStop() {
	runSlideshow = false;
	var indicator = document.getElementById('tx-zmarubafe-slideshow-indicator');
	var start = document.getElementById('tx-zmarubafe-slideshow-start');
	var stop = document.getElementById('tx-zmarubafe-slideshow-stop');
	if (indicator) indicator.style.visibility = 'hidden';
	if (stop) stop.style.display = 'none';
	if (start) start.style.display = 'block';
}

/*
 * UNUSED: Loading applets dynamically this way doesn't work in Safari
 */
function updatePanoramaPicture(request) {
	var appletEl = document.getElementById("tx-zmarubafe-picture-box");
	var commentEl = document.getElementById("tx-zmarubafe-comment");
	var loaderEl = document.getElementById("tx-zmarubafe-loader");
	
	var xmldoc = request.responseXML;
	var id = xmldoc.getElementsByTagName("id")[0].firstChild.nodeValue;
	var filename = xmldoc.getElementsByTagName("wwworiginal")[0].firstChild.nodeValue;
	var comment = xmldoc.getElementsByTagName("comment")[0].firstChild ? xmldoc.getElementsByTagName("comment")[0].firstChild.nodeValue : "";

	currentPictureID = id;
	
	if (appletEl) appletEl.title = comment;
	if (commentEl) commentEl.innerHTML = comment;
	updatePicNr();
	updateActiveThumb(id);
	focusActiveThumb(id);
	if (appletEl) {
		appletEl.innerHTML = '<applet code="ptviewer.class" archive="fileadmin/ptviewer/ptviewer.jar" width="496" height="350">' +
				'<param name="file" value="' + filename + '">' + 
				'<param name="cursor" value="MOVE">' + 
				'<param name="wait" value="">' + 
				'<param name="fov" value="90">' + 
			'</applet>';
	}
	if (loaderEl) loaderEl.style.visibility = 'hidden';
	return false;
}

function updatePicture(request) {
	// the <img ...>-tag which holds the large picture
	var imgEl = document.getElementById("tx-zmarubafe-picture-box");
	var commentEl = document.getElementById("tx-zmarubafe-comment");
	var loaderEl = document.getElementById("tx-zmarubafe-loader");
	// stop if one of the important objects doesn't exist
	// if (!imgEl || !commentEl || !loaderEl) return false;
	
	var xmldoc = request.responseXML;
	var id = xmldoc.getElementsByTagName("id")[0].firstChild.nodeValue;
	var filename = xmldoc.getElementsByTagName("wwwsmallsize")[0].firstChild.nodeValue;
	var comment = xmldoc.getElementsByTagName("comment")[0].firstChild ? xmldoc.getElementsByTagName("comment")[0].firstChild.nodeValue : "";

	currentPictureID = id;
	
	// preload image
	imgPreload = new Image();
	imgPreload.onload=function(){
		if (imgEl) imgEl.title = comment;
		if (commentEl) commentEl.innerHTML = comment;
		updatePicNr();
		updateMagnifier();
		updateActiveThumb(id);
		updatePrevNextButtons(id);
		focusActiveThumb(id);
		if (imgEl) imgEl.style.backgroundImage = 'url(' + filename + ')';
		if (loaderEl) loaderEl.style.visibility = 'hidden';
		preloadPrevNext();
		if (runSlideshow) setTimeout('slideshowNext()', slideshowSpeed);
		return false;
	}
	imgPreload.src = filename;
}

function preloadPrevNext() {
	firstID = getPictureFromCurr(switchDir);
	if (firstID) {
		// request and preload the previous picture
		var url = 'index.php';
		var data = 'eID=zm_aruba_fe_pictureloader&picture=' + firstID;
		var request = new Ajax.Request(url, {method: 'get', parameters: data, onSuccess: preloadPicture});
	}
	
	secondID = getPictureFromCurr(switchDir * -1);
	if (secondID) {
		// request and preload the next picture
		var url = 'index.php';
		var data = 'eID=zm_aruba_fe_pictureloader&picture=' + secondID;
		var request = new Ajax.Request(url, {method: 'get', parameters: data, onSuccess: preloadPicture});
	}
}

function preloadPicture(request) {
	var filename = request.responseXML.getElementsByTagName("wwwsmallsize")[0].firstChild.nodeValue;
	// preload the picture
	var preloader = new Image();
	preloader.src = filename;
}

function updateMagnifier() {
	var magnifiers = document.getElementsByName('fullsizemagnifier');
	for (var i = 0; i < magnifiers.length; i++) {
		var id = magnifiers[i].id.replace('tx-zmarubafe-magnifier', '');
		if (id == currentPictureID) {
			magnifiers[i].style.visibility = 'visible';
		} else {
			magnifiers[i].style.visibility = 'hidden';
		}
	}
}

function updateActiveThumb(id) {
	if (!document.getElementById('tx-zmarubafe-thumblist')) return false;
	var thumblist = document.getElementById('tx-zmarubafe-thumblist');
	var thumbs = thumblist.getElementsByTagName('li');
	var activeThumb = '';
	var curr = -1;
	for (i = 0; i < thumbs.length; i++) {
		activeThumb = thumbs[i].id == 'thumb' + id ? ' tx-zmarubafe-activethumb' : '';
		thumbs[i].className = 'tx-zmarubafe-thumbnail' + activeThumb;
	}
}

function updatePrevNextButtons(id) {
	var thumblist		= document.getElementById('tx-zmarubafe-thumblist');
	var prevbutton		= document.getElementById('tx-zmarubafe-prevbutton');
	var prevbuttonvert	= document.getElementById('tx-zmarubafe-prevbutton-vertview');
	var nextbutton		= document.getElementById('tx-zmarubafe-nextbutton');
	var nextbuttonvert	= document.getElementById('tx-zmarubafe-nextbutton-vertview');
	if ( !thumblist || (!prevbutton && !prevbuttonvert) || (!nextbutton && !nextbuttonvert) ) return false;
	var thumbs = thumblist.getElementsByTagName('li');
	var curr = -1;
	for (i = 0; i < thumbs.length; i++) {
		if (thumbs[i].id == 'thumb' + id) {
			curr = i;
			break;
		}
	}
	prevLink = curr == 0 ? 'hidden' : 'visible';
	nextLink = curr == thumbs.length - 1 ? 'hidden' : 'visible';
	if (prevbutton) {
		prevbutton.style.visibility = prevLink;
	} else if (prevbuttonvert) {
		prevbuttonvert.style.visibility = prevLink;
	}
	if (nextbutton) {
		nextbutton.style.visibility = nextLink;
	} else if (nextbuttonvert) {
		nextbuttonvert.style.visibility = nextLink;
	}
}

function focusActiveThumb(id) {
	var thumb = document.getElementById('thumb' + id);
	if (!thumb) return false;
	var left = thumb.offsetLeft - 4;
	var container = document.getElementById('tx-zmarubafe-thumbs');
	if (!container) return false;
	var scopeLeft = container.scrollLeft;
	var scopeRight = scopeLeft + scopeWidth;
	var tolerance = 4;
	if (left + tolerance < scopeLeft || left > scopeRight - thumbWidth + tolerance) {
		var pos = left + thumbWidth / 2 - scopeWidth / 2;
		scrollTo(GALLERY, 'tx-zmarubafe-thumbs', pos, 10);
	}
}

function updatePicNr() {
	var picnr = document.getElementById('tx-zmarubafe-picnr');
	picnr.innerHTML = (getCurrentPicNr() + 1) + '/' + picCount;
}

function getPicCount() {
	if (!document.getElementById('tx-zmarubafe-thumblist')) return false;
	var thumblist = document.getElementById('tx-zmarubafe-thumblist');
	var thumbs = thumblist.getElementsByTagName('li');
	return thumbs.length;
}

function initGallery() {
	var thumblist = document.getElementById('tx-zmarubafe-thumblist');
	if (!thumblist) return false;
	var thumbs = thumblist.getElementsByTagName('li');
	var active = '';
	for (i = 0; i < thumbs.length; i++) {
		if (thumbs[i].className.indexOf('tx-zmarubafe-activethumb')) {
			curr = i;
			break;
		}
	}
	currentPictureID = parseInt(thumbs[curr].id.replace('thumb', ''));
	picCount = getPicCount();
	updatePicNr();
	focusActiveThumb(currentPictureID);
	updatePrevNextButtons(currentPictureID);
	updateGalleryScrollButtons(document.getElementById('tx-zmarubafe-thumbs'));
}