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;min-height:150px;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;
    flex-grow: 0;
    align-items: stretch;
}
div.wrapper[data-custom_ui] > div.container > div.contents:nth-of-type(2) {
    background-color: black;
    border: none;
    border-left: solid 1px #aaa;
}
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: calc(100% - 18px);
    overflow: hidden;
    position: relative;
    background-color: magenta;
    /*
    flex-grow:0;
    align-items:stretch;
    */
}
div.wrapper[data-custom_ui] > div.container > div.contents > div.indexbox.em2 {
    width: 2rem;
}
div.wrapper[data-custom_ui] > div.container > div.contents > div.indexbox.em3 {
    width: 2.5rem !important;
}
div.wrapper[data-custom_ui] > div.container > div.contents > div.indexbox.em4 {
    width: 3rem !important;
}
div.wrapper[data-custom_ui] > div.container > div.contents > div.indexbox.em5 {
    width: 3.5rem;
}
div.wrapper[data-custom_ui] > div.container > div.contents > div.indexbox.em6 {
    width: 4rem;
}
div.wrapper[data-custom_ui] > div.container > div.contents > div.indexbox.em7 {
    width: 4.5rem;
}
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: calc(100% + 36px);
    overflow-x: scroll;
    overflow-y: hidden;
    position: relative;
    background-color: magenta;
    margin: 0px 0px 0px 4px;
    flex-grow: 0;
    /*align-items:stretch;*/
}
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: 100%;
    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]);
var container = textarea.nodeList.container[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);
            };
        }
    },
    'getXY999' : {
        value:
        function(evt){
        var self = evt.target;
        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};
        }
    },
    'getXY' : {
        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;
        }
    },
    '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.sector = null;
    this.defineProperty(this,'sector');
    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,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.nodeList = 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);
    this.addCampus(100,100);
    //this.contentList.contents.a.content.scrollTop = 234;
    this.contentList.contents.b.content.scrollTop = 345;
};



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);
                        this[item].sector = this;
                    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,{
    'EVENTS' : {
        'value' : {
            'Down' : function(){},
            'Up' : function(){}
        }
    },
    '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 key = obj[0].classList;
            this.push(obj[0]);
            if(key.length > 0){
                this[key.item(0)] = obj;
            }
        }
    },
    '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 x = o.offsetLeft + o.left;
        var y = o.offsetTop + o.top;
        var w = o.width;
        var h = o.height;
        var c = this.css;
        var d = c.d;
            switch(d.length){
            case 0 :
                ctx.fillStyle = c.bg.fillStyle;
                ctx.fillRect(x,y,w,h);
            break;
            default :
            var 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.down.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.down.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){
                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];
                }
            }
            this.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('HorizonDown');
            },
            'HorizonDrag' : function(evt, textarea,campus){
                //console.log('HorizonDrag');
            },
            'HorizonDown' : function(evt, textarea,campus){
                //console.log('HorizonDown');
            },
            'VerticalUp' : function(evt, textarea,campus){
                //console.log('VerticalDown');
            },
            'VerticalDrag' : function(evt, textarea,campus){
                //console.log('VerticalDrag');
            },
            'VerticalDown' : function(evt, textarea,campus){
                //console.log('VerticalDown');
            },
            'MenuUp' : function(evt, textarea,campus){
                //console.log('MenuUp');
            var nodeList = textarea.nodeList;
            var wrapper = nodeList.wrapper;
            var container = nodeList.container;
            var contents = nodeList.contents;
            var offsetWidth = container.offsetWidth;
            var offsetHeight = container.offsetHeight;
            var r = textarea.conf.range;
            var range = r*3;
            var split = textarea.nodeList.split;
            var resize = textarea.nodeList.resize;
            var event = campus.event;
            var left = split.offsetLeft;
            var top = split.offsetTop;
            var id = '';
            var n = 0;
                switch(event.target){
                case 'horizon' :
                    if(top > range && top < offsetHeight - range){
                        switch(contents.length){
                        case 1 :
                            contents.a.style.set('width',100 + '%','height',Math.round(top/offsetHeight*100) + '%');
                            textarea.addCampus(100,Math.round((offsetHeight - top)/offsetHeight*100));
                        break;
                        default :
                            contents.a.style.set('width',100 + '%','height',Math.round(top/offsetHeight*100) + '%');
                            contents.b.style.set('width',100 + '%','height',Math.round((offsetHeight - top)/offsetHeight*100) +'%');
                        }
                        container.classList.add('column');
                        textarea.resize();
                    }
                    else{
                        switch(contents.length){
                        case 1 :
                        break;
                        default :
                            id = campus.content.id;
                            n = -1;
                            switch(campus.content.id){
                            case 'a' :
                                if(top < r){
                                    n = 0;
                                }
                                else
                                if(top > offsetHeight - r){
                                    n = 1;
                                }
                            break;
                            case 'b' :
                                if(top < r){
                                    n = 0;
                                }
                                else
                                if(top > offsetHeight - r){
                                    n = 1;
                                }
                            break;
                            }
                            switch(n){
                            case -1:
                            break;
                            default :
                                contents.a.style.set('width',100 + '%','height',100 + '%');
                                contents.b.style.set('width',100 + '%','height',100 + '%');
                                textarea.delCampus(n);
                            }
                        }
                    }
                break;
                case 'vertical' :
                    if(left > range && left < offsetWidth - range){
                        switch(contents.length){
                        case 1 :
                            contents.a.style.set('width',Math.round(left/offsetWidth*100) +'%','height',100 + '%');
                            textarea.addCampus(Math.round((offsetWidth - left)/offsetWidth*100),100);
                        break;
                        default :
                            contents.a.style.set('width',Math.round(left/offsetWidth*100) +'%','height',100 + '%');
                            contents.b.style.set('width',Math.round((offsetWidth - left)/offsetWidth*100) +'%','height',100 + '%');
                        }
                        container.classList.remove('column');
                        textarea.resize();
                    }
                    else{
                        switch(contents.length){
                        case 1 :
                        break;
                        default :
                            id = campus.content.id;
                            n = -1;
                            switch(campus.content.id){
                            case 'a' :
                                if(left < r){
                                    n = 0;
                                }
                                else
                                if(left > offsetWidth - r){
                                    n = 1;
                                }
                            break;
                            case 'b' :
                                if(left < r){
                                    n = 0;
                                }
                                else
                                if(left > offsetWidth - r){
                                    n = 1;
                                }
                            break;
                            }
                            switch(n){
                            case -1:
                            break;
                            default :
                                contents.a.style.set('width',100 + '%','height',100 + '%');
                                contents.b.style.set('width',100 + '%','height',100 + '%');
                                textarea.delCampus(n);
                            }
                        }
                    }
                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){
                        wrapper.style.set('width',(width) +'px','height',(height) + 'px');
                        textarea.resize();
                    }
                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],false);
                document.removeEventListener('mouseup',event.up[0],false);
            },
            'MenuDrag' : function(evt, textarea,campus){
            var z = textarea.getXY(evt,campus[0]);
            var r = textarea.conf.range;
            var range = r*3;
            var nodeList = textarea.nodeList;
            var split = nodeList.split;
            var resize = nodeList.resize;
            var wrapper = nodeList.wrapper;
            var container = nodeList.container;
            var content = nodeList.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 = 'vertical';
                            split.classList.add('column');
                        }
                        if(z.y < 0 || z.y > campus.offsetHeight){
                            event.target = 'horizon';
                            split.classList.remove('column');
                        }
                    break;
                    case 'horizon':
                        z = textarea.getXY(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;
                    case 'vertical' :
                        z = textarea.getXY(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;
                    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 nodeList = textarea.nodeList;
            var wrapper = nodeList.wrapper;
            var parent = campus.parentNode.parentNode;
            var z = textarea.getXY(evt,campus[0]);
            var event = campus.event;
            var resize = nodeList.resize;
            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);
            }
        }
    },
    'addCampus' : {
        'value' :
        function(width,height){
        var nodeList = this.nodeList;
        var contentList = this.contentList;
        var container = this.nodeList.container;
        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);
            content.campusList = new ui.CampusList();
            contents = new ui.Node(contents);
            contents.content = content;
            
            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));
            }
            
            nodeList.clip(contents);
            nodeList.clip(new ui.Node(skin));
            contentList.clip(contents);
            cursorList.clip(new this.Cursor(cursor));
            content.campusList.clip(campusList.index,campusList.text,campusList.rect);
            content.calcContext = campusList.text.context;
            content.rowLength = 0;
            
            conf = contents.content.conf;
            list = campusList;
            
            cursor.firstElementChild.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);
                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);
                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){
            this.contentList.contents.removeItem(n);
            this.nodeList.contents.removeItem(n);
            this.nodeList.skin.removeItem(n);
            this.cursorList.cursor.removeItem(n);
            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;
                    horizon.draw();
                    vertical.draw();
                    menu.japonikaList.menu.draw();
                    contents.content.draw();
                    //rect.draw();
                    //index.draw();
                }
            }
        }
    },
    'resize' : {
        'value' :
        function(){
        var temp = this.conf.data.temp;
        var maxWidth = temp.maxWidth;
        var rowLength = temp.rowLength;
        var contentList = this.contentList;
        var skin = this.nodeList.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;
                    for(var name in campusList){
                    var campus = campusList[name];
                    var parentNode = campus.parentNode;
                    var rect = campus.getRect(parentNode);
                    var obj,wid,hei;
                        switch(name){
                        case 'index' :
                        var css = parentNode.classList;
                        var em = 'em'+(rowLength + '').length;
                            if(css.length > 1){
                                for(i = 1; i < css.length; i = i + 1){
                                    css.remove(css[i]);
                                }
                            }
                            css.add(em);
                            
                            campus.width = Math.ceil(rect.width);
                            //campus.height = Math.ceil(rect.height);
                            //campus.width = parentNode.offsetWidth;
                            campus.height = parentNode.offsetHeight;
                            
                            obj = campus.japonikaList.index;
                            obj.offsetWidth = obj.width = campus.width;
                            obj.offsetHeight = obj.height = campus.height;
                            this.setCtx(campus.context,itx);
                        break;
                        case 'text' :
                            content.clientWidth = campus.width = Math.ceil(rect.width) - r;
                            //content.clientWidth = campus.width = parentNode.offsetWidth - r;
                            content.clientHeight = campus.height = height - r;
                            
                            content.offsetWidth = Math.ceil(maxWidth + r);
                            content.offsetHeight = rowLength * content.lineHeight;
                            
                            obj = campus.japonikaList.text;
                            obj.offsetWidth = obj.width = campus.width;
                            obj.offsetHeight = obj.height = campus.height;
                            this.setCtx(campus.context,ttx);
                            skin[key].style.set('width',obj.offsetWidth + 'px');
                            
                            switch(key){
                            case 'a' :
                            break;
                            case 'b' :
                                //content.scrollLeft = scrollLeft;
                                //content.scrollTop = scrollTop;
                            break;
                            }
                        break;
                        case 'rect' :
                            campus.width = Math.ceil(rect.width) - r;
                            //campus.width = parentNode.offsetWidth - r;
                            campus.height = height - r;
                            obj = campus.japonikaList.rect;
                            obj.offsetWidth = obj.width = campus.width;
                            obj.offsetHeight = obj.height = campus.height;
                        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' :
                                    obj[key].offsetWidth =  wid - r * 2;
                                    obj[key].offsetHeight = r;
                                    obj[key].width = 40;
                                    obj[key].height = r - 4;
                                    obj[key].top = 2;
                                    obj[key].offsetLeft = r * 2;
                                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' :
                                    obj[key].offsetWidth =  r;
                                    obj[key].offsetHeight = hei - r * 2;
                                    obj[key].width = r - 4;
                                    obj[key].height = 40;
                                    obj[key].left = 2;
                                    obj[key].offsetTop = r * 2;
                                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;
                        }
                    }
                    //console.log(content.scrollLeft);
                    //console.log(content.scrollTop);
                    scrollLeft = content.scrollLeft;
                    scrollTop = content.scrollTop;
                }
            }// 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.nodeList.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.nodeList.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:[]},
        index:{
            index:{
                ctx:textContext,
                d:[],
                down:null,
                up:null,
                over:null,
                out:null,
                text:{fillStyle:'blue',strokeStyle:'yellow'},
                bg:{fillStyle:'greenyellow',strokeStyle:'yellow'}
            },
            ba   : {
                d:[],
                down:null,
                up:null,
                over:null,
                out:null,
                text:{fillStyle:'blue',strokeStyle:'yellow'},
                bg:{fillStyle:'red',strokeStyle:'yellow'}
            },
            bb :{
                d:[],
                down:null,
                up:null,
                over:null,
                out:null,
                text:{fillStyle:'blue',strokeStyle:'yellow'},
                bg:{fillStyle:'red',strokeStyle:'yellow'}
            },
            bc  :{
                d:[],
                down:null,
                up:null,
                over:null,
                out:null,
                text:{fillStyle:'blue',strokeStyle:'yellow'},
                bg:{fillStyle:'red',strokeStyle:'yellow'}
            }
        },
        text:{
            ctx:textContext,
            d:[],
            down:null,
            up:null,
            over:null,
            out:null,
            text:{fillStyle:'blue',strokeStyle:'yellow'},
            bg:{fillStyle:'blue',strokeStyle:'yellow'},
            quot   : {
                d:[],
                down:null,
                up:null,
                over:null,
                out:null,
                text:{fillStyle:'blue',strokeStyle:'yellow'},
                bg:{fillStyle:'red',strokeStyle:'yellow'}
            },
            reg :{
                d:[],
                down:null,
                up:null,
                over:null,
                out:null,
                text:{fillStyle:'blue',strokeStyle:'yellow'},
                bg:{fillStyle:'red',strokeStyle:'yellow'}
            },
            ka  :{
                d:[],
                down:null,
                up:null,
                over:null,
                out:null,
                text:{fillStyle:'blue',strokeStyle:'yellow'},
                bg:{fillStyle:'red',strokeStyle:'yellow'}
            },
            kb  :{
                d:[],
                down:null,
                up:null,
                over:null,
                out:null,
                text:{fillStyle:'blue',strokeStyle:'yellow'},
                bg:{fillStyle:'red',strokeStyle:'yellow'}
            },
            kc  :{
                d:[],
                down:null,
                up:null,
                over:null,
                out:null,
                text:{fillStyle:'blue',strokeStyle:'yellow'},
                bg:{fillStyle:'red',strokeStyle:'yellow'}
            }
        },
        rect:{
            rect:{
                d:[],
                down:null,
                up:null,
                over:null,
                out:null,
                text:{fillStyle:'blue',strokeStyle:'yellow'},
                bg:{fillStyle:'#e4ffe4',strokeStyle:'yellow'}
            },
            caret   : {
                d:[],
                down:null,
                up:null,
                over:null,
                out:null,
                text:{fillStyle:'blue',strokeStyle:'yellow'},
                bg:{fillStyle:'red',strokeStyle:'yellow'}
            },
            current :{
                d:[],
                down:null,
                up:null,
                over:null,
                out:null,
                text:{fillStyle:'blue',strokeStyle:'yellow'},
                bg:{fillStyle:'red',strokeStyle:'yellow'}
            },
            select  :{
                d:[],
                down:null,
                up:null,
                over:null,
                out:null,
                text:{fillStyle:'blue',strokeStyle:'yellow'},
                bg:{fillStyle:'red',strokeStyle:'yellow'}
            },
            search  :{
                d:[],
                down:null,
                up:null,
                over:null,
                out:null,
                text:{fillStyle:'blue',strokeStyle:'yellow'},
                bg:{fillStyle:'red',strokeStyle:'yellow'}
            }
        },
        horizon:{
            horizon :{
                r:container.conf.range,
                d:[],
                down:null,
                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}]],
                down:{fillStyle:'dimgray',strokeStyle:'yellow'},
                up:{fillStyle:'blue',strokeStyle:'yellow'},
                over:{fillStyle:'blue',strokeStyle:'yellow'},
                out:{fillStyle:'blue',strokeStyle:'yellow'},
                bg:{fillStyle:'lightgrey',strokeStyle:'yellow'}
            },
            center :{
                d:[],
                down:null,
                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}]],
                down:{fillStyle:'dimgray',strokeStyle:'yellow'},
                up:{fillStyle:'blue',strokeStyle:'yellow'},
                over:{fillStyle:'blue',strokeStyle:'yellow'},
                out:{fillStyle:'blue',strokeStyle:'yellow'},
                bg:{fillStyle:'lightgrey',strokeStyle:'yellow'}
            },
            range  :{
                d:[],
                down:{fillStyle:'blue',strokeStyle:'yellow'},
                up:{fillStyle:'blue',strokeStyle:'yellow'},
                over:{fillStyle:'blue',strokeStyle:'yellow'},
                out:{fillStyle:'blue',strokeStyle:'yellow'},
                bg:{fillStyle:'dimgray',strokeStyle:'yellow'}
            }
        },
        vertical:{
            vertical :{
                r:container.conf.range,
                d:[],
                down:null,
                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}]],
                down:{fillStyle:'dimgray',strokeStyle:'yellow'},
                up:{fillStyle:'blue',strokeStyle:'yellow'},
                over:{fillStyle:'blue',strokeStyle:'yellow'},
                out:{fillStyle:'blue',strokeStyle:'yellow'},
                bg:{fillStyle:'lightgrey',strokeStyle:'yellow'}
            },
            middle :{
                d:[],
                down:null,
                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}]],
                down:{fillStyle:'dimgray',strokeStyle:'yellow'},
                up:{fillStyle:'blue',strokeStyle:'yellow'},
                over:{fillStyle:'blue',strokeStyle:'yellow'},
                out:{fillStyle:'blue',strokeStyle:'yellow'},
                bg:{fillStyle:'lightgrey',strokeStyle:'yellow'}
            },
            range  :{
                d:[],
                down:{fillStyle:'blue',strokeStyle:'yellow'},
                up:{fillStyle:'blue',strokeStyle:'yellow'},
                over:{fillStyle:'blue',strokeStyle:'yellow'},
                out:{fillStyle:'blue',strokeStyle:'yellow'},
                bg:{fillStyle:'dimgray',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}]],
                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}]],
                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,{
    '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 lineHeight = d.lineHeight;
        var left = 0;
        var h = lineHeight / 2;
        var view = d.view;
        var campusList = this.campusList;
        var index = campusList.index.a;
        var text = campusList.text.a;
        var rect = campusList.rect.a;
        var atx = index.context;
        var btx = text.context;
        var ctx = rect.context;
        var i,j,k,l;
            atx.clearRect(0,0,index.width,index.highlight);
            btx.clearRect(0,0,text.width,text.highlight);
            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-2, i * lineHeight - margin + h);
                    btx.fillText(str, left, i * lineHeight - margin + h);
            }
        }
    },
    '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.id][0];
            }
    },
    'data' : {
        get : function() {
            return this.container.data;
        }
    },
    'cursor' : {
        get : function() {
            return this.container.cursorList.cursor[this.id];
        }
    },
    '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