/*global $*/

/**

* Scripts for both the "Add Link" dialog and the "Edit Link".
*
* They're Bootstrap Modals that initially appear hidden and only
* get shown when requested.
*/

($(function(){

// *****************************************************
// CODE DUPLICATION
// (see `scripts.js`)
/**
 * Returns a new cute spinner GIF for
 * showing indeterminate progress.
 */
function newSpinner() {
        return $('<img/>').attr("src", "/images/loader.gif");
}
/* Here we preload the image so it won't take long
 * when creating it for the first time */
newSpinner().appendTo('body').hide();
// *****************************************************

// Prevent user from double-submitting a <form>
// 1. Make buttons hide when user submits
//    (either by clicking on 'Add Link' or pressing Enter)
// 2. As soon as a <form> starts being submitted,
//    disable further submissions.
var submitting = false;
$('.input-link form').submit(function() {
        // By returning false we prevent further submissions
        if (submitting)
                return false;

        // <input> validation!
        // Only submit if we have an URL on the <form>
        if ($('.input-link-url').val() !== "") {

                $('.input-link form button').addClass('disabled');
                submitting = true;
        }
        // Makes the form start submitting
        return true;
});

/**
 * The awesome new category form.
 * We have a button "New Category" that shows
 * a form when clicked.
 *
 * When that form is filled, we hide it and
 * show the button again.
 */
$('.new-category-form').hide();

$('.new-category').click(function(e) {
        /* otherwise it would trigger the form validation */
        e.preventDefault();

        $(this).hide();
        $('.new-category-form').show();
});

/* ...and when this form is submitted, we send an AJAX
 * request for a new category.
 *
 * If successful it refreshes both <select> fields on
 * the page.
 */
$('.new-category-form').submit(function(e) {
        /* Don't refresh the page! */
        e.preventDefault();

        /* Will replace the button text with a nice
         * progress spinner */
        var form   = $(this);
        var button = $('.new-category-button');

        var buttonText = button.html();
        var spinner    = $(newSpinner());

        button.html(spinner);

        $.ajax({
                url:  form.attr('action'),
                type: 'POST',
                data: {
                        name:   $('.new-category-name').val(),
                        parent: $('.new-category-parent').val()
                },

                /* Will add the latest Category to the top of the
                 * dropdown menu and mark it as selected
                 */
                success: function(responseData, textStatus, jqXHR) {
                        var dropdown1 = $('.input-link-category-one');
                        var dropdown2 = $('.input-link-category-two');

                        var parsedResponse = $.parseJSON(responseData);
                        var value = parsedResponse['id'];
                        var name  = parsedResponse['name'];

                        dropdown1
                                .prepend('<option value="' + value + '">' + name + '</option>')
                                .val(value);
                        dropdown2
                                .prepend('<option value="' + value + '">' + name + '</option>')
                                .val(value);
                },
                error: function(responseData, textStatus, jqXHR) {
                        /* This error-handling function sucks! */
                        // form.append(
                        //      $("<div>Couldn't apply the setting - please reload the page</div>")
                        //              .attr('class', 'alert alert-danger')
                        //              .attr('role', 'alert')
                        // );
                        alert('no!');
                },
                complete: function() {
                        /* taking out the spinner image */
                        button.html(buttonText);
                        spinner.remove();

                        form.hide();
                        $('.new-category').show();
                }
        });
});

/* Beautiful tag-handling stuff */
$('.tagsinput').magicSuggest({
        /* URL to make an AJAX call to get results */
        data: '/tags',
        /* by default it uses POST, what a bummer */
        method: 'get',
        /* how much it waits before triggering the AJAX query */
        typeDelay: 0,
        noSuggestionText: 'No tags like this',
        placeholder: 'Yeah',
        /* use , to add a tag
         * (why does it not work?
         *  it keeps accepting tags ending with commas!) */
        useCommaKey: true,
        /* choose how many tags you want */
        maxSelection: null,
        /* show lines with alternated colors */
        useZebraStyle: true
});

}));