/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

var cntW = 280;
var cntH = 280;
var cntPadding = 10;
var cntBorder = 1;
var mainW;
var mainH;
var mainBorder = 1;
var frmW;
var frmH;
var frmBorder = 15;
var mntBorder = 1;

//setBoxSizes();

function setBoxSizes() {
    try {
        mainW = cntW - (2 * cntPadding) - (2 * cntBorder);
        mainH = cntH - (2 * cntPadding) - (2 * cntBorder);
        frmW = mainW - (mainBorder * 2);
        frmH = mainH - (mainBorder * 2);
        return true;
    }
    
    catch(err){
        alert(err.description);
        return false;
    }
        
}


function changeVisualSize() {
    try {
        var mainBox = $('boxMain');
        var mntBox = $('boxMount');
        var frmBox = $('boxFrame');
        var fH = $('product_Height').value;
        var fW = $('product_Width').value;
        var mH = $('height_input').value;
        var mW = $('width_input').value;
        var mntW, mntH;
        var cRatio;
        var mB;
        
        setBoxSizes();

        $('boxContainer').style.width = cntW - cntPadding + "px"; // frmW + (frmBorder * 2) + "px";
        $('boxContainer').style.height = cntH + "px"; //frmH + (frmBorder * 2) + "px";
        //$('boxContainer').style.left = (pxStrToNum($('full_width').style.width)-mainW) + "px"; //(970 - (frmW + (frmBorder * 2))) + 'px';
        $('boxContainer').style.left = "600px";
        $('boxContainer').style.borderStyle = "none";
        $('boxContainer').style.borderWidth = cntBorder + "px";
        $('boxContainer').style.borderColor = "orange";

        mainBox.style.width = (mainW - cntPadding) + "px"; // frmW + (frmBorder * 2) + "px";
        mainBox.style.height = (mainH - cntPadding + 4) + "px"; //frmH + (frmBorder * 2) + "px";
        mainBox.style.margin = "auto";
        mainBox.style.borderStyle = "none";
        mainBox.style.borderColor = "Green";
        mainBox.style.borderWidth = mainBorder + "px";
        
        cRatio = getRatio()


        if (fH == undefined || toInt(fH) == 0)
            fH = frmH;

        if (fW == undefined || toInt(fW) == 0)
            fW = frmW;

        mntBox.style.borderStyle = "none";
        mntBox.style.borderColor = "LightGrey";
        mntBox.style.borderWidth = "1px";

        frmBox.style.borderWidth = frmBorder.toString() + "px";
        frmBox.style.width = Math.floor(((fW * cRatio)) - 6).toString() + "px";
        frmBox.style.height = Math.floor(((fH * cRatio)) - 6).toString() + "px";
        frmBox.style.borderStyle = "outset";

        if (mW != undefined && toInt(mW) != 0){
            mntW = toInt(mW);
            mB = Math.floor(((fW - mntW) * cRatio) / 2);

            mntBox.style.width = (pxStrToNum(frmBox.style.width) - (2 * frmBorder) - 2).toString() + "px";
            mntBox.style.borderLeftWidth = (mB).toString() + "px";
            mntBox.style.borderRightWidth = (mB).toString() + "px";
            mntBox.style.borderRightStyle = "solid";
            mntBox.style.borderLeftStyle = "solid";
            setMountColour();
        }

        if (mH != undefined && toInt(mH) != 0){
            mntH = toInt(mH);
            mB = Math.floor(((fH - mntH) * cRatio) / 2);

            mntBox.style.height = (pxStrToNum(frmBox.style.height) - (2 * frmBorder) - 2).toString() + "px";
            mntBox.style.borderTopWidth = (mB).toString() + "px";
            mntBox.style.borderBottomWidth = (mB).toString() + "px";
            mntBox.style.borderTopStyle = "solid";
            mntBox.style.borderBottomStyle = "solid";
            setMountColour();
        }

        return true;
    }
    
    catch(err){
        alert(err.description);
        return false;
    }

}

function pxStrToNum(aStr) {
    if (Math.abs(aStr.slice(0, aStr.indexOf("px",0))) > 0){
        return Math.abs(aStr.slice(0, aStr.indexOf("px",0)));
    }
    else{
        return 0;
    }
}

function getRatio(){
    var fH, fW, vrH, vrW;

    fH = $('product_Height').value;
    fW = $('product_Width').value;
    
    if (isNaN(fH) || fH <= 0)
        fH = fW; // frmH;
    
    if (isNaN(fW) || fW <= 0)
        fW = fH; //frmW;
    

    vrH = frmH / fH;
    vrW = frmW / fW;

    if (vrW < vrH) {
        return vrW;

    }else if (vrH == Infinity || vrH == 0) {
        return 1;
        
    }else {
        return vrH;
        
    }
    
}

function showmsg(arrMsg){
    var arrCount = arrMsg.length;
    var aStr = "";

    for (var i=0; i<arrCount; i++ ) {
        if (((i/2) != Math.round(i/2)) && i > 0){
            aStr += (": = " + arrMsg[i] + "\n");
        }else {
            aStr += arrMsg[i];
        }
    }
    
    alert(aStr);
    return true;
}

function toInt(aVal){
    if (isNaN(parseInt(aVal))){
        return 0;
    }

    return parseInt(aVal);
}

function setMountColour(){
    var xi, xColour;
    var xM=$('MountColors');
    var mntBox = $('boxMount');
    
    xColour = "Black";
    
    if (xM != undefined && mntBox != undefined){
        xi = xM.selectedIndex;
        xColour = xM.getElementsByTagName("option")[xi].innerHTML.replace(/ /g,"");
        xColour = (xColour == '') ? 'Black' : xColour;
        mntBox.style.borderColor = xColour;

    }
    
    return true;
}