{% extends "base.html" %}
{% load staticfiles %}
{% load url from future%}

{% block contenido %}

<script src="{% static "raphael/raphael-min.js" %} "></script>
<script src="{% static "raphael/g.raphael.js" %} "></script>
<script src="{% static "raphael/g.pie.js" %} "></script>
<script type="text/javascript">
var maria, datos;


function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

$(document).ready(function() {
    $.ajax({
        url: "{% url 'calificar:calificaciones-json' %}",
        success: function(data) {

            var dataArray2= new Array();
            var titleArray= new Array();
            //var strokArray= new Array();
            var hrefArray= new Array();
            var cl,ocl;
           
            maria = data;
            datos = (maria.length*maria[0].aspectos.length);
            aspectoCount=maria[1].aspectos.length;
            $(maria).each(function(index){
                titleArray.push(maria[index].nombre);
                hrefArray.push('/calificar/'+maria[index].id+'/graficas')
                var por=0;
                //cl=get_random_color() ;
                
               
                $(maria[index].aspectos).each(function(index2){
                   
                        
                    if (maria[index].aspectos[index2].valor){
                      
                        por=por+1;
                         //dataArray2.push("red");

                        // console.log(maria[index].nombre + ': ' + maria[index].aspectos[index2].nombre + '(' + cl + ')');
                    // } else {
                    //     ocl='white';
                    //      dataArray2.push(ocl);
                    //     // console.log(maria[index].nombre + ': ' + maria[index].aspectos[index2].nombre + '(gris)');
                    }
                    
                    
                })
                if (por==4) {

                    cl="green";
                    for (var i = 0; i < aspectoCount; i++) {
                   dataArray2.push(cl);
                }
                } 
                 if (por==3) {

                    cl="yellow";
                     y=aspectoCount-por;
                    for (var i = 0; i < por; i++) {
                   dataArray2.push(cl);
                }
               for (var i = 0; i < y; i++) {
                   dataArray2.push("#EEEEEE");
                }

                }  if (por==2) {

                    cl="Coral";
                    y=aspectoCount-por;
                    for (var i = 0; i < por; i++) {
                   dataArray2.push(cl);
                }
                for (var i = 0; i < y; i++) {
                   dataArray2.push("#EEEEEE");
                }

                }  if (por==1) {

                    cl="red";
                    y=aspectoCount-por;
                   
                   dataArray2.push(cl);
                
                for (var i = 0; i < y; i++) {
                   dataArray2.push("#EEEEEE");
                }

                } 
                if (por==0) {

                    cl="#EEEEEE";
                     for (var i = 0; i <  aspectoCount; i++) {
                   dataArray2.push(cl);
                }

                } 


                // for (var i = 0; i < por; i++) {
                //    dataArray2.push(cl);
                // };
                
            });

    Raphael.fn.pieChart = function (cx, cy, r, values, labels, stroke) {
       
    var paper = this,
           
             rad = Math.PI / 180,
            chart = this.set();
           
       
    function sector(cx, cy, r, startAngle, endAngle, params) {
        var x1 = cx + r * Math.cos(startAngle * rad),
            x2 = cx + r * Math.cos(endAngle * rad),
            y1 = cy + r * Math.sin(startAngle * rad),
            y2 = cy + r * Math.sin(endAngle * rad);
        return paper.path(["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 1, x2, y2, "z"]).attr(params);
    }
     var ty=40;
    var angle = 0,
        total = 0,
        start = 0,
        process = function (j) {
             var hrefr=hrefArray[j];
            var value = values[j],
           
                angleplus = 360 * value / total,
                popangle = angle + (angleplus / 2),
                color = "hsb(" + 'white' + ", 1, 0)",
                ms = 100,
                delta = 19,
                bcolor = "hsb(" + start + ", 1, 0)",
                p = sector(cx, cy, r, angle, angle + angleplus, {fill:"red", "fill-opacity": 0, stroke: "white", "stroke-width": 3, href:hrefr}),
                txt = paper.text(50 , ty, labels[j]).attr({fill: "black", stroke: "none", opacity: 1, "font-family": 'sans-serif, Arial', "font-size": "13px", "text-anchor":"start"});
            p.hover(function () {
                  this.stop();
                    this.scale(1.1, 1.1, this.cx, this.cy);
                    txt.attr({ "font-weight": 800 });
                     txt.animate({opacity: 2}, ms, "elastic");
                     

                   
                    }
                , function () {
                    this.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "elastic");
                     txt.attr({ "font-weight": 400 });
                     txt.animate({opacity: 1}, ms);

                    
                })
             txt.hover(function () {
                  this.stop();
                    p.scale(1.1, 1.1, this.cx, this.cy);
                    txt.attr({ "font-weight": 800 });
                     txt.animate({opacity: 2}, ms, "elastic");
                     

                   
                    }
                , function () {
                    p.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "elastic");
                    p.animate({opacity: 2}, ms);
                     txt.attr({ "font-weight": 400 });
                     txt.animate({opacity: 1}, ms);

                    
                });
            angle += angleplus;
            ty+=delta;
            chart.push(p);
            chart.push(txt);
            start += .1;
        };
    for (var i = 0, ii = values.length; i < ii; i++) {
        total += values[i];
    }
    for (var i = 0; i < ii; i++) {
        process(i);
    }
    return chart;
};
var r=Raphael("holder", 1000,  500);
(function (raphael) {
    $(function () {
        var values = [],
            labels =titleArray;
       for (var i = 0; i < titleArray.length; i++) {
           values.push(1);
       }
            
           
      
      
   // var r=raphael("holder", 1000,  800);
 
 seg2=(maria.length);

   
            numSegment = datos,
            numSegment2 = seg2,
             
            angleSegment = 360 / numSegment,
            angleSegment2=360 / numSegment2,
            angleColor = 360 / (numSegment / 2),
            angle = 0,
            diameter = 300,
            rayon = diameter / 2,
            posX = 670,
            posY = 200,
            paths = r.set(),
            texts=r.set(),
            total = 360,
            start = 0,
             ms = 500,
            colors1 =dataArray2,
            tile=  titleArray,
            href=hrefArray,
            // colors2 = ['rgba(0,155,184,.3)','rgba(0,45,195,.3)','rgba(255,176,0,.3)','rgba(255,124,0,.3)','rgba(255,24,0,.3)'],
            themes = '',
            themesAngles = [], // [0, 36, 72, 108, 144, 180, 216, 252, 288, 324],
            themeCount = -1;

            r.customAttributes.segment = function (x, y, r, a1, a2) {
                var flag = (a2 - a1) > 180;
                a1 = (a1 % 360) * Math.PI / 180;
                a2 = (a2 % 360) * Math.PI / 180;
                return {
                    path: [["M", x, y], ["l", r * Math.cos(a1), r * Math.sin(a1)], ["A", r, r, 0, +flag, 1, x + r * Math.cos(a2), y + r * Math.sin(a2)], ["z"]]
                };
            };
             var xi;
            
            

            for (var i = 0; i < numSegment; i++) {
                 
                 var seg;
                
               
                if (angle == 360) themeCount = -1; // Reset
                    themeCount++;
                     
                    var color = colors1[themeCount];
                         seg = r
                        .path()
                        .attr({
                            segment: [posX, posY, rayon, angle, angle + angleSegment],
                             fill: color, //"hsb(" + clr + ", .75, .8)"
                            "fill-opacity": 1,
                            
                            "stroke-width": 'none',
                            stroke: color // '+(1 - (start % angleColor))+'
                            
                        });

                        
                     
                       
                        
                  
                    paths.push(seg);
                    //paths.push(seg);
                // themesAngles[i] = angle;
                    angle += angleSegment;
            }
        
 r.pieChart(670, 200, 150, values, labels, "#fff");
    });
})(Raphael.ninja()); 

    
        r.circle(posX, posY, 0).attr({r: 30, "stroke-width":0, fill:"rgb(255,255,255)"});

           

        }
    });


});
</script>
    <div class="dgtic-content-area" >
        <div class="row-fluid" >
            <div class="span12">
                <div class="dgtic-panel">
                    <div class="dgtic-panel-header">
                        <span class="dgtic-panel-title">
                             <i class="icon-bank"></i>
                            Dependencias
                        </span>         
                        
                        
                    </div>  
                    <div class="dgtic-panel-content dgtic-form-containter">
                         <div id="holder" ></div>
                    </div>

                            
                </div>
            </div>
        </div>
    </div>
{% endblock %}