function lightbox_open(id, width, height, el) {
	var body = document.getElementsByTagName('body')[0];
	var div = document.getElementById('lightbox_fade');

//	debugPrint("IE = " + IE);
//	debugPrint("IE_PNG = " + IE_PNG);

	if(IE && !IE_PNG) {
		div.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=60)";
		div.style.backgroundColor = "#000000";
		div.style.backgroundImage = "";
	}

	var curid = parseInt(el.getAttribute('lightbox_index'));

	var url = 'index.php?action=article-getImage&article-imageId=' + id + '&article-type=lightbox&article-width=' + width + '&article-height=' + height;

	// make the clicked element defocus
	if(el) el.blur();

	// check all our divs actually exist
	var div = document.getElementById('lightbox_fade');
	var front = document.getElementById('lightbox_front');
	var back = document.getElementById('lightbox_back');
	var next = document.getElementById('lightbox_next');
	var prev = document.getElementById('lightbox_prev');
	var title = document.getElementById('lightbox_title');
	var close = document.getElementById('lightbox_close');

	if(!div || !front || !back || !next || !prev || !title || !close) return true; // if we don't have all our elements we error out without errors ;)

	// set some events here that can't be set in css
	next.onclick = lightbox_next;
	prev.onclick = lightbox_prev;
	close.onclick = lightbox_close;
	div.onclick = lightbox_close; // might be a good thing

	// common stuff for template and original divs

	front.style.backgroundImage = 'url()';
	div.style.display = 'block';
	back.style.display = 'block';
	lightbox_gotoimg(curid);

	return false; // return this onclick so the real link is not executed
}

function lightbox_close()
{
	var body = document.getElementsByTagName('body')[0];
	var div = document.getElementById('lightbox_fade');
	var back = document.getElementById('lightbox_back');

	back.style.display = 'none';
	div.style.display = 'none';
//	body.style.overflow = '';
}

// show specific image in the list
function lightbox_gotoimg(id)
{
	var front = document.getElementById('lightbox_front');
	var back = document.getElementById('lightbox_back');
	var next = document.getElementById('lightbox_next');
	var prev = document.getElementById('lightbox_prev');
	var title = document.getElementById('lightbox_title');
//	var loader = document.getElementById('lightbox_loader');

	var el = document.getElementById('lightbox_' + id);

	if(!front || !back || !next || !prev || !title || !el)
		return;

	// check which buttons to show
	if(document.getElementById('lightbox_' + eval(id + 1))) {
		next.style.display = 'block';
	} else {
		next.style.display = 'none';
	}
	if(document.getElementById('lightbox_' + eval(id - 1))) {
		prev.style.display = 'block';
	} else {
		prev.style.display = 'none';
	}


	// start loading the image
	var loadImage = new Image();
	front.setAttribute('lightbox_index', id);
	loadImage.setAttribute("lightbox_index", id);
	loadImage.onload = function() {
		this.setAttribute('lightbox_width', this.width);
		this.setAttribute('lightbox_height', this.height);

		var front = document.getElementById('lightbox_front');
		var id = front.getAttribute("lightbox_index");
		if(this.getAttribute('lightbox_index') == id) {
			lightbox_setBorderSize(this.width, this.height);
			var el = document.getElementById('lightbox_' + id);
			front.style.backgroundImage = 'url(' + el.parentNode.href + ')';
			lightbox_hideLoader();
		}
	}

	front.style.backgroundImage = '';
	lightbox_showLoader();
	loadImage.src = el.parentNode.href;
	if(loadImage.complete) lightbox_hideLoader();

	var titleText = document.getElementById('lightbox_' + id).getAttribute('lightbox_kt');
	if(!titleText) titleText = document.getElementById('lightbox_' + id).getAttribute('alt');
	if(!titleText) titleText = document.getElementById('lightbox_' + id).getAttribute('title');

	title.innerHTML = "";
	// split text into lines
	var titleLines = titleText.split("\n");
	var inner = "";
	for(var i in titleLines) {
		inner += "<div>"+titleLines[i]+"</div>\n";
	}
//	alert(inner);
	title.innerHTML = inner;

//	alert(titleText);
//	titleText = titleText.replace(/\n+/gi, "\r\n");
//	title.innerHTML = titleText;
//	title.textContent = titleText;

	lightbox_center();
}

function lightbox_showLoader() {
//	if(this.getAttribute("timeoutId")) {
		var border = document.getElementById('lightbox_border');
		var loader = document.getElementById('lightbox_loader');
		loader.style.display = "block";
		border.style.display = "none";
//	}
}

function lightbox_hideLoader() {
//	var border = document.getElementById('lightbox_border');
	var loader = document.getElementById('lightbox_loader');
//	var loaderBg = document.getElementById('lightbox_loaderBg');
	loader.style.display = "none";
//	border.style.display = "block";
//	loaderBg.style.display = "none";
}

// helper functions
function lightbox_next()
{
	lightbox_gotoimg(eval(parseInt(document.getElementById('lightbox_front').getAttribute('lightbox_index')) + 1));
}
function lightbox_prev()
{
	lightbox_gotoimg(eval(parseInt(document.getElementById('lightbox_front').getAttribute('lightbox_index')) - 1));
}

// pitää lightboxin keskellä ruutua ja elementtien koot oikeina
function lightbox_center() {
	lightbox_centerStuff();
	lightbox_centerStuff(); // don't ask...
}

function lightbox_centerStuff() {
	var back = document.getElementById('lightbox_back');
	var fade = document.getElementById('lightbox_fade');
	var close = document.getElementById('lightbox_close');
	var title = document.getElementById('lightbox_title');
	var front = document.getElementById('lightbox_front');
	var border = document.getElementById('lightbox_border');
	var next = document.getElementById('lightbox_next');
	var prev = document.getElementById('lightbox_prev');
	var loaderBg = document.getElementById('lightbox_loaderBg');
//	var loader = document.getElementById('lightbox_loader');

	// pidetään harmaa tausta koko dokumentit korkuisena
//	var docHeight = document.body.scrollHeight;
	var docHeight = document.body.scrollHeight;
	if(!docHeight) docHeight = document.body.offsetHeight;
	fade.style.height = docHeight;

	prev.style.top = (front.offsetHeight + 15)+"px";
	next.style.top = (front.offsetHeight + 15)+"px";
	prev.style.left = 10;
	next.style.left = 10 + front.offsetWidth;

	title.style.width = front.offsetWidth - prev.offsetWidth - next.offsetWidth - 120;
	title.style.left = "50%";
	title.style.marginLeft = -(title.offsetWidth/2);

	var backWidth = front.offsetWidth + 20;
	back.style.width = backWidth;

	var btnHeight = 30;
	if(prev.currentStyle) {
		btnHeight = parseInt(prev.currentStyle.height);
	} else if(window.getComputedStyle) {
		btnHeight = parseInt(document.defaultView.getComputedStyle(prev,null).getPropertyValue("height"));
	}

	var backMinHeight = front.offsetHeight + 20 + btnHeight;
	var backHeight = front.offsetHeight + 20 + title.offsetHeight;
	if(backHeight < backMinHeight) backHeight = backMinHeight;

//	var backHeight = front.offsetHeight + prev.offsetHeight + 20;
	back.style.height = backHeight;


//	close.style.top = back.offsetHeight - close.offsetHeight;

	var xPosition = (document.body.clientWidth) / 2 - backWidth / 2;
	var yPosition = (document.body.clientHeight) / 2 - backHeight / 2;
	back.style.left = xPosition + document.body.scrollLeft;
	back.style.top = yPosition + document.body.scrollTop;

//	loaderBg.style.left = "50%";
//	loaderBg.style.top = "50%";
//	loader.style.left = "50%";
//	loader.style.top = "50%";

//	close.top = 0;
//	close.left = xPosition + document.body.scrollLeft + back.offsetWidth;
}

function lightbox_setBorderSize(width, height) {
	var border = document.getElementById('lightbox_border');
	var front = document.getElementById('lightbox_front');
	var close = document.getElementById('lightbox_close');

	border.style.display = "block";
	border.style.left = parseInt(front.offsetWidth / 2 - width/2)-1;
	border.style.top = parseInt(front.offsetHeight / 2 - height/2)-1;
	border.style.width = width;
	border.style.height = height;

	close.style.display = "block";
	close.style.top = "50%";
	close.style.left = "50%";
	close.style.marginLeft = width/2 - close.offsetWidth;
	close.style.marginTop = -(height/2);
}