$(document).ready(function() {

  var canvas, context, tool;
	
	$("#size_changer").change(function(){
		setSize($(this).val());
	});

  function init () {
    canvas = document.getElementById('imageView');
    if (!canvas) {
      return;
    }

    if (!canvas.getContext) {
      return;
    }

    // Get the 2D canvas context.
    context = canvas.getContext('2d');
    if (!context) {
      return;
    }
		setSize(0.5);
		setColorous("#666666");
		context.lineCap="round";
	 	tool = new tool_pencil();

    canvas.addEventListener('mousedown', ev_canvas, false);
    canvas.addEventListener('mousemove', ev_canvas, false);
    canvas.addEventListener('mouseup',   ev_canvas, false);
  }

	

	function HexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)}
	function HexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)}
	function HexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)}
	function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h}

	function setColorous(color)
	{
		R = HexToR(color);
		G = HexToG(color);
		B = HexToB(color);

		context.strokeStyle = 'rgba('+R+','+G+','+B+',0.3)';
	}	

	function setSize(size)
	{
		context.lineWidth=size;
	}

  function tool_pencil () {
    var tool = this;
    this.started = false;

    this.mousedown = function (ev) {
        context.beginPath();
        context.moveTo(ev._x, ev._y);
        tool.started = true;
    };

    this.mousemove = function (ev) {
  
      if (tool.started) {
        context.lineTo(ev._x, ev._y);
        context.stroke();
      }
    };

    this.mouseup = function (ev) {

      if (tool.started) {
        tool.mousemove(ev);
        tool.started = false;
      }
    };
  }

  function ev_canvas (ev) {
    if (ev.layerX || ev.layerX == 0) { // Firefox
      ev._x = ev.layerX;
      ev._y = ev.layerY;
    } else if (ev.offsetX || ev.offsetX == 0) { // Opera
      ev._x = ev.offsetX;
      ev._y = ev.offsetY;
    }

    var func = tool[ev.type];
    if (func) {
      func(ev);
    }
  }

	function clearCanvas() {
	  context.clearRect(0, 0, canvas.width, canvas.height);
	  var w = canvas.width;
	  canvas.width = 1;
	  canvas.width = w;
	}

	function colorToHex(color) {
    if (color.substr(0, 1) === '#') {
        return color;
    }
    var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(color);
    
    var red = parseInt(digits[2]);
    var green = parseInt(digits[3]);
    var blue = parseInt(digits[4]);
    
    var rgb = blue | (green << 8) | (red << 16);
    return digits[1] + '#' + rgb.toString(16);
	};
	
	
	function postBDchatImage(image)
	{
		
		var texte='';
		var id_img=0;
		$.get("ajax/ajax_bdchat.php?action=post&texte="+texte+"&id_img="+id_img+"&image="+image, function(data){
			majBDchat();
			$.fancybox.close();
		});
		
	}
	

  init();
  
   $("#save_bt").click(function(){
			var canvasData = canvas.toDataURL("image/png");
			clearCanvas();
			init();
			$.post("savecanvas.php", {canvasData: canvasData},
				function(data){
					if(data!=0) postBDchatImage(data);
					else alert("Erreur");
			});	
			
	});
	
	
	
	 $("#erase_bt").click(function(){
			clearCanvas();
			init();
		});

});