//*********************Globals

//The maximum screen resolution( all image widths are relative to this resolution (cannot change this) )
var maxS = 1920;
//The maximum image height( changes depending on backgound image height )
var maxH = 1280;
//An object associative array holding all scaled elements original dimensions, by id
var images = {};
//An object associative array holding all scaled elements original position, by id
var positions = {};

//main onload initializer calls all functions when window loaded
function initialize() {
    scale.alpha();                      //Get browser information
    scaleimages();                      //Resizes and positions all images
    window.onresize = scaleimages;      //Runs scaleimages on a resize
};
//Scales and positions the images according to screen resolution
function scaleimages() {

    scale.element("mainlogo");
    scale.position("smallred");
    scale.position("mainmenu");

}

//**********************Web Window Scaler Object
var scale = {

    //A browser checking function( will modify to detect alpha transparency ability)
    alpha: function() {
        var Safari = false;
        var Mozilla = false;
        var IE = false;
        var browser = window.navigator.vendor;
        if (browser) {
            Safari = browser.indexOf("Apple");
            if (Safari) {
                Safari = true;
                browser = "Safari";
            }
        }
        else if ((typeof (window.innerWidth) == 'number') && (!Safari)) {
            Mozilla = true;
            browser = "Mozilla";
        }
        else {
            IE = true;
            browser = "Explorer";
        }
        return browser;
    },
    // Function returns the available screen width
    width: function() {
        //The default screen dimensions
        var sW = 1000;
        if (scale.alpha() == "Mozilla") {
            sW = (window.innerWidth - 28);
        }
        else if (document.body && document.body.clientWidth) {
            sW = document.body.clientWidth;
        }
        else if (document.documentElement && document.documentElement.clientWidth) {
            sW = document.documentElement.clientWidth;
        }
        return sW;
    },
    // Function returns the available screen width
    height: function() {
        //The default screen dimensions
        var sH = 521;
        if (scale.alpha() == "Mozilla") {
            sH = (window.innerHeight - 14);
        }
        else if (document.body && document.body.clientHeight) {
            sH = document.body.clientHeight;
        }
        else if (document.documentElement && document.documentElement.clientHeight) {
            sH = document.documentElement.clientHeight;
        }
        return sH;
    },
    //Function scales an elements visual dimensions( saves old dimensions to array )
    element: function(id) {
        //Get images original width and height
        var elem = document.getElementById(id);
        if (elem.offsetWidth) elemW = elem.offsetWidth;
        if (elem.offsetHeight) elemH = elem.offsetHeight;
        //Set the original height and width to the images object, if not set
        if (!images[id + 'W']) {
            images[id + 'W'] = elemW.toString();
            images[id + 'H'] = elemH.toString();
        }
        //Scale it
        var oW = images[id + 'W'];
        var oH = images[id + 'H'];
        var newW = parseInt(oW / maxS * scale.width());
        var newH = parseInt(oH * newW / oW );
        //Set the images new width and height
        elem.style.width = newW.toString() + "px";
        elem.style.height = newH.toString() + "px";

        //Make it visible in case it is not
        elem.style.visibility = "visible";

    },
    //Function scales an elements position( saves original position to array )
    position: function(id) {
        //Get images original width and height
        var elem = document.getElementById(id);
        if (elem.offsetTop) elemTop = elem.offsetTop;
        if (elem.offsetLeft) elemLeft = elem.offsetLeft;
        //Set the original height and width to the images object, if not set
        if (!positions[id + 'T']) {
            positions[id + 'T'] = elemTop.toString();
            positions[id + 'L'] = elemLeft.toString();
        }
        //Scale it
        var oT = positions[id + 'T'];
        var oL = positions[id + 'L'];
        var newL = parseInt(oL / maxS * scale.width());
        var newT = parseInt(oT * newL / oL );
       //Set the images new width and height
        elem.style.top = newT.toString() + "px";
        elem.style.left = newL.toString() + "px";
    }
};

//Script all loaded so run it when the window is done loading
window.onload = initialize;