$(function ()
{
    var count = 1;
    var zindex = 10;
    var droppPict = 0;
    var droppText = 0;

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

    var drop_p = function (event, ui) {
        if (ui.draggable.data('dropped') === 0) {
            ui.draggable.data('dropped', 1);
            droppPict++;
            $(this).data('value', ui.draggable.data('value'));
        }
        check();
    };

    var out_p = function (event, ui) {
        if (ui.draggable.data('dropped') === 1) {
            ui.draggable.data('dropped', 0);
            droppPict--;
            $(this).data('value', 0);
        }
        check();
    };

    var drop_t = function (event, ui) {
        if (ui.draggable.data('dropped') === 0) {
            ui.draggable.data('dropped', 1);
            droppText++;
            $(this).data('value', ui.draggable.data('value'));
        }
        check();
    };

    var out_t = function (event, ui) {
        if (ui.draggable.data('dropped') === 1) {
            ui.draggable.data('dropped', 0);
            droppText--;
            $(this).data('value', 0);
        }
        check();
    };

    $(".target_t").droppable({
        accept: ".textbox",
        tolerance: "pointer",
        drop: drop_t,
        out: out_t
    });

    $(".target_p").droppable({
        accept: ".picture",
        tolerance: "pointer",
        drop: drop_p,
        out: out_p
    });

    function check() {
        if (droppPict === droppText && droppPict === count && droppText === count) {
            count++;
            setTimeout(function ()
            {
                if (count < 5) {
                    $('#jplayer').jPlayer('setMedia', {mp3: './media/277-' + count + '.mp3'}).jPlayer('play');
                } else {
                    var a = $("#t1").data('value');
                    var b = $("#t2").data('value');
                    var c = $("#t3").data('value');
                    var d = $("#t4").data('value');

                    var w = $("#p1").data('value');
                    var x = $("#p2").data('value');
                    var y = $("#p3").data('value');
                    var z = $("#p4").data('value');
                    if (
                            (a === 1) &&
                            (b === 2) &&
                            (c === 3) &&
                            (d === 4) &&
                            (w === 1) &&
                            (x === 2) &&
                            (y === 3) &&
                            (z === 4)
                            )
                    {
                        $('#jplayer_well').jPlayer('play');
                    } else {
                        $('#jplayer_wrong').jPlayer('play');
                        setTimeout(function ()
                        {
                            document.location.reload();
                        }, 2500);
                    }
                }
            }, 1000);
        }
    }
});