﻿window.onload = function () {
    //Setup
    ResizeBackgroundImage();
}

$(window).resize(function () {
    ResizeBackgroundImage();
});

//*
//*  BACKGROUND IMAGE
//****************************************************

function ResizeBackgroundImage() {
    var bgImg = $('#bgImg');

    var imgW = bgImg.width();
    var imgH = bgImg.height();

    $('#debug').html('<span style="color:#FFFFFF;margin-left:100px;">Image: ' + imgW + ' x ' + imgH + '<br />Screen: ' + $(window).width() + ' x ' + $(window).height() + '</span>');

    var newVal = 0;
    if (($(window).width() / $(window).height()) > (imgW / imgH)) {
        // It's wider
        newVal = (($(window).width() * imgH) / imgW);
        bgImg.css({ width: $(window).width() + 'px', height: newVal + 'px', marginTop: (($(window).height() - newVal) / 2) + 'px', marginLeft: '0px' });
    } else {
        // It's taller
        newVal = (($(window).height() * imgW) / imgH);
        bgImg.css({ height: $(window).height() + 'px', width: newVal + 'px', marginTop: '0px', marginLeft: (($(window).width() - newVal) / 2) + 'px' });
    }
}

