// create new signature class
var nNeoSignature = new NeoSignature();

// javascript class for signing
function NeoSignature()
{
	// xThis
	var xThis = this;
	
	// set canvas and canvas context
	var sCanvas = null;
	var sCanvasContext = null;
	
	// was signed
	var sSigned = false;
    
    // thikness
	this.sThickness = 10;
	this.sTargetImageSize = 1000;
	
	// init
	this.show = function()
	{
		// tracker for mouse and touch
		xThis.sSigned = false;
        var leftMButtonDown = false;
        
        // get new canvas
        xThis.create();
        
        // if canvas and context exists
        if( xThis.sCanvas != null && xThis.sCanvasContext != null )
        {
	        // bind mousedown
	        jQuery( xThis.sCanvas ).on
	        (
	        	"mousedown", 
	        	function(e) 
	        	{
	        		// check event
	        		if( e.which === 1 ) 
	        		{
	        			leftMButtonDown = true;
		                xThis.sCanvasContext.lineWidth = xThis.sThickness;
	        			xThis.sCanvasContext.fillStyle = "#000";
	        			var x = e.pageX - jQuery(e.target).offset().left;
	        			var y = e.pageY - jQuery(e.target).offset().top;
	        			xThis.sCanvasContext.moveTo( x, y );
	        		}
	        		
	        		// prevent default and send back false
	        		e.preventDefault();
	        		return false;
	        	}
	    	);
	
	        // bind mouse up
	        jQuery( xThis.sCanvas ).on
	        (
	    		"mouseup", 
	    		function(e) 
	    		{
	    			// check event
	        		if( leftMButtonDown && e.which === 1 ) 
	    			{
	        			// track mouse
	        			leftMButtonDown = false;
	    				
	        			// somthing was drawed
	        			xThis.sSigned = true;
	    			}	
	    	        
	    	        // toggle buttons
	    	        xThis.toogleButtons();
	    			
	    			// prevent default and send back false
	        		e.preventDefault();
	    			return false;
	    		}
			);
	
	        // bind mouse move
	        jQuery( xThis.sCanvas ).on
	        (
	        	"mousemove", 
	        	function(e) 
	        	{
	        		// check event
	        		if( leftMButtonDown == true ) 
	        		{
	        			xThis.sCanvasContext.lineWidth = xThis.sThickness;
	        			xThis.sCanvasContext.fillStyle = "#000";
	        			var x = e.pageX - jQuery(e.target).offset().left;
	        			var y = e.pageY - jQuery(e.target).offset().top;
	        			xThis.sCanvasContext.lineTo(x, y);
	        			xThis.sCanvasContext.stroke();
		            	
		            	// track moving
		            	trackedMoving = true;
	        		}
	        		
	        		// prevent default and send back false
	        		e.preventDefault();
	        		return false;
	        	}
	    	);
	
	        // bind touch event
	        jQuery( xThis.sCanvas ).on
	        (
	        	"click", 
	        	function(e) 
	        	{
	        		// paint dot
        			xThis.sCanvasContext.fillStyle = "#000";
        			var x = e.pageX - jQuery(e.target).offset().left;
        			var y = e.pageY - jQuery(e.target).offset().top;
        			xThis.sCanvasContext.fillRect( x - ( xThis.sThickness / 2 ), y - ( xThis.sThickness / 2 ), xThis.sThickness, xThis.sThickness ); 
        			
        			// track touch
    				leftMButtonDown = false;
	
	        		// prevent default and send back false
	        		e.preventDefault();
	        		return false;
	        	}
	        );
	
	        // bind touch event
	        jQuery( xThis.sCanvas ).on
	        (
	        	"touchstart", 
	        	function(e) 
	        	{
	        		// check event
	        		leftMButtonDown = true;
	        		xThis.sCanvasContext.lineWidth = xThis.sThickness;
	        		xThis.sCanvasContext.fillStyle = "#000";
	        		var t = e.originalEvent.touches[0];
	        		var x = t.pageX - jQuery( e.target ).offset().left;
	        		var y = t.pageY - jQuery( e.target ).offset().top;
	        		xThis.sCanvasContext.moveTo(x, y);
	        		xThis.sCanvasContext.fillRect( x - ( xThis.sThickness / 2 ), y - ( xThis.sThickness / 2 ), xThis.sThickness, xThis.sThickness ); 
	
	        		// prevent default and send back false
	        		e.preventDefault();
	        		return false;
	        	}
	        );
	
	        // bind touch move
	        jQuery( xThis.sCanvas ).on
	        (
	        	"touchmove", 
	        	function(e) 
	        	{
	        		// check event
	        		xThis.sCanvasContext.lineWidth = xThis.sThickness;
	        		xThis.sCanvasContext.fillStyle = "#000";
	        		var t = e.originalEvent.touches[ 0 ];
	        		var x = t.pageX - jQuery( e.target ).offset().left;
	        		var y = t.pageY - jQuery( e.target ).offset().top;
	        		xThis.sCanvasContext.lineTo( x, y );
	            	xThis.sCanvasContext.stroke();
	
	            	// prevent default and send back false
	        		e.preventDefault();
	            	return false;
	        	}
	    	);
	
	        // bind touch move
	        jQuery( xThis.sCanvas ).on
	        (
	    		"touchend", 
	    		function(e) 
	    		{
	    			// check event
	        		if( leftMButtonDown ) 
	    			{
	        			// track touch
	    				leftMButtonDown = false;
	    				
	        			// somthing was drawed
	        			xThis.sSigned = true;
	    		        
	    		        // toggle buttons
	    		        xThis.toogleButtons();
	    			}
	    		}
			);
	        
	        // append element
	        jQuery( "#signature_layer" ).show();  
	        
	        // toggle buttons
	        xThis.toogleButtons();
        }
	}
	
	// toggle button visibility
	this.toogleButtons = function()
	{
		// if canvas is sest
        if( xThis.sCanvas != null && xThis.sCanvasContext != null )
        {
        	// check length
        	if( xThis.sSigned )
        	{
        		// activate buttons
        		jQuery( "#signature_btn_takeOver" ).attr( "disabled", false );
        		jQuery( "#signature_btn_takeOver" ).addClass( "green" );
        		jQuery( "#signature_btn_clear" ).attr( "disabled", false );
        	}
        	else
        	{
        		// disable buttons
        		jQuery( "#signature_btn_takeOver" ).attr( "disabled", true );
        		jQuery( "#signature_btn_takeOver" ).removeClass( "green" );
        		jQuery( "#signature_btn_clear" ).attr( "disabled", true );
        	}        	
        }
	}
	
	// method to redraw canvas
	this.arrange = function()
	{
		// if canvas is sest
        if( xThis.sCanvas != null && xThis.sCanvasContext != null )
        {
        	// remove old content
        	var imgData = xThis.sCanvas.toDataURL();
        	
        	//Set Canvas width
            var sizedWindowWidth = jQuery( window ).width();
            var sizedWindowHeight = jQuery( window ).height();
            
            // set canvas
            jQuery( xThis.sCanvas ).css( "width", sizedWindowWidth + "px" );
            jQuery( xThis.sCanvas ).css( "height", sizedWindowHeight + "px" );
        	
            // arrange parent
            jQuery( "#signature_canvas_container" ).css( "width", sizedWindowWidth );
            jQuery( "#signature_canvas_container" ).css( "height", sizedWindowHeight );
            jQuery( "#signature_line" ).css( "top", ( sizedWindowHeight / 100 * 67 ) );
                   
            // set canvas context size
            xThis.sCanvasContext.canvas.width = sizedWindowWidth;
            xThis.sCanvasContext.canvas.height = sizedWindowHeight;
        	
        	// remove old content
        	var tempImage = new Image;
        	tempImage.onload = function(){ xThis.sCanvasContext.drawImage( tempImage, 0, 0, sizedWindowWidth, sizedWindowHeight ); };
        	tempImage.src = imgData;
	        
	        // toggle buttons
	        xThis.toogleButtons();
        }
	}
	
	// method to redraw canvas
	this.clear = function()
	{
		// if canvas is sest
        if( xThis.sCanvas != null && xThis.sCanvasContext != null )
        {
        	// debug
            console.log( "Neo App, INFO, NeoSignature.clear, width: " + xThis.sCanvas.width + ", height: " + xThis.sCanvas.height );
            
        	// remove old content
        	xThis.sCanvasContext.clearRect( 0, 0, xThis.sCanvas.width, xThis.sCanvas.height );
            
        	//Set Canvas width
            var sizedWindowWidth = jQuery( window ).width();
            var sizedWindowHeight = jQuery( window ).height();
        	
            // arrange parent
            jQuery( "#signature_canvas_container" ).css( "width", sizedWindowWidth );
            jQuery( "#signature_canvas_container" ).css( "height", sizedWindowHeight );
            jQuery( "#signature_line" ).css( "top", ( sizedWindowHeight / 100 * 67 ) );
                    
            // set canvas context size
            xThis.sCanvasContext.canvas.width = sizedWindowWidth;
            xThis.sCanvasContext.canvas.height = sizedWindowHeight;
            
            // beginn path
            xThis.sCanvasContext.beginPath();
            
            // somthing was drawed
			xThis.sSigned = false;
	        
	        // toggle buttons
	        xThis.toogleButtons();
        }
	}
	
	// method to redraw canvas
	this.create = function()
	{
		//Set Canvas width
        var sizedWindowWidth = jQuery( window ).width();
        var sizedWindowHeight = jQuery( window ).height();
        
        // debug
        console.log( "Neo App, INFO, NeoSignature.create, width: " + sizedWindowWidth + ", height: " + sizedWindowHeight );
        
        // arrange parent
        jQuery( "#signature_canvas_container" ).css( "width", sizedWindowWidth );
        jQuery( "#signature_canvas_container" ).css( "height", sizedWindowHeight );
        jQuery( "#signature_line" ).css( "top", ( sizedWindowHeight / 100 * 67 ) );
                
        // create new layer
        xThis.sCanvas = document.createElement( "canvas" );
        jQuery( xThis.sCanvas ).css( "width", sizedWindowWidth + "px" );
        jQuery( xThis.sCanvas ).css( "height", sizedWindowHeight + "px" );
        xThis.sCanvasContext = xThis.sCanvas.getContext( "2d" );
        if( xThis.sCanvasContext )
        {
        	// set canvas context size
        	xThis.sCanvasContext.canvas.width = sizedWindowWidth;
        	xThis.sCanvasContext.canvas.height = sizedWindowHeight;
        	
        	// create orientation point
        	xThis.sCanvasContext.fillStyle = "#000";
        }
        
        // append element
        jQuery( "#signature_canvas_container" ).append( xThis.sCanvas );  
	}
	
	// method to redraw canvas
	this.takeOver = function()
	{
		// if canvas is sest
		if( xThis.sCanvas != null && xThis.sCanvasContext != null )
        {
        	// remove old content
        	var imgData = xThis.finish
        	(
        		function( gNewImageData )
        		{
        			// set data in hidden field
                	jQuery( "#signature" ).val( gNewImageData );
                	
                	// write new image in signature area
                	var nSignatureImage = new Image();
                	nSignatureImage.onload = function()
                	{ 
                		// clear signature field
                		jQuery( "#signature_area" ).html( "" ); 
                		jQuery( nSignatureImage ).css( "width", "100%" );
                		jQuery( nSignatureImage ).css( "height", "auto" );
                		jQuery( "#signature_area" ).append( nSignatureImage ); 
                		jQuery( "#signature_area" ).css( "background-color", "white" ); 
            		};
            		
            		// load image
                	nSignatureImage.src = gNewImageData;
                    
                	// remove canvas element
                    jQuery( xThis.sCanvas ).remove();  
                    
                    // close signature field
                    jQuery( "#signature_layer" ).hide();
                    
                    // show next button
                    jQuery( "#signature_btn_next" ).attr( "disabled", false );
            		jQuery( "#signature_btn_next" ).addClass( "green" );
        	        
        	        // set canvas and canvas context
        	        xThis.sCanvas = null;
        	        xThis.sCanvasContext = null;
        		}
        	);
        }
	}
	
	// method to redraw canvas
	this.close = function()
	{
        // remove canvas element
        jQuery( xThis.sCanvas ).remove();  
        
		// set data in hidden field
		jQuery( "#signature_layer" ).hide();
        
        // set canvas and canvas context
        xThis.sCanvas = null;
        xThis.sCanvasContext = null;
	}
	
	// method to crop canvas
	this.finish = function( gCallback )
	{
		// if canvas is sest
		if( xThis.sCanvas != null && xThis.sCanvasContext != null )
        {
//			// create copy
//			var pixels = xThis.sCanvasContext.getImageData( 0, 0, xThis.sCanvas.width, xThis.sCanvas.height );
//		    var l = pixels.data.length, i, x, y;
//		    var bound = { top: null, left: null, right: null, bottom: null };
//
//		    // for all pixels
//		    for( i = 0; i < l; i += 4 ) 
//		    {
//		    	if( pixels.data[ i + 3 ] !== 0 ) 
//		    	{
//		    		x = (i / 4) % xThis.sCanvas.width;
//		    		y = ~~((i / 4) / xThis.sCanvas.width);
//		    		if (bound.top === null) { bound.top = y; }
//		    		if (bound.left === null) { bound.left = x;  } 
//		    		else if (x < bound.left) { bound.left = x; }
//		    		if (bound.right === null) { bound.right = x; } 
//		    		else if (bound.right < x) { bound.right = x; }
//		    		if (bound.bottom === null) { bound.bottom = y; } 
//		    		else if (bound.bottom < y) { bound.bottom = y; }
//		    	}
//		    }
//		    
//		    // calculate trimming
//		    var trimHeight = bound.bottom - bound.top;
//		    var trimWidth = bound.right - bound.left;
//		    var trimmed = xThis.sCanvasContext.getImageData( bound.left, bound.top, trimWidth, trimHeight );
		    
		    // remove old content
        	var tempImage = new Image;
        	tempImage.onload = function()
        	{ 
    		    // adjust new canvas
    			var sCroppedCanvas = document.createElement( "canvas" );
    		    var sCroppedCanvasContext = sCroppedCanvas.getContext( "2d" );
    		    sCroppedCanvasContext.canvas.width = xThis.sTargetImageSize;
    		    sCroppedCanvasContext.canvas.height = xThis.sTargetImageSize;
    		    
    		    // get scaling
    		    var sScalingWidth = xThis.sTargetImageSize / xThis.sCanvasContext.canvas.width;
    		    var sScalingHeight = xThis.sTargetImageSize / xThis.sCanvasContext.canvas.height;
    		    
    		    // check what is the smallest
    		    var sFinalScale = ( sScalingWidth < sScalingHeight ? sScalingWidth : sScalingHeight );
    		    
    		    // calculate final size
    		    var sFinalWidth = xThis.sCanvasContext.canvas.width * sFinalScale;
    		    var sFinalHeight = xThis.sCanvasContext.canvas.height * sFinalScale;
    		    
    		    // calculate position from left
    		    var sLeft = ( xThis.sTargetImageSize - sFinalWidth ) / 2;
    		    var sTop = ( xThis.sTargetImageSize / 3 * 2 ) - ( sFinalHeight / 3 * 2 );
    		    
    		    // paint it
    		    sCroppedCanvasContext.drawImage( tempImage, sLeft, sTop, sFinalWidth, sFinalHeight );
    		    
    		    // callback
    		    gCallback( sCroppedCanvas.toDataURL() );
    		};
    		
    		// load
        	tempImage.src = xThis.sCanvas.toDataURL();
		}
	}
}