// Generic Function to prepare the view. Any ExtJS loading stuff can go here, I think.
function prepareSSLView() {
    tabs.add(productPricingTab);
    //loadAddonData();
    tabs.add(productPluginTab);
}

/*
 * Start preparing the fields
 */

billingCyclePanelsBorder = false;
billingRowTopText = new Ext.Panel({
    layout: "absolute",
    name: "billingRowTopText",
    anchor: "100%",
    height: 15,
    border: billingCyclePanelsBorder,
    items: [
    {
        xtype: "label",
        name: "lblmonthlybilling",
        width: 80,
        x: 105,
        y: 1,
        text: "Price",
        style : "font-weight:bold"

    },
    {
        xtype: "label",
        name: "lblckallowmonthlybillinginsignup",
        width: 125,
        x: 173,
        y: 1,
        text: "Setup",
        style : "font-weight:bold"
    }]
});

// Monthly
txtBillingCyclesMonthlyAmount = new Ext.form.NumberField({
    xtype: "textfield",
    id: "priceMonthly",
    width: 60,
    x: 93,
    y: 2,
    value:"0.00",
    validationEvent: false,
    allowBlank: false
});

txtBillingCyclesMonthlySetup = new Ext.form.NumberField({
    xtype: "textfield",
    id: "setupMonthly",
    width: 60,
    x: 160,
    y: 2,
    value:"0.00",
    validationEvent: false,
    allowBlank: false
});

ckBillingCyclesMonthlyAmountAllowInSignup = new Ext.form.Checkbox({
    xtype: "checkbox",
    id: "priceMonthly_checked",
    width: 40,
    fieldLabel: "Allow in signup",
    x: 226,
    y: 2,
    checked: false
});

billingCyclesRowMonthlySignup = new Ext.Panel({
    layout: "absolute",
    name: "billingRowMonthlySignup",
    anchor: "100%",
    height: 35,
    border: billingCyclePanelsBorder,
    items: [
    {
        xtype: "label",
        name: "lblmonthlybilling",
        width: 80,
        x: 2,
        y: 6,
        text: "1 Year",
        style : "font-weight:bold"

    },
    txtBillingCyclesMonthlyAmount,
    txtBillingCyclesMonthlySetup,
    ckBillingCyclesMonthlyAmountAllowInSignup,
    {
        xtype: "label",
        name: "lblckallowmonthlybillinginsignup",
        width: 125,
        x: 245,
        y: 6,
        text: "Allow in signup",
        style : "font-weight:bold"
    }]
});

// Quarterly
txtBillingCyclesQuarterlyAmount = new Ext.form.NumberField({
    xtype: "textfield",
    id: "priceQuarterly",
    width: 60,
    x: 93,
    y: 2,
    value:"0.00",
    validationEvent: false,
    allowBlank: false
});

txtBillingCyclesQuarterlySetup = new Ext.form.NumberField({
    xtype: "textfield",
    id: "setupQuarterly",
    width: 60,
    x: 160,
    y: 2,
    value:"0.00",
    validationEvent: false,
    allowBlank: false
});

ckBillingCyclesQuarterlyAmountAllowInSignup = new Ext.form.Checkbox({
    id:'priceQuarterly_checked',
    xtype: "checkbox",
    width: 40,
    x: 226,
    y: 2,
    checked: false
});

billingCyclesRowQuarterlySignup = new Ext.Panel({

    layout: "absolute",
    name: "billingRowMonthlySignup",
    anchor: "100%",
    height:35,
    y: 35,
    border: billingCyclePanelsBorder,
    items: [
          {
            xtype: "label",
            name: "lblquarterlybilling",
            width: 80,
            x: 2,
            y: 6,
            text: "2 Years",
            style : "font-weight:bold"
         },
         txtBillingCyclesQuarterlyAmount,
         txtBillingCyclesQuarterlySetup,
         ckBillingCyclesQuarterlyAmountAllowInSignup,
        {
            xtype: "label",
            name: "lblckallowquarterlybillinginsignup",
            width: 125,
            x: 245,
            y: 6,
            text: "Allow in signup",
            style : "font-weight:bold"
         }
    ]

});

// Semi Annual
txtBillingCyclesSemiAnnualAmount = new Ext.form.NumberField({
    id:'priceSemiannual',
    xtype: "textfield",
    width: 60,
    x: 93,
    y: 2,
    value:"0.00",
    validationEvent: false,
    allowBlank: false
});

txtBillingCyclesSemiAnnualSetup = new Ext.form.NumberField({
    xtype: "textfield",
    id: "setupSemiannual",
    width: 60,
    x: 160,
    y: 2,
    value:"0.00",
    validationEvent: false,
    allowBlank: false
});

ckBillingCyclesSemiAnnualAmountAllowInSignup = new Ext.form.Checkbox({
    id:'priceSemiannual_checked',
    xtype: "checkbox",
    width: 40,
    fieldLabel: "Allow in signup",
    x: 226,
    y: 2,
    checked: false
});

billingCyclesRowSemiAnnualSignup = new Ext.Panel({

    layout: "absolute",
    name: "billingRowSemiAnnualSignup",
    anchor: "100%",
    height:35,
    y: 35,
    border: billingCyclePanelsBorder,
    items: [
          {
            xtype: "label",
            name: "lblsemiannualbilling",
            width: 80,
            x: 2,
            y: 6,
            text: "3 Years",
            style : "font-weight:bold"

         },
          txtBillingCyclesSemiAnnualAmount,
          txtBillingCyclesSemiAnnualSetup,
          ckBillingCyclesSemiAnnualAmountAllowInSignup,
        {
            xtype: "label",
            name: "lblckallowsemiannualbillinginsignup",
            width: 125,
            x: 245,
            y: 6,
            text: "Allow in signup",
            style : "font-weight:bold"

         }
    ]

});

// Annual
txtBillingCyclesAnnualAmount = new Ext.form.NumberField({
    id:'priceYearly',
    xtype: "textfield",
    width: 60,
    x: 93,
    y: 2,
    value:"0.00",
    validationEvent: false,
    allowBlank: false
});

txtBillingCyclesAnnualSetup = new Ext.form.NumberField({
    xtype: "textfield",
    id: "setupAnnual",
    width: 60,
    x: 160,
    y: 2,
    value:"0.00",
    validationEvent: false,
    allowBlank: false
});

ckBillingCyclesAnnualAmountAllowInSignup = new Ext.form.Checkbox({
    id:'priceYearly_checked',
    xtype: "checkbox",
    width: 40,
    fieldLabel: "Allow in signup",
    x: 226,
    y: 2,
    checked: false
});

billingCyclesRowAnnualSignup = new Ext.Panel({

    layout: "absolute",
    name: "billingRowAnnualSignup",
    anchor: "100%",
    height:35,
    y: 35,
    border: billingCyclePanelsBorder,
    items: [
          {
            xtype: "label",
            name: "lblannualbilling",
            width: 80,
            x: 2,
            y: 6,
            text: "4 Years",
            style : "font-weight:bold"

         },
          txtBillingCyclesAnnualAmount,
          txtBillingCyclesAnnualSetup,
          ckBillingCyclesAnnualAmountAllowInSignup,
        {
            xtype: "label",
            name: "lblckallowannualbillinginsignup",
            width: 125,
            x: 245,
            y: 6,
            text: "Allow in signup",
            style : "font-weight:bold"

         }
    ]

});

// Biennial
txtBillingCyclesBiennialAmount = new Ext.form.NumberField({
    id:'price2Years',
    xtype: "textfield",
    width: 60,
    x: 93,
    y: 2,
    value:"0.00",
    validationEvent: false,
    allowBlank: false
});

txtBillingCyclesBiennialSetup = new Ext.form.NumberField({
    xtype: "textfield",
    id: "setupBiennial",
    width: 60,
    x: 160,
    y: 2,
    value:"0.00",
    validationEvent: false,
    allowBlank: false
});

ckBillingCyclesBiennialAmountAllowInSignup = new Ext.form.Checkbox({
    id:'price2Years_checked',
    xtype: "checkbox",
    width: 40,
    fieldLabel: "Allow in signup",
    x: 226,
    y: 2,
    checked: false
});

billingCyclesRowBiennialSignup = new Ext.Panel({
    layout: "absolute",
    name: "billingRowBiAnnualSignup",
    anchor: "100%",
    height:35,
    y: 35,
    border: billingCyclePanelsBorder,
    items: [
          {
            xtype: "label",
            width: 80,
            x: 2,
            y: 6,
            text: "5 Years",
            style : "font-weight:bold"
         },
          txtBillingCyclesBiennialAmount,
          txtBillingCyclesBiennialSetup,
          ckBillingCyclesBiennialAmountAllowInSignup,
        {
            xtype: "label",
            width: 125,
            x: 245,
            y: 6,
            text: "Allow in signup",
            style : "font-weight:bold"
         }
    ]
});

// One-Time
txtBillingCyclesOneTimePrice = new Ext.form.NumberField({
    id:'onetime',
    width: 60,
    x: 93,
    y: 2,
    value:"0.00",
    validationEvent: false,
    allowBlank: false
});

ckBillingCyclesOneTimeAllowInSignup = new Ext.form.Checkbox({
    id:'priceOneTime_checked',
    xtype: "checkbox",
    width: 40,
    fieldLabel: "Allow in signup",
    x: 226,
    y: 2,
    checked: false
});

billingCyclesRowOneTimePrice = new Ext.Panel({
    layout: "absolute",
    name: "billingRowOneTimePrice",
    anchor: "100%",
    height:35,
    y: 35,
    border: billingCyclePanelsBorder,
    items: [
          {
            xtype: "label",
            name: "lblonetimeprice",
            width: 80,
            x: 2,
            y: 6,
            text: "One-Time",
            style : "font-weight:bold"
         },
         txtBillingCyclesOneTimePrice,
         ckBillingCyclesOneTimeAllowInSignup,
        {
            xtype: "label",
            width: 125,
            x: 245,
            y: 6,
            text: "Allow in signup",
            style : "font-weight:bold"
         }
    ]
});

ckBillingCyclesPackageIsTaxable = new Ext.form.Checkbox({
    id:'taxable',
    width: 10,
    x: 2,
    y: 2
});

billingCyclesRowPackageIsTaxable = new Ext.Panel({
    layout: "absolute",
    anchor: "100%",
    height: 35,
    y: 35,
    border: billingCyclePanelsBorder,
    items: [
          {
            xtype: "label",
            name:  "lblallowinsignup",
            width: 150,
            x: 27,
            y: 6,
            text: "Product is Taxable?",
            style : "font-weight:bold"
         },
         ckBillingCyclesPackageIsTaxable
    ]
});

// Re-purpose these for the pricing clicked option
ckBillingCyclesForceUpdate = new Ext.form.NumberField({
    id:'pricingClicked',
    width: 10,
    value:'1',
    x: 7,
    y: 4
});

billingCyclesRowForceUpdate = new Ext.Panel({
    layout: "absolute",
    anchor: "100%",
    height: 35,
    hidden:true,
    y: 210,
    border: billingCyclePanelsBorder,
    items: [
          {
            xtype: "label",
            name:  "lblforceupdate",
            width: 190,
            x: 27,
            y: 7,
            html:"<span style='text-decoration: underline; top: 0px;' class='tip-target' qtip='Select this option to push the updated pricing information for this product to any existing orders.<br><b>Any existing clients will be billed using the new pricing on their next due date.</b>'>" + lang("Update existing orders?") + "</span>",
            style : "font-weight:bold"
         },
         ckBillingCyclesForceUpdate
    ]
});


billingCyclesPanel = new Ext.form.FieldSet({
    layout: "absolute",
    id: 'billingCyclesPanel',
    border:false,
    width: 257,
    height: 450,
    anchor: "100%",
    x: 0,
    style: 'padding:0px;background-color:#F5F5F5 ',
    items: [
        {
            layout: 'column',
            border: false,
            items:  [
                {
                    columnWidth:  1,
                    layout:'form',
                    bodyStyle:'padding:0 5px 0 5px',
                    border:       false,
                    items:[{
                            xtype:        'fieldset',
                            id:           'addonsNotice',
                            name:         'addonsNotice',
                            title:        lang('Pricing'),
                            autoHeight:   true,
                            labelAlign:   'top',
                            anchor:'98%',
                            items :[
                                billingRowTopText,
                                billingCyclesRowMonthlySignup,
                                billingCyclesRowQuarterlySignup,
                                billingCyclesRowSemiAnnualSignup,
                                billingCyclesRowAnnualSignup,
                                billingCyclesRowBiennialSignup,
                                billingCyclesRowOneTimePrice,
                                billingCyclesRowPackageIsTaxable,
                                billingCyclesRowForceUpdate,
                                {
                                    xtype:  "label",
                                    y: 25,
                                    text:   "Addon prices for billing cycles not used in this product will not be available to the customer, unless you select the force show option in the addon setup screen.",
                                    style:  "font-weight:bold"
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
});


/*
 * Make the tab to load
 */
productPluginTab = {
    title:'Advanced',
    id:'productPluginTab',
    items:[]
}
productPricingTab = {
    title:'SSL Pricing',
    id:'productPricingTab',
    items:[billingCyclesPanel]
}