﻿window.addEvent('domready', function() {

    // setup registration from
    if ($('registration') !== null) {
        var form_reg = new f1.form();
        form_reg.valSetting = f1.setup.forms.register;
        form_reg.init(f1.setup.forms.register.submit, f1.setup.forms.register.form);
    };

    // setup login from
    if ($('signinForm') !== null) {
        f1.loginDisplay()

        var form_login = new f1.form();
        form_login.valSetting = f1.setup.forms.login;
        form_login.init(f1.setup.forms.login.submit, f1.setup.forms.login.form);
    }

    // setup login from
    if ($('formForgotPass') !== null) {
        var form_fp = new f1.form();
        form_fp.valSetting = f1.setup.forms.forgotPass;
        form_fp.init(f1.setup.forms.forgotPass.submit, f1.setup.forms.forgotPass.form);
    }

    // setup login from
    if ($('updatePass') !== null) {
        var form_np = new f1.form();
        form_np.valSetting = f1.setup.forms.newPass;
        form_np.init(f1.setup.forms.newPass.submit, f1.setup.forms.newPass.form);
    }

    $$('.logout').addEvent('click', function(e) {
        e = new Event(e).stop();
        if ((window.location.href + "").indexOf(".formula1.com") > 0)
            Cookie.remove('LOGIN', { path: '/', domain: '.formula1.com' });
        else
            Cookie.remove('LOGIN', { path: '/' });
        window.location = window.location;
    })


});

// basic test function - production only to be removed, or alert removed.
var test = function(x){
    try {
        //console.log(x)
    }
    catch(err){
        //alert('console.log not available - '+x)
    };
}


// global namespace
var f1 = (typeof f1 == "object") ? f1 : {};

f1.setup = {
    url : window.location.toString(),
    
    // define form names / ids / validation fields / etc.
    forms : {
        login : {
            form : 'signinForm',
            submit : 'signinSubmit',
            msg : 'regMsg',
            validation : {
                fields : [
                   {id:'email',   type:'email',   map:'email',        required:true},
                   {id:'password',type:'password',map:'password',     required:true}
                ]
            }
        },
        register : {
            form : 'registration',
            submit : 'regSubmit', 
            msg : 'regMsg',
            validation : {
                fields : [
                    // personal details
                    {id:'firstname',    type:'text',    map:'firstname',    required:true},
                    {id:'lastname',     type:'text',    map:'lastname',     required:true},
                    {id:'genderList',   type:'radio',   map:'gender',       required:true},
                    {id:'country',      type:'select',  map:'country',      required:true,  pair:'mobile'},
                    {id:'birth',        type:'age',     map:'birth',        required:true},
                    
                    // register
                    {id:'email',            type:'email',    map:'email',       required:true},
                    {id:'email2',           type:'match',    match:'email2',    required:true},
                    {id:'password',         type:'password', map:'password',    required:true},
                    {id:'password2',        type:'match',    match:'password2', required:true},
                    {id:'editorialList',    type:'checkbox', map:'editorialList', required:false},
                    {id:'promoList',        type:'checkbox', map:'promoList', required:false},
                    
                    // mobile
                    {id:'Country',      type:'select',  map:'Country',      required:false},
                    {id:'network',      type:'select',  map:'network',      required:false},
                    {id:'mobile',       type:'mobile',  map:'mobile',       required:false},
                    {id:'iphone',       type:'checkbox', map:'iphone',      required:false},
                    {id:'smsReg',       type:'checkbox', map:'smsReg',      required:false},
                    
                    // t&c
                    {id:'tandc',        type:'checkbox', map:'tandc',       required:true}
                ]
            }
        },
        forgotPass : {
            form : 'formForgotPass',
            submit : 'submitForgotPass',
            msg : 'regMsg',
            validation : {
                fields : [
                   {id:'email',       type:'email',   map:'email',        required:true}
                ]
            }
        },
        newPass : {
            form : 'updatePass', 
            submit : 'submitNewPass', 
            msg : 'regMsg',
            validation : {
                fields: [
                    {id:'changePass',   type:'password', map:'Password',    required:true},
                    {id:'confirmChangePass', type:'match', match:'changePass',required:true}
                ]
            }
        }  
    },
    
    // define cookie names
    cookies : {
        register : 'register',
        login : 'login',
        user : 'userDetails'
    }
}


f1.form = function() {
    // public vars
    this.valSetting = {};

    // private vars
    var form,
        submit,
        formValid = true;

    var VS = this.valSetting;

    // private methods
    var validate = {
        // validate against a regular expression
        regEx: function(s, v) {

            var reInt;
            switch (s.type) {
                case 'number':
                    reInt = new RegExp(/^[0-9]{1,10}$/)
                    break
                case 'text':
                    reInt = new RegExp(/^[a-zA-Z0-9\.\-\']{2,15}$/)
                    break
                case 'email':
                    reInt = new RegExp(/^([a-zA-Z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/)
                    break
                case 'password':
                    reInt = new RegExp(/^.{4}.*$/)
                    break
                case 'age':
                    reInt = new RegExp(/^(19|20)[0-9]{2}$/)
                    break
                case 'mobile':
                    // 1-4 just country code
                    // 7-16 for mobile number
                    reInt = new RegExp(/^\+(\d{1,4}|([1-9](\d{6,16})))$/)
                    break
                default:
                    reInt = new RegExp(/^[a-zA-Z0-9]{1,20}$/)
            };

            // test
            return reInt.test(v)
        },

        // validate select box or radio or checkbox has been selected
        selected: function(v) {
            if (v === '' || v === null || v === false) {
                return false;
            } else {
                return true;
            }
        },

        // validate the field matches another field
        match: function(s, v) {
            var mID = s.match,
                mVal = $(mID).value,
                mState = $(mID).hasClass('error');

            if (!mState && (v === mVal)) {
                return true
            } else {
                return false
            }
        },

        updateMobile: function(s, v) {
            var mId = s.pair;
            var mEl = $(mId);
            if (mEl) {
                if (mEl.value.length < 6) {
                    if (v !== '')
                        mEl.value = '+' + v;
                    else
                        mEl.value = '';
                } 
            }
        }
    };

    var pass = function(id, type) {
        // field success styling
        if (type === 'radio') {
            $(id).addClass('success');
        } else {
            $(id).getParent('label').addClass('success');
        }
    };
    var fail = function(id, type) {
        // field error styling
        if (type === 'radio') {
            $(id).addClass('error');
        } else {
            $(id).getParent('label').addClass('error');
        }
    };

    // public methods
    // reset form
    this.resetForm = function() {
        formValid = true;
        $$('.error').removeClass('error');
        $$('.success').removeClass('success');

        var VS = this.valSetting;
        msg.reset(VS.msg)
    };
    // reset field
    this.resetField = function(el) {
        $(el).removeClass('error');
        $(el).removeClass('success');

        var VS = this.valSetting;
        msg.reset(VS.msg)
    };

    var msg = {
        update: function(el, p, msg, positive) {
            if (positive) {
                var className = 'positive';
            } else {
                var className = 'negative';
            }

            $(el).addClass(className).addClass('show');
            $ES(p, el).addClass('show');
            if (p = 'p.dynamic') $ES('p.dynamic', el).setText(msg);

            document.getElementById('wrapperHeading').scrollIntoView(true);

        },
        reset: function(el) {
            $(el).removeClass('show').removeClass('positive').removeClass('negative');
            $ES('p.show', el).removeClass('show');
        }
    }

    var validateField = function(s, state) {
        var result, el, value;

        if ($(s.id) !== null) { // check form EL exists to catch errors
            switch (s.type) {
                case 'radio':
                    var inputs = $ES('input', s.id);
                    value = '';
                    $each(inputs, function(elm, i) {
                        if (elm.checked) {
                            value = elm.value;
                        };
                    })
                    el = s.id;
                    result = validate.selected(value);
                    break
                case 'select':
                    var options = $ES('option', s.id);
                    value = '', code = '';
                    $each(options, function(elm, i) {
                        if (elm.selected) {
                            value = elm.getAttribute('value');
                            if (value === null) value = '';
                            code = elm.getAttribute('code');
                        };
                    })
                    validate.updateMobile(s, code);
                    result = validate.selected(value);
                    el = s.id;
                    break
                case 'checkbox':
                    value = $(s.id).checked
                    result = validate.selected(value);
                    el = s.id;
                    break
                case 'match':
                    value = $(s.id).value;
                    if (value == '') {
                        result = false;
                    } else {
                        result = validate.match(s, value)
                    }
                    el = s.id;
                    break

                case 'number':
                case 'text':
                case 'password':
                case 'email':
                case 'age':
                case 'mobile':
                    value = $(s.id).value;
                    result = validate.regEx(s, value);
                    el = s.id;
                    break
            }

            // field validation = result = true / false = pass / fail, apply appropriate styling
            //test('result='+result+', el='+el+', type='+s.type)
            if (!s.required && (value === '' || value === null || value === false))
                result = true;

            if (result) {
                pass(el, s.type)
            } else if (!result && state !== 'positive') {
                fail(el, s.type);
                formValid = false
            }

            //return formValid

        } // END check EL exists        

    } // END validate field

    this.validateForm = function() {
        //requires 'valSetting' setting object defined when new object is initialised
        var VS = this.valSetting,
            that = this;

        //reset form
        that.resetForm(form);

        var i = 0,
			l = VS.validation.fields.length;

        for (i; i < l; i++) {
            validateField(VS.validation.fields[i])
        } // END for loop

        // whole form is valid - goto next stage
        if (formValid) {
            test('client side validation passed')
            return true;
        } else {
            test('client side validation failed - fix errors');
            msg.update(VS.msg, 'p.negative', '', false)
            return false;
        }
    };

    this.getField = function(el, state) {
        var id = el.getAttribute('id'),
            that = this;

        var error = (el.hasClass('radioList')) ? el : el.getParent();
        that.resetField(error);

        var fields = this.valSetting.validation.fields,
            i = 0,
            l = fields.length;

        for (i; i < l; i++) {
            if (fields[i].id === id) {
                test(fields[i])
                validateField(fields[i], state)
            }
        }
    } // END checkField

    this.init = function(thisSubmit, thisForm) {
        form = thisForm;
        submit = thisSubmit;
        var that = this;

        $ES('input', form).addEvents({
            keyup: function(event) {
                if (event.which !== 13) {
                    that.getField($(this), 'positive');
                }
            },
            blur: function() { that.getField($(this)); }
        })
        $ES('select', form).addEvents({
            change: function(e) { that.getField($(this)) }
        })
        $ES('input.radio', form).addEvents({
            change: function(e) {
                var parent = $(this).getParent().getParent();
                that.getField(parent)
            }
        })

        // on submit

        $(form).addEvent('submit', function(e) {
            //e = new Event(e).stop();
            var valid = that.validateForm();
            if (!valid) {
                e = new Event(e).stop();
            } else {
                // pass submit form
            }
        })

    };
};



f1.loginDisplay = function(){
    var url = window.location.href;
    var $loginForm = $('signinForm');
    var home = (url.indexOf('login.html') !== -1 || url.indexOf('/reg') !== -1)? true : false;
    var loggedIn = (Cookie.get('LOGIN') == false)? false : true;
    var qs = queryString();
    
    function queryString(){
        if(url.indexOf('?') !== -1){
            var qs = (url.slice(url.indexOf('?')+1, url.length));
            qs = qs.split('&');
            var x = {};
            for(var i=0; i<qs.length; i++){
                var a = qs[i].split('=');
                x[a[0]] = a[1];
            }
            var error = ('err' in x || 'error' in x || 'e' in x)? true : false ;
            return error;
        }else{
            return false
        }
    };
    if(!loggedIn && qs){
        $ES('#regMsg' ,$loginForm).setStyle('display','block');
        $ES('#regMsg p.negative' ,$loginForm).setStyle('display','block');
    }else if(home && loggedIn){
        $ES('#login_original', $loginForm).setStyle('display','none');
        $ES('#login_success', $loginForm).setStyle('display','block');
    }else if(!home && loggedIn){
        $ES('#login_original', $loginForm).setStyle('display','none');
    };
};
