$(document).ready(function(){
    
    $('<div id="mail-form-info" title="Status Newsletter"></div>').dialog({
        autoOpen: false,
        width: 350,
        modal: true,
        resizable: false,
        buttons: {
            OK: function() {
                $( this ).dialog( "close" );
            }
        }
    });
    
    $('#mail-form #name').click(function(){ if(this.value=='Name here') this.value=''; })
    $('#mail-form #email').click(function(){ if(this.value=='E-mail here') this.value=''; })
   
    var opt={
        rules: {
            name: "required",
            email: {
                required:true,
                email:true
            }
        },
        messages: {
            name: "Name required",
            email: "Email must match with email@mail.com"
        },
        invalidHandler: function(form, validator) {
            $('#mail-form-info').dialog( "open" );
            $('#mail-form #name').val('Name here');
            $('#mail-form #email').val('E-mail here');
        },
        submitHandler: function(form) {
            var options = { 
                target:        '#mail-form-info',   // target element(s) to be updated with server response 
                success:       function(responseText, statusText, xhr, $form){
                    $('#mail-form-info').html(responseText).dialog( "open" ).show();
                    $('#mail-form #name').val('Name here');
                    $('#mail-form #email').val('E-mail here');
                }
            }; 
            $(form).ajaxSubmit(options);
        },
        errorLabelContainer: $('#mail-form-info'),
        wrapper: 'li'
    }
    $('#mail-form').validate(opt);

    $.ifixpng('/jscripts/jquery/jquery.ifixpng/blank.gif');
    $('.imgPng:visible').ifixpng();
});