<h1>What's your New Year's resolution?</h1>

<div id="text-area-holder">
    <textarea id="user-input" maxlength="75"></textarea>
    <div id="char-counter"></div>
</div>

<!-- hidden canvas area -->
<canvas id="output-canvas" width="800" height="400"></canvas>

<div>
    <button id="download">Download</button>
</div>

<img src="static/background.png" id="res-back">

<span id="text-sizer"></span>

window.onload = function() {
    var c = document.getElementById("output-canvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("res-back");
    ctx.drawImage(img, 0, 0, 1200, 600, 0, 0, c.width, c.height);

    var userTxt = document.getElementById('user-input'),
        download = document.getElementById('download'),
        textSizer = document.getElementById('text-sizer'),
        charCounter = document.getElementById('char-counter');

    var fontSize = 60;
    var textX = 400;
    var textY = 270;

    var maxChars = 75;

    var maxTextWidth = 660;

    // listen for textarea input
    userTxt.onkeyup = function(){
        var usrVal = this.value;
        // console.log(this.value);

        // add text to hidden text sizer span
        textSizer.innerHTML = usrVal;

        // characters
        var charCount = usrVal.length;
        // console.log(charCount + " characters");

        charCounter.innerHTML = charCount + ' / ' + maxChars + ' characters';

        // store hidden text size width
        var textWidth = textSizer.offsetWidth;

        // clear canvas
        ctx.clearRect(0, 0, c.width, c.height);


        // redraw background
        ctx.drawImage(img, 0, 0, 1200, 600, 0, 0, c.width, c.height);


        /* draw text */

        // console.log(textWidth);

        // store the lines to draw
        var lines = [];

        // if too big for one line
        if (textWidth > maxTextWidth) {
            // console.log("too big!");
            var firstLine = '';
            var secondLine = '';

            // reduce text size
            // textSizer.style.fontSize = "40px";

            // split line in two
            var words = usrVal.split(' ');

            // first half words
            var halfWords = Math.floor(words.length/2);

            for (var i = 0; i < halfWords; i++) {
                firstLine += words[i] + ' ';
            }
            lines.push(firstLine.trim());

            for (var i = halfWords; i < words.length; i++) {
                secondLine += words[i] + ' ';
            }
            lines.push(secondLine.trim());

            fontSize = 50;
        } else {
            // increase text size
            fontSize = 60;
            lines.push(usrVal);
        }

        // console.log(lines);

        ctx.font = fontSize+"px 'Caveat Brush', cursive";
        ctx.textAlign="center";

        // loop through lines to draw
        for (line in lines) {
            var linePos = line * fontSize;
            ctx.fillText(lines[line], 400, linePos+textY+fontSize);

        }

    };

    // download image
    download.onclick = function() {
        var canvas = document.getElementById('output-canvas');
        var lnk = document.createElement('a'), e;
        lnk.download = 'resolution.png';
        lnk.href = canvas.toDataURL("image/png;base64");

        if (document.createEvent) {
            e = document.createEvent("MouseEvents");
            e.initMouseEvent("click", true, true, window,
                0, 0, 0, 0, 0, false, false, false,
                false, 0, null);

                lnk.dispatchEvent(e);
            } else if (lnk.fireEvent) {
                lnk.fireEvent("onclick");
            }

    }

};

#output-canvas {
    width: 800px;
    height: 400px;
}

#text-area-holder {
    position: relative;
    height: 110px;
    width: 800px;
    margin: 0 0 20px;
}

#char-counter {
    position: absolute;
    bottom: 8px;
    right: 8px;
    text-align: right;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
}

#user-input {
    font-family: 'Caveat Brush', cursive;
    font-size: 40px;
    width: 790px;
    height: 100px;
    border: 1px solid #333;
    padding: 4px;
    margin: 0 0 20px;
}

#text-sizer {
    font-size: 60px;
    font-family: 'Caveat Brush', cursive;
    visibility: hidden;
}


#res-back {
    display: none;
}

#download {
    padding: 10px 15px;
    font-size: 20px;
    background: #f8c214;
    font-weight: bold;
    border: 1px solid #333;
    border-radius: 10px;
    cursor: pointer;
    display: block;
    margin: 10px 0;
}