var drawctx = null;

var tweenProgress = 0;
var timerID;

var sentence = 
"`Twas brillig, and the slithy toves Did gyre and gimble in the wabe: All mimsy were the borogoves, And the mome raths outgrabe. \"Beware the Jabberwock, my son! The jaws that bite, the claws that catch!\" \"Beware the Jubjub bird, and shun The frumious Bandersnatch!\" He took his vorpal sword in hand: Long time the manxome foe he sought-- So rested he by the Tumtum tree, And stood awhile in thought. And, as in uffish thought he stood, The Jabberwock, with eyes of flame Came whiffling through the tulgey wood, And burbled as it came! One, two! One, two! And through and through The vorpal blade went snicker-snack! He left it dead, and with its head He went galumphing back.";
var sentenceWordIndex = 0;
var sentenceArray = [];

function main() {
    var canvas = document.getElementById('fontcanvas');
    drawctx = canvas.getContext ('2d');
    
    fontMain(loadFinished);
}

function loadFinished() {
    sentenceArray = sentence.split(' ');
    
    doNewTween();
    startDrawTimer();

    //drawPath (drawctx,getPtsForWord('sahtc wrTei'));
}

function startDrawTimer() {
    timerID = setInterval (drawInterval , 100);
}

function drawInterval() {
    clearCanvas();
    doTweenStep (word1Pts, word2Pts);
}

function doNewTween() {
    setUpTween (sentenceArray[sentenceWordIndex],sentenceArray[sentenceWordIndex+1]);
    
    sentenceWordIndex++;
}

function setUpTween (word1, word2) {
    word1Pts = getPtsForWord(word1);
    word2Pts = getPtsForWord(word2);
    
    tweenProgress = 0.0;
}

function clearCanvas() {
//    drawctx.fillStyle = "rgba(0,0,0,0.05)";
    drawctx.fillStyle = "rgb(0,0,0)";
    drawctx.fillRect(0,0,1000, 500);
}

function doTweenStep (pts1, pts2) {
    var pointsInCommon = Math.min(pts1.length, pts2.length);
    var extraPts = Math.max(pts1.length, pts2.length);
    var diffPts = extraPts - pointsInCommon;
    
    var drawPts = [];
    
    for (var tx = 0; tx < Math.min(pts1.length, pts2.length); tx++ )
        drawPts.push(doPercent (pts1[tx], pts2[tx],tweenProgress)) ;
    
    if (pts1.length > pts2.length) {
        var toLoop = Math.min (pointsInCommon + ((1-tweenProgress) * diffPts), extraPts);
        for (var tx = pointsInCommon-1; tx < toLoop ; tx++)
            drawPts.push(pts1[tx]);
    }
    else
    {
        var toLoop = Math.min (pointsInCommon + (tweenProgress * diffPts), extraPts);
        for (var tx = pointsInCommon-1; tx < toLoop; tx++)
            drawPts.push(pts2[tx]);
    }
    
    if (tweenProgress >= 1) {
        clearInterval(timerID);
        
        drawPath (drawctx, pts2); //just draw 2nd word and display for some time
        
        setTimeout (startDrawTimer, 450);
        doNewTween();
    } else {
    
        drawPath (drawctx, drawPts);
        
        tweenProgress += 0.1;
    }
}

function doPercent (pt1,pt2,percent) {
    if (pt1.length != 2 || pt2.length != 2) return [0];

    var x = ( ((1-percent)*pt1[0]) + (percent * pt2[0]));
    var y = ( ((1-percent)*pt1[1]) + (percent * pt2[1]));
    
    return [x,y];

}
function doTweenStep2 (pts1, pts2) {        
		var startPtsIndex = 0;
        var ptsToDraw = [];

		if (tweenProgress == 0) {  //edge case, just display start
            ptsToDraw = pts1;
		}
		else {
            for (var pt in pts2) {
                if (Math.random() < tweenProgress) {
    
                    ptsToDraw.push (pts2[pt]);
                }
                else {
                    if (startPtsIndex < pts1.length-1) {
                        ptsToDraw.push (pts1[startPtsIndex]);
                        startPtsIndex++;
                    }
                }
            }
    
            if (tweenProgress > 1) {
//                clearInterval(timerID);

                doNewTween();
            }
        }
        
        clearCanvas();
        drawPath (drawctx, ptsToDraw);
        
        tweenProgress += 0.05;
}