cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div>
<textarea style="display:none;width:500px;height:250px;white-space:nowrap;resize:vertical;box-sizing:border-box;margin:5px 0px;font-size:14px;font-family:Consolas;box-sizing:border-box;" id="sample_a" autocomplete="off"><!DOCTYPE html>
<html lang="ja">
    <head>   
        <meta charset="utf-8">
        <title>Document</title>
        <link rel="stylesheet" href="css/text.css">
        <script src="js/text.js"></script>
    </head>
    <body>
        <div>
            <h1>JavaScript</h1>
            <p><a href="https://ja.wikipedia.org/wiki/JavaScript"></a></p>
            <blockquote>
                誕生
                JavaScriptはネットスケープコミュニケーションズのブレンダン・アイクによって開発され、Netscape Navigator 2.0で実装された。
                開発当初はLiveScriptと呼ばれていたが、1995年にサン・マイクロシステムズ(現・オラクル)が開発したプログラミング言語Javaが当時大きな注目を浴びており、ネットスケープとサン・マイクロシステムズが業務提携していた事もあったため、JavaScriptという名前に変更された[5][6]。
                最初のJavaScriptエンジン(英語版)はブレンダン・アイクによりNetscape Navigatorのために作成されたものであった。このエンジンはSpiderMonkeyと呼ばれており、C言語で実装されていた。
                また、全てJavaで記述されたJavaScriptエンジンであるRhinoも同じくNetscapeのNorris Boyd(後にGoogleに移籍)らにより作成された。
                1996年にマイクロソフトのInternet Explorer 3.0に搭載されるようになると、その手軽さからJavaScriptは急速に普及していく。
                1997年、通信に関する標準を策定する国際団体EcmaインターナショナルによってJavaScriptの中核的な仕様がECMAScriptとして標準化され[7]、多くのウェブブラウザで利用できるようになった。
                ネットスケープは、ウェブアプリケーション開発言語として自社のサーバ製品に実装したLiveWire JavaScriptも発表したが[6]、こちらはあまり普及しなかった。
                JavaScriptの登場初期は、ブラウザベンダー間で言語仕様の独自拡張が行われていたため、ブラウザ間の互換性が極めて低かった。
                ECMAScriptの策定以降は実装間の互換性は向上し、DOMなど関連仕様の実装に関する互換性も高くなっていった。
            </blockquote>
            <blockquote>
                発展
                市場のブラウザ間互換性がある程度確立された2000年頃には、GoogleやAmazon等の大手企業もJavaScriptを積極的に利用し始めた。
                2005年、マイクロソフトが開発したJavaScriptの非同期通信を利用した技術にAjaxという名前が付けられたことによって、高機能なウェブアプリケーション開発言語の一つとして再び注目を集めた。
                初期にAjaxを利用した代表的なアプリケーションとして、Google マップ[1]やAmazon Diamond Search[2]などがある。
                また、JavaScriptはウェブブラウザの拡張機能を開発するための言語としても使われるようになった。
                当初は拡張機能用のAPIが統一されていなかったが、互換性を高めようとする動きがある[8]。
                当初はインタプリタ方式で実行されることが一般的であったためJavaScriptの実行速度はさほど速くなかったが、現在ではJITコンパイルなどを利用した各種の最適化がなされており、各ウェブブラウザのベンダーともに高速化を図ってしのぎを削っている。
                さらには、この高速化を受ける形で、Node.jsのようにサーバサイドでもJavaScriptを使う動きが見られるようになった。
            </blockquote>
            <blockquote>
                JavaScript 2.0
                次世代のJavaScriptとして“JavaScript 2.0”を作ろうとした動きは2度あったが、いずれもまとまらなかった。
                1度目はECMAScript 3が完成したのち2000年から2003年にかけて発生したが、ネットスケープとマイクロソフトの対立でまとまらなかった。
                当時ネットスケープが提案していた案はアドビのActionScript 2.0に引き継がれ、マイクロソフトの案はJScript .NETへと引き継がれた。
                その後もネットスケープ及びMozilla FoundationはECMAScriptの策定に並行してJavaScriptを拡張し、JavaScript 1.x系列としてバージョンアップを繰り返していた。
                ECMAScript側ではECMAScript 4の策定が1999年以降進められており[9]、2006年の時点でMozilla Foundationはこれに基づいてJavaScript 2.0を作成することを表明していた。
                MozillaはECMAScript 4の策定にあたって、Pythonの文法を一部取り込んだ案を提案しており、自身でもこれを実装していた[10]。
                しかしその後、ECMAScriptの標準化作業がMozilla、Adobe、Opera、Googleらが推すECMAScript 4と、Microsoft、Yahoo!らが推すECMAScript 3.1に事実上分裂してしまった影響から、2008年8月に大きな方針転換があり、ECMAScript 4は破棄され後者がECMAScript 5として2009年に標準化された。
                ECMAScript 4に入る予定だった機能は新たに発足した「ECMAScript Harmony」に先送りとなった[11]。これは後にECMAScript 2015として標準化が完了した。
                なお、ECMAScript 5が標準化されて以降、MozillaのJavaScript実装はECMAScriptへの準拠を謳うようになった[12]ためバージョン番号での呼称は行われなくなり、JavaScript 2.0は死語となった。
            </blockquote>
        </div>
    </body>
</html>
</textarea>
</div>
<div style="font-size:14px;font-family:Consolas;">
    resize アイコンドラッグ → div 要素リサイズ<br>
    resize アイコン長押し → 縦横分割の変更<br>
    分割要素 → 始点|終点 → textarea 削除
</div>
            
          
!
            
              div.wrapper[data-custom_ui],
div.wrapper[data-custom_ui] *, *{
    font-size:14px;
    line-height:20px;
    font-family:Consolas;
    box-sizing:border-box;
    user-select:none;
    -moz-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
}
.data-custom_ui-none{
    user-select:none;
    -moz-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
}
div.wrapper[data-custom_ui]{
    width:100%;
    height:100%;
    position:relative;
    overflow:visible;
    background-color:red;
    border:1px solid #aaa;
    box-sizing:border-box;
}
/* ############################ textarea ############################ */
div.wrapper[data-custom_ui] > div.container{
    width:100%;
    height:100%;
    position:relative;
    overflow:hidden;
    background-color:green;
    display:flex;
    align-items:stretch;
}
div.wrapper[data-custom_ui] > div.container.rows{
    flex-direction:row;
}
div.wrapper[data-custom_ui] > div.container.column{
    flex-direction:column;
}
div.wrapper[data-custom_ui] > div.container > div.contents{
    width:100%;
    height:100%;
    position:relative;
    display:flex;
    flex-direction:row;
    overflow:hidden;
    background-color:magenta;
}
div.wrapper[data-custom_ui] > div.container > div.contents:nth-of-type(2){
    --background-color:black;
    --border:none;
    --border-left:solid 1px #aaa;
    --margin-left:1px;
}
div.wrapper[data-custom_ui] > div.container.column > div.contents:nth-of-type(2){
    --background-color:black;
    --border:none;
    --border-top:solid 1px #aaa;
}
div.wrapper[data-custom_ui] > div.container > div.contents > canvas{
    position:absolute;
}
div.wrapper[data-custom_ui] > div.container > div.contents > canvas.horizon{
    background-color:pink;
    left:0;
    bottom:0;
}
div.wrapper[data-custom_ui] > div.container > div.contents > canvas.vertical{
    background-color:magenta;
    right:0;
}
div.wrapper[data-custom_ui] > div.container > div.contents > div.map{
    position:absolute;
    width:18px;
    height:18px;
    bottom:0;
    right:0;
    overflow:hidden;
    background-color:black;
}
div.wrapper[data-custom_ui] > div.container > div.contents > div.map > canvas.menu{
    background-color:white;
    position:absolute;
    bottom:0;
}
div.wrapper[data-custom_ui] > div.container > div.contents > div.indexbox{
    width:100%;
    height:100%;
    overflow:hidden;
    position:relative;
    background-color:black;
}
div.wrapper[data-custom_ui] > div.container > div.contents > div.indexbox > canvas{
    display:block;
    background-color:palegreen;
    position:absolute;
    right:0;
}


div.wrapper[data-custom_ui] > div.container > div.contents > div.textbox{
    width:100%;
    height:100%;
    position:relative;
    background-color:blue;
}
div.wrapper[data-custom_ui] > div.container > div.contents > div.textbox > canvas{
    display:block;
    background-color:#eeffee;
}
div.wrapper[data-custom_ui] > div.container > div.contents > div.textbox > canvas.text{
    position:relative;
}
div.wrapper[data-custom_ui] > div.container > div.contents > div.textbox > canvas.rect{
    position:absolute;
    background-color:transparent;
    top:0px;
    left:0px;
}

/* ############################ cursor ############################ */

div.wrapper[data-custom_ui] > div.container > div.contents > div.textbox > div.skin{
    position:absolute;
    display:inline-block;
    width:100%;
    height:calc(100% + 36px);
    overflow:hidden;
    outline:none;
    white-space:nowrap;
    left:0;
    top:0;
}
div.wrapper[data-custom_ui] > div.container > div.contents > div.textbox > div.skin > span.cursor{
    position:absolute;
    display:inline-block;
    width:auto;
    min-width:0px;
    overflow:hidden;
    outline:none;
    white-space:nowrap;
    top:0%;
    right:0%;
    z-index:1;
    height:20px;
    background-color:black;
}
div.wrapper[data-custom_ui] > div.container > div.contents > div.textbox > div.skin > span.cursor > span.caret{
    user-select:auto;
    -moz-user-select:auto;
    -webkit-user-select:auto;
    -ms-user-select:auto;
    outline:none;
    /*ime-mode:inactive;*/
    color:red;
}

/* ############################ contextmenu ############################ */
div.wrapper[data-custom_ui] > div.contextmenu{
    position:absolute;
    display:none;
}
div.wrapper[data-custom_ui] > div.contextmenu.show{
    display:block;
}



/* ############################ split ############################ */
div.wrapper[data-custom_ui] > div.split{
    position:absolute;
    display:none;
    width:100%;
    height:0px;
    top:0;
}
div.wrapper[data-custom_ui] > div.split.column{
    width:0px;
    height:100%;
}
div.wrapper[data-custom_ui] > div.split > div{
    background-color:green;
    position:absolute;
    opacity:0.7;
    width:100%;
    height:4px;
    left:0;
    top:-2px;
}
div.wrapper[data-custom_ui] > div.split.column > div{
    width:4px;
    height:100%;
    left:-2px;
    top:0;
}


/* ############################ resize ############################ */
div.wrapper[data-custom_ui] > div.resize{
    position:absolute;
    display:none;
    width:100%;
    height:100%;
    top:-1px;
    left:-1px;
    border:solid 2px black;
}
div.wrapper[data-custom_ui] > div.resize.show{
    display:block;
}
div.wrapper[data-custom_ui] > div.resize > div{
    width:calc(100% + 0px);
    height:calc(100% + 0px);
    background-color:lime;
    position:absolute;
    opacity:0.1;
    left:0px;
    top:0px;
}

/* ############################ test ############################ */
div#test,
div#test *{
    font-size:12px;
    font-family:Consolas;
}
div#test > select{
    width:250px;
}



            
          
!
            
              (function(win,doc){
win.addEventListener("load",function(){
var textarea = $('textarea').parse(doc.getElementsByTagName('textarea')[0]);
    console.log(textarea);
    
}, false);//onload
})(window,document);



var $ =(function(){

/* ============================== Common ============================== */
function UI(){}
function Common(){}
Common.prototype = Object.create(UI.prototype,{
    'getEvent' : {
        value: function(fnc, self, option){
            return function(evt){
                fnc.call(this, evt, self, option);
            };
        }
    },
    'getXY' : {
        value:
        function(evt){
            return {'x' : evt.offsetX, 'y' : evt.offsetY};
        }
    },
    'getOffsetXY' : {
        value:
        function(evt, item){
        var self = item;
        var box = self.parentNode;
        var sx = box.scrollLeft;
        var sy = box.scrollTop;
        var rect = box.getBoundingClientRect();
            return {'x' : evt.clientX - rect.left + sx, 'y' : evt.clientY - rect.top + sy};
        }
    },
    'getRect' : {
        value:
        function(element){
            return element.getBoundingClientRect();
        }
    },
    'setCtx' : {
        value: 
        function(ctx, dtx){
            for(var key in dtx){
                ctx[key] = dtx[key];
            }
        }
    },
    'setAttr' : {
        value: function(){
        var d = arguments;
            for(var i = 1; i < d.length; i = i + 2){
                d[0].setAttribute(d[i], d[i + 1]);
            }
            return d[0];
        }
    },
    'setProp' : {
        value: function(){
        var d = arguments;
            for(var i = 1; i < d.length; i = i + 2){
                d[0][d[i]] =  d[i + 1];
            }
            return d[0];
        }
    },
    'setCss' : {
        value: function(){
        var d = arguments;
            for(var i = 1; i < d.length; i = i + 2){
                d[0].style[d[i]] = d[i + 1];
            }
            return d[0];
        }
    },
    'getCss' : {
        value: function(){
        var arg = arguments;
        var style = window.getComputedStyle(arg[0]);
        var css = {};
            for(var i = 1; i < arg.length; i = i + 1){
                css[arg[i]] = style.getPropertyValue(arg[i]);
            }
            return css;
        }
    },
    'setStyle' : {
        value: function(){
        var d = arguments;
        var elem = d[0];
            for(var prop in d[1]){
                switch(prop){
                case 'attr' :
                    UI.prototype.setAttr(elem, d[1][prop]);
                break;
                case 'css' :
                    UI.prototype.setCss(elem, d[1][prop]);
                break;
                case 'prop' :
                    UI.prototype.setProp(elem, d[1][prop]);
                break;
                }
            }
            return elem;
        }
    },
    'createElement' : {
        value: function(tag){
        var elem = document.createElement('span');
            elem.innerHTML = tag;
            return elem.firstChild;
        }
    },
    'create' : {
        value: function(){
        var d = arguments;
        var elem = document.createElement(d[0]);
            for(var prop in d[1]){
                switch(prop){
                case 'attr' :
                    UI.prototype.setAttr(elem, d[1][prop]);
                break;
                case 'css' :
                    UI.prototype.setCss(elem, d[1][prop]);
                break;
                case 'prop' :
                    UI.prototype.setProp(elem, d[1][prop]);
                break;
                }
            }
            return elem;
        }
    },
    'query' : {
        value: function(elem,prop){
            return elem.querySelector(prop);
        }
    },
    'querys' : {
        value: function(elem,prop){
            return elem.querySelectorAll(prop);
        }
    },
    'entry' : {
        value: function(){
        }
    },
    'insert' : {
        value: function(element,target){
            target.parentNode.insertBefore(element,target);
        }
    },
    'append' : {
        value: function(element,target){
            target.appendChild(element);
        }
    },
    'remove' : {
        value: function(element){
            element.parentNode.removeChild(element);
        }
    },
    'upper' : {
        value: function(prop){
            prop = prop.toLowerCase();
            var match = prop.match(/TextArea/i);
            switch(match){
            case null : return prop[0].toUpperCase() + prop.substring(1);
            default :
            case true :
                switch(match[0]){
                case 'textarea' : return 'TextArea';
                }
            break;
            }
        }
    },
    'defineProperty' : {
        value: function(obj, prop){
            Object.defineProperty(obj, prop, {
              enumerable: false,
              //configurable: false,
              //writable: false,
              value: obj[prop]
            });
        }
    },
    'push' : {
        value: function(obj){
        var n = this.length;
            Array.prototype.push.call(this,obj);
            UI.prototype.defineProperty(this, n);
        }
    },
    'splice' : { value:  Array.prototype.splice },
    'concat' : { value: Array.prototype.concat },
    'copy' : {
        value: function(od, nd){
            if(nd === undefined){
                nd = ((od instanceof Array) === true) ? [] : {};
            }
            for(var prop in od){
                if(od.hasOwnProperty(prop)){
                    if(od[prop] !== null && od[prop].nodeType === undefined && (typeof od[prop] == 'object')){
                        UI.prototype.copy(od[prop], nd[prop] = ((od[prop] instanceof Array) === true) ? [] : {});
                    }
                    else{
                        nd[prop] = od[prop];
                    }
                }
            }
            return nd;
        }
    },
    'UA' : {
        value : (function(){
        var ua = window.navigator.userAgent.toLowerCase();
            if(ua.indexOf('edge') > -1){
                return  'Edge';
            }
            else
            if(ua.indexOf('chrome') > -1){
                return  'Chrome';
            }
            else
            if(ua.indexOf('firefox') > -1){
                return  'Firefox';
            }
            else
            if(ua.indexOf('msie') > -1 || ua.indexOf('trident') > -1){
                return  'Ie';
            }
            else{
                return null;
            }
        })()
    },
    'getItem' : {
        value: function(prop){
            switch(prop){
            case 'event' : return {
                    'down' : [],
                    'drag' : [],
                    'up' : [],
                    'wheel' :[],
                    'timeId' : [0],
                    'click':0,
                    'clickId':0,
                    'clickTimer':250,
                    'delayId':0,
                    'delayTimer':500,
                    value:{},
                    temp :null,
                    target:null,
                    type:null,
                    width:null,
                    height:null,
                    z:null,
                    flag:false
                };
            default :
            }
        }
    },
    'az' : {value: 'abcdefghijklmnopqrstuvwxyz'},
    'Name' : { value:  'Common' },
    'CodeName' : { value: 'Green-Tea' }
});



/* ============================== Element ============================== */
function Element(){}
Element.prototype = Object.create(Common.prototype,{
    'offsetWidth' : {
        get : function() {
            return this[0].offsetWidth;
        }
    },
    'offsetHeight' : {
        get : function() {
            return this[0].offsetHeight;
        }
    },
    'clientWidth' : {
        get : function() {
            return this[0].clientWidth;
        }
    },
    'clientHeight' : {
        get : function() {
            return this[0].clientHeight;
        }
    },
    'scrollLeft' : {
        get : function() {
            return this[0].scrollLeft;
        }
    },
    'scrollTop' : {
        get : function() {
            return this[0].scrollTop;
        }
    },
    'scrollWidth' : {
        get : function() {
            return this[0].scrollWidth;
        }
    },
    'scrollHeight' : {
        get : function() {
            return this[0].scrollHeight;
        }
    },
    'offsetLeft' : {
        get : function() {
            return this[0].offsetLeft;
        }
    },
    'offsetTop' : {
        get : function() {
            return this[0].offsetTop;
        }
    },
    'parentNode' : {
        get : function() {
            return this[0].parentNode;
        }
    },
    'classList' : {
        get : function() {
            return this[0].classList;
        }
    },
    'width' : {
        set : function(n) {
            this[0].width = n;
        },
        get : function() {
            return this[0].width;
        }
    },
    'height' : {
        set : function(n) {
            this[0].height = n;
        },
        get : function() {
            return this[0].height;
        }
    },
    'textContent' : {
        set : function(n) {
            this[0].textContent = n;
        },
        get : function() {
            return this[0].textContent;
        }
    },
    'previousElementSibling' : {
        //set : function(n) {
        //    this[0].textContent = n;
        //},
        get : function() {
            return this[0].previousElementSibling;
        }
    },
    'rect' : {
        get : function() {
            return this[0].getBoundingClientRect();
        }
    },
    'query' : {
        value: function(prop){
            return this[0].querySelector(prop);
        }
    },
    'querys' : {
        value: function(prop){
            return this[0].querySelectorAll(prop);
        }
    },
    'appendChild' : {
        value: function(prop){
            this[0].appendChild(prop);
        }
    }
});



/* ============================== UI ============================== */

UI.prototype = Object.create(Common.prototype,{
    'Name' : { value:  'UI' },
});



/* ============================== Style ============================== */
UI.prototype.Style = function Style(element){
    if(this.length === undefined){
        this.length = 0;
    }
    this.push(element);
    this.defineProperty(this,'length');
};



/* ============================== Content ============================== */
UI.prototype.Content = function Content(){
var arg = arguments;
    if(this.length === undefined){
        this.length = 0;
    }
    this.clientWidth = 0;
    this.clientHeight = 0;
    this.offsetLeft = 0;
    this.offsetTop = 0;
    this.offsetWidth = 0;
    this.offsetHeight = 0;
    this.scrollLeft = 0;
    this.scrollTop = 0;
    this.scrollWidth = 0;
    this.scrollHeight = 0;
    this.parent = null;
    this.width = 0;
    this.height = 0;
};
/* ============================== ContentList ============================== */



UI.prototype.ContentList = function ContentList(){
var arg = arguments;
    if(this.length === undefined){
        this.length = 0;
    }
    this.clipList = new ui.ClipList();
    this.defineProperty(this,'clipList');
    this.defineProperty(this,'length');
};



/* ============================== Node ============================== */
UI.prototype.Node = function Node(element){
var arg = arguments;
    if(this.length === undefined){
        this.length = 0;
    }
    this.push(element);
    if(element.parentNode !== null){
        this.parent = new ui.Node(element.parentNode);
    }
    switch(element.nodeName.toLowerCase()){
    case 'canvas' :
        this.context = element.getContext('2d');
    break;
    default :
    }
    this.nodeList = new ui.NodeList();
    this.style = new ui.Style(element);
    this.defineProperty(this,'length');
};



/* ============================== NodeList ============================== */
UI.prototype.NodeList = function NodeList(){
var arg = arguments;
    if(this.length === undefined){
        this.length = 0;
    }
    switch(arg.length){
    case 0 :
    break;
    default :
        for(var i = 0; i < arg.length; i = i + 1){
            switch(arg[i].nodeType){
            case undefined :
                switch(arg[i].Name){
                case undefined :
                    this.append(arg[i]);
                break;
                default :
                    this.appendNode(arg[i]);
                }
            break;
            default :
                this.append(arg[i]);
            }
        }
    }
    this.clipList = new ui.ClipList();
    this.defineProperty(this,'clipList');
    this.defineProperty(this,'length');
};



UI.prototype.Campus = function Campus(element,content){
var arg = arguments;
    if(this.length === undefined){
        this.length = 0;
    }
    this.push(element);
    this.context = element.getContext('2d');
    if(content !== undefined){
        this.content = content;
    }
    if(arg[0].parentNode !== null){
        this.parent = new ui.Node(arg[0].parentNode);
    }
    if(arg[0].nodeName.toLowerCase() == 'canvas'){
        this.context = arg[0].getContext('2d');
    }
    this.style = new ui.Style(element);
    this.japonikaList = new ui.JaponikaList();
    this.defineProperty(this,'length');
};



/* ============================== CampusList ============================== */
UI.prototype.CampusList = function CampusList(){
var arg = arguments;
    if(this.length === undefined){
        this.length = 0;
    }
    switch(arg.length){
    case 0 :
    break;
    default :
        for(var i = 0; i < arg.length; i = i + 1){
            switch(arg[i].nodeType){
            case undefined :
                switch(arg[i].Name){
                case undefined :
                    this.append(arg[i]);
                break;
                default :
                    this.appendCampus(arg[i]);
                }
            break;
            default :
                this.append(arg[i]);
            }
        }
    }
    this.clipList = new ui.ClipList();
    this.defineProperty(this,'clipList');
    this.defineProperty(this,'length');
};


/* ============================== Japonika ============================== */
UI.prototype.Japonika = function Japonika(){
var arg = arguments;
var obj = {'name':null,'width':0,'height':0,'offsetLeft':0,'offsetTop':0,'offsetWidth':0,'offsetHeight':0,'left':0,'top':0};
    if(this.length === undefined){
        this.length = 0;
    }
    for(var key in obj){
        this[key] = obj[key];
    }
    for(var i = 0; i < arg.length; i = i + 2){
        switch(arg[i]){
        case 'element' :
            this.push(arg[i + 1]);
            this.context = arg[i + 1].getContext('2d');
        break;
        default :
            this[arg[i]] = arg[i + 1];
        }
    }
    this.defineProperty(this,'length');
};



/* ============================== JaponikaList ============================== */
UI.prototype.JaponikaList = function JaponikaList(){
var arg = arguments;
    if(this.length === undefined){
        this.length = 0;
    }
    for(var i = 0; i < arg.length; i = i + 1){
        this.push(arg[i]);
        this[arg[i].name] = arg[i];
    }
    this.defineProperty(this,'length');
};



/* ============================== Clip ============================== */
UI.prototype.Clip = function Clip(obj){
var arg = arguments;
    if(this.length === undefined){
        this.length = 0;
    }
    switch(arg.length){
    case 0 :
    break;
    default :
        this.appendItem(obj);
    }
    this.defineProperty(this,'length');
};



/* ============================== ClipList ============================== */
UI.prototype.ClipList = function ClipList(){
var arg = arguments;
    if(this.length === undefined){
        this.length = 0;
    }
    this.defineProperty(this,'length');
};


/* ============================== TextArea ============================== */
UI.prototype.TextArea = function TextArea(){
var wrapper = this.createElement(this.VALUE.tag);
var test = this.createElement(this.VALUE.test);
var container = this.query(wrapper,'div.container');
var split = this.query(wrapper,'div.split');
var resize = this.query(wrapper,'div.resize');
var contextmenu = this.query(wrapper,'div.contextmenu');
var menuItem = this.querys(contextmenu,'div.contextmenu > *');
var range = 18;
var event;
    this.conf = {
        range: range,
        data:{volume:10,space:4,temp:{rowLength:0,maxWidth:0,index:[0,0]}},
        text : {fillStyle:'#888',textBaseline:'middle',font:'14px "Consolas"'},
        bookmark:{'disabled':[false,false,false],list:[[[0,4,0,4],[1,17,0,37],[2,7,0,47],[3,1,0,61]],[],[[1,7,0,47],[2,1,0,61]]],'temp':[0,0,0]},
        value:null,
        temp:null
    };
    wrapper = new ui.Node(wrapper);
    container = new ui.Node(container);
    split = new ui.Node(split);
    resize = new ui.Node(resize);
    contextmenu = new ui.Node(contextmenu);
    contextmenu.append(menuItem);
    wrapper.appendNode(contextmenu,split,resize);
    test = new ui.Campus(test);
    this.setCtx(test.context,this.conf.text);
    this.itemList = new ui.NodeList(wrapper,container,split,resize,contextmenu,test);
    this.contentList = new ui.ContentList();
    this.cursorList = new ui.NodeList();
    this.event = event = this.getItem('event');
    
    this.addCampus(100,100);
};



UI.prototype.Style.prototype =
UI.prototype.Content.prototype =
UI.prototype.ContentList.prototype =
UI.prototype.Node.prototype =
UI.prototype.NodeList.prototype =
UI.prototype.Campus.prototype =
UI.prototype.CampusList.prototype =
UI.prototype.Japonika.prototype =
UI.prototype.JaponikaList.prototype =
UI.prototype.Clip.prototype =
UI.prototype.ClipList.prototype =
UI.prototype.TextArea.prototype = Object.create(Common.prototype);



/* ############################## ContentList ############################## */
UI.prototype.ContentList.prototype = Object.create(UI.prototype.ContentList.prototype,{
    'appendNode' : {
        value : function(obj) {
        var key = obj[0].classList;
            this.push(obj[0]);
            if(key.length > 0){
                this[key.item(0)] = obj;
            }
        }
    },
    'removeItem' : {
        value : function() {
            for(var i = 0; i < this.length; i = i + 1){
                switch(this[i].parentNode){
                case null :
                    this.splice(i,1);
                    i = i - 1;
                break;
                default :
                }
            }
            for(var key in this){
                switch(this[key].Name){
                case 'Clip' :
                    switch(this[key].length){
                    case 0 :
                        delete this[key];
                        delete this.clipList[key];
                    break;
                    default :
                    }
                break;
                default :
                }
            }
        }
    },
    'clip' : {
        value : function() {
        var arg = arguments;
            for(var i = 0; i < arg.length; i = i + 1){
            this.push(arg[i][0]);
            var key = arg[i][0].classList;
                if(key.length > 0){
                var item = key.item(0);
                    switch(this.clipList[item]){
                    case undefined :
                        this.clipList[item] = arg[i];
                        this[item] = new ui.Clip(arg[i],item);
                    break;
                    default :
                        this[item].appendItem(arg[i]);
                    }
                }
            }
        }
    },
    'constructor' : { value: UI.prototype.ContentList },
    'Name' : {value: 'ContentList'}
});



/* ############################## Node ############################## */
UI.prototype.Node.prototype = Object.create(Element.prototype,{
    'append' : {
        value: function(obj){
            switch(obj.nodeType){
            case undefined:
                for(var i = 0; i < obj.length; i = i + 1){
                    this.appendNode(new ui.Node(obj[i]));
                }
            break;
            default :
                this.appendNode(new ui.Node(obj));
            }
            return this;
        }
    },
    'appendNode' : {
        value: function(obj){
        var arg = arguments;
            for(var i = 0; i < arg.length; i = i + 1){
            var key = arg[i].classList;
                this.nodeList.push(arg[i]);
                if(key.length > 0){
                    this.nodeList[key.item(0)] = arg[i];
                }
            }
            return this;
        }
    },
    'constructor' : { value: UI.prototype.Node },
    'Name' : {value: 'Node'}
});



/* ############################## NodeList ############################## */
UI.prototype.NodeList.prototype = Object.create(UI.prototype.NodeList.prototype,{
    'append' : { value : UI.prototype.Node.prototype.append },
    'appendNode' : {value : UI.prototype.ContentList.prototype.appendNode},
    'removeItem' : {value : UI.prototype.ContentList.prototype.removeItem},
    'clip' : {value : UI.prototype.ContentList.prototype.clip},
    'constructor' : { value: UI.prototype.NodeList },
    'Name' : {value: 'NodeList'}
});



/* ############################## Campus ############################## */
UI.prototype.Campus.prototype = Object.create(Element.prototype,{
    'getScrollLeft' : {
        value : function(left){
        var content = this.content;
        var clientWidth = content.clientWidth;
        var offsetWidth = content.offsetWidth;
        var scrollLeft = content.scrollLeft;
        var range = this.japonikaList.range;
        var width = range.offsetWidth - range.width;
        var hp = (scrollLeft + left) / (offsetWidth - clientWidth);
            if(hp < 0){
                hp = 0;
            }
            else
            if(hp > 1){
                hp = 1;
            }
            return width * hp;
        }
    },
    'getScrollTop' : {
        value : function(top){
        var content = this.content;
        var clientHeight = content.clientHeight;
        var offsetHeight = content.offsetHeight;
        var scrollTop = content.scrollTop;
        var range = this.japonikaList.range;
        var height = range.offsetHeight - range.height;
        var vp = (scrollTop + top) / (offsetHeight - clientHeight);
            if(vp < 0){
                vp = 0;
            }
            else
            if(vp > 1){
                vp = 1;
            }
            return height * vp;
        }
    },
    'setScrollLeft' : {
        value : function(left,prop){
        var content = this.content;
        var offsetWidth = content.offsetWidth;
        var clientWidth = content.clientWidth;
        var range = this.japonikaList.range;
        var width = range.width;
        var right = range.offsetWidth - range.width;
        var hp = left / right;
            if(hp <= 0){
                left = 0;
                hp = 0;
                this.japonikaList.left.draw();
                this.japonikaList.right.draw('active');
            }
            else
            if(hp >= 1){
                left = right;
                hp = 1;
                this.japonikaList.left.draw('active');
                this.japonikaList.right.draw();
            }
            else{
                this.japonikaList.left.draw('active');
                this.japonikaList.right.draw('active');
            }
            
            range.left = left;
            switch(prop){
            case 'resize' :
                this.japonikaList.range.draw();
            break;
            default :
                switch(prop){
                case 'click' :
                    this.japonikaList.range.draw();
                break;
                default :
                    this.japonikaList.range.draw('down');
                }
                content.setScrollLeft((offsetWidth - clientWidth)*hp);
            }
            if(Math.abs(range.left - left) > 0){}
        }
    },
    'setScrollTop' : {
        value : function(top,prop){
        var content = this.content;
        var offsetHeight = content.offsetHeight;
        var clientHeight = content.clientHeight;
        var range = this.japonikaList.range;
        var bottom = range.offsetHeight - range.height;
        var vp = top / bottom;
            if(vp <= 0){
                top = 0;
                vp = 0;
                this.japonikaList.top.draw();
                this.japonikaList.bottom.draw('active');
            }
            else
            if(vp >= 1){
                top = bottom;
                vp = 1;
                this.japonikaList.top.draw('active');
                this.japonikaList.bottom.draw();
            }
            else{
                this.japonikaList.top.draw('active');
                this.japonikaList.bottom.draw('active');
            }
            
            range.top = top;
            switch(prop){
            case 'resize' :
                this.japonikaList.range.draw();
            break;
            default :
                switch(prop){
                case 'click' :
                    this.japonikaList.range.draw();
                break;
                default :
                    this.japonikaList.range.draw('down');
                }
                content.setScrollTop((offsetHeight - clientHeight)*vp);
            }
            if(Math.abs(range.top - top) > 0){}
        }
    },
    'hitTest' : {
        value : function(m){
        var list = this.japonikaList;
        var mx = m.x;
        var my = m.y;
        var i = list.length - 1;
            for(; i > 0; i = i - 1){
            var o = list[i];
            var a = o.offsetLeft + o.left;
            var b = o.offsetTop + o.top;
            var c = a + o.width;
            var d = b;
            var e = c;
            var f = d + o.height;
            var g = a;
            var h = f;
            var w = (c - a) * (my - b) - (d - b) * (mx - a);
            var x = (e - c) * (my - d) - (f - d) * (mx - c);
            var y = (g - e) * (my - f) - (h - f) * (mx - e);
            var z = (a - g) * (my - h) - (b - h) * (mx - g);
                if(w >= 0 && x >= 0 && y >= 0 && z >= 0 || w < 0 && x < 0 && y < 0 && z < 0){
                    return i;
                }
                
            }
        }
    },
    'draw' : {
        value : function(){
        var list = this.japonikaList;
            for(var key in list){
                list[key].draw();
            }
        }
    },
    'append' : {
        value: function(obj){
            switch(obj.nodeType){
            case undefined:
                for(var i = 0; i < obj.length; i = i + 1){
                    this.appendCampus(new ui.Campus(obj[i]));
                }
            break;
            default :
                this.appendCampus(new ui.Campus(obj));
            }
            return this;
        }
    },
    'appendCampus' : {
        value: function(obj){
        var key = obj[0].classList;
            this.campusList.push(obj[0]);
            if(key.length > 0){
                this.campusList[key.item(0)] = obj;
            }
            return this;
        }
    },
    'calc' : {
        value : function(str) {
            return this.context.measureText(str).width;
        }
    },
    'remove' : {
        value: function(n){
            return this.campusList.splice(n,1);
        }
    },
    'constructor' : { value: UI.prototype.Campus },
    'Name' : {value: 'Campus'}
});



/* ############################## CampusList ############################## */
UI.prototype.CampusList.prototype = Object.create(UI.prototype.CampusList.prototype,{
    'append' : { value : UI.prototype.Campus.prototype.append },
    'appendCampus' : {
        value : function(obj) {
        var arg = arguments;
            for(var i = 0; i < arg.length; i = i + 1){
            var key = arg[i][0].classList;
                this.push(arg[i][0]);
                if(key.length > 0){
                    this[key.item(0)] = arg[i];
                }
            }
        }
    },
    'clip' : {value : UI.prototype.ContentList.prototype.clip},
    'constructor' : { value: UI.prototype.CampusList },
    'Name' : {value: 'CampusList'}
});



/* ############################## JaponikaList ############################## */
UI.prototype.JaponikaList.prototype = Object.create(UI.prototype.JaponikaList.prototype,{
    'constructor' : { value: UI.prototype.JaponikaList },
    'Name' : { value: 'JaponikaList' }
});



/* ############################## Japonika ############################## */
UI.prototype.Japonika.prototype = Object.create(UI.prototype.Japonika.prototype,{
    'draw' : {
        value : function(prop){
        var can = this[0];
        var ctx = this.context;
        var o = this;
        var left = o.offsetLeft;
        var top = o.offsetTop;
        var wid = o.offsetWidth;
        var hei = o.offsetHeight;
        var c = this.css;
        var d = c.d;
        var x = o.offsetLeft + Math.floor(o.left);
        var y = o.offsetTop +  Math.floor(o.top);
        var w = Math.round(o.width);
        var h = Math.round(o.height);
        var type;
            ctx.fillStyle = c.bg.fillStyle;
            ctx.fillRect(o.offsetLeft,o.offsetTop,o.offsetWidth,o.offsetHeight);
            switch(prop){
            case undefined :
                switch(d.length){
                case 0 :
                    ctx.fillStyle = c.static.fillStyle;
                    ctx.fillRect(x,y,w,h);
                break;
                default :
                    type = d[0][0].type;
                    ctx.clearRect(left,top,wid,hei);
                    ctx.fillStyle = c.bg.fillStyle;
                    ctx.fillRect(left,top,wid,hei);
                    switch(type){
                    case 'polygon' :
                        ctx.fillStyle = c.static.fillStyle;
                        for(j = 0; j < d.length; j = j + 1){
                            ctx.beginPath();
                            ctx.moveTo(x + d[j][0].x,y + d[j][0].y);
                            for(k = 1; k < d[j].length; k = k + 1){
                                ctx.lineTo(x + d[j][k].x,y + d[j][k].y);
                            }
                            ctx.closePath();
                            ctx.fill();
                        }
                    break;
                    case 'line' :
                        ctx.strokeStyle = c.static.strokeStyle;
                        for(j = 0; j < d.length; j = j + 1){
                            ctx.beginPath();
                            ctx.moveTo(x + d[j][0].x,y + d[j][0].y);
                            ctx.lineTo(x + d[j][1].x,y + d[j][1].y);
                            ctx.closePath();
                            ctx.stroke();
                        }
                    break;
                    }
                }
            break;
            default :
                switch(d.length){
                case 0 :
                    ctx.fillStyle = c[prop].color;
                    ctx.fillRect(x,y,w,h);
                break;
                default :
                    type = d[0][0].type;
                    ctx.clearRect(left,top,wid,hei);
                    ctx.fillStyle = c[prop].bg;
                    ctx.fillRect(left,top,wid,hei);
                    switch(type){
                    case 'polygon' :
                        ctx.fillStyle = c[prop].color;
                        for(j = 0; j < d.length; j = j + 1){
                            ctx.beginPath();
                            ctx.moveTo(x + d[j][0].x,y + d[j][0].y);
                            for(k = 1; k < d[j].length; k = k + 1){
                                ctx.lineTo(x + d[j][k].x,y + d[j][k].y);
                            }
                            ctx.closePath();
                            ctx.fill();
                        }
                    break;
                    case 'line' :
                        ctx.strokeStyle = cc[prop].strokeStyle;
                        for(j = 0; j < d.length; j = j + 1){
                            ctx.beginPath();
                            ctx.moveTo(x + d[j][0].x,y + d[j][0].y);
                            ctx.lineTo(x + d[j][1].x,y + d[j][1].y);
                            ctx.closePath();
                            ctx.stroke();
                        }
                    break;
                    }
                }
            }
        }
    },
    'constructor' : { value: UI.prototype.Japonika },
    'Name' : { value: 'Japonika' }
});



/* ############################## Clip ############################## */
UI.prototype.Clip.prototype = Object.create(UI.prototype.Clip.prototype,{
    'appendItem' : {
        value:
        function(obj){
        var id = ui.az[this.length];
            this.push(obj[0]);
            this[id] = obj;
            switch(obj.content){
            case undefined :
            break;
            default :
                obj.content.id = id;
            }
        }
    },
    'removeItem' : {
        value:
        function(n){
        var az = this.az;
        var a = this.az[n];
        var element = this[a][0];
        var parent = element.parentNode;
        var list = [];
            this.splice(n,1);
            delete this[a];
            switch(parent){
            case null :
            break;
            default :
                this.remove(element);
            }
            for(var key in this){
                if(this[key].content !== undefined){
                }
                list.push(this[key]);
                delete this[key];
            }
            for(var i = 0; i < list.length; i = i + 1){
            var item = list[i];
                this[az[i]] = item;
                switch(item.content){
                case undefined:
                break;
                default :
                    item.content.id = az[i];
                    item.content.sector.removeItem();
                }
            }
        }
    },
    'constructor' : { value: UI.prototype.Clip },
    'Name' : { value: 'Clip' }
});



/* ############################## ClipList ############################## */
UI.prototype.ClipList.prototype = Object.create(UI.prototype.ClipList.prototype,{
    'constructor' : { value: UI.prototype.ClipList },
    'Name' : { value: 'ClipList' }
});


/* ############################## Style ############################## */
UI.prototype.Style.prototype = Object.create(UI.prototype.Style.prototype,{
    'get' : {
        value : function(n) {
            return this.getCss(this[0],n);
        }
    },
    'set' : {
        value : function(m,n) {
        var arg = arguments;
            for(var i = 0; i < arg.length; i = i + 2){
                this[0].style[arg[i]] = arg[i + 1];
            }
        }
    },
    'constructor' : { value: UI.prototype.Style },
    'Name' : { value: 'Style' }
});



/* ############################## TextArea ############################## */
UI.prototype.TextArea.prototype = Object.create(UI.prototype.TextArea.prototype,{
    'EVENTS' : {
        'value' : {
            'IndexUp' : function(evt, textarea,content){
                //console.log('IndexDown');
            },
            'IndexDrag' : function(evt, textarea,content){
                //console.log('IndexDrag');
            },
            'IndexDown' : function(evt, textarea,content){
                //console.log('IndexDown');
            },
            'TextUp' : function(evt, textarea,content){
                //console.log('TextDown');
            },
            'TextDrag' : function(evt, textarea,campus){
                //console.log('TextDrag');
            },
            'TextDown' : function(evt, textarea,campus){
                //console.log('TextDown');
            },
            'HorizonUp' : function(evt, textarea,campus){
                //console.log('HorizonUp');
            var event = campus.event;
            var target = event.target;
                switch(target.name){
                case 'left' :
                    campus.setScrollLeft(campus.japonikaList.range.left);
                    campus.japonikaList.range.draw();
                break;
                case 'center' :
                break;
                case 'right' :
                    campus.setScrollLeft(campus.japonikaList.range.left);
                    campus.japonikaList.range.draw();
                break;
                case 'range' :
                    target.draw();
                break;
                default :
                }
                document.removeEventListener('mousemove',event.drag[0]);
                document.removeEventListener('mouseup',event.up[0]);
            },
            'HorizonDrag' : function(evt, textarea,campus){
                //console.log('HorizonDrag');
            var content = campus.content;
            var event = campus.event;
            var target = event.target;
            var left = event.temp;
            var right = target.offsetWidth - target.width;
            var z = textarea.getOffsetXY(evt,campus[0]);
            var x = z.x - event.z.x;
                left = left + x;
                campus.setScrollLeft(left);
            },
            'HorizonDown' : function(evt, textarea,campus){
                //console.log('HorizonDown');
            var event = campus.event;
            var z = textarea.getXY(evt);
            var target = campus.japonikaList[campus.hitTest(z)];
            var content = campus.content;
            var step = content.clientWidth / 2;
            var left = 0;
                event.target = target;
                switch(target.name){
                case 'left' :
                    left = campus.getScrollLeft(-step);
                    campus.setScrollLeft(left,'click');
                    target.draw('down');
                    document.addEventListener('mouseup',event.up[0],false);
                break;
                case 'center' :
                    //console.log('step');
                break;
                case 'right' :
                    left = campus.getScrollLeft(step);
                    campus.setScrollLeft(left,'click');
                    target.draw('down');
                    document.addEventListener('mouseup',event.up[0],false);
                break;
                case 'range' :
                    event.temp = target.left;
                    event.z = z;
                    target.draw('down');
                    document.addEventListener('mousemove',event.drag[0],false);
                    document.addEventListener('mouseup',event.up[0],false);
                break;
                }
            },
            'VerticalUp' : function(evt, textarea,campus){
                //console.log('VerticalUp');
            var event = campus.event;
            var target = event.target;
                switch(target.name){
                case 'top' :
                    campus.setScrollTop(campus.japonikaList.range.top);
                    campus.japonikaList.range.draw();
                break;
                case 'middle' :
                break;
                case 'bottom' :
                    campus.setScrollTop(campus.japonikaList.range.top);
                    campus.japonikaList.range.draw();
                break;
                case 'range' :
                    target.draw();
                break;
                default :
                }
                document.removeEventListener('mousemove',event.drag[0]);
                document.removeEventListener('mouseup',event.up[0]);
            },
            'VerticalDrag' : function(evt, textarea,campus){
            var content = campus.content;
            var event = campus.event;
            var target = event.target;
            var top = event.temp;
            var bottom = target.offsetHeight - target.height;
            var z = textarea.getOffsetXY(evt,campus[0]);
            var y = z.y - event.z.y;
                switch(Math.abs(y) > 0){
                case true :
                    top = top + y;
                    campus.setScrollTop(top);
                break;
                case false :
                break;
                }
            },
            'VerticalDown' : function(evt, textarea,campus){
                //console.log('VerticalDown');
            var event = campus.event;
            var z = textarea.getXY(evt);
            var target = campus.japonikaList[campus.hitTest(z)];
            var content = campus.content;
            var step = content.clientHeight / 2;
            var top = 0;
                event.target = target;
                switch(target.name){
                case 'top' :
                    top = campus.getScrollTop(-step);
                    campus.setScrollTop(top,'click');
                    target.draw('down');
                    document.addEventListener('mouseup',event.up[0],false);
                break;
                case 'middle' :
                    //console.log('step');
                break;
                case 'bottom' :
                    top = campus.getScrollTop(step);
                    campus.setScrollTop(top,'click');
                    target.draw('down');
                    document.addEventListener('mouseup',event.up[0],false);
                break;
                case 'range' :
                    event.temp = target.top;
                    event.z = z;
                    target.draw('down');
                    document.addEventListener('mousemove',event.drag[0],false);
                    document.addEventListener('mouseup',event.up[0],false);
                break;
                }
            },
            'MenuUp' : function(evt, textarea,campus){
                //console.log('MenuUp');
            var itemList = textarea.itemList;
            var wrapper = itemList.wrapper;
            var container = itemList.container;
            var contents = itemList.contents;
            var split = itemList.split;
            var resize = itemList.resize;
            var offsetWidth = container.offsetWidth;
            var offsetHeight = container.offsetHeight;
            var r = textarea.conf.range;
            var range = r*3;
            var event = campus.event;
            var left = split.offsetLeft;
            var top = split.offsetTop;
            var label = campus.content.label;
            var id = campus.content.id;
            var n = 0;
                switch(event.target){
                case 'row' :
                    if(left > range && left < offsetWidth - range){
                        container.classList.remove('column');
                        textarea.split(contents.length == 1 ? null : label,left);
                    }
                    else
                    if(left < r){
                        textarea.split(label);
                    }
                    else
                    if(left > offsetWidth - r){
                        textarea.split(label);
                    }
                    else{
                        //console.log('[7]',null);
                    }
                break;
                case 'column' :
                    if(top > range && top < offsetHeight - range){
                        container.classList.add('column');
                        textarea.split(contents.length == 1 ? null : label,top);
                    }
                    else
                    if(top < r){
                        textarea.split(label);
                    }
                    else
                    if(top > offsetHeight - r){
                        textarea.split(label);
                    }
                    else{
                        //console.log('[3]',null);
                    }
                break;
                case null :
                var width = resize.offsetWidth;
                var height = resize.offsetHeight;
                var hp = 1;
                var vp = 1;
                    switch(contents.length){
                    case 1 :
                    break;
                    default :
                        hp = Math.min(contents.a.offsetWidth/offsetWidth,contents.b.offsetWidth/offsetWidth);
                        vp = Math.min(contents.a.offsetHeight/offsetHeight,contents.b.offsetHeight/offsetHeight);
                    }
                    if(hp*width > r*3 && vp*height > r*3){
                        width = width + width%2;
                        height = height + height%2;
                        wrapper.style.set('width',(width) +'px','height',(height) + 'px');
                        textarea.split(null);
                    }
                break;
                default :
                }
                clearTimeout(event.delayId);
                campus.japonikaList.menu.draw();
                split.style.set('display','none','left','0px','top','0px');
                resize.style.set('display','none');
                document.body.classList.remove('data-custom_ui-none');
                document.removeEventListener('mousemove',event.drag[0]);
                document.removeEventListener('mouseup',event.up[0]);
            },
            'MenuDrag' : function(evt, textarea,campus){
            var z = textarea.getOffsetXY(evt,campus[0]);
            var r = textarea.conf.range;
            var range = r*3;
            var itemList = textarea.itemList;
            var split = itemList.split;
            var resize = itemList.resize;
            var wrapper = itemList.wrapper;
            var container = itemList.container;
            var content = itemList.contents.a;
            var event = campus.event;
            var temp = event.temp;
            var x,y,box,left,top,width,height;
                switch(temp){
                case null :
                    event.temp = evt.target.classList.item(0);
                break;
                default :
                    clearTimeout(event.delayId);
                }
                switch(event.type){
                case 'split' :
                    switch(event.target){
                    case null :
                        if(z.x < 0 || z.x > campus.offsetWidth){
                            event.target = 'row';
                            split.classList.add('column');
                        }
                        if(z.y < 0 || z.y > campus.offsetHeight){
                            event.target = 'column';
                            split.classList.remove('column');
                        }
                    break;
                    case 'row' :
                        z = textarea.getOffsetXY(evt,content);
                        if(z.x < r){
                            z.x = 0;
                        }
                        else
                        if(z.x < range){
                            z.x = range;
                        }
                        
                        if(z.x > container.offsetWidth - r){
                            z.x = container.offsetWidth;
                        }
                        else
                        if(z.x > container.offsetWidth - range){
                            z.x = container.offsetWidth - range;
                        }
                        if(event.flag === false){
                            split.style.set('display','block');
                            event.flag = true;
                        }
                        split.style.set('left',z.x+'px');
                    break;
                    case 'column':
                        z = textarea.getOffsetXY(evt,content);
                        if(z.y < r){
                            z.y = 0;
                        }
                        else
                        if(z.y < range){
                            z.y = range;
                        }
                        
                        if(z.y > container.offsetHeight - r){
                            z.y = container.offsetHeight;
                        }
                        else
                        if(z.y > container.offsetHeight - range){
                            z.y = container.offsetHeight - range;
                        }
                        if(event.flag === false){
                            split.style.set('display','block');
                        }
                        split.style.set('top',z.y+'px');
                    break;
                    default :
                    }
                break;
                case 'resize' :
                    box = campus.parentNode.parentNode;
                    left = box.offsetLeft;
                    top = box.offsetTop;
                    width = box.offsetWidth;
                    height = box.offsetHeight;
                    x = z.x - event.z.x;
                    y = z.y - event.z.y;
                    resize.style.set('width',(left + width + x) + 'px','height',(top + height + y) + 'px');
                    clearTimeout(event.delayId);
                break;
                default :
                    if(z.x < 0 || z.x > campus.offsetWidth || z.y < 0 || z.y > campus.offsetHeight){
                        box = campus.parentNode.parentNode;
                        left = box.offsetLeft;
                        top = box.offsetTop;
                        width = box.offsetWidth;
                        height = box.offsetHeight;
                        x = z.x - event.z.x;
                        y = z.y - event.z.y;
                        event.type = 'resize';
                        resize.style.set('width',(left + width + x) + 'px','height',(top + height + y) + 'px');
                        resize.style.set('display','block');
                    }
                }
            },
            'MenuDown' : function(evt, textarea,campus){
                //console.log('MenuDown');
            var itemList = textarea.itemList;
            var resize = itemList.resize;
            var z = textarea.getOffsetXY(evt,campus[0]);
            var event = campus.event;
            var box = campus.parentNode.parentNode;
            var left = box.offsetLeft;
            var top = box.offsetTop;
            var width = box.offsetWidth;
            var height = box.offsetHeight;
                resize.style.set('width',(left + width) + 'px','height',(top + height) + 'px');
                event.temp = null;
                event.target = null;
                event.type = 'risize';
                event.z = z;
                event.flag = false;
                event.delayId = setTimeout(function(){
                    event.type = 'split';
                    campus.japonikaList.split.draw();
                },event.delayTimer);
                document.body.classList.add('data-custom_ui-none');
                document.addEventListener('mousemove',event.drag[0],false);
                document.addEventListener('mouseup',event.up[0],false);
            }
        }
    },
    'split' : {
        'value' :
        function(){
        var arg = arguments;
        var container = this.itemList.container;
        var offsetWidth = container.offsetWidth;
        var offsetHeight = container.offsetHeight;
        var contentList = this.contentList;
        var clip = contentList.contents;
        var length = contentList.length;
        var id = this.az[length - 1];
        var contents = clip[id];
        var key = container.classList.item(1) === null ? 'row' : 'column';
        var width = 0;
        var height = 0;
        var margin = 0;
            switch(length){ // content.length = 1;
            case 1 :
                switch(arg.length){
                case 0 :
                    switch(key){
                    case 'column' :
                        height = Math.ceil(offsetHeight / 2);
                        contents.style.set('width',(offsetWidth) + 'px','height',(height) + 'px');
                        this.addCampus((offsetWidth) + 'px',  (offsetHeight - height) + 'px');
                        this.resize();
                    break;
                    case 'row' :
                        width = Math.ceil(offsetWidth / 2);
                        contents.style.set('width',(width) + 'px','height',(offsetHeight) + 'px');
                        this.addCampus((offsetWidth - width) + 'px',  (offsetHeight) + 'px');
                        this.resize();
                    break;
                    }
                break;
                case 1 :// resize
                    contents.style.set('width',(offsetWidth) + 'px','height',(offsetHeight) + 'px');
                    this.resize();
                break;
                case 2 :// change
                    switch(key){
                    case 'column' :
                        height = arg[1];
                        contents.style.set('width',(offsetWidth) + 'px','height',(height) + 'px');
                        this.addCampus((offsetWidth) + 'px',  (offsetHeight - height) + 'px');
                        this.resize();
                    break;
                    case 'row' :
                        width = arg[1];
                        contents.style.set('width',(width) + 'px','height',(offsetHeight) + 'px');
                        this.addCampus((offsetWidth - width) + 'px',  (offsetHeight) + 'px');
                        this.resize();
                    break;
                    }
                break;
                }
            break;
            default : // content.length > 1;
            var a = clip.a;
            var b = clip.b;
                switch(arg.length){
                case 0 :
                    switch(key){
                    case 'column' :
                    break;
                    case 'row' :
                    break;
                    }
                break;
                case 1 : // delete
                    switch(arg[0]){
                    case 'a' :
                        a.style.set('width',(offsetWidth) + 'px','height',(offsetHeight) + 'px');
                        this.delCampus(1);
                        this.resize();
                    break;
                    case 'b' :
                        b.style.set('width',(offsetWidth) + 'px','height',(offsetHeight) + 'px');
                        this.delCampus(0);
                        this.resize();
                    break;
                    case null :
                    var hp = a.offsetWidth/offsetWidth;
                    var vp = a.offsetHeight/offsetHeight;
                        switch(key){
                        case 'column' :
                            height = Math.ceil(offsetHeight*vp);
                            heigit = height + height%2;
                            a.style.set('width',(offsetWidth) + 'px','height',(height) + 'px');
                            b.style.set('width',(offsetWidth) + 'px','height',(offsetHeight - height) + 'px');
                            this.resize();
                        break;
                        case 'row' :
                            width = Math.ceil(offsetWidth*hp);
                            width = width + width%2;
                            a.style.set('width',(width) + 'px','height',(offsetHeight) + 'px');
                            b.style.set('width',(offsetWidth - width) + 'px','height',(offsetHeight) + 'px');
                            this.resize();
                        break;
                        }
                    break;
                    }
                break;
                case 2 : // change
                var z = arg[1];
                    switch(arg[0]){
                    case 'a' :
                        switch(key){
                        case 'column' :
                            height = arg[1];
                            a.style.set('width',(offsetWidth) + 'px','height',(height) + 'px');
                            b.style.set('width',(offsetWidth) + 'px','height',(offsetHeight - height) + 'px');
                            this.resize();
                        break;
                        case 'row' :
                            width = arg[1];
                            a.style.set('width',(width) + 'px','height',(offsetHeight) + 'px');
                            b.style.set('width',(offsetWidth - width) + 'px','height',(offsetHeight) + 'px');
                            this.resize();
                        break;
                        }
                    break;
                    case 'b' :
                        switch(key){
                        case 'column' :
                            height = arg[1];
                            a.style.set('width',(offsetWidth) + 'px','height',(height) + 'px');
                            b.style.set('width',(offsetWidth) + 'px','height',(offsetHeight - height) + 'px');
                            this.resize();
                        break;
                        case 'row' :
                            width = arg[1];
                            a.style.set('width',(width) + 'px','height',(offsetHeight) + 'px');
                            b.style.set('width',(offsetWidth - width) + 'px','height',(offsetHeight) + 'px');
                            this.resize();
                        break;
                        }
                    break;
                    }
                break;
                }
            }
        }
    },
    'addCampus' : {
        'value' :
        function(width,height){
        var itemList = this.itemList;
        var container = itemList.container;
        var contentList = this.contentList;
        var cursorList = this.cursorList;
        var contents = this.createElement(this.VALUE.contents);
        var skin = this.query(contents,'div.skin');
        var canvas = this.querys(contents,'canvas');
        var cursor = this.query(contents,'span.cursor');
        var conf = this.conf;
        var content,campusList,list;
        
            this.setCss(contents,'width', width, 'height',height);
            container.appendChild(contents);
            
            content = new this.Content(this);
            contents = new ui.Node(contents);
            contents.content = content;
            
            itemList.clip(contents);
            itemList.clip(new ui.Node(skin));
            contentList.clip(contents);
            cursorList.clip(cursor = new this.Cursor(cursor));
            
            campusList = new ui.CampusList();
            contents.campusList = campusList;
            for(var i = 0; i < canvas.length; i = i + 1){
                campusList.appendCampus(new ui.Campus(canvas[i],content));
            }
            content.campusList = campusList;
            content.calcContext = campusList.text.context;
            content.rowLength = 0;
            content.label = this.az[contentList.length - 1];
            content.sector = contentList;
            
            // TE
            //content.scrollLeft = 0;
            //content.scrollTop = 0;
            //content.scrollTop = 2960;
            //content.scrollTop = 200;
            //content.scrollTop = 409;
            
            
            conf = contents.content.conf;
            list = campusList;
            
            cursor.caret.textContent = new Date().getTime();
            
            for(var prop in list){
            var item = list[prop];
            var key = item[0].classList.item(0);
            var event = item.event = this.getItem('event');
                item.css = conf[key];
                switch(key){
                case 'index' :
                    item.japonikaList = new ui.JaponikaList(
                        new ui.Japonika('element',item[0],'name','index','css',conf[key].index)
                        );
                        item[0].addEventListener('mousedown',this.getEvent(this.EVENTS.IndexDown,this,item),false);
                        event.up[0] = this.getEvent(this.EVENTS.IndexUp,this,item);
                break;
                case 'text' :
                    item.japonikaList = new ui.JaponikaList(
                        new ui.Japonika('element',item[0],'name','text','css',conf[key].text)
                        );
                break;
                case 'rect' :
                    item.japonikaList = new ui.JaponikaList(
                        new ui.Japonika('element',item[0],'name','rect','css',conf[key].rect)
                        );
                        item[0].addEventListener('mousedown',this.getEvent(this.EVENTS.TextDown,this,item),false);
                break;
                case 'horizon' :
                    item.japonikaList = new ui.JaponikaList(
                        new ui.Japonika('element',item[0],'name','horizon','css',conf[key].horizon),
                        new ui.Japonika('element',item[0],'name','left','css',conf[key].left),
                        new ui.Japonika('element',item[0],'name','center','css',conf[key].center),
                        new ui.Japonika('element',item[0],'name','right','css',conf[key].right),
                        new ui.Japonika('element',item[0],'name','range','css',conf[key].range)
                        );
                        item[0].addEventListener('mousedown',this.getEvent(this.EVENTS.HorizonDown,this,item),false);
                        event.drag[0] = this.getEvent(this.EVENTS.HorizonDrag,this,item);
                        event.up[0] = this.getEvent(this.EVENTS.HorizonUp,this,item);
                break;
                case 'vertical' :
                    item.japonikaList = new ui.JaponikaList(
                        new ui.Japonika('element',item[0],'name','vertical','css',conf[key].vertical),
                        new ui.Japonika('element',item[0],'name','top','css',conf[key].top),
                        new ui.Japonika('element',item[0],'name','middle','css',conf[key].middle),
                        new ui.Japonika('element',item[0],'name','bottom','css',conf[key].bottom),
                        new ui.Japonika('element',item[0],'name','range','css',conf[key].range)
                        );
                        item[0].addEventListener('mousedown',this.getEvent(this.EVENTS.VerticalDown,this,item),false);
                        event.drag[0] = this.getEvent(this.EVENTS.VerticalDrag,this,item);
                        event.up[0] = this.getEvent(this.EVENTS.VerticalUp,this,item);
                break;
                case 'menu' :
                    item.japonikaList = new ui.JaponikaList(
                        new ui.Japonika('element',item[0],'name','menu','css',conf[key].menu),
                        new ui.Japonika('element',item[0],'name','split','css',conf[key].split)
                        );
                        item[0].addEventListener('mousedown',this.getEvent(this.EVENTS.MenuDown,this,item),false);
                        event.drag[0] = this.getEvent(this.EVENTS.MenuDrag,this,item);
                        event.up[0] = this.getEvent(this.EVENTS.MenuUp,this,item);
                break;
                }
            }
        }
    },
    'delCampus' : {
        'value' :
        function(n){
        var contents = this.contentList.contents;
            contents.removeItem(n);
            this.itemList.contents.removeItem(n);
            this.itemList.skin.removeItem(n);
            this.cursorList.cursor.removeItem(n);
            for(var key in contents){
                contents[key].content.label = key;
            }
            this.resize();
        }
    },
    'draw' : {
        'value' :
        function(){
        var contentList = this.contentList;
            for(var prop in contentList){
            var clip = contentList[prop];
                for(var key in clip){
                var contents = clip[key];
                var campusList = contents.campusList;
                var index = campusList.index;
                var rect = campusList.rect;
                var horizon = campusList.horizon;
                var vertical = campusList.vertical;
                var menu = campusList.menu;
                    menu.japonikaList.menu.draw();
                    contents.content.draw();
                    //horizon.japonikaList.center.draw();
                    //horizon.japonikaList.range.draw();
                    //vertical.japonikaList.middle.draw();
                    //vertical.japonikaList.range.draw();
                }
            }
        }
    },
    'resize' : {
        'value' :
        function(){
        var temp = this.conf.data.temp;
        var maxWidth = temp.maxWidth;
        var rowLength = temp.rowLength;
        var contentList = this.contentList;
        var cursor = this.cursorList.cursor;
        var skin = this.itemList.skin;
        //var scrollLeft = 0;
        //var scrollTop = 0;
        var i,j,k;
            for(var prop in contentList){
            var clip = contentList[prop];
                for(var key in clip){
                var contents = clip[key];
                var content = contents.content;
                var ctx = this.getCss(content.getCursor(),'font-size','font-family','color');
                var itx = {'font':ctx['font-size'] + ' "' + ctx['font-family'] +'"','fillStyle':ctx.color,'textBaseline':'middle','textAlign':'right'};
                var ttx = {'font':ctx['font-size'] + ' "' + ctx['font-family'] +'"','fillStyle':ctx.color,'textBaseline':'middle'};
                var conf = content.conf;
                var r = conf.range;
                var campusList = contents.campusList;
                var width = contents.offsetWidth;
                var height = contents.offsetHeight;
                var clientWidth,clientHeight,offsetWidth,offsetHeight,scrollLeft,scrollTop;
                
                    for(var name in campusList){
                    var campus = campusList[name];
                    var obj,wid,hei,item,w,h,x,y;
                        switch(name){
                        case 'index' :
                            this.setCtx(campus.context,itx);
                            wid = Math.floor(campus.calc(rowLength + '00')) + conf.space.width;
                            hei = height - r;
                            campus.parent.style.set('width', wid + 'px','height', hei + 'px');
                            campus.width = wid;
                            campus.height = height - r;
                            
                            obj = campus.japonikaList.index;
                            obj.offsetWidth = obj.width = campus.width;
                            obj.offsetHeight = obj.height = campus.height;
                            this.setCtx(campus.context,itx);
                        break;
                        case 'text' :
                        
                            wid = width - campusList.index.width - r;
                            hei = height - r;
                            campus.parent.style.set('width', wid + 'px','height', hei + 'px');
                            
                            campus.width = wid;
                            campus.height = hei;
                            content.clientWidth = wid;
                            content.clientHeight = hei;
                            
                            content.offsetWidth = Math.ceil(maxWidth + r);
                            content.offsetHeight = rowLength * content.lineHeight;
                            
                            obj = campus.japonikaList.text;
                            obj.offsetWidth = obj.width = content.clientWidth;
                            obj.offsetHeight = obj.height = content.clientHeight;
                            this.setCtx(campus.context,ttx);
                            skin[key].style.set('width',(campus.width) + 'px');
                            
                            switch(key){
                            case 'a' :
                            break;
                            case 'b' :
                                //contents.content.scrollLeft = clip.a.content.scrollLeft;
                                //contents.content.scrollTop = clip.a.content.scrollTop;
                            break;
                            }
                        break;
                        case 'rect' :
                            wid = width - campusList.index.width - r;
                            hei = height - r;
                            campus.width = wid;
                            campus.height = hei;
                            obj = campus.japonikaList.rect;
                            obj.offsetWidth = obj.width = wid;
                            obj.offsetHeight = obj.height =  hei;
                        break;
                        case 'horizon' :
                            campus.width = wid = width - r;
                            campus.height = hei = r;
                            obj = campus.japonikaList;
                            for(key in obj){
                                switch(key){
                                case 'horizon' :
                                    obj[key].offsetWidth = obj[key].width = wid;
                                    obj[key].offsetHeight = obj[key].height = hei;
                                break;
                                case 'left' :
                                    obj[key].offsetWidth = obj[key].width = r;
                                    obj[key].offsetHeight = obj[key].height = r;
                                break;
                                case 'center' :
                                    obj[key].offsetWidth = obj[key].width = wid - r * 2;
                                    obj[key].offsetHeight = obj[key].height = r;
                                    obj[key].offsetLeft = r;
                                break;
                                case 'right' :
                                    obj[key].offsetWidth =  obj[key].width = r;
                                    obj[key].offsetHeight = obj[key].height = r;
                                    obj[key].offsetLeft = wid - r;
                                break;
                                case 'range' :
                                var hw,sl,ow,cw,rw,hp,rl,mw;
                                
                                    obj[key].offsetWidth =  wid - r * 2;
                                    obj[key].offsetHeight = r;
                                    obj[key].offsetLeft = r;
                                    obj[key].height = r - 4;
                                    obj[key].top = 2;
                                    
                                    sl = campus.content.scrollLeft;
                                    cw = campus.content.clientWidth;
                                    ow = campus.content.offsetWidth;
                                    hw = obj.center.offsetWidth;
                                    
                                    if(ow - (sl + cw) < 0){
                                        sl = ow - cw;
                                        if(sl < 0){ sl = 0; }
                                        campus.content.scrollLeft = sl;
                                    }
                                    hp = sl / ow;
                                    rw = cw / ow * hw;
                                    rl = hw * hp;
                                    if(hw < 8){
                                        rl = width;
                                    }
                                    else
                                    if(hw < 18 * 2){
                                        mw = rw - 4;
                                        rw = 4;
                                        rl = hp * (hw + mw);
                                    }
                                    else
                                    if(hw < 18 * 3){
                                        mw = rw - 8;
                                        rw = 8;
                                        rl = hp * (hw + mw);
                                    }
                                    else
                                    if(rw < 16){
                                        mw = rw - 16;
                                        rw = 16;
                                        rl = hp * (hw + mw);
                                    }
                                    rl = rl < 0 ? 0 : rl;
                                    rw = rw > hw ? hw : rw;
                                    switch(rw == hw){
                                    case true :
                                        rl = width;
                                    break;
                                    case false :
                                    break;
                                    }
                                    //obj[key].left = rl;
                                    obj[key].width = rw;
                                    campus.setScrollLeft(rl,'resize');
                                break;
                                }
                            }
                        break;
                        case 'vertical' :
                            campus.width = wid = r;
                            campus.height = hei = height - r;
                            obj = campus.japonikaList;
                            for(key in obj){
                                switch(key){
                                case 'vertical' :
                                    obj[key].offsetWidth =  obj[key].width = wid;
                                    obj[key].offsetHeight = obj[key].height = hei;
                                break;
                                case 'top' :
                                    obj[key].offsetWidth =  obj[key].width = r;
                                    obj[key].offsetHeight = obj[key].height = r;
                                break;
                                case 'middle' :
                                    obj[key].offsetWidth =  obj[key].width = r;
                                    obj[key].offsetHeight = obj[key].height = hei - r * 2;
                                    obj[key].offsetTop = r;
                                break;
                                case 'bottom' :
                                    obj[key].offsetWidth =  obj[key].width = r;
                                    obj[key].offsetHeight = obj[key].height = r;
                                    obj[key].offsetTop = height - r * 2;
                                break;
                                case 'range' :
                                var vh,st,oh,ch,rh,vp,rt,mh;
                                
                                    obj[key].offsetWidth =  r;
                                    obj[key].offsetHeight = hei - r * 2;
                                    obj[key].offsetTop = r;
                                    obj[key].width = r - 4;
                                    obj[key].left = 2;
                                    
                                    st = campus.content.scrollTop;
                                    ch = campus.content.clientHeight;
                                    oh = campus.content.offsetHeight;
                                    vh = obj.middle.offsetHeight;
                                    
                                    if(oh - (st + ch) < 0){
                                        st = oh - ch;
                                        if(st < 0){ st = 0; }
                                        campus.content.scrollTop = st;
                                    }
                                    vp = st / (oh);
                                    rh = ch / oh * vh;
                                    rt = vh * vp;
                                    
                                    if(vh < 8){
                                        rt = hei;
                                    }
                                    else
                                    if(vh < 18 * 2){
                                        mh = rh - 4;
                                        rh = 4;
                                        rt = vp * (vh + mh);
                                    }
                                    else
                                    if(vh < 18 * 3){
                                        mh = rh - 8;
                                        rh = 8;
                                        rt = vp * (vh + mh);
                                    }
                                    else
                                    if(rh < 16){
                                        mh = rh - 16;
                                        rh = 16;
                                        rt = vp * (vh + mh);
                                    }
                                    rt = rt < 0 ? 0 : rt;
                                    rh = rh > vh ? vh : rh;
                                    switch(rh == vh){
                                    case true :
                                        rt = hei;
                                    break;
                                    case false :
                                    break;
                                    }
                                    
                                    obj[key].height = rh;
                                    //obj[key].top = rt;
                                    //campus.draw();
                                    campus.setScrollTop(rt,'resize');
                                break;
                                }
                            }
                        break;
                        case 'menu' :
                            campus.width = wid = r;
                            campus.height = hei = r;
                            obj = campus.japonikaList;
                            for(key in obj){
                                switch(key){
                                case 'menu' :
                                    obj[key].offsetWidth =  obj[key].width = wid;
                                    obj[key].offsetHeight = obj[key].height = hei;
                                break;
                                case 'split' :
                                    obj[key].offsetWidth =  obj[key].width = wid;
                                    obj[key].offsetHeight = obj[key].height = hei;
                                break;
                                }
                            }
                        break;
                        }
                    }
                }
            }// item
            this.draw();
        }
    },
    'parse' : {
        'value' :
        function(textarea){
        var style = this.getCss(textarea,'width','height');
        var name = textarea.nodeName.toLowerCase();
        var wid = style.width;
        var hei = style.height;
        var wrapper = this.itemList.wrapper;
            switch(name){
            case 'textarea' :
                this.data = this.createData(textarea.value);
                this.insert(wrapper[0],textarea);
                wrapper.style.set('width',wid,'height',hei);
                this.resize();
            break;
            case 'pre' :
            break;
            }
            return this;
        }
    },
    'createData' : {
        value: function(value){
        var cha = value[value.length-1];
        var contents = this.contentList.contents;
        var test = this.itemList.test;
        var conf = this.conf.data;
        var volume = conf.volume;
        var temp = conf.temp;
        var data = [new Array(volume)];
        var block = data[0];
        var reg = /\r\n|\n|\r|.$/;
        var br = /\r\n|\n|\r/;
        var arr;
        var i,j,k;
        var n = 0;
        var w = 0;
        var h = 0;
            for(;;){
                arr = value.match(reg);
                if(arr === null){ break; }
            var str = value.substring(0, arr.index);
            var wid = test.calc(str);
                w = w < wid ?  wid : w;
                block[n] = str;
                value = value.substring(arr.index + 1, value.length);
                n++;
                if(n >= volume){
                    h = h + block.length;
                    n = 0;
                    block = new Array(volume);
                    data.push(block);
                }
            }
            h = h + block.length - (volume - n);
            data[data.length-1].splice(n);
            if(br.test(cha) === false){
                data[data.length-1][data[data.length-1].length-1] = data[data.length-1][data[data.length-1].length-1] + cha;
            }
            else{
                data[data.length-1].push('');
                h++;
            }
            for(var key in contents){
                contents[key].content.offsetWidth = w;
                contents[key].content.rowLength = h;
            }
            temp.maxWidth = w;
            temp.rowLength = h;
            return data;
        }
    },
    'VALUE' : {
        value: {
            'tag' : '<div class="wrapper" data-custom_ui="textarea" onContextmenu="return false;"><div class="container"></div><div class="contextmenu"><div class="index"><div class="index">Index:</div><div class="type"><input type="checkbox" tabindex="-1"></div></div><div class="bookmark"><div class="picker"><div class="mark-a"><div class="reset-a"></div></div><div class="mark-b"><div class="reset-b"></div></div><div class="mark-c"><div class="reset-c"></div></div></div><div class="search"><div class="index"></div><div class="value"></div></div></div><div class="search"><div class="box"><div class="type"><input type="checkbox" tabindex="-1"></div><div class="target"><input type="text" tabindex="-1"></div></div><div class="box"><div><input type="button" value="prev" tabindex="-1"><input type="button" value="next" tabindex="-1"></div></div></div><div class="output"><div class="type"><input type="checkbox" tabindex="-1"></div><div class="get"><input type="button" tabindex="-1" value="get"></div></div></div><div class="split"><div></div></div><div class="resize"><div></div></div></div>',
            'contents' : '<div class="contents"><div class="indexbox"><canvas class="index"></canvas></div><div class="textbox"><canvas class="text"></canvas><canvas class="rect"></canvas><div class="skin"><span class="cursor"><span class="caret" tabindex="0" contenteditable="true">_target</span></span></div></div><canvas class="horizon"></canvas><canvas class="vertical"></canvas><div class="map"><canvas class="menu"></canvas></div></div>',
            'test' : '<canvas class="test"></canvas>'
        }
    },
    'constructor' : { value: UI.prototype.TextArea },
    'Name' : {value: 'TextArea'}
});



/* ############################## TextArea.Content ############################## */
UI.prototype.TextArea.prototype.Content = function(container){
var textContext = {fillStyle:'white',textBaseline:'middle',font:'14px "Consolas"', textAlign:'right'};
    UI.prototype.Content.call(this);
    this.container = container;
    this.data = null;
    this.selection = {'start':[[0,0,0]],'end':[[0,0,0]],'blink':true,'search':false,'caretWidth':1,'temp':null,'value':null};
    this.conf = {
        range: container.conf.range,
        data : container.conf.data,
        //caret : {fillStyle:'black'},
        //text : {fillStyle:'#888',textBaseline:'middle',font:'14px "Consolas"'},
        //textBg : {fillStyle:'#fff8f7'},
        //index : {fillStyle:'white',textBaseline:'middle',font:'14px "Consolas"', textAlign:'right'},
        //indexBg : {fillStyle:'plum','mark':'.'},
        //rect : {fillStyle:'magenta',globalAlpha:0.1},
        //rectBg : {fillStyle:'transparent'},
        bookmark : {text:[],bg:[]},
        space:{
            width: 4,
            fillStyle:'black'
        },
        index:{
            index:{
                ctx:textContext,
                d:[],
                static:{fillStyle:'white',strokeStyle:'yellow'},
                down:{fillStyle:'white',strokeStyle:'yellow'},
                up:null,
                over:null,
                out:null,
                text:{fillStyle:'blue',strokeStyle:'yellow'},
                bg:{fillStyle:'greenyellow',strokeStyle:'yellow'}
            },
            ba   : {
                d:[],
                static:{fillStyle:'white',strokeStyle:'yellow'},
                down:{fillStyle:'white',strokeStyle:'yellow'},
                up:null,
                over:null,
                out:null,
                text:{fillStyle:'blue',strokeStyle:'yellow'},
                bg:{fillStyle:'red',strokeStyle:'yellow'}
            },
            bb :{
                d:[],
                static:{fillStyle:'white',strokeStyle:'yellow'},
                down:{fillStyle:'white',strokeStyle:'yellow'},
                up:null,
                over:null,
                out:null,
                text:{fillStyle:'blue',strokeStyle:'yellow'},
                bg:{fillStyle:'red',strokeStyle:'yellow'}
            },
            bc  :{
                d:[],
                static:{fillStyle:'white',strokeStyle:'yellow'},
                down:{fillStyle:'white',strokeStyle:'yellow'},
                up:null,
                over:null,
                out:null,
                text:{fillStyle:'blue',strokeStyle:'yellow'},
                bg:{fillStyle:'red',strokeStyle:'yellow'}
            }
        },
        text:{
            ctx:textContext,
            d:[],
                static:{fillStyle:'white',strokeStyle:'yellow'},
            down:{fillStyle:'white',strokeStyle:'yellow'},
            up:null,
            over:null,
            out:null,
            text:{fillStyle:'blue',strokeStyle:'yellow'},
            bg:{fillStyle:'blue',strokeStyle:'yellow'},
            quot   : {
                d:[],
                static:{fillStyle:'white',strokeStyle:'yellow'},
                down:{fillStyle:'white',strokeStyle:'yellow'},
                up:null,
                over:null,
                out:null,
                text:{fillStyle:'blue',strokeStyle:'yellow'},
                bg:{fillStyle:'red',strokeStyle:'yellow'}
            },
            reg :{
                d:[],
                static:{fillStyle:'white',strokeStyle:'yellow'},
                down:{fillStyle:'white',strokeStyle:'yellow'},
                up:null,
                over:null,
                out:null,
                text:{fillStyle:'blue',strokeStyle:'yellow'},
                bg:{fillStyle:'red',strokeStyle:'yellow'}
            },
            ka  :{
                d:[],
                static:{fillStyle:'white',strokeStyle:'yellow'},
                down:{fillStyle:'white',strokeStyle:'yellow'},
                up:null,
                over:null,
                out:null,
                text:{fillStyle:'blue',strokeStyle:'yellow'},
                bg:{fillStyle:'red',strokeStyle:'yellow'}
            },
            kb  :{
                d:[],
                static:{fillStyle:'white',strokeStyle:'yellow'},
                down:{fillStyle:'white',strokeStyle:'yellow'},
                up:null,
                over:null,
                out:null,
                text:{fillStyle:'blue',strokeStyle:'yellow'},
                bg:{fillStyle:'red',strokeStyle:'yellow'}
            },
            kc  :{
                d:[],
                static:{fillStyle:'white',strokeStyle:'yellow'},
                down:{fillStyle:'white',strokeStyle:'yellow'},
                up:null,
                over:null,
                out:null,
                text:{fillStyle:'blue',strokeStyle:'yellow'},
                bg:{fillStyle:'red',strokeStyle:'yellow'}
            }
        },
        rect:{
            rect:{
                d:[],
                static:{fillStyle:'white',strokeStyle:'yellow'},
                down:{fillStyle:'white',strokeStyle:'yellow'},
                up:null,
                over:null,
                out:null,
                text:{fillStyle:'blue',strokeStyle:'yellow'},
                bg:{fillStyle:'#e4ffe4',strokeStyle:'yellow'}
            },
            caret   : {
                d:[],
                static:{fillStyle:'white',strokeStyle:'yellow'},
                down:{fillStyle:'white',strokeStyle:'yellow'},
                up:null,
                over:null,
                out:null,
                text:{fillStyle:'blue',strokeStyle:'yellow'},
                bg:{fillStyle:'red',strokeStyle:'yellow'}
            },
            current :{
                d:[],
                static:{fillStyle:'white',strokeStyle:'yellow'},
                down:{fillStyle:'white',strokeStyle:'yellow'},
                up:null,
                over:null,
                out:null,
                text:{fillStyle:'blue',strokeStyle:'yellow'},
                bg:{fillStyle:'red',strokeStyle:'yellow'}
            },
            select  :{
                d:[],
                static:{fillStyle:'white',strokeStyle:'yellow'},
                down:{fillStyle:'white',strokeStyle:'yellow'},
                up:null,
                over:null,
                out:null,
                text:{fillStyle:'blue',strokeStyle:'yellow'},
                bg:{fillStyle:'red',strokeStyle:'yellow'}
            },
            search  :{
                d:[],
                static:{fillStyle:'white',strokeStyle:'yellow'},
                down:{fillStyle:'white',strokeStyle:'yellow'},
                up:null,
                over:null,
                out:null,
                text:{fillStyle:'blue',strokeStyle:'yellow'},
                bg:{fillStyle:'red',strokeStyle:'yellow'}
            }
        },
        horizon:{
            horizon :{
                r:container.conf.range,
                d:[],
                static:{fillStyle:'white',strokeStyle:'yellow'},
                down:{fillStyle:'white',strokeStyle:'yellow'},
                up:null,
                over:null,
                out:null,
                bg:{fillStyle:'blue',strokeStyle:'yellow'}
            },
            left   : {
                d:[[{type:'polygon',com:'m',x:10,y:5},{com:'l',x:10,y:13},{com:'l',x:6,y:9}]],
                static:{fillStyle:'#bbb',strokeStyle:'yellow'},
                active:{color:'#505050',bg:'#f5f5f5'},
                down:{color:'#fff',bg:'#777'},
                up:{fillStyle:'blue',strokeStyle:'yellow'},
                over:{fillStyle:'blue',strokeStyle:'yellow'},
                out:{fillStyle:'blue',strokeStyle:'yellow'},
                bg:{fillStyle:'#f5f5f5',strokeStyle:'yellow'}
            },
            center :{
                d:[],
                static:{fillStyle:'white',strokeStyle:'yellow'},
                down:{fillStyle:'white',strokeStyle:'yellow'},
                up:null,
                over:null,
                out:null,
                bg:{fillStyle:'white',strokeStyle:'yellow'}
            },
            right  :{
                d:[[{type:'polygon',com:'m',x:8,y:5},{com:'l',x:8,y:13},{com:'l',x:12,y:9}]],
                static:{fillStyle:'#bbb',strokeStyle:'yellow'},
                active:{color:'#505050',bg:'#f5f5f5'},
                down:{color:'#fff',bg:'#777'},
                up:{fillStyle:'blue',strokeStyle:'yellow'},
                over:{fillStyle:'blue',strokeStyle:'yellow'},
                out:{fillStyle:'blue',strokeStyle:'yellow'},
                bg:{fillStyle:'#f5f5f5',strokeStyle:'yellow'}
            },
            range  :{
                d:[],
                static:{fillStyle:'#bbb',strokeStyle:'yellow'},
                down:{color:'#555',bg:'#bbb'},
                up:{fillStyle:'blue',strokeStyle:'yellow'},
                over:{fillStyle:'blue',strokeStyle:'yellow'},
                out:{fillStyle:'blue',strokeStyle:'yellow'},
                bg:{fillStyle:'#f5f5f5',strokeStyle:'yellow'}
            }
        },
        vertical:{
            vertical :{
                r:container.conf.range,
                d:[],
                static:{fillStyle:'white',strokeStyle:'yellow'},
                down:{fillStyle:'white',strokeStyle:'yellow'},
                up:null,
                over:null,
                out:null,
                bg:{fillStyle:'blue',strokeStyle:'yellow'}
            },
            top   : {
                d:[[{type:'polygon',com:'m',x:5,y:10},{com:'l',x:13,y:10},{com:'l',x:9,y:6}]],
                static:{fillStyle:'#bbb',strokeStyle:'yellow'},
                active:{color:'#505050',bg:'#f5f5f5'},
                down:{color:'#fff',bg:'#777'},
                up:{fillStyle:'blue',strokeStyle:'yellow'},
                over:{fillStyle:'blue',strokeStyle:'yellow'},
                out:{fillStyle:'blue',strokeStyle:'yellow'},
                bg:{fillStyle:'#f5f5f5',strokeStyle:'yellow'}
            },
            middle :{
                d:[],
                static:{fillStyle:'white',strokeStyle:'yellow'},
                down:{fillStyle:'white',strokeStyle:'yellow'},
                up:null,
                over:null,
                out:null,
                bg:{fillStyle:'white',strokeStyle:'yellow'}
            },
            bottom  :{
                d:[[{type:'polygon',com:'m',x:5,y:8},{com:'l',x:13,y:8},{com:'l',x:9,y:12}]],
                static:{fillStyle:'#bbb',strokeStyle:'yellow'},
                active:{color:'#505050',bg:'#f5f5f5'},
                down:{color:'#fff',bg:'#777'},
                up:{fillStyle:'blue',strokeStyle:'yellow'},
                over:{fillStyle:'blue',strokeStyle:'yellow'},
                out:{fillStyle:'blue',strokeStyle:'yellow'},
                bg:{fillStyle:'#f5f5f5',strokeStyle:'yellow'}
            },
            range  :{
                d:[],
                static:{fillStyle:'#bbb',strokeStyle:'yellow'},
                down:{color:'#555',bg:'#bbb'},
                up:{fillStyle:'blue',strokeStyle:'yellow'},
                over:{fillStyle:'blue',strokeStyle:'yellow'},
                out:{fillStyle:'blue',strokeStyle:'yellow'},
                bg:{fillStyle:'#f5f5f5',strokeStyle:'yellow'}
            }
        },
        menu:{
            menu : {
                r:container.conf.range,
                d:[[{type:'line',com:'m',x:9,y:17},{com:'l',x:17,y:9}],[{type:'line',com:'m',x:13,y:17},{com:'l',x:17,y:13}]],
                static:{fillStyle:'white',strokeStyle:'#666'},
                down:{fillStyle:'blue',strokeStyle:'#666'},
                up:null,
                over:null,
                out:null,
                bg:{fillStyle:'white',strokeStyle:'yellow'}
            },
            resize   : {
                d:[{com:'m',x:10,y:5},{com:'l',x:10,y:13},{com:'l',x:6,y:9}],
                down:null,
                up:null,
                over:null,
                out:null,
                bg:{fillStyle:'red',strokeStyle:'yellow'}
            },
            split :{
                d:[[{type:'line',com:'m',x:9,y:1},{com:'l',x:1,y:9}],[{type:'line',com:'m',x:5,y:1},{com:'l',x:1,y:5}]],
                static:{fillStyle:'white',strokeStyle:'green'},
                down:{fillStyle:'white',strokeStyle:'green'},
                up:null,
                over:null,
                out:null,
                bg:{fillStyle:'white',strokeStyle:'yellow'}
            }
        }
    };
};

UI.prototype.TextArea.prototype.Content.prototype = Object.create(UI.prototype.Content.prototype,{
    'setScrollLeft' : {
        value: function(n){
        var clientWidth = this.clientWidth;
        var offsetWidth = this.offsetWidth;
        var width = offsetWidth - clientWidth;
            if(n <= 0){
                n = 0;
            }
            else
            if(n >= width){
                n = width;
            }
            else{}
            if(Math.abs(this.scrollLeft - n) > 0){}
            this.scrollLeft = n;
            this.draw();
        }
    },
    'setScrollTop' : {
        value: function(n){
        var clientHeight = this.clientHeight;
        var offsetHeight = this.offsetHeight;
        var height = offsetHeight - clientHeight;
            if(n <= 0){
                n = 0;
            }
            else
            if(n >= height){
                n = height;
            }
            else{}
            if(Math.abs(this.scrollTop - n) > 0){}
            this.scrollTop = n;
            this.draw();
        }
    },
    'draw' : {
        value: function(){
        var data = this.data;
        var d = this.getData();
        var m = d.m;
        var n = d.n;
        var s = d.s;
        var margin = d.margin;
        var space = this.conf.space;
        var lineHeight = d.lineHeight;
        var left = this.scrollLeft * -1;
        var h = lineHeight / 2;
        var view = d.view;
        var campusList = this.campusList;
        var index = campusList.index;
        var text = campusList.text;
        var rect = campusList.rect;
        var atx = index.context;
        var btx = text.context;
        var ctx = rect.context;
        var i,j,k,l;
            atx.clearRect(0,0,index.width,index.height);
            btx.clearRect(0,0,text.width,text.height);
            for(i = 0; i <= view; i = i + 1,n = n + 1, s = s + 1){
                if(data[m][n] === undefined){
                    m = m + 1;
                    if(data[m] === undefined){
                        m = m -1;
                        break;
                    }
                    n = 0;
                }
                if(data[m][n] === undefined){ break; }
                    str = data[m][n];
                    atx.fillText(s, index.offsetWidth-space.width-2, i * lineHeight - margin + h);
                    btx.fillText(str, left, i * lineHeight - margin + h);
            }
            atx.fillRect(index.width - space.width,0,space.width,index.height);
        }
    },
    'getData' : {
        value:
            function(){
            var data = this.data;
            var selection = this.selection;
            var start = selection.start[0];
            var end = selection.end[0];
            var clientWidth = this.clientWidth;
            var clientHeight = this.clientHeight;
            var lineHeight = this.lineHeight;
            var scrollTop = this.scrollTop;
            
            var margin = scrollTop%lineHeight;
            var rows = Math.ceil((clientHeight) / lineHeight);
            var s = Math.floor(scrollTop/lineHeight);
            var f = false;
            var a = 0;
            var z = 0;
            var m = 0;
            var n = 0;
            var i,j,k;
                for(i = 0; i < data.length; i = i + 1){
                    a = z;
                    z = z + data[i].length;
                    if(s < z && f === false){
                        m = i;
                        n = s - a;
                        f = true;
                    }
                }
                return {'m':m,'n':n,'view':rows,'rowLength':z,'s':s,'margin':margin,'lineHeight':lineHeight};
            }
    },
    'calc' : {
        value : function(str) {
            return this.calcContext.measureText(str).width;
        }
    },
    'getCursor' : {
        value:
            function(){
                return this.container.cursorList.cursor[this.label][0];
            }
    },
    'data' : {
        get : function() {
            return this.container.data;
        }
    },
    'cursor' : {
        get : function() {
            return this.container.cursorList.cursor[this.label];
        }
    },
    'lineHeight' : {
        get : function() {
            return this.cursor.offsetHeight;
        }
    },
    'constructor' : { value: UI.prototype.TextArea.prototype.TextArea_Content },
    'Name' : {value: 'TextArea_Content'}
});



/* ############################## TextArea.Cursor ############################## */
UI.prototype.TextArea.prototype.Cursor = function(element){
    UI.prototype.Node.call(this,element);
    this.caret = new ui.Node(element.firstElementChild);
};

UI.prototype.TextArea.prototype.Cursor.prototype = Object.create(UI.prototype.Node.prototype,{
    'appendNode' : { value: null},
    'constructor' : { value: UI.prototype.TextArea.prototype.Cursor },
    'Name' : {value: 'TextArea_Cursor'}
});



var ui = new UI();
return function(prop){
     return new ui[ui.upper(prop)]();
    };
})();

            
          
!
999px
Loading ..................

Console