$(document).ready(function () {
    expand_flag = false;
    progress = false;
    $('#chemtrails-service').click(function () {

        $.post('http://www.forum-creatives-lernen.de/chemtrails/service.php', {

        }, function (data) {
            alert(data);


        });
    });


    $('#close_me').click(function () {
        $(".textbox").toggle();

    });
    $('#info_me').click(function () {
        $(".textbox").toggle();

    });
    $('.element').draggable({
        containment: '#content',
        cursor: 'move',
        revert: true,
        start: keepItUp,
        stop: keepItDown
    });

    var element = $('.element');
    var eventType = ((document.ontouchstart !== null) ? 'mousedown' : 'touchstart');

    element.bind(eventType, function () {

        $('.element').attr('active', 'false');
        $('.element').css('border', '1px solid #0090DF');
        $(this).css('border', '1px red solid');
        $(this).attr('active', 'true');
    });
    element.click(function () {

        $('.element').attr('active', 'false');
        $('.element').css('border', '1px solid #0090DF');
        $(this).css('border', '1px red solid');
        $(this).attr('active', 'true');
    });
    function moveEngine(that) {
        progress = true;
        $('.target').css('border', '1px solid #0090DF');
        $(that).css('border', '1px red solid');
        source_id = $("[active='true']").attr('id');
        source = $("[active='true']");
        target_id = $(that).attr('id');
        target = $(that);

        ooben = $('#upper').outerHeight();

        if (target_id == source_id) {
            position = source.position();
            soben = position.top;
            slinks = position.left;
            tposition = target.position();
            toben = tposition.top;
            tlinks = tposition.left;
            links = tlinks - slinks + 2;
            oben = toben - soben + ooben + 2;

            source.animate({
                left: links + 'px',

                top: oben + 'px'

            },
                    {duration: 0,
                        complete: function () {
                            paket = source.clone();
                            zelle = target.parent();
                            paket.css('top', '0px');
                            paket.css('left', '0px');
                            zelle.append(paket);
                            source.remove();
                            target.remove();
                            correct();
                            progress = false;
                        }

                    });



        } else {
            wrong();
        }
    }
    $('.target').click(function () {
        moveEngine(this);
    });
    $('.target').droppable({
        drop: handleDropEvent
    });
    function reward(text) {
        $('#ptable').html('');
        $('#reward').show();
        $('#rewardtext').html(text);
    }
    function evaluate(richtig) {

        mode = $('#mode').val();
        if (mode == 'H') {
            all = 44;
        }
        if (mode == 'X') {
            all = 112;
        }
        if (mode == 'N') {
            all = 38;
        }
        if ((mode == 'A') || (mode == 'U')) {
            all = 15;
        }

        if (richtig == all) {
            falsch = $(".errors").html();
            falsch = parseInt(falsch);
            if (falsch == 0) {
                text = 'Perfekt..';
                
            }
            if (falsch > 0) {
                text = 'Sehr gut, aber nicht perfekt';       
            }
            if (falsch > 0) {
                text = 'Fast richtig';       
            }
            if (falsch > 20) {
                text = 'Nicht so gut';       
            }
             if (falsch > 30) {
                text = 'Bitte naochmal wiederholen';       
            }
            reward(text);
        }
    }
    function correct() {
        richtig = $(".correct").html();
        richtig = parseInt(richtig) + 1
        $(".correct").html(richtig);


        vid = document.getElementById("player");
        vid.play();
        evaluate(richtig);

    }
    function wrong() {
        falsch = $(".errors").html();
        falsch = parseInt(falsch) + 1
        $(".errors").html(falsch);
        vid = document.getElementById("player_error");
        vid.play();
    }
    function keepItUp(event, ui) {
        $(".navbar.navbar-default").css('z-index', '10001');
        ui.helper.css('z-index', '9000');

    }
    function keepItDown(event, ui) {
        ui.helper.css('z-index', '0');
    }

    function handleDropEvent(event, ui) {

        var element = ui.draggable;
        var nr = element.attr('id');
        var pos = $(this).attr('id');
        source = $(this);
        id = $(this).attr("id");

        target = $(".target[id=" + id + "]");

        if (pos == nr) {
            element.draggable('disable');
            element.position({
                of: $(this),
                my: 'left top',
                at: 'left top'
            });
            element.draggable('option', 'revert', false);

            correct();
            $(this).css('background-color', 'transparent');
            paket = element.clone();
            zelle = target.parent();
            paket.css('top', '0px');
            paket.css('left', '0px');
            zelle.append(paket);

            target.remove();
            element.remove();
            source.remove();



        } else {
            wrong();
        }

    }
    $('#expand').click(function () {

        switch (expand_flag) {
            case true:
                $('[data-type=A]').hide();
                $('[data-type=P]').hide();
                $('[data-type=N]').hide();
                $('[data-type=U]').hide();
                $('[data-type=G]').hide();
                expand_flag = false;
                break;
            case false:
                $('[data-type=A]').show();
                $('[data-type=P]').show();
                $('[data-type=N]').show();
                $('[data-type=U]').show();
                $('[data-type=G]').show();
                expand_flag = true;
                break;

            default:

                break;
        }

    });

    $('#mode').change(function () {

        if ($(this).val() == 'N') {
            expand_flag = false;
        }
        if ($(this).val() == 'H') {
            expand_flag = true;
        }
        if ($(this).val() == 'U') {
            expand_flag = false;
        }
        if ($(this).val() == 'A') {
            expand_flag = false;
        }
        if ($(this).val() == 'X') {
            expand_flag = false;
        }
        $('#expand').click();
    });
    $('#reset').click(function () {
        $.post('../lars/ajax/chemtrail_service.php', {
            action: 'reset',
            befehl_id: ''

        }, function (data) {
            $(".correct").html('0');
            $(".errors").html('0');
            parts = JSON.parse(data);
            $('#stockpile').html(parts.stockpile);
            $('#ptable').html(parts.ptable);

            $('.element').draggable({
                containment: '#content',
                cursor: 'move',
                revert: true,
                start: keepItUp,
                stop: keepItDown

            });
            $('.element').bind('click', function () {

                $('.element').attr('active', 'false');
                $('.element').css('border', '1px solid #0090DF');
                $(this).css('border', '1px red solid');
                $(this).attr('active', 'true');
            });
            $('.target').click(function () {
                moveEngine(this);
            });
            $('.target').droppable({
                drop: handleDropEvent
            });
            $('#reward').hide();
        });
    });
    $('#animate').click(function () {

        //$(this).attr('disabled', true);
        count = 0;
        anzahl = $(".element").length;

        offset = $('#ps_offset');
        offsetpos = offset.position();

        olinks = offsetpos.links;
        ooben = $('#upper').outerHeight();
        //alert(ooben);
        $("#stockpile").css('overflow', '');
        var shuffle_array = new Array();
        $(".element").each(function () {
            id = $(this).attr("id");
            //if($(this).attr("data-type")=='H'){
            shuffle_array.push(id);
            //}
        });


        var myVar = setInterval(myTimer, 50);
        var index = 0;
        function myTimer() {
            var d = new Date();
            var t = d.toLocaleTimeString();
            $("#demo").html(t + '-' + index);
            if (progress == false) {
                id = shuffle_array[index];
                var element = $("[element-id=" + id + "]");
                mode = $('#mode').val();
                if (element.attr('data-type') == mode || mode == 'X') {
                    element.click();
                    $("[target-id=" + id + "]").click();
                }
                index++;
            }
            if (index > anzahl) {
                myStopFunction();
                $(this).attr('disabled', false);
            }
        }

        function myStopFunction() {
            clearInterval(myVar);
        }

    });

});