var max_width = 400;
var max_height = 350;

// Blank image
var blank = new Image();
blank.src = 'images/design/blank.gif';

function showFoto(img, omschrijving) {
	var foto_src = document.getElementById('foto_src');
	if(isImageLoaded(img))
		foto_src.src = img.src;
	else
		foto_src.src = blank.src;
	foto_src.width = img.width;
	foto_src.height = img.height;
	// Geef de juiste breedte en hoogte
	if(img.height-max_height > img.width-max_width) {
		if(img.height > max_height) {
			foto_src.width = img.width * (max_height/img.height);
			foto_src.height = max_height;
		}
	} else {
		if(img.width > max_width) {
			foto_src.height = img.height * (max_width/img.width);
			foto_src.width = max_width;
		}
	}
	var foto_omschrijving = document.getElementById('foto_omschrijving');
	foto_omschrijving.innerHTML = omschrijving;
	var foto = document.getElementById('foto');
	foto.style.display = '';
}

function hideFoto() {
	var foto = document.getElementById('foto');
	foto.style.display = 'none';
}

function isImageLoaded(img) {
    // During the onload event, IE correctly identifies any images
    // that weren't downloaded as not complete. Others should too.
    // Gecko-based browsers act like NS4 in that they report this
    // incorrectly: they always return true.
    if (!img.complete) {
        return false;
    }

    // However, they do have two very useful properties: naturalWidth
    // and naturalHeight. These give the true size of the image. If
    // it failed to load, either of these should be zero.
    if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) {
        return false;
    }

    // No other way of checking: assume it's ok.
    return true;
}

// Background images
var image2 = new Image();
image2.src = 'images/design/bg2.png';
var image3 = new Image();
image3.src = 'images/design/bg3.png';

function showRoot3() {
	var root = document.getElementById('root2');
	//root.id = 'root3';
	root.style.backgroundImage = "url(images/design/bg3.png)";
	var tekst = document.getElementById('tekst');
	tekst.style.display = 'none';
	var tekst_scroll = document.getElementById('tekst_scroll');
	tekst_scroll.style.display = 'none';
}

function hideRoot3() {
	var root = document.getElementById('root2');
	//element.id = 'root2';
	root.style.backgroundImage = "url(images/design/bg2.png)";
	var tekst = document.getElementById('tekst');
	tekst.style.display = '';
	var tekst_scroll = document.getElementById('tekst_scroll');
	tekst_scroll.style.display = '';
}