$(function () {
    var db = document.body;
    var img = document.getElementById('holder').getElementsByTagName('img')[0];

    var dbsize = {}; //needed to store body size
    var imgsrc = img.src; //needed to store images src
    var keyStop = function (e) {
        var e = window.event || e || {};
        var tag = e.target.tagName.toLowerCase();
        if (tag != 'textarea' && !(tag == 'input' && (e.target.type == 'text' || e.target.type == 'password'))) {
            if (e.keyCode == 32 || e.keyCode == 39 || e.keyCode == 40) {
                if (e.preventDefault) e.preventDefault();
                else e.returnValue = false;
            }
        }
    }

    if (this.addEventListener) window.addEventListener('keydown', keyStop, false);
    else window.attachEvent('onkeydown', keyStop);

    resizeimage = function () {
        window.scrollTo(0, 0);
        if (img.complete) { //check if image has loaded

            $("#holder-image").show();
            $("#loading").hide();

            if (db.clientWidth != dbsize.w || db.clientHeight != dbsize.h || img.src != imgsrc) { //check if size or img size has changed
                imgsrc = img.src; //store current src
                dbsize.w = db.clientWidth; //store current body width
                dbsize.h = db.clientHeight; //store current body height

                var newwidth = Math.round(dbsize.h * (img.offsetWidth / img.offsetHeight)); //calculate new width based on height

                img.style.width = (dbsize.w > newwidth ? dbsize.w : newwidth) + 'px'; //use the largest value of body-width and newwidht
                //and this is the real trick: if there's no specified height, the height is automaticly calculated relative to the with
            }
        } else {
            setTimeout(resizeimage, 300);
        }
    };

    setTimeout(resizeimage, 300);
    $(window).bind("resize", function () {
        resizeimage();
    });
});