/**
 * @class Canvas DrawBoard
 * @author Jason <brotherqian@163.com>
 * @version 1.1
 * @singleton
 * @fileoverview
 *   Build Date:2014/04/12
 *   The application is valid in a browser that supports HTML5 canvas object.
 *   A default canvas tag will render to the div you have appointed
 *   You can use this application like this:
 *      DrawBoard.renderDrawer('myHandWrite',{
 *          penColor:'#FF0000',
 *          penWidth:'1px'
 *      });
 *   If you need a text background,this will help:
 *      DrawBoard.formatText('Sign here');
 *   See {@link DrawBoard.renderDrawer} for more details
 */
    var DrawBoard/*DrawBoard对象*/={};
    DrawBoard.Id="";
    DrawBoard.penColor="#FF0000";
    DrawBoard.penWidth=0;
    DrawBoard.posX/*鼠标位置X*/=0;
    DrawBoard.posY/*鼠标位置Y*/=0;
    DrawBoard.isDown/**/=false;
    DrawBoard.isMove/**/=false;
    DrawBoard.track/**/=[];
    DrawBoard.pos/**/={x:0,y:0};
    DrawBoard.Events/*事件列表*/={
        onMouseMove/*鼠标移动*/:function(e){
            var me=DrawBoard,ctx=me.Context,canvas=me.Canvas;
            if(me.isDown){
               if(me.isMove){
                   ctx.moveTo(me.posX,me.posY);
                   me.isMove=false;
               }
               me.posX= e.layerX-canvas.offsetLeft;
               me.posY= e.layerY+28;
               me.pos={"x":me.posX,"y":me.posY};
               me.track.push(me.pos);
               ctx.lineTo(me.posX, me.posY);
               ctx.stroke();
            }
        },
        onMouseDown/*鼠标按下*/:function(e){
            var me=DrawBoard,canvas=me.Canvas;
            canvas.style.borderColor="#808080";
            me.isDown=true;
            me.isMove=true;
           //计算鼠标位置 仅适用fireFox
            me.posX= e.layerX-canvas.offsetLeft;
            me.posY= e.layerY+28;
            if(me.track.length===0){
                me.redo();
            }
        },
        onMouseOut/*鼠标移出*/:function(){
            var me=DrawBoard;
            me.isDown=false;
        },
        onMouseUp/*鼠标放开*/:function(){
            var me=DrawBoard;
            var canvas=me.Canvas;
            canvas.style.borderColor="#C0C0C0";
            me.isDown=false;
        },
        onTouchStart/**/:function(e){
            e.preventDefault();
            var me=DrawBoard;
            var canvas=me.Canvas;
            canvas.style.borderColor="#808080";
            me.isDown=true;
            me.isMove=true;
            var objTouch= e.touches[0];
            //计算触摸位置
            me.posX=objTouch.pageX;
            me.posY=objTouch.pageY;
        },
        onTouchMove/**/:function(e){
            e.preventDefault();
            var me=DrawBoard;
            var ctx=me.Context;
            var objTouch= e.touches[0];
            if(me.isDown){
                if(me.isMove){
                    ctx.moveTo(me.posX,me.posY);
                    me.isMove=false;
                }
                me.posX= objTouch.pageX;
                me.posY= objTouch.pageY;
                me.pos={"x":me.posX,"y":me.posY};
                me.track.push(me.pos);
                ctx.lineTo(me.posX, me.posY);
                ctx.stroke();
            }
        },
        onTouchEnd/**/:function(e){
            e.preventDefault();
            var me=DrawBoard;
            me.isDown=false;
        }
    };
    /**
     * @method renderDrawer
     * Render a child element to the node that has a id attribute which values @param id
     * @param {String} id the name that canvas will render as it's child element
     * @param {Object} option the pen color
     *         @argument {String} penColor rgb(0,0,0) or #000000 color
     *         @argument {String} penWidth pen width in pixel
     *         @argument {Int} width canvas board width
     *         @argument {Int} height canvas board height
     * @param {Boolean} set mobile mode or not
     */

    DrawBoard.renderDrawer/*渲染绘图对象*/=function(id,option,isMobile){
        var me=DrawBoard;
        me.track.splice(0,me.track.length);
        var p=option;
        var isTouchDevice=Boolean(isMobile);
        me.Id=id;
        me.penColor=p.penColor||me.penColor;
        me.penWidth= p.penWidth;
        var elContainer=document.getElementById(id);
        //初始化Canvas元素
        var elCanvas=document.getElementById('DrawBoard')||document.createElement('canvas');
        elCanvas.id="DrawBoard";
        if(isTouchDevice){
            with(elCanvas){
                width= p.width||640;
                height= p.height||480;
                id='DrawBoard';
                style.margin='auto';
                style.border="1px solid #C0C0C0";
                style.borderRadius="4px";
            }
        }else{
            with(elCanvas){
                width= p.width||640;
                height= p.height||480;
                id='DrawBoard';
                style.margin='auto';
                style.border="1px solid #C0C0C0";
                style.borderRadius="4px";
                style.cursor="url(images/site/pencil.gif),auto";
            }
        }
        elContainer.appendChild(elCanvas);
        var ctx=elCanvas.getContext('2d');
        //初始化canvas上下文对象
        with(ctx){
             lineWidth/*线宽*/=me.penWidth;
             strokeStyle/*描绘颜色*/=me.penColor;
             fillStyle/*填充颜色*/=me.penColor;
             lineCap/*线头样式*/="round";
             lineJoin/*转角样式*/="round";
             miterLimit/*折角锐利度*/=1;
             shadowColor='#FC0000';
             shadowBlur=1;
        }
        //为Canvas元素附加事件 分别为移动设备和桌面设备处理不同的事件
        if(isMobile){
            elCanvas.addEventListener("touchstart",me.Events.onTouchStart,false);
            elCanvas.addEventListener("touchmove",me.Events.onTouchMove,false);
            elCanvas.addEventListener("touchend",me.Events.onTouchEnd,false);
        }else{
            elCanvas.addEventListener("mousemove",me.Events.onMouseMove,false);
            elCanvas.addEventListener("mouseout",me.Events.onMouseOut,false);
            elCanvas.addEventListener("mouseup",me.Events.onMouseUp,false);
            elCanvas.addEventListener("mousedown",me.Events.onMouseDown,false);
            elCanvas.addEventListener("contextmenu",DrawBoard.redo,false);
        }
        //赋值对象
        me.Canvas=elCanvas;
        me.Context=ctx;
    };
    DrawBoard.redo/*清空所有窗体*/=function(){
        var me=DrawBoard;
        var canvas=me.Canvas;
        var ctx=me.Context;
        ctx.clearRect(0,0,canvas.width,canvas.height);
        canvas.width=canvas.width;
        //置空鼠标路径数组
        me.track.splice(0,me.track.length);
        me.renderDrawer(me.Id,me.penColor,me.penWidth);
    };
    DrawBoard.formatText/*绘制一个水印*/=function(text){
        var me=DrawBoard;
        var ctx=me.Context;
        ctx.font/*字体*/="100px 宋体";
        ctx.fillText(text,100,200);
        ctx.font="40px 宋体";
        ctx.fillText("右键清除",250,300);
        ctx.stroke();
    };
    //取png数据类型
    DrawBoard.getImage=function(){
        var me=DrawBoard;
        return me.Context!=null?me.Canvas.toDataURL('image/png'):"";
    };
    DrawBoard.download=function(){

    };
    /**
     * @method isMobile
     *      justify whether it's a mobile device or not
     * @returns {boolean}
     */
    DrawBoard.isMobile=function(){
       return false;
    };
    /**
     * POST you data to the server
     * @param option
     *         @argument {String} method 'POST' or 'GET' is valid
     *         @argument {String} url the address to post to
     *         @argument {String} isDirect if true to use  a asynchronous method,or false to not use
     *         @argument {Function} onSuccess the method to be called upon the success of the request
     */
    DrawBoard.post=function(option){
        var p=option,req=new XMLHttpRequest();
        req.onreadystatechange=function(){
            if(req.readyState===4&&req.status===200&&p.success){
                p.success();
            }
        };
        req.open(p.method||'POST', p.url, p.isDirect||true);
        req.send(p.params);
    };