/* ------------------------------------------------------------------------
Title:          Tiny Doodle
    
Version:        0.2
URL:            http://tinydoodle.com/
    
Description:
Tiny Doodle is an exercise in learning about <canvas>.
Event handlers are attached the to <canvas> elemet for both
mouse and touch input devices. The user can doodle away on the
<canvas>, clear and save the resulting doodle.
        
Saving the doodle extracts the canvas data in base64 format,
POST's the string to a Python service which stores it in a 
database.
    
Author:         Andrew Mason
Contact:        a.w.mason at gmail dot com
Author's Site:  http://analoguesignal.com/
    
Requirements:
* Jquery 1.3+
    
Changelog:
0.1 (28th May 2009)
- First demo build
0.2 (30th May 2009)
- Addded Pen and Eraser
- Commented code
- 
    
Todo:
* Error checking and handling
* Clean up code
* Add yellow throber to indicate added images
* Add share links
    
Licence:
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.

------------------------------------------------------------------------ */
if (!$.browser.msie) {

// Run once the DOM is ready
$(document).ready(function () {
    doodle.init();
});

var doodle = {
    // Define some variables
    'drawing': false,
    'linethickness': 1,
    'updating': false,
    'saveID': '#save',
    'newID': '#new',
    'penID': '#pen',
    'eraserID': '#eraser',
    'noticeID': '#notification',
    'loaded_id': false

};

doodle.init = function () {
    // Collect elements from the DOM and set-up the canvas
    doodle.canvas = $('#doodle_canvas')[0];
    doodle.context = doodle.canvas.getContext('2d');

    doodle.newDoodle();

    // Mouse based interface
    $('#potlood').bind('mousedown', doodle.drawStart);
    $('#potlood').bind('mousemove', doodle.draw);
    $('#potlood').bind('mouseup', doodle.drawEnd);
    $('body').bind('mouseup', doodle.drawEnd);

};


doodle.newDoodle = function (src, id) {
    doodle.clearCanvas();
}

doodle.clearCanvas = function (ev) {
    // Clear existing drawing
    doodle.context.clearRect(0, 0, doodle.canvas.width, doodle.canvas.height);
    doodle.canvas.width = doodle.canvas.width;

    // Set the background to white.
    // then reset the fill style back to black
    doodle.context.fillStyle = 'transparent';  //'#FFFFFF';
    doodle.context.fillRect(0, 0, doodle.canvas.width, doodle.canvas.height);

    // Set the drawning method to pen
    doodle.pen();

    // Flag that the user is working on a new doodle
    doodle.updating = false;
}

doodle.drawStart = function (ev) {
    ev.preventDefault();
    // Calculate the current mouse X, Y coordinates with canvas offset
    var x, y;

    x = ev.pageX - $(doodle.canvas).offset().left;
    y = ev.pageY - $(doodle.canvas).offset().top;

    doodle.drawing = true;
    doodle.context.lineWidth = doodle.linethickness;

    // Store the current x, y positions
    doodle.oldX = x;
    doodle.oldY = y;
}

doodle.draw = function (ev) {
    // Calculate the current mouse X, Y coordinates with canvas offset
    var x, y;

    x = ev.pageX - $(doodle.canvas).offset().left;
    y = ev.pageY - $(doodle.canvas).offset().top;

    // If the mouse is down (drawning) then start drawing lines
    if (doodle.drawing) {

        doodle.context.beginPath();
        doodle.context.moveTo(doodle.oldX, doodle.oldY);
        doodle.context.lineTo(x, y);
        doodle.context.closePath();
        doodle.context.stroke();
    }

    // Store the current X, Y position
    doodle.oldX = x;
    doodle.oldY = y;
};

// Finished drawing (mouse up)
doodle.drawEnd = function (ev) {
    doodle.drawing = false;
}

// Set the drawing method to pen
doodle.pen = function () {
    // Check if pen is already selected
    if ($(doodle.penID).hasClass('active')) {
        return;
    }
    // Change color and thickness of the line
    doodle.context.strokeStyle = '#888888';
    doodle.linethickness = 0.8;

    // Flag that pen is now active
    $(doodle.penID).toggleClass('active');

    // Remove active state from eraser
    $(doodle.eraserID).removeClass('active');
}

// Set the drawing method to eraser
doodle.eraser = function () {
    // Check if pen is already selected
    if ($(doodle.eraserID).hasClass('active')) {
        return;
    }
    // Change color and thickness of the line
    doodle.context.strokeStyle = '#FFFFFF';
    doodle.linethickness = 7;

    // Flag that eraser is now active
    $(doodle.eraserID).toggleClass('active');

    // Remove active state from pen
    $(doodle.penID).removeClass('active');
}
}