(function ($) {
    $.fn.extend(
	{
	    sigpad: function (options) {
	        // Default options
	        var defaults = {
	            lineWidth: 3.0,
	            lineCap: 'round',
	            lineJoin: 'round',
	            miterLimit: 10,
	            strokeStyle: 'black',
	            fillStyle: 'none',
	            showClear: false,
	            clearLabel: 'Clear',
	            clearStyle: 'button'
	        };

	        options = $.extend(defaults, options);

	        return this.each(function () {
	            if (this.nodeName === 'CANVAS') {
	                $(this).css('cursor', 'pointer');
	                $(this).attr('onclick', 'function onclick(event) { void 1; }');

	                if (this.getContext) {
	                    var canvas = this;
	                    var context = this.getContext('2d');
	                    var id = $(this).attr('id');

	                    $(this).after('<div id="' + id + '-controls" style="width:' + $(this).width() + 'px"></div>');

	                    context.underInteractionEnabled = true;

	                    // Overrides with passed options
	                    context.lineWidth = options.lineWidth;
	                    context.lineCap = options.lineCap;
	                    context.lineJoin = options.lineJoin;
	                    context.miterLimit = options.miterLimit;
	                    context.strokeStyle = options.strokeStyle;
	                    context.fillStyle = options.fillStyle;


	                    var data_input = id + '-data';
	                    $(this).after('<input type="hidden" id="' + data_input + '" name="' + data_input + '" />');

	                    // Defines all our tracking variables
	                    var drawing = false;
	                    var height = $('#' + id).height();
	                    var width = $('#' + id).width();
	                    var svg_path = '';
	                    var scrollLeft = 0;
	                    var scrollTop = 0;
	                    var offsetX = $(this).attr('offsetLeft');
	                    var offsetY = $(this).attr('offsetTop');
	                    var inside = false;
	                    var prevX = false;
	                    var prevY = false;
	                    var x = false;
	                    var y = false;

	                    //case 3678
	                    //case 3679
                        //case 3680
	                    //// Mouse events
	                    //$(document).mousedown(function (e) { drawingStart(e); });
	                    //$(document).mousemove(function (e) { drawingMove(e); });
	                    //$(document).mouseup(function () { drawingStop(); });

	                    //// Touch events
	                    //$(document).bind('touchstart', function (e) { drawingStart(e); });
	                    //$(document).bind('touchmove', function (e) { drawingMove(e); });
	                    //$(document).bind('touchend', function () { drawingStop(); });
	                    //$(document).bind('touchcancel', function () { drawingStop(); });

	                    //case 3678
	                    //case 3679
	                    //case 3680
	                    var spad = $("#sigpad");
	                    // Mouse events
	                    spad.mousedown(function (e) {
	                        drawingStart(e);
	                    });
	                    spad.mousemove(function (e) {
	                        drawingMove(e);
	                    });
	                    spad.mouseup(function () {
	                        drawingStop();
	                    });

	                    // Touch events
	                    spad.bind("touchstart", function (e) {
	                        drawingStart(e);
	                    });
	                    spad.bind("touchmove", function (e) {
	                        drawingMove(e);
	                    });
	                    spad.bind("touchend", function () {
	                        drawingStop();
	                    });
	                    spad.bind("touchcancel", function () {
	                        drawingStop();
	                    });

	                    // Adds the clear button / link
	                    if (options.showClear === true) {
	                        var clear_tag = (options.clearStyle == 'link' ? 'div' : 'button');

	                        $('#' + id + '-controls').append('<' + clear_tag + ' id="' + id + '-clear" style="float:left">' + options.clearLabel + '</' + clear_tag + '><br style="clear:both" />');

	                        clear = true;
	                    }


	                    //	                    // Changing colors
	                    //	                    $('#' + id + '-colors div').click(function (e) {
	                    //	                        $('#' + id + '-controls div').css('borderColor', 'transparent').removeClass('selected');
	                    //	                        $(this).addClass('selected');
	                    //	                        $(this).css('borderColor', '#000');
	                    //	                    });

	                    // Clearing the canvas
	                    $('#' + id + '-clear').click(function (e) {
	                        context.save();
	                        context.beginPath();
	                        context.closePath();
	                        context.restore();
	                        context.clearRect(0, 0, $(canvas).width(), $(canvas).height());

	                        $('#' + data_input).val('');
	                    });

	                    function getTouch(e) {
	                        // iPhone/iPad/iPod uses event.touches and not the passed event
	                        if (typeof (event) != "undefined" && typeof (event.touches) != "undefined") {
	                            e = event.touches.item(0);

	                            scrollLeft = document.body.scrollLeft;
	                            scrollTop = document.body.scrollTop;
	                        }
	                        else {
	                            scrollLeft = $(document).scrollLeft();
	                            scrollTop = $(document).scrollTop();
	                        }

	                        // Tracks last position to handle dots (as opposed to lines)
	                        if (x != false) {
	                            prevX = x;
	                            prevY = y;
	                        }

	                        // Calculates the X and Y values
	                        x = e.clientX - (offsetX - scrollLeft);
	                        y = e.clientY - (offsetY - scrollTop);
	                        return e;
	                    }



	                    function draw(type) {
	                        if (type != 'stop') {
	                            if (type == 'start') {
	                                inside = false;
	                                prevX = false;
	                                prevY = false;

	                                context.beginPath();
	                                context.moveTo(x, y);

	                                if (svg_path == '') {
	                                    //timestamp and dimentions
	                                    var currentDate = new Date();
	                                    var captured = currentDate.getFullYear() + ':' + (currentDate.getMonth() + 1) + ':' + currentDate.getDate() + ':' + currentDate.getHours() + ':' + currentDate.getMinutes() + ':' + currentDate.getSeconds();
	                                    svg_path = '{version=1 width=' + width + ' height=' + height + ' captured=' + captured + '}';
	                                }

	                                if (svg_path != '') {
	                                    svg_path += 'X';
	                                }
	                                //svg_path = '{polyline points="';
	                            }
	                            else {
	                                // If there's no previous increment since it's a .
	                                if (prevX == false) {
	                                    x = x + 1;
	                                    y = y + 1;
	                                }

	                                context.lineTo(x, y);
	                            }

	                            context.stroke();

	                            if (svg_path.length > 0 && svg_path.substring(svg_path.length - 1) != '"') {
	                                svg_path = svg_path + ' ';
	                            }

	                            svg_path = svg_path + x + ',' + y;

	                            if ((x > 0 && x <= width) && (y > 0 && y <= height)) {
	                                inside = true;
	                            }
	                        }
	                        else {
	                            draw('move');

	                            if (inside == true) {
	                                // Closes the polyline (with style info) and adds the closing svg tag
	                                //svg_path = svg_path + '" style="fill:' + options.fillStyle + ';stroke:' + context.strokeStyle + ';stroke-width:' + context.lineWidth + '" /}{/svg}';

	                                var element = $('#' + data_input);
	                                var svg_data = element.val();

	                                // Adds the opening and closing SVG tags
	                                //									if (svg_data == '')
	                                //									{
	                                //										svg_data = '{?xml version="1.0" standalone="no"?}{!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"}{svg width="' + width + '" height="' + height + '" version="1.1" xmlns="http://www.w3.org/2000/svg"}{/svg}';
	                                //									}

	                                // Appends the recorded path
	                                //element.val(svg_data.substring(0, svg_data.length - 6) + svg_path);
	                                element.val(svg_path);
	                            }
	                        }
	                    }

	                    function drawingStart(e) {
	                        // Prevent the default action (scrolling) from occurring
	                        if (inside == true) {
	                            e.preventDefault();
	                        }

	                        drawing = true;

	                        e = getTouch(e);

	                        context.strokeStyle = $('#' + id + '-colors div.selected').css('backgroundColor');

	                        draw('start');
	                    }

	                    function drawingMove(e) {
	                        // Prevent the default action (scrolling) from occurring
	                        if (inside == true) {
	                            e.preventDefault();
	                        }

	                        if (drawing == true) {
	                            e = getTouch(e);

	                            draw('move');
	                        }

	                        return false;
	                    }

	                    function drawingStop() {
	                        drawing = false;

	                        // Draws one last line so we can draw dots (e.g. i)
	                        draw('stop');
	                    }


	                }
//	                else {
//	                    alert('Your browser does not support the CANVAS element required for signing.  The following browsers will work: IE 9.0+, FIREFOX 3.0+, SAFARI 3.0+, CHROME 3.0+, OPERA 10.0+, IPAD 1.0+, IPHONE 1.0+, ANDROID 1.0+');
//	                }
	            }
	            else {
	                alert('Not a CANVAS element');
	            }
	        });
	    }
	});
})(jQuery);