{% extends 'base.template.html' %}
{% load staticfiles %}
{% block title %} Visualización {% endblock %}
{% block headScript %}
    <script src="{% static "js/d3.v3.min.js" %}"></script>
{% endblock %}
{% block content %}
    <div id="row">
        <div class="col-md-9" id="content">
            <h3 class="text-center">{{propuesta}}</h3><hr>
                <div id="texto">
                </div>
        </div>
        <div class="col-md-3">
            <div class="btn-group" align="center">
                <button class="btn btn-default" id="verTodos">Ver Todos</button>
                <button class="btn btn-default" id="Limpiar">Limpiar</button>
            </div>
            <div id="topic">
            </div>
        </div>
    </div>

    
    <script> 
        var mi_color={{color|safe}};
        var texto = "{{texto}}";
        var topicos = {{topicos|safe}};
        var documentos = {{documento|safe}};
        var topic_document = documentos.topics;
        indices = Object.keys(topic_document).sort(function(a,b){return topic_document[b]-topic_document[a];});
        var seleccionados = new Array();
        var mi_seleccion = new Array();
        var color = new Array();
        var palabras_json = new Array();
        llenar_array(topicos,color,palabras_json)
        var palabras = new Array();
        palabras=texto.split(' ');
        var allTopics = new Array();
        $(document).ready(function(){
            d3.select('#texto')
                .append('p').text(texto);
            arreglo_global(allTopics,color,palabras_json);
         });
        var topic = {};
        
        for(element in topicos)
        {
            topic[element] = topicos[element];
        }
        var cantidad = parseInt(color.length/2)+1;
        var total = parseInt(color.length);
        
        var tam = 18;
        var minimo = 10;
        var width = 200;
        var height = cantidad*20;
                        
        var canvas = 
        d3.select('#topic')
                .append('svg')
                .attr('width',width)
                .attr('height',height);
                

        cont = 0;
        if (total<11) {
            createBlocks(canvas,total,tam,color,cantidad,50,minimo,topicos);
            createBlocks(canvas,total,tam,color,cantidad,90,minimo,topicos);
        }
        else if (total>10 && total<51) {
            createBlocks(canvas,total,tam,color,cantidad,50,minimo*2,topicos);
            createBlocks(canvas,total,tam,color,cantidad,90,minimo*2,topicos);
        }
        else{
            cantidad = parseInt(color.length/3)+1;
            if (total>60) {
                cantidad = parseInt(color.length/3)+2;
            }        
            createBlocks(canvas,total,tam,color,cantidad,50,minimo*2,topicos);
            createBlocks(canvas,total,tam,color,cantidad,90,minimo*2,topicos);
            if (total>60 && total<=70) {
                cantidad-=2;
            }
            else if (total>70 && total<=80) {
                cantidad-=1;
            }
            else if (total>80) {
                cantidad -=3;
            }
            createBlocks(canvas,total,tam,color,cantidad,130,minimo*2,topicos);
        }
        
        
        for (element in mi_color) {
            $("#topicos option[value="+element+"]").css('background-color',mi_color[element]);
        }
        var select_topicos = parseInt($('#topicos option:selected').val());
        
        $('.group').mouseover(function(){
            $(this).find('text').css('font-weight','bold');
            $(this).find('rect').css({'stroke':'black','stroke-width':'2px'});
            $(this).tooltip();
            });
        $('.group').mouseout(function(){
            $(this).find('text').css('font-weight','normal');
            $(this).find('rect').css('stroke','none');
            });
        $('.group').click(function(){
            var attribute = $(this).attr('id')
            if (seleccionados.indexOf(attribute)!=-1) {
                $(this).find('text').css('stroke','none');
                seleccionados.splice(seleccionados.indexOf(attribute), 1);
            }
            else{
                seleccionados.push(attribute);
                $(this).find('text').css('stroke','black');
            }
            d3.select('#texto')
                .selectAll('p').remove();
            d3.select('#texto')
                .selectAll('span').remove();
            crear_seleccion(mi_seleccion,seleccionados,color,topicos);
            create_all_text(palabras,mi_seleccion);
            mi_seleccion = [];        
            });
        $('#verTodos').click(function(){
            d3.select('#texto')
                .selectAll('p').remove();
            d3.select('#texto')
                .selectAll('span').remove();
            create_all_text(palabras,allTopics); 
            });
        
        $('#Limpiar').click(function(){
            d3.select('#texto')
                .selectAll('p').remove();
            d3.select('#texto')
                .selectAll('span').remove();
            d3.select('#texto')
                .append('p').text(texto);
            $('.group').each(function(){
                $(this).find('text').css('stroke','none');
                });
            seleccionados = [];
            });
        
        $('.myRect').tooltip({
                'container': 'body',
                'placement': 'right'
        });
        
        $('#seleccionado').click(function(){
            $(this).find('text').css('font-weight','bold');
            $(this).find('rect').css({'stroke':'black','stroke-width':'2px'});
        });
        
        //Funcion para obtener las palabras y probabilidades de un item clickeado
        function getWordProb(palabras_json,palabra,probabilidad) {

            for(element in palabras_json)
            {
                palabra.push(element)
                var prob = parseFloat(palabras_json[element]);
                probabilidad.push(prob*400);
            }            
        }
        
        
        function llenar_array(topicos,color,palabras_json) {
            for (element in topicos)
            {
                item = new Array();
                item.push(topicos[element]['words'])
                color.push(topicos[element]['color']);
                palabras_json[element]=item[0];
            }
        }
        
        function crear_texto(palabras,palabra,probabilidad,color) {
            for(element in palabras)
            {
                var bool= false;
                var mycolor;
                for (x in palabra)
                {
                    if (palabras[element]==palabra[x]) {
                        bool=true;
                        mycolor=x;
                    }
                }
                if (bool)
                {
                    var font = 12*probabilidad[mycolor];
                    font+="pt";
                    d3.select("#texto")
                        .append("span").text(palabras[element]+" ")
                        .style('color',color).style('font-size', font);
                }
                else
                {
                    d3.select("#texto")
                        .append("span").text(palabras[element]+" ")
                }
            }
        }
        
        //Funcion para crear los bloques del D3
        function createBlocks(canvas,datas,tam,fill,cantidad,movX,minimo,topicos)
        {
            for (var j = 1;j<cantidad;j++)
            {
                var group = canvas.append('g')
                    .attr('class','group')
                    .attr('id',indices[cont])
                
                myStr = ArrayToString(topicos,indices[cont]);
                                
                var rect = canvas.selectAll('rect')
                    .data(datas)
                    .enter()
                        group.append('rect')
                            .attr('width',tam)
                            .attr('height',tam)
                            .attr('title',myStr)
                            .attr('y',j*(tam+2))
                            .attr('x',function(d,i){return (i+1)*movX;})
                            .attr('fill',color[indices[cont]])
                            .attr('class','myRect')
                        group.append('text')
                            .text(indices[cont])
                            .attr('y',j*(tam+2))
                            .attr('x',movX-minimo)
                            .attr('dy','13');
                cont ++;
            }
        }
        
        //Funcion para crear la data de los tooltip
        function ArrayToString(data,indice) {
            var myString='';
            var ordenados = Object.keys(data[indice].words).sort(function(a,b){return data[indice].words[b]-data[indice].words[a]});
            var i=0;
            for (x in ordenados) {
                    if (i>2) {
                        myString+="\n"
                    }
                    myString+=ordenados[x];
                    myString+=",";
                    i++;
                }
            myString = myString.substr(0,(myString.length-1));  
            return myString;
        }
        
        //Se crea el arreglo con todas las palabras y su mayor probabilidad
        function arreglo_global(allTopics,color,palabras_json){
            for(element in palabras_json)
            {
                for(palabra in palabras_json[element])
                {
                    var bool=comprobar(allTopics,palabra);
                    var prob=palabras_json[element][palabra];
                    if (bool[0]) {
                        var pos=bool[1];
                        if (allTopics[pos][1]<prob)
                        {
                            allTopics[pos][1]=prob;
                            allTopics[pos][2]=color[element];
                        }
                    }
                    else
                    {
                        var valor = new Array();
                        valor.push(palabra,prob,color[element]);
                        allTopics.push(valor);
                    }
                }
            }
        }
        //Funcion para comprobar si una palabra esta en el arreglo
        function comprobar(allTopics,word)
        {
            var bool = false;
            if(allTopics.length==0)
            {
                return [false,-1];
            }
            else
            {
                for (x in allTopics) {
                    if (allTopics[x][0]==word) {
                        bool = true;
                        return [bool,x];
                    }
                }
            }
            return [bool,-1];
        }
        //Se crea todo el texto
        function create_all_text(palabras,allTopics) {
            for(element in palabras)
            {
                var bool= false;
                var pos;
                for (x in allTopics)
                {
                    if (palabras[element]==allTopics[x][0]) {
                        bool=true;
                        pos=x;
                    }
                }
                if (bool)
                {
                    var font = 12*(allTopics[pos][1]*400);
                    font+="pt";
                    d3.select("#texto")
                        .append("span").text(palabras[element]+" ")
                        .style('color',allTopics[pos][2]).style('font-size', font);
                }
                else
                {
                    d3.select("#texto")
                        .append("span").text(palabras[element]+" ")
                }
            }
        }
        

        function crear_seleccion(mi_seleccion,seleccionados,color,topicos){
            for(element in seleccionados)
            {
                for(palabra in topicos[seleccionados[element]]['words'])
                {
                    var bool=comprobar(mi_seleccion,palabra);
                    var prob=topicos[seleccionados[element]]['words'][palabra];
                    if (bool[0]) {
                        var pos=bool[1];
                        if (mi_seleccion[pos][1]<prob)
                        {
                            mi_seleccion[pos][1]=prob;
                            mi_seleccion[pos][2]=color[seleccionados[element]];
                        }
                    }
                    else
                    {
                        var valor = new Array();
                        valor.push(palabra,prob,color[seleccionados[element]]);
                        mi_seleccion.push(valor);
                    }
                }
            }   
        }
        
    </script>
{% endblock %}