var smallWidthAC = 0
var smallWidthBD = 0
var smallHeight = 0
var largeWidth = 0
var largeHeight = 0
var currentSide = 1
var windowVertSpacer = 0
var aSideElements = new Array(5)
var currentWidthIndex = 0
var currentDepthIndex = 0
for (var i = 1; i < aSideElements.length; i++) {
    aSideElements[i] = new Array()
}
function setupWidthCombo() {
    var f = document.forms['frmBYO']
    var c = f.cboWidth
    c.options.length = 0
    if(aBasesW.length >= 0) {
        for(var i = 0; i < aBasesW.length; i++) {
            c.options.length++
            c.options[i].value = aBasesW[i][0]
            c.options[i].text = aBasesW[i][0] + '\''
        }
        widthComboChange()
    }
}
function widthComboChange() {
    var f = document.forms['frmBYO']
    var cW = f.cboWidth
    var cD = f.cboDepth
    var currentDepth = 0
    var elementsWidthA = 0
    var elementsWidthC = 0
    var largeWidth = cW.value * 20
    var aCurrentSideElements = aSideElements[1]
    if(aCurrentSideElements.length) {
        for(var i = 0; i < aCurrentSideElements.length; i++) {
            for(var j = 0; j < aElements.length; j++) {
                if(aCurrentSideElements[i] == aElements[j][0]) {
                    elementsWidthA += aElements[j][6] + 12
                    break;
                }
            }
        }
        if(elementsWidthA > largeWidth) {
            alert('You cannot change the width because you have have items on Side A that exceed it.')
            cW.selectedIndex = currentWidthIndex
            return false
        }
    }
    var aCurrentSideElements = aSideElements[3]
    if(aCurrentSideElements.length) {
        for(var i = 0; i < aCurrentSideElements.length; i++) {
            for(var j = 0; j < aElements.length; j++) {
                if(aCurrentSideElements[i] == aElements[j][0]) {
                    elementsWidthC += aElements[j][6] + 12
                    break;
                }
            }
        }
        if(elementsWidthC > largeWidth) {
            alert('You cannot change the width because you have have items on Side C that exceed it.')
            cW.selectedIndex = currentWidthIndex
            return false
        }
    }
    currentWidthIndex = cW.selectedIndex
    if(cD.selectedIndex >= 0) { currentDepth = cD.value }
    cD.options.length = 0
    if(aBasesW.length >= 0) {
        for(var i = 0; i < aBasesW.length; i++) {
            if(aBasesW[i][0] == cW.value) {
                var aD = aBasesW[i][1]
                for(var j = 0; j < aD.length; j++) {
                    cD.options.length++
                    cD.options[j].value = aD[j]
                    cD.options[j].text = aD[j] + '\''
                    if(aD[j] == currentDepth) { cD.selectedIndex = j }
                }
                break;
            }
        }
        drawSmallSides()
        drawLargeSide()
    }
    return true
}
function depthComboChange() {
    var f = document.forms['frmBYO']
    var cW = f.cboWidth
    var cD = f.cboDepth
    var currentWidth = 0
    var elementsWidthB = 0
    var elementsWidthD = 0
    var largeWidth = cD.value * 20
    var aCurrentSideElements = aSideElements[2]
    if(aCurrentSideElements.length) {
        for(var i = 0; i < aCurrentSideElements.length; i++) {
            for(var j = 0; j < aElements.length; j++) {
                if(aCurrentSideElements[i] == aElements[j][0]) {
                    elementsWidthB += aElements[j][6] + 12
                    break;
                }
            }
        }
        if(elementsWidthB > largeWidth) {
            alert('You cannot change the depth because you have have items on Side B that exceed it.')
            cD.selectedIndex = currentDepthIndex
            return false
        }
    }
    var aCurrentSideElements = aSideElements[4]
    if(aCurrentSideElements.length) {
        for(var i = 0; i < aCurrentSideElements.length; i++) {
            for(var j = 0; j < aElements.length; j++) {
                if(aCurrentSideElements[i] == aElements[j][0]) {
                    elementsWidthD += aElements[j][6] + 12
                    break;
                }
            }
        }
        if(elementsWidthD > largeWidth) {
            alert('You cannot change the depth because you have have items on Side D that exceed it.')
            cD.selectedIndex = currentDepthIndex
            return false
        }
    }
    currentDepthIndex = cD.selectedIndex
    if(cW.selectedIndex >= 0) { currentWidth = cW.value }
    cW.options.length = 0
    if(aBasesD.length >= 0) {
        for(var i = 0; i < aBasesD.length; i++) {
            if(aBasesD[i][0] == cD.value) {
                var aW = aBasesD[i][1]
                for(var j = 0; j < aW.length; j++) {
                    cW.options.length++
                    cW.options[j].value = aW[j]
                    cW.options[j].text = aW[j] + '\''
                    if(aW[j] == currentWidth) { cW.selectedIndex = j }
                }
                break;
            }
        }
        drawSmallSides()
        drawLargeSide()
    }
    return true
}
function setupSmallWidths() {
    var f = document.forms['frmBYO']
    smallWidthAC = f.cboWidth.value * 10
    smallWidthBD = f.cboDepth.value * 10
    if(f.cboWidth.value >= 10) {
        smallHeight = 69
        windowVertSpacer = 7
    }
    else {
        smallHeight = 56
        windowVertSpacer = 3
    }
    checkSmallForDoorHeight()
}
function sideChangeHref(side) {
    sideChange(side)
    var f = document.forms['frmBYO']
    for (var i = 0; i < f.cboCurrentSide.options.length; i++) {
        if(f.cboCurrentSide.options[i].value == side) {
            f.cboCurrentSide.selectedIndex = i
        //  self.location.hash = 'Bottom'
            return
        }
    }
}
function sideChange(side) {
    currentSide = side
    drawLargeSide()
}
function drawSmallSides() {
    var f = document.forms['frmBYO']
    var smallWidth = 0
    setupSmallWidths()
    var sSide = '<table cellpadding="0" cellspacing="0"><tr>'
    for(var sideNumber = 1; sideNumber < 5; sideNumber++) {
        if(sideNumber == 1 || sideNumber == 3) {
            for(var i = 0; i < f.rdoRoofType.length; i++) {
                if(f.rdoRoofType[i].checked) {
                    var roofType = f.rdoRoofType[i].value
                    break;
                }
            }
            if(roofType == 'PITCHED') {
                sSide += '<td valign="bottom"><img src="images/byo-garden/common/pitched.gif" border="0" height="16" width="' + smallWidthAC + '"></td>'
            }
            else if (roofType == 'PENT') {
                if(sideNumber == 1) {
                    sSide += '<td valign="bottom"><img src="images/byo-garden/common/pent-left.gif" border="0" height="15" width="' + smallWidthAC + '"></td>'
                }
                else if(sideNumber == 3) {
                    sSide += '<td valign="bottom"><img src="images/byo-garden/common/pent-right.gif" border="0" height="15" width="' + smallWidthAC + '"></td>'
                }
            }
        }
        else {
            sSide += '<td>&nbsp;</td>'
        }
    }
    sSide += '</tr><tr>'
    for(var sideNumber = 1; sideNumber < 5; sideNumber++) {
        if(sideNumber == 1 || sideNumber == 3) {
            smallWidth = smallWidthAC
        }
        else {
            smallWidth = smallWidthBD
        }
        sSide += '<td><table cellpadding="0" cellspacing="0" border="1" bgcolor="#F9EACF" bordercolor="#732606" width=' + smallWidth + ' height=' + smallHeight + '>'
        sSide += '<tr><td height="' + smallHeight + '" align="center" valign="bottom" bgcolor="#F9EACF"><table height="' + smallHeight + '" cellpadding="0" cellspacing="0" width="100%"><tr>'
        var asideNumberElements = aSideElements[sideNumber]
        if(asideNumberElements.length > 0) {
            for(var i = 0; i < asideNumberElements.length; i++) {
                sSide += '<td height="' + smallHeight + '" align="center" bgcolor="#F9EACF"'
                for(var j = 0; j < aElements.length; j++) {
                    if(aElements[j][0] == asideNumberElements[i]) {
                        if(aElements[j][8] == 'W') {
                            sSide += ' valign="top"><img border="0" width="1" height="' + windowVertSpacer + '" src="images/trans.gif"><br>'
                        }
                        else {
                            sSide += ' valign="bottom">'
                        }
                        sSide += '<img border="0" alt=\'' + aElements[j][1] + '\' width=' + aElements[j][4] + ' height=' + aElements[j][5] + ' src="images/byo-garden/small_' + aElements[j][0] + '.gif">'
                        break;
                    }
                }
                sSide += '</td>'
            }
        }
        else {
                sSide += '<td align="center" valign="bottom" bgcolor="#F9EACF">&nbsp;</td>'
        }
        sSide += '</tr></table></td></tr>'
        sSide += '</table></td>'
    }
    sSide += '</tr><tr>'
    for(var sideNumber = 1; sideNumber < 5; sideNumber++) {
        sSide += '<td align="center"><a href="javascript:sideChangeHref(' + sideNumber + ')"><b><font size="2" face="Arial, Helvetica, sans-serif" color="#4C0000">'
        switch(sideNumber) {
            case 1:
                sSide += 'A'
                break;
            case 2:
                sSide += 'B'
                break;
            case 3:
                sSide += 'C'
                break;
            case 4:
                sSide += 'D'
                break;
        }
        sSide += '</font></b></a></td>'
    }
    sSide += '</tr></table>'
    document.getElementById("dSmallSides").innerHTML = sSide
    f.SmallSidesHTML.value = sSide
}
function drawLargeSide() {
    var f = document.forms['frmBYO']
    if (currentSide > 0) {
        largeWidth = f.cboWidth.value
        if(largeWidth >= 10) {
            largeHeight = 138
            windowVertSpacer = 14
        }
        else {
            largeHeight = 112
            windowVertSpacer = 5
        }
        if(currentSide == 2 || currentSide == 4) {
            largeWidth = f.cboDepth.value
        }
        largeWidth *= 20
    }
    checkLargeForDoorHeight()
    var sSide = '<table cellpadding="0" cellspacing="0" border="1" bgcolor="#F9EACF" bordercolor="#732606" width=' + largeWidth + ' height=' + largeHeight + '>'
    sSide += '<tr><td height="' + largeHeight + '" align="center" valign="bottom" bgcolor="#F9EACF"><table height="' + largeHeight + '" cellpadding="0" cellspacing="0" width="100%"><tr>'
    var aCurrentSideElements = aSideElements[currentSide]
    if(aCurrentSideElements.length > 0) {
        for(var i = 0; i < aCurrentSideElements.length; i++) {
            sSide += '<td height="' + largeHeight + '" align="center" bgcolor="#F9EACF"'
            for(var j = 0; j < aElements.length; j++) {
                if(aElements[j][0] == aCurrentSideElements[i]) {
                    if(aElements[j][8] == 'W') {
                        sSide += ' valign="top"><img border="0" width="1" height="' + windowVertSpacer + '" src="images/trans.gif"><br>'
                    }
                    else {
                        sSide += ' valign="bottom">'
                    }
                    sSide += '<a href="javascript:repositionElement(' + i + ')"><img border="0" alt=\'' + aElements[j][1] + ' - Click here to move it\' width=' + aElements[j][6] + ' height=' + aElements[j][7] + ' src=\'images/byo-garden/large_' + aElements[j][0] + '.gif\'></a>'
                    break;
                }
            }
            sSide += '</td>'
        }
    }
    else {
            sSide += '<td align="center" valign="bottom" bgcolor="#F9EACF">&nbsp;</td>'
    }
    sSide += '</tr></table></td></tr>'
    sSide += '</table>'
    document.getElementById('dLargeSide').innerHTML = sSide
    loadElementsCombo()
}

function chooseElement(type) {
    var sURL = 'byo-addelement.asp?Type=' + type;
    var addElementWin = window.open(sURL, 'addElementWin', 'height=400,width=600,scrollbars=1,resizable=1')
}
function addElement(ElementID) {
    if(currentSide > 0) {
        var aCurrentSideElements = aSideElements[currentSide]
        var newIndex = aCurrentSideElements.length
        aCurrentSideElements.length++
        aCurrentSideElements[newIndex] = ElementID
        drawLargeSide()
        drawSmallSides()
    }
}
function checkAvailWidth(ElementID) {
    var currentWidth = 0
    var f = document.forms['frmBYO']
    if(currentSide > 0) {
        var aCurrentSideElements = aSideElements[currentSide]
        for(var i = 0; i < aCurrentSideElements.length; i++) {
            for(var j = 0; j < aElements.length; j++) {
                if(aElements[j][0] == aCurrentSideElements[i]) {
                    currentWidth += aElements[j][6] + 12 // 12 = 7.2 inches on Large
                    break;
                }
            }
        }
        for(var j = 0; j < aElements.length; j++) {
            if(aElements[j][0] == ElementID) {
                currentWidth += aElements[j][6] + 12 // 12 = 7.2 inches on Large
                break;
            }
        }
        if(currentSide == 1 || currentSide == 3) {
            largeWidth = f.cboWidth.value * 20
        }
        else {
            largeWidth = f.cboDepth.value * 20
        }
        if(currentWidth > largeWidth) { return false }
    }
    return true
}
function checkLargeForDoorHeight() {
    for(var i = 1; i < 5; i++) {
        var aCurrentSideElements = aSideElements[i]
        if(aCurrentSideElements.length > 0) {
            for(j = 0; j < aCurrentSideElements.length; j++) {
                for(k = 0; k < aElements.length; k++) {
                    if(aElements[k][0] == aCurrentSideElements[j]) {
                        if(aElements[k][7] > largeHeight) {
                            largeHeight = aElements[k][7]
                        }
                        break;
                    }
                }
            }
        }
    }
}
function checkSmallForDoorHeight() {
    for(var i = 1; i < 5; i++) {
        var aCurrentSideElements = aSideElements[i]
        if(aCurrentSideElements.length > 0) {
            for(j = 0; j < aCurrentSideElements.length; j++) {
                for(k = 0; k < aElements.length; k++) {
                    if(aElements[k][0] == aCurrentSideElements[j]) {
                        if(aElements[k][5] > smallHeight) {
                            smallHeight = aElements[k][5]
                        }
                        break;
                    }
                }
            }
        }
    }
}
function repositionElement(elementIndex) {
    var n1, n2
    var aCurrentSideElements = aSideElements[currentSide];
    if(aCurrentSideElements.length > 1) {
        var maxIndex = aCurrentSideElements.length -1
        if(elementIndex == maxIndex) {
            n1 = aCurrentSideElements[0]
            n2 = aCurrentSideElements[elementIndex]
            aCurrentSideElements[0] = n2
            aCurrentSideElements[elementIndex] = n1
        }
        else {
            n1 = aCurrentSideElements[elementIndex]
            n2 = aCurrentSideElements[elementIndex +1]
            aCurrentSideElements[elementIndex] = n2
            aCurrentSideElements[elementIndex +1] = n1
        }
        drawLargeSide()
        drawSmallSides()
    }
}
function removeElement() {
    var f = document.forms['frmBYO']
    var c = f.cboCurrentSideElements
    if(c.options.length > 0 && currentSide > 0) {
        var removeElementIndex = parseInt(c.value);
        if(aSideElements[currentSide].length -1 > removeElementIndex) {
            for(var i = removeElementIndex; i < aSideElements[currentSide].length -1; i++) {
                var j = i +1
                aSideElements[currentSide][i] = aSideElements[currentSide][j]
            }
        }
        aSideElements[currentSide].length -= 1
        drawLargeSide()
        drawSmallSides()
    }
}
function loadElementsCombo() {
    var f = document.forms['frmBYO']
    var c = f.cboCurrentSideElements
    c.options.length = 0
    var aCurrentSideElements = aSideElements[currentSide]
    if(aCurrentSideElements.length > 0) {
        for(var i = 0; i < aCurrentSideElements.length; i++) {
            for(j = 0; j < aElements.length; j++) {
                if(aElements[j][0] == aCurrentSideElements[i]) {
                    var newIndex = c.options.length
                    c.options.length++
                    c.options[newIndex].value = i
                    c.options[newIndex].text =  aElements[j][1]
                    break;
                }
            }
        }
    }
}
function storeSideDetails(f) {
    f.SideA.value = aSideElements[1]
    f.SideB.value = aSideElements[2]
    f.SideC.value = aSideElements[3]
    f.SideD.value = aSideElements[4]
}