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ライブラリの登場により、デスクトップアプリケーションと遜色ないユーザインタフェースの構築が可能になった。
                JavaScriptプログラムのための各種の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.textbox{
    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 ############################## */
UI.prototype.Select = function Select(){};

/* ############################## TextArea ############################## */
UI.prototype.TextArea = function(){
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, style, option, event;

    this.element = list[0];
    this.observe = observer;
    style = new this.Style(this);
    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'},
        style : style
    };
    
    this.content = new this.Content('element',this.element,'evt',null,'scrollLeft' ,0,'scrollTop',0,'clientWidth',0,'clientHeight',0,'offsetWidth',0,'offsetHeight',0,'varticalWidth',0,'horizonHeight',0,'viewLength',0,'maxValue',0,'style',style);
    this.scrollbar = new this.ScrollBar();
    this.scrollbar.entry(this, 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.textbox;
    temp = temp.removeChild(temp.lastElementChild);
    this.ctx(this.contextList.test,this.conf.text);
    this.selection = {'start':[],'end':[],'blink':true,'search':false,'caretWidth':1,'temp':null,'value':null};
    this.searchValue = {'list':[]};
    // return {'caret_x':Math.round(x),'caret_y':y,'offset':[oa,ob,i], 'charWidth':m,'textWidth':Math.round(max), 'type' : type};
    option = {
        event:{
            'down' : [],
            'drag' : [],
            'up' : [],
            'timeId' : [0]
        },
        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 ############################## */
UI.prototype.ScrollBar = function(){
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,'search':null};
    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'}
        }
    };
};

/* ############################## Content ############################## */
UI.prototype.Content = function(){
var arg = arguments[0];
    for(var i = 0; i < arg.length; i = i + 2){
        this[arg[i]] = arg[i + 1];
    }
};


/* ############################## 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.parent = symbol;
    this._left = 0;
    this._top = 0;
    this._font = '14px "Consolas"';
    this._lineHeight = 20;
};


/* =============================== 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' }
});

//UI.prototype.Select.prototype = Object.create(UI.prototype);
/* _______________________________ 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.Content = function(){
    UI.prototype.Content.call(this,arguments);
};
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, textarea){
            },
            'Focus' : function(evt, textarea){
            },
            'Blur' : function(evt, textarea){
            },
            'RectUp' : function(evt, textarea){
            },
            'RectDrag' : function(evt, textarea){
            },
            'Move' : function(evt, textarea){
            },
            'TextAreaUp' : function(evt, textarea){
            var option = textarea.option;
            var event = option.event;
            var bar = textarea.scrollbar;
                bar.horizon.deltaX = 0;
                bar.vartical.deltaY = 0;
                document.removeEventListener('mousemove',event.drag[0]);
                document.removeEventListener('mouseup',event.up[0]);
                textarea.selection.caretWidth = 0;
                textarea.draw(textarea.search());
                textarea.scrollbar.searchDraw();
                clearInterval(textarea.option.event.timeId[0]);
                textarea.option.event.timeId[0] = setInterval(textarea.blink,500,textarea);
            },
            'TextAreaDrag' : function(evt, textarea){
            var option = textarea.option;
            var event = option.event;
            var bar = textarea.scrollbar;
            var content = textarea.content;
            var element = textarea.element;
            var z = textarea.getXY(evt,element);
            var clientWidth = element.clientWidth;
            var clientHeight = element.clientHeight;
            var n = content.style.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 = content.style.left;
                style.top = 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 = textarea.getFocusStyle(bar, 'horizon');
                    style.left = hr;
                }
                if(right < 0){
                    right = Math.ceil(-right / clientWidth * clientWidth) * 2;
                    bar.horizon.deltaX = right;
                    hr = textarea.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 =  Math.floor(content.style.top%n) - n;
                    bar.vartical.deltaY = top;
                    vr = textarea.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 = textarea.getFocusStyle(bar, 'vartical');
                    style.top = vr;
                }
                var selection = textarea.getSelection(evt, style);
                var type = selection.type;
                switch(evt.type){
                case 'mousedown' :
                    textarea.selection.temp = selection;
                    textarea.selection.start[0] = selection.offset;
                    textarea.selection.end[0] = selection.offset;
                    
                    bar.wheelDraw('vartical', 'mouseup');
                    document.addEventListener('mousemove',event.drag[0], false);
                    document.addEventListener('mouseup',event.up[0], false);
                break;
                default :
                    textarea.selection.temp = selection;
                    textarea.selection.end[textarea.selection.end.length - 1] = selection.offset;
                }
                switch(type){
                case 'top' :
                break;
                case 'right' :
                    textarea.scrollbar.EVENTS.ContainerFocus({deltaX:selection.charWidth,deltaY:0}, textarea.scrollbar);
                break;
                case 'bottom' :
                break;
                case 'left' :
                    textarea.scrollbar.EVENTS.ContainerFocus({deltaX:textarea.content.scrollLeft + selection.charWidth,deltaY:0}, textarea.scrollbar);
                break;
                }
            },
            'TextAreaDown' : function(evt, textarea){
                textarea.EVENTS.TextAreaDrag.call(this,evt,textarea);
                clearInterval(textarea.option.event.timeId[0]);
                textarea.selection.caretWidth = 2;
                textarea.searchValue.list = [];
            }
        }
    },
    '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.container.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.style.lineHeight;
        var value = this.values;
        var left = Math.abs(style.left);
        var top = Math.abs(style.top);
        var text = this.canvasList.text;
            if(z.y < lineHeight){
                if(top === 0){
                    z.y =  0;
                }
                else{
                    z.y =  top%lineHeight;
                }
            }
            if(z.y > text.offsetHeight - lineHeight){
                z.y =  (text.offsetHeight-lineHeight);
            }
        var  str, 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;
            if(value[oa] === undefined){
                oa = oa - 1;
                if(oa == -1){
                    oa = 0;
                }
                ob = value[oa].length - 1;
            }
            if(value[oa][ob] === undefined){
                ob = value[oa].length - 1;
            }
            y = Math.floor((z.y + top%lineHeight)/lineHeight) * lineHeight + (lineHeight - top%lineHeight) - lineHeight;
            str = value[oa][ob];
            m = 0;
            n = 0;
            x = 0;
            //y = 0;
            i = 0;
            w = 0;
            max = this.calc(str);
            for(; i < str.length; i = i + 1){
                w = this.calc(str[i]);
                m = n;
                n = n + w;
                if(z.x + left < n){
                    x = m - left;
                    break;
                }
            }
            if(i >= str.length){
                //x = n - left;
                x = m - left;
            }
            if(x < 0){
                type = 'left';
                //m = n - w;
            }
            else if(x >= text.offsetWidth - w*2){
                type = 'right';
                m = w;
            }
            return {'caret_x':Math.round(x),'caret_y':y,'offset':[oa,ob,i], 'charWidth':m,'textWidth':Math.round(max), 'type' : type};
        }
    },
    'blink' : {
        value: function(textarea){
        var selection = textarea.selection;
            switch(selection.caretWidth){
            case 0 :
                selection.caretWidth = 1;
            break;
            case 1 :
                selection.caretWidth = 0;
            break;
            }
            textarea.draw();
        }
    },
    'search' : {
        value : function(){
        var lineHeight = this.content.style.lineHeight;
        var values = this.values;
        var selection = this.selection;
        var start = selection.start[0];
        var end = selection.end[0];
        var mx = Math.min(start[2],end[2]);
        var zx = Math.max(start[2],end[2]);
        var item = selection.value;
        var reg = RegExp(item,'g');
        var search = this.searchValue;
        var m = search.list = [];
        var cnt = 0;
            search.range = cnt;
            if(item.replace(/\s+/g,'').length < 1 || start[0] != end[0] || start[1] != end[1]){  return null; }
            for(var i = 0; i < values.length; i = i + 1){
                for(var j = 0; j < values[i].length; j = j + 1){
                var val = values[i][j];
                var key = '$'+i+'-'+j;
                var arr;
                    while ((arr = reg.exec(val)) !== null) {
                    var index = arr.index;
                    var lastIndex = index + item.length;
                        if(!(start[0] == i && start[1] == j && mx == index && zx == lastIndex)){
                            if(m[key] === undefined){
                                m[key] = [];
                                cnt++;
                                search.range = cnt;
                            }
                            m[key].push([index,lastIndex,i*500+j*lineHeight]);
                        }
                    }
                }
            }
            search.offset = start[0]*500+start[1]*lineHeight;
        }
    },
    'draw' : {
        value: function(){
        var selection = this.selection;
        var search = this.searchValue;
        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.style.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 a = m;
        var z = z;
        var lastIndex,min,max,s,e,arr;
        var x,y;
        var i,j,k, str, key;
            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] === undefined){
                    m = m + 1;
                    if(values[m] === undefined){
                        break;
                    }
                    n = 0;
                }
                if(values[m][n] === undefined){ break; }
                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);
                key = '$'+m+'-'+n;
                if(search.list[key] !== undefined){
                    arr = search.list[key];
                    str = values[m][n];
                    for(j = 0; j < arr.length; j = j + 1){
                        a = Math.floor(this.calc(str.substring(0, arr[j][0])));
                        z = Math.ceil(this.calc(str.substring(arr[j][0], arr[j][1])));
                        dtx.save();
                        dtx.globalAlpha = 0.2;
                        dtx.fillStyle = 'magenta';
                        dtx.fillRect((a + left),((m * 500 + n) * lineHeight - top),(z),lineHeight);
                        dtx.restore();
                    }
                }
            }
            
            if(end.length > 0){
                for(i = 0; i < end.length; i = i + 1){
                    index = start[i][0] * 500 + start[i][1];
                    lastIndex = end[i][0] * 500 + end[i][1];
                    min = Math.min(index,lastIndex);
                    max = Math.max(index,lastIndex);
                    s = index < lastIndex ? start[i] : end[i];
                    e = index < lastIndex ? end[i] : start[i];
                    m = s[0];
                    n = s[1];
                    for(j = min; j < max + 1; j = j + 1,n = n + 1){
                        if(values[m] === undefined){
                            m = m + 1;
                            if(values[m] === undefined){
                                break;
                            }
                            n = 0;
                        }
                        dtx.save();
                        dtx.globalAlpha = 0.2;
                        dtx.fillStyle = 'green';
                        str = values[m][n];
                        switch(min == max){
                        case true :
                            x = Math.min(s[2],e[2]);
                            y = Math.max(s[2],e[2]);
                            selection.value = str.substring(x,y);
                            a = Math.floor(this.calc(str.substring(0, x)));
                            z = Math.floor(this.calc(str.substring(0, y)));
                            z = z - a;
                            if(search.list.length === 0){
                                dtx.fillRect(a + left,(m * 500 + n) * lineHeight - top,z,lineHeight);
                                dtx.globalAlpha = 1;
                                dtx.fillStyle = 'black';
                                dtx.fillRect(Math.floor(a + (start[i][2] < end[i][2] ? z : 0) + left),(m * 500 + n) * lineHeight - top,selection.caretWidth,lineHeight);
                            }
                        break;
                        case false :
                            z = Math.floor(this.calc(str));
                            switch(j){
                            case min :
                                str = str.substring(0,s[2]);
                                a = Math.floor(this.calc(str));
                                z = z - a + 8;
                                dtx.fillRect(a + left,(m * 500 + n) * lineHeight - top,z,lineHeight);
                                if(start[i][1] > end[i][1]){
                                    dtx.globalAlpha = 1;
                                    dtx.fillStyle = 'black';
                                    dtx.fillRect(Math.floor(a + left),(m * 500 + n) * lineHeight - top,selection.caretWidth,lineHeight);
                                }
                            break;
                            case max :
                                str = str.substring(0,e[2]);
                                a = Math.floor(this.calc(str));
                                z = a + left;
                                dtx.fillRect(0,(m * 500 + n) * lineHeight - top,z,lineHeight);
                                if(start[i][1] < end[i][1]){
                                    dtx.globalAlpha = 1;
                                    dtx.fillStyle = 'black';
                                    dtx.fillRect(Math.floor(z),(m * 500 + n) * lineHeight - top,selection.caretWidth,lineHeight);
                                }
                            break;
                            default :
                                z = z + left + 8;
                                dtx.fillRect(0,(m * 500 + n) * lineHeight - top,z,lineHeight);
                            }
                        break;
                        }
                        dtx.restore();
                    }
                }
            }// end.length > 0
            
            return this;
        }
    },
    'css' : {
        value: function css(css){
            UI.prototype.setCss.call(this, this.element, css);
            this.resize();
            return this;
        }
    },
    'calc' : {
        value : (function(){
            var calc = function(str){
                var ctx = this.contextList.test;
                return ctx.measureText(str).width;
            };
            return calc;
        })()
    },
    'ctx' : {
        value: function(ctx, dtx){
            UI.prototype.setCtx.call(this, ctx, dtx);
            return this;
        }
    },
    'resize' : {
        value: function(){
        var content = this.content;
        var column = this.columnList;
        var canvas = this.canvasList;
        var context = this.contextList;
        var conf = this.conf;
        var bar = this.scrollbar;
        var i,j,k,key;
            for(key in column){
                switch(key){
                case 'content' :
                break;
                case 'textbox' :
                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.maxValue.toString().length));
                break;
                case 'skin' :
                break;
                }
            }
            bar.resize();
            bar.draw('horizon', null);
            bar.draw('vartical', null);
            this.setValue();
            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 element = this.element;
        var textbox = this.columnList.textbox;
        var wid = element.offsetWidth;
        var hei = element.offsetHeight;
        var values = this.values;
        var content = this.content;
        var bar = this.scrollbar;
        var vartical = bar.childNodes.vartical;
        var horizon = bar.childNodes.horizon;
        var indexWidth = this.content.indexWidth;
        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 =  indexWidth; // ggg
            content.offsetWidth = content.offsetWidth + indexWidth;
            if(content.offsetWidth <= textbox.offsetWidth){
                content.offsetWidth = textbox.offsetWidth + indexWidth;
            }
            content.offsetHeight = cnt * content.style.lineHeight;
            content.clientWidth = wid - vartical.width - 2;
            content.clientHeight = hei - horizon.height - 2;
            content.varticalWidth =  vartical.width;
            content.horizonHeight =  horizon.height;
            content.maxValue = cnt;
            content.viewLength = Math.floor(content.clientHeight / content.style.lineHeight);
        }
    },
    '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.element, 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="textbox"><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, scrollbar){
            var option = scrollbar.option;
            var content = scrollbar.container.content;
                content.evt = null;
                document.removeEventListener('mousemove', option.event.drag[1]);
                document.removeEventListener('mouseup', option.event.up[1]);
            },
            'ContainerDrag' : function(evt, scrollbar){
            var container = scrollbar.container;
            var element = container.element;
            var content = container.content;
            var can = container.canvasList.index;
            var z = scrollbar.getXY(evt,element);
            var clientWidth = element.clientWidth;
            var clientHeight = element.clientHeight;
            var m = 0;
            var n = content.style.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;
                scrollbar.horizon.deltaX = 0;
                scrollbar.vartical.deltaY = 0;
                content.evt = evt;
                if(left < 0){
                    left = Math.ceil(left / clientWidth * clientWidth) * 2;
                    scrollbar.horizon.deltaX = left;
                    hr = scrollbar.wheelDraw('horizon');
                    content.style.left = (hr);
                }
                if(right < 0){
                    right = Math.ceil(-right / clientWidth * clientWidth) * 2;
                    scrollbar.horizon.deltaX = right;
                    hr = scrollbar.wheelDraw('horizon');
                    content.style.left = (hr);
                }//a = Math.sqrt(Math.pow(z.x - a.x,2) + Math.pow(z.y - a.y,2));
                if(top < 0){
                    top =  Math.floor(content.style.top%n) - n;
                    //top = Math.ceil(top / clientHeight * clientHeight) * 2;
                    scrollbar.vartical.deltaY = top;
                    vr = scrollbar.wheelDraw('vartical');
                    content.style.top = vr;
                }
                if(bottom < 0){
                    bottom = Math.floor(content.style.top%n) + n;
                    if(content.offsetHeight <= content.clientHeight){
                        bottom = 0;
                    }
                    scrollbar.vartical.deltaY = bottom;
                    vr = scrollbar.wheelDraw('vartical');
                    content.style.top = vr;
                }
                if(hr === null){
                var end = container.selection.end;
                var len = end.length - 1;
                    end = end[len];
                    hr = scrollbar.wheelDraw('horizon');
                    content.style.left = (hr);
                }
                if(vr === null){
                //var end = content.object.selection.end;
                //var len = end.length - 1;
                //    end = end[len];
                //    vr = scrollbar.wheelDraw('vartical');
                //    content.style.left = (vr) + px;
                }
            },
            'ContainerDown' : function(evt, scrollbar){
                switch(['vartical','horizon','map'].indexOf(evt.target.classList.item(0))){
                case -1 :
                var option = scrollbar.option;
                    scrollbar.EVENTS.ContainerDrag.call(this,evt,scrollbar);
                    document.addEventListener('mousemove', option.event.drag[1], false);
                    document.addEventListener('mouseup', option.event.up[1], false);
                break;
                default :
                }
                
            },
            'ContainerFocus' : function(evt, scrollbar){
            var content = scrollbar.container.content;
            var result;
                if(evt.deltaY !== 0){
                    scrollbar.vartical.deltaY = evt.deltaY;
                    result = scrollbar.wheelDraw('vartical');
                    content.style.top = result;
                }
                if(evt.deltaX !== 0){
                    scrollbar.horizon.deltaX = evt.deltaX;
                    result = scrollbar.wheelDraw('horizon');
                    content.style.left = result;
                }
            },
            'ContainerWheel' : function(evt, scrollbar){
                evt.stopPropagation();
                evt.preventDefault();
            var content = scrollbar.container.content;
            var result;
                if(content.offsetHeight > content.clientHeight){
                    if(evt.deltaY !== 0){
                        scrollbar.vartical.deltaY = evt.deltaY;
                        result = scrollbar.wheelDraw('vartical');
                        content.style.top = result;
                    }
                }
                if(evt.deltaX !== 0){
                    scrollbar.horizon.deltaX = evt.deltaX;
                    result = scrollbar.wheelDraw('horizon');
                    content.style.left = result;
                }
                scrollbar.searchDraw();
            },
            'BarDown': function(evt, scrollbar){
            var z = scrollbar.getXY(evt,scrollbar.childNodes.horizon);
            var option = scrollbar.option;
            var content = scrollbar.container.content;
            var style = content.style;
            var prop = this.classList.contains('horizon') === true ? 'horizon' : 'vartical';
            var type = evt.type;
            var item = scrollbar[prop];
            var flag;
            var left = content.indexWidth;
            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 = scrollbar.draw(prop, evt.type);
                switch(flag){
                case 'scroll' :
                    switch(prop){
                    case 'horizon' :
                        content.style.left =  -(item.scrollLeft * (content.offsetWidth - scrollbar.childNodes.horizon.offsetWidth + left * 1));
                    break;
                    case 'vartical' :
                        content.style.top =  -(item.scrollTop * (content.offsetHeight - scrollbar.childNodes.vartical.offsetHeight));
                    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);
                }
                scrollbar.searchDraw();
            },
            'BarDrag' : function(evt, scrollbar){
             var option = scrollbar.option;
                scrollbar.EVENTS.BarDown.call(option.temp,evt,scrollbar);
            },
            'BarUp' : function(evt, scrollbar){
            var option = scrollbar.option;
            var prop, item;
                scrollbar.EVENTS.BarDown.call(option.temp,evt,scrollbar);
                prop = option.temp.classList.contains('horizon') === true ? 'horizon' : 'vartical';
                item = scrollbar[prop];
                switch(prop){
                case 'horizon':
                    item.left = scrollbar.horizon.x;
                    item.dx = 0;
                    item.mx = 0;
                    item.deltaX = 0;
                break;
                case 'vartical' :
                    item.top = scrollbar.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]);
            }
        }
    },
    'searchDraw' : {
        value: function(){
        var container = this.container;
        var content = container.content;
        var offsetHeight = content.offsetHeight;
        var bar = this.vartical.range;
        var lineHeight = container.content.style.lineHeight;
        var search = container.searchValue;
        var range = search.range;
        var can = this.childNodes.vartical;
        var ctx = can.getContext('2d');
        var r = this.vartical.r;
        var vp = 0;
            if(range > 0){
                ctx.save();
                vp = (search.offset)/((offsetHeight - lineHeight));
                ctx.fillStyle = 'black';
                ctx.fillRect(0,Math.floor(vp * (can.height - r*2) + r) - 1,can.width,3);
                for(var key in search.list){
                    vp = (search.list[key][0][2])/(offsetHeight - lineHeight);
                    ctx.fillStyle = 'magenta';
                    ctx.fillRect(0,Math.floor(vp * (can.height - r*2) + r),can.width,1);
                }
                ctx.restore();
            }
        }
    },
    '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 container = this.container;
        var content = container.content;
        var selection = container.selection;
        var search = container.searchValue;
        var lineHeight = container.content.style.lineHeight;
        
        var end = selection.end;
        var index = container.canvasList.index;
        var txt = container.canvasList.text;
        var len = end.length - 1;
            end = end[len];
        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 = content.indexWidth;
            var styleX = (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 > selection.temp.textWidth + 40){
                    case true :
                        switch(selection.temp.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 = 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.floor(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 element = container.element;
        var width = element.clientWidth;
        var height = element.clientHeight;
        var content = container.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(){
        var elem = this.container.element;
            elem.addEventListener('mousedown', this.getEvent(this.childNodes.EVENTS.ContainerDown, this), false);
            elem.addEventListener('wheel', this.getEvent(this.childNodes.EVENTS.ContainerWheel, this), false);
            return this;
        }
    },
    'addEvent' : {
        value : function(prop,fnc,flag){
        }
    },
    'entry' : {
        value: function(container){
        var elem = container.element;
            this.container = container;
            this.push(elem);
            elem.insertBefore(this.childNodes.horizon,elem.firstChild);
            elem.insertBefore(this.childNodes.vartical,elem.firstChild);
            elem.insertBefore(this.childNodes.map,elem.firstChild);
            this.resize();
            this.draw('horizon', null);
            this.draw('vartical', null);
            this.attachEvent();
            return this;
        }
    },
    'ctx' : {
        value: 
        function(ctx, dtx){
            for(var key in dtx){
                ctx[key] = dtx[key];
            }
        }
    },
    'Type' : { value: 'ScrollBar' },
    'Name' : { value: 'Custom_ScrollBar' }
});

/* _______________________________ Content.prototype _______________________________ */
UI.prototype.TextArea.prototype.Content.prototype = Object.create(UI.prototype.Content.prototype,{
    'indexWidth' : {
        //set : function(n) { this._indexWidth = n; },
        get : function() {
            return this.element.querySelector('div.container[data-custom_UI] > div.content > div.textbox').offsetLeft;
        },
        configurable: true
    },
    '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_Content' },
    'Name' : { value: 'Custom_TextArea' }
});

/* _______________________________ NodeList.prototype _______________________________ */
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' }
});

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,{
    'font' : {
        set : function(n) {
            this._font = n;
        },
        get : function() {
            return this._font;
        },
        configurable: true
    },
    'lineHeight' : {
        set : function(n) {
            this._lineHeight = n;
        },
        get : function() {
            return this._lineHeight;
        },
        configurable: true
    },
    'left' : {
        set : function(n) {
            this._left = n;
            this.parent.content.scrollLeft = n;
            this.parent.draw();
        },
        get : function() {
            return this._left;
        },
        configurable: true
    },
    'top' : {
        set : function(n) {
            //this._top = Math.round(n);
            this._top = (n);
            this.parent.content.scrollTop = n;
            this.parent.draw();
        },
        get : function() {
            return this._top;
        },
        configurable: true
    },
    'Type' : { value: 'UI_TextArea_Style' },
    'Name' : { value: 'UI_TextArea_Style' }
});

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

Console