(function(window,document){

    var cs2d = function(selector,options){

        return new cs2d.fn.init(selector,options);

    };

    cs2d.fn = cs2d.prototype = {

        init : function(selector,options){

            var s = this,

            // 父容器 dom

            p = cs2d.is_el(selector)?selector:document.querySelector(selector),

            // canvas dom

            c = document.createElement('canvas'),

            // 默认配置

            config = {

                x : 0,

                y : 0,

                // 元素内容+内边距 大小，不包括边框（IE下实际包括）、外边距、滚动条部分|!+[1,] 是否是ie浏览器 不考虑ie

                w : p.clientWidth,

                h : p.clientHeight

            };

            // 重置配置

            cs2d.extend(config,options,true);

            // 添加canvas dom入父容器

            p.appendChild(c);

            // 设置父容器属性

            p.style.position = 'relative';

            p.style.overflow = 'hidden';

            // 设置canvas属性

            c.id = 'canvas_canvas_'+(++cs2d.canvasId);

            c.width = config.w; // canvas 宽

            c.height = config.h; // canvas 高

            c.style.position = 'absolute';

            c.style.zIndex = cs2d.canvasId;

            // 父容器dom节点缓存

            s.parentNode = p;

            // canvas dom节点缓存

            s.canvasNode = c;

            // 得到 CanvasRenderingContext2D

            s.pen = c.getContext('2d');

            // 得到 canvas 的宽和高

            s.width = c.width;

            s.height = c.height;

            // 可以显示的对象容器

            s.childList = [];

            /**

             * 进行数据 【getter setter】

             */

            // s.data = {

            //     width : c.width,

            //     height : c.height

            // };

            // // width

            // Object.defineProperty(s,'width',{

            //     get : function(){

            //         console.log(this);

            //         return s.data.width;

            //     },

            //     set : function(val){

            //         c.width = s.data.width = val;

            //     }

            // });

            // // height

            // Object.defineProperty(s,'height',{

            //     get : function(){

            //         return s.data.height;

            //     },

            //     set : function(val){

            //         c.height = s.data.height = val;

            //     }

            // });

        },

        show : function(){

            var s = this, pen = s.pen, k;

            pen.clearRect(0,0,s.width,s.height);

            for(k in s.childList){

                s.childList[k].show(pen);

            }

        }

    };

    // 将 cs2d类的this指向cs2d原型init方法 【即： cs2d[this] = cs2d.prototype.init[this]】

    cs2d.fn.init.prototype = cs2d.fn;

    /**

     * 静态属性

     */

    // canvas 的 id

    cs2d.canvasId = 0;

    /**

     *

     * @Title type【静态方法】

     *

     * @Description 得到 变量 类型 字符串。

     *

     * @param  {*} data 需要得到类型的变量

     *

     * @return {String}

     *

     * 'abc'              return 'string'

     * true               return 'boolean'

     * 123,NaN,Infinity   return 'number'

     * []                 return 'array'

     * {}                 return 'object'

     * function(){}       return 'function'

     * new Date           return 'date'

     * new RegExp         return 'regexp'

     * Math               return 'math'

     * null               return 'null'

     * undefined          return 'undefined'

     *

     * 变异类型

     * querySelector      return 'html*element'

     * querySelectorAll   return 'nodelist'

     * document.images    return 'htmlcollection'

     *

     */

    cs2d.type = function(data){

        return Object.prototype.toString.call(data).slice(8,-1).toLowerCase();

    };

    /**

     *

     * @Title empty【静态方法】

     *

     * @Description 将变量值转换为布尔值。

     * 规定 ''|null|undefined|NaN|0|{}|[] 都为true，其他变量均为false

     *

     * @param  {Object} data 需要判断的变量

     *

     * @return {Boolean}

     *

     */

    cs2d.empty = function(data){

        var hasProp = true, prop = '';

        if ( typeof data === 'object' ) {

            for ( prop in data ) {

                hasProp = false; // 证明该对象存在属性

                break;

            }

            return hasProp;

        }

        return !data;

    };

    // 是否设置【静态方法】

    cs2d.isset = function(data){

        var type = cs2d.type(data);

        return type!=='null'&&type!=='undefined';

    };

    // 是否是元素【静态方法】

    cs2d.is_el = function(el){

        return !!(el && el.nodeType == 1);

    };

    // 是否是null【静态方法】

    cs2d.is_null = function(data){

        return cs2d.type(data)==='null';

    };

    // 是否是数组【静态方法】

    cs2d.is_array = function(data){

        return cs2d.type(data)==='array';

    };

    /**

     *

     * @Title extend【静态方法】

     *

     * @Description 对象合并

     *

     * @param  {Object}       des            源对象

     *

     * @param  {Array|Object} src            对象数组

     *

     * @param  {Boolean}      override       是否重写源对象

     *

     * @return {object}                      返回源对象的引用

     *

     */

    cs2d.extend = function(des, src, override){

        var i = 0,l = 0,k = null;

        if ( src instanceof Array ) {

            for ( i = 0, l = src.length; i < l; i++ ) {

                cs2d.extend(des, src[i], override);

            }

        } else {

            for ( k in src ) {

                if ( override || !(k in des) ) {

                    des[k] = src[k];

                }

            }

        }

        return des;

    };

    /**

     *

     * @Title each【静态方法】

     *

     * @Description 迭代器

     *

     * @param  {Array}      obj      待迭代对象数组

     *

     * @param  {Function}   callback 迭代回调方法

     *

     * @param  {Object}     context  环境变量,用作回调函数中this的对象

     *

     * @param  {*}          arg      传入迭代回调函数的参数

     *

     * @throws {jsonstringify} 缺少参数

     *

     */

    cs2d.each = function(obj, callback, context, arg){

        var k     = null

        for ( k in obj ) {

            callback.call( context||null, k, obj[k], arg );

        }

    };

    // 动态扩展方法

    cs2d.fn.extend = function(src, override){

        cs2d.extend(this,src,override);

    };

    /**

     *

     * @Title requestAnimFrame

     *

     * @Description 做动画的方法，即requestAnimationFrame()，而且基于浏览器的层面也能更好的进行优化

     *

     */

    var lastTime = 0,vendors = ['ms','moz','webkit','o'],x = 0,xl = vendors.length;

    for(;x<xl && !window.requestAnimationFrame;x++){

        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];

        window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];

    }

    // 兼容不支持 requestAnimationFrame 的浏览器

    // if(!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element){

    //     var currTime = new Date().getTime();

    //     var timeToCall = Math.max(0,16 - (currTime - lastTime));

    //     var id = window.setTimeout(function(){

    //         callback(currTime + timeToCall);

    //     },timeToCall);

    //     lastTime = currTime+timeToCall;

    //     return id;

    // };

    // if(!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id){

    //     window.clearTimeout(id);

    // };

    window.c = window.cs2d = cs2d;

})(window,document);

cs2d.fn.extend({

    // getPen : function(){

    //     var s = this, pen = s.pen;

    //     return pen;

    // }

});