Ext.namespace('Ext.exampledata');

Ext.exampledata.thickness = [
  ['0.9mm'],['1.2mm'],['1.6mm'],['2mm'],['2.5mm'],['3mm'],['4mm'],['5mm'],['6mm'],
  ['8mm'], ['10mm'],['12mm'],['16mm'],['20mm']
  ];
    
Ext.exampledata.al_thickness = [
  ['0.9mm'],['1.2mm'],['1.6mm'],['2mm'],['2.5mm'],['3mm'],['4mm'],['5mm'],['6mm'],
  ['8mm'], ['10mm'],['12mm']
  ];
Ext.onReady(function(){
  var self = this;  
  Ext.QuickTips.init();
  // message target
  // Ext.form.Field.prototype.msgTarget = 'side';
  //sets default ExtJS blank image
  Ext.BLANK_IMAGE_URL = "/javascripts/extjs/resources/images/default/s.gif";

  var store = new Ext.data.SimpleStore({
    fields: [ 'thickness'],
    data: Ext.exampledata.thickness
  });
    
  var aluminium_store = new Ext.data.SimpleStore({
    fields: [ 'thickness'],
    data: Ext.exampledata.al_thickness
  });
    
  var send_list  = []
  var uploaded_files = []
  var toggle_send_quote = {
    invalid:function(){
      Ext.getCmp('send').disable();
    },
    valid:function() {
      Ext.getCmp('send').enable();
    }
  };
    
  var dialog = new Ext.ux.UploadDialog.Dialog({
    url: '/page/upload_files',
    title: "Attach Flat part file (DWG, DXF) Tube part file (PDF)",
    base_params: {
      upload: this.id
    },
    reset_on_hide: false,
    allow_close_on_upload: true
  });
    
  dialog.on('uploadsuccess',function(dialog,filename,data) {
    var form = window.myForm.getForm();
    if(form.baseParams['actual_filenames[]'] == undefined) {
      form.baseParams['actual_filenames[]'] = [];
      form.baseParams['original_filenames[]'] = [];
    }
    form.baseParams['actual_filenames[]'].push(data['actual_filename']);
    form.baseParams['original_filenames[]'].push(filename);
  });

  // window.s = upload_panel;
  window.myForm = new  Ext.form.FormPanel({
    renderTo:"myform",
    id:"quoteform",
    title:"",
    timeout: 180000,
    baseParams: {},
    width: 515, //475 
    frame:true,
    monitorValid:true,
    collapsible:true,
    url: '/page/order',
    items: [
    new Ext.form.Hidden({
      name: "AuthenticityToken",
      value:"a48ec8ac64ae66c950f4a8e98599f01631b19fec4cdb2525e4470680872bde4e6ccd012984306c2ebb7b60200358bb3678c764a9ba34502444cab7a5a300ff1f'"
    }),

    // Contact Details

    {
      layout:'column',
      labelAlign: 'top',
      width: 545,
      items:
      [
      {
        columnWidth: .45,
        layout: 'form',
        items: [
        {//Company Name
          id: 'company_name',
          xtype:'textfield',
          fieldLabel: 'Company Name',
          labelWidth: 235,
          width: 340,
          name: 'company',
          anchor:'90%',
          tabIndex: 1
        },
        {//Email
          xtype:'textfield',
          fieldLabel: 'Email',
          id: 'email_field',
          labelWidth: 235,
          width: 340,
          labelSeparator: ": <span class=\"required\">*</span>",
          name: 'email',
          vtype:'email',
          anchor:'90%',
          allowBlank: false,
          blankText: "Email address is required",
          tabIndex: 3
        },
        {//Phone
          xtype:'textfield',
          fieldLabel: 'Phone',
          labelSeparator: ": <span class=\"required\">*</span>",
          name: 'phone',
          width: 340,
          //allowBlank: false,
          blankText: "Phone Number is required",
          anchor:'90%',
          tabIndex: 5
        }
        ]
      },
      {
        columnWidth: .45,
        layout: 'form',
        items: [
        {//Contact Name
          xtype:'textfield',
          fieldLabel: 'Contact Name',
          fieldClass: 'contact_name',
          labelSeparator: ": <span class=\"required\">*</span>",
          name: 'contact',
          width: 200,
          allowBlank: false,
          blankText: "Contact Name is required",
          anchor:'90%',
          tabIndex: 2
        },
        {
          xtype:'textfield',
          fieldLabel: 'Email Confirmation',
          labelWidth: 235,
          width: 340,
          labelSeparator: ": <span class=\"required\">*</span>",
          name: 'confirmation_email',
          vtype:'email',
          validator: function(val, field) {
            if(val != Ext.getCmp('email_field').getValue()) {
              return "Email and confirmation email must be the same";
            } else {
              return true;
            }
          },
          anchor:'90%',
          allowBlank: false,
          blankText: "Email address is required",
          tabIndex: 4
        },
        {
          fieldLabel: 'Fax',
          xtype:'textfield',
          name: 'fax',
          width: 340,
          anchor:'90%',
          tabIndex: 6
                   
        }
        ]
      }
      ]
    },
 
    new Ext.form.HTML({
      isFormField: true,
      hideLabel: true,
      html: "All fields marked * must be completed."
    }),
    //Quantity Required
    new Ext.form.NumberField({
      name:"quantity_required",
      fieldLabel:"Quantity Required",
      width: 50,
      labelStyle: "width:105px",
      anchor:"true",
      allowBlank:false,
      allowNegative: false,
      //listeners: toggle_send_quote,
      append: [
      {
        xtype: 'label',
        text: "units",
        width: 30
      },
      {
        xtype: 'label',
        text: "*",
        ctCls: 'required'
      }
      ]
    }),
                
    //Customer to Supply Material Radio
    new Ext.ux.RadioGroup({
      id:"supply",
      name:"customer_to_supply_material",
      fieldLabel:"Customer to supply material",
      horizontal:true,
      labelStyle: "width:160px",
      radios:[
      new Ext.form.Radio({
        id:"radio79",
        name:"",
        value:"y",
        checked:true,
        boxLabel:"Yes"
      }),

      new Ext.form.Radio({
        id:"radio367",
        name:"",
        value:"n",
        boxLabel:"No"
      })
      ]
    }),
    // Job Type Fieldset

    {
      xtype:'fieldset',
      title: 'Job Type',
      collapsible: false,
      border: true,
      autoHeight:true,
      ctCls: "myfieldset",
      width: 500,
      items:[
      new Ext.ux.RadioGroup({
        id:"type",
        name:"type",
        fieldLabel:"Type",
        horizontal:true,
        labelStyle: "width:100px",
        radios:[
        new Ext.form.Radio({
          id:"radio_flat_sheet",
          name:"radio_flat_sheet",
          checked:true,
          value:"flat_sheet",
          boxLabel:"Flat Sheet"
        }),
        new Ext.form.Radio({
          id:"radio_circular_tube",
          name:"radio_circular_tube",
          value:"circular_tube",
          boxLabel:"Circular Tube"
        }),
        new Ext.form.Radio({
          id:"radio_rectangular_tube",
          name:"rectangular_tube",
          value:"rectangular_tube",
          boxLabel: "Rectangular Tube"
        })
        ]
      }),
      {
        layout:'column',
        id: "circular_tube_div",
        width: 545,
        hideMode: "display",
        hideParent: false,        
        items:[{
          columnWidth:.46,
          layout: 'form',
          items: [
          //Circular Tube Outside Diameter  
          new Ext.form.NumberField({
            name:"circular_tube_outside",
            id:"circular_tube_outside",
            fieldLabel:"Outside Diameter",
            width: 100,
            allowBlank: false,
            blankText: "Outside Diameter is  required" ,
            anchor:"true"	,
            //,
            append: [
            {
              xtype: 'label',
              text: "mm",
              width: 30
            }
            ]
          }),
          //Circular Tube Wall Thickness
          new Ext.form.NumberField({
            name: "circular_tube_wall_thickness",
            id: "circular_tube_wall_thickness",
            fieldLabel:"Wall Thickness",
            width: 100,
            allowBlank:true,
            allowBlank: false,
            blankText: "Thickness is  required" ,
            anchor:"true",
            //,
            append: [
            {
              xtype: 'label',
              text: "mm",
              width: 30
            }
            ]
          })                          
                                    
          ]
        },                             
        {
          columnWidth:.45,
          layout: 'form',
          items: [
          //Circular Tube Length
          new Ext.form.NumberField({
            name: "circular_tube_length",
            id: "circular_tube_length",
            fieldLabel:"Length",
            width:100,
            labelStyle: "width:25px",
            allowBlank:true,
            allowBlank: false,
            blankText: "Length  is  required" ,
            anchor:"true",
            //listeners: toggle_send_quote,
            append: [
            {
              xtype: 'label',
              text: "mm",
              width: 30
            }
            ]
          })                                 
          ]
        }       
        ]
      },

      // rectangular tube div

      {
        id: "rectangular_tube_div",
        hideMode: "display",
        hideParent: false ,                                    
        layout:'column',       
        width: 545,    
        items:[{
          columnWidth:.45,
          layout: 'form',
          items: [
          // Rectangular Tube Outer width
          new Ext.form.NumberField({
            name: "rectangular_tube_outer",
            id: "rectangular_tube_outer",
            fieldLabel:"Outer Width",
            width: 100,
            labelWidth: 160,
            allowBlank:false,
            blankText: "Outside width is  required" ,
            anchor:"true" ,
            //,
            append: [
            {
              xtype: 'label',
              text: "mm",
              width: 30
            }
            ]
          }),
          // Rectangular Tube Length
          new Ext.form.NumberField({
            name: "rectangular_tube_length",
            id: "rectangular_tube_length",
            fieldLabel:"Length",
            width: 100,
            labelWidth: 160,
            allowBlank:false,
            blankText: "Length is  required" ,
            anchor:"true",
            //,
            append: [
            {
              xtype: 'label',
              text: "mm",
              width: 30
            }
            ]
          })
          ]
        },{
          columnWidth:.45,
          layout: 'form',
          items: [
          // Rectangular Tube height
          new Ext.form.NumberField({
            name: "rectangular_tube_height",
            id: "rectangular_tube_height",
            fieldLabel:"Outer Height",
            width: 100,
            labelWidth: 150,
            allowBlank:false,
            blankText: "Outer Height is  required" ,
            anchor:"true",
            //,
            append: [
            {
              xtype: 'label',
              text: "mm",
              width: 30
            }
            ]
          }),
          // Rectangular Tube Wall thickness
          new Ext.form.NumberField({
            name: "rectangular_tube_thickness",
            id: "rectangular_tube_thickness",
            fieldLabel:"Wall Thickness",
            width: 100,
            labelWidth: 150,
            allowBlank:false,
            blankText: "Thickness is  required" ,
            anchor:"true",
            //,
            append: [
            {
              xtype: 'label',
              text: "mm",
              width: 30
            }
            ]
          })                          
          ]
        }
        ]
      }
      ]
    },

    // Material Fieldset

    {
      xtype:'fieldset',
      title: 'Material',
      collapsible: false,
      border: true,
      autoHeight:true,
      labelStyle:"width:120px;",
      width:500,
      items:[
      new Ext.ux.RadioGroup({
        id:"materials",
        name:"material",
        fieldLabel:"Material",
        horizontal:true,
        labelStyle: "width:100px",
        radios:[
        new Ext.form.Radio({
          id:"radio_mild_steel",
          name:"radio_mild_steel",
          value:"mild_steel",
          checked:true,
          boxLabel:"Mild Steel"
        }),
        new Ext.form.Radio({
          id:"radio_stainless_steel",
          name:"radio_stainless_steel",
          value:"stainless_steel",
          boxLabel:"Stainless Steel"
        }),
        new Ext.form.Radio({
          id:"radio_aluminium",
          name:"radio_aluminium",
          value:"aluminium",
          boxLabel:"Aluminium"
        }),
        new Ext.form.Radio({
          id:"radio_other",
          name:"radio_other",
          value:"radio_other",
          boxLabel:"Other"
        })
        ]
      }),
      {
        xtype: 'label',
        text: "Thickness:",
        width: 105,
        cls: "grade-label"
      },
      {
        id: "material_thickness",
        items:[
        new Ext.form.ComboBox({
          id: "m_thickness",
          store: store,
          fieldLabel: "Thickness",
          displayField: 'thickness',
          typeAhead: true,
          mode: 'local',
          triggerAction: 'all',
          selectOnFocus:true,
          width:70,
          allowBlank:false,
          blankText: "Thickness is  required" ,
          name: 'material_thickness'
        })
        ]
      },

      {
        id: "aluminium_thickness",
        items:[
        new Ext.form.ComboBox({
          id: "al_thickness",
          store: aluminium_store,
          fieldLabel: "Thickness",
          displayField: 'thickness',
          emptyText: '1mm',
          typeAhead: true,
          mode: 'local',
          triggerAction: 'all',
          selectOnFocus:true,
          width:70,
          allowBlank:false,
          blankText: "Thickness is  required" ,
          name: 'material_thickness'
        })
        ]
      },

      //Grade Radio

      {
        id: "grade_div",
        hideMode: "display",
        hideParent: false,
        width:500,
        items:[ 
        {
          xtype: 'label',
          text: "Grade:",
          width: 105,
          cls: "grade-label"
        },
        new Ext.ux.RadioGroup({
          id:"grade",
          hideMode: "display",
          hideParent: false ,
          name:"grade",
          fieldLabel:"Grade",
          horizontal:true,
          radios:[
          new Ext.form.Radio({
            id:"304",
            name:"",
            value:"304",
            checked:true,
            boxLabel:"304"
          }),

          new Ext.form.Radio({
            id:"316",
            name:"",
            value:"316",
            boxLabel:"316"
          })
          ]
        }),
        // Finish Radio
        {
          xtype: 'label',
          text: "Finish:",
          width: 105,
          cls: "grade-label"
        },                                 
        new Ext.ux.RadioGroup({
          id:"finish",
          name:"finish",
          fieldLabel:"Finish",
          horizontal:true,
          radios:[
          new Ext.form.Radio({
            id:"raw",
            name:"raw",
            value:"raw",
            checked:true,
            boxLabel:"#1 (Raw/Unfinished)"
          }),

          new Ext.form.Radio({
            id:"smooth",
            name:"smooth",
            value:"smooth",
            boxLabel:"2B ( Smooth Rolled)"
          }),
          new Ext.form.Radio({
            id:"linished",
            name:"linished",
            value:"linished",
            boxLabel:"#4 (Linished)"
          })
          ]
        })]
      },

      {
        id: "other_div",
        hideMode: "display",
        hideParent: false,        
        width:500,
        items:[ 
        {
          xtype: 'label',
          text: "Other:",
          width: 105,
          cls: "grade-label"
        },
        {//other 
          xtype:'textfield',
          name:"otherfield",          
          id:"otherfield",          
          //    fieldLabel: 'Other',
          width: 100,
          //    name: 'other_text',
          allowBlank:false ,
          blankText: "Other description is  required"
                                     
        } 
        ]
      },

      new Ext.form.HTML({
        isFormField: true,
        hideLabel: true,
        html: "<div class=\"specifications\">Specifications of other Material Requirements</div>"
      }),
      // Specifications text area
      new Ext.form.TextArea({
        id:'textarea',
        labelSeparator: "",
        height: 60,
        width: 475,
        hideLabel:true,
        grow: true,
        name:"specifications"
      }),

      new Ext.form.HTML({
        isFormField: true,
        hideLabel: true,
        html: "<div class=\"notes\">Note: Stock Mild Steel has a minimum Yield Strength of 250 Mpa. Stock Aluminium will be used unless otherwise specified by customer</div>"
      }),
      new Ext.form.HTML({
        isFormField: true,
        hideLabel: true,
        html: "<div class=\"notes\">Some materials are unable  to be cut by our laser cutting machines. Please contact us for assistance.</div>"
      })
      ]
    },

    // Part Profile Drawing Field Set

    {
      xtype:'fieldset',
      title: 'Part Profile Drawing',
      collapsible: false,
      border: true,
      autoHeight:true,                                    
      width: 500,
      items:[
      new Ext.Button({
        text:'Upload',
        append: [
        {
          xtype: 'label',
          text: "Attach Flat part file (DWG, DXF) Tube part file (PDF)",
          width: 30
        }],
        handler: function(){
          dialog.show('show-button')
        }
      }

      ),
      new Ext.form.HTML({
        isFormField: true,
        hideLabel: true,
        html: "<div class=\"allowed\">(.PDF part drawing or as flat pattern in .DWG or .DXF only)</div>"
      }),
      new Ext.form.HTML({
        isFormField: true,
        hideLabel: true,
        html: "<div class=\"allowed\">Don't have a drawing file? <a href=\"/page/artwork\">click here.</a></div>"
      })
      ]
    },
    // Comments field set
    {
      xtype:'fieldset',
      title: '',
      collapsible: false,
      border: true,
      autoHeight:true,
      width: 500,
      items:[
      new Ext.form.HTML({
        isFormField: true,
        hideLabel: true,
        html: "<div class=\"specifications\">Comments</div>"
      }),
      new Ext.form.TextArea({
        fieldLabel: "",
        id:'comments',
        labelSeparator: "",
        height: 60,
        width: 475,
        hideLabel:true,
        grow: true,
        name: "comments"
      })]
    }
    ]
    ,
    buttons: [{
      "id": "send",
      text:"Send Quote",
      //disable: true,
      //formBind: true,

      //handler: function() {   window.myForm.form.submit(); }%>

      handler: function(){
        //document.forms[0].action = 'order_form'%>
        //window.myForm.getForm().submit({   });%>
        window.myForm.getForm().submit(
        {
          method:'POST',
          name: 'NewRequest',
          waitTitle:'Connecting',
          waitMsg:'Sending data ...',

          success:function()
          {
            window.location =  'order_confirmation';
          },

          failure:function(form, action)
          {
            Ext.MessageBox.show({
              title: 'Error!',
              msg: 'Please enter all required fields!',
              buttons: Ext.MessageBox.OK,
              animEl: 'send',
              icon: 'error'
            });
          }
        })
      }
    }
    ]
  }
  );
    

  function disable_rectangular_tube_options() {
    Ext.getCmp('rectangular_tube_outer').disable();
    Ext.getCmp('rectangular_tube_length').disable();
    Ext.getCmp('rectangular_tube_height').disable();
    Ext.getCmp('rectangular_tube_thickness').disable();
  };
  
  function disable_circular_tube_options() {
    Ext.getCmp('circular_tube_outside').disable();
    Ext.getCmp('circular_tube_length').disable();
    Ext.getCmp('circular_tube_wall_thickness').disable();
  };
  
  function enable_rectangular_tube_options() {
    Ext.getCmp('rectangular_tube_outer').enable();
    Ext.getCmp('rectangular_tube_length').enable();
    Ext.getCmp('rectangular_tube_height').enable();
    Ext.getCmp('rectangular_tube_thickness').enable();
  };
  
  function enable_circular_tube_options() {
    Ext.getCmp('circular_tube_outside').enable();
    Ext.getCmp('circular_tube_length').enable();
    Ext.getCmp('circular_tube_wall_thickness').enable();
  };   

  function hide_job_type_divs() {
    Ext.get("circular_tube_div").hide();
    Ext.get("rectangular_tube_div").hide();
    Ext.get("circular_tube_div").setDisplayed("none");
    Ext.get("rectangular_tube_div").setDisplayed("none");
  }
  function hide_material_type_divs() {
    Ext.get("grade_div").setDisplayed("none");
    Ext.get("other_div").setDisplayed("none");   
  }  
  hide_job_type_divs();
  hide_material_type_divs();
  disable_rectangular_tube_options();
  disable_circular_tube_options();
  Ext.getCmp('otherfield').disable();
  
  function hide_divs() {
    hide_job_type_divs();
    disable_rectangular_tube_options();
    disable_circular_tube_options();    
  }  
 
  Ext.select("INPUT[value='circular_tube']").on('click', function() {
    JobTypeRadioClicked(Ext.get("circular_tube_div"),Ext.get("rectangular_tube_div"));
  });
  Ext.select("INPUT[value='rectangular_tube']").on('click', function() {
    JobTypeRadioClicked(Ext.get("rectangular_tube_div"),Ext.get("circular_tube_div"));
  });
  Ext.select("INPUT[value='flat_sheet']").on('click', hide_divs);
  Ext.getCmp('company_name').focus(true, 500);
         
  function JobTypeRadioClicked(el, value) {
    if (el.isVisible()==false) {
      el.show();
      value.setDisplayed("none");
    }
    if  (el == Ext.get("circular_tube_div")) {
      disable_rectangular_tube_options();
      enable_circular_tube_options();
    }
    else if (el == Ext.get("rectangular_tube_div")){
      disable_circular_tube_options();
      enable_rectangular_tube_options();
    }
    else if (el == Ext.get("other_div")){
      Ext.getCmp('otherfield').enable();
    }
             
  };
  function MaterialRadioClicked(el, value) {
    if (el.isVisible()==false) {
      el.show();
    }
  };  
  Ext.select("INPUT[value='stainless_steel']").on('click', function() {
    JobTypeRadioClicked(Ext.get("grade_div"),Ext.get("other_div"));
  });
  Ext.select("INPUT[value='radio_other']").on('click', function() {
    JobTypeRadioClicked(Ext.get("other_div"),Ext.get("grade_div"));
  });
  Ext.select("INPUT[value='aluminium']").on('click', hide_material_type_divs);
  Ext.select("INPUT[value='mild_steel']").on('click', hide_material_type_divs);
    
    
   
  Ext.get('aluminium_thickness').setDisplayed("none");
  Ext.getCmp('al_thickness').disable();
     
  function ShowThickness() {
    Ext.get('material_thickness').show();
    Ext.getCmp('m_thickness').enable();
    Ext.get('aluminium_thickness').setDisplayed("none");
    Ext.getCmp('al_thickness').disable();
  }
    
  function ShowAlThickness() {
    Ext.get('material_thickness').setDisplayed("none");
    Ext.getCmp('m_thickness').disable();
    Ext.get('aluminium_thickness').show();
    Ext.getCmp('al_thickness').enable();
  }
  
  Ext.select("INPUT[value='stainless_steel']").on('click', function() {
    ShowThickness();
  });
  Ext.select("INPUT[value='mild_steel']").on('click', function() {
    ShowThickness();
  });
  Ext.select("INPUT[value='radio_other']").on('click', function() {
    ShowThickness();
  });
  Ext.select("INPUT[value='aluminium']").on('click', function() {
    ShowAlThickness();
  });
});