$(function () {
    var zindex = 10,
            left = 1,
            top = 400,
            result = [1, 2, 3, 4, 5, 6, 7, 8],
            mix,
            dropped = 0,
            drop = function (event, ui) {
                if (ui.draggable.data('value') === $(this).data('value')) {
                    dropped++;
                    ui.draggable
                            .draggable({revert: false})
                            .draggable("option", "disabled", true);
                    $('#jplayer_well').jPlayer('setMedia', {mp3: './media/brawo.mp3'}).jPlayer('play');
                    ui.draggable.attr('style', 'visibility:visible;');
                    if (dropped === 8) {
                        startstop();
                        $('.start').animate({
                            top: 446,
                            left: 382
                        }, 300).bind('click', click);
                    }
                } else {
                    $('#jplayer_wrong').jPlayer('play');
                }
            };




    function shuffleArray(array) {
        for (var i = array.length - 1; i > 0; i--) {
            var j = Math.floor(Math.random() * (i + 1));
            var temp = array[i];
            array[i] = array[j];
            array[j] = temp;
        }
        return array;
    }

    click = function () {
        dropped = 0, left = 1,
                top = 400;
        mix = shuffleArray(result);
        for (var i = 0; i < 8; i++) {

            $('#drag' + mix[i]).css({left: left, top: top});
            left += $('#drag' + mix[i]).width() * 75 / 100;
        }
        $(".dragg").draggable({revert: true})
                .draggable("option", "disabled", false);
        swreset();
        startstop();
        $(".dragg").css('visibility', 'visible');
        $('form').css('display', 'block');
        $('.start span').css('display', 'none');
        $('.start').unbind('click');
        $('.start').animate({
            top: 626,
            left: 730
        }, 300);
    };



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

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

});

var ms = 0;
var state = 0;

function startstop() {
    if (state === 0) {
        state = 1;
        then = new Date();
        then.setTime(then.getTime() - ms);
    } else {
        state = 0;
        now = new Date();
        ms = now.getTime() - then.getTime();
        document.stpw.time.value = millisToTime(ms);
    }
}

function swreset() {
    state = 0;
    ms = 0;
    document.stpw.time.value = millisToTime(ms);
}
function millisToTime(ms) {
    x = ms / 100;
    setsec = Math.round(x % 99);
    x = ms / 1000;
    seconds = Math.round(x % 59);
    x /= 60;
    minutes = Math.round(x % 59);

    return minutes + ":" + seconds + "." + setsec;
}
function display() {
    setTimeout("display();", 50);
    if (state === 1) {
        now = new Date();
        ms = now.getTime() - then.getTime();
        document.stpw.time.value = millisToTime(ms);
    }
}
window.onload = display;