/**
 *
 *
 *
 * TODO!!!!!!!!!!!!!!!!
 * Buttons moeten nog opgevangen worden, en verplaatst, voor dit specifieke formulier. forms moeten dus "controls" ondersteunen om deze los te verkrijgen later.
 * ook moet een "enter" er voor zorgen dat het formulier gesubmit word
 *
 *
 *
 *
 */

$(function(){
    var displayFormErrors = function(form, error, title) {

        // Decide what the text should be
        var errorTooltip = (typeof form.data('qtip') !== 'undefined' ? form.qtip('option', 'content.text') : $('<div />'));

        var newMessage = true;
        $(error[0].nodeName.toLowerCase()+'[for="'+error.attr("for")+'"]', errorTooltip).each(function() {
            if($(this).text() === error.text()) newMessage = false;
        });

        if(!newMessage) return;
        error.css({textShadow: '0 1px 0 #ddd', color: '#555', borderBottom: '1px dashed #ddd', padding:'3px'});
        errorTooltip.append(error);
        // De bedoeling is hier dat ik check of de errors al bestaan, en zo ja dan doe ik niks.
        // Als ze echter nog NIET bestaan, dat append ik ze en re-load ik de tooltip
        if(typeof form.data('qtip') !== 'undefined') {
            form.qtip('option', 'content.text', errorTooltip);
            return;
        }
        form.qtip({
          id: 'Xs-Form-Errors',
          content: {
             text: errorTooltip, // Use an empty div as content so we can attach the ThemeSwitcher easily
             title: {
                text: title || 'Errors', // Even the titlebar...
                button: 'close' // ...and buttons get styled by ThemeRoller!
             }
          },
          position: {
             target: form,
             my: 'left center',
             at: 'right center',
             viewport: $(window)
          },
          show: {
              event: false,
              ready: true,
              effect: function(offset) {
                $(this).fadeIn('fast');
              }
          },
          hide: {
              event : false,
              effect: function(offset) {
                 $(this).fadeOut('fast', function() {
                     form.qtip('destroy');
                 });
              }
          },
          style: {
             classes: 'ui-tooltip-shadow', // Optional shadow...
             tip: 'left center', // Tips work nicely with the styles too!

             /*
              * The important part: style.widget property

              * This tells qTip to apply the ui-widget classes to
              * the main, titlebar and content elements of the qTip.
              * Otherwise they won't be applied and ThemeRoller styles
              * won't effect this particular tooltip.
              */
             widget: true
          }
       }).qtip('option', 'content.text', errorTooltip);

    };

    var removeError = function(error, errorForm, last) {
        last = last | false;
        if(typeof errorForm.data('qtip') !== 'undefined') {
            $(error[0].nodeName.toLowerCase()+'[for="'+error.attr("for")+'"]', errorForm.qtip('option', 'content.text')).remove();
            if($(error[0].nodeName.toLowerCase()+'.error', errorForm.qtip('option', 'content.text')).length == 0 && last) {
                errorForm.qtip('destroy');
            }
        }
    }
    
    $('form').each(function() {
        var validatedForm = $(this);

        validatedForm.validate({
            
            errorElement: "div",
            errorPlacement: function(error, element)
            {
                displayFormErrors(validatedForm,error, 'Oops! Something went wrong.');
            },
            showErrors: function(errorMap, errorList) {

                if(typeof validatedForm.data('qtip') !== 'undefined') {
                    for(var el in errorList) {

                        var id = $(errorList[el].element).attr('id');
                        console.log($('#'+id));
                        $(validatedForm.qtip('option', 'content.text')).find('[for="'+id+'"]').each(function() {
                            if(errorMap[id] !== $(this).text()) {
                                removeError($(this), validatedForm);
                            }
                        });
                    }
                }



                this.defaultShowErrors();
            },
            success : function(a, b) {
                removeError(a, validatedForm, true);
            },
            submitHandler: function(form) {

                $.ajax({
                    url: validatedForm.attr('action'), /*wel nog ff correcte form pakken*/
                    type: "POST",
                    data: $(form).serialize(),
                    dataType: "json",
                    success: function(data) {
                        
                        if(data.status === 'ok') {
                            if(data.callback === 'redirect') {
                               window.location.href = data.data;
                            } else if(data.callback === 'clearAndMessage') {
                                validatedForm.get(0).reset();
                                var dialog = $( "<div />" ).attr('title',data.data.title).html('<div />').html(data.data.message).dialog({
                                    height: 180,
                                    modal: true,
                                    buttons: {
                                        Ok: function() {
                                            $( this ).dialog( "close" );
                                        }
                                    }
                                });
                                console.log(dialog);
                            }
                            // {"status":"ok","callback":"redirect","data":"\/admin\/index\/dashboard"}
                        } else if(data.status === 'error') {

                            var validator = $(form).validate();
                            for(var element in data.messages) {
                                if(element === 'callback') {
                                    
                                    for(var errKey in data.messages[element]) {
                                        var myError = $('<div />').attr('for','form').text(data.messages[element][errKey]);
                                        displayFormErrors(validatedForm,myError, 'Oops! Something went wrong.');
                                    }
                                    $(":input:first", validatedForm).focus();
                                } else {
                                    for(var errKey in data.messages[element]) {
                                    var myError = $('<div />').attr('for',element).text(data.messages[element][errKey]);
                                        displayFormErrors(validatedForm,myError, 'Oops! Something went wrong.');
                                    }
                                }
                            }
                        }
                    }
                });
            }
        });
    });
    $('button').button();
});