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

    function addPrice(isNone)
    {
        var newPriceRow = $('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].value = 0;
                }
            }
        }
        newPriceRow.style.display = isIE? 'block' : 'table-row';
        $('pricesTableBody').appendChild(newPriceRow);
        if (isNone) {
            addPrice();
        }

        buildSortableList();
    }

    function removePrice(tr)
    {
        tr.parentNode.removeChild(tr);
    }

    function changedPluginVarName(newPluginVarName)
    {
        if (newPluginVarName == 'CUSTOM') {
            $('customPluginVarnameLabel').style.display = 'inline';
            $('customPluginVarnameField').style.display = 'inline';
        } else {
            $('customPluginVarnameLabel').style.display = 'none';
            $('customPluginVarnameField').style.display = 'none';
        }

        if (newPluginVarName == 'CUSTOM' || newPluginVarName == 'NONE') {
            $('pluginsDetails').style.display = 'none';
        } else {
            var serverPlugins = availablePluginVars.find(function(item) {return item.key == newPluginVarName});
            $('pluginsDescription').innerHTML = serverPlugins.value[0];
            $('pluginsListContents').innerHTML = serverPlugins.value[1];
            $('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'});
    }
</script>
<form name="pricesForm" method="POST" action="index.php?fuse={ADDONS_FUSE}&action={ADDONS_SAVEACTION}">
<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="250" style="padding:0" align="left"  class="formLabel">
            <table width="100%" cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td width="68" align="right" height="30" class="formLabel" style="padding:0 10px">
                        [l]Description[/l]:
                    </td>
                    <td class="formLabel" >
                        <input type="text" name="description" value="{ADDONS_DESCRIPTION}" />
                    </td>
                </tr>
            </table>
        </td>
        <td class="formField" style="padding:0 10px">
            <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>
            <span id="customPluginVarnameLabel" style="display:{ADDONS_CUSTOMPLUGINVARNAME_DISPLAY}; margin-left:10px; font-weight:bold; color:#333333">
                [l]Custom plugin variable name[/l]:
            </div>
            <div id="customPluginVarnameField" style="display:{ADDONS_CUSTOMPLUGINVARNAME_DISPLAY}; margin-left:10px">
                <input type="text" name="customPluginVarName" value="" />
            </div>
        </td>
    </tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td width="70" 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]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="price0[]" value="{ADDONS_PRICE0}" size="7" /></td>
                    <td><input type="button" class="button_medium" value="[l]Remove[/l]" 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="price0[]" value="" size="7" /></td>
                    <td><input type="button" class="button_medium" name="" value="[l]Remove[/l]" onclick="removePrice(this.parentNode.parentNode)" /></td>
                </tr>
            </tbody>
            </table>
            <table width="700">
                <tr>
                    <td align="left">
                        <input type="button" class="button_medium" value="[l]New row[/l]" onclick="addPrice()" />
                        &nbsp;&nbsp;<input type="button" class="button_large" value="[l]Save changes[/l]" onclick="saveAddon(this.form)" />
                    </td>
                </tr>
            </table>

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