/* global Ext, Application */
Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif';
userPhoto = null;

Ext.onReady(function() {
    Ext.Ajax.request({
        url: IACV_SERVER_URL_JSON+'logger.php',
        params: {
            action: 'logSubscribe'
        }
    });

    Ext.QuickTips.init();
    Ext.get('loadingAnim').hide();
    subscribeWindow.show();
});

Ext.apply(Ext.form.VTypes, {
    password: function(val, field) {
        if (field.initialPassField) {
            var pwd = Ext.getCmp(field.initialPassField);
            return (val == pwd.getValue());
        }
        return true;
    },
    passwordText: 'Les mots de passe saisis ne correspondent pas.'
});

Ext.override(Ext.form.FileUploadField, {
	onRender : function(ct, position){
		Ext.form.FileUploadField.superclass.onRender.call(this, ct, position);
		this.wrap = this.el.wrap({cls:'x-form-field-wrap x-form-file-wrap'});
		this.el.addClass('x-form-file-text');
		this.el.dom.removeAttribute('name');
		this.createFileInput();
		var btnCfg = Ext.applyIf(this.buttonCfg || {}, {
			text: this.buttonText
		});
		this.button = new Ext.Button(Ext.apply(btnCfg, {
			renderTo: this.wrap,
			cls: 'x-form-file-btn' + (btnCfg.iconCls ? ' x-btn-icon' : '')
		}));
		if(this.buttonOnly){
			this.el.hide();
			this.wrap.setWidth(this.button.getEl().getWidth());
		}
		this.addFileListener();
	},
	createFileInput : function() {
		this.fileInput = this.wrap.createChild({
			id: this.getFileInputId(),
			name: this.name||this.getId(),
			cls: 'x-form-file',
			tag: 'input',
			type: 'file',
			size: 1
		});
	},
	addFileListener : function() {
		this.fileInput.on({
			change: function(){
				var v = this.fileInput.dom.value;
				this.setValue(v);
				this.fireEvent('fileselected', this, v);
			},
			mouseover: function() {
				this.button.addClass(['x-btn-over','x-btn-focus'])
			},
			mouseout: function(){
				this.button.removeClass(['x-btn-over','x-btn-focus','x-btn-click'])
			},
			mousedown: function(){
				this.button.addClass('x-btn-click')
			},
			mouseup: function(){
				this.button.removeClass(['x-btn-over','x-btn-focus','x-btn-click'])
			},
			scope : this
		});
	},
	reset : function(){
		this.fileInput.removeAllListeners();
		this.fileInput.remove();
		this.createFileInput();
		this.addFileListener();
		Ext.form.FileUploadField.superclass.reset.call(this);
	}
});

subscribeImageButton = new Ext.form.FileUploadField({
    buttonOnly: true,
    labelWidth: 0,
    buttonCfg: {
        text: 'Changer'
    },
    name: 'avatar',
    listeners: {
        'fileselected': function(fb, v){
            if (!v || v == undefined || v == '') {
                return false;
            }

            if (!/^.*\.(jpg|jpeg|png)$/i.test(v)) {
                Ext.Msg.show({
                    title: 'Erreur',
                    buttons: Ext.Msg.OK,
                    icon: Ext.MessageBox.ERROR,
                    msg: 'Votre image doit être au format PNG ou JPG.'
                });
                return false;
            }

            Ext.getCmp('adminPublicAvatar').setSrc('../img/loading100.gif');
            subscribeForm.getForm().submit({
                url: IACV_SERVER_URL+'newuser.php',
                waitTitle:'Chargement en cours',
                waitMsg: 'Chargement de votre fichier...',
                clientValidation: false,
                params: {
                    action: 'uploadAvatar'
                },
                success: function(form,action){
                    var response = Ext.util.JSON.decode(action.response.responseText);
                    Ext.getCmp('adminPublicUserAvatar').setValue(response.file);
                    subscribeImageButton.reset();
                    Ext.getCmp('adminPublicAvatar').setSrc('../img/avatars/tmp/'+response.file+'.resized');
                    userPhoto = response.file;
                },
                failure: function(form,response,options){
                    if (userPhoto) {
                         Ext.getCmp('adminPublicAvatar').setSrc('../img/avatars/tmp/'+userPhoto+'.resized?nocache' + Math.random() + '');
                     } else {
                         Ext.getCmp('adminPublicAvatar').setSrc('../img/missingAvatar.png');
                     }
                     Ext.Msg.show({
                        title: 'Erreur',
                        buttons: Ext.Msg.OK,
                        icon: Ext.MessageBox.ERROR,
                        msg: 'Un problème est survenu lors du chargement de la photo. Cela peut-être du à une taille trop importante de l\'image (> 2Mo).'
                    });
                }

            });
        }
    }
});

Ext.ns('Ext.ux.form');
Ext.ux.form.Spacer = Ext.extend(Ext.BoxComponent, {
  height: (Ext.isIE)?10:22,
  autoEl: 'div'
});

Ext.reg('spacer', Ext.ux.form.Spacer);
subscribeForm = new Ext.FormPanel({
    border: false,
    bodyStyle:'padding:10px;',
    labelWidth: 0,
    fileUpload: true,
    defaults: {
        border: false
    },
    items: [{
        border: false,
        defaults: {
            border: false
        },
        layout:'column',
        items:[{
            columnWidth:.85,
            labelWidth: 130,
            layout: 'form',
            items: [{
                xtype: 'hidden',
                id: 'adminPublicUserId',
                name: 'id'
            },
            {
                xtype: 'hidden',
                id: 'adminPublicUserAvatar',
                name: 'avatarFileName'
            },
            {
                xtype:'textfield',
                fieldLabel: 'Mon groupe/Ma famille',
                id: 'adminPublicUserGroup',
                name: 'group',
                invalidClass: 'invalidField',
                anchor:'95%',
                emptyText: 'Nom du groupe/de la famille (requis) - Exemple: Famille Martin',
                regex: /^[a-zA-Z]{1}[a-zA-Z0-9éèàaùu .]{3,63}$/,
                regexText: 'La longueur du nom du groupe ou de la famille doit être comprise entre 4 et 64 caractères et n\'être composée que de lettres, de chiffres et d\'espaces.',
                minLength: 4,
                maxLength: 64,
                minLengthText: 'La longueur longueur du nom du groupe ou de la famille doit être comprise entre 4 et 64 caractères',
                maxLengthText: 'La longueur longueur du nom du groupe ou de la famille doit être comprise entre 4 et 64 caractères',
                allowBlank: false
            },{
                xtype:'textfield',
                fieldLabel: 'Mon identifiant',
                id: 'adminPublicUserLogin',
                name: 'login',
                invalidClass: 'invalidField',
                anchor:'95%',
                emptyText: 'Identifiant de l\'utilisateur (requis) - Exemple: jean',
                regex: /^[a-z]{1}[a-z0-9-_.]{3,19}$/,
                regexText: 'La longueur de l\'identifiant doit être comprise entre 4 et 20 caractères, cet identifiant doit commencer par une lettre minuscule et n\'être composé que de lettres minuscules, de chiffres, de points et de tirets.',
                minLength: 4,
                maxLength: 20,
                minLengthText: 'La longueur de l\'identifiant doit être comprise entre 4 et 20 caractères',
                maxLengthText: 'La longueur de l\'identifiant doit être comprise entre 4 et 20 caractères',
                allowBlank: false
            },{
                xtype:'textfield',
                fieldLabel: 'Mon mot de passe',
                inputType: 'password',
                id: 'adminPublicUserPwd',
                name: 'password',
                invalidClass: 'invalidField',
                anchor:'95%',
                regex: /^[a-zA-Z0-9]{8,32}$/,
                regexText: 'La longueur du mot de passe doit être comprise entre 8 et 32 caractères et n\'être composée que de lettres et de chiffres.',
                allowBlank: false,
                selectOnFocus: true
            },{
                xtype:'textfield',
                fieldLabel: 'Mot de passe (Vérif.)',
                inputType: 'password',
                initialPassField: 'adminPublicUserPwd',
                vtype: 'password',
                id: 'adminPublicUserPwdVerif',
                name: 'passswordverif',
                invalidClass: 'invalidField',
                anchor:'95%',
                regex: /^[a-zA-Z0-9]{8,32}$/,
                regexText: 'La longueur du mot de passe doit être comprise entre 8 et 32 caractères et n\'être composée que de lettres et de chiffres.',
                allowBlank: false,
                selectOnFocus: true
            },{
                xtype:'textfield',
                fieldLabel: 'Mon nom',
                name: 'lastname',
                invalidClass: 'invalidField',
                anchor:'95%',
                emptyText: 'Nom de l\'utilisateur (requis)',
                minLength: 2,
                maxLength: 20,
                maxLengthText: 'Le nom ne peut pas excéder 20 caractères',
                allowBlank: false
            },{
                xtype:'textfield',
                fieldLabel: 'Mon prénom',
                name: 'firstname',
                invalidClass: 'invalidField',
                anchor:'95%',
                emptyText: 'Prénom de l\'utilisateur (requis)',
                minLength: 2,
                maxLength: 20,
                maxLengthText: 'Le nom ne peut pas excéder 20 caractères',
                allowBlank: false
            }]
        },{
            columnWidth:.15,
            layout: 'anchor',
            labelWidth: 0,
            id: 'adminPublicFormImage',
            items: [{
                xtype: 'image',
                url: "../img/missingAvatar.png",
                id: 'adminPublicAvatar',
                width: 100,
                height: 100,
                border: true
            },
            subscribeImageButton
            ]
        }]
    },{
        xtype: 'spacer'
    },
    {
        layout:'column',
        labelWidth: 130,
        items:[{
            columnWidth:0.7,
            xtype:'fieldset',
            layout: 'form',
            title: 'Coordonnées',
            bodyStyle:'padding:5px',
            height: 170,
            defaults: {
                anchor:'98%',
                border: false
            },
            defaultType: 'textfield',
            items :[{
                xtype:'textfield',
                fieldLabel: 'Mon email',
                invalidClass: 'invalidField',
                name: 'mail',
                emptyText: 'Email de l\'utilisateur (requis)',
                vtype: 'email',
                vtypeText: 'Merci d\'entrer une adresse email valide',
                allowBlank: false
            },{
                fieldLabel: 'Mon téléphone',
                name: 'phone',
                minLength: 10,
                maxLength: 14,
                maxLengthText: 'Le numéro de téléphone ne peut pas excéder 14 caractères',
                regex: /^[0-9]{2}[-. ]?[0-9]{2}[-. ]?[0-9]{2}[-. ]?[0-9]{2}[-. ]?[0-9]{2}$/,
                regexText: 'Le numéro de téléphone doit être composé de 10 chiffres au format 0505050505 ou 05-05-05-05-05 ou 05.05.05.05.05'
            }, {
                xtype: 'textarea',
                fieldLabel: 'Mon adresse',
                name: 'address',
                id: 'adminPublicAddress',
                invalidText: 'L\'adresse spécifiée ne semble pas valide.',
                listeners: {

                    blur: function() {
                        var geocoder = new GClientGeocoder();
                        var newValue = Ext.getCmp('adminPublicAddress').getValue();
                        if (newValue != "") {
                            geocoder.getLatLng(
                                newValue,
                                function(point) {

                                    if (!point) {
                                        Ext.getCmp('adminPublicAddress').markInvalid();
                                    } else  {
                                        /*for (var test in geocoder.aa.aa) {
                                                          address = geocoder.aa.aa[test].Placemark[0].address;
                                                          break;
                                                        };
                                                        address = address.replace(/, /g,"\n");*/
                                        Ext.getCmp('adminPublicAddress').clearInvalid();
                                    // Ext.getCmp('adminPublicAddress').setValue(address);
                                    }
                                }
                                );
                        }

                    }
                }
            }
            ]
        },
        {
            width: 10,
            border: false,
            html: ' '
        },
        {
            columnWidth:.3,
            bodyStyle:'padding:5px',
            id: 'adminPublicFormImage',
            xtype:'fieldset',
            title: 'Sécurité',
            layout: 'form',
            defaults: {
                anchor:'98%',
                border: false
            },
            height: 170,
            labelWidth: 30,
            items: [{
                xtype:'textfield',
                fieldLabel: 'Code',
                invalidClass: 'invalidField',
                name: 'captchacode',
                id: 'captchacode',
                emptyText: 'XXXX',
                regex: /^[a-zA-Z0-9]{4}$/,
                selectOnFocus: true,
                minLength: 4,
                maxLength: 4,
                allowBlank: false
            },{
                xtype: 'image',

                url: "securimage/securimage_show.php",
                id: 'captcha'
            },{
                xtype: 'panel',
                bodyStyle: 'text-align: center',
                items: [{
                    xtype: 'button',
                    text: 'Changer le code',
                    cls:'x-btn-text-icon',
                    icon: '../img/icons/arrow_refresh.png',
                    handler: function(){
                        Ext.getCmp('captcha').setSrc('securimage/securimage_show.php??nocache' + Math.random());
                    }
                }]
            }]
            
        }

        ]
    },{
        xtype: 'spacer'
    },
    {
        layout:'column',
        items: [{
        xtype: 'checkbox',
        boxLabel: '<b>J\'accepte les Confitions Générales d\'Utilisation</b>, ',
        border:false,
         hideLabel : true,
         name: 'cgu',
         listeners: {
             check: function(box,val) {
                 if(val) {
                     Ext.getCmp("suscribeButton").enable();
                 } else {
                     Ext.getCmp("suscribeButton").disable();
                 }
             }
         }
        },{
            xtype: 'panel',
            border: false,
            bodyStyle: (Ext.isIE)?'padding-left: 4px;height: 14px;line-height:14px':'padding-left: 4px;height: 18px;line-height:18px',
            html:'(<a href="#" onclick="showCGU()">lire les Confitions Générales d\'Utilisation</a>)'
        }]
    },{
        xtype: 'checkbox',
        boxLabel: 'J\'autorise innoVortex à me communiquer des informations par email',
        border:false,
         hideLabel : true,
         checked: true,
         name: 'mailing'
    }
    ]
});


var subscribe = function() {
    subscribeForm.getForm().submit({
        url: IACV_SERVER_URL+'newuser.php',
        waitTitle:'Inscription en cours',
        waitMsg: 'Envoi des informations au serveur...',
        params: {
            action: 'subscribe'
        },
        success: function(form,action) {
            Ext.Msg.show({
                title: 'Inscription terminée',
                buttons: Ext.Msg.OK,
                icon: Ext.MessageBox.INFO,
                msg: 'L\'inscription est terminée, un message vous a été envoyé à l\'adresse spécifiée. Cliquez sur le lien fourni dans ce message pour activer votre compte.',
                fn: function() {
                    window.location = "http://public.innoagenda.fr/";
                }
            });
        },
        failure: function(form, action){

            if(action.failureType == 'server'){
                obj = Ext.util.JSON.decode(action.response.responseText);
                if (obj.errors.reason == 'SUBSCRIPTION_EXISTING_GROUP') {
                    Ext.getCmp('adminPublicUserGroup').markInvalid("Un groupe du même nom existe déjà. Merci de choisir un autre nom.");
                }
                else if (obj.errors.reason == 'SUBSCRIPTION_EXISTING_LOGIN') {
                    Ext.getCmp('adminPublicUserLogin').markInvalid("Un utilisateur avec le même identifiant existe déjà. Merci de choisir un autre identifiant.");
                }
                else if (obj.errors.reason == 'SUBSCRIPTION_CAPTCHA_FAILURE') {
                    Ext.getCmp('captchacode').markInvalid("Le code de sécurité saisi n'est pas valide.");
                }
                else {
                    Ext.Msg.show({
                        title: 'Erreur',
                        buttons: Ext.Msg.OK,
                        icon: Ext.MessageBox.ERROR,
                        msg: 'Une erreur s\'est produite lors de l\'inscription'
                    });
                }
            }
        }
    });
}

showCGU = function() {
    subscribeCguWindow.show();
}

var subscribeCguWindow = new Ext.Window({
    layout      : 'fit',
    width       : 750,
    height      : 480,
    resizable   : false,
    maximizable : true,
    closable    : true,
    title       : 'innoAgenda - Conditions Générales d\'utilisation',
    modal       : true,
    closeAction : "hide",
    plain       : true,
    id          : 'subscribeCguWindow',
    iconCls     : 'subscribeWindow',
    items: [{
        xtype: 'iframepanel',
        id:'cguframe',
        defaultSrc:'cgu.html',
        border: false
    }]
    
    
});

var subscribeWindow = new Ext.Window({
    layout      : 'border',
    width       : 750,
    height      : (Ext.isIE)?490:480,
    resizable   : false,
    draggable   :false,
    closable    : false,
    title       : 'Inscription à innoAgenda',
    modal       : false,
    closeAction : "hide",
    plain       : true,
    id          : 'subscribeWindow',
    iconCls     : 'subscribeWindow',
    items: [
        {
            region: 'center',
            layout: 'fit',
            items: [subscribeForm],
            border: false,
            bodyStyle : { padding: '10px' },
            bbar: [
                '->'
                ,{
                    id: 'suscribeButton',
                    text:'Valider mon inscription',
                    formBind: true,
                    handler: subscribe,
                    cls: 'x-btn-text-icon',
                    icon: '../img/icons/accept.png',
                    disabled: true
                }
            ]
        }
    ]
});