var platno, obsah, tool;

function init () {
    // definovane platno a obsah platna
    platno = document.getElementById('platno');
    obsah = platno.getContext('2d');

    // vytvorenie pera
    tool = new tool_pencil();

    // eventlistenery pre pohyby mysou a dotyky prsta
    platno.addEventListener('mousedown', kresli, false);
    platno.addEventListener('mousemove', kresli, false);
    platno.addEventListener('mouseup',   kresli, false);
    platno.addEventListener('touchstart', kresli, false);
    platno.addEventListener('touchmove', kresli, false);
    platno.addEventListener('touchend',   kresli, false);

    // zabrani scroolovaniu na platne, aby sa pri kresleni web nehybal
    document.getElementById('platno').addEventListener('touchmove',function(event){
        event.preventDefault();
    },false);
}

// nastroj na kreslenie
function tool_pencil () {
    var tool = this;
    this.started = false;

    // ak sa drzi stlacene tlacidlo mysi, drzi prst na displayi,
    // vykona sa funkcia a zacne sa kreslit ciara
    this.touchstart = this.mousedown = function (event) {
        obsah.beginPath();
        obsah.moveTo(event._x, event._y);
        tool.started = true;
    };

    // funkcia sa vola ked sa pohybuje mysou, prstom
    this.touchmove = this.mousemove = function (event) {
        if (tool.started) {

            // male vyhladenie
            var xc = (event._x + event._x+1) / 2;
            var yc = (event._y + event._y+1) / 2;

            obsah.strokeStyle = "#df4b26";
            obsah.lineWidth=2;
            obsah.lineJoin="round";
            obsah.lineCap = 'round';
            obsah.quadraticCurveTo(event._x, event._y,xc, yc);
            obsah.stroke();
        }
    };

    // sa zavola ak sa pusti mys alebo odtiahne prst
    this.touchend = this.mouseup = function (event) {
        if (tool.started) {
            tool.mousemove(event);
            tool.started = false;
        }
    };

}

// Iba event handler. Zistuje sa relativna pozicia prstu/mysi
function kresli (event) {

    // Zistuje, ci zariadenie podporuje dotyk, vracia 0/1
    function je_dotyk() {
        return !!('ontouchstart' in window) ? 1 : 0;
    }

    // Ak je dotykove zariadenie, suradnice sa zistia podla
    // aktualnej polohy prsta, inak poloha kurzoru
    if (je_dotyk() == 1) {
    event._x = event.targetTouches[0].pageX-this.offsetLeft;
    event._y = event.targetTouches[0].pageY-this.offsetTop;
    }
    else if (event.offsetX || event.offsetX == 0) {
    event._x = event.offsetX;
    event._y = event.offsetY;
    }

    // Zavola sa event handler tool, cize nastroj(ceruzka)
    var func = tool[event.type];
    if (func) {
        func(event);
    }
}

//inicializacia platna a event handlerov
init();