//onload event
window.onload = function () {
    document.getElementById("colorPickerIsOn").value = '0';
};

function MM_preloadImages() { //v3.0
    var d = document; if (d.images) {
        if (!d.MM_p) d.MM_p = new Array();
        var i, j = d.MM_p.length, a = MM_preloadImages.arguments; for (i = 0; i < a.length; i++)
            if (a[i].indexOf("#") != 0) { d.MM_p[j] = new Image; d.MM_p[j++].src = a[i]; }
    }
}

function countPlacemats(imgShort) {
    var counter = 0;
    if (document.getElementById("U").innerHTML.indexOf(imgShort) > -1)
        counter += 1;
    if (document.getElementById("D").innerHTML.indexOf(imgShort) > -1)
        counter += 1;
    if (document.getElementById("L1").innerHTML.indexOf(imgShort) > -1)
        counter += 1;
    if (document.getElementById("R1").innerHTML.indexOf(imgShort) > -1)
        counter += 1;
    if (document.getElementById("L2").innerHTML.indexOf(imgShort) > -1)
        counter += 1;
    if (document.getElementById("R2").innerHTML.indexOf(imgShort) > -1)
        counter += 1;
    if (document.getElementById("L3").innerHTML.indexOf(imgShort) > -1)
        counter += 1;
    if (document.getElementById("R3").innerHTML.indexOf(imgShort) > -1)
        counter += 1;
    return counter;
}

function countPZPlacemats() {
    var counter = 0;
    if (document.getElementById("U").innerHTML.toLowerCase().indexOf('?image=pz') > -1)
        counter += 1;
    if (document.getElementById("D").innerHTML.toLowerCase().indexOf('?image=pz') > -1)
        counter += 1;
    if (document.getElementById("L1").innerHTML.toLowerCase().indexOf('?image=pz') > -1)
        counter += 1;
    if (document.getElementById("R1").innerHTML.toLowerCase().indexOf('?image=pz') > -1)
        counter += 1;
    if (document.getElementById("L2").innerHTML.toLowerCase().indexOf('?image=pz') > -1)
        counter += 1;
    if (document.getElementById("R2").innerHTML.toLowerCase().indexOf('?image=pz') > -1)
        counter += 1;
    if (document.getElementById("L3").innerHTML.toLowerCase().indexOf('?image=pz') > -1)
        counter += 1;
    if (document.getElementById("R3").innerHTML.toLowerCase().indexOf('?image=pz') > -1)
        counter += 1;
    return counter;
}

function countPOPlacemats() {
    var counter = 0;
    if (document.getElementById("U").innerHTML.toLowerCase().indexOf('?image=po') > -1)
        counter += 1;
    if (document.getElementById("D").innerHTML.toLowerCase().indexOf('?image=po') > -1)
        counter += 1;
    if (document.getElementById("L1").innerHTML.toLowerCase().indexOf('?image=po') > -1)
        counter += 1;
    if (document.getElementById("R1").innerHTML.toLowerCase().indexOf('?image=po') > -1)
        counter += 1;
    if (document.getElementById("L2").innerHTML.toLowerCase().indexOf('?image=po') > -1)
        counter += 1;
    if (document.getElementById("R2").innerHTML.toLowerCase().indexOf('?image=po') > -1)
        counter += 1;
    if (document.getElementById("L3").innerHTML.toLowerCase().indexOf('?image=po') > -1)
        counter += 1;
    if (document.getElementById("R3").innerHTML.toLowerCase().indexOf('?image=po') > -1)
        counter += 1;
    return counter;
}

function countPRPlacemats() {
    var counter = 0;
    if (document.getElementById("U").innerHTML.toLowerCase().indexOf('?image=pr') > -1)
        counter += 1;
    if (document.getElementById("D").innerHTML.toLowerCase().indexOf('?image=pr') > -1)
        counter += 1;
    if (document.getElementById("L1").innerHTML.toLowerCase().indexOf('?image=pr') > -1)
        counter += 1;
    if (document.getElementById("R1").innerHTML.toLowerCase().indexOf('?image=pr') > -1)
        counter += 1;
    if (document.getElementById("L2").innerHTML.toLowerCase().indexOf('?image=pr') > -1)
        counter += 1;
    if (document.getElementById("R2").innerHTML.toLowerCase().indexOf('?image=pr') > -1)
        counter += 1;
    if (document.getElementById("L3").innerHTML.toLowerCase().indexOf('?image=pr') > -1)
        counter += 1;
    if (document.getElementById("R3").innerHTML.toLowerCase().indexOf('?image=pr') > -1)
        counter += 1;
    return counter;
}


function showColorPicker() {
    if (document.getElementById("colorPicker").style.display != 'block') {
        document.getElementById("colorPicker").style.display = 'block';
        if (document.getElementById("colorPickerIsOn").value == '0') {
            document.getElementById("colorPickerIsOn").value = '1';
            cp1 = new Refresh.Web.ColorPicker('cp1', { startHex: 'ffcc00', startMode: 's' });
        }
        cp1.show();
    }
    else {
        document.getElementById("colorPicker").style.display = 'none';
        document.getElementById("mapPointer").style.display = 'none';
        
    }
}

function colorSelected() {
    document.getElementById("colorPicker").style.display = 'none';
    document.getElementById("tColor").value = '#'+document.getElementById("cp1_Hex").value;
    drawTable(document.getElementById("tPlac").value);
    cp1.hide();
}


function countAndStore() {

    var inputs, index, inputID, len, counted, calcContent, imagename, showPrice, sumPrice;
    inputID = '';
    counted = 0;
    len = 0;
    calcContent = '';
    sumPrice = 0;

    var qtyPZtype = countPZPlacemats();
    var qtyPRtype = countPRPlacemats();
    var qtyPOtype = countPOPlacemats();

    inputs = document.getElementsByTagName('input');

    for (index = 0; index < inputs.length; ++index) {
        if (inputs[index].name == 'qty') {
            inputID = inputs[index].id;
            len = inputID.length - 4;
            //alert(inputID.substr(4, len));
            imagename = inputID.substr(4, len)
            counted = countPlacemats(imagename);
            inputs[index].value = counted;
            //calculate price
            if (counted > 0) {
                showPrice = getPriceFor(imagename.substring(0, 2).toUpperCase(), counted, qtyPZtype, qtyPRtype, qtyPOtype);
                sumPrice = sumPrice + showPrice;
                if (imagename.substring(0, 2).toUpperCase() == 'PZ') {
                    calcContent = calcContent + counted + 'x Rectangular ' + document.getElementById("name_" + imagename).value + ' $' + showPrice + '<br/>';
                }
                if (imagename.substring(0, 2).toUpperCase() == 'PR') {
                    calcContent = calcContent + counted + 'x Round ' + document.getElementById("name_" + imagename).value + ' $' + showPrice + '<br/>';
                }
                if (imagename.substring(0, 2).toUpperCase() == 'PO') {
                    // showPrice = document.getElementById("price_" + imagename).value * counted;
                    // if (document.getElementById("specialprice_" + imagename).value != '')
                    //    showPrice = document.getElementById("specialprice_" + imagename).value * counted;
                    // sumPrice = sumPrice + showPrice;
                    calcContent = calcContent + counted + 'x Halfmoon ' + document.getElementById("name_" + imagename).value + ' $' + showPrice + '<br/>';
                }
           
            }
        }
    }

    //here check centerpiece

    //1.st check if LazySusan
    if (document.getElementById("CPsize").value != '') {
        var CPsize = document.getElementById("CPsize").value;
        CPsize = CPsize.replace(".","");
        showPrice = document.getElementById("p" + CPsize + "_" + document.getElementById("CPmotif").value).value;
        if (document.getElementById("sp" + CPsize + "_" + document.getElementById("CPmotif").value).value != '') {
            showPrice = document.getElementById("sp" + CPsize + "_" + document.getElementById("CPmotif").value).value;
        }
        calcContent = calcContent + '1x ' + document.getElementById("CPsize").value + '" Lazy Suzan <br/>' + document.getElementById("name_" + document.getElementById("CPmotif").value).value + ' $' + showPrice + '<br/>';
        sumPrice = sumPrice * 1 + showPrice * 1;

        document.getElementById("priceCP").value = showPrice;

        if (CPsize==14) {
            document.getElementById("itemCP").value = '723'
        }
        if (CPsize==175) {
            document.getElementById("itemCP").value = '772'
        }
        if (CPsize==22) {
            document.getElementById("itemCP").value = '969'
        }

        //if records(1)=772 then Price175 = records(3)
        //if records(1)=773 then Price14 = records(3)
        //if records(1)=969 then Price22 = records(3)
    }


    //2.st check if tablerunner

    if (document.getElementById('QDisOnTheTable').value == 'true') {
        
        var TRonTabelID = document.getElementById('QDOnTableID').value;

        showPrice=document.getElementById("price_" + TRonTabelID).value;
        document.getElementById("priceTR").value = showPrice;

        if (document.getElementById("specialprice_" + TRonTabelID).value != '')
            showPrice = document.getElementById("specialprice_" + TRonTabelID).value;

        calcContent = calcContent + '1x Runner ' + document.getElementById("name_" + TRonTabelID).value + ' $' + showPrice + '<br/>';
        sumPrice = sumPrice * 1 + showPrice * 1;

    }

    if (calcContent != '') {
        calcContent = calcContent + '------------------------------<br/>';
        calcContent = calcContent + '<b>Total $' + sumPrice + '</b><br/><br/>';
        calcContent = calcContent + '<span onmouseover="this.style.cursor=\'pointer\'; this.style.color=\'#555555\'" onmouseout="this.style.color=\'#808080\'" onclick=\'document.addtocart.submit();\' style="font-family: verdana; color: #808080; font-size: 10px;"><img src="../images/step3.png" onmouseover="this.src=\'../images/step3_over.png\'" onmouseout="this.src=\'../images/step3.png\'" align="absmiddle" border="0"></span>'
    }
    else {
        calcContent = calcContent + '------------------------------<br/>';
        calcContent = calcContent + '<b>Total $0.00</b><br/><br/>';
    }
    document.getElementById("Calculator").innerHTML = calcContent;

}

function getPriceFor(nameStart, qty, qtyPZ, qtyPR, qtyPO) {

    var outputPrice = 0;
    var singlePrice = 0;
    var compQty;
    if (nameStart == 'PZ') {
        compQty = qtyPZ;
    }
    if (nameStart == 'PR') {
        compQty = qtyPR;
    }
    if (nameStart == 'PO') {
        compQty = qtyPO;
    }

        var priceValues = document.getElementById("p" + nameStart).value.split('|');
        for (parse = 0; parse < priceValues.length; parse = parse + 3) {
            if (compQty >= priceValues[parse]) {
                singlePrice = priceValues[parse + 2];
            }
        }
        outputPrice = singlePrice * qty;

    return outputPrice;

}

function showCP(imgFile, cps) {
    var widthCP, htmlCode;

    if (cps == '14')
        widthCP = 105;
    if (cps == '17.5')
        widthCP = 132;
    if (cps == '22')
        widthCP = 160;

    htmlCode =            ' <div onmouseover="document.getElementById(\'showEnlarge_M1\').style.display=\'block\'" onmouseout="document.getElementById(\'showEnlarge_M1\').style.display=\'none\'" style="position: relative; left: 0px;">';
    htmlCode = htmlCode + '     <div id="showEnlarge_M1" style="position:absolute;float:left; display:none;">';
    htmlCode = htmlCode + '         <div style="opacity:0.8;filter:alpha(opacity=80); border: 1px solid #808080; color:#333; position: absolute; top:-10px; left:5px; z-index: 100; background-color: #eee;">';
    htmlCode = htmlCode + '             <div style="width: 128px; padding-left:5px;padding-right:5px"><font face="Arial, Helvetica, sans-serif" size="2">click image to enlarge</font></div>';
    htmlCode = htmlCode + '         </div>';
    htmlCode = htmlCode + '     </div>';
    htmlCode = htmlCode + '     <div style="position:relative;">';
    htmlCode = htmlCode + '         <div style="position: absolute; top: -' + parseInt(widthCP / 2) + 'px; left: ' + parseInt((150 - widthCP) / 2) + 'px">';
    htmlCode = htmlCode + '             <img title="' + document.getElementById("name_" + imgFile).value + ' - Click to enlarge" onmouseover="this.style.cursor=\'pointer\'" onclick="window.open(\'view_image.asp?image=' + document.getElementById("std_" + imgFile).value + '&amp;motifid=' + document.getElementById("mid_" + imgFile).value + '&amp;motifselection=Y&amp;PhotoPending=N\',\'\',\'scrollbars=yes,resizable=yes,width=500,height=470\')" width="' + widthCP + 'px" src="../images/' + imgFile + '.png" />';
    htmlCode = htmlCode + '         </div>';
    htmlCode = htmlCode + '     </div>';
    htmlCode = htmlCode + ' </div>';
    document.getElementById("M1").innerHTML = htmlCode;

    //document.getElementById("M1").innerHTML = '<div style="position:relative;"><div style="position: absolute; top: -' + parseInt(widthCP / 2) + 'px; left: ' + parseInt((150-widthCP) / 2) + 'px"><img title="' + document.getElementById("name_" + imgFile).value + ' - Click to enlarge" onmouseover="this.style.cursor=\'pointer\'" onclick="window.open(\'view_image.asp?image=' + document.getElementById("std_" + imgFile).value + '&amp;motifid=' + document.getElementById("mid_" + imgFile).value + '&amp;motifselection=Y&amp;PhotoPending=N\',\'\',\'scrollbars=yes,resizable=yes,width=500,height=470\')" width="' + widthCP + 'px" src="../images/' + imgFile + '.png" /></div></div>';
    //document.getElementById("M1").innerHTML = '<div style="position: relative; left: 5px; bottom: 5px;"><div style="width: 161px;"><img title="' + document.getElementById("name_" + imgFile).value + ' - Click to enlarge" onmouseover="this.style.cursor=\'pointer\'" onclick="window.open(\'view_image.asp?image=' + document.getElementById("std_" + imgFile).value + '&amp;motifid=' + document.getElementById("mid_" + imgFile).value + '&amp;motifselection=Y&amp;PhotoPending=N\',\'\',\'scrollbars=yes,resizable=yes,width=500,height=470\')" width="141px" src="../images/' + imgFile + '.png" /></div></div>';
    document.getElementById("CPsize").value = cps;
    document.getElementById("CPmotif").value = imgFile;
    //document.getElementById("qty_" + imgFile).value = '1';
    //alert(document.getElementById("qty_" + imgFile).value);

    document.getElementById("qtyCP").value = '1';
    document.getElementById("motifCP").value = document.getElementById("mid_" + imgFile).value;

    countAndStore();

}

function cleanTheTable(plates) {
    document.getElementById("Calculator").innerHTML = '------------------------------<br/><b>Total $0.00</b><br/><br/>';
    document.getElementById('QDisOnTheTable').value = 'false';
    document.getElementById('removeCPbutton').innerHTML = '';

    for (var i = 1; i < 4; ++i) {
        document.getElementById("L" + i).innerHTML = ''
        document.getElementById("L" + i).className = 'mark plate';
        document.getElementById("R" + i).innerHTML = ''
        document.getElementById("R" + i).className = 'mark plate';
        if (document.getElementById("roundPlacemats").style.display == 'block') {
            document.getElementById("L" + i).style.backgroundImage = 'url(../images/emptyPlaceRound.gif)';
            document.getElementById("R" + i).style.backgroundImage = 'url(../images/emptyPlaceRound.gif)';
        }
        if (document.getElementById("recPlacemats").style.display == 'block') {
            document.getElementById("L" + i).style.backgroundImage = 'url(../images/emptyPlaceVertical.gif)';
            document.getElementById("R" + i).style.backgroundImage = 'url(../images/emptyPlaceVertical.gif)';
        }
        if (document.getElementById("moonPlacemats").style.display == 'block') {
            document.getElementById("L" + i).style.backgroundImage = 'url(../images/emptyMoonL.gif)';
            document.getElementById("R" + i).style.backgroundImage = 'url(../images/emptyMoonR.gif)';
        }
        if (document.getElementById("LazySusans").style.display == 'block') {
            document.getElementById("L" + i).style.backgroundImage = '';
            document.getElementById("R" + i).style.backgroundImage = '';
        }
        if (document.getElementById("TableRunner").style.display == 'block') {
            document.getElementById("L" + i).style.backgroundImage = '';
            document.getElementById("R" + i).style.backgroundImage = '';
        }
        else {
            document.getElementById("M1").style.height = '';
            drawTable(document.getElementById("tPlac").value);
        }
    }

    document.getElementById("U").innerHTML = ''
    document.getElementById("U").className = 'mark plate';
    document.getElementById("D").innerHTML = ''
    document.getElementById("D").className = 'mark plate';
    document.getElementById("M1").innerHTML = ''
    document.getElementById("M1").className = 'mark centerP';

    if (document.getElementById("roundPlacemats").style.display == 'block') {
        document.getElementById("U").style.backgroundImage = 'url(../images/emptyPlaceRound.gif)';
        document.getElementById("D").style.backgroundImage = 'url(../images/emptyPlaceRound.gif)';
    }
    if (document.getElementById("recPlacemats").style.display == 'block') {
        document.getElementById("U").style.backgroundImage = 'url(../images/emptyPlaceHoriz.gif)';
        document.getElementById("D").style.backgroundImage = 'url(../images/emptyPlaceHoriz.gif)';
    }
    if (document.getElementById("moonPlacemats").style.display == 'block') {
        document.getElementById("U").style.backgroundImage = 'url(../images/emptyMoonU.gif)';
        document.getElementById("D").style.backgroundImage = 'url(../images/emptyMoonD.gif)';
    }
    if (document.getElementById("LazySusans").style.display == 'block') {
        document.getElementById("U").style.backgroundImage = '';
        document.getElementById("D").style.backgroundImage = '';
        document.getElementById("M1").style.backgroundImage = 'url(../images/emptyLazySuzan.gif)';
    }
    if (document.getElementById("TableRunner").style.display == 'block') {
        document.getElementById("U").style.backgroundImage = '';
        document.getElementById("D").style.backgroundImage = '';
        document.getElementById("M1").style.backgroundImage = 'url(../images/emptyTableRunner.gif)';
    }
    cleanValues();
    rd.init();

}


function cleanCP() {

    document.getElementById("M1").innerHTML = '';
    document.getElementById("M1").className = 'mark centerP';
    document.getElementById('removeCPbutton').innerHTML = '';

    if (document.getElementById("LazySusans").style.display == 'block') {
        document.getElementById("U").style.backgroundImage = '';
        document.getElementById("D").style.backgroundImage = '';
        document.getElementById("M1").style.backgroundImage = 'url(../images/emptyLazySuzan.gif)';
    }
    if (document.getElementById("TableRunner").style.display == 'block') {
        document.getElementById("U").style.backgroundImage = '';
        document.getElementById("D").style.backgroundImage = '';
        document.getElementById("M1").style.backgroundImage = 'url(../images/emptyTableRunner.gif)';
    }
    else 
    {
        document.getElementById("M1").style.height = '';
    }


    document.getElementById("CPsize").value = '';
    document.getElementById("CPmotif").value = '';
    document.getElementById("qtyCP").value = '0';
    document.getElementById('QDisOnTheTable').value = 'false';
    document.getElementById('QDOnTableID').value = '0';
    
    drawTable(document.getElementById("tPlac").value);
    countAndStore();
}

function hideRow(rowID) {
    document.getElementById("LR" + rowID).style.height = '0px';
    document.getElementById("E" + rowID).style.display = 'none';
    document.getElementById("F" + rowID).style.display = 'none';
    document.getElementById("L" + rowID).style.display = 'none';
  //document.getElementById("M" + rowID).style.display = 'none';
    if (rowID == 1)
        document.getElementById("M" + rowID).style.display = 'none';
    document.getElementById("R" + rowID).style.display = 'none';
}

function showRow(rowID) {
    document.getElementById("LR" + rowID).style.height = '150px';
    document.getElementById("E" + rowID).style.display = 'table-cell';
    document.getElementById("F" + rowID).style.display = 'table-cell';
    document.getElementById("L" + rowID).style.display = 'table-cell';
  //document.getElementById("M" + rowID).style.display = 'table-cell';
    if (rowID == 1)
        document.getElementById("M" + rowID).style.display = 'table-cell';
    document.getElementById("R" + rowID).style.display = 'table-cell';
}


function showPlates(plates) {

    document.getElementById("tPlac").value = plates;

    if (plates == 2) {

        hideRow('for2');
        showRow('1');
        hideRow('2');
        hideRow('3');

        document.getElementById("recPlacemats").style.height = '540px';
        document.getElementById("roundPlacemats").style.height = '540px';
        document.getElementById("moonPlacemats").style.height = '540px';
        document.getElementById("LazySusans").style.height = '540px';
        document.getElementById("TableRunner").style.height = '540px';
    }

    if (plates == 4) {

        hideRow('for2');
        showRow('1');
        hideRow('2');
        hideRow('3');

        document.getElementById("recPlacemats").style.height = '540px';
        document.getElementById("roundPlacemats").style.height = '540px';
        document.getElementById("moonPlacemats").style.height = '540px';
        document.getElementById("LazySusans").style.height = '540px';
        document.getElementById("TableRunner").style.height = '540px';
    }

    if (plates == 6) {
       
        hideRow('for2');
        showRow('1');
        showRow('2');
        hideRow('3');

        if (document.getElementById("tType").value == 'Rec') {
            document.getElementById("recPlacemats").style.height = '590px';
            document.getElementById("roundPlacemats").style.height = '590px';
            document.getElementById("moonPlacemats").style.height = '590px';
            document.getElementById("LazySusans").style.height = '590px';
            document.getElementById("TableRunner").style.height = '590px';
        }
        else {
            document.getElementById("recPlacemats").style.height = '610px';
            document.getElementById("roundPlacemats").style.height = '610px';
            document.getElementById("moonPlacemats").style.height = '610px';
            document.getElementById("LazySusans").style.height = '610px';
            document.getElementById("TableRunner").style.height = '610px';
        }
    }

    if (plates == 8) {

        hideRow('for2');
        showRow('1');
        showRow('2');
        showRow('3');

        if (document.getElementById("tType").value == 'Rec') {
            document.getElementById("recPlacemats").style.height = '750px';
            document.getElementById("roundPlacemats").style.height = '750px';
            document.getElementById("moonPlacemats").style.height = '750px';
            document.getElementById("LazySusans").style.height = '750px';
            document.getElementById("TableRunner").style.height = '750px';
        }
        else {
            document.getElementById("recPlacemats").style.height = '750px';
            document.getElementById("roundPlacemats").style.height = '750px';
            document.getElementById("moonPlacemats").style.height = '750px';
            document.getElementById("LazySusans").style.height = '750px';
            document.getElementById("TableRunner").style.height = '750px';
        }
    }

        for (var i = plates / 2; i < 4; ++i) {
            document.getElementById("L" + i).innerHTML = '';
            document.getElementById("L" + i).className = 'mark plate';
            document.getElementById("R" + i).innerHTML = '';
            document.getElementById("R" + i).className = 'mark plate';

                if (document.getElementById("roundPlacemats").style.display == 'block') {
                    document.getElementById("L" + i).style.backgroundImage = 'url(../images/emptyPlaceRound.gif)';
                    document.getElementById("R" + i).style.backgroundImage = 'url(../images/emptyPlaceRound.gif)';
                }
                if (document.getElementById("recPlacemats").style.display == 'block') {
                    document.getElementById("L" + i).style.backgroundImage = 'url(../images/emptyPlaceVertical.gif)';
                    document.getElementById("R" + i).style.backgroundImage = 'url(../images/emptyPlaceVertical.gif)';
                }
                if (document.getElementById("moonPlacemats").style.display == 'block') {
                    document.getElementById("L" + i).style.backgroundImage = 'url(../images/emptyMoonL.gif)';
                    document.getElementById("R" + i).style.backgroundImage = 'url(../images/emptyMoonR.gif)';
                }
                if (document.getElementById("LazySusans").style.display == 'block') {
                    document.getElementById("L" + i).style.backgroundImage = '';
                    document.getElementById("R" + i).style.backgroundImage = '';
                }
            }

            if (plates == 2) {
                document.getElementById("L1").innerHTML = ''
                document.getElementById("L1").className = 'mark';
                document.getElementById("R1").innerHTML = ''
                document.getElementById("R1").className = 'mark';
                document.getElementById("L1").style.backgroundImage = '';
                document.getElementById("R1").style.backgroundImage = '';
            }
            else {
                if (document.getElementById("roundPlacemats").style.display == 'block') {
                    if (document.getElementById("L1").innerHTML == '') {
                        document.getElementById("L1").style.backgroundImage = 'url(../images/emptyPlaceRound.gif)';
                        document.getElementById("L1").className = 'mark plate';
                    }
                    if (document.getElementById("R1").innerHTML == '') {
                        document.getElementById("R1").style.backgroundImage = 'url(../images/emptyPlaceRound.gif)';
                        document.getElementById("R1").className = 'mark plate';
                    }
                }
                if (document.getElementById("recPlacemats").style.display == 'block') {
                    if (document.getElementById("L1").innerHTML == '') {
                        document.getElementById("L1").style.backgroundImage = 'url(../images/emptyPlaceVertical.gif)';
                        document.getElementById("L1").className = 'mark plate';
                    }
                    if (document.getElementById("R1").innerHTML == '') {
                        document.getElementById("R1").style.backgroundImage = 'url(../images/emptyPlaceVertical.gif)';
                        document.getElementById("R1").className = 'mark plate';
                    }
                }
                if (document.getElementById("moonPlacemats").style.display == 'block') {
                    if (document.getElementById("L1").innerHTML == '') {
                        document.getElementById("L1").style.backgroundImage = 'url(../images/emptyMoonL.gif)';
                        document.getElementById("L1").className = 'mark plate';
                    }
                    if (document.getElementById("R1").innerHTML == '') {
                        document.getElementById("R1").style.backgroundImage = 'url(../images/emptyMoonR.gif)';
                        document.getElementById("R1").className = 'mark plate';
                    }
                }
            }

            for (i = 2; i < 9; i = i + 2) {
            if (i != plates) {
                document.getElementById("show_" + i).style.fontWeight = 'normal';
                //document.getElementById("show_" + i).style.color = '#808080';
            }
            else {
                document.getElementById("show_" + i).style.fontWeight = 'bold';
                //document.getElementById("show_" + i).style.color = '#555555';
            }
        }

        drawTable(document.getElementById("tPlac").value);
    countAndStore();


}

function showCenterP() {

    showLS();
    //document.getElementById("backTab").style.backgroundColor = '#ffffff';
    document.getElementById("tab1").className = 'buttonOffPlaceTab';
    document.getElementById("tab2").className = 'buttonOnCenterTab';

    document.getElementById("buttons2").style.display = 'inline';
    document.getElementById("buttons").style.display = 'none';
    document.getElementById("roundPlacemats").style.display = 'none';
    document.getElementById("recPlacemats").style.display = 'none';
    document.getElementById("moonPlacemats").style.display = 'none';
    document.getElementById("LazySusans").style.display = 'block';
    document.getElementById("TableRunner").style.display = 'none';
    if (document.getElementById('QDisOnTheTable').value == 'false' && document.getElementById("TableRunner").style.display != 'block') {
        document.getElementById("M1").style.height = '';
        drawTable(document.getElementById("tPlac").value);
    }

    if (document.getElementById("M1").innerHTML == '') {
            document.getElementById("M1").style.backgroundImage = 'url(../images/emptyLazySuzan.gif)';
            }


    for (var i = 1; i < 4; ++i) {
            document.getElementById("L" + i).style.backgroundImage = '';
            document.getElementById("R" + i).style.backgroundImage = '';
       }
        document.getElementById("U").style.backgroundImage = '';
        document.getElementById("D").style.backgroundImage = '';

    }


function showPlacemats() {

   // document.getElementById("backTab").style.backgroundColor = '#eeeeee';
    document.getElementById("tab1").className = 'buttonOnPlaceTab';
    document.getElementById("tab2").className = 'buttonOffCenterTab';
    document.getElementById("buttons").style.display = 'inline';
    document.getElementById("buttons2").style.display = 'none';
    document.getElementById("LazySusans").style.display = 'none';
    document.getElementById("TableRunner").style.display = 'none';
    if (document.getElementById('QDisOnTheTable').value == 'false' && document.getElementById("TableRunner").style.display != 'block') {
        document.getElementById("M1").style.height = '';
        drawTable(document.getElementById("tPlac").value);
    }
    
        if (document.getElementById("M1").innerHTML == '') {
            document.getElementById("M1").style.backgroundImage = '';
        }
        
            for (var i = 1; i < 4; ++i) {
                if (document.getElementById("L" + i).innerHTML == '') {
                    document.getElementById("L" + i).style.backgroundImage = 'url(../images/emptyPlaceVertical.gif)';
                }
                if (document.getElementById("R" + i).innerHTML == '') {
                    document.getElementById("R" + i).style.backgroundImage = 'url(../images/emptyPlaceVertical.gif)';
                }
            }
        
    if (document.getElementById("U").innerHTML == '') {
        document.getElementById("U").style.backgroundImage = 'url(../images/emptyPlaceHoriz.gif)';
    }
    if (document.getElementById("D").innerHTML == '') {
        document.getElementById("D").style.backgroundImage = 'url(../images/emptyPlaceHoriz.gif)';
    }
    showRecPlates();

    if (document.getElementById("tPlac").value == 2) {
        document.getElementById("L1").innerHTML = ''
        document.getElementById("L1").className = 'mark';
        document.getElementById("R1").innerHTML = ''
        document.getElementById("R1").className = 'mark';
        document.getElementById("L1").style.backgroundImage = '';
        document.getElementById("R1").style.backgroundImage = '';
    }
    else {
        document.getElementById("L1").className = 'mark plate';
        document.getElementById("R1").className = 'mark plate';
    }

}

function showLS() {
    document.getElementById("LazySusans").style.display = 'block';
    document.getElementById("TableRunner").style.display = 'none';
    document.getElementById("but22").className = 'buttonOnLS';
    document.getElementById("but21").className = 'buttonOffTR';
    if (document.getElementById("M1").innerHTML == '') 
        document.getElementById("M1").style.backgroundImage = 'url(../images/emptyLazySuzan.gif)';
    if (document.getElementById('QDisOnTheTable').value == 'false' && document.getElementById("TableRunner").style.display != 'block') {
            document.getElementById("M1").style.height = '';
            drawTable(document.getElementById("tPlac").value);
    }
}


function showTR() {
    document.getElementById("LazySusans").style.display = 'none';
    document.getElementById("TableRunner").style.display = 'block';
    document.getElementById("but22").className = 'buttonOffLS';
    document.getElementById("but21").className = 'buttonOnTR';
    if (document.getElementById("M1").innerHTML == '') {
        document.getElementById("M1").style.backgroundImage = 'url(../images/emptyTableRunner.gif)';
    }
    document.getElementById("M1").style.height = '310px';

    var tP = document.getElementById("tPlac").value;

    if (tP < 6) {
        drawTable(6);
    }
    else {
        drawTable(document.getElementById("tPlac").value);
    }


}

function showRecPlates() {
    if (document.getElementById("M1").innerHTML == '') {
        document.getElementById("M1").style.backgroundImage = '';
    }
    document.getElementById("recPlacemats").style.display = 'block';
    document.getElementById("roundPlacemats").style.display = 'none';
    document.getElementById("moonPlacemats").style.display = 'none';
    document.getElementById("but1").className = 'buttonOnRec';
    document.getElementById("but2").className = 'buttonOffRound';
    document.getElementById("but3").className = 'buttonOffMoon';

    for (var i = 1; i < 4; ++i) {
        if (document.getElementById("L" + i).style.backgroundImage != '') {
            document.getElementById("L" + i).style.backgroundImage = 'url(../images/emptyPlaceVertical.gif)';
        }
        if (document.getElementById("R" + i).style.backgroundImage != '') {
            document.getElementById("R" + i).style.backgroundImage = 'url(../images/emptyPlaceVertical.gif)';
        }
    }
    if (document.getElementById("U").style.backgroundImage != '') {
        document.getElementById("U").style.backgroundImage = 'url(../images/emptyPlaceHoriz.gif)';
    }
    if (document.getElementById("D").style.backgroundImage != '') {
        document.getElementById("D").style.backgroundImage = 'url(../images/emptyPlaceHoriz.gif)';
    }

}

function showMoonPlates() {
    if (document.getElementById("M1").innerHTML == '') {
        document.getElementById("M1").style.backgroundImage = '';
    }
    document.getElementById("recPlacemats").style.display = 'none';
    document.getElementById("roundPlacemats").style.display = 'none';
    document.getElementById("moonPlacemats").style.display = 'block';
    document.getElementById("but1").className = 'buttonOffRec';
    document.getElementById("but2").className = 'buttonOffRound';
    document.getElementById("but3").className = 'buttonOnMoon';

    for (var i = 1; i < 4; ++i) {
        if (document.getElementById("L" + i).style.backgroundImage != '') {
            document.getElementById("L" + i).style.backgroundImage = 'url(../images/emptyMoonL.gif)';
        }
        if (document.getElementById("R" + i).style.backgroundImage != '') {
            document.getElementById("R" + i).style.backgroundImage = 'url(../images/emptyMoonR.gif)';
        }
    }
    if (document.getElementById("U").style.backgroundImage != '') {
        document.getElementById("U").style.backgroundImage = 'url(../images/emptyMoonU.gif)';
    }
    if (document.getElementById("D").style.backgroundImage != '') {
        document.getElementById("D").style.backgroundImage = 'url(../images/emptyMoonD.gif)';
    }

}


function showCirPlates() {

    document.getElementById("recPlacemats").style.display = 'none';
    document.getElementById("moonPlacemats").style.display = 'none';
    document.getElementById("roundPlacemats").style.display = 'block';
    document.getElementById("but1").className = 'buttonOffRec';
    document.getElementById("but2").className = 'buttonOnRound';
    document.getElementById("but3").className = 'buttonOffMoon';

    for (var i = 1; i < 4; ++i) {
        if (document.getElementById("L" + i).style.backgroundImage != '') {
            document.getElementById("L" + i).style.backgroundImage = 'url(../images/emptyPlaceRound.gif)';
        }
        if (document.getElementById("R" + i).style.backgroundImage != '') {
            document.getElementById("R" + i).style.backgroundImage = 'url(../images/emptyPlaceRound.gif)';
        }

    }
    if (document.getElementById("U").style.backgroundImage != '') {
        document.getElementById("U").style.backgroundImage = 'url(../images/emptyPlaceRound.gif)';
    }
    if (document.getElementById("D").style.backgroundImage != '') {
        document.getElementById("D").style.backgroundImage = 'url(../images/emptyPlaceRound.gif)';
    }
}


function drawTable(tP) {
    var tT = document.getElementById("tType").value;
    var tC = document.getElementById("tColor").value;
    var tP

    if (tP < 6 && (document.getElementById('QDisOnTheTable').value == 'true' || document.getElementById("TableRunner").style.display == 'block')) {
        tP=6;
    }

    document.getElementById("w1").width = '120px';
    document.getElementById("w2").width = '120px';
    document.getElementById("E0").width = '';
    document.getElementById("F0").width = '';
    document.getElementById("lastRow").style.height = '0px';
    document.getElementById("startRow").style.height = '0px';
    document.getElementById("LRstart").style.height = '121px';
    document.getElementById("LRend").style.height = '121px';

    if (tT == 'Rec') {

        if (tC  == 'white') {
            document.getElementById("borderTable").style.borderColor = '#808080';
            document.getElementById("borderTable").style.borderStyle = 'solid';
            document.getElementById("borderTable").style.borderWidth = '1px';
            document.getElementById("table3").style.backgroundImage = '';
            document.getElementById("table3").style.backgroundRepeat = '';
            document.getElementById("table3").style.backgroundColor = tC;
        }
        else {

            document.getElementById("borderTable").style.borderStyle = 'none';
            document.getElementById("table3").style.backgroundRepeat = 'repeat';
            document.getElementById("table3").style.backgroundImage = "url(../images/" + tT + "Table" + tP + "_" + tC + ".jpg)";
            document.getElementById("table3").style.backgroundColor = "#ffffff";
        }

    }
    else {

        document.getElementById("table3").style.backgroundRepeat = 'no-repeat';
        document.getElementById("borderTable").style.borderStyle = 'none';

        if (tP == 222) {
            document.getElementById("w1").width = '72px';
            document.getElementById("w2").width = '72px';
            document.getElementById("lastRow").style.height = '20px';
            document.getElementById("startRow").style.height = '20px';
            document.getElementById("LRend").style.height = '140px';
        }

        if (tP == 4 || tP==2) {
           document.getElementById("E0").width = '14px';
           document.getElementById("F0").width = '14px';
           document.getElementById("LRstart").style.height = '141px';
           document.getElementById("LRend").style.height = '140px';
           document.getElementById("lastRow").style.height = '12px';
           document.getElementById("table3").style.backgroundImage = "url(../images/" + tT + "Table4_" + tC + ".jpg)";
       }

        if (tP == 6) {
            document.getElementById("E0").width = '30px';
            document.getElementById("F0").width = '30px';
            document.getElementById("lastRow").style.height = '20px';
            document.getElementById("startRow").style.height = '17px';
            document.getElementById("LRstart").style.height = '140px';
            document.getElementById("LRend").style.height = '140px';
            document.getElementById("table3").style.backgroundImage = "url(../images/" + tT + "Table6_" + tC + ".jpg)";
        }

        if (tP == 8) {
            document.getElementById("E0").width = '52px';
            document.getElementById("F0").width = '55px';
            document.getElementById("lastRow").style.height = '20px';
            document.getElementById("startRow").style.height = '10px';
            document.getElementById("LRstart").style.height = '140px';
            document.getElementById("LRend").style.height = '140px';
            document.getElementById("table3").style.backgroundImage = "url(../images/" + tT + "Table8_" + tC + ".jpg)";
        }

    }
    
    //document.getElementById("table3").style.backgroundImage = "url(../images/" + tT + "Table" + tP + "_" + tC + ".jpg)";
}


function changeTable(tableType) {

    document.getElementById("borderTable").style.borderStyle = 'none';

    if (tableType == 0) {
        document.getElementById("tColor").value = 'white';
    }

    if (tableType == 1) {
        document.getElementById("tColor").value = 'natural';
    }

    if (tableType == 2) {
        document.getElementById("tColor").value = 'dark';
    }
    
    if (tableType == 3) {
        document.getElementById("tColor").value = 'black';
    }

    drawTable(document.getElementById("tPlac").value);
}


function reSetTable() {
    document.getElementById("tColor").value = 'natural';
    document.getElementById("tType").value = 'Rec';
    document.getElementById("tPlac").value = '4';
    drawTable(document.getElementById("tPlac").value);
}

function changeShape(tableShape) {

    if (tableShape == 0) {
        document.getElementById("tType").value = 'Rec';
    }
    
    if (tableShape == 1) {
        document.getElementById("tType").value = 'Round';
    }
    drawTable(document.getElementById("tPlac").value);
    }


function showDesign(what) {

    var inputName, fileName;
    var inputs, index, inputID, len;

    inputs = document.getElementsByTagName('input');

    if (what == 'all') {   //unhide all

        //document.getElementById('inStockOnly').style.display = 'block';
        //document.getElementById('buttons').style.paddingTop = '1px';
        document.getElementById('imgAllD').src = '../images/radio_on.gif';
        document.getElementById('imgInStockD').src = '../images/radio_off.gif';
        document.getElementById('showA').style.fontWeight = 'bold';
        document.getElementById('showISO').style.fontWeight = 'normal';
        document.getElementById('inStockOnly').innerHTML = '* not in stock';
       
        for (index = 0; index < inputs.length; ++index) {
            inputName = inputs[index].id;
            if (inputName.substr(0, 6) == 'stock_') {
                    len = inputName.length - 6;
                    fileName = inputName.substr(6, len);
                    document.getElementById('row1_' + fileName).style.display = 'inherit';
                    document.getElementById('row2_' + fileName).style.display = 'inherit';
            }
            }

        }

        else {   // hide if stock <1
            document.getElementById('showA').style.fontWeight = 'normal';
            document.getElementById('showISO').style.fontWeight = 'bold';
            //document.getElementById('inStockOnly').style.display = 'none';
            document.getElementById('inStockOnly').innerHTML = '&nbsp;';
            //document.getElementById('buttons').style.paddingTop = '30px';
            document.getElementById('imgAllD').src = '../images/radio_off.gif';
            document.getElementById('imgInStockD').src = '../images/radio_on.gif';
            for (index = 0; index < inputs.length; ++index) {
                inputName = inputs[index].id;
                if (inputName.substr(0, 6) == 'stock_') {
                    if (inputs[index].value < 1) {
                        len = inputName.length - 6;
                        fileName = inputName.substr(6, len);
                        document.getElementById('row1_' + fileName).style.display = 'none';
                        document.getElementById('row2_' + fileName).style.display = 'none';
                    }
                }
            }
        }
    }

    function showOnlySelectedSizes() {

        var inputName, fileName;
        var inputs, index, inputID, len;


        inputs = document.getElementsByTagName('input');

        for (index = 0; index < inputs.length; ++index) {
            inputName = inputs[index].id;
            if (inputName.substr(0, 4) == 'std_') {
                len = inputName.length - 4;
                fileName = inputName.substr(4, len);
                if (fileName.substr(0, 2).toLowerCase() == 'tw' || fileName.substr(0, 2).toLowerCase() == 'ts' || fileName.substr(0, 2).toLowerCase() == 'tx') {

                    document.getElementById('row1_' + fileName).style.display = 'none';
                    document.getElementById('row2_' + fileName).style.display = 'none';

                    if (document.getElementById('selectedSize1').value == '1' && document.getElementById('p14_' + fileName)) {
                        document.getElementById('row1_' + fileName).style.display = 'inherit';
                        document.getElementById('row2_' + fileName).style.display = 'inherit';
                    }
                    if (document.getElementById('selectedSize2').value == '1' && document.getElementById('p175_' + fileName)) {
                        document.getElementById('row1_' + fileName).style.display = 'inherit';
                        document.getElementById('row2_' + fileName).style.display = 'inherit';
                    }
                    if (document.getElementById('selectedSize3').value == '1' && document.getElementById('p22_' + fileName)) {
                        document.getElementById('row1_' + fileName).style.display = 'inherit';
                        document.getElementById('row2_' + fileName).style.display = 'inherit';
                    }

                }
            }
        }
    }

    function sizeSelection(sID) {
        if (document.getElementById('selectedSize' + sID).value == '1') {
            document.getElementById('selectedSize' + sID).value = '0';
            document.getElementById('selectCB' + sID).src = '../images/CB_no.png';
        }
        else {
            document.getElementById('selectedSize' + sID).value = '1';
            document.getElementById('selectCB' + sID).src = '../images/CB_yes.png';
        }
        showOnlySelectedSizes();
    }

    function cleanValues() {
        var chk = 0;
        var myinputs = document.getElementsByTagName('input');
        var inputlen = myinputs.length;

        for (var i = 0; i < inputlen; i++) {
            inputName = myinputs[i].getAttribute("id");
            if (inputName != null) {
                if (inputName.substring(0, 4) == "qty_")
                    document.getElementById(inputName).value = '0';
            }
        }
        document.getElementById("CPsize").value = '';
        document.getElementById("CPmotif").value = '';
        document.getElementById("qtyCP").value = '0';
        document.getElementById("QDOnTableID").value = '';
        document.getElementById('QDisOnTheTable').value = 'false';
        
    }