// Global variables
var MARGIN_LEFT = 30;
var TEXT_LAYER_MARGIN_LEFT = 20;
var GALLERY_MARGIN_LEFT = 40;
var DELTA_X = 10; // scroll by
var SPEED = 50; // for the timeout

var galleryWidth = 0, galleryHeight = 0, xCoordStart = 0, galleryLeft = 0, galleryBgLeft = 0, galleryLeftBorder = 0, scrollPos = 0;
var winHeight;
var winWidth;
var galleryStyleObj, galleryBgStyleObj, galleryWhiteBgStyleObj;
var imgLayerArray = new Array();
var textLayerArray = new Array();
var oldIndex; // to store the opened text layer
var isGalleryOpen = false;
var timeout;
var debug = false;
var isNN6 = (navigator.userAgent.indexOf('Netscape6') >= 0) ? true : false;

// initialize upon load
function initGallery() {
	var xCoord;
	var galleryTop = getObjectTop('gallery');
	// populate arrays, has to be done dynamically in the template, see /geschichte/cpage_gallery.jsp
	initializeArrays();
	// initialize global variables
	var bottomObj = getRawObject('bottom');
	getObject('mainTable').height = getInsideWindowHeight();
	winHeight = getYPageCoord(bottomObj) + getObjectHeight(bottomObj);
	winWidth = getInsideWindowWidth();
	galleryStyleObj = getObject('gallery');
	galleryBgStyleObj = getObject('galleryBg');
	galleryWhiteBgStyleObj = getObject('galleryWhiteBg');
	galleryLeft = getObjectLeft('gallery');
	galleryBgLeft = getObjectLeft('galleryBg');
	galleryLeftBorder = galleryLeft + galleryBgLeft;
	xCoordStart = GALLERY_MARGIN_LEFT + galleryBgLeft;
	// set position and height for the image and text layers
	xCoord = xCoordStart;
	for (var i = 0; i < imgLayerArray.length; i++) {
		shiftTo(imgLayerArray[i], xCoord, getObjectTop(imgLayerArray[i]));
		shiftTo(textLayerArray[i], xCoord + getObjectWidth(imgLayerArray[i]) + TEXT_LAYER_MARGIN_LEFT, getObjectTop(textLayerArray[i]));
		getObject(textLayerArray[i]).height = winHeight - getObjectTop(textLayerArray[i]) - galleryTop;
		xCoord += (getObjectWidth(imgLayerArray[i]) + MARGIN_LEFT);
	}
	// some more initialization is now possible
	galleryWidth = xCoord;
	galleryHeight = winHeight - galleryTop;
	// set measurements for outer gallery
	galleryStyleObj.width = galleryWidth;
	galleryStyleObj.height = galleryHeight;
	// set measurements for gallery background
	galleryBgStyleObj.width = galleryWidth - galleryBgLeft;
	galleryBgStyleObj.height = winHeight - getObjectTop('galleryBg') - galleryTop;
	galleryWhiteBgStyleObj.width = galleryWidth;
	galleryWhiteBgStyleObj.height = galleryHeight;
	// for debugging set variable debug to true
	if (debug) {
		if (isNN4) {
			galleryStyleObj.clip.width = galleryWidth;
		} else {
			galleryStyleObj.clip = "rect(0px " + galleryWidth + "px " + galleryHeight + "px 0px)";
		}
	}
}

function init() {
	initDHTMLAPI();
	initGallery();
	hide("message");
	show("link");
}

function handleResize() {
	location.reload();
}

// set event handler to initialize
window.onload = init;
window.onresize = handleResize;

// Opening the curtain...
var i = 0;
function openGallery() {
	if (isGalleryOpen) {
		if (window.scrollTo) {
			window.scrollTo(0, 0);
		}
		if (oldIndex && typeof oldIndex != 'undefined') { // text layer is already visible
			// hide layer
			hide(textLayerArray[oldIndex]);
			// adjust galleryWidth
			galleryWidth -= (getObjectWidth(textLayerArray[oldIndex]) + TEXT_LAYER_MARGIN_LEFT);
			oldIndex = null;
			galleryStyleObj.width = galleryBgStyleObj.width = galleryWidth;
			galleryStyleObj.clip = "rect(0px " + galleryWidth + "px " + galleryHeight + "px 0px)";
			// rearange image layers
			var xCoord = xCoordStart;
			for (var j = 0; j < imgLayerArray.length; j++) {
				shiftTo(imgLayerArray[j], xCoord, getObjectTop(imgLayerArray[j]));
				xCoord += (getObjectWidth(imgLayerArray[j]) + MARGIN_LEFT);
			}
		} else { // no text layer was shown, do nothing, layers and widths are perfectly adjusted since initialization
			;
		}
		i = scrollPos = 0;
		galleryStyleObj.clip = "rect(0px " + i + "px " + galleryHeight + "px 0px)";
		isGalleryOpen = false;
	}
	if (i < galleryWidth) {
		i += DELTA_X;
		if (isNN4) {
			galleryStyleObj.clip.width = i;
		} else {
			galleryStyleObj.clip = "rect(0px " + i + "px " + galleryHeight + "px 0px)";
			
			// stupid netscape 6
			if (isNN6) {
				galleryStyleObj.width = i + 100;
			}
			
			if (window.scrollBy && (galleryLeft + i) >= winWidth && scrollPos < galleryLeftBorder) {
				window.scrollBy(DELTA_X, 0);
				scrollPos += DELTA_X;
			}
			
			if (scrollPos >= galleryLeftBorder) {
				galleryStyleObj.width = galleryBgStyleObj.width = galleryWhiteBgStyleObj.width = galleryWidth;
				galleryStyleObj.clip = "rect(0px " + galleryWidth + "px " + galleryHeight + "px 0px)";
				clearTimeout(timeout);
				isGalleryOpen = true;
				return;		
			}		
		}
	} else if (i >= galleryWidth) {
		clearTimeout(timeout);
		isGalleryOpen = true;
		return;
	}
	
	timeout = setTimeout("openGallery()", SPEED);
}

// Openening a text layer
function showDetails(i) {
	var textLayer = textLayerArray[i];
	var xCoord = xCoordStart;
	
	if (i == oldIndex) {
		return;
	}
	
	// adjust gallery and gallery background width
	if (oldIndex && typeof oldIndex != 'undefined') { // text layer is already visible
		galleryWidth += (getObjectWidth(textLayer) - getObjectWidth(textLayerArray[oldIndex]));
	} else { // first time of showing text layer
		galleryWidth += (getObjectWidth(textLayer) + MARGIN_LEFT);
	}
	if (timeout && typeof timeout != 'undefined') {
		clearTimeout(timeout);
		isGalleryOpen = true;
	}
	galleryStyleObj.width = galleryBgStyleObj.width = galleryWhiteBgStyleObj.width = galleryWidth;
	galleryStyleObj.clip = "rect(0px " + galleryWidth + "px " + galleryHeight + "px 0px)";
	// rearange image layers
	for (var j = 0; j < imgLayerArray.length; j++) {
		shiftTo(imgLayerArray[j], xCoord, getObjectTop(imgLayerArray[j]));
		xCoord += (getObjectWidth(imgLayerArray[j]) + MARGIN_LEFT);
		if (j == i) xCoord += (getObjectWidth(textLayer) + TEXT_LAYER_MARGIN_LEFT);
	}
	// show and hide text layer
	if (oldIndex && oldIndex != i) {
		hide(textLayerArray[oldIndex]);
		show(textLayer);
		oldIndex = i;
	} else {
		show(textLayer);
		oldIndex = i;
	}
	// focus
	window.scrollTo(getObjectLeft(textLayer) + getObjectWidth(textLayer), 0);
}

function getYPageCoord(element) {
	var y = 0;
	while (element) {
		y += element.offsetTop;
		element = element.offsetParent;
	}
	return y;
}