$(document).ready(function () {
    $(".jq-open-group").click(function () {
        $(this).next(".ys-feed-setting-group").animate({height: 'toggle'});
        if ($(this).find(".fa").hasClass("fa-angle-down")) {
            $(this).find(".fa-angle-down").removeClass("fa-angle-down").addClass("fa-angle-up");
        } else if ($(this).find(".fa").hasClass("fa-angle-up")) {
            $(this).find(".fa-angle-up").removeClass("fa-angle-up").addClass("fa-angle-down");
        }
    });

    // Then Bind the Buttons that are fix and need no dynamic rebinding
    $('.new-package-template').off('click').on('click', function () {
        // clone empty fieldset
        let $div = $('#package-template-xKEYx');
        let number = $('.ys-package-template-wrapper').length;
        let $klon = $div.clone().prop('id', "package-template-" + number);

        // For replacement of the ID we have to put the clone into a div, as html returns the inner value
        $klon = $('<div>')
            .append($klon)
            .html()
            .replace(/xKEYx/g, number);

        // insert the new element
        $($klon).hide().appendTo('#package-template-break').fadeIn(1000);
        $('<div class="new-setting-connection"><span></span></div>').appendTo('#feed-settings-group-break');
        // $('#feed-settings-group-break').before($klon).fadeIn(1000);

        return false;
    });

    $('.ys-package-template-delete').off('click').on('click', function (e) {
        e.preventDefault();
        $(this).closest('.ys-package-template-wrapper').find('.ys-package-template-really-delete').animate({width: 'toggle'});
        if ($(this).children('i.fa').hasClass('fa-trash-alt')) {
            $(this).children('i.fa').removeClass('fa-trash-alt').addClass('fa-ban');
        } else {
            $(this).children('i.fa').removeClass('fa-ban').addClass('fa-trash-alt');

        }
    });

    $('.ys-package-template-really-delete').off('click').on('click', function (e) {
        e.preventDefault();
        // find group to delete and form to send
        group = "package-template-" + $(this).data("fieldid");
        myform = $(this).closest("form");
        // remove group and send form for storage without the deleted data
        $("#" + group).remove();
        myform.submit();
    });

    var changeTimer;

    function doneChanging(changed) {
        changed.closest('form').submit();
    }

    $('input.onChangeAmount').on('change', function () {

        $this = $(this);
        changeTimer = setTimeout(function () {
            doneChanging($this);
        }, 500);
    });

    $('.onChangeSubmit').on('change', function (e) {
        e.preventDefault();
        $this = $(this);
        var time = 0;
        if (time = $this.data("time")) {
            clearTimeout(changeTimer);
            changeTimer = setTimeout(function () {
                doneChanging($this);
            }, time);
        } else {
            clearTimeout(changeTimer);
            $this.closest("form").submit();
        }
    });

    $('onClickSubmit').on('click', function (e) {
        $(this).closest("form").submit();
    });
});
