$(document).ready(function(){
    moveActiveBar($('.testing-result-tabs li:first-child a[data-toggle="tab"]'));

    $('.testing-result-tabs a[data-toggle="tab"]').on('show.bs.tab', function (e) {
        moveActiveBar($(e.target));
    });

    $(".create-voca-input .input-content .dropdown-menu li").click(function(event) {
        $(this).parents(".create-voca-input").find('#voca-type').val($(this).attr('val'));
        $(this).parents(".create-voca-input").find('.input-content .dropdown button span').text($(this).text());
    });

    $("#modal-create-voca").on('shown.bs.modal', function () {
        $('#voca-name').focus();
    })
});

function moveActiveBar(element){
    var pos = $(element).parent('li').position().left;
    var width = $(element).innerWidth();
    var bar = $('.testing-result-tabs .active-bar');

    $(bar).innerWidth(width);
    $(bar).css('left', pos);
}




$(document).ready(function(){
    // CHART
    var cQuantity = parseInt($(".md-result-chart-content").attr('quantity'));
    var cRow = parseInt($(".md-result-chart-content").attr('row'));
    var dataRoot = $.parseJSON($(".md-result-chart-content").attr('data'));

    var data = Array();
    for(var i = 0; i < dataRoot.length; i++){

        var distanceFirst = 50;
        var distanceLast = 50;
        var distanceMiddle = 50;

        if(i == 0){
            data.push({ name: '', percent: Math.max(dataRoot[i].percent - distanceFirst,1), textShow: [] });
        }

        if(i == dataRoot.length - 1){
            data.push(dataRoot[i]);
            data.push({ name: '', percent: Math.max(dataRoot[i].percent - distanceLast,1), textShow: [] });
        }else{
            data.push(dataRoot[i]);
            data.push({ name: '', percent: Math.max(Math.min(dataRoot[i].percent,dataRoot[i+1].percent) - distanceMiddle, 1), textShow: [] });
        }
        
    }

    $(".md-result-chart-content .md-result-row").empty();
    for(var i = cRow - 1; i >= 0; i--){
        $(".md-result-chart-content .md-result-row").append('<span class="row-child" val="' + (Math.round(cQuantity / (cRow - 1) * i)) + '"></span>');
    }

    $(".md-result-chart-content .md-result-col").empty();
    for(var i = 0; i < data.length; i++){
        $(".md-result-chart-content .md-result-col").append('<span class="col-child ' + (data[i].class == undefined ? "": data[i].class) + '">' + data[i].name + '</span>');
    }

    $(".md-result-chart-content .md-result-point").empty();
    for(var i = 0; i < data.length; i++){

        $(".md-result-chart-content .md-result-point").append('<span class="point-child"><span class="point-item" style="bottom: ' + data[i].percent + '%;' + (data[i].name == ''?'display: none':'') + '"><span class="point-detail"></span></span></span>');
        for (var j = 0; j < data[i].textShow.length; j++) {
            $(".md-result-chart-content .md-result-point .point-child:last-child .point-item .point-detail").append("<p>" + data[i].textShow[j] + "</p>");
        }
    }

    var cWidth = 410;
    var cHeight = 260;
    var cPolygon = "";
    var cPolyline = "";
    var cWidthItem = 410/data.length;


    for(var i = 0; i < data.length; i++){
        var cXItem = cWidthItem * i + cWidthItem/2;
        var cYItem = cHeight*(100 - data[i].percent)/100;

        var temp = "";

        if(i == 0){
            temp = "M0," + cHeight*(100 - data[i].percent)/100;
            cPolygon += "L0," + cHeight*(100 - data[i].percent)/100;
        }else{
            var cXItem1 = cWidthItem * i;
            var cYItem1 = cHeight*(100 - data[i-1].percent)/100;
            var cXItem2 = cWidthItem * i;
            var cYItem2 = cHeight*(100 - data[i].percent)/100;

            if(i == data.length - 1){

                temp = " C" + cXItem1 + "," + cYItem1 + " " + cXItem2 + "," + Math.min((cYItem2+ cHeight*0.1),cHeight) + " " + cWidthItem * (i + 1) + "," + cYItem + " ";

            }else if(i == 1){

                temp = " C" + cXItem1 + "," + Math.min((cYItem1+ cHeight*0.1),cHeight) + " " + cXItem2 + "," + cYItem2 + " " + cXItem + "," + cYItem + " ";

            }else{

                temp = " C" + cXItem1 + "," + cYItem1 + " " + cXItem2 + "," + cYItem2 + " " + cXItem + "," + cYItem + " ";
            }

            cPolygon += temp;

        }

        cPolyline += temp;


        
    }

    cPolygon = "M0" + "," + cHeight + " " + cPolygon + " L" + cWidth + "," + cHeight + 'Z';


    $("#chart-polyline").attr('d', cPolyline);
    $("#chart-polygon").attr('d', cPolygon);

    $(window).on('resize',function(event) {

        $(".md-result-chart-content").innerHeight($(".md-result-chart-content").innerWidth()*310/450);
        if($(".md-result-chart-content").innerWidth() == 0 ){
            $(".md-result-chart-content").innerHeight(310);
        }
    });

    $(document).ready(function(){
        $(".md-result-chart-content").innerHeight($(".md-result-chart-content").innerWidth()*310/450);
        if($(".md-result-chart-content").innerWidth() == 0 ){
            $(".md-result-chart-content").innerHeight(310);
        }
    });

    if(dataRoot.length > 1){

        setTimeout(function(){
          
            document.getElementById('chart-polyline-animate').beginElement();
        }, 1000);

    }
});



// END CHART


// Flip Word
$(document).on('click', '.testing-result-word-item .item-cover',function(){
    var element = $(this).parents('.testing-result-word-item');
    if( $(element).hasClass('item-flipper') ){
        $(element).removeClass('item-flipper');
    }else{
        $(element).addClass('item-flipper');
        $(element).find('.item-sound').trigger('click');
    }
    $('.item-tip.alert').fadeOut();
});

$(document).on('click', '.testing-result-word-item .item-sound', function(event){
    event.stopPropagation();
});