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:block;width:500px;height:250px;white-space:nowrap;resize:vertical;min-height:150px;box-sizing:border-box;display:none;" 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という名前に変更された[4][5]。
                最初のJavaScriptエンジン(英語版)はブレンダン・アイクによりNetscape Navigatorのために作成されたものであった。
                このエンジンはSpiderMonkeyと呼ばれており、C言語で実装されていた。
                また、全てJavaで記述されたJavaScriptエンジンであるRhinoも同じくNetscapeのNorris Boyd(後にGoogleに移籍)らにより作成された。
                1996年にマイクロソフトのInternet Explorer 3.0に搭載されるようになると、その手軽さからJavaScriptは急速に普及していく。
                1997年、通信に関する標準を策定する国際団体EcmaインターナショナルによってJavaScriptの中核的な仕様がECMAScriptとして標準化され[6]、多くのウェブブラウザで利用できるようになった。
                ネットスケープは、ウェブアプリケーション開発言語として自社のサーバ製品に実装したLiveWire JavaScriptも発表したが[5]、こちらはあまり普及しなかった。
                JavaScriptの登場初期は、ブラウザベンダー間で言語仕様の独自拡張が行われていたため、ブラウザ間の互換性が極めて低かった。ECMAScriptの策定以降は実装間の互換性は向上し、DOMなど関連仕様の実装に関する互換性も高くなっていった。
            </blockquote>
            <blockquote>
                プログラミング言語としての特徴
                JavaScriptはプロトタイプベースのオブジェクト指向プログラミング言語で、それに分類される言語同様、静的にクラスを定義すること無くオブジェクトを利用する[3]。
                多くの場合はC言語に似た手続き型言語のようなスタイルで書かれるが[要出典]、第一級関数をサポートしており関数を第一級オブジェクトとして扱えるなど、関数型言語の性質も持ち合わせている。そのような柔軟な設計から、いくつかのアプリケーションではマクロ言語としても採用されている。
                例えばAdobe Acrobatは、JavaScriptによるマクロ機能を搭載している。
                成立の経緯(#歴史を参照)から、当初は処理系の間の互換性に難があり、Prototype JavaScript Frameworkなどのライブラリがそれらの違いを吸収することで解決が図られた。
                AptanaやEclipse、NetBeans、IntelliJ IDEAなどの統合開発環境はJavaScriptをサポートしており、大規模開発が可能になっている。
                さらにExt JSなどの本格的なGUIライブラリの登場により、デスクトップアプリケーションと遜色ないユーザインタフェースの構築が可能になった。
                eeeeeeeeeeeeeeeeeeeeeeeeeeJavaScriptプログラムのための各種のAPIがW3CやWHATWGにより策定されており、クライアント・サーバ間の通信のためのXMLHttpRequestやWebSocket、マルチスレッド実行のためのWeb Worker(英語版)などが利用可能となっている。
            </blockquote>
        </div>
    </body>
</html></textarea>
</div>
            
          
!
            
              
/* ------------------------------ textarea ------------------------------ */
div.container[data-custom_UI],
div.container[data-custom_UI] *{
    font-size:14px;
    line-height:20px;
    font-family:Consolas;
    box-sizing:border-box;
}


div.container[data-custom_UI]{
    width:500px;
    height:150px;
    position:relative;
    overflow:hidden;
    background-color:green;
    border:1px solid #aaa;
}
div.container[data-custom_UI] > div.content{
    width:100%;
    height:100%;
    overflow:hidden;
    position:absolute;
    z-index:0;
    top:0;
    left:0;
    display:flex;
    flex-wrap: nowrap;
    align-items: stretch;
    background-color:#ecffec;
}
div.container[data-custom_UI] > div.content > div.index{
    background-color:forestgreen;
    flex-grow:0;
    margin:0px 5px 0px 0px;
}
div.index.em2{
    width:2rem;
}
div.index.em3{
    width:2.5rem;
}
div.index.em4{
    width:3rem;
}
div.index.em5{
    width:3.5rem;
}
div.index.em6{
    width:4rem;
}
div.index.em7{
    width:4.5rem;
}
div.container[data-custom_UI] > div.content > div.textarea{
    background-color:#ecffec;
    flex-grow:1;
    position:relative;
}
div.container[data-custom_UI] > div.content > div > canvas{
    display:block;
    background-color:#ecffec;
}
div.container[data-custom_UI] > div.content > div > canvas.index{
    display:block;
    background-color:forestgreen;
}
div.container[data-custom_UI] > div.content > div > canvas.rect{
    position:absolute;
    background-color:transparent;
    left:0;
    top:0;
    z-index:0;
    /*border-left:1px solid black;*/
}

div.container[data-custom_UI] div.skin{
    width:calc(100%);
    height:calc(100% + 36px);
    position:absolute;
    top:0px;
    left:0px;
    overflow-x:scroll;
    overflow-y:visible;
    white-space:nowrap;
    background-color:rgba(0,0,0,0);
    user-select:none;
    -moz-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    z-index:0;
}
div.container[data-custom_UI] div.skin.scroll{
    width:calc(100% - 18px);
}
div.container[data-custom_UI] div.skin > span.cursor{
    position:absolute;
    display:inline-block;
    width:auto;
    min-width:1px;
    overflow:visible;
    outline:none;
    white-space:nowrap;
    top:0px;
    left:50px;
    background-color:white;
}
div.container[data-custom_UI] span.cursor > span.caret{
    user-select:auto;
    -moz-user-select:auto;
    -webkit-user-select:auto;
    -ms-user-select:auto;
    outline:none;
}
/*
div.container[data-custom_UI] > div.skin > span.cursor > span.caret999:before{
    content: '';
    display:block;
    width:8px;
    height:1px;
    background-color:rgba(0,0,0,0.4);
}
*/

/* ------------------------------ bar ------------------------------ */


div.container[data-custom_UI] > canvas.horizon,
div.container[data-custom_UI] > canvas.vartical{
    position:absolute;
    z-index:10;
    background-color:black;
}
div.container[data-custom_UI] > canvas.vartical{
    right:0;
}
div.container[data-custom_UI] > div.map{
    content:'';
    width:18px;
    height:18px;
    position:absolute;
    right:0;
    bottom:0;
    z-index:5;
    background-color:white;
    display:none;
}
div.container[data-custom_UI] > div.map.show{
    display:block;
}
div.container[data-custom_UI] > canvas.horizon{
    bottom:0;
}

div.container[data-custom_UI],
div.container[data-custom_UI] *,
div.container.test[data-custom_UI],
div.container.test[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;
}

            
          
!
            
              (function(win,doc){
win.addEventListener("load",function(){

var optgroup, option, tag, ctx, col, n;
//var val = document.getElementsByTagName('textarea')[0].value;
var val = document.getElementsByTagName('html')[0].outerHTML;
var str = val;
    for(var i = 0; i < 1; i = i + 1){
        val = val + val;
    }
    sample_a.value = val;
    console.log('行数  : ',val.split(/\n/).length);
    console.log('文字数 : ',val.length);
var text = $('textarea').parse(sample_a).css({'display':'block','height':'300px'});
    console.log([text,text.scrollbar]);
    
}, false);//onload
})(window,document);

var $ = (function(){
/* =========================  CONSTRUCTOR ========================= */
/* ############################## UI ############################## */
function UI() {}

/* ############################## Select ############################## */
function Select(){}

/* ############################## TextArea ############################## */
function TextArea(){
var self = this;
var list = this.node(this.VALUE.text);
var div = this.query(list[0],'div');
var spa = this.query(list[0],'span');
var can = this.query(list[0],'canvas');
var observer = new MutationObserver(this.getEvent(this.EVENTS.Handle, self));
var temp, content, style, option, event;
    this.container = list[0];
    this.conf = {
        caret : {childList: true,characterData:true,subtree:true},
        text : {fillStyle:'#555',textBaseline:'middle',font:'14px "Consolas"'},
        index : {fillStyle:'white',textBaseline:'middle',font:'14px "Consolas"', textAlign:'right'},
        css : {lineHeight:20,font:null}
    };
    this.observe = observer;
    style = new this.Style(this);
    content = {'object':this,'container':this.container,'evt':null,'scrollLeft' :0,'scrollTop':0,'clientWidth':0,'clientHeight':0,'offsetWidth':0,'offsetHeight':0,'lineHeight':20,'length':0,'indexWidth':0,'varticalWidth':0,'horizonHeight':0,'viewLength':0,'offsetItem':null,'style':style};

    this.content = content;
    this.scrollbar = new this.ScrollBar(this);
    this.scrollbar.entry(this.container, this.content);
    
    //observer.observe(this.caret, conf.caret);
    //observer.disconnect();
    
    this.push(list[0]);
    this.values = [[]];
    this.columnList = new this.NodeList(div);
    this.canvasList = new this.NodeList(can);
    this.contextList = new this.ContextList(can);
    temp = this.columnList.textarea;
    temp = temp.removeChild(temp.lastElementChild);
    this.ctx(this.contextList.test,this.conf.text);
    this.selection = {'start':[],'end':[],'blink':true,'caretWidth':1};
    
    option = {
        event:{
            'down' : [],
            'drag' : [],
            'up' : []
        },
        value:{},
        temp :null
    };
    
    option.event.drag[0] = this.getEvent(this.EVENTS.TextAreaDrag, this);
    option.event.drag[1] = this.getEvent(this.EVENTS.RectDrag, this);
    option.event.up[0] = this.getEvent(this.EVENTS.TextAreaUp, this);
    option.event.up[1] = this.getEvent(this.EVENTS.RectUp, this);
    
    this.option = option;
    
    this.columnList.skin.addEventListener('mousedown', this.getEvent(this.EVENTS.TextAreaDown, this), false);
    //document.addEventListener('mousemove', this.getEvent(this.EVENTS.Move, this), false);
}

/* ############################## ScrollBar ############################## */
function ScrollBar(prop){
var option = {
    event:{
        'down' : [],
        'drag' : [],
        'up' : []
    },
    value:{},
    temp :null
};
    option.event.down[0] = this.getEvent(this.EVENTS.BarDown, this);
    option.event.drag[0] = this.getEvent(this.EVENTS.BarDrag, this);
    option.event.up[0] = this.getEvent(this.EVENTS.BarUp, this);
    option.event.down[1] = this.getEvent(this.EVENTS.ContainerDown, this);
    option.event.drag[1] = this.getEvent(this.EVENTS.ContainerDrag, this);
    option.event.up[1] = this.getEvent(this.EVENTS.ContainerUp, this);
    this.option = option;
    this.childNodes = new this.NodeList(this);
    this.horizon = {'dx':0,'ux':0,'mx': 0,'x':0,'left':18,'length':0,'range':0,'step':100,'r': 18,'deltaX':0,'type':'mouseup','scrollLeft':0};
    this.vartical = {'dy':0,'uy':0 ,'my': 0,'y':0,'top':18,'length':0,'range':0,'step':100,'r': 18,'deltaY':0,'type':'mouseup','scrollTop':0};
    this.ctxList = {
        'angle':{'fillStyle' : '#f1f1f1'},
        'arrow':{
            'down':{'fillStyle' : '#fff' },
            'up':{'fillStyle' : '#505050'},
            'disabled':{'fillStyle' : '#a3a3a3'}
        },
        'rect':{
            'over':{'fillStyle' : '#000'},
            'down':{'fillStyle' : '#777'},
            'disabled':{'fillStyle' : '#c1c1c1'}
        }
    };
    this.content = {};
}

UI.prototype.TextArea = TextArea;
UI.prototype.Select = Select;
UI.prototype.ScrollBar = ScrollBar;

/* ############################## NodeList ############################## */
UI.prototype.NodeList = function(list){
    for(var i = 0; i < list.length; i = i + 1){
    var key = list[i].classList;
        this.push(list[i]);
        if(key.length > 0){
            this[key.item(0)] = list[i];
        }
    }
    this.defineProperty(this,'length');
};

/* ############################## ContextList ############################## */
UI.prototype.ContextList = function(list){
    for(var i = 0; i < list.length; i = i + 1){
    var key = list[i].classList;
    var ctx = list[i].getContext('2d');
        this.push(ctx);
        if(key.length > 0){
            this[key.item(0)] = ctx;
        }
    }
    this.defineProperty(this,'length');
};

/* ############################## Style ############################## */
UI.prototype.Style = function(symbol){
    this[symbol.Type] = symbol;
    this._left = 0;
    this._top = 0;
};
/* =============================== CONSTRUCTOR =============================== */

  
/* _______________________________ UI.prototype _______________________________ */
UI.prototype = Object.create(UI.prototype,{
    'querySelector' : {
        value: function(elem,prop){
            return elem.querySelectorAll(prop);
        }
    },
    'createNodeList' : {
        value: function(html){
        var list = [];
        var elem = document.createElement('span');
        var c;
            elem.innerHTML = html;
            c = elem.childNodes;
            for(var i = 0; i < c.length; i = i + 1){
                list.push(c[i]);
            }
            return list;
        }
    },
    'createFragment' : {
        value : function(text){
        var frag = document.createDocumentFragment();
        var child = this.createNodeList(text);
            for(var i = 0; i < child.length; i = i + 1){
                frag.appendChild(child[i].cloneNode(true));
            }
            return frag;
        }
    },
    'upper' : {
        value: function(prop){
            prop = prop.toLowerCase();
            var match = prop.match(/TextArea|ScrollBar/i);
            switch(match){
            case null : return prop[0].toUpperCase() + prop.substring(1);
            default :
            case true :
                switch(match[0]){
                case 'textarea' : return 'TextArea';
                case 'scrollbar' : return 'ScrollBar';
                }
            break;
            }
        }
    },
    'defineProperty' : {
        value: function(obj, prop){
            Object.defineProperty(obj, prop, {
              enumerable: false,
              //configurable: false,
              //writable: false,
              value: obj[prop]
            });
        }
    },
    'getEvent' : {
        value: function(fnc, self){
            return function(evt){
                fnc.call(this, evt, self);
            };
        }
    },
    'getXY' : {
        value:
        function(evt, item){
        var self = item === undefined ? evt.target : 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};
        }
    },
    'setAttr' : {
        value: function(){
        var d = arguments;
            for(var prop in d[1]){
                d[0].setAttribute(prop, d[1][prop]);
            }
            return d[0];
        }
    },
    'setCss' : {
        value: function(){
        var d = arguments;
            for(var prop in d[1]){
                d[0].style[prop] = d[1][prop];
            }
            return d[0];
        }
    },
    'setCtx' : {
        value: 
        function(ctx, dtx){
            for(var key in dtx){
                ctx[key] = dtx[key];
            }
        }
    },
    'setProp' : {
        value: function(){
        var d = arguments;
            for(var prop in d[1]){
                d[0][prop] = d[1][prop];
            }
            return d[0];
        }
    },
    '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 'proty' :
                    UI.prototype.setProp(elem, d[1][prop]);
                break;
                }
            }
            return elem;
        }
    },
    '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 'proty' :
                    UI.prototype.setProp(elem, d[1][prop]);
                break;
                }
            }
            return elem;
        }
    },
    'replace' : {
        value: function(newNode, currentNode){
            currentNode.parentNode.replaceChild(newNode, currentNode);
            return this;
        }
    },
    'insert' : {
        value: function(newNode, targetNode){
            targetNode.parentNode.insertBefore(newNode, targetNode);
            return this;
        }
    },
    'append' : {
        value: function(newNode, targetNode){
            targetNode.appendChild(newNode);
            return this;
        }
    },
    'entry' : {
        value: function(parentNode, childNode){
            parentNode.appendChild(childNode);
            return this;
        }
    },
    '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;
        }
    },
    'push' : { value: Array.prototype.push },
    'splice' : { value:  Array.prototype.splice },
    'concat' : { value: Array.prototype.concat },
    'Type' : { value: 'UI' },
    'Name' : { value: 'Custom_UI' }
});

/* _______________________________ TextArea.prototype _______________________________ */
UI.prototype.TextArea.prototype = Object.create(UI.prototype);
UI.prototype.TextArea.prototype.constructor = UI.prototype.TextArea;
UI.prototype.TextArea.prototype.NodeList = UI.prototype.NodeList;
UI.prototype.TextArea.prototype.Style = function(self){
    UI.prototype.Style.call(this,self);
};
UI.prototype.TextArea.prototype = Object.create(UI.prototype.TextArea.prototype,{
    'EVENTS' : {
        value: {
            'Handle' :function(mutations, self){
                mutations.forEach(function(mutation){
                var type = mutation.type;
                    switch(type){
                    case 'characterData' :
                        ////console.log( mutation.type);
                        ////console.log( mutation.target.data.length);
                        ////console.log( mutation.target);
                        ////console.log([mutation.target.parentNode.parentNode.parentNode.scrollLeft]);
                        ////console.log([mutation.target.parentNode.scrollWidth]);
                        ////console.log(mutation.target.nodeValue);
                    break;
                    case 'childList' :
                    break;
                    }
                });
            },
            'KeyDown' : function(evt, self){
            },
            'Focus' : function(evt, self){
            },
            'Blur' : function(evt, self){
            },
            'RectUp' : function(evt, self){
            },
            'RectDrag' : function(evt, self){
            },
            'Move' : function(evt, self){
            },
            'TextAreaUp' : function(evt, self){
            var option = self.option;
            var event = option.event;
            var bar = self.scrollbar;
                bar.horizon.deltaX = 0;
                bar.vartical.deltaY = 0;
                document.removeEventListener('mousemove',event.drag[0]);
                document.removeEventListener('mouseup',event.up[0]);
            },
            'TextAreaDrag' : function(evt, self){
                self.EVENTS.TextAreaDown.call(this,evt,self);
            },
            'TextAreaDown' : function(evt, self){
            var option = self.option;
            var event = option.event;
            var bar = self.scrollbar;
            var textarea = bar.TextArea;
            var content = bar.content;
            var container = content.container;
            var z = bar.getXY(evt,container);
            var nodeType = content.nodeType;
            var px = nodeType === undefined ? 0 : 'px';
            var clientWidth = container.clientWidth;
            var clientHeight = container.clientHeight;
            var n = self.content.lineHeight;
            var top = z.y  - n;
            var right = clientWidth - z.x - n;
            var bottom = clientHeight - z.y - n * (evt.type == 'mousedown' ? 2 : 1);
            var left = z.x - n;
            var style = {};
            var hr = 0;
            var vr = 0;
                style.left = self.content.style.left;
                style.top = self.content.style.top;
                bar.horizon.deltaX = 0;
                bar.vartical.deltaY = 0;
                content.evt = evt;
                if(left < 0){
                    left = Math.ceil(left / clientWidth * clientWidth) * 2;
                    bar.horizon.deltaX = left;
                    hr = self.getFocusStyle(bar, 'horizon');
                    style.left = hr;
                }
                if(right < 0){
                    right = Math.ceil(-right / clientWidth * clientWidth) * 2;
                    bar.horizon.deltaX = right;
                    hr = self.getFocusStyle(bar, 'horizon');
                    style.left = hr;
                }
                //a = Math.sqrt(Math.pow(z.x - a.x,2) + Math.pow(z.y - a.y,2));
                if(top < 0){
                    top = nodeType === undefined ? Math.floor(content.style.top%n) - n : Math.ceil(top / clientHeight * clientHeight) * 1;
                    bar.vartical.deltaY = top;
                    vr = self.getFocusStyle(bar, 'vartical');
                    style.top = vr;
                }
                if(bottom < 0){
                    bottom = Math.ceil(-bottom / clientHeight * clientHeight) * 1;
                    bottom = Math.floor(content.style.top%n) + n;
                    bar.vartical.deltaY = bottom;
                    vr = self.getFocusStyle(bar, 'vartical');
                    style.top = vr;
                }
                var selection = self.getSelection(evt, style);
                //var type = evt.type + '_' + selection.type;
                var type = selection.type;
                switch(evt.type){
                case 'mousedown' :
                    self.selection.start[0] = selection;
                    self.selection.end[0] = selection;
                    document.addEventListener('mousemove',event.drag[0], false);
                    document.addEventListener('mouseup',event.up[0], false);
                break;
                default :
                    self.selection.end[self.selection.start.length - 1] = selection;
                }
                switch(type){
                case 'top' :
                break;
                case 'right' :
                    self.scrollbar.EVENTS.ContainerFocus({deltaX:selection.charWidth,deltaY:0}, self.scrollbar);
                break;
                case 'bottom' :
                break;
                case 'left' :
                    self.scrollbar.EVENTS.ContainerFocus({deltaX:self.content.scrollLeft + selection.charWidth,deltaY:0}, self.scrollbar);
                break;
                }
            }
        }
    },
    'getFocusStyle' : {
        value: function(bar, key){
        var item = bar[key];
        var list = bar.ctxList;
        var angle = list.angle;
        var arrow = list.arrow;
        var rect = list.rect;
        var content = bar.content;
        var child = bar.childNodes;
        var can = child[key];
        var offsetWidth = content.offsetWidth;
        var offsetHeight = content.offsetHeight;
        var width = can.width;
        var height = can.height;
        var result;
            switch(key){
            case 'vartical' :
            var styleY =  content.style.top;
            var deltaY = item.deltaY;
            var rangeY = item.range;
            var top = item.top;
            var y = (styleY - deltaY);
            var oy = offsetHeight-(height);
            var hp = y / oy;
                if(hp > 0){ hp = 0; }
                if(hp < -1){ hp = -1; }
                result = (oy * hp);
            break;
            case 'horizon' :
            var indexWidth = content.indexWidth;
            var styleX = content.style.left;
            var deltaX = item.deltaX;
            var rangeX = item.range;
            var left = item.left;
            var x = (styleX - deltaX);
            var ox = (offsetWidth + indexWidth) -(width);
            var vp = x / ox;
                if(vp > 0){ vp = 0; }
                if(vp < -1){ vp = -1; }
                result = (ox * vp);
            break;
            }
            return (result);
        }
    },
    'getSelection' : {
        value : function getSelection(evt, style){
        var z = this.getXY(evt, this.canvasList.rect);
        var content = this.content;
        var lineWidth = content.offsetWidth;
        var lineHeight = content.lineHeight;
        var value = this.values;
        var left = Math.abs(style.left);
        var top = Math.abs(style.top);
        var textarea = this.canvasList.text;
            if(z.y < lineHeight){
                if(top === 0){
                    z.y =  0;
                }
                else{
                    z.y =  top%lineHeight;
                }
            }
            if(z.y > textarea.offsetHeight - lineHeight){
                z.y =  (textarea.offsetHeight-lineHeight);
            }
        var  text, oa, ob, i, m, n, x, y, w, max;
        var index = Math.floor((z.y + top) / lineHeight);
        var len = content.offsetHeight / lineHeight;
        var type = null;
            if(index < 0){
                index = 0;
            }
            if(index > len){
                index = len;
            }
            oa = Math.floor(index / 500);
            ob = index % 500;
            y = Math.floor((z.y + top%lineHeight)/lineHeight) * lineHeight + (lineHeight - top%lineHeight) - lineHeight;
            text = value[oa][ob];
            m = 0;
            n = 0;
            x = 0;
            //y = 0;
            i = 0;
            w = 0;
            max = this.calc(text);
            for(; i < text.length; i = i + 1){
                w = this.calc(text[i]);
                m = n;
                n = n + w;
                if(z.x + left < n){
                    x = m - left;
                    break;
                }
            }
            if(i >= text.length){
                //x = n - left;
                x = m - left;
            }
            if(x < 0){
                type = 'left';
                //m = n - w;
            }
            else if(x >= textarea.offsetWidth - w*2){
                type = 'right';
                m = w;
            }
            return {'index':index,'caret_offset':i,'caret_x':Math.round(x),'caret_y':y,'offset':[oa,ob,i],'textWidth':Math.round(max),'mouse_x':z.x, 'type' : type, 'charWidth':m};
        }
    },
    'draw' : {
        value: function(css){
        var selection = this.selection;
        var content = this.content;
        var start = selection.start;
        var end = selection.end;
        var ctx = this.contextList.text;
        var can = this.canvasList.text;
        var dtx = this.contextList.rect;
        var dan = this.canvasList.rect;
        var etx = this.contextList.index;
        var ean = this.canvasList.index;
        var style = content.style;
        var left = style.left;
        var lineHeight = content.lineHeight;
        var top = Math.abs(style.top);
        var viewLength = content.viewLength;
        var values = this.values;
        var h = lineHeight/2;
        var index = Math.floor( top / lineHeight);
        var m = Math.floor(index / 500);
        var n = index % 500;
        var x = m;
        var y = n;
        var z = 0;
        var i,j,k;
        var cnt = 0;
            ctx.clearRect(0,0,can.width,can.height);
            dtx.clearRect(0,0,dan.width,dan.height);
            etx.clearRect(0,0,ean.width,ean.height);
            for(i = 0; i <= viewLength; i = i + 1,n = n + 1){
                if(values[m][n] === undefined){
                    m = m + 1;
                    n = 0;
                    if(values[m] === undefined){ continue; }
                }
                ctx.fillText(values[m][n], left, (m * 500 + n) * lineHeight - top + h);
                etx.fillText((m * 500 + n) + '.', ean.width, (m * 500 + n) * lineHeight - top + h);
            }
            if(end.length > 0){
             var item = end[z];
                f : for(i = 0; i <= viewLength; i = i + 1,y = y + 1){
                    if(values[x][y] === undefined){
                        x = x + 1;
                        y = 0;
                        if(values[x] === undefined){continue; }
                    }
                    if(x == item.offset[z] && y == item.offset[1]){
                        g : for(j = 0; j < end.length; j = j + 1){
                        var o = end[j];
                            if(x == o.offset[0] && y == o.offset[1]){
                            var str = values[x][y].substring(0,o.offset[2]);
                            var w = Math.round(this.calc(str));
                                dtx.fillRect(w + left,(x * 500 + y) * lineHeight - top,selection.caretWidth,lineHeight);
                                z++;
                            }
                            else{
                                //break g;
                                break f;
                            }
                        }
                    }
                }
            }
            return this;
        }
    },
    'css' : {
        value: function css(css){
            UI.prototype.setCss.call(this, this.container, css);
            this.resize();
            return this;
        }
    },
    'calc' : {
        value : function calc(str){
        var ctx = this.contextList.test;
            return ctx.measureText(str).width;
        }
    },
    'ctx' : {
        value: function(ctx, dtx){
            UI.prototype.setCtx.call(this, ctx, dtx);
            return this;
        }
    },
    'resize' : {
        value: function(){
        var column = this.columnList;
        var canvas = this.canvasList;
        var context = this.contextList;
        var conf = this.conf;
        var content = this.content;
        var bar = this.scrollbar;
        var i,j,k,key;
            for(key in column){
                switch(key){
                case 'content' :
                break;
                case 'textarea' :
                break;
                case 'index' :
                var css = column[key].classList;
                    if(css.length > 1){
                        for(i = 1; i < css.length; i = i + 1){
                            css.remove(css[i]);
                        }
                    }
                    css.add('em' + (content.length.toString().length));
                break;
                case 'textarea' :
                break;
                case 'skin' :
                break;
                }
            }
            bar.resize();
            bar.draw('horizon', null);
            bar.draw('vartical', null);
            this.setValue(column.index.offsetWidth);
            
            for(key in canvas){
            var par = canvas[key].parentNode;
                switch(key){
                case 'index' :
                    canvas[key].width = par.offsetWidth;
                    canvas[key].height = par.offsetHeight - content.horizonHeight;
                    this.ctx(context[key], conf.index);
                break;
                case 'text' :
                    canvas[key].width = par.offsetWidth - content.varticalWidth;
                    canvas[key].height = par.offsetHeight - content.horizonHeight;
                    this.ctx(context[key], conf.text);
                break;
                case 'rect' :
                    canvas[key].width = par.offsetWidth - content.varticalWidth;
                    canvas[key].height = par.offsetHeight - content.horizonHeight;
                break;
                }
            }
            
            this.draw();
        }
    },
    'setValue' : {
        value : function(left){
        var container = this.container;
        var wid = container.offsetWidth;
        var hei = container.offsetHeight;
        var values = this.values;
        var content = this.content;
        var bar = this.scrollbar;
        var vartical = bar.childNodes.vartical;
        var horizon = bar.childNodes.horizon;
        var cnt = 0;
        var a = 0;
        var z = 0;
            for(var i = 0; i < values.length; i = i + 1){
                for(var j = 0; j < values[i].length; j = j + 1){
                var str = values[i][j];
                    z = this.calc(str);
                    if(a < z){
                        content.offsetItem = str;
                        content.offsetWidth = Math.ceil(z);
                        a = z;
                    }
                    cnt++;
                }
            }
            content.indexWidth =  left;
            content.offsetWidth = content.offsetWidth + left;
            content.offsetHeight = cnt * content.lineHeight;
            content.clientWidth = wid - vartical.width;
            content.clientHeight = hei - horizon.height;
            content.varticalWidth =  vartical.width;
            content.horizonHeight =  horizon.height;
            content.length = cnt;
            content.viewLength = Math.floor(content.clientHeight / content.lineHeight);
            if(cnt < content.viewLength){
                content.viewLength = cnt;
            }
        }
    },
    'parse' : {
        'value' :
        function(textarea){
        var style = window.getComputedStyle(textarea);
        var name = textarea.nodeName.toLowerCase();
        var wid, hei, val;
            switch(name){
            case 'textarea' :
            var reg = RegExp('\r\n|\n|\r|.$','g');
            var values = this.values;
            var block = values[0];
            var index = 0;
            var arr,temp;
                wid = style.getPropertyValue('width');
                hei = style.getPropertyValue('height');
                val = textarea.value;
                while ((arr = reg.exec(val)) !== null) {
                var lastIndex = reg.lastIndex;
                var str = val.substring(index, lastIndex).replace(/[\r\n|\n|\r]$/,'');
                    block.push(str);
                    index = lastIndex;
                    if(block.length >= 500){
                        block = [];
                        values.push(block);
                    }
                }
                UI.prototype.insert.call(this, this.container, textarea);
                this.resize();
                //this.draw();
            break;
            case 'pre' :
            break;
            }
            return this;
        }
    },
    'query' : {
        value: function(elem, prop){
            return this.querySelector(elem, prop);
        }
    },
    'node' : {
        value: function(prop){
            return this.createNodeList(prop);
        }
    },
    'getItem' : {
        value : function(prop){
            switch(prop){
            case 'selection' :
            return {'end':[],'start':[]};
            }
        }
    },
    'VALUE' : {
        value: {
            'text' : '<div class="container" data-custom_UI="textarea"><div class="content"><div class="index"><canvas class="index"></canvas></div><div class="textarea"><canvas class="text"></canvas><canvas class="rect"></canvas><canvas class="test"></canvas></div></div><div class="skin"><span class="cursor"><span class="caret" contenteditable="true"></span></span></div></div>',
            'data-class' : 'data-custom_textarea'
        }
    },
    'Type' : { value: 'TextArea' },
    'Name' : { value: 'Custom_TextArea' }
});

/* _______________________________ ScrollBar.prototype _______________________________ */
UI.prototype.ScrollBar.prototype = Object.create(UI.prototype);
UI.prototype.ScrollBar.prototype.constructor = UI.prototype.ScrollBar;
UI.prototype.ScrollBar.prototype.NodeList = function(self){
    UI.prototype.NodeList.call(this,[this.create('canvas',{attr:{class:'horizon'}}),this.create('canvas',{attr:{class:'vartical'}}),this.create('div',{attr:{class:'map'}})]);
    this.option = self.option;
    this.defineProperty(this,'length');
    this.horizon.addEventListener('mousedown', self.option.event.down[0], false);
    this.vartical.addEventListener('mousedown', self.option.event.down[0], false);
};
UI.prototype.ScrollBar.prototype = Object.create(UI.prototype.ScrollBar.prototype,{
    'EVENTS' : {
        value : {
            'ContainerUp' : function(evt, self){
            var option = self.option;
            var content = self.content;
            var nodeType = content.nodeType;
                if(nodeType === undefined){
                    content.evt = null;
                }
                    
                document.removeEventListener('mousemove', option.event.drag[1]);
                document.removeEventListener('mouseup', option.event.up[1]);
            },
            'ContainerDrag' : function(evt, self){
            var textarea = self.TextArea;
            var content = self.content;
            var container = content.container;
            var can = content.object.canvasList.index;
            var z = self.getXY(evt,container);
            var nodeType = content.nodeType;
            var px = nodeType === undefined ? 0 : 'px';
            var clientWidth = container.clientWidth;
            var clientHeight = container.clientHeight;
            var n = content.lineHeight;
            var top = z.y  - n;
            //var top = z.y  - n * (evt.type == 'mousedown' ? 2 : 1);
            var right = clientWidth - z.x - n;
            var bottom = clientHeight - z.y - n * (evt.type == 'mousedown' ? 2 : 1);
            var left = z.x - can.offsetWidth;
            var hr = null;
            var vr = null;
                self.horizon.deltaX = 0;
                self.vartical.deltaY = 0;
                content.evt = evt;
                if(left < 0){
                    left = Math.ceil(left / clientWidth * clientWidth) * 2;
                    self.horizon.deltaX = left;
                    hr = self.wheelDraw('horizon');
                    content.style.left = (hr) + px;
                }
                if(right < 0){
                    right = Math.ceil(-right / clientWidth * clientWidth) * 2;
                    self.horizon.deltaX = right;
                    hr = self.wheelDraw('horizon');
                    content.style.left = (hr) + px;
                }//a = Math.sqrt(Math.pow(z.x - a.x,2) + Math.pow(z.y - a.y,2));
                if(top < 0){
                    top = nodeType === undefined ? Math.floor(content.style.top%n) - n : Math.ceil(top / clientHeight * clientHeight) * 1;
                    //top = Math.ceil(top / clientHeight * clientHeight) * 2;
                    self.vartical.deltaY = top;
                    vr = self.wheelDraw('vartical');
                    content.style.top = vr + px;
                }
                if(bottom < 0){
                    bottom = Math.floor(content.style.top%n) + n;
                    self.vartical.deltaY = bottom;
                    vr = self.wheelDraw('vartical');
                    content.style.top = vr + px;
                }
                if(nodeType === undefined){
                    if(hr === null){
                    var end = content.object.selection.end;
                    var len = end.length - 1;
                        end = end[len];
                        hr = self.wheelDraw('horizon');
                        content.style.left = (hr) + px;
                    }
                    if(vr === null){
                    //var end = content.object.selection.end;
                    //var len = end.length - 1;
                    //    end = end[len];
                    //    vr = self.wheelDraw('vartical');
                    //    content.style.left = (vr) + px;
                    }
                }
            },
            'ContainerDown' : function(evt, self){
                switch(['vartical','horizon','map'].indexOf(evt.target.classList.item(0))){
                case -1 :
                var option = self.option;
                    self.EVENTS.ContainerDrag.call(this,evt,self);
                    document.addEventListener('mousemove', option.event.drag[1], false);
                    document.addEventListener('mouseup', option.event.up[1], false);
                break;
                default :
                }
                
            },
            'ContainerFocus' : function(evt, self){
            var content = self.content;
            var result;
                if(evt.deltaY !== 0){
                    self.vartical.deltaY = evt.deltaY;
                    result = self.wheelDraw('vartical');
                    content.style.top = result;
                }
                if(evt.deltaX !== 0){
                    self.horizon.deltaX = evt.deltaX;
                    result = self.wheelDraw('horizon');
                    content.style.left = result;
                }
            },
            'ContainerWheel' : function(evt, self){
                evt.stopPropagation();
                evt.preventDefault();
            var content = self.content;
            var px = content.nodeType === undefined ? 0 : 'px';
            var result;
                if(evt.deltaY !== 0){
                    self.vartical.deltaY = evt.deltaY;
                    result = self.wheelDraw('vartical');
                    content.style.top = result + px;
                }
                if(evt.deltaX !== 0){
                    self.horizon.deltaX = evt.deltaX;
                    result = self.wheelDraw('horizon');
                    content.style.left = result + px;
                }
            },
            'BarDown': function(evt, self){
            var z = self.getXY(evt,self.childNodes.horizon);
            var option = self.option;
            var content = self.content;
            var style = content.style;
            var prop = this.classList.contains('horizon') === true ? 'horizon' : 'vartical';
            var type = evt.type;
            var item = self[prop];
            var flag;
            var nodeType = content.nodeType;
            var px = nodeType === undefined ? 0 : 'px';
            var left = nodeType === undefined ? content.indexWidth : 0;
            var hr = null;
            var vr = null;
                switch(prop){
                case 'horizon' :
                    if(type == 'mousedown'){
                        item.dx = z.x;
                    }
                    item.mx = z.x;
                    item.type = type;
                break;
                case 'vartical' :
                    if(type == 'mousedown'){
                        item.dy = z.y;
                    }
                    item.my = z.y;
                    item.type = type;
                break;
                }
                
                option.temp = this;
                flag = self.draw(prop, evt.type);
                switch(flag){
                case 'scroll' :
                    switch(prop){
                    case 'horizon' :
                        content.style.left =  -(item.scrollLeft * (content.offsetWidth - self.childNodes.horizon.offsetWidth + left)) + px;
                    break;
                    case 'vartical' :
                        content.style.top =  -(item.scrollTop * (content.offsetHeight - self.childNodes.vartical.offsetHeight)) + px;
                    break;
                    }
                    ////console.log(flag);
                break;
                case 'click' :
                    ////console.log(flag);
                break;
                case 'step' :
                    ////console.log(flag);
                break;
                }
                if(type == 'mousedown'){
                    document.addEventListener('mousemove', option.event.drag[0], false);
                    document.addEventListener('mouseup', option.event.up[0], false);
                }
            },
            'BarDrag' : function(evt, self){
             var option = self.option;
                self.EVENTS.BarDown.call(option.temp,evt,self);
            },
            'BarUp' : function(evt, self){
            var option = self.option;
            var prop, item;
                self.EVENTS.BarDown.call(option.temp,evt,self);
                prop = option.temp.classList.contains('horizon') === true ? 'horizon' : 'vartical';
                item = self[prop];
                switch(prop){
                case 'horizon':
                    item.left = self.horizon.x;
                    item.dx = 0;
                    item.mx = 0;
                    item.deltaX = 0;
                break;
                case 'vartical' :
                    item.top = self.vartical.y;
                    item.dy = 0;
                    item.my = 0;
                    item.deltaY = 0;
                break;
                }
                document.removeEventListener('mousemove', option.event.drag[0]);
                document.removeEventListener('mouseup', option.event.up[0]);
            }
        }
    },
    'wheelDraw' : {
        value: function(key){
        var item = this[key];
        var list = this.ctxList;
        var angle = list.angle;
        var arrow = list.arrow;
        var rect = list.rect;
        var content = this.content;
        var end = content.object.selection.end;
        var index = content.object.canvasList.index;
        var txt = content.object.canvasList.text;
        var len = end.length - 1;
            end = end[len];
        var type = content.nodeType === undefined ? 'obj' : 'elem';
        var child = this.childNodes;
        var can = child[key];
        var ctx = can.getContext('2d');
        var offsetWidth = content.offsetWidth;
        var offsetHeight = content.offsetHeight;
        var width = can.width;
        var wid = width;
        var height = can.height;
        var hei = height;
        var r = item.r;
        var result = 0;
        var lf,rf, tf, bf;
        var dtx;
            switch(key){
            case 'horizon' :
            var indexWidth = type == 'elem' ? 0 : content.indexWidth;
            var styleX = type == 'elem' ? parseInt(content.style.left.replace('px','')) : (content.style.left);//offsetLeft
            var deltaX = item.deltaX;
            var rangeX = item.range;
            var x = (styleX - deltaX);
            var ox = (offsetWidth + indexWidth) -(width);
            var left,vp;
                switch(deltaX){
                case 0 :
                    //console.log(0,'wheelDraw[deltaX]=0');
                break;
                default :
                    switch(txt.offsetWidth-styleX > end.textWidth + 40){
                    case true :
                        switch(end.caret_x < 0 && deltaX < 0){
                        case true :
                        break;
                        case false :
                            item.deltaX = 0;
                        return styleX;
                        }
                    break;
                    case false :
                    break;
                    }
                }
                vp = x / ox;
                item.vp = vp;
                item.ox = ox;
                if(vp > 0){ vp = 0; lf = true; }
                if(vp < -1){ vp = -1; rf = true;}
                result = (ox * vp);
                width = width - r * 2 - rangeX;
                left = -vp * width + r;
                ctx.clearRect(0,0,can.width,can.heightwidth);
                
                this.ctx(ctx,angle);// bg
                ctx.fillRect(0,0,can.width,can.height);
                
                this.ctx(ctx,rect.disabled);// range
                ctx.fillRect(Math.round(left),2,rangeX,r-4);
                
                if(lf === true){
                    dtx = arrow.disabled;
                }
                else{
                    dtx = arrow.up;
                }
                this.ctx(ctx,dtx);
                ctx.beginPath();
                ctx.moveTo(10,5 );
                ctx.lineTo(10,13);
                ctx.lineTo(6, 9 );
                ctx.closePath();
                ctx.fill();// left
                
                if(rf === true){
                    dtx = arrow.disabled;
                }
                else{
                    dtx = arrow.up;
                }
                this.ctx(ctx,dtx);
                ctx.beginPath();
                ctx.moveTo(wid - 12,5 );
                ctx.lineTo(wid - 12,13);
                ctx.lineTo(wid - 8 ,9 );
                ctx.closePath();
                ctx.fill();//right
                
                item.dx = 0;
                item.mx = 0;
                item.left = (left);
                item.x = (left);
            break;
            case 'vartical' :
            var styleY = type == 'elem' ? parseInt(content.style.top.replace('px','')) : content.style.top;
            var deltaY = item.deltaY;
            var rangeY = item.range;
            var top = item.top;
            var y = (styleY - deltaY);
            var oy = offsetHeight-(height);
            var hp = y / oy;
                if(hp > 0){ hp = 0; tf = true; }
                if(hp < -1){ hp = -1; bf = true;}
                result = (oy * hp);
                height = height - r * 2 - rangeY;
                top = -hp * height + r;
                ctx.clearRect(0,0,can.width,can.height);
                
                this.ctx(ctx,angle);// bg
                ctx.fillRect(0,0,can.width,can.height);
                
                this.ctx(ctx,rect.disabled);// range
                ctx.fillRect(2,Math.round(top),r-4,rangeY);
                
                if(tf === true){
                    dtx = arrow.disabled;
                }
                else{
                    dtx = arrow.up;
                }
                this.ctx(ctx,dtx);
                ctx.beginPath();
                ctx.moveTo(5,10);
                ctx.lineTo(13,10);
                ctx.lineTo(9,6);
                ctx.closePath();
                ctx.fill();// arrow top
                
                if(bf === true){
                    dtx = arrow.disabled;
                }
                else{
                    dtx = arrow.up;
                }
                this.ctx(ctx,dtx);
                ctx.beginPath();
                ctx.moveTo(5,hei - 12);
                ctx.lineTo(13,hei - 12);
                ctx.lineTo(9,hei - 8);
                ctx.closePath();
                ctx.fill();// arrow bottom
                item.dy = 0;
                item.my = 0;
                item.top = top;
                item.y = top;
                
            break;
            }
            return Math.round(result);
        }
    },
    'draw' : {
        value: function(key,type){
        
        var item = this[key];
        var r = item.r;
        var list = this.ctxList;
        var angle = list.angle;
        var arrow = list.arrow;
        var rect = list.rect;
        var can = this.childNodes[key];
        var ctx = can.getContext('2d');
        var wid = can.width;
        var hei = can.height;
        var length = item.length;
        var range = item.range;
        var dx = 0;
        var dy = 0;
        var mx = 0;
        var my = 0;
        var x = 0; 
        var y = 0;
        var top = 0;
        var left = 0;
        var dtx;
        var lf,rf, tf, bf;
        var evt = 'click';
        
            ctx.clearRect(0,0,wid,hei);
            switch(key){
            case 'horizon' :
                left = item.left;
                dx = item.dx;
                mx = item.mx;
                x = mx - dx + left;
                if(x < r){ x = r; }
                if(x > wid - (r + range)){ x = wid - (r + range); }
                this.ctx(ctx,angle);// bg
                ctx.fillRect(0,0,wid,hei);
                
                if(dx < r){
                    lf = true;
                }
                else {
                    lf = false;
                }
                
                if(dx > wid - r){
                    lf = false;
                    rf = true;
                }
                else {
                    rf = false;
                }
                if(lf === true || rf === true){
                    x = left;
                    evt = 'click';
                }
                else{
                    if(dx < left || dx > left + range){
                        x = left;
                        evt = 'step';
                    }
                    else {
                        evt = 'scroll';
                    }
                }
                
                if(lf === true){
                    if(type === 'mouseup'){
                        if(x == r){
                            dtx = arrow.disabled;
                        }
                        else{
                            dtx = arrow.up;
                        }
                    }
                    else{
                        if(x == r){
                            dtx = arrow.disabled;
                        }
                        else{
                            dtx = rect.down;
                            this.ctx(ctx,dtx);
                            ctx.fillRect(0,0,r,r);
                            dtx = arrow.down;
                        }
                    }
                }
                else{
                    if(x == r){
                        dtx = arrow.disabled;
                    }
                    else{
                        dtx = arrow.up;
                    }
                }
                this.ctx(ctx,dtx);
                ctx.beginPath();
                ctx.moveTo(10,5 );
                ctx.lineTo(10,13);
                ctx.lineTo(6, 9 );
                ctx.closePath();
                ctx.fill();// left
                
                if(rf === true){
                    if(type === 'mouseup'){
                        
                        if(x == wid - (r + range)){
                            dtx = arrow.disabled;
                        }
                        else{
                            dtx = arrow.up;
                        }
                    }
                    else{
                        if(x == wid - (r + range)){
                            dtx = arrow.disabled;
                        }
                        else{
                            dtx = rect.down;
                            this.ctx(ctx,dtx);
                            ctx.fillRect(wid - r,0,r,r);
                            dtx = arrow.down;
                        }
                    }
                }
                else{
                    if(x == wid - (r + range)){
                        dtx = arrow.disabled;
                    }
                    else{
                        dtx = arrow.up;
                    }
                }
                
                this.ctx(ctx,dtx);
                ctx.beginPath();
                ctx.moveTo(wid - 12,5 );
                ctx.lineTo(wid - 12,13);
                ctx.lineTo(wid - 8 ,9 );
                ctx.closePath();
                ctx.fill();//right
                
                if(evt == 'scroll' && type != 'mouseup'){
                    dtx = rect.down;
                }
                else{
                    dtx = rect.disabled;
                }
                this.ctx(ctx,dtx);
                ctx.fillRect(Math.round(x),2,range,r-4);// bar
                item.x = x;
                item.scrollLeft = (x-r)/(wid-r*2-range);
            return evt;
            case 'vartical' :
                type = item.type;
                top = item.top;
                dy = item.dy;
                my = item.my;
                y = my - dy + top;
                
                tf = item.tf;
                bf = item.bf;
                if(y < r){ y = r; }
                if(y > hei - (r + range)){ y = hei - (r + range); }
                
                this.ctx(ctx,angle);
                ctx.fillRect(0,0,wid,hei);//bg
                
                if(dy < r){
                    tf = true;
                }
                else {
                    tf = false;
                }
                
                if(dy > hei - r){
                    tf = false;
                    bf = true;
                }
                else {
                    bf = false;
                }
                if(tf === true || bf === true){
                    y = top;
                    evt = 'click';
                }
                else{
                    if(dy < top || dy > top + range){
                        y = top;
                        evt = 'step';
                    }
                    else {
                        evt = 'scroll';
                    }
                }
                
                if(tf === true){
                    if(type === 'mouseup'){
                        if(y == r){
                            dtx = arrow.disabled;
                        }
                        else{
                            dtx = arrow.up;
                        }
                    }
                    else{
                        if(y == r){
                            dtx = arrow.disabled;
                        }
                        else{
                            dtx = rect.down;
                            this.ctx(ctx,dtx);
                            ctx.fillRect(0,0,r,r);
                            dtx = arrow.down;
                        }
                    }
                }
                else{
                    if(y == r){
                        dtx = arrow.disabled;
                    }
                    else{
                        dtx = arrow.up;
                    }
                }
                
                this.ctx(ctx,dtx);
                ctx.beginPath();
                ctx.moveTo(5,10);
                ctx.lineTo(13,10);
                ctx.lineTo(9,6);
                ctx.closePath();
                ctx.fill();// arrow top
                
                if(bf === true){
                    if(type === 'mouseup'){
                        
                        if(y == hei - (r + range)){
                            dtx = arrow.disabled;
                        }
                        else{
                            dtx = arrow.up;
                        }
                    }
                    else{
                        if(y == hei - (r + range)){
                            dtx = arrow.disabled;
                        }
                        else{
                            dtx = rect.down;
                            this.ctx(ctx,dtx);
                            ctx.fillRect(0,hei - r,r,r);
                            dtx = arrow.down;
                        }
                    }
                }
                else{
                    if(y == hei - (r + range)){
                        dtx = arrow.disabled;
                    }
                    else{
                        dtx = arrow.up;
                    }
                }
                
                this.ctx(ctx,dtx);
                ctx.beginPath();
                ctx.moveTo(5,hei - 12);
                ctx.lineTo(13,hei - 12);
                ctx.lineTo(9,hei - 8);
                ctx.closePath();
                ctx.fill();// arrow bottom
                if(evt == 'scroll' && type != 'mouseup'){
                    dtx = rect.down;
                }
                else{
                    dtx = rect.disabled;
                }
                this.ctx(ctx,dtx);
                ctx.fillRect(2,Math.round(y),r-4,range);//bar
                item.y = y;
                item.scrollTop = (y-r)/(hei-r*2-range);
            return evt;
            }
        }
    },
    'resize' : {
        value: function(){
        var container = this.container;
        var width = container.clientWidth;
        var height = container.clientHeight;
        var content = this.content;
        var offsetWidth = content.offsetWidth;
        var offsetHeight = content.offsetHeight;
        var horizon = this.childNodes.horizon;
        var vartical = this.childNodes.vartical;
        var map = this.childNodes.map;
        var r = this.horizon.r;
        var hp = (height-r)/offsetHeight;
        var vp = (height-r)/offsetHeight;
        var bl,br,bp,rl,rr,rp;
            map.classList.remove('show');
            horizon.width = 0;
            horizon.height = 0;
            vartical.width = 0;
            vartical.height = 0;
            if(height < offsetHeight && width < offsetWidth){
                map.classList.add('show');
                horizon.height = r;
                horizon.width = width - r;
                vartical.width = r;
                vartical.height = height - r;
                bp = (width-r)/offsetWidth;
                rp = (height-r)/offsetHeight;
                bl = width-r*2;
                rl = height-r*2;
                br = Math.floor(bp*bl);
                rr = Math.floor(rp*rl);
                this.horizon.length = bl;
                this.vartical.length = rl;
                this.horizon.range = (br < 20 ? 20 : br);
                this.vartical.range = (rr < 20 ? 20 : rr);
            }
            else if(height >= offsetHeight && width < offsetWidth){
                horizon.height = r;
                horizon.width = width;
                bp = width/offsetWidth;
                bl = width-r*2;
                br = Math.floor(bp*bl);
                this.horizon.length = bl;
                this.horizon.range = (br < 20 ? 20 : br);
            }
            else if(height < offsetHeight && width >= offsetWidth){
                vartical.width = r;
                vartical.height = height;
                rp = height/offsetHeight;
                rl = height-r*2;
                rr = Math.floor(rp*rl);
                this.vartical.length = rl;
                this.vartical.range = (rr < 20 ? 20 : rr);
            }
            else{
            }
        }
    },
    'attachEvent' : {
        value: function(){
            if(this.content.nodeType !== undefined){
                this.content.style.left = 0 +'px';
                this.content.style.top = 0 +'px';
            }
            this.container.addEventListener('mousedown', this.getEvent(this.childNodes.EVENTS.ContainerDown, this), false);
            this.container.addEventListener('wheel', this.getEvent(this.childNodes.EVENTS.ContainerWheel, this), false);
            return this;
        }
    },
    'addEvent' : {
        value : function(prop,fnc,flag){
        }
    },
    'entry' : {
        value: function(container, target, fnc){
            this.container = container;
            this.push(container);
            switch(target){
            case undefined :
                this.container = container;
                this.content = container.firstElementChild;
            break;
            default :
                this.content = target;
            }
            container.insertBefore(this.childNodes.horizon,container.firstChild);
            container.insertBefore(this.childNodes.vartical,container.firstChild);
            container.insertBefore(this.childNodes.map,container.firstChild);
            this.resize();
            this.draw('horizon', null);
            this.draw('vartical', null);
            this.attachEvent(this.content.event);
            return this;
        }
    },
    'ctx' : {
        value: 
        function(ctx, dtx){
            for(var key in dtx){
                ctx[key] = dtx[key];
            }
        }
    },
    'Type' : { value: 'ScrollBar' },
    'Name' : { value: 'Custom_ScrollBar' }
});
UI.prototype.ScrollBar.prototype.NodeList.prototype = Object.create(UI.prototype.ScrollBar.prototype,{
    'defineProperty' : { value: UI.prototype.defineProperty },
    'push' : {
        value: function(prop){
            UI.prototype.push.call(this, prop);
            var n = this.length - 1;
            UI.prototype.defineProperty(this, n);
        }
    },
    'Type' : { value: 'ScrollBar_NodeList' },
    'Name' : { value: 'Custom_ScrollBar' }
});

/* _______________________________ NodeList.prototype _______________________________ */
UI.prototype.NodeList.prototype = Object.create(UI.prototype.NodeList.prototype,{
    'defineProperty' : { value: UI.prototype.defineProperty },
    'push' : {
        value: function(prop){
            UI.prototype.push.call(this, prop);
            var n = this.length - 1;
            UI.prototype.defineProperty(this, n);
        }
    },
    'splice' : { value:  Array.prototype.splice },
    'concat' : { value: Array.prototype.concat },
    'Type' : { value: 'UI_NodeList' },
    'Name' : { value: 'UI_NodeList' }
});

/* _______________________________ ContextList.prototype _______________________________ */
UI.prototype.ContextList.prototype = Object.create(UI.prototype.ContextList.prototype,{
    'defineProperty' : { value: UI.prototype.defineProperty },
    'push' : {
        value: function(prop){
            UI.prototype.push.call(this, prop);
            var n = this.length - 1;
            UI.prototype.defineProperty(this, n);
        }
    },
    'splice' : { value:  Array.prototype.splice },
    'concat' : { value: Array.prototype.concat },
    'Type' : { value: 'UI_ContextList' },
    'Name' : { value: 'UI_ContextList' }
});

/* _______________________________ Style.prototype _______________________________ */
UI.prototype.TextArea.prototype.Style.prototype = Object.create(UI.prototype.Style.prototype,{
    'left' : {
        set : function(n) {
            this._left = n;
            this.TextArea.content.scrollLeft = n;
            this.TextArea.draw();
        },
        get : function() {
            return this._left;
        },
        configurable: true
    },
    'top' : {
        set : function(n) {
            //this._top = Math.round(n);
            this._top = (n);
            this.TextArea.content.scrollTop = n;
            this.TextArea.draw();
        },
        get : function() {
            return this._top;
        },
        configurable: true
    },
    'Type' : { value: 'UI_TextArea_Style' },
    'Name' : { value: 'UI_TextArea_Style' }
});
/* _______________________________ UI.prototype _______________________________ */


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

Console