///////////////////////////
function EnlargeImageInLightbox( i ) {
///////////////////////////

	ShowImage( i, 0 );
	SetVisibility( 'mainlayer', 'visible' );
	SetVisibility( 'lightboxlayer', 'hidden' );
}

///////////////////////////
function DisplayLightbox() {
///////////////////////////

	// unload small images elements in the mainlayer
	SetupSmall( 'none' );

	// register and render light box links
	clinks_href = new Array();
	clinks_txt  = new Array();
	clinks_href.push('javascript:DisplayLightbox()');
	clinks_txt.push( ls_lightbox );
	clinks_href.push('javascript:HideLightbox()');
	clinks_txt.push( ls_albumview );
	RenderCtrlLinks();

	// write title and link
	document.getElementById('title_lb').innerHTML = title;
	document.getElementById('ctrllinks_lb').innerHTML = '<a class="control" href="javascript:HideLightbox()">'+ls_albumview+'</a>';

	// write thumbnails
	var border = 14;
	var html = '';
	for (i=0;i<nbImages;i++) {

		var hfill    = maxSmallW-smallWidth[i];
		var vfill    = maxSmallH-smallHeight[i];
		var m_left   = border + Math.floor( hfill/2 );
		var m_right  = border + Math.ceil ( hfill/2 );
		var m_top    = border + Math.floor( vfill/2 );
		var m_bottom = border + Math.ceil ( vfill/2 );

		var mac = GetMajorCaption(i).replace( /"/g, '&quot;' );
		var re  = /<\S[^>]*>/g;
		mac = mac.replace(re,""); // strip html

		html += '<a href="javascript:EnlargeImageInLightbox('+i+')">';
		html += '<img style="display: inline; padding: 0px; border: 0px solid black; ';
		html += 'margin-left: '+m_left+'px; margin-right:'+m_right+'px; ';
		html += 'margin-top:'+m_top+'px; margin-bottom:'+m_bottom+'px;" ';
		html += 'src="small/'+ImageFile(i)+'" ';
		html += 'width="'+smallWidth[i]+'" ' ;
		html += 'height="'+smallHeight[i]+'" ' ;
		html += 'galleryimg="no" title="'+mac+'" alt="'+mac+'" />';
		html += '</a> ';
	}
	document.getElementById('images_lb').innerHTML = html;

	// write footer
	document.getElementById('footer_lb').innerHTML = PortaMagicFooter(footer);

	// hide the main layer and show the lightbox
	SetVisibility( 'mainlayer', 'hidden' );
	SetVisibility( 'lightboxlayer', 'visible' );
}

///////////////////////////
function HideLightbox() {
///////////////////////////

	// unload lightbox images to conserve memory
	document.getElementById('images_lb').innerHTML = '';

	// turn on small images in the main layer
	SetupSmall( smallPos );

	// unregister links
	clinks_href = new Array();
	clinks_txt  = new Array();
	RenderCtrlLinks();

	// hide lightbox and show the main layer
	SetVisibility( 'mainlayer', 'visible' );
	SetVisibility( 'lightboxlayer', 'hidden' );
}

///////////////////////////
function ShowingFirstImage() {
///////////////////////////

	if (intro!='') {

		return currentImage==-1;
	}

	return currentImage==0;
}

///////////////////////////
function ShowingLastImage() {
///////////////////////////

	return currentImage==(nbImages-1);
}

///////////////////////////
function ShowHome() {
///////////////////////////

	ShowImage( -1, 1 );
}

///////////////////////////
function Next() {
///////////////////////////

	if ( !ShowingLastImage() ) {

		ShowImage( currentImage+1, 1 );
	}
}

///////////////////////////
function Previous() {
///////////////////////////

	if ( !ShowingFirstImage() ) {

		ShowImage( currentImage-1, 1 );
	}
}

//////////////////////////
function ImageFile( imgNb ) {
//////////////////////////

	return imageFilename[imgNb];
}

//////////////////////////
function GetMinorCaption(imgNb) {
//////////////////////////

	return minorCaption[imgNb];
}

//////////////////////////
function GetMajorCaption(imgNb) {
//////////////////////////

	return majorCaption[imgNb];
}

//////////////////////////
function ShowHidePrevNext() {
//////////////////////////

	document.getElementById('previous').style.visibility = ShowingFirstImage() ? 'hidden' : 'visible';
	document.getElementById('next').style.visibility = ShowingLastImage() ? 'hidden' : 'visible';
}

//////////////////////////
function WaitCursorOn() {
//////////////////////////

	var e = document.getElementsByTagName('body');
	for(i=0;i<e.length;i++) { e.item(i).style.cursor = 'wait'; }
	e = document.getElementsByTagName('a');
	for(i=0;i<e.length;i++) { e.item(i).style.cursor = 'wait'; }
	e = document.getElementsByTagName('table');
	for(i=0;i<e.length;i++) { e.item(i).style.cursor = 'wait'; }
}

//////////////////////////
function WaitCursorOff() {
//////////////////////////

	var e = document.getElementsByTagName('body');
	for(i=0;i<e.length;i++) { e.item(i).style.cursor = 'default'; }
	e = document.getElementsByTagName('a');
	for(i=0;i<e.length;i++) { e.item(i).style.cursor = 'pointer'; }
	e = document.getElementsByTagName('table');
	for(i=0;i<e.length;i++) { e.item(i).style.cursor = 'default'; }
}

//////////////////////////
var cacheImage = new Image();
//////////////////////////
function CacheNextImage() {
//////////////////////////

	// cache the next image
	if ( !ShowingLastImage() ) {

		cacheImage.src = 'medium/'+ImageFile(currentImage+1);
	}
}

//////////////////////////
// private functions used by ShowImage()
//////////////////////////
		var mainImage = new Image();

		//////////////////////////
		function MainImageLoadDone() {
		//////////////////////////

			// turn off the wait cursor
			WaitCursorOff();

			// cache next image
			CacheNextImage();
		}

		//////////////////////////
		function LoadMainImage() {
		//////////////////////////


		}
//////////////////////////
// end of private functions
//////////////////////////

//////////////////////////
function GenerateImageAndCaptionHTML( imageIdx, onloadhandler ) {
//////////////////////////

	var mac = GetMajorCaption(imageIdx);
	var mic = GetMinorCaption(imageIdx).replace( /"/g, '&quot;' );

	var mihtml = '<img name="imagepane" onload="'+onloadhandler+'" class="medium" src="' + 'medium/'+ImageFile(imageIdx)+'" ';
	mihtml    += ' title="'+mic+'" alt="'+mic+'" />';
	if (largeImages) {

		mihtml = '<a href="javascript:OpenLarge('+imageIdx+')">'+mihtml+'</a>';
	}
	var bordersize = 1;
	cap_width = parseInt(mediumWidth[imageIdx]+2*bordersize);
	mihtml += '<div style="width:'+cap_width+'px;" class="caption">'+mac+'<br/></div>';

	return mihtml;
}

//////////////////////////
function ShowImage( imgNb, scrollsmall ) {
// changes 'currentImage'
//////////////////////////

	// set the current image number
	currentImage = imgNb;

	// load image, captions, et cetera

	// hide/show next, previous links
	ShowHidePrevNext();

	// render main item
	if (currentImage==-1) {

		// an intro page text is existing and requested
		var mihtml = '';
		mihtml += '<br/>';
		mihtml += '<div id="intro" style="text-align:left;min-height:'+mediumHeight[0]+'px;">'+intro+'</div>';
		document.getElementById('mainimage').innerHTML = mihtml;

		// cache next image
		CacheNextImage();
	} else {

		// turn on wait cursor
		WaitCursorOn();

		// render image and caption html
		document.getElementById('mainimage').innerHTML = GenerateImageAndCaptionHTML( currentImage, 'MainImageLoadDone()' );

		// nasty opera work-around
		var isOpera = (navigator.userAgent.toLowerCase().indexOf("opera") != -1);
		if (isOpera) {

			// image onload is not supported, hence call it directly
			MainImageLoadDone();
		}
	}

	// scroll to show the corresponding small image
	var sif = document.getElementById('smalliframe');
	if (scrollsmall && sif) {

		anchor = imgNb>=0 ? imgNb : 'top';
		sif.src='small.html#'+anchor;
	}
}

//////////////////////////
function ImageBrowsingKeydownHandler( e ) {
//////////////////////////

	if (!e) e = window.event;
	if (e.type!='keydown') { return; }

	var mp = parent ? parent : this;

	switch (e.keyCode) {

		case 37:    // left_arrow
					mp.Previous();
					break;

		case 39:    // right_arrow
					mp.Next();
					break;
		default:
	}
}

///////////////////////////
function OpenLarge( imgNb ) {
///////////////////////////

	var w = largeWidth[imgNb];
	var h = largeHeight[imgNb];
	var sw = screen ? screen.width : w;
	var sh = screen ? screen.height : h;
	var scrollbars = 'no';
	var gutter = 100;

	if (sw-gutter<w || sh-gutter<h) {

		scrollbars = 'yes';
		w = sw-gutter;
		h = sh-gutter;
	}

	window.open('large.html',
				'',
				'width='+w+
				',height='+h+
				',resizable=yes,menubar=no,toolbar=no,status=no,location=no'+
				',scrollbars='+scrollbars+
				',left='+( (sw-w)/2 )+
				',top='+( (sh-h)/2 )+
				',screenX='+( (sw-w)/2 )+
				',screenY='+( (sh-h)/2 ) );
}

//////////////////////////
function SetupSmall( smallPosSetting ) {
//////////////////////////

	var stym = document.getElementById('maincontent').style;

	if (smallPosSetting=='none') {

		// empty iframe
		document.getElementById('smalliframe_span').innerHTML = '';

		// set the main content to fill the browser
		stym.left   = '0px';
		stym.top    = '0px';
		stym.bottom = '0px';
		stym.right  = '0px';
		return;
	}

	var iframe = '<iframe src="small.html" id="smalliframe" name="smalliframe" frameborder="no" scrolling="auto"></iframe>';
	document.getElementById('smalliframe_span').innerHTML = iframe;

	var sty  = document.getElementById('smalliframe').style;
	var scrollbarsize = 16;
	var marginsize = 2*1+2*3+10;
	var w = parseInt(maxSmallW+scrollbarsize+marginsize+9)+'px';
	var h = parseInt(maxSmallH+scrollbarsize+marginsize)+'px';
	switch (smallPosSetting) {

		case 'top':     sty.left    = '0px';
						sty.top     = '0px';
						sty.width   = '100%';
						sty.height  = h;
						stym.top    = h;
						break;

		case 'bottom':  sty.left    = '0px';
						sty.bottom  = '0px';
						sty.width   = '100%';
						sty.height  = h;
						stym.bottom = h;
						break;

		case 'right':   sty.right   = '0px';
						sty.top     = '0px';
						sty.width   = w;
						sty.height  = '100%';
						stym.right  = w;
						break;

		case 'left':
		default:        sty.left    = '0px';
						sty.top     = '0px';
						sty.width   = w;
						sty.height  = '100%';
						stym.left   = w;
						break;
	 }
	 sty.visibility = 'visible';
}

///////////////////////////
function PortaMagicFooter( footerStr ) {
///////////////////////////

	var p_link = ' <a href=\"http://www.stegmann.dk/mikkel/porta/\" class="control">Porta</a>';
	return footerStr.replace( / Porta/g, p_link );
}

///////////////////////////
function ShowAll() {
///////////////////////////

	var html = '';
	for (i=0;i<nbImages;i++) {

		html += GenerateImageAndCaptionHTML( i, '' );
	}
	document.getElementById('mainimage').innerHTML = html;
}

///////////////////////////
function RenderCtrlLinks() {
///////////////////////////

	var ctrllinks = '';
	for(i=0;i<clinks_href.length;i++) {

		ctrllinks += '&nbsp;&nbsp;<a class="control" href="' + clinks_href[i] + '">' + clinks_txt[i] + '</a>';
	}
	ctrllinks += '<span id="previous">&nbsp;&nbsp;<a class=control href="javascript:Previous()">'+ls_previous+'</a></span>';
	ctrllinks += '<span id="next">&nbsp;&nbsp;<a class=control href="javascript:Next()">'+ls_next+'</a></span>';
	document.getElementById('ctrllinks').innerHTML = ctrllinks;
}

///////////////////////////
function SetupAlbum() {
///////////////////////////

	// set document title
	document.title = title.replace(/(<([^>]+)>)/ig,"");

	// set main image cell size
	var bordersize = 2;
	document.getElementById('imagecell').style.width = parseInt(maxMediumW+2*bordersize)+'px';

	// render title
	document.getElementById('title').innerHTML = title;

	// render footer
	document.getElementById('footer').innerHTML = PortaMagicFooter(footer);

	// render links
	RenderCtrlLinks();

	// render image
	ShowImage( currentImage, 0 );

	// write status message
	window.status = 'This is a Porta photo album. Use the left and right arrow keys to navigate.';

	// register key handler
	document.onkeydown = ImageBrowsingKeydownHandler;

	// show thumbnails
	SetupSmall( smallPos );
}

///////////////////////////
function GetObj(name) {
///////////////////////////

	if (document.getElementById) {

		this.obj = document.getElementById(name);
		this.style = document.getElementById(name).style;
	}
	else if (document.all) {

		this.obj = document.all[name];
		this.style = document.all[name].style;
	}
	else if (document.layers) {

		this.obj = document.layers[name];
		this.style = document.layers[name];
	}
}

///////////////////////////
function SetVisibility(obj_id,status) {
///////////////////////////

	var x = new GetObj(obj_id);
	x.style.visibility = status;
}