{% extends "page_template.html" %}
{% block pagetitle %}<A href="/">Exercise Home</A>: My Knowledge Map {% endblock pagetitle %}
{% block pagescript %}


<!--[if IE]><script type='text/javascript' src='/Jit-2.0.0a/Extras/excanvas.js'></script><![endif]-->
<script type='text/javascript' src='/Jit-2.0.0a/jit-yc.js'>
</script>

<style>
    
    table#exercises {
        display: none;
    }
    
    #kmap {
        position: relative;
        cursor: all-scroll;
        cursor: -moz-grab;
        width: 100%;
        height: 400px;
        background-color: #000000;
        overflow: hidden;
    }
    
    .fullscreen {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    .jit-autoadjust-label, .node {
        /*
         font-family: sans-serif;
         */
    }
    
    .tip {
        background-color: white;
        width: 15em;
    }
    
    .tip dl {
        margin-left: 1em;
        margin-right;
        1em;
    }
    
    .tip dt {
        font-weight: bold;
        float: left;
        margin-right: 0.5em;
    }
    
    .tip dt:after {
        content: ":";
    }
</style>
<script>
    $(function(){
        // Boilerplate stuff to allow JIT to support IE and iP* devices.
        var labelType, useGradients, nativeTextSupport, animate;
        var ua = navigator.userAgent, iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i), typeOfCanvas = typeof HTMLCanvasElement, nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'), textSupport = nativeCanvasSupport &&
        (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
        //I'm setting this based on the fact that ExCanvas provides text support for IE
        //and that as of today iPhone/iPad current text support is lame
        labelType = (!nativeCanvasSupport || (textSupport && !iStuff)) ? 'Native' : 'HTML';
        nativeTextSupport = labelType == 'Native';
        useGradients = nativeCanvasSupport;
        animate = !(iStuff || !nativeCanvasSupport);
        
        // The SpaceTree (ST) does not support diplaying a Directed Acyclic Graph (DAG), so we fake it by making a tree using
        // only the first prereq as a module's real parent, and storing the other parents as extra data in the node.
        // Then we use the following special node rendering implementation to draw the edges to those extra parents
        // when we draw a node.
        $jit.ST.Plot.NodeTypes.implement({
            'rectangleWithOtherParents': {
                'render': function(node, canvas){
                    $jit.ST.Plot.NodeTypes.prototype.rectangle.render.call(this, node, canvas);
                    if (node.data && node.data.otherParents) {
                        var otherParents = node.data.otherParents;
                        for (var i = 0; i < otherParents.length; i++) {
                            var orn = this.getOrientation(), parent = this.viz.graph.getNode(otherParents[i]), child = node, dim = 5;
                            adj = new $jit.Graph.Adjacence(parent, child, null, this.viz.config.Edge, this.viz.config.Label);
                            this.plotLine(adj, canvas, false);
                        }
                    }
                },
                'contains': $jit.ST.Plot.NodeTypes.prototype.rectangle.contains
            }
        });
        
        $jit.ST.Plot.EdgeTypes.implement({
            'bezierParentToChild': function(adj, canvas) {
                    var orn = this.getOrientation(adj), nodeFrom = adj.nodeFrom, nodeTo = adj.nodeTo, begin = this.viz.geom.getEdge(nodeFrom, 'begin', orn), end = this.viz.geom.getEdge(nodeTo, 'end', orn), dim = adj.getData('dim'), ctx = canvas.getCtx();
                    ctx.beginPath();
                    ctx.moveTo(begin.x, begin.y);
                    switch (orn) {
                        case "left":
                            ctx.bezierCurveTo(begin.x + dim, begin.y, end.x - dim, end.y, end.x, end.y);
                            break;
                        case "right":
                            ctx.bezierCurveTo(begin.x - dim, begin.y, end.x + dim, end.y, end.x, end.y);
                            break;
                        case "top":
                            ctx.bezierCurveTo(begin.x, begin.y + dim, end.x, end.y - dim, end.x, end.y);
                            break;
                        case "bottom":
                            ctx.bezierCurveTo(begin.x, begin.y - dim, end.x, end.y + dim, end.x, end.y);
                            break;
                    }
                    ctx.stroke();
            }
        });       
        //Create a new ST instance
        var st = new $jit.ST({
            //id of viz container element
            injectInto: 'kmap',
            //set duration for the animation
            duration: 10,
            //set animation transition type
            transition: $jit.Trans.Quart.easeInOut,
            levelsToShow: 70,
            orientation: 'left',
            constrained: false,
            //enable panning
            Navigation: {
                enable: true,
                panning: true,
                zooming: 20
            },
            //set node and edge styles
            Node: {
                overridable: true,
                type: 'rectangleWithOtherParents',
                autoHeight: true,
                autoWidth: false
            },
            Edge: {
                overridable: true,
                color: '#CCCCCC',
                lineWidth: 3,
                type: 'bezierParentToChild'
            },
            Label: {
                overridable: true
            },
            Tips: {
                enable: true,
                onShow: function(tipDiv, node){
                    tipDiv.innerHTML = node.data.tipHTML;
                }
                
            },
            
            onCreateLabel: function(label, node){
                label.id = node.id;
                label.innerHTML = node.name;
                label.onclick = function(){
                    window.location = node.data.url;
                };
                var style = label.style;
                style.width = node.data.$width + 'px';
                style.cursor = 'pointer';
                style.color = '#333';
                style.textAlign = 'center';
            },
            onPlaceLabel: function(label, node){
                var width = st.canvas.scaleOffsetX * node.data.$width;
                var height = st.canvas.scaleOffsetY * node.data.$height;
                var left = label.offsetLeft + (node.data.$width - width) / 2;
                var top = label.offsetTop + (node.data.$height - height) / 2;
                label.style.width = width + "px";
                label.style.left = left + "px";
                label.style.top = top + "px";
                var extraScale = 1;
                do {
                    label.style.fontSize = Math.round(st.canvas.scaleOffsetX * extraScale * 100) + "%";
                    label.innerHTML = node.name;
                    extraScale = extraScale * 0.9;
                }
                while (extraScale > 0.5 && (label.offsetHeight > height + 1 || label.offsetWidth > width + 1));
            }
        });
        // Build the graph from the hidden exercise table
        // First create a hash of nodes, one per exercise.
        var nodes = {};
        $("#exercises tr[data-id]").each(function(){
            elem = $(this);
            var node = {
                "id": elem.attr("data-id"),
                "name": elem.attr("data-name"),
                "data": {
                    "otherParents": [],
                    "tipHTML": "<dl>" +
                    "<dt>Streak<dd>" +
                    elem.attr("data-streak") +
                    "<dt>Longest Streak<dd>" +
                    elem.attr("data-longest_streak") +
                    "<dt>Points/problem<dd>" +
                    elem.attr("data-points") +
                    "</dl>",
                    "url": "/exercises?exid=" + elem.attr("data-id"),
                },
                "children": []
            };
            switch (elem.attr("data-status")) {
                case "Proficient":
                    node.data.$color = "#EDE275";
                    break;
                case "Suggested":
                    node.data.$color = "#FBB917";
                    break;
                case "Review":
                    node.data.$color = "#FF9999";
                    break;
            }
            nodes[elem.attr("data-id")] = node;
        });
        
        // Connect the nodes
        $("#exercises tr[data-id]").each(function(){
            var elem = $(this);
            elem.find("li[data-prereq]").each(function(i){
                var prereq_elem = $(this);
                // To convert the DAG to a tree we are only a normal child of our first prereq.
                // All other prereqs, get listed as our "other parents".
                if (i == 0) {
                    nodes[prereq_elem.attr("data-prereq")].children.push(nodes[elem.attr("data-id")]);
                }
                else {
                    nodes[elem.attr("data-id")].data.otherParents.push(prereq_elem.attr("data-prereq"));
                }
            });
        });
        // load the graph
        st.loadJSON(nodes["addition_1"]);
        // layout nodes
        st.compute();
        // emulate a click on the root node.
        st.onClick(st.root);
        
        // Move the canvas so that the previously centered root node is flush with the left edge
        var rootX = st.canvas.getSize().width / 2;
        var rootWidth = st.graph.getNode("addition_1").data.$width;
        st.canvas.translate(-rootX + rootWidth / 2, 0);
        //end
        
        // Make the map fullscreen when in fullscreen mode.
        $(window).resize(function(){
            var kmap = $("#kmap");
            if (window.fullScreen) {
                kmap.addClass("fullscreen");
            }
            else {
                kmap.removeClass("fullscreen");
            }
            st.canvas.resize(kmap.width(), kmap.height());
        });
    });
</script>
{% endblock pagescript %}
{% block pagecontent%}
<article id="knowledge_map">
    <table id="exercises">
        <tr>
            <th>
                Energy Points
            </th>
            <th>
                Exercise
            </th>
            <th>
                Status
            </th>
            <th>
                Longest Streak
            </th>
            <th>
                Current Streak
            </th>
            <th>
                Prerequisites
            </th>
        </tr>
        {% for exercise in exercises %}
        <tr data-id="{{ exercise.name }}" data-points="{{ exercise.points }}" data-name="{{ exercise.display_name }}" data-status="{{ exercise.status }}" data-longest_streak='{{ exercise.longest_streak|default:"0" }}' data-streak='{{ exercise.streak }}' data-h_position='{{ exercise.h_position }}' data-v_position='{{ exercise.v_position }}'>
            <td class="points">
                {{ exercise.points }}
            </td>
            <td class="name">
                <a href="/exercises?exid={{exercise.name}}">{{ exercise.display_name }}</a>
            </td>
            <td class="status">
                {{ exercise.status }}
            </td>
            <td class="longest_streak">
                {{ exercise.longest_streak|default:"0" }}
            </td>
            <td class="streak">
                {{ exercise.streak }}
            </td>
            <td class="prereqs">
                <ul>
                    {% for prereq in exercise.prerequisites_ex %}
                    <li data-prereq="{{ prereq.name }}">
                        <a href="/exercises?exid={{prereq.name }}">{{ prereq.display_name }}</a>
                    </li>
                    {% endfor %} 
                </ul>
            </td>
        </tr>
        {% endfor %}
    </table>
    <p>
        The yellow modules are those that you have already become proficient in.&nbsp;  The red modules are those that I suggest you review.&nbsp; 
        The orange modules are the new modules that I suggest you work on.&nbsp; Click on a module to do a focused practice on that module. 
    </p>

    {% knowledgemap_embed exercises map_coords %}

    <br/><br/>
    <div id="kmap">
    </div>
</article>
{% endblock pagecontent %}