$(function ()
{
    var zindex = 10,
            dropped = 0,
            drop = function (event, ui) {
                if (ui.draggable.data('value') === $(this).data('value')) {
                    var top = $(this).position().top;
                    var left = $(this).position().left;
                    var color = $(this).css('color');
                    dropped++;
                    ui.draggable
                            .draggable({revert: false})
                            .draggable("option", "disabled", true);
                    $('#jplayer_well').jPlayer('play');
                    ui.draggable.animate({
                        top: top + 1,
                        left: left + 3
                    }, 900).css({'color': color, 'text-shadow': 'none'});
                    $(this).css('border', 'none');
                    if (dropped === 6) {
                        $(".rzepak").each(function () {
                            $(this).animateSprite({
                                fps: 2,
                                autoplay: true,
                                loop: false
                            },3000);
                        });
                    }
                } else {
                    $('#jplayer_wrong').jPlayer('play');
                }
            };
//    for (var i = 0; i <= 0; i++) {
//        $('main').append('<div style="top:0px;left:0px;" class="rzepak"></div>');
////        $('main').append('<div style="top:' + Math.floor((Math.random() * 50) + 280) + 'px;left:' + Math.floor((Math.random() * 500) + 300) + 'px;" class="rzepak"></div>');
//    }

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

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


});