//****************************************
// BOMComponentClass
//****************************************
function BOMComponentItem() {
    this.itemName;
    this.quantity;
    this.length;
}
function BOMComponent() {
    this.name;
    this.model;
    this.sku;
    this.required;
    this.partDescription;
    this.items = new Array();
    this.itemCount;
    this.details;
    this.imageURL;
    this.index; // Index of position in BOMComponentList
}
function BOMComponentList() {
    this.componentList = new Array();
    this.componentsCount;
}

//****************************************
// Globals
//****************************************  
  
var minHorizontalTiles = 1;
var maxHorizontalTiles = 1024;
var minVerticalTiles = 1;
var maxVerticalTiles = 1024;
var tileWidthImperial = 1.33858;
var tileHeightImperial = 1.00393;
var tileWidthMetric = 0.408;
var tileHeightMetric = 0.306;
var horizontalRes = 720;
var verticalRes = 540;
var totalResolution = horizontalRes * verticalRes;
var minHorizontalPixelsPerTile = 32;
var bandwidthPerEcu = 165;
var verticalBlankingInterval = 0.20;
var tileWeight = 9.2;
var maxBrightness = 100;
var minBrightness = 0;
var bitmapWidth = 500;
var maxTilesPerEcu = 1024;
var disabledColor = '#d3d3d3';
var enabledColor = '#ffffff';
var TilesW;
var TilesH;
var TilesCount;
var EcuCount;
var TilesPerEcu;
var VideoRefreshRate;
var PhysResP;
var MaxContResP;
var EnergyConsBrightness;
var EnergyConsDraw;
var OffTiles;
var state = new Array();
for (var i = 0; i < 32; i++) {
    state[i] = new Array();
}
for (var j = 0; j < 32; j++) {
    for (var k = 0; k < 32; k++) {
        state[j][k] = null;
    }
}
var BOMCList = new BOMComponentList();

//****************************************
// Onload
//****************************************
var browserName = navigator.appName;
var userAgent = navigator.userAgent;
// Internet Explorer
if (browserName == "Microsoft Internet Explorer") {
    onload = function() {
        TilesW = 1;
        TilesH = 1;
        TilesCount = 1;
        EcuCount = 1;
        TilesPerEcu = 16;
        VideoRefreshRate = 60;
        PhysResP = 0;
        MaxContResP = 0;
        EnergyConsBrightness = 50;
        EnergyConsDraw = EnergyConsBrightness > 0 ? 25 + (75 * EnergyConsBrightness / maxBrightness) : 25;
        var TBNumMtW = document.getElementById('TBNumMtW');
        var TBNumMtH = document.getElementById('TBNumMtH');
        var TBNumMtT = document.getElementById('TBNumMtT');
        var TBNumMtC = document.getElementById('TBNumMtC');
        var TBOccAreaW = document.getElementById('TBOccAreaW');
        var TBOccAreaH = document.getElementById('TBOccAreaH');
        var TBOccAreaT = document.getElementById('TBOccAreaT');
        var TBPhysResW = document.getElementById('TBPhysResW');
        var TBPhysResH = document.getElementById('TBPhysResH');
        var TBPhysResT = document.getElementById('TBPhysResT');
        var TBPhysResP = document.getElementById('TBPhysResP');
        var TBMaxContResW = document.getElementById('TBMaxContResW');
        var TBMaxContResH = document.getElementById('TBMaxContResH');
        var TBMaxContResT = document.getElementById('TBMaxContResT');
        var TBMaxContResP = document.getElementById('TBMaxContResP');
        var TBScalingW = document.getElementById('TBScalingW');
        var TBScalingH = document.getElementById('TBScalingH');
        var TBScalingT = document.getElementById('TBScalingT');
        var TBWeightPerMt = document.getElementById('TBWeightPerMt');
        var TBWeightInstallationKg = document.getElementById('TBWeightInstallationKg');
        var TBWeightInstallationTonnes = document.getElementById('TBWeightInstallationTonnes');
        var TBEnergyConsPerMt = document.getElementById('TBEnergyConsPerMt');
        var TBEnergyConsInstallWatts = document.getElementById('TBEnergyConsInstallWatts');
        var TBEnergyConsInstallkW = document.getElementById('TBEnergyConsInstallkW');
        var TBEnergyConsInstallBTUs = document.getElementById('TBEnergyConsInstallBTUs');

        TBNumMtW.removeAttribute('readOnly');
        TBNumMtW.style.backgroundColor = enabledColor;
        TBNumMtH.removeAttribute('readOnly');
        TBNumMtH.style.backgroundColor = enabledColor;
        TBNumMtT.setAttribute('readOnly', true);
        TBNumMtT.style.backgroundColor = disabledColor;
        TBNumMtC.setAttribute('readOnly', true);
        TBNumMtC.style.backgroundColor = disabledColor;
        TBOccAreaW.setAttribute('readOnly', true);
        TBOccAreaW.style.backgroundColor = disabledColor;
        TBOccAreaH.setAttribute('readOnly', true);
        TBOccAreaH.style.backgroundColor = disabledColor;
        TBOccAreaT.setAttribute('readOnly', true);
        TBOccAreaT.style.backgroundColor = disabledColor;
        TBPhysResH.setAttribute('readOnly', true);
        TBPhysResH.style.backgroundColor = disabledColor;
        TBPhysResW.setAttribute('readOnly', true);
        TBPhysResW.style.backgroundColor = disabledColor;
        TBPhysResT.setAttribute('readOnly', true);
        TBPhysResT.style.backgroundColor = disabledColor;
        TBPhysResP.setAttribute('readOnly', true);
        TBPhysResP.style.backgroundColor = disabledColor;
        TBMaxContResW.setAttribute('readOnly', true);
        TBMaxContResW.style.backgroundColor = disabledColor;
        TBMaxContResH.setAttribute('readOnly', true);
        TBMaxContResH.style.backgroundColor = disabledColor;
        TBMaxContResT.setAttribute('readOnly', true);
        TBMaxContResT.style.backgroundColor = disabledColor;
        TBMaxContResP.setAttribute('readOnly', true);
        TBMaxContResP.style.backgroundColor = disabledColor;
        TBScalingW.setAttribute('readOnly', true);
        TBScalingW.style.backgroundColor = disabledColor;
        TBScalingH.setAttribute('readOnly', true);
        TBScalingH.style.backgroundColor = disabledColor;
        TBScalingT.setAttribute('readOnly', true);
        TBScalingT.style.backgroundColor = disabledColor;
        TBWeightPerMt.setAttribute('readOnly', true);
        TBWeightPerMt.style.backgroundColor = disabledColor;
        TBWeightInstallationKg.setAttribute('readOnly', true);
        TBWeightInstallationKg.style.backgroundColor = disabledColor;
        TBWeightInstallationTonnes.setAttribute('readOnly', true);
        TBWeightInstallationTonnes.style.backgroundColor = disabledColor;
        TBEnergyConsPerMt.setAttribute('readOnly', true);
        TBEnergyConsPerMt.style.backgroundColor = disabledColor;
        TBEnergyConsInstallWatts.setAttribute('readOnly', true);
        TBEnergyConsInstallWatts.style.backgroundColor = disabledColor;
        TBEnergyConsInstallkW.setAttribute('readOnly', true);
        TBEnergyConsInstallkW.style.backgroundColor = disabledColor;
        TBEnergyConsInstallBTUs.setAttribute('readOnly', true);
        TBEnergyConsInstallBTUs.style.backgroundColor = disabledColor;

        startXML();
        UpdateAll();
    }
}
// Firefox
else if (userAgent.indexOf("Firefox") != -1) {
    if (document.addEventListener) {
        document.addEventListener("DOMContentLoaded", function() {
            TilesW = 1;
            TilesH = 1;
            TilesCount = 1;
            EcuCount = 1;
            TilesPerEcu = 16;
            VideoRefreshRate = 60;
            PhysResP = 0;
            MaxContResP = 0;
            EnergyConsBrightness = 50;
            EnergyConsDraw = EnergyConsBrightness > 0 ? 25 + (75 * EnergyConsBrightness / maxBrightness) : 25;
            var TBNumMtW = document.getElementById('TBNumMtW');
            var TBNumMtH = document.getElementById('TBNumMtH');
            var TBNumMtT = document.getElementById('TBNumMtT');
            var TBNumMtC = document.getElementById('TBNumMtC');
            var TBOccAreaW = document.getElementById('TBOccAreaW');
            var TBOccAreaH = document.getElementById('TBOccAreaH');
            var TBOccAreaT = document.getElementById('TBOccAreaT');
            var TBPhysResW = document.getElementById('TBPhysResW');
            var TBPhysResH = document.getElementById('TBPhysResH');
            var TBPhysResT = document.getElementById('TBPhysResT');
            var TBPhysResP = document.getElementById('TBPhysResP');
            var TBMaxContResW = document.getElementById('TBMaxContResW');
            var TBMaxContResH = document.getElementById('TBMaxContResH');
            var TBMaxContResT = document.getElementById('TBMaxContResT');
            var TBMaxContResP = document.getElementById('TBMaxContResP');
            var TBScalingW = document.getElementById('TBScalingW');
            var TBScalingH = document.getElementById('TBScalingH');
            var TBScalingT = document.getElementById('TBScalingT');
            var TBWeightPerMt = document.getElementById('TBWeightPerMt');
            var TBWeightInstallationKg = document.getElementById('TBWeightInstallationKg');
            var TBWeightInstallationTonnes = document.getElementById('TBWeightInstallationTonnes');
            var TBEnergyConsPerMt = document.getElementById('TBEnergyConsPerMt');
            var TBEnergyConsInstallWatts = document.getElementById('TBEnergyConsInstallWatts');
            var TBEnergyConsInstallkW = document.getElementById('TBEnergyConsInstallkW');
            var TBEnergyConsInstallBTUs = document.getElementById('TBEnergyConsInstallBTUs');

            TBNumMtW.removeAttribute('readOnly');
            TBNumMtW.style.backgroundColor = enabledColor;
            TBNumMtH.removeAttribute('readOnly');
            TBNumMtH.style.backgroundColor = enabledColor;
            TBNumMtT.setAttribute('readOnly', true);
            TBNumMtT.style.backgroundColor = disabledColor;
            TBNumMtC.setAttribute('readOnly', true);
            TBNumMtC.style.backgroundColor = disabledColor;
            TBOccAreaW.setAttribute('readOnly', true);
            TBOccAreaW.style.backgroundColor = disabledColor;
            TBOccAreaH.setAttribute('readOnly', true);
            TBOccAreaH.style.backgroundColor = disabledColor;
            TBOccAreaT.setAttribute('readOnly', true);
            TBOccAreaT.style.backgroundColor = disabledColor;
            TBPhysResH.setAttribute('readOnly', true);
            TBPhysResH.style.backgroundColor = disabledColor;
            TBPhysResW.setAttribute('readOnly', true);
            TBPhysResW.style.backgroundColor = disabledColor;
            TBPhysResT.setAttribute('readOnly', true);
            TBPhysResT.style.backgroundColor = disabledColor;
            TBPhysResP.setAttribute('readOnly', true);
            TBPhysResP.style.backgroundColor = disabledColor;
            TBMaxContResW.setAttribute('readOnly', true);
            TBMaxContResW.style.backgroundColor = disabledColor;
            TBMaxContResH.setAttribute('readOnly', true);
            TBMaxContResH.style.backgroundColor = disabledColor;
            TBMaxContResT.setAttribute('readOnly', true);
            TBMaxContResT.style.backgroundColor = disabledColor;
            TBMaxContResP.setAttribute('readOnly', true);
            TBMaxContResP.style.backgroundColor = disabledColor;
            TBScalingW.setAttribute('readOnly', true);
            TBScalingW.style.backgroundColor = disabledColor;
            TBScalingH.setAttribute('readOnly', true);
            TBScalingH.style.backgroundColor = disabledColor;
            TBScalingT.setAttribute('readOnly', true);
            TBScalingT.style.backgroundColor = disabledColor;
            TBWeightPerMt.setAttribute('readOnly', true);
            TBWeightPerMt.style.backgroundColor = disabledColor;
            TBWeightInstallationKg.setAttribute('readOnly', true);
            TBWeightInstallationKg.style.backgroundColor = disabledColor;
            TBWeightInstallationTonnes.setAttribute('readOnly', true);
            TBWeightInstallationTonnes.style.backgroundColor = disabledColor;
            TBEnergyConsPerMt.setAttribute('readOnly', true);
            TBEnergyConsPerMt.style.backgroundColor = disabledColor;
            TBEnergyConsInstallWatts.setAttribute('readOnly', true);
            TBEnergyConsInstallWatts.style.backgroundColor = disabledColor;
            TBEnergyConsInstallkW.setAttribute('readOnly', true);
            TBEnergyConsInstallkW.style.backgroundColor = disabledColor;
            TBEnergyConsInstallBTUs.setAttribute('readOnly', true);
            TBEnergyConsInstallBTUs.style.backgroundColor = disabledColor;

            startXML();
            readXML();
            UpdateAll();

        }, false);
    }
} 
// Google Chrome
else {
    onload = function() {
        TilesW = 1;
        TilesH = 1;
        TilesCount = 1;
        EcuCount = 1;
        TilesPerEcu = 16;
        VideoRefreshRate = 60;
        PhysResP = 0;
        MaxContResP = 0;
        EnergyConsBrightness = 50;
        EnergyConsDraw = EnergyConsBrightness > 0 ? 25 + (75 * EnergyConsBrightness / maxBrightness) : 25;
        var TBNumMtW = document.getElementById('TBNumMtW');
        var TBNumMtH = document.getElementById('TBNumMtH');
        var TBNumMtT = document.getElementById('TBNumMtT');
        var TBNumMtC = document.getElementById('TBNumMtC');
        var TBOccAreaW = document.getElementById('TBOccAreaW');
        var TBOccAreaH = document.getElementById('TBOccAreaH');
        var TBOccAreaT = document.getElementById('TBOccAreaT');
        var TBPhysResW = document.getElementById('TBPhysResW');
        var TBPhysResH = document.getElementById('TBPhysResH');
        var TBPhysResT = document.getElementById('TBPhysResT');
        var TBPhysResP = document.getElementById('TBPhysResP');
        var TBMaxContResW = document.getElementById('TBMaxContResW');
        var TBMaxContResH = document.getElementById('TBMaxContResH');
        var TBMaxContResT = document.getElementById('TBMaxContResT');
        var TBMaxContResP = document.getElementById('TBMaxContResP');
        var TBScalingW = document.getElementById('TBScalingW');
        var TBScalingH = document.getElementById('TBScalingH');
        var TBScalingT = document.getElementById('TBScalingT');
        var TBWeightPerMt = document.getElementById('TBWeightPerMt');
        var TBWeightInstallationKg = document.getElementById('TBWeightInstallationKg');
        var TBWeightInstallationTonnes = document.getElementById('TBWeightInstallationTonnes');
        var TBEnergyConsPerMt = document.getElementById('TBEnergyConsPerMt');
        var TBEnergyConsInstallWatts = document.getElementById('TBEnergyConsInstallWatts');
        var TBEnergyConsInstallkW = document.getElementById('TBEnergyConsInstallkW');
        var TBEnergyConsInstallBTUs = document.getElementById('TBEnergyConsInstallBTUs');

        TBNumMtW.removeAttribute('readOnly');
        TBNumMtW.style.backgroundColor = enabledColor;
        TBNumMtH.removeAttribute('readOnly');
        TBNumMtH.style.backgroundColor = enabledColor;
        TBNumMtT.setAttribute('readOnly', true);
        TBNumMtT.style.backgroundColor = disabledColor;
        TBNumMtC.setAttribute('readOnly', true);
        TBNumMtC.style.backgroundColor = disabledColor;
        TBOccAreaW.setAttribute('readOnly', true);
        TBOccAreaW.style.backgroundColor = disabledColor;
        TBOccAreaH.setAttribute('readOnly', true);
        TBOccAreaH.style.backgroundColor = disabledColor;
        TBOccAreaT.setAttribute('readOnly', true);
        TBOccAreaT.style.backgroundColor = disabledColor;
        TBPhysResH.setAttribute('readOnly', true);
        TBPhysResH.style.backgroundColor = disabledColor;
        TBPhysResW.setAttribute('readOnly', true);
        TBPhysResW.style.backgroundColor = disabledColor;
        TBPhysResT.setAttribute('readOnly', true);
        TBPhysResT.style.backgroundColor = disabledColor;
        TBPhysResP.setAttribute('readOnly', true);
        TBPhysResP.style.backgroundColor = disabledColor;
        TBMaxContResW.setAttribute('readOnly', true);
        TBMaxContResW.style.backgroundColor = disabledColor;
        TBMaxContResH.setAttribute('readOnly', true);
        TBMaxContResH.style.backgroundColor = disabledColor;
        TBMaxContResT.setAttribute('readOnly', true);
        TBMaxContResT.style.backgroundColor = disabledColor;
        TBMaxContResP.setAttribute('readOnly', true);
        TBMaxContResP.style.backgroundColor = disabledColor;
        TBScalingW.setAttribute('readOnly', true);
        TBScalingW.style.backgroundColor = disabledColor;
        TBScalingH.setAttribute('readOnly', true);
        TBScalingH.style.backgroundColor = disabledColor;
        TBScalingT.setAttribute('readOnly', true);
        TBScalingT.style.backgroundColor = disabledColor;
        TBWeightPerMt.setAttribute('readOnly', true);
        TBWeightPerMt.style.backgroundColor = disabledColor;
        TBWeightInstallationKg.setAttribute('readOnly', true);
        TBWeightInstallationKg.style.backgroundColor = disabledColor;
        TBWeightInstallationTonnes.setAttribute('readOnly', true);
        TBWeightInstallationTonnes.style.backgroundColor = disabledColor;
        TBEnergyConsPerMt.setAttribute('readOnly', true);
        TBEnergyConsPerMt.style.backgroundColor = disabledColor;
        TBEnergyConsInstallWatts.setAttribute('readOnly', true);
        TBEnergyConsInstallWatts.style.backgroundColor = disabledColor;
        TBEnergyConsInstallkW.setAttribute('readOnly', true);
        TBEnergyConsInstallkW.style.backgroundColor = disabledColor;
        TBEnergyConsInstallBTUs.setAttribute('readOnly', true);
        TBEnergyConsInstallBTUs.style.backgroundColor = disabledColor;

        startXML();
        readXML();
        UpdateAll();
    }
}

//****************************************
// Utils
//****************************************
// Used to allow only integers inputs in textboxes
function isInt(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}
// Used to format integers
function addCommas(nStr) {
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}
// Used to set value in range of a min and max
function setInRange(newValue, minValue, maxValue) {
    var assignValue;
    assignValue = newValue > maxValue ? maxValue : newValue;
    assignValue = newValue < minValue ? minValue : assignValue;
    return parseInt(assignValue);
}
// Used to get rounded number
function getRounded(num, den) {
    if (den == 0 || num == 0) {
        return 0;
    }
    var fRounded = num / den;
    var nRounded = Math.ceil(fRounded);
    if (nRounded < 1) {
        return 1;
    }
    return parseInt(nRounded);
}
function getTile(h, w) {
    if (document.getElementById(h + "," + w)) {
        return document.getElementById(h + "," + w);
    }
    return null;
}
function isTileOn(tile) {
    if (tile) {
        if (tile.style.backgroundColor == "transparent") {
            return true;
        }
    }
    return false;
}
function OffTilesCount(w, h) {
    var temp;
    var count = 0;
    var width = w;
    var height = h;
    if (w < 33 && h < 33) {
        for (var i = 0; i < width; i++) {
            for (var j = 0; j < height; j++) {
                if (state[j][i] == null) {
                    return 0;
                }
                if (state[j][i] == 0) {
                    count++;
                }
            }
        }
    }
    return count;
}
function UpdateAll() {
    UpdateDimensionsControl();
    UpdateWeightControl();
    UpdateArrayControl();
    UpdateECUControl();
    UpdateBrightnessControl();
    UpdateImageControl();
    UpdateBomControl();
}   
 
//****************************************
// Tooltip
//****************************************
var tooltip = function() {
    var id = 'tt';
    var top = 3;
    var left = 3;
    var maxw = 300;
    var speed = 10;
    var timer = 20;
    var endalpha = 80;
    var alpha = 0;
    var tt, t, c, b, h;
    var ie = document.all ? true : false;
    return {
        show: function(v, w) {
            if (tt == null) {
                tt = document.createElement('div');
                tt.setAttribute('id', id);
                t = document.createElement('div');
                t.setAttribute('id', id + 'top');
                c = document.createElement('div');
                c.setAttribute('id', id + 'cont');
                b = document.createElement('div');
                b.setAttribute('id', id + 'bot');
                tt.appendChild(t);
                tt.appendChild(c);
                tt.appendChild(b);
                document.body.appendChild(tt);
                tt.style.opacity = 0;
                tt.style.filter = 'alpha(opacity=0)';
                document.onmousemove = this.pos;
            }
            tt.style.display = 'block';
            c.innerHTML = v.innerHTML;
            tt.style.width = w ? w + 'px' : 'auto';
            if (!w && ie) {
                t.style.display = 'none';
                b.style.display = 'none';
                tt.style.width = tt.offsetWidth;
                t.style.display = 'block';
                b.style.display = 'block';
            }
            if (tt.offsetWidth > maxw) { tt.style.width = maxw + 'px' }
            h = parseInt(tt.offsetHeight) + top;
            clearInterval(tt.timer);
            tt.timer = setInterval(function() { tooltip.fade(1) }, timer);
        },
        pos: function(e) {
            var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
            var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
            tt.style.top = (u - h) + 'px';
            tt.style.left = (l + left) + 'px';
        },
        fade: function(d) {
            var a = alpha;
            if ((a != endalpha && d == 1) || (a != 0 && d == -1)) {
                var i = speed;
                if (endalpha - a < speed && d == 1) {
                    i = endalpha - a;
                } else if (alpha < speed && d == -1) {
                    i = a;
                }
                alpha = a + (i * d);
                tt.style.opacity = alpha * .01;
                tt.style.filter = 'alpha(opacity=' + alpha + ')';
            } else {
                clearInterval(tt.timer);
                if (d == -1) { tt.style.display = 'none' }
            }
        },
        hide: function() {
            clearInterval(tt.timer);
            tt.timer = setInterval(function() { tooltip.fade(-1) }, timer);
        }
    };
} ();   

//****************************************
// Image Control
//****************************************
// Updates only the background image
function UpdateImageControl() {
    var PanelImg = document.getElementById('PanelImg');
    PanelImg.style.backgroundImage = 'url(images/designer/Splash_Screen_05102009.png)';
    var PanelImgLabel = document.getElementById('PanelImgLabel');
    PanelImgLabel.innerText = "Note: The MicroTiles online calculator can be used for displays up to 32 tiles wide and high. To configure larger displays, please download the MicroTiles Designer software.";
    PanelImgLabel.textContent = "Note: The MicroTiles online calculator can be used for displays up to 32 tiles wide and high. To configure larger displays, please download the MicroTiles Designer software.";
    var PanelImgLabel2 = document.getElementById('PanelImgLabel2');
    if (TilesW < 33 && TilesH < 33) {
        PanelImgLabel2.style.color = 'Blue';
        PanelImgLabel2.innerText = "Select tiles to remove them from the display.";
        PanelImgLabel2.textContent = "Select tiles to remove them from the display.";
    }
    else {
        PanelImgLabel2.style.color = 'Red';
        PanelImgLabel2.innerText = "To create non-standard shapes with large displays, use the design canvas in MicroTiles Designer.";
        PanelImgLabel2.textContent = "To create non-standard shapes with large displays, use the design canvas in MicroTiles Designer.";
    }
}

//****************************************
// Dimensions Control
//****************************************
// Updates Dimension controls
function UpdateDimensionsControl() {
    var TBNumMtW = document.getElementById('TBNumMtW');
    var TBNumMtH = document.getElementById('TBNumMtH');
    var TBNumMtT = document.getElementById('TBNumMtT');
    var TBNumMtC = document.getElementById('TBNumMtC');
    var TBOccAreaW = document.getElementById('TBOccAreaW');
    var TBOccAreaH = document.getElementById('TBOccAreaH');
    var TBOccAreaT = document.getElementById('TBOccAreaT');
    var TBPhysResW = document.getElementById('TBPhysResW');
    var TBPhysResH = document.getElementById('TBPhysResH');
    var TBPhysResT = document.getElementById('TBPhysResT');
    var TBPhysResP = document.getElementById('TBPhysResP');
    var TBMaxContResW = document.getElementById('TBMaxContResW');
    var TBMaxContResH = document.getElementById('TBMaxContResH');
    var TBMaxContResT = document.getElementById('TBMaxContResT');
    var TBMaxContResP = document.getElementById('TBMaxContResP');
    var TBScalingW = document.getElementById('TBScalingW');
    var TBScalingH = document.getElementById('TBScalingH');
    var TBScalingT = document.getElementById('TBScalingT');    
    var DDLMeasureUnit = document.getElementById('DDLMeasureUnit');
    var ecuCount = EcuCount;
    var videoRefreshRate = VideoRefreshRate;
    var numMtW = TilesW;
    var numMtH = TilesH;
    var numMtT, numMtC;
    var occAreaMetricW, occAreaMetricH, occAreaMetricT, occAreaImperialW, occAreaImperialH, occAreaImperialT;
    var physResW, physResH, physResT, physResP, totalAreaMetric;
    var maxContResW, maxContResH, maxContResT, minContResW, width, ecuResolution, minResolution, maxContResP, root;
    var scalingW, scalingH, scalingT;

    // Number of MicroTiles Calculations
    numMtT = numMtW * numMtH;
    numMtC = TilesCount;
    TBNumMtW.value = addCommas(numMtW);
    TBNumMtH.value = addCommas(numMtH);
    TBNumMtT.value = addCommas(numMtT);
    TBNumMtC.value = addCommas(numMtC);    
    
    // Occupied Area Calculations
    occAreaImperialW = numMtW * tileWidthImperial;
    occAreaImperialH = numMtH * tileHeightImperial;
    occAreaImperialT = occAreaImperialW * occAreaImperialH;
    occAreaMetricW = numMtW * tileWidthMetric;
    occAreaMetricH = numMtH * tileHeightMetric;
    occAreaMetricT = occAreaMetricW * occAreaMetricH;
    if (DDLMeasureUnit.options[DDLMeasureUnit.options.selectedIndex].value == "Meters")
    {
        TBOccAreaW.value = addCommas(occAreaMetricW.toFixed(3));
        TBOccAreaH.value = addCommas(occAreaMetricH.toFixed(3));
        TBOccAreaT.value = addCommas(occAreaMetricT.toFixed(3));
    }
    else if (DDLMeasureUnit.options[DDLMeasureUnit.options.selectedIndex].value == "Feet")
    {
        TBOccAreaW.value = addCommas(occAreaImperialW.toFixed(3));
        TBOccAreaH.value = addCommas(occAreaImperialH.toFixed(3));
        TBOccAreaT.value = addCommas(occAreaImperialT.toFixed(3));
    } 
            
    // Physical Resolution Calculations
    totalAreaMetric = occAreaMetricT;
    physResW = numMtW * horizontalRes;
    physResH = numMtH * verticalRes;
    physResT = physResW * physResH;
    physResP = Math.sqrt(totalAreaMetric) * 1000000 / (Math.sqrt(physResT * 1000000));
    PhysResP = physResP;
    TBPhysResW.value = addCommas(physResW.toFixed(0));
    TBPhysResH.value = addCommas(physResH.toFixed(0));
    TBPhysResT.value = addCommas(physResT.toFixed(0));
    TBPhysResP.value = addCommas(physResP.toFixed(3));
    
    // Maximum Content Resolution Calculations
    minContResW = numMtW * minHorizontalPixelsPerTile;
    width = tileWidthMetric * 1000 * numMtW;
    root = Math.sqrt((bandwidthPerEcu * 1000000 * ecuCount) / ((1 + verticalBlankingInterval) * (videoRefreshRate * numMtW * 4 * numMtH * 3)));
    ecuResolution = numMtW * 4 * root;
    minResolution = ecuResolution > totalResolution ? totalResolution : ecuResolution;    
    maxContResW = minResolution > minContResW ? minResolution : minContResW;
    maxContResH = maxContResW * numMtH / numMtW * 0.75;
    if (TilesCount < 5) {
        maxContResH = numMtH * verticalRes;
        maxContResW = numMtW * horizontalRes;
    }
    maxContResT = maxContResW * maxContResH;
    maxContResP = width / maxContResW;
    MaxContResP = maxContResP;
    TBMaxContResW.value = addCommas(maxContResW.toFixed(0));
    TBMaxContResH.value = addCommas(maxContResH.toFixed(0));
    TBMaxContResT.value = addCommas(maxContResT.toFixed(0));
    TBMaxContResP.value = addCommas(maxContResP.toFixed(3));
    
    // Scaling Calculations
    scalingW = (numMtW * horizontalRes) / maxContResW;
    scalingH = (numMtH * verticalRes) / maxContResH;
    scalingT = physResT / maxContResT;
    TBScalingW.value = addCommas(scalingW.toFixed(3));
    TBScalingH.value = addCommas(scalingH.toFixed(3));
    TBScalingT.value = addCommas(scalingT.toFixed(3));
}
function RBNumMT_CheckedChanged() {      
    var TBNumMtW = document.getElementById('TBNumMtW');
    var TBNumMtH = document.getElementById('TBNumMtH');
    var TBNumMtT = document.getElementById('TBNumMtT');
    var TBOccAreaW = document.getElementById('TBOccAreaW');
    var TBOccAreaH = document.getElementById('TBOccAreaH');
    var TBOccAreaT = document.getElementById('TBOccAreaT');
    var TBPhysResW = document.getElementById('TBPhysResW');
    var TBPhysResH = document.getElementById('TBPhysResH');
    var TBPhysResT = document.getElementById('TBPhysResT');
    var TBPhysResP = document.getElementById('TBPhysResP');
    var TBMaxContResW = document.getElementById('TBMaxContResW');
    var TBMaxContResH = document.getElementById('TBMaxContResH');
    var TBMaxContResT = document.getElementById('TBMaxContResT');
    var TBMaxContResP = document.getElementById('TBMaxContResP');
    var TBScalingW = document.getElementById('TBScalingW');
    var TBScalingH = document.getElementById('TBScalingH');
    var TBScalingT = document.getElementById('TBScalingT');

    TBNumMtW.removeAttribute('readOnly');
    TBNumMtW.style.backgroundColor = enabledColor;
    TBNumMtH.removeAttribute('readOnly');
    TBNumMtH.style.backgroundColor = enabledColor;
    TBNumMtT.setAttribute('readOnly', true);
    TBNumMtT.style.backgroundColor = disabledColor;
    TBOccAreaW.setAttribute('readOnly', true);
    TBOccAreaW.style.backgroundColor = disabledColor;
    TBOccAreaH.setAttribute('readOnly', true);
    TBOccAreaH.style.backgroundColor = disabledColor;
    TBOccAreaT.setAttribute('readOnly', true);
    TBOccAreaT.style.backgroundColor = disabledColor;
    TBPhysResH.setAttribute('readOnly', true);
    TBPhysResH.style.backgroundColor = disabledColor;
    TBPhysResW.setAttribute('readOnly', true);
    TBPhysResW.style.backgroundColor = disabledColor;
    TBPhysResT.setAttribute('readOnly', true);
    TBPhysResT.style.backgroundColor = disabledColor;
    TBPhysResP.setAttribute('readOnly', true);
    TBPhysResP.style.backgroundColor = disabledColor;
    TBMaxContResW.setAttribute('readOnly', true);
    TBMaxContResW.style.backgroundColor = disabledColor;
    TBMaxContResH.setAttribute('readOnly', true);
    TBMaxContResH.style.backgroundColor = disabledColor;
    TBMaxContResT.setAttribute('readOnly', true);
    TBMaxContResT.style.backgroundColor = disabledColor;
    TBMaxContResP.setAttribute('readOnly', true);
    TBMaxContResP.style.backgroundColor = disabledColor;
    TBScalingW.setAttribute('readOnly', true);
    TBScalingW.style.backgroundColor = disabledColor;
    TBScalingH.setAttribute('readOnly', true);
    TBScalingH.style.backgroundColor = disabledColor;
    TBScalingT.setAttribute('readOnly', true);
    TBScalingT.style.backgroundColor = disabledColor;
}
function RBOccArea_CheckedChanged() {
    var TBNumMtW = document.getElementById('TBNumMtW');
    var TBNumMtH = document.getElementById('TBNumMtH');
    var TBNumMtT = document.getElementById('TBNumMtT');
    var TBOccAreaW = document.getElementById('TBOccAreaW');
    var TBOccAreaH = document.getElementById('TBOccAreaH');
    var TBOccAreaT = document.getElementById('TBOccAreaT');
    var TBPhysResW = document.getElementById('TBPhysResW');
    var TBPhysResH = document.getElementById('TBPhysResH');
    var TBPhysResT = document.getElementById('TBPhysResT');
    var TBPhysResP = document.getElementById('TBPhysResP');
    var TBMaxContResW = document.getElementById('TBMaxContResW');
    var TBMaxContResH = document.getElementById('TBMaxContResH');
    var TBMaxContResT = document.getElementById('TBMaxContResT');
    var TBMaxContResP = document.getElementById('TBMaxContResP');
    var TBScalingW = document.getElementById('TBScalingW');
    var TBScalingH = document.getElementById('TBScalingH');
    var TBScalingT = document.getElementById('TBScalingT');

    TBNumMtW.setAttribute('readOnly', true);
    TBNumMtW.style.backgroundColor = disabledColor;
    TBNumMtH.setAttribute('readOnly', true);
    TBNumMtH.style.backgroundColor = disabledColor;
    TBNumMtT.setAttribute('readOnly', true);
    TBNumMtT.style.backgroundColor = disabledColor;
    TBOccAreaW.removeAttribute('readOnly');
    TBOccAreaW.style.backgroundColor = enabledColor;
    TBOccAreaH.removeAttribute('readOnly');
    TBOccAreaH.style.backgroundColor = enabledColor;
    TBOccAreaT.setAttribute('readOnly', true);
    TBOccAreaT.style.backgroundColor = disabledColor;
    TBPhysResH.setAttribute('readOnly', true);
    TBPhysResH.style.backgroundColor = disabledColor;
    TBPhysResW.setAttribute('readOnly', true);
    TBPhysResW.style.backgroundColor = disabledColor;
    TBPhysResT.setAttribute('readOnly', true);
    TBPhysResT.style.backgroundColor = disabledColor;
    TBPhysResP.setAttribute('readOnly', true);
    TBPhysResP.style.backgroundColor = disabledColor;
    TBMaxContResW.setAttribute('readOnly', true);
    TBMaxContResW.style.backgroundColor = disabledColor;
    TBMaxContResH.setAttribute('readOnly', true);
    TBMaxContResH.style.backgroundColor = disabledColor;
    TBMaxContResT.setAttribute('readOnly', true);
    TBMaxContResT.style.backgroundColor = disabledColor;
    TBMaxContResP.setAttribute('readOnly', true);
    TBMaxContResP.style.backgroundColor = disabledColor;
    TBScalingW.setAttribute('readOnly', true);
    TBScalingW.style.backgroundColor = disabledColor;
    TBScalingH.setAttribute('readOnly', true);
    TBScalingH.style.backgroundColor = disabledColor;
    TBScalingT.setAttribute('readOnly', true);
    TBScalingT.style.backgroundColor = disabledColor;
}
function RBPhysRes_CheckedChanged() {
    var TBNumMtW = document.getElementById('TBNumMtW');
    var TBNumMtH = document.getElementById('TBNumMtH');
    var TBNumMtT = document.getElementById('TBNumMtT');
    var TBOccAreaW = document.getElementById('TBOccAreaW');
    var TBOccAreaH = document.getElementById('TBOccAreaH');
    var TBOccAreaT = document.getElementById('TBOccAreaT');
    var TBPhysResW = document.getElementById('TBPhysResW');
    var TBPhysResH = document.getElementById('TBPhysResH');
    var TBPhysResT = document.getElementById('TBPhysResT');
    var TBPhysResP = document.getElementById('TBPhysResP');
    var TBMaxContResW = document.getElementById('TBMaxContResW');
    var TBMaxContResH = document.getElementById('TBMaxContResH');
    var TBMaxContResT = document.getElementById('TBMaxContResT');
    var TBMaxContResP = document.getElementById('TBMaxContResP');
    var TBScalingW = document.getElementById('TBScalingW');
    var TBScalingH = document.getElementById('TBScalingH');
    var TBScalingT = document.getElementById('TBScalingT');

    TBNumMtW.setAttribute('readOnly', true);
    TBNumMtW.style.backgroundColor = disabledColor;
    TBNumMtH.setAttribute('readOnly', true);
    TBNumMtH.style.backgroundColor = disabledColor;
    TBNumMtT.setAttribute('readOnly', true);
    TBNumMtT.style.backgroundColor = disabledColor;
    TBOccAreaW.setAttribute('readOnly', true);
    TBOccAreaW.style.backgroundColor = disabledColor;
    TBOccAreaH.setAttribute('readOnly', true);
    TBOccAreaH.style.backgroundColor = disabledColor;
    TBOccAreaT.setAttribute('readOnly', true);
    TBOccAreaT.style.backgroundColor = disabledColor;
    TBPhysResH.removeAttribute('readOnly');
    TBPhysResH.style.backgroundColor = enabledColor;
    TBPhysResW.removeAttribute('readOnly');
    TBPhysResW.style.backgroundColor = enabledColor;
    TBPhysResT.setAttribute('readOnly', true);
    TBPhysResT.style.backgroundColor = disabledColor;
    TBPhysResP.setAttribute('readOnly', true);
    TBPhysResP.style.backgroundColor = disabledColor;
    TBMaxContResW.setAttribute('readOnly', true);
    TBMaxContResW.style.backgroundColor = disabledColor;
    TBMaxContResH.setAttribute('readOnly', true);
    TBMaxContResH.style.backgroundColor = disabledColor;
    TBMaxContResT.setAttribute('readOnly', true);
    TBMaxContResT.style.backgroundColor = disabledColor;
    TBMaxContResP.setAttribute('readOnly', true);
    TBMaxContResP.style.backgroundColor = disabledColor;
    TBScalingW.setAttribute('readOnly', true);
    TBScalingW.style.backgroundColor = disabledColor;
    TBScalingH.setAttribute('readOnly', true);
    TBScalingH.style.backgroundColor = disabledColor;
    TBScalingT.setAttribute('readOnly', true);
    TBScalingT.style.backgroundColor = disabledColor;
}
function TBNumMtW_TextChanged() {
    TilesW = document.getElementById('TBNumMtW').value;
    TilesW = setInRange(TilesW, minHorizontalTiles, maxHorizontalTiles);
    UpdateArrayControl();
    OffTiles = OffTilesCount(TilesW, TilesH);
    TilesCount = (TilesW * TilesH) - OffTiles;
    EcuCount = getRounded(TilesCount, TilesPerEcu);
    var maximumW = 1.7434 * TilesW + 50.413 < 1025 ? 1.7434 * TilesW + 50.413 : 1024;
    $("#tileW_slider").slider('option', 'max', Math.round(maximumW));
    $("#tileW_slider").slider('value', [TilesW]);
    UpdateDimensionsControl();
    UpdateWeightControl();
    UpdateECUControl();
    UpdateBrightnessControl();
    UpdateBomControl();
    UpdateImageControl();
}
function TBNumMtH_TextChanged() {
    TilesH = document.getElementById('TBNumMtH').value;
    TilesH = setInRange(TilesH, minVerticalTiles, maxVerticalTiles);
    UpdateArrayControl();
    OffTiles = OffTilesCount(TilesW, TilesH);
    TilesCount = (TilesW * TilesH) - OffTiles;
    EcuCount = getRounded(TilesCount, TilesPerEcu);
    var maximumH = 1.7434 * TilesH + 50.413 < 1025 ? -(1.7434 * TilesH + 50.413) : -1024;
    $("#tileH_slider").slider('option', 'min', Math.round(maximumH));
    $("#tileH_slider").slider('value', [-TilesH]);
    UpdateDimensionsControl();
    UpdateWeightControl();
    UpdateECUControl();
    UpdateBrightnessControl();
    UpdateBomControl();
    UpdateImageControl();
}
function TBOccAreaW_TextChanged() {
    var areaW = document.getElementById('TBOccAreaW').value;
    var DDLMeasureUnit = document.getElementById('DDLMeasureUnit');
    var measure = DDLMeasureUnit.options[DDLMeasureUnit.options.selectedIndex].value == "Feet" ? tileWidthImperial : tileWidthMetric;
    var nTiles = Math.floor(areaW / measure);
    TilesW = setInRange(nTiles, minHorizontalTiles, maxHorizontalTiles);
    UpdateArrayControl();
    OffTiles = OffTilesCount(TilesW, TilesH);
    TilesCount = (TilesW * TilesH) - OffTiles;
    EcuCount = getRounded(TilesCount, TilesPerEcu);
    var maximumW = 1.7434 * TilesW + 50.413 < 1025 ? 1.7434 * TilesW + 50.413 : 1024;
    $("#tileW_slider").slider('option', 'max', Math.round(maximumW));
    $("#tileW_slider").slider('value', [TilesW]);
    UpdateDimensionsControl();
    UpdateWeightControl();
    UpdateECUControl();
    UpdateBrightnessControl();
    UpdateBomControl();
    UpdateImageControl();
}
function TBOccAreaH_TextChanged() {
    var areaH = document.getElementById('TBOccAreaH').value;
    var DDLMeasureUnit = document.getElementById('DDLMeasureUnit');
    var measure = DDLMeasureUnit.options[DDLMeasureUnit.options.selectedIndex].value == "Feet" ? tileHeightImperial : tileHeightMetric;
    var nTiles = Math.floor(areaH / measure);
    TilesH = setInRange(nTiles, minVerticalTiles, maxVerticalTiles);
    UpdateArrayControl();
    OffTiles = OffTilesCount(TilesW, TilesH);
    TilesCount = (TilesW * TilesH) - OffTiles;
    EcuCount = getRounded(TilesCount, TilesPerEcu);
    var maximumH = 1.7434 * TilesH + 50.413 < 1025 ? -(1.7434 * TilesH + 50.413) : -1024;
    $("#tileH_slider").slider('option', 'min', Math.round(maximumH));
    $("#tileH_slider").slider('value', [-TilesH]);
    UpdateDimensionsControl();
    UpdateWeightControl();
    UpdateECUControl();
    UpdateBrightnessControl();
    UpdateBomControl();
    UpdateImageControl();
}
function TBPhysResW_TextChanged() {
    var resW = document.getElementById('TBPhysResW').value;
    var nTiles = Math.floor(resW / horizontalRes);
    TilesW = setInRange(nTiles, minHorizontalTiles, maxHorizontalTiles);
    UpdateArrayControl();
    OffTiles = OffTilesCount(TilesW, TilesH);
    TilesCount = (TilesW * TilesH) - OffTiles;
    EcuCount = getRounded(TilesCount, TilesPerEcu);
    var maximumW = 1.7434 * TilesW + 50.413 < 1025 ? 1.7434 * TilesW + 50.413 : 1024;
    $("#tileW_slider").slider('option', 'max', Math.round(maximumW));
    $("#tileW_slider").slider('value', [TilesW]);
    UpdateDimensionsControl();
    UpdateWeightControl();
    UpdateECUControl();
    UpdateBrightnessControl();
    UpdateBomControl();
    UpdateImageControl();
}
function TBPhysResH_TextChanged() {
    var resH = document.getElementById('TBPhysResH').value;
    var nTiles = Math.floor(resH / verticalRes);
    TilesH = setInRange(nTiles, minVerticalTiles, maxVerticalTiles);
    UpdateArrayControl();
    OffTiles = OffTilesCount(TilesW, TilesH);
    TilesCount = (TilesW * TilesH) - OffTiles;
    EcuCount = getRounded(TilesCount, TilesPerEcu);
    var maximumH = 1.7434 * TilesH + 50.413 < 1025 ? -(1.7434 * TilesH + 50.413) : -1024;
    $("#tileH_slider").slider('option', 'min', Math.round(maximumH));
    $("#tileH_slider").slider('value', [-TilesH]);
    UpdateDimensionsControl();
    UpdateWeightControl();
    UpdateECUControl();
    UpdateBrightnessControl();
    UpdateBomControl();
    UpdateImageControl();
}
function DDLMeasureUnit_SelectedIndexChanged() {
    UpdateAll();
}

//****************************************
// Weight Control
//****************************************
function UpdateWeightControl() {
    var TBWeightPerMt = document.getElementById('TBWeightPerMt');
    var TBWeightInstallationKg = document.getElementById('TBWeightInstallationKg');
    var TBWeightInstallationTonnes = document.getElementById('TBWeightInstallationTonnes');
    var installationKg = tileWeight * TilesCount;
    var installationTonees = installationKg / 1000;

    TBWeightPerMt.value = addCommas(tileWeight.toFixed(2));
    TBWeightInstallationKg.value = addCommas(installationKg.toFixed(2));
    TBWeightInstallationTonnes.value = addCommas(installationTonees.toFixed(2));        
}

//****************************************
// Tile Array Control
//****************************************
function UpdateArrayControl() {
    var numRows = parseInt(TilesH);
    var numCells = parseInt(TilesW);
    var tiles = numCells > numRows ? numCells : numRows;
    var tileWidth = bitmapWidth / tiles;
    var tileHeight = tileWidth * 0.75;
    var tableWidth = Math.round(numCells * tileWidth);
    var tableHeight = Math.round(numRows * tileHeight);

    if (numCells > numRows) {
        tableWidth = bitmapWidth;
    }
    if (numRows > numCells) {
        tableHeight = bitmapWidth * 0.75;
    }
    if (numRows == numCells) {
        tableWidth = bitmapWidth;
        tableHeight = bitmapWidth * 0.75;
    }

    var panel = document.getElementById('PanelImg');
    panel.style.width = tableWidth < 1 ? '1px' : tableWidth + 'px';
    panel.style.height = tableHeight < 1 ? '1px' : tableHeight + 'px';

    createTiles(numCells, numRows, (tableWidth), (tableHeight));
}
$(document).ready(function() {
    $("#tileW_slider").slider({
        animate: 'slow',
        min: 1,
        max: 1024,
        value: 1,
        start: function(e, ui) {
            var TBNumMtW = document.getElementById('TBNumMtW');
            TBNumMtW.value = ui.value;
            var maximumW = 1.7434 * ui.value + 50.413 < 1025 ? 1.7434 * ui.value + 50.413 : 1024;
            $("#tileW_slider").slider('option', 'max', Math.round(maximumW));
        },
        stop: function(e, ui) {
            TilesW = ui.value;
            OffTiles = OffTilesCount(TilesW, TilesH);
            TilesCount = (TilesW * TilesH) - OffTiles;
            EcuCount = getRounded(TilesCount, TilesPerEcu);
            UpdateAll();
        },
        slide: function(e, ui) {
            var TBNumMtW = document.getElementById('TBNumMtW');
            TBNumMtW.value = ui.value;
            var maximumW = 1.7434 * ui.value + 50.413 < 1025 ? 1.7434 * ui.value + 50.413 : 1024;
            $("#tileW_slider").slider('option', 'max', Math.round(maximumW));
        },
        change: function(e, ui) {
            var TBNumMtW = document.getElementById('TBNumMtW');
            TBNumMtW.value = ui.value;
            var maximumW = 1.7434 * ui.value + 50.413 < 1025 ? 1.7434 * ui.value + 50.413 : 1024;
            $("#tileW_slider").slider('option', 'max', Math.round(maximumW));
        },
        step: 1
    });
});
$(document).ready(function() {
    $("#tileH_slider").slider({
        animate: "slow",
        min: -1024,
        max: -1,
        value: -1,
        orientation: 'vertical',
        start: function (e, ui) {
            var TBNumMtH = document.getElementById('TBNumMtH');
            TBNumMtH.value = -ui.value;
            var maximumH = 1.7434 * -ui.value + 50.413 < 1025 ? -(1.7434 * -ui.value + 50.413) : -1024;
            $("#tileH_slider").slider('option', 'min', Math.round(maximumH));
        },
        stop: function(e, ui) {
            //TilesH = (1025 - ui.value);
            TilesH = -ui.value;
            OffTiles = OffTilesCount(TilesW, TilesH);
            TilesCount = (TilesW * TilesH) - OffTiles;
            EcuCount = getRounded(TilesCount, TilesPerEcu);
            UpdateAll();
        },
        slide: function(e, ui) {
            var TBNumMtH = document.getElementById('TBNumMtH');
            TBNumMtH.value = -ui.value;
            var maximumH = 1.7434 * -ui.value + 50.413 < 1025 ? -(1.7434 * -ui.value + 50.413) : -1024;
            $("#tileH_slider").slider('option', 'min', Math.round(maximumH));
        },
        step: 1
    });
});
function createDiv(id, width, height, left, top) {
    var newdiv = document.createElement('div')
    var idsplit = id.split(',');
    newdiv.setAttribute('runat', "server");
    newdiv.setAttribute('id', id);
    newdiv.style.display = "inline";
    newdiv.style.width = (width) + "px";
    newdiv.style.height = (height) + "px";
    newdiv.style.position = "absolute";
    newdiv.style.left = left + "px";
    newdiv.style.top = top + "px";
    newdiv.style.borderLeft = "1px solid gray";
    newdiv.style.borderTop = "1px solid gray";
    if (idsplit[1] == TilesW - 1) {
        newdiv.style.borderRight = "1px solid gray";
    }
    if (idsplit[0] == TilesH - 1) {
        newdiv.style.borderBottom = "1px solid gray";
    }
    
    if (state[idsplit[0]][idsplit[1]] == null || state[idsplit[0]][idsplit[1]] == 1) {
        newdiv.style.backgroundColor = "transparent";
        state[idsplit[0]][idsplit[1]] = 1;
    }
    else if (state[idsplit[0]][idsplit[1]] == 0) {
        newdiv.style.backgroundColor = "white";
        state[idsplit[0]][idsplit[1]] = 0;
    }
    newdiv.style.color = "white";
    newdiv.onclick = function() {
        divOnOff(id);
    }
    document.getElementById('TileArrayDiv').appendChild(newdiv);
}
function createTiles(cols, rows, w, h) {
    document.getElementById('TileArrayDiv').innerHTML = '';
    var x, y = 0;
    var width = w / cols;
    var height = h / rows;
    var id = 0;
    var outerDiv = document.getElementById('TileArrayDiv');
    var panelImg = document.getElementById('PanelImg');
    outerDiv.style.width = w + 'px';
    outerDiv.style.height = h + 'px';
    if (cols < 33 && rows < 33) {
        for (var i = 0; i < cols; i++) {
            for (var j = 0; j < rows; j++) {
                id = j.toString() + "," + i.toString();
                x = width * i;
                y = height * j;
                createDiv(id, width, height, x, y);
            }
        }
    }
}
function divOnOff(id) {
    var div = document.getElementById(id);
    var idsplit = id.split(',');
    if (div.style.backgroundColor == "white") {
        div.style.backgroundColor = "transparent";
        state[idsplit[0]][idsplit[1]] = 1;
        OffTiles = OffTilesCount(TilesW, TilesH);
        TilesCount = (TilesW * TilesH) - OffTiles;
        UpdateECUControl();
        UpdateDimensionsControl();
        UpdateWeightControl();
        UpdateBrightnessControl();
        UpdateBomControl();
        UpdateImageControl();
    }
    else if (div.style.backgroundColor == "transparent") {
        div.style.backgroundColor = "white";
        state[idsplit[0]][idsplit[1]] = 0;
        OffTiles = OffTilesCount(TilesW, TilesH);
        TilesCount = (TilesW * TilesH) - OffTiles;
        if (TilesCount != 0) {
            UpdateDimensionsControl();
            UpdateECUControl();
            UpdateWeightControl();
            UpdateBrightnessControl();
            UpdateBomControl();
            UpdateImageControl();
        }
        else {
            div.style.backgroundColor = "transparent";
            state[idsplit[0]][idsplit[1]] = 1;
            OffTiles = OffTilesCount(TilesW, TilesH);
            TilesCount = (TilesW * TilesH) - OffTiles;
        }
    }
}

//****************************************
// ECU Control
//****************************************
function UpdateECUControl() {
    var LabelEcu = document.getElementById('LabelEcu');
    var ImageECUIcon = document.getElementById('ImageECUIcon');
    var TBEcuNumCont = document.getElementById('TBEcuNumCont');
    var TBEcuMtPerCont = document.getElementById('TBEcuMtPerCont');

    if (PhysResP == MaxContResP) {
        LabelEcu.style.visibility = "hidden";
        ImageECUIcon.style.visibility = "hidden";
    }
    else if (PhysResP < MaxContResP) {
        LabelEcu.style.visibility = "visible";
        ImageECUIcon.style.visibility = "visible";
        LabelEcu.style.color = 'Blue';
        LabelEcu.innerText = "Add external controllers to increase content resolution and reduce upscaling.";
        LabelEcu.textContent = "Add external controllers to increase content resolution and reduce upscaling.";
        ImageECUIcon.src = "images/designer/tick.ico";
    }
    else if (PhysResP > MaxContResP) {
        LabelEcu.style.visibility = "visible";
        ImageECUIcon.style.visibility = "visible";
        LabelEcu.disabled = false;
        ImageECUIcon.disabled = false;
        LabelEcu.style.color = 'Red';
        LabelEcu.innerText = "For best results, the Maximum Content Resolution should be less than the Physical Resolution.";
        LabelEcu.textContent = "For best results, the Maximum Content Resolution should be less than the Physical Resolution.";
        ImageECUIcon.src = "images/designer/warning.ico";
    }
    EcuCount = getRounded(TilesCount, TilesPerEcu);

    TBEcuNumCont.value = addCommas(EcuCount);
    TBEcuMtPerCont.value = addCommas(TilesPerEcu);
}
function TBEcuNumCont_TextChanged() {
    var ecuCount = document.getElementById('TBEcuNumCont').value;
    EcuCount = ecuCount;
    if (EcuCount > 0) {
        TilesPerEcu = getRounded(TilesCount, EcuCount);
        TilesPerEcu = setInRange(TilesPerEcu, 1, maxTilesPerEcu);
    }
    else {
        TilesPerEcu = 4;
    }
    UpdateAll();
}
function TBEcuMtPerCont_TextChanged() {
    var tilesPerEcu = document.getElementById('TBEcuMtPerCont').value;
    TilesPerEcu = tilesPerEcu;
    TilesPerEcu = setInRange(TilesPerEcu, 1, maxTilesPerEcu);
    EcuCount = getRounded(TilesCount, TilesPerEcu);
    UpdateAll();
}

//****************************************
// Brightness Control
//****************************************
function UpdateBrightnessControl() {
    var TBEnergyConsPerMt = document.getElementById('TBEnergyConsPerMt');
    var TBEnergyConsInstallWatts = document.getElementById('TBEnergyConsInstallWatts');
    var TBEnergyConsInstallkW = document.getElementById('TBEnergyConsInstallkW');
    var TBEnergyConsInstallBTUs = document.getElementById('TBEnergyConsInstallBTUs');
    var energyBrightness, energyTileDraw, energyDrawWatts, energyDrawKW, energyDrawBTUs;
    var brightness_percentage = $('#brightness_slider').slider('option', 'value');
    EnergyConsBrightness = (1050 * brightness_percentage / 100) + 400;
    EnergyConsDraw = -0.000000000105367622599053000000 * Math.pow(EnergyConsBrightness, 4) +
                        0.000000321334693928338000000000 * Math.pow(EnergyConsBrightness, 3) -
                        0.000303240701416610000000000000 * Math.pow(EnergyConsBrightness, 2) +
                        0.165539724889175000000000000000 * Math.pow(EnergyConsBrightness, 1) -
                        5.044266433381190000000000000000;

    energyTileDraw = EnergyConsDraw;
    energyDrawWatts = energyTileDraw * TilesCount;
    energyDrawKW = energyDrawWatts / 1000;
    energyDrawBTUs = energyDrawWatts * 3.413;

    TBEnergyConsPerMt.value = addCommas(energyTileDraw.toFixed(0));
    TBEnergyConsInstallWatts.value = addCommas(energyDrawWatts.toFixed(0));
    TBEnergyConsInstallkW.value = addCommas(energyDrawKW.toFixed(2));
    TBEnergyConsInstallBTUs.value = addCommas(energyDrawBTUs.toFixed(2));
}
$(document).ready(function() {
    $('#brightness_textbox').text("50%");
    $("#brightness_slider").slider({
        animate: "slow",
        min: 0,
        max: 100,
        value: 50,
        slide: function(e, ui) {
            $('#brightness_textbox').text(ui.value + "%");
            var TBEnergyConsPerMt = document.getElementById('TBEnergyConsPerMt');
            var TBEnergyConsInstallWatts = document.getElementById('TBEnergyConsInstallWatts');
            var TBEnergyConsInstallkW = document.getElementById('TBEnergyConsInstallkW');
            var TBEnergyConsInstallBTUs = document.getElementById('TBEnergyConsInstallBTUs');
            EnergyConsBrightness = (1050 * ui.value / 100) + 400;
            EnergyConsDraw = -0.000000000105367622599053000000 * Math.pow(EnergyConsBrightness, 4) +
                        0.000000321334693928338000000000 * Math.pow(EnergyConsBrightness, 3) -
                        0.000303240701416610000000000000 * Math.pow(EnergyConsBrightness, 2) +
                        0.165539724889175000000000000000 * Math.pow(EnergyConsBrightness, 1) -
                        5.044266433381190000000000000000;

            TBEnergyConsPerMt.value = addCommas(EnergyConsDraw.toFixed(0));
            TBEnergyConsInstallWatts.value = addCommas((EnergyConsDraw * TilesCount).toFixed(0));
            TBEnergyConsInstallkW.value = addCommas((EnergyConsDraw * TilesCount / 1000).toFixed(2));
            TBEnergyConsInstallBTUs.value = addCommas((EnergyConsDraw * TilesCount * 3.413).toFixed(2));
        },
        step: 1
    });
});

//****************************************
// BOM Control
//****************************************
function UpdateBomControl() {
    var displayUnitQ = TilesCount;
    var screenQ = TilesCount;
    var ecuQ = EcuCount;
    var userKitQ = TilesCount > 0 ? 1 : 0;
    var setupKitQ = Math.ceil(TilesCount / 9);
    var levelFeetEndQ = TilesCount > 0 ? 1 : 0;
    var reqCLF = CenterLevelFeetReq();
    var levelFeetCenterQ = (TilesW > 1 && reqCLF > 1) ? Math.ceil((reqCLF - 1) / 3) : 0;
    var mountBracketQ = TilesH > 5 ? Math.ceil((TilesCount - (5 * TilesW)) / 2) : 0;

    if (TilesCount < (TilesH * TilesW)) {
        levelFeetCenterQ = 0;
        levelFeetEndQ = 0;
        mountBracketQ = Math.ceil(TilesCount / 2);
    }

    var CBBOMEndFootKit = document.getElementById('CBBOMEndFootKit');
    var CBBOMCenterFeet = document.getElementById('CBBOMCenterFeet');
    var CBBOMMountBracket = document.getElementById('CBBOMMountBracket');
    if (CBBOMEndFootKit != null && CBBOMCenterFeet != null && CBBOMMountBracket != null) {

        CBBOMEndFootKit.checked = levelFeetEndQ > 0 ? true : false;
        CBBOMCenterFeet.checked = levelFeetCenterQ > 0 ? true : false;
        CBBOMMountBracket.checked = mountBracketQ > 0 ? true : false;
    }

    UpdateBOMCBControl();
}
function UpdateBOMCBControl() {
    var displayUnitQ = TilesCount;
    var screenQ = TilesCount;
    var ecuQ = EcuCount;
    var userKitQ = TilesCount > 0 ? 1 : 0;
    var setupKitQ = Math.ceil(TilesCount / 9);
    var levelFeetEndQ = TilesCount > 0 ? 1 : 0;
    var reqCLF = CenterLevelFeetReq();
    var levelFeetCenterQ = (TilesW > 1 && reqCLF > 1) ? Math.ceil((reqCLF - 1) / 3) : 0;
    var mountBracketQ = TilesH > 5 ? Math.ceil((TilesCount - (5 * TilesW)) / 2) : 0;

    if (TilesCount < (TilesH * TilesW)) {
        levelFeetCenterQ = 0;
        levelFeetEndQ = 0;
        mountBracketQ = Math.ceil(TilesCount / 2);
    }

    var CBBOMEndFootKit = document.getElementById('CBBOMEndFootKit');
    var CBBOMCenterFeet = document.getElementById('CBBOMCenterFeet');
    var CBBOMMountBracket = document.getElementById('CBBOMMountBracket');
    if (CBBOMEndFootKit != null && CBBOMCenterFeet != null && CBBOMMountBracket != null) {
        var TBBOMDisplayUnit = document.getElementById('TBBOMDisplayUnit');
        var CBBOMDisplayUnit = document.getElementById('CBBOMDisplayUnit');
        if (CBBOMDisplayUnit.checked) {
            TBBOMDisplayUnit.value = displayUnitQ;
            TBBOMDisplayUnit.disabled = false;
            TBBOMDisplayUnit.style.background = disabledColor;
        }
        else {
            TBBOMDisplayUnit.value = "";
            TBBOMDisplayUnit.disabled = true;
            TBBOMDisplayUnit.style.background = disabledColor;
        }

        var TBBOMScreen = document.getElementById('TBBOMScreen');
        var CBBOMScreen = document.getElementById('CBBOMScreen');
        if (CBBOMScreen.checked) {
            TBBOMScreen.value = screenQ;
            TBBOMScreen.disabled = false;
            TBBOMScreen.style.background = disabledColor;
        }
        else {
            TBBOMScreen.value = "";
            TBBOMScreen.disabled = true;
            TBBOMScreen.style.background = disabledColor;
        }

        var TBBOMECU = document.getElementById('TBBOMECU');
        var CBBOMECU = document.getElementById('CBBOMECU');
        if (CBBOMECU.checked) {
            TBBOMECU.value = ecuQ;
            TBBOMECU.disabled = false;
            TBBOMECU.style.background = disabledColor;
        }
        else {
            TBBOMECU.value = "";
            TBBOMECU.disabled = true;
            TBBOMECU.style.background = disabledColor;
        }

        var TBBOMUserKit = document.getElementById('TBBOMUserKit');
        var CBBOMUserKit = document.getElementById('CBBOMUserKit');
        if (CBBOMUserKit.checked) {
            TBBOMUserKit.value = userKitQ;
            TBBOMUserKit.disabled = false;
            TBBOMUserKit.style.background = disabledColor;
        }
        else {
            TBBOMUserKit.value = "";
            TBBOMUserKit.disabled = true;
            TBBOMUserKit.style.background = disabledColor;
        }

        var TBBOMSetupKit = document.getElementById('TBBOMSetupKit');
        var CBBOMSetupKit = document.getElementById('CBBOMSetupKit');
        if (CBBOMSetupKit.checked) {
            TBBOMSetupKit.value = setupKitQ;
            TBBOMSetupKit.disabled = false;
            TBBOMSetupKit.style.background = disabledColor;
        }
        else {
            TBBOMSetupKit.value = "";
            TBBOMSetupKit.disabled = true;
            TBBOMSetupKit.style.background = disabledColor;
        }

        var TBBOMEndFootKit = document.getElementById('TBBOMEndFootKit');
        var CBBOMEndFootKit = document.getElementById('CBBOMEndFootKit');
        if (CBBOMEndFootKit.checked) {
            TBBOMEndFootKit.value = levelFeetEndQ;
            TBBOMEndFootKit.disabled = false;
            TBBOMEndFootKit.style.background = disabledColor;
        }
        else {
            TBBOMEndFootKit.value = "";
            TBBOMEndFootKit.disabled = true;
            TBBOMEndFootKit.style.background = disabledColor;
        }

        var TBBOMCenterFeet = document.getElementById('TBBOMCenterFeet');
        var CBBOMCenterFeet = document.getElementById('CBBOMCenterFeet');
        if (CBBOMCenterFeet.checked) {
            TBBOMCenterFeet.value = levelFeetCenterQ;
            TBBOMCenterFeet.disabled = false;
            TBBOMCenterFeet.style.background = disabledColor;
        }
        else {
            TBBOMCenterFeet.value = "";
            TBBOMCenterFeet.disabled = true;
            TBBOMCenterFeet.style.background = disabledColor;
        }

        var TBBOMMountBracket = document.getElementById('TBBOMMountBracket');
        var CBBOMMountBracket = document.getElementById('CBBOMMountBracket');
        if (CBBOMMountBracket.checked) {
            TBBOMMountBracket.value = mountBracketQ;
            TBBOMMountBracket.disabled = false;
            TBBOMMountBracket.style.background = disabledColor;
        }
        else {
            TBBOMMountBracket.value = "";
            TBBOMMountBracket.disabled = true;
            TBBOMMountBracket.style.background = disabledColor;
        }
    } 
}
function CenterLevelFeetReq() {
    var counter = 0;
    for (var i = 0; i < TilesW; i++) {
        var temp = getTile(TilesH - 1, i);
        if (isTileOn(temp)) {
            counter++;
        }    
    }
    return counter;
}
function startXML() {
    if (document.implementation && document.implementation.createDocument) {
        var xmlhttp = new window.XMLHttpRequest();
        xmlhttp.open("GET", "BOM.xml", false);
        xmlhttp.send(null);
        xmlDoc = xmlhttp.responseXML;
    }
    else if (window.ActiveXObject) {
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.onreadystatechange = function() {
            if (xmlDoc.readyState == 4) {
                readXML();           
            }
        }
        xmlDoc.load("BOM.xml");     
    }
}
function readXML() {
    //alert('1');
    var counter = 0;
    var itemCounter = 0;
    BOMCList.componentsCount = 0;
    var notWhitespace = /\S/;
    initBOMTable();

    var x = xmlDoc.documentElement.childNodes;
    for (var i = 0; i < x.length; i++) {
        if (x[i].nodeType == 1) {
            itemCounter = 0;
            var bomC = new BOMComponent();                    
            bomC.name = x[i].attributes.getNamedItem("Name").nodeValue;
            bomC.model = x[i].attributes.getNamedItem("Model").nodeValue;
            bomC.sku = x[i].attributes.getNamedItem("SKU").nodeValue;
            bomC.required = x[i].attributes.getNamedItem("Required").nodeValue == "1" ? true : false;
            bomC.partDescription = x[i].attributes.getNamedItem("PartDescription").nodeValue;
            bomC.details = x[i].attributes.getNamedItem("Details").nodeValue;
            bomC.imageURL = x[i].attributes.getNamedItem("ImageURL").nodeValue;

            y = x[i].firstChild;

            for (var j = 0; j < x[i].childNodes.length; j++) {
                if (y.nodeType == 1 && y.nodeName == "mt:Items") {
                    z = x[i].childNodes[j].firstChild;
                    for (var k = 0; k < x[i].childNodes[j].childNodes.length; k++) {
                        if (z.nodeType == 1) {
                            itemCounter++;
                            var bomCItem = new BOMComponentItem();
                            bomCItem.itemName = z.attributes.getNamedItem("Name").nodeValue;
                            bomCItem.quantity = z.attributes.getNamedItem("Quantity").nodeValue;
                            if (z.attributes.getNamedItem("Length") != null) {
                                bomCItem.length = z.attributes.getNamedItem("Length").nodeValue;
                            }
                            bomC.items.push(bomCItem);
                            bomCItem = null;
                        }
                        z = z.nextSibling;
                    }
                }
                y = y.nextSibling;
            }
            bomC.itemCount = itemCounter;
            counter++;
            bomC.index = counter;
            BOMCList.componentList.push(bomC);
            BOMCList.componentsCount++;
            insertBOMItem(bomC, counter);
            bomC = null;
        }
    }
    UpdateBomControl();
}
function initBOMTable() {
    var rootDiv = document.getElementById('divBOM');
    var tableBOM = document.createElement('table');
    var tableBody = document.createElement('tbody');
    tableBOM.className = "TableBOM";
    tableBOM.style.borderCollapse = "collapse";
    tableBOM.width = "100%";
    tableBody.id = "BOMtBody";

    var row = document.createElement('tr');
    row.style.fontWeight = 'bold';
    
    var PDcell = document.createElement('td');
    PDcell.style.border = "1px solid gray";
    PDcell.appendChild(document.createTextNode("Part Description"));
    PDcell.width = "30%";
    row.appendChild(PDcell);

    var SKUcell = document.createElement('td');
    SKUcell.style.border = "1px solid gray";
    SKUcell.appendChild(document.createTextNode("SKU"));
    SKUcell.width = "25%";
    row.appendChild(SKUcell);

    var Mcell = document.createElement('td');
    Mcell.style.border = "1px solid gray";
    Mcell.appendChild(document.createTextNode("Model"));
    Mcell.width = "25%";
    row.appendChild(Mcell);

    var Qcell = document.createElement('td');
    Qcell.style.border = "1px solid gray";
    Qcell.appendChild(document.createTextNode("Quantity"));
    Qcell.width = "20%";
    row.appendChild(Qcell);
    
    tableBody.appendChild(row);
    tableBOM.appendChild(tableBody);
    rootDiv.appendChild(tableBOM);
}
function insertBOMItem(c, counter) {
    var tableBody = document.getElementById('BOMtBody');

    var row = document.createElement('tr');
    if (counter % 2 == 1) {
        row.style.backgroundColor = "white";
        counter++;
    }
    else {
        row.style.backgroundColor = "#e3e3e3";
    }

    var PDcell = document.createElement('td');
    PDcell.style.border = "1px solid gray";
    var PDcb = document.createElement('input');
    PDcb.type = "checkbox"
    PDcb.id = "CBBOM" + c.name;
    PDcb.defaultChecked = c.required ? "selected" : null;
    PDcb.onclick = function() { UpdateBOMCBControl(); }
    PDcell.appendChild(PDcb);
    PDcell.appendChild(document.createTextNode(c.partDescription));

    var newLine = '<br/>';
    var tab = '&nbsp;';
    var TTrow = document.createElement('tr');
    var TTcDescript = document.createElement('td');
    TTcDescript.innerHTML += c.details + newLine + newLine + 'INCLUDES:' + newLine;
    for (var i = 0; i < c.itemCount; i++) {
        TTcDescript.innerHTML += tab + tab + c.items[i].itemName + ': ' + c.items[i].quantity;
        if (c.items[i].length != null) {
            TTcDescript.innerHTML += tab + tab + 'Length: ' + c.items[i].length;
        }
        TTcDescript.innerHTML += newLine;
    }
    TTrow.appendChild(TTcDescript);
    if (c.imageURL != "N/A") {
        var TTcImage = document.createElement('td');
        TTcImage.align = "center";
        var Img = document.createElement('img');
        Img.src = c.imageURL;
        Img.style.width = "150px";
        Img.style.height = "100px";
        TTcImage.appendChild(Img);
        TTrow.appendChild(TTcImage);
    }

    var PDicon = document.createElement('img');
    PDicon.id = "Icon" + c.name;
    PDicon.src = "images/designer/bubble.ico";
    PDicon.style.width = "10px";
    PDicon.style.height = "10px";
    PDicon.onmouseover = function() { tooltip.show(TTrow, 250); }
    PDicon.onmouseout = function() { tooltip.hide(); }
    PDcell.appendChild(PDicon);
     
    PDcell.width = "30%";
    row.appendChild(PDcell);

    var SKUcell = document.createElement('td');
    SKUcell.style.border = "1px solid gray";
    SKUcell.appendChild(document.createTextNode(c.sku));
    SKUcell.width = "25%";
    row.appendChild(SKUcell);

    var Mcell = document.createElement('td');
    Mcell.style.border = "1px solid gray";
    Mcell.appendChild(document.createTextNode(c.model));
    Mcell.width = "25%";
    row.appendChild(Mcell);

    var Qcell = document.createElement('td');
    Qcell.style.border = "1px solid gray";
    var Qtb = document.createElement('input');
    Qtb.type = "text";
    Qtb.setAttribute('readOnly', true);
    Qtb.style.backgroundColor = disabledColor;
    Qtb.id = "TBBOM" + c.name;
    Qtb.onkeypress = function() { return isInt(event); }
    Qtb.style.width = "75px";
    Qcell.appendChild(Qtb);
    Qcell.width = "20%";
    row.appendChild(Qcell);

    tableBody.appendChild(row);
}