var app = (function($){
    var restorePoints = [],
        canvas = $("canvas"),
        drawing = false,
        drawingCanvas = document.getElementById("can"),
        canvasContext = drawingCanvas.getContext("2d"),
        isMobile = true;

    canvasContext.strokeStyle = "red";
    canvasContext.lineWidth = 10;
    canvasContext.lineCap = "round";
    canvasContext.fillStyle = "#FFF";
    canvasContext.fillRect(0,0,canvasContext.width, canvasContext.height);

    function init(){
        console.log('app has been initialized');
        // prevent elastic scrolling
        document.body.addEventListener('touchmove',function(event){
          event.preventDefault();
        },false);

        $("canvas").parents("*").css("overflow", "visible");

        $('#color > div').click(function(){
            canvasContext.strokeStyle = $(this).css("background-color");
            window.location.hash = "#";
        });
        $("#penSize").change(function(){
            canvasContext.lineWidth = this.value;
        });
        $("#penColor").change(function(){
            canvasContext.strokeStyle = this.value;
            window.location.hash = "#";
        });
        $("#eraser").click(function(){
            canvasContext.strokeStyle = "#FFF";
        });
        $("#save").click(function(){
            window.location.href= canvasContext.toDataURL();
        });
        $("#clear").click(function(){
            canvasContext.fillStyle = "#FFF";
            canvasContext.fillRect(0,0,drawingCanvas.width,drawingCanvas.height);
            canvasContext.strokeStyle = "red";
            canvasContext.fillStyle = "red";
        });
        canvas.bind(
            (isMobile ? "touchstart" : "mousedown"),
            function( event ){
                onTouchStart( event );
                return false;
            }
        );
        $("#undo").click(function(){
            undoDrawOnCanvas();
        });
    }
    function onTouchStart(event){
        console.log('touchstart');
        window.location.hash = "#";

        var touch = getTouchEvent( event ),
            localPosition = getCanvasLocalCoordinates(
                touch.pageX,
                touch.pageY
            );

        saveRestorePoint();
        drawing=true;
        canvasContext.save();
        xPos = localPosition.x;
        yPos = localPosition.y;

        if(drawing==true){
            canvasContext.beginPath();
            canvasContext.moveTo(localPosition.x, localPosition.y);
            canvasContext.lineTo(localPosition.x+1,localPosition.y+1);
            canvasContext.stroke();
            canvasContext.closePath();
            xPos = localPosition.x;
            yPos = localPosition.y;
        }

        lastPenPoint = {
            x: localPosition.x,
            y: localPosition.y
        };

        canvas.bind(
            (isMobile ? "touchmove" : "mousemove"),
            onTouchMove
        );
        canvas.bind(
            (isMobile ? "touchend" : "mouseup"),
            onTouchEnd
        );
    }
    function onTouchMove( event ){
        console.log('touchmove');
        var touch = getTouchEvent( event ),
            localPosition = getCanvasLocalCoordinates(
                touch.pageX,
                touch.pageY
            );

        lastPenPoint = {
            x: localPosition.x,
            y: localPosition.y
        };

        if(drawing==true){
            console.log(xPos, yPos);
            canvasContext.beginPath();
            canvasContext.moveTo(localPosition.x,localPosition.y);
            canvasContext.lineTo(xPos,yPos);
            canvasContext.stroke();
            //canvasContext.closePath();
            xPos = localPosition.x;
            yPos = localPosition.y;
        }
    }
    function onTouchEnd( event ){
        console.log('touchend');
        canvas.unbind(
            (isMobile ? "touchmove" : "mousemove")
        );
        canvas.unbind(
            (isMobile ? "touchend" : "mouseup")
        );
    }
    function undoDrawOnCanvas(){
        if(restorePoints.length > 0){
            var oImg = new Image();
            oImg.onload = function(){
                var canvasContext = document.getElementById("can").getContext("2d");
                canvasContext.drawImage(oImg, 0, 0);
            }
            oImg.src = restorePoints.pop();
        }
    }
    function saveRestorePoint(){
        var oCanvas = document.getElementById("can"),
            imgSrc = oCanvas.toDataURL("image/png");

        restorePoints.push(imgSrc);
    }
    function getCanvasLocalCoordinates( pageX, pageY ){
        var position = canvas.offset();

        return({
            x: (pageX - position.left),
            y: (pageY - position.top)
        });
    }
    function getTouchEvent(ev){
        return(
            isMobile ?
                event.targetTouches[0] : event
        );
    }
    return{
        init: init,
        onTouchStart: onTouchStart,
    }
}($));

document.addEventListener('deviceready', app.init(), false);