/*
 * Ext JS Library 3.0 RC1
 * Copyright(c) 2006-2009, Ext JS, LLC.
 * licensing@extjs.com
 *
 * http://extjs.com/license
 */


var groupWin;
var groupName;
var groupDesc;
var groupColor;
var useDefault;
var cp;
var simpleForm;
var addButton;
var deleteButton;
var color;

Ext.onReady(function(){
    groupDisplayField = new Ext.form.DisplayField({
        id:         'groupDisplayField',
        name:       'groupDisplayField',
        value:      lang("Add your new customer group in the fields below."),
        hideLabel:  true,
        border:     false,
        anchor:     '100%'
    });
    groupId = new Ext.form.Hidden({
        id:         'id',
        name:       'id'

    });
    groupName = new Ext.form.TextField({
        id:         'groupname',
        name:       'groupname',
        fieldLabel: lang("Name"),
        labelStyle: 'font-weight:bold;font-size:11px;',
        border:     false,
        anchor:     '100%',
        allowBlank: false,
        blankText:  lang("This field is required")
    });

    groupDesc = new Ext.form.TextArea({
        id:         'description',
        name:       'description',
        fieldLabel: lang("Description"),
        labelStyle: 'font-weight:bold;font-size:11px;',
        border:     false,
        anchor:     '100%'
        
    });
    groupColor =  new Ext.form.TextField({
        id:         'groupColor',
        name:       'groupColor',
        fieldLabel: lang("Hex value"),
        labelStyle: 'font-weight:bold;font-size:11px;',
        border:     false,
        anchor:     '100%',
        hidden:false
       // hideLabel:true
    });
    cp = new Ext.ColorPalette({
        id: 'colorPal',
        name: 'colorPal',
        hidden: true,
        border:false,
        style:"text-align:right"
       // fieldLabel:"Select color"
    });  // initial selected color
    cp.on('select', function(palette, selColor){
        // do something with selColor
        groupColor.setValue("#"+selColor);
    });
    useDefault = new Ext.form.Checkbox({
        id:         'useDefault',
        name:       'useDefault',
        labelStyle: 'font-weight:bold;font-size:11px;',
       // border:     false,
        fieldLabel: lang("Group Color"),
        boxLabel:   lang("use default"),
        checked:    true,
        listeners:{check:function(){
                if(useDefault.checked == false){
                    groupColor.setVisible(true);
                    groupColor.hideLabel = false;
                    groupColor.getEl().up('.x-form-item').setDisplayed(true);
                    cp.setVisible(true);
                }else{
                    groupColor.setVisible(false);
                    cp.setVisible(false);
                    groupColor.getEl().up('.x-form-item').setDisplayed(false);
                    groupColor.hideLabel = true;
                }
        }}
    });

    addButton = new Ext.Button({
                              id:       'btnAddGroup',
                              text:     lang("Add Group"),
                              disabled: false,
                              hidden:   false,
                              handler:  function(){
                                            sendGroup();
                              }
                          });
    deleteButton = new Ext.Button({
                              id:       'btnDeleteGroup',
                              text:     lang("Delete Group"),
                              disabled: false,
                              hidden:   false,
                              handler:  function(){
                                            deleteGroup();
                              }
                          });
   
    

    simpleForm = new Ext.FormPanel({
        //labelWidth: 75, // label settings here cascade unless overridden
        frame:true,
        border:false,
        hideBorders:true,
        bodyStyle:'padding:8px 15px 0',
        defaultType: 'textfield',

        items: [groupDisplayField,
                          groupId,
                          groupName,
                          groupDesc,
                          useDefault,
                          groupColor,
                          cp
        ]
        
    });
    
    groupWin = new Ext.Window({
        id:           "groupWindow",
        x:            400,
        y:            200,
        labelAlign:   'right',
        layout:       'form',
        width:        300,
        autoHeight:   true,
        defaultType:  'textfield',
        shadow:false,
        closeAction:  'hide',
        title:        lang("Add Group:"),
        plain:        true,
        closable:     true,
        buttonAlign:  'right',
        items:        [
                          simpleForm
                      ],
        buttons:      [
                         addButton,
                         deleteButton
                      ]
    });

});

function addGroup(){
    groupId.reset();
    groupId.setValue("0");
    groupName.reset();
    groupDesc.reset();
    useDefault.setValue(true);
    groupColor.setVisible(false);
    
    groupColor.hide();
    groupWin.setTitle("Add Group");
    addButton.setText("Add Group");
    deleteButton.hide();
    groupWin.show();
    groupColor.getEl().up('.x-form-item').setDisplayed(false);
    groupName.focus(); // for some reason the focus get lost
}

function editGroup(id){
    groupWin.setTitle("Edit Group");
    addButton.setText("Update Group");
    groupDisplayField.setValue("Edit your customer group in the fields below.");
    deleteButton.show();
    groupWin.show();
    groupColor.getEl().up('.x-form-item').setDisplayed(false);
    populateFields(id);
}


function populateFields(id){
   
        geturl = 'index.php?fuse=admin&action=GetCustomerGroupList&id=' + id;
        simpleForm.getForm().load({url:geturl, waitMsg:'Loading'});

}

function deleteGroup(){
    new Ajax.Request('index.php?fuse=admin&action=DeleteCustomerGroup',
                             {parameters: 'groupId='+ groupId.getValue(),
                              onComplete: onCompleteSendGroup
                             }
                            );
}

function sendGroup(){
        if(groupName.validate()
           
          ){
            
            useDefaultVar = "";
            groupColorVar = "";
            if(groupColor.getValue() != ""){
                groupColorArr = groupColor.getValue().split("#",2);
                groupColorVar = groupColorArr[1];
            }
            
            if(useDefault.getValue()){
                useDefaultVar = "&useDefault=1";
            }else{
                useDefaultVar = '';
            }
            new Ajax.Request('index.php?fuse=admin&action=SaveCustomerGroup',
                             {parameters: 'isAddGroup=1'
                                          + '&groupId='+ groupId.getValue()
                                          + '&groupName=' + groupName.getValue()
                                          + '&groupDescription=' + groupDesc.getValue()
                                          +  useDefaultVar
                                          + '&groupColor=' + groupColorVar,
                              onComplete: onCompleteSendGroup
                             }
                            );
        }else{
            message = '';
            newline = "<br>";
            if(!groupName.validate()){
                if(message != ''){
                    message += newline;
                }
                message += lang("Name")
            }

            if(!groupDesc.validate()){
                if(message != ''){
                    message += newline;
                }
                message += lang("Description")
            }

            if(message != ''){
                Ext.MessageBox.alert(lang("Errors"), lang("The following form field(s) were incomplete or incorrect") + ":<br><br>" + message + "<br><br>" + lang("Please complete or correct the form and submit again."));
                return;
            }
        }
    
}

function onCompleteSendGroup(responseObj)
{
    respArr = responseObj.responseText.split("|");
    responseStr = respArr[0];

    if(responseStr == 'closeWindow'){
        groupWin.hide();

        urlstring = "index.php?fuse=admin&view=ViewCustomerGroups";
        document.location.replace(urlstring);
    }else{
        responseStr = responseObj.responseText;
        Ext.MessageBox.alert(lang("Errors"), responseStr);
    }
}

