var areaHeight;
var imageHeight = 832;
var imageWidth = 1250;

$(document).ready(function () {
    areaHeight = $('#main-doc-area').height();
    $('#background').height(areaHeight);
    var areaWidth = $(window).width();
    setImageSize(areaWidth);
    setImagePosition(areaWidth);
    setBackgroundDivWidth(areaWidth);
});

$(window).resize(function () {
    var areaWidth = $(window).width();
    setImageSize(areaWidth);
    setImagePosition(areaWidth);
    setBackgroundDivWidth(areaWidth);
});

function setImageSize(areaWidth) {
    if (areaWidth <= 950) {
        areaWidth = 950;
    }
    if (areaWidth > imageWidth * (areaHeight / imageHeight)) {
        $('#background-img').width(areaWidth);
        $('#background-img').height(imageHeight * (areaWidth / imageWidth));
    } else {
        $('#background-img').width(imageWidth * (areaHeight / imageHeight));
        $('#background-img').height(areaHeight);
    }
}

function setImagePosition(areaWidth) {
    if (areaWidth <= 950) {
        areaWidth = 950;
    }
    $('#background-img').css('left', (areaWidth / 2) - ($('#background-img').width() / 2));
    $('#background-img').css('top', (areaHeight / 2) - ($('#background-img').height() / 2));
}

function setBackgroundDivWidth(areaWidth) {
    if (areaWidth <= 950) {
        $('#background').width(950);
        $('#gradient').width(950);
    } else {
        $('#background').width('100%');
        $('#gradient').width('100%');
    }
}

function removeText(id) {
    var element = document.getElementById(id);
    if (element.value == "Search") {
        element.value = "";
    }
}

function addText(id) {
    var element = document.getElementById(id);
    if (element.value == "") {
        element.value = "Search";
    }
}