/**
 * @author Gerard van Helden, Zicht nieuwe media ontwerpers
 */
 
var zzDonate = {
    EXTERNAL_URL: 'https://www.allegoededoelen.nl/externalMod.php',
    INTERNAL_URL: 'donatie-service.php',
    fieldMappings:{
        project:'reference',
        amount:'bedrag',
        frequency:'check_frequency',
        firstname:'CN',
        sex:'geslacht',
        insertions:'tussenvoegsel',
        lastname:'achternaam',
        street:'owneraddress',
        nr:'huisnummer',
        postcode:'ownerZIP',
        city:'woonplaats',
        email:'EMAIL',
        method:'check_method',
        frequency:'check_frequency',
        accountnumber:'check_accountnumber',
        phone:'check_phone',
        birthdate:'check_birthdate'
    },
    methodMappings:{
        'ideal':'iDEAL', 
        'creditcard':'Creditcard',
        'authorize':'Machtiging'
    },
    freqMappings:{
        'eenmalig':'Eenmalig',
        'maand':'Maandelijks',
        'kwartaal':'Elk kwartaal',
        'jaar':'Jaarlijks'
    },

    freqMultipliers:{
        'eenmalig':1,
        'maand':12,
        'kwartaal':4,
        'jaar':1
    },

    amountValues:{
	    tdh:{
	        eenmalig:[10,20,50,'custom'],
	        maand:[5,10,20,50,'custom'],
	        kwartaal:[20,50,'custom'],
	        jaar:[50,'custom']
	    },
	    project:{
	        eenmalig:[17,50,'custom'],
	        maand:[17,50,'custom'],
	        kwartaal:[51,'custom'],
	        jaar:[204,'custom']
	    },
	    programma:{
	        eenmalig:[10,20,50,'custom'],
	        maand:[10,20,50,'custom'],
	        kwartaal:[30,50,'custom'],
	        jaar:[120,'custom']
	    }
    },
    
    trackTransaction: function() {
		var form = this;
		// use timestamp + lastname as order id.
		var orderId;
		orderId = form.elements[zzDonate.fieldMappings['lastname']].value
				.replace(/\W+/, '-')
				.replace(/-+/, '-')
		;
		var now = new Date();
		orderId += '-' + now.getTime();
		var totalYear =  (parseInt(form.elements[zzDonate.fieldMappings['amount']].value) * zzDonate.freqMultipliers[form.elements['frequency'].value]);

		var transaction = {
			orderId: orderId,
			totalYear : totalYear,
			amount: form.elements[zzDonate.fieldMappings['amount']].value,
			city: form.elements[zzDonate.fieldMappings['city']].value,
			type: form.elements[zzDonate.fieldMappings['method']].value
				+ '/' + form.elements[zzDonate.fieldMappings['frequency']].value,
			reference: form.elements['reference'].value,
			unit_price: form.elements[zzDonate.fieldMappings['amount']].value
		};
		var p;
		var exp = new Date();
		exp.setMonth(exp.getMonth()+1);
		for(p in transaction) {
			document.cookie = 'transaction[' + p + ']=' + encodeURI(transaction[p]) + '; path=/;';
		}
    },

    resetTransaction: function() {
    	var transaction = {
			orderId: null,
			totalYear : null,
			amount: null,
			city: null,
			type: null,
			reference: null,
			unit_price: null
		};
		var p;
		var exp = new Date();
		exp.setMonth(exp.getMonth()-1);
		for(p in transaction) {
			document.cookie = 'transaction[' + p + ']=; expires=' + exp.toUTCString() + '; path=/;';
		}
	}
};


zzDonationForm = new Class ( {
    initialize:function ( type ) {
        this.options = [];
        this.fieldEffects = [];
        
        this.type = type;
        this.fillAmountValues ();
    },
    
    
    getSelectedFrequency:function () {
        return this.getFieldValue('frequency');
    },
    
    getSelectedMethod:function () {
        var fields = this.getField('method');
        
        for ( var i = 0; i < fields.length; i ++ ) {
            if ( fields.item(i).checked ) {
                return fields.item(i).value;
            }
        }
        return null;
    },
    
    
    getFieldValue:function ( fieldName ) {
        var element = this.getField(fieldName);
        if ( !$type(element) ) {
            throw "invalid element " + fieldName;
        }
        return $(element).getValue();
    },
    
    
    getField:function ( fieldName ) {
        return this.getForm().elements[fieldName];
    },
    
    
    getForm:function () {
        return $('el_form_' + this.type);
    },
    
    
    clearAmount:function () {
        var selectedValue = null;
        $A(this.getField('amount').options).each ( function ( o ) {
            if ( !selectedValue && o.selected ) {
                selectedValue = o.value;
            }   
            o.parentNode.removeChild(o);
        } );
        return selectedValue;
    },
    
    
    fillAmountValues:function () {
        var selectedValue = this.clearAmount();
        var validValues = zzDonate.amountValues[this.type][this.getFieldValue('frequency')];
        var amountField = this.getField ('amount');
        
        validValues.each ( function ( v ) {
            var o = new Element('option', {value:v} );
            if ( v == 'custom' ) {
                o.setHTML ( 'Anders' );
            } else {
                o.setHTML ( '&euro; ' + v + ',-' );
            }
            if ( selectedValue == v ) {
                o.setAttribute('selected', 'selected');
            }
            o.injectInside(amountField);
        } );
        
        var custom = new Element('option', {value:'custom'});
        
        if ( !selectedValue ) {
            amountFields.options[0].selected='selected';
        } 
        
        this.checkCustomAmountInput ();
    },
    
    frequencyChanged:function ( select ) {
        this.fillAmountValues();
    },
    
    customAmountChanged:function ( input ) {
        if(isNaN(parseInt ( input.value ))) {
            input.value = '0';
            this.highlight(input);
            input.focus();
        } else if ( parseInt ( input.value ) < parseInt ( this.getField('amount').options[0].value ) ) {
	        this.highlight(input);
	        input.value = parseInt ( this.getField('amount').options[0].value );
	        input.focus();
	    } else {
	        input.value = parseInt(input.value);
	    }
    },
    
    updateValues:function (form) {
        $ES('span.frequencyValue',form).each ( function (span) {
            span.setText(zzDonate.freqMappings[this.getFieldValue('frequency')].toLowerCase())
        }, this );
        $ES('span.amountValue',form).each ( function (span) {
           span.setText(this.getAmount())
        }, this );
    },
    
    getAmount:function () {
        var selectedAmount = this.getFieldValue('amount');
        if ( selectedAmount == 'custom' ) {
            selectedAmount = this.getFieldValue('amount_custom');
        }
        return selectedAmount;
    },
    
    checkCustomAmountInput:function () {
	    $(this.getField('amount_custom'))[
	        this.getFieldValue('amount') == 'custom'
	        ? 'removeClass'
            : 'addClass'
	    ] ( 'hidden' );
	},
	
	selectValidMethods:function  ( select ) {
	    var eenmalig = (selectValue(select) == 'eenmalig');
	    var methods = select.form.elements['method'];
	    var amount = this.getAmount ();
	    for ( var i = 0; i < methods.length; i ++ ) {
	        var input = methods.item(i);
	        switch ( input.value ) {
	            case 'ideal':
	            case 'creditcard':
	                input.disabled = (!eenmalig || amount < 10);
	                break;
	            case 'authorize':
	                input.disabled = false;
	                if(!eenmalig) {
	                    input.checked = true;
	                }
	                break;
	        }
	    }
	},
	
	
    transferConfirmValues:function  ( form ) {
        var fields = ['firstname','lastname','insertions','project','street','nr','city','postcode','email','phone','birthdate'];
        
	    if ( this.getSelectedMethod() == 'authorize' ) {
	       fields.push('accountnumber');
	    } else {
	       
	    }
        
        fields.each ( function ( n ) {
            if ( !$type(form.elements[n]) ) {
                alert(n);
            }
	        form.elements[zzDonate.fieldMappings[n]].value = form.elements[n].value;
	    } );
	    
	    
	    form.elements[zzDonate.fieldMappings['amount']].value = (
	        selectValue ( form.elements['amount'] ) == 'custom'
	        ?   form.elements['amount_custom'].value
	        :   selectValue ( form.elements['amount'] ) 
	    );
	    form.elements[zzDonate.fieldMappings['sex']].value = selectValue ( form.elements['sex'] );
	    
	    form.elements[zzDonate.fieldMappings['frequency']].value = (
	        zzDonate.freqMappings[selectValue(form.elements['frequency'])]
	    );
	    
	    var method = getSelectedMethod(form);
	    
	    form.elements[zzDonate.fieldMappings['method']].value = zzDonate.methodMappings[method]; 
	    
	    form.onsubmit = zzDonate.trackTransaction;
	    if ( method == 'authorize' ) {
	        form.action = zzDonate.INTERNAL_URL;
	        form.elements['methode'].value = '';
	        form.target = '_self'; 
	    } else {
	        form.action = zzDonate.EXTERNAL_URL;
	        form.target = '_blank'; 
	        
	        switch( method ) {
	            case 'ideal':
	                form.elements['stapCC'].disabled = true;
	                form.elements['stapiDEAL'].disabled = false;
	                form.elements['methode'].value = "7";
	                break;
	            case 'creditcard':
	                form.elements['stapCC'].disabled = false;
	                form.elements['stapiDEAL'].disabled = true;
	                form.elements['methode'].value = "0";
	                break;
	        }
	    }
	},
	
	getFieldLabelEffect:function ( f ) {
	    var effectId = 'th.' + f.name;
	    if ( !$type(this.fieldEffects[effectId]) ) {
	       var th = f.parentNode.parentNode.getElementsByTagName('th').item(0);
	    
	       this.fieldEffects[effectId] = new Fx.Style (
	           th,
	           'color',
	           {duration:4000, transition:Fx.Transitions.Quart.easeIn}
	       );
	    }
	    return this.fieldEffects[effectId];
	},
	
		
	getFieldEffect:function ( f ) {
	    if ( !$type(this.fieldEffects[f.name]) ) {
	        this.fieldEffects[f.name] = new Fx.Style(
	           f,
	           'background-color',
	           {duration:4000, transition:Fx.Transitions.Quart.easeIn}
	        );
	    }
	    return this.fieldEffects[f.name]; 
	},
	
	
	highlight:function ( f ) {
	    var effect = this.getFieldEffect(f);
	    effect.stop();
	    effect.set( '#fdd' );
	    
	    effect.start.delay (
	        1000,
	        effect,
	        '#fff' 
	    );
	    
	    var effect2 = this.getFieldLabelEffect(f);
	    effect2.stop();
	    effect2.set('#f00');
        effect2.start.delay (
            1000,
            effect2,
            '#000' 
        );
	},
	
	nextStep:function (form,step) {
        try {
	        switch(step) {
	            case 1:
	                var missingFields = [];
	                ['firstname','lastname',/*'accountnumber',*/'street','nr','postcode','city'].each ( function (n) {
	                    if(form.elements[n].value.replace(/\s/,'').length == 0) {
	                        missingFields.push(n);
	                    }
	                    if ( n == 'email' ) {
	                        if ( !checkEmail ( form.elements[n].value ) ) {
	                            missingFields.push(n);
	                        }
	                    }
	                } );
	                if ( !selectValue ( form.elements['frequency'] ) ) {
	                    missingFields.push('frequency');
	                }
	                if ( !selectValue ( form.elements['amount'] ) ) {
	                    missingFields.push('amount');
	                }
	                if ( form.elements['type'].value == 'programma' || form.elements['type'].value == 'project' ) {
	                   if ( !form.elements['project'].options[form.elements['project'].selectedIndex].value ) {
	                       missingFields.push('project');
	                   }
	                }
	                
	                if ( missingFields.length ) {
	                    showMissingFieldsMessage(form);
	                    
	                    missingFields.each ( function ( f ) {
	                        this.highlight ( form.elements[f] );
	                    }, this );
	                } else {
	                    $E('div.missingFields', form).addClass('hidden');
	                    this.setActiveStep(form,2);
	                }
	                this.updateValues(form);
	                this.selectValidMethods(form.elements['frequency']);
	                
	                break;
	            case 2:
	                if ( 
	                   this.getSelectedMethod() == 'authorize' 
	                && !form.elements['accountnumber'].value.match ( /^[1-9][0-9.]*$/ ) 
	                ) {
                        showMissingFieldsMessage(form);
                        this.highlight(form.elements['accountnumber']);
	                } else {
	                    $E('div.missingFields', form).addClass('hidden');
		                this.transferConfirmValues ( form );
                        $E('tr.check-accountnumber')[
				            this.getSelectedMethod() == 'authorize'
				            ? 'removeClass'
				            : 'addClass'
				        ]( 'hidden' );
	                    this.setActiveStep(form,3);
	                }
	                
	                break;
	        } 
	    } catch ( e ) {
	        alert (e.message);
	    }
	    return false;
	},
	

	setActiveStep:function ( form, step ) {
	    var className = null;
	    for ( var i = 1; i <= 3; i ++ ) {
	        className = 'active-step-' + i;
	        if ( i == step ) {
	            form.addClass(className);
	        } else {
	            form.removeClass(className);
	        }
	    } 
	},
	
	previousStep:function ( form, step ) {
	    this.setActiveStep(form, step);
	},
	
	checkPost:function ( checkbox ) {
        var checks = checkbox.form.elements['post[]'];
        var map = {};
        $A(checks).each ( function ( c ) {
            map[c.value] = c; 
        } );
        if ( checkbox.value == 'magazine' || checkbox.value == 'email' ) {
            map['nee'].checked = !(map['magazine'].checked || map['email'].checked);
        } else {
            if ( checkbox.checked ) {
                map['magazine'].checked=false;
                map['email'].checked=false;
            }
        }
	}
} );

// basic email check
function checkEmail ( email ) {
    return email.test (
        /^\S+@\S+$/i
    );
}


function selectDefaultAmount ( select ) {
    var selectedValue = selectValue(select);
    var defaultValue = defaultValues[selectedValue];
    var amountField = select.form.elements['amount'];
    var currentAmount = selectValue(amountField);
    if ( currentAmount == 'custom' ) {
        currentAmount = parseInt ( select.form.elements['amount_custom'].value );
        if(isNaN(currentAmount)) {
            currentAmount = 0;
        }
    }
    if ( currentAmount > defaultValue ) {
        return;
    }
    
    for ( var i = 0; i < amountField.options.length; i ++ ) {
        var option = amountField.options[i];
        option.selected = (option.value == defaultValue); 
    }
    checkCustomInput(amountField);
}

function getSelectedMethod ( form ) {
    var methods = form.elements['method'];
    for ( var i = 0; i < methods.length; i ++ ) {
        if ( methods.item(i).checked ) {
            return methods.item(i).value;
        }
    }
    return null;
}

function selectValue ( select ) {
    return select.options[select.selectedIndex].value;
}

var g_overlay = null;
var g_iframe = null;
var g_frameContainer = null;
var g_overlayIsOpen = false;
var g_tips = [];
var g_tipEffects = {};


g_messageEffect = null;
function getMessageEffect ( div ) {
    if ( !g_messageEffect ) {
        g_messageEffect = new Fx.Style(
            div,
            'color',
            {duration:3000}
        );
    }
    return g_messageEffect;
}

var g_fieldEffects = {};


function showMissingFieldsMessage ( form ) {
    var div = $E('div.missingFields', form); 
    div.removeClass('hidden');
    getMessageEffect(div).stop();
    getMessageEffect(div).set('#f00');
    getMessageEffect(div).start('#000');
}



function enableDonateForm ( id ) {
    $ES('div.donatieformcon').each ( function (con) {
        con[
            con.id == id
            ? 'removeClass'
            : 'addClass'
        ] ( 'hidden' );
    } );
}

// zie donatie_formulier_special.tpl
zzDonateSimple = {
    validate: function(form) {
        var missingFields = [];
        $ES('.required', form).each(function(el){
            if(el.value.replace(/\s/, '').length == 0) {
                missingFields.push(el.name);
            }
            if ( el.name == 'EMAIL' ) {
                if ( !checkEmail ( el.value ) ) {
                    missingFields.push(el.name);
                }
            }
        });
        if ( missingFields.length ) {
            showMissingFieldsMessage(form);

            missingFields.each ( function ( f ) {
                var effect = new Fx.Style(
                   form.elements[f],
                   'background-color',
                   {duration:4000, transition:Fx.Transitions.Quart.easeIn}
                );
                effect.stop();
                effect.set( '#fdd' );

                effect.start.delay (
                    1000,
                    effect,
                    '#fff'
                );
            }, this );
            return false;
        } else {
            $E('div.missingFields', form).addClass('hidden');
            return true;
        }
    }
};