<body onload="{ADDONS_BODY_ONLOAD}; buildSortableList();">
<script type="text/javascript">
    var newPriceIndex = 0;
    var availablePluginVars = $H({{ADDONS_PLUGINVARNAMES}});
    var descriptionVisible = false;

    function addPrice(isNone)
    {
        var newPriceRow = document.getElementById('priceRowTemplate').cloneNode(true);
        newPriceRow.setAttribute('id', 'addonPriceRow_N' + newPriceIndex);
        newPriceIndex++;
        if (isNone) {
            var inputs = newPriceRow.getElementsByTagName('input');
            for (var i = 0; i < inputs.length; i++) {
                if (inputs[i].name == 'detail[]') {
                    inputs[i].value = lang('None');
                }
                if (inputs[i].name == 'price1[]' || inputs[i].name == 'price3[]'
                	|| inputs[i].name == 'price6[]' || inputs[i].name == 'price12[]'
                	|| inputs[i].name == 'price24[]' || inputs[i].name == 'price0[]') {
                	inputs[i].value = 0;
                }
            }
        }
        newPriceRow.style.display = isIE? 'block' : 'table-row';
        document.getElementById('pricesTableBody').appendChild(newPriceRow);
        if (isNone) {
            addPrice();
        }

        buildSortableList();
    }

    function removePrice(tr)
    {
        strMessage = '\n' + lang('Click OK to confirm you want to delete this row');
        var answer=confirm(strMessage);
        if (answer) {
            tr.parentNode.removeChild(tr);
        }        
    }

    function changedPluginVarName(newPluginVarName)
    {
        if (newPluginVarName == 'CUSTOM') {
            document.getElementById('customPluginVarnameLabel').style.display = 'block';
        } else {
            document.getElementById('customPluginVarnameLabel').style.display = 'none';
        }

        if (newPluginVarName == 'CUSTOM' || newPluginVarName == 'NONE') {
            document.getElementById('pluginsDetails').style.display = 'none';
        } else {
            var serverPlugins = availablePluginVars.find(function(item) {return item.key == newPluginVarName});
            document.getElementById('pluginsDescription').innerHTML = serverPlugins.value[0];
            document.getElementById('pluginsListContents').innerHTML = serverPlugins.value[1];
            document.getElementById('pluginsDetails').style.display = 'block';
        }
    }

    function saveAddon(addonForm)
    {
        // disabled fields aren't posted, but I need them
        var inputs = document.getElementsByTagName('input');
        for (var i = 0; i < inputs.length; i++) {
            if (inputs[i].name.indexOf('price') != -1) {
                inputs[i].disabled = false;
            }
        }

        addonForm.submit();
    }

    function changeCheck(checkBox, returnToDisabled)
    {
        if (checkBox.checked) {
            checkBox.previousSibling.value = 1;
            checkBox.previousSibling.previousSibling.disabled = false;
        } else {
            checkBox.previousSibling.value = 0;
            if (returnToDisabled) {
                checkBox.previousSibling.previousSibling.value = '';
                checkBox.previousSibling.previousSibling.disabled = true;
            }
        }
    }

    function buildSortableList()
    {
        Sortable.create('pricesTableBody', {tag: 'tr'});
    }

    function showHideDescription()
    {
        if (descriptionVisible) {
            document.getElementById('descriptionTr').style.display = 'none';
            descriptionVisible = false;
        } else {
            document.getElementById('descriptionTr').style.display = '';
            descriptionVisible = true;
        }
    }

</script>
<form name="pricesForm" method="POST" action="index.php?fuse=admin&action=SavePackageAddon">
<input type="hidden" name="addonId" value="{ADDONS_ID}" />
<input type="hidden" name="packageTypeId" value="{ADDONS_PACKAGETYPEID}" />
<input type="hidden" name="packageId" value="{ADDONS_PACKAGEID}" />
<table width="100%" cellpadding="4" cellspacing="2" border="0">
    <tr>
        <td width="260" style="padding:0" align="left"  class="formLabel">
            <table width="100%" cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td width="78" align="right" height="30" class="formLabel" style="padding:0 10px">
                        [l]Name[/l]:
                    </td>
                    <td class="formLabel" >
                        <input type="text" name="name" value="{ADDONS_NAME}" style="width:140px" />
                        <img src="../images/expand_dark.gif" style="cursor:pointer" onmouseover="return overlib('[ljh]show/hide description[/ljh]',FIXY,_mousePosY+5,FIXX,_mousePosX+13,DELAY,310,BGCOLOR, '#FFCC00', FGCOLOR, '#FFFFCC',BORDER,1,TEXTCOLOR,'#000000');" onmouseout="return nd();" onclick="showHideDescription()"/>
                    </td>
                </tr>
                <tr id="descriptionTr" style="display:none">
                    <td width="78" align="right" valign="top" height="30" class="formLabel" style="padding:0 10px">
                        [l]Description[/l]{ADDONS_DESCRIPTION_POPUPHELP}:
                    </td>
                    <td class="formLabel" valign="top">
                        <textarea name="description" style="width:140px">{ADDONS_DESCRIPTION}</textarea>
                    </td>
                </tr>
            </table>
        </td>
        <td class="formField" style="padding:0 10px" valign="top">
            <span style="font-weight:bold; color:#333333">[l]Taxable[/l]:</span>
            <select name="taxable" style="margin-left:10px" >
                <option value="0" {ADDONS_TAXABLE_NO_SELECTED} >[l]No[/l]&nbsp;&nbsp;</option>
                <option value="1" {ADDONS_TAXABLE_YES_SELECTED} >[l]Yes[/l]&nbsp;&nbsp;</option>
            </select>
        </td>
        <td class="formField" style="padding:0 10px" valign="top">
            <span style="font-weight:bold; color:#333333">[l]Plugin variable[/l]{ADDONS_PLUGINVARHELP}:</span>
            <select name="pluginVarName" onchange="changedPluginVarName(this.value)" style="margin-left:10px" >
                <!-- BEGIN DYNAMIC BLOCK: pluginVarNames -->
                <option value="{ADDONS_PLUGINVARNAMESOPTION_VALUE}" {ADDONS_PLUGINVARNAMESOPTION_SELECTED} >{ADDONS_PLUGINVARNAMESOPTION_LABEL}&nbsp;&nbsp;</option>
                <!-- END DYNAMIC BLOCK: pluginVarNames -->
            </select>
            <div id="pluginsDetails" style="display:none">
                <div id="pluginsDescription"></div>
                <div>
                    <span class="warningtext">[l]Available in:[/l]</span> <span id="pluginsListContents"></span>
                </div>
            </div>
            <div id="customPluginVarnameLabel" style="display: {ADDONS_CUSTOMPLUGINVARNAME_DISPLAY}; margin-top:3px; font-weight:bold; color:#333333">
                [l]Custom plugin variable name[/l]:&nbsp;&nbsp;&nbsp;
                <input type="text" name="customPluginVarName" value="{ADDONS_CUSTOMPLUGINVARNAME}" />
            </div>
        </td>
    </tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td width="79" align="right" valign="top" style="font-size:110%; font-weight:bold; padding:0 10px">[l]Prices[/l]{ADDONS_PRICESPOPUP}:<td>
        <td style="padding:0;">
            <table id="pricesTable" width="100%" cellpadding="2" cellspacing="1" border="0">
            <thead>
                <tr>
                    <th width="130">[l]Price detail[/l]</th>
                    <th width="80">[l]Plugin var value[/l]</th>

                    <th width="70">[l]Monthly Billing[/l]</th>
                    <th width="70">[l]Quarterly Billing[/l]</th>
                    <th width="70">[l]Semiannual Billing[/l]</th>
                    <th width="70">[l]Annual Billing[/l]</th>
                    <th width="70">[l]2 Year Billing[/l]</th>
                    <th width="70">[l]Setup Price[/l]</th>
                    <th></th>
                </tr>
            </thead>
            <tbody id="pricesTableBody" >
                <!-- BEGIN DYNAMIC BLOCK: priceRow -->
                <tr id="priceRow_{ADDONS_PRICE_ID}">
                    <td align="center">
                        <input type="hidden" name="priceId[]" value="{ADDONS_PRICE_ID}" />
                        <img src="../images/sub_dot.gif" onmouseover="this.style.cursor = 'n-resize';" />
                        &nbsp;<input type="text" name="detail[]" value="{ADDONS_PRICE_DETAIL}" size="20" />
                    </td>
                    <td align="center"><input type="text" name="pluginVarValue[]" value="{ADDONS_PRICE_PLUGINVALUE}" size="10" /></td>
                    <td><input type="text" name="price1[]" value="{ADDONS_PRICE1}" size="7" {ADDONS_PRICE1_DISABLED} /><input type="hidden" name="price1Force[]" value="{ADDONS_PRICE1_CHECKEDVALUE}" /><input type="checkbox" name="" {ADDONS_PRICE1_CHECKED} onchange="changeCheck(this, {ADDONS_PRICE1_RETURNTODISABLED}, {ADDONS_PRICE_ID})" /></td>
                    <td><input type="text" name="price3[]" value="{ADDONS_PRICE3}" size="7" {ADDONS_PRICE3_DISABLED} /><input type="hidden" name="price3Force[]" value="{ADDONS_PRICE3_CHECKEDVALUE}" /><input type="checkbox" name="" {ADDONS_PRICE3_CHECKED} onchange="changeCheck(this, {ADDONS_PRICE3_RETURNTODISABLED}, {ADDONS_PRICE_ID})" /></td>
                    <td><input type="text" name="price6[]" value="{ADDONS_PRICE6}" size="7" {ADDONS_PRICE6_DISABLED} /><input type="hidden" name="price6Force[]" value="{ADDONS_PRICE6_CHECKEDVALUE}" /><input type="checkbox" name="" {ADDONS_PRICE6_CHECKED} onchange="changeCheck(this, {ADDONS_PRICE6_RETURNTODISABLED}, {ADDONS_PRICE_ID})" /></td>
                    <td><input type="text" name="price12[]" value="{ADDONS_PRICE12}" size="7" {ADDONS_PRICE12_DISABLED} /><input type="hidden" name="price12Force[]" value="{ADDONS_PRICE12_CHECKEDVALUE}" /><input type="checkbox" name="" {ADDONS_PRICE12_CHECKED} onchange="changeCheck(this, {ADDONS_PRICE12_RETURNTODISABLED}, {ADDONS_PRICE_ID})" /></td>
                    <td><input type="text" name="price24[]" value="{ADDONS_PRICE24}" size="7" {ADDONS_PRICE24_DISABLED} /><input type="hidden" name="price24Force[]" value="{ADDONS_PRICE24_CHECKEDVALUE}" /><input type="checkbox" name="" {ADDONS_PRICE24_CHECKED} onchange="changeCheck(this, {ADDONS_PRICE24_RETURNTODISABLED}, {ADDONS_PRICE_ID})" /></td>
                    <td><input type="text" name="price0[]" value="{ADDONS_PRICE0}" size="7" /></td>
                    <td><input type="button" class="button_medium" value="[lh]Remove[/lh]" onclick="removePrice(this.parentNode.parentNode)" /></td>
                </tr>
                <!-- END DYNAMIC BLOCK: priceRow -->
                <tr id="priceRowTemplate" style="display:none">
                    <td align="center">
                        <input type="hidden" name="priceId[]" value="0" />
                        <img src="../images/sub_dot.gif" onmouseover="this.style.cursor = 'n-resize';" />
                        &nbsp;<input type="text" name="detail[]" value="" size="20" />
                    </td>
                    <td align="center"><input type="text" name="pluginVarValue[]" value="" size="10" /></td>
                    <td><input type="text" name="price1[]" value="" size="7" {ADDONS_PRICE1_NEW_DISABLED} /><input type="hidden" name="price1Force[]" value="0" /><input type="checkbox" name="" onchange="changeCheck(this, {ADDONS_PRICE1_NEW_RETURNTODISABLED})" /></td>
                    <td><input type="text" name="price3[]" value="" size="7" {ADDONS_PRICE3_NEW_DISABLED} /><input type="hidden" name="price3Force[]" value="0" /><input type="checkbox" name="" onchange="changeCheck(this, {ADDONS_PRICE3_NEW_RETURNTODISABLED})" /></td>
                    <td><input type="text" name="price6[]" value="" size="7" {ADDONS_PRICE6_NEW_DISABLED} /><input type="hidden" name="price6Force[]" value="0" /><input type="checkbox" name="" onchange="changeCheck(this, {ADDONS_PRICE6_NEW_RETURNTODISABLED})" /></td>
                    <td><input type="text" name="price12[]" value="" size="7" {ADDONS_PRICE12_NEW_DISABLED} /><input type="hidden" name="price12Force[]" value="0" /><input type="checkbox" name="" onchange="changeCheck(this, {ADDONS_PRICE12_NEW_RETURNTODISABLED})" /></td>
                    <td><input type="text" name="price24[]" value="" size="7" {ADDONS_PRICE24_NEW_DISABLED} /><input type="hidden" name="price24Force[]" value="0" /><input type="checkbox" name="" onchange="changeCheck(this, {ADDONS_PRICE24_NEW_RETURNTODISABLED})" /></td>
                    <td><input type="text" name="price0[]" value="" size="7" /></td>
                    <td><input type="button" class="button_medium" name="" value="[lh]Remove[/lh]" onclick="removePrice(this.parentNode.parentNode)" /></td>
                </tr>
            </tbody>
            </table>
            <table width="700">
                <tr>
                    <td align="left">
                        <input type="button" class="button_medium" value="[lh]New row[/lh]" onclick="addPrice()" />
                        &nbsp;&nbsp;<input type="button" class="button_large" value="[lh]Save changes[/lh]" onclick="saveAddon(this.form)" />
                    </td>
                </tr>
            </table>

        </td>
    </tr>
</table>
</form>
</body>
