// ==UserScript==
// @name         WaniKani Nippongrammar Extension
// @namespace    WK-nippongrammar
// @version      0.3
// @website      http://nippongrammar.appspot.com/
// @description  Svg Canvas used to draw Kanji on reviews and lessons, using website code.
// @author       Code by Aaron Drew, Wanikani adaption by Ethan McCoy
// @include      *.wanikani.com/review/session*
// @include      *.wanikani.com/lesson/session*
// @grant        none
// run-at       document-end
// @license        MIT
// @downloadURL none
// ==/UserScript==

$("head").prepend('<script type="text/javascript" src="https://greasyfork.org/scripts/11949-kanjisvg/code/kanjiSvg.js?version=69799"></script>');
$("head").prepend('<script type="text/javascript" src="https://greasyfork.org/scripts/11951-kanjirender/code/kanjirender.js"></script>');

animateStrokes = function(){
            
    if(text.indexOf(".png") === -1){ //weed out picture radicals for now, extend svg library later
        strokeDiv && (strokeDiv.style.display = "block");
        animateWriting(text,'strokeChar',15),
        charDiv && (charDiv.style.display = "none");
    }else{
        strokeDiv && (strokeDiv.style.display = "none");
        charDiv && (charDiv.style.display = "block");
    }

}

function handleKeyChange(key, action){
    
    console.group("animate strokes userscript"),
console.log("key", key),
    cur = $.jStorage.get(key),
    text = cur.voc || cur.kan || cur.rad || "",
    console.log("text", text);

    strokeDiv = document.getElementById('strokeChar') || document.createElement('div'), strokeDiv.style.padding = "20px 20px 0", strokeDiv.id = "strokeChar";
    
    //add replay functionality
    strokeDiv.addEventListener("click", animateStrokes);
    
    if (key === "l/currentLesson" || key === "l/currentQuizItem"){
        //console.log(charDiv.childNodes[0].nodeType === 3),
        
        charDiv = document.getElementById("character");
        
        console.log("parent", charDiv.parentNode);
        

        }else{
            
            //Reviews 'charDiv' is actually a span
            charDiv = document.getElementById("character").getElementsByTagName("span")[0];
        }
        charDiv.parentNode.insertBefore(strokeDiv, charDiv);
    
       // console.log("text for "+key+"?",[charDiv.childNodes[0].nodeType]),
//    itemSpan = charDiv.getElementsByTagName("span")[0];

    
        
    animateStrokes();
    
console.groupEnd();
};

$.jStorage.listenKeyChange("currentItem", handleKeyChange);
$.jStorage.listenKeyChange("l/currentQuizItem", handleKeyChange);
$.jStorage.listenKeyChange("l/currentLesson", handleKeyChange);