var Canvas =  {
}
    Canvas.init = function() {
        this.area = $('draw');
        this.ctx = this.area.getContext('2d');
        this.area.width = 500;
        this.area.height = 450;

        this.type = "line";
        this.color = "black";
        this.fill = "transparent"
        this.mouosedown = null;
    };

    Canvas.drawLine = function(sx, sy, ex, ey) {
        var ctx = this.ctx;
        if(typeof sx != 'number' 
            || typeof sy != 'number'
            || typeof ex != 'number'
            || typeof ey != 'number') return;
//        ctx.saveImage()

        ctx.beginPath();
        ctx.moveTo(sx, sy);
        ctx.lineTo(ex, ey);
        ctx.stroke();
    }
    Canvas.drawRect = function(sx, sy, ex, ey) {
        var ctx = this.ctx;
        if(typeof sx != 'number' 
            || typeof sy != 'number'
            || typeof ex != 'number'
            || typeof ey != 'number') return;
//        ctx.saveImage()

        if(ex - sx < 0) {
            var tmp = ex;
            ex = sx;
            sx = tmp;
        }
        if(ey - sy < 0) {
            var tmp = ey;
            ey = sy;
            sy = tmp;
        }
        ctx.strokeRect(sx, sy, ex - sx, ey - sy);
        if(this.fill != "transparent") {
            ctx.fillRect(sx, sy, ex - sx, ey - sy);
        }
    }
    Canvas.drawCircle = function(sx, sy, ex, ey) {
        var ctx = this.ctx;
        if(typeof sx != 'number' 
            || typeof sy != 'number'
            || typeof ex != 'number'
            || typeof ey != 'number') return;

        if(ex - sx < 0) {
            var tmp = ex;
            ex = sx;
            sx = tmp;
        }
        if(ey - sy < 0) {
            var tmp = ey;
            ey = sy;
            sy = tmp;
        }

        var dx = (ex + sx) / 2;
        var dy = (ey + sy) / 2;

        var r = (ex - sx) / 2;

        ctx.beginPath();
        ctx.arc(dx, dy, r, 0, Math.PI * 2, true);
        ctx.stroke();
        if(this.fill != "transparent") ctx.fill();
    };
    Canvas.setStyle = function(o) {
        if(!o) return;
        var ctx = this.ctx;
        this.color = o.color || this.color;
        this.fill = o.fill || this.fill;

        ctx.strokeStyle = this.color;
        ctx.fillStyle = this.fill;
    }

function init_event() {
    $('draw').addEventListener('mousedown', function(e) {
        var sx = e.clientX - this.offsetLeft;
        var sy = e.clientY - this.offsetTop;
        Canvas.mousedown = [sx, sy];
    }, false);

//    $('draw').addEventListener('mousemove', function(e) {
//        if(Canvas.mousedown == null) return;
//        if(Canvas.ctx._imgs.length > 0) Canvas.ctx.restoreImage();
//        var sx = Canvas.mousedown[0];
//        var sy = Canvas.mousedown[1];
//        var ex = e.offsetX || e.layerX;
//        var ey = e.offsetY || e.layerY;
//
//        switch(Canvas.type) {
//            case "line":
//                Canvas.drawLine(sx, sy, ex, ey);
//                break;
//            case "rect":
//                Canvas.drawRect(sx, sy, ex, ey);
//                break;
//            default:
//                break;
//        }
//    }, false);

    $('draw').addEventListener('mouseup', function(e) {
        var sx = Canvas.mousedown[0];
        var sy = Canvas.mousedown[1];
        var ex = e.clientX - this.offsetLeft;
        var ey = e.clientY - this.offsetTop;
//        var ex = e.layerX || e.offsetX;
//        var ey = e.layerY || e.offsetY;

        switch(Canvas.type) {
            case "line":
                Canvas.drawLine(sx, sy, ex, ey);
                break;
            case "rect":
                Canvas.drawRect(sx, sy, ex, ey);
                break;
            case "circle":
                Canvas.drawCircle(sx, sy, ex, ey);
                break;
            default:
                break;
        }
        Canvas.mousedown = null;
    },false);
    $('drawtype').addEventListener('change', function() {
        Canvas.type = this.value;
    },false);
    $('color').addEventListener('change', function() {
        Canvas.setStyle({color: this.value});;
    },false);
    $('fill').addEventListener('change', function() {
        Canvas.setStyle({fill: this.value});;
    },false);
}


function $(el) {
    return $[el] || ($[el] = document.getElementById(el));
}

window.addEventListener('load', function() {
    Canvas.init();
    init_event();
}, false);



// Created by Taken
// http://taken.s101.xrea.com/blog/article.php?id=750

CanvasRenderingContext2D.prototype.saveImage = function() {
  var tmpCanvas = document.createElement('canvas');
  tmpCanvas.setAttribute('width', this.canvas.width);
  tmpCanvas.setAttribute('height', this.canvas.height);
  var tmpCtx = tmpCanvas.getContext('2d');
  tmpCtx.globalCompositeOperation = "copy";
  tmpCtx.drawImage(this.canvas, 0, 0);
  var tmpImg = new Image();
  tmpImg.src = tmpCanvas.toDataURL();
  this._imgs.push(tmpImg);
  delete tmpCanvas, tmpCtx, tmpImg;
}

CanvasRenderingContext2D.prototype.restoreImage = function() {
  var tmpImg = this._imgs.pop();
  if (tmpImg) {
      this.save();
       /* try to re-initialize canvas transform */
      try {
	  this.setTransform(1, 0, 0, 1, 0, 0);
      } catch (ex) {
      }
      this.globalCompositeOperation = "copy";
      /* XXX: Firefox doesn't support globalCompositeOperation="copy",
	 so we need to clear the canvas manually. */
      this.clearRect(0, 0, this.canvas.width, this.canvas.height)
      this.drawImage(tmpImg, 0, 0);
      this.restore();
  }  
}

CanvasRenderingContext2D.prototype._imgs = [];

//