$(function () {

    var zindex = 10,
            dropped = 0,
            borders = 0,
            drop = function (event, ui) {
                if (ui.draggable.data('value') === $(this).data('value')) {
                    var top = $(this).position().top;
                    var left = $(this).position().left;

                    dropped++;
                    ui.draggable
                            .draggable({revert: false})
                            .draggable("option", "disabled", true)
                            .animate({
                                top: top,
                                left: left
                            }, 900);
                    $(this).css('border', 'none');

                    if (dropped === 7) {

                        setTimeout(function () {
                            $('.map').fadeOut(600);
                            $('.panel').fadeOut(600);
                            $('.border').fadeOut(100);
                            $('.bg').animate({
                                width: 1914,
                                height: 1441,
                                top: -131,
                                left: -327
                            }, 600);

                            $('.dragg').each(function () {
                                $(this).animate({
                                    top: $(this).position().top * 158 / 100,
                                    left: $(this).position().left * 157 / 100 - 170
                                }, 600);
                                $('.children').fadeIn(600);
                                $('.assignment_description').html('Dzieci z&nbsp;czterech różnych krajów chciały pojechać do&nbsp;Polski. Zaznacz, w&nbsp;jakim kierunku powinno udać&nbsp;się każde z&nbsp;nich. Kliknij w odpowiednią literę oznaczającą kierunek przy róży wiatrów.');
                            });
                        }, 1000);
                    }
                } else {
                    $('#jplayer_wrong').jPlayer('play');
                }
            };

    $('.border').click(function () {
        $(this).removeClass('hid').unbind('click');
        borders++;
        if (borders === 4) {
            $('#jplayer_well').jPlayer('play');
            $('.map').unbind('click');
            $('.dandd').fadeIn(600);
        }
    });

    $('.map').click(function () {
        $('#jplayer_wrong').jPlayer('play');
    });

    $('.dir').click(function () {
        var $child = $(this).parent().parent();
        if ($(this).text() === $child.data('value')) {
            $('#jplayer_well').jPlayer('play');
            $(this).parent().fadeOut(400);
            if ($(this).text() === "N" || $(this).text() === "S") {
                $child.animate({
                    top: $child.data('pos')
                },900);
            } else {
                $child.animate({
                    left: $child.data('pos')
                },900);
            }
        } else {
            $('#jplayer_wrong').jPlayer('play');
        }
    });

    $('.dragg').draggable({
        start: function () {
            zindex++;
            $(this).css('z-index', zindex);
        },
        revert: true,
        revertDuration: 900
    });

    $(".dropp").droppable({
        accept: ".dragg",
        tolerance: "pointer",
        drop: drop
    });

});