function contacts()
{

    var ContactCreateForm;
    var ContactCreateWindow;

    var TitleField;
    var ImageField;
    var FnameField;
    var LnameField;
    var DescriptionField;
    var MailField;
    var TelField;
    var FaxField;

    var store;
    var ContactListingSelectedRow;

    
    TitleField = new Ext.form.TextField(
    {
        id          : 'title',
        fieldLabel  : 'Titre',
        name        : 'title',
        maxLength   : 20,
        allowBlank  : false,
        anchor      : '95%'
    });

    ImageField = new Ext.form.TextField(
    {
        id          : 'image',
        fieldLabel  : 'Image',
        name        : 'image',
        allowBlank  : true,
        anchor      : '95%'
    });

    FnameField = new Ext.form.TextField(
    {
        id          : 'fname',
        fieldLabel  : 'Prénom',
        name        : 'fname',
        maxLength   : 20,
        allowBlank  : false,
        anchor      : '95%'
    });

    LnameField = new Ext.form.TextField(
    {
        id          : 'lname',
        fieldLabel  : 'Nom',
        name        : 'fname',
        maxLength   : 20,
        allowBlank  : false,
        anchor      : '95%'
    });

    DescriptionField = new Ext.form.TextArea(
    {
        id          : 'description',
        fieldLabel  : 'Fonction',
        name        : 'description',
        width       : 180,
        allowBlank  : true,
        anchor      : '95%'
    });

    MailField = new Ext.form.TextField(
    {
        id          : 'mail',
        fieldLabel  : 'e-Mail',
        name        : 'mail',
        maxLength   : 50,
        allowBlank  : true,
        anchor      : '95%'
    });

    TelField = new Ext.form.TextField(
    {
        id          : 'tel',
        fieldLabel  : 'Tél',
        name        : 'tel',
        maxLength   : 14,
        allowBlank  : true,
        anchor      : '95%'
    });

    FaxField = new Ext.form.TextField(
    {
        id          : 'fax',
        fieldLabel  : 'Fax',
        name        : 'fax',
        maxLength   : 14,
        allowBlank  : true,
        anchor      : '95%'
    });

    store = new Ext.data.JsonStore({
        url     : baseUrl + '/admin/contact/json',
        root    : 'records',
        fields  : ['id', 'title', 'image', 'fname', 'lname', 'description', 'mail', 'tel', 'fax']
    });
    
    var cm = new Ext.grid.ColumnModel([
    {
        header      : "Titre",
        width       : 40,
        dataIndex   : 'title',
        editor      : TitleField
    },{
        header      : "Image",
        width       : 100,
        dataIndex   : 'image',
        editor      : ImageField
    }, {
        header      : "Prénom",
        width       : 80,
        dataIndex   : 'fname',
        editor      : FnameField
    }, {
        header      : "Nom",
        width       : 80,
        dataIndex   : 'lname',
        editor      : LnameField
    }, {
        header      : "Fonction",
        width       : 120,
        dataIndex   : 'description',
        editor      : DescriptionField
    }, {
        header      : "e-Mail",
        width       : 120,
        dataIndex   : 'mail',
        editor      : MailField
    }, {
        header      : "Tél",
        width       : 80,
        dataIndex   : 'tel',
        editor      : TelField
    }, {
        header      : "Fax",
        width       : 80,
        dataIndex   : 'fax',
        editor      : FaxField
    }
    ]);
    cm.defaultSortable= true;


    ContactListingEditorGrid =  new Ext.grid.EditorGridPanel(
    {
        id              : 'ContactListingEditorGrid',
        store           : store,
        cm              : cm,
        enableRowHeightSync : true,
        trackMouseOver  : true,
        enableColLock   : true,
        selModel        : new Ext.grid.RowSelectionModel(
        {
            singleSelect:false
        }),
        border          : false,
        collapsible     : false,
        titleCollapse   : true,
        tbar            : [{
            text    : 'Add a contact',
            iconCls : 'add',
            handler : displayFormWindow
        }, '-', {
            text    : 'Delete selection',
            handler : confirmDeleteContacts,
            iconCls : 'remove'
        }]
    });

    function onContactListingEditorGridContextMenu(grid, rowIndex, e)
    {  
        e.stopEvent();
        var coords = e.getXY();
        ContactListingContextMenu.rowRecord = grid.store.getAt(rowIndex);
        grid.selModel.selectRow(rowIndex);
        ContactListingSelectedRow=rowIndex;
        ContactListingContextMenu.showAt([coords[0], coords[1]]);
    }

    function modifyContactContextMenu(){
        BrowseServer('image');
        ContactListingEditorGrid.startEditing(ContactListingSelectedRow,1);
    }

    function deleteContactContextMenu(){
        confirmDeleteContacts();
    }

    ContactListingContextMenu = new Ext.menu.Menu({
        id      : 'ContactListingEditorGridContextMenu',
        items   : [
        {
            text    : 'Modify this picture',
            handler : modifyContactContextMenu
        },

        {
            text    : 'Delete this Contact',
            handler : deleteContactContextMenu
        }
        ]
    });

    ContactListingEditorGrid.addListener('rowcontextmenu', onContactListingEditorGridContextMenu);

    var btnBrowser = new Ext.Button(
    {
        text: "Insert Image",
		handler: function()
            {
                BrowseServer('image');
            }
    });

    ContactCreateForm = new Ext.FormPanel(
    {
        labelAlign  : 'top',
        bodyStyle   : 'padding:5px',
        width       : 600,
        items       : [{
            layout  : 'column',
            border  : false,
            items   : [{
                columnWidth : 0.5,
                layout      : 'form',
                border      :false,
                items       : [TitleField, FnameField, LnameField, DescriptionField]
            },{
                columnWidth    : 0.5,
                layout         : 'form',
                border         : false,
                items          : [MailField, TelField, FaxField, ImageField, btnBrowser]
            }]
        }],
        buttons     : [{
            text    : 'Save and Close',
            handler : createContact
        },{
            text    : 'Cancel',
            handler : function()
            {
                ContactCreateWindow.hide();
            }
        }]
    });

    ContactCreateWindow= new Ext.Window(
    {
        id          : 'ContactCreateWindow',
        title       : 'Creating a New Contact',
        closable    : true,
        width       : 610,
        height      : 350,
        plain       : true,
        layout      : 'fit',
        items       : ContactCreateForm
    });

    // reset the Form before opening it
    function resetContactForm()
    {
        TitleField.setValue('Dr.');
        ImageField.setValue('');
        LnameField.setValue('');
        FnameField.setValue('');
        DescriptionField.setValue('');
        MailField.setValue('');
        TelField.setValue('01.48.13.76.00');
        FaxField.setValue('01.48.13.76.07');
    }

    // check if the form is valid
    function isContactFormValid(){
        return(TitleField.isValid() &&
            ImageField.isValid() &&
            LnameField.isValid() &&
            FnameField.isValid() &&
            DescriptionField.isValid() &&
            MailField.isValid() &&
            TelField.isValid() &&
            FaxField.isValid());
    }

    // display or bring forth the form
    function displayFormWindow(){
        if(!ContactCreateWindow.isVisible()){
            resetContactForm();
            ContactCreateWindow.show();
        } else {
            ContactCreateWindow.toFront();
        }
    }

    function confirmDeleteContacts(){
        if(ContactListingEditorGrid.selModel.getCount() == 1){
            Ext.MessageBox.confirm('Confirmation','Delete this contact?', deleteContacts);
        } else {
            Ext.MessageBox.alert('Erreur','Select one only !');
        }
    }


    function saveContact(oGrid_event)
    {
        Ext.Ajax.request({
            waitMsg: 'Please wait...',
            url: baseUrl + '/admin/contact/edit',
            params: {
                task         : "UPDATEVC",
                id           : oGrid_event.record.data.id,
                image        : oGrid_event.record.data.image,
                title        : oGrid_event.record.data.title,
                fname        : oGrid_event.record.data.fname,
                lname        : oGrid_event.record.data.lname,
                description  : oGrid_event.record.data.description,
                mail         : oGrid_event.record.data.mail,
                tel          : oGrid_event.record.data.tel,
                fax          : oGrid_event.record.data.fax
            },
            success: function(response){
                var result=eval(response.responseText);
                switch(result){
                    case 1:
                        store.commitChanges();
                        Ext.MessageBox.alert('Success !', 'Contact saved.');
                        store.reload();
                        break;
                    default:
                        Ext.MessageBox.alert('Error !','We couldn\'t save him...');
                        break;
                }
            },
            failure: function(response){
                var result=response.responseText;
                Ext.MessageBox.alert('error','could not connect to the database. retry later');
            }
        });
    }

    function createContact(){
        if(isContactFormValid()){
            Ext.Ajax.request({
                waitMsg: 'Please wait...',
                url: baseUrl + '/admin/contact/add',
                params: {
                    task            : "CREATEVC",
                    title           : TitleField.getValue(),
                    image           : ImageField.getValue(),
                    fname           : FnameField.getValue(),
                    lname           : LnameField.getValue(),
                    description     : DescriptionField.getValue(),
                    mail            : MailField.getValue(),
                    tel             : TelField.getValue(),
                    fax             : FaxField.getValue()
                },
                success: function(response){
                    var result=eval(response.responseText);
                    switch(result){
                        case 1:
                            Ext.MessageBox.alert('Creation OK', 'The contact was created successfully.');
                            store.reload();
                            ContactCreateWindow.hide();
                            break;
                        default:
                            Ext.MessageBox.alert('Warning', 'Could not create the contact.');
                            break;
                    }
                },
                failure: function(response){
                    var result=response.responseText;
                    Ext.MessageBox.alert('error', 'could not connect to the database. retry later');
                }
            });
        } else {
            Ext.MessageBox.alert('Warning', 'Your Form is not valid!');
        }
    }

    function deleteContacts(btn){
        if(btn=='yes'){
            var selections = ContactListingEditorGrid.selModel.getSelections();
            var id = selections[0].json.id;
            
            Ext.Ajax.request({
                waitMsg: 'Please Wait',
                url: baseUrl + '/admin/contact/delete',
                params: {
                    task: "DELETEVCS",
                    id:  id
                },
                success: function(response){
                    var result=eval(response.responseText);
                    switch(result){
                        case 1:  // Success : simply reload
                            Ext.MessageBox.alert('Success !', 'Contact deleted.');
                            store.reload();
                            break;
                        default:
                            Ext.MessageBox.alert('Warning','Could not delete the entire selection.');
                            break;
                    }
                },
                failure: function(response){
                    var result=response.responseText;
                    Ext.MessageBox.alert('error','could not connect to the database. retry later');
                }
            });
        }
    }


    ContactListingEditorGrid.on('afteredit', saveContact);
    store.load();

    var win = new Ext.Window({
        title       : 'Contacts',
        layout      : 'fit',
        width       : 800,
        height      : 400,
        closable    : true,
        resizable   : true,
        autoScroll  : true,
        plain       : true,
        listeners: {
          close: function() {
            var redirect = baseUrl + '/contact';
            window.location = redirect;
          }
        },
        border      : false,
        items       : [ContactListingEditorGrid]
	});
    win.show();
    return;
};