/*
 * contactable 1.2.1 - jQuery Ajax contact form
 *
 * Copyright (c) 2009 Philip Beel (http://www.theodin.co.uk/)
 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
 *
 * Revision: $Id: jquery.contactable.js 2010-01-18 $
 *
 */
function refill(scope, value){
    $(scope).attr('value', value);
}

(function($){
    $.fn.extend({
        toggleValue: function(defaultText){
            return this.each(function(){
                $(this).focus(function(){
                    if ($(this).val() == defaultText && !$(this).hasClass('error')) {
                        $(this).val('');
                    }
                    $(this).blur(function(){
                        $(this).removeClass('error');
                        if ($.trim($(this).val()) == '') {
                            $(this).val(defaultText);
                        }
                    });
                });
            });
        }
    });
})(jQuery);

//extend the plugin
(function($){

    //define the new for the plugin ans how to call it	
    $.fn.contactable = function(options){
        //set default options  
        var defaults = {
            name: 'Name',
            vorname: 'Vorname',
            alter: 'Alter',
            email: 'Email',
            recievedMsg: 'Vielen Dank, wir haben Ihre Newsletterbestellung erhalten.',
            notRecievedMsg: 'Die Nachricht konnte nicht gesendet werden. Bitte versuchen Sie es später nochmal.',
            errorMsg: 'Bitte überprüfen Sie Ihre Angaben.',
            hideOnSubmit: false
        };
        
        //call in the default otions
        var options = $.extend(defaults, options);
        //act upon the element that is passed into the design    
        return this.each(function(options){
            //construct the form
            $(this).html('<form id="contactForm" action="" method="post"><div id="loading"></div><div class="holder"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr colspacing="2"><td><img src="img/headlines/newsletter.gif" /></td></tr><tr>' +
            '<td width="180" valign="top">' +
            '<input name="name" type="text" id="name" value="Name *" size="20" /><br />' +
            '<input name="vorname" type="text" id="vorname" value="Vorname *" size="20" /><br />' +
            '<input name="alter" type="text" id="alter" value="Alter" size="20" /><br />' +
            '<input name="email" type="text" id="email" value="E-Mail *" size="20"/>' +
            '</td>' +
            '<td valign="top"><span class="regular">Ja, bitte halten Sie mich auf dem Laufenden über NICE und Nightlife-Events in Rhein-Main.</span><br  /><span class="soft">(*) Pflichtfelder</span><br  /><br  />' +
            '<input name="button" type="image" src="img/btn.gif" class="btn"/>' +
            '</td></tr></table><div id="callback" style="margin-top:5px"></div></div></form>');
            
            $(this).find('#name').toggleValue('Name *');
            $(this).find('#vorname').toggleValue('Vorname *');
            $(this).find('#alter').toggleValue('Alter');
            $(this).find('#email').toggleValue('E-Mail *');
            
            $(this).find('#contactForm').submit(function(){
                if ($('#name').attr('value') == 'Name *') {
                    $('#name').attr('value', '');
                    setTimeout("refill( '#name' , 'Name *' )", 10);
                }
                if ($('#vorname').attr('value') == 'Vorname *') {
                    $('#vorname').attr('value', '');
					setTimeout("refill( '#vorname' , 'Vorname *' )", 10);
                }
                return false;
            });
            
            //validate the form 
            $("#contactForm").validate({
                //set the rules for the fild names
                rules: {
                    name: {
                        required: true,
                        required: true
                    },
                    vorname: {
                        required: true,
                        required: true
                    },
                    email: {
                        required: true,
                        email: true
                    }
                },
                //set messages to appear inline
                messages: {
                    name: "",
                    vorname: "",
                    alter: "",
                    email: ""
                },
                
                submitHandler: function(){
                    $('.holder').show();
                    $('#loading').show();
				

                    $.post('mail.php', {
                        subject: defaults.subject,
                        name: $('#name').val(),
                        vorname: $('#vorname').val(),
                        alter: $('#alter').val(),
                        email: $('#email').val()
                    }, function(data){
                        $('#loading').css({
                            display: 'none'
                        });
                        $('#error').css({
                            display: 'none'
                        });
						
						
                        if (data == 'success') {
							$('#callback').append(defaults.recievedMsg);
                            $('#callback').fadeIn(400).fadeOut(8000, function(){																			 
								$(this).empty();											 
								});
							
							refill( '#name' , 'Name *' );
							refill( '#vorname' , 'Vorname *' );
							refill( '#alter' , 'Alter' );
							refill( '#email' , 'E-Mail *' );
							
                        }
                        else {
                            $('#callback').append(defaults.notRecievedMsg);
							$('#callback').fadeIn(400).fadeOut(8000, function(){																			 
								$(this).empty();											 
								});
							
                        }
						
				
                    });
					
                }
				
            });
			
		
        });
    };
})(jQuery);