var large_source = ""
var small_source = ""
var xmlhttp

function imgInit() {
    small_source = document.getElementById("mainimg").src
    large_source = small_source.substr(0, small_source.length - 10) + "." + img_extension
}

/* If we've just reloaded another image, rescale it. */
function imgResize() {
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function(){if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
	document.getElementById("mainimg").height = xmlhttp.responseText.substr(0, xmlhttp.responseText.indexOf(" "));
        document.getElementById("mainimg").width = xmlhttp.responseText.substr(1 + xmlhttp.responseText.indexOf(" "));
}}

    xmlhttp.open("GET", "imginfo.php?imgname=" + document.getElementById("mainimg").src, true);
    xmlhttp.send(null);
}

/* Load the smaller image. */
function loadSmaller() {
    document.getElementById("mainimg").src = small_source
    imgResize();
    document.getElementById("smallerlink").style.display = "none"
    document.getElementById("largerlink").style.display = "inline"
}

/* Load the larger image. */
function loadLarger() {
    document.getElementById("mainimg").src = large_source
    imgResize();
    document.getElementById("largerlink").style.display = "none"
    document.getElementById("smallerlink").style.display = "inline"
}

/* Write out the links. */
document.write('<div class=centre><a style="display: none" id=smallerlink href="javascript:loadSmaller()">Load smaller image</a> <a id=largerlink href="javascript:loadLarger()">Load larger image</a></div>')