var Ioeof=(function(){var that=this;this.margin=0;this.selector='.Ioeof';this.callback=null;
    this.config=function(selector,margin){if(selector)this.selector=selector;if(margin){this.margin=margin;var l=document.querySelectorAll(String(this.selector)+'>.IoeofTab');for(var i=l.length-1;i>=0;i--)l[i].style.margin='0 '+String(this.margin)+'px';}return this;};
    this.center=function(width){var e=(width)?Math.round((document.querySelector(this.selector).getBoundingClientRect().width-width-this.margin*2)/2):0;var l=document.querySelectorAll(String(this.selector)+'>.IoeofEdge>div');for(var i=l.length-1;i>=0;i--)l[i].style.width=String(e)+'px';return this;};
    this.handler=function(){var l=document.querySelectorAll(String(that.selector)+'>.IoeofTab.active');for(var i=l.length-1;i>=0;i--)l[i].classList.remove('active');var dom=this;dom.classList.add('active');if(that.callback)try{that.callback(dom,dom.dataset['index'],that);}catch(e){}};
    this.onclick=function(callback){this.callback=callback;var l=document.querySelectorAll(String(this.selector)+'>.IoeofTab');for(var i=l.length-1;i>=0;i--){l[i].dataset['index']=i;l[i].onclick=this.handler;}return this;};
    this.mobile=function(){return navigator.userAgent.toLowerCase().indexOf('mobile')>0;};
    this.focus=function(index){index=parseInt(index);if(isNaN(index))return null;if(index<0)return null;var l=document.querySelectorAll(String(this.selector)+'>.IoeofTab');if(index>=l.length)return null;var ioeof=document.querySelector(this.selector);var dom=l[index];var w=ioeof.getBoundingClientRect().width;var v=dom.getBoundingClientRect().width;var l=ioeof.scrollLeft;var e=dom.offsetLeft;if(!((e>=l)&&(e+v<=l+w)))ioeof.scrollLeft=Math.round(e+v/2-w/2);return dom;};
    this.click=function(index){var dom=this.focus(index);if(!dom)return null;this.handler.apply(dom);return dom;};
    this.count=function(){return document.querySelectorAll(String(this.selector)+'>.IoeofTab').length;};
    this.draggable=function(){if(this.mobile())return this;var ioeof=document.querySelector(this.selector);ioeof.onmousedown=function(e){ioeof.classList.add('dragging');ioeof.dataset['dragstart']=e.pageX-ioeof.offsetLeft;ioeof.dataset['dragscroll']=ioeof.scrollLeft;};ioeof.onmousemove=function(e){if(!ioeof.classList.contains('dragging'))return;e.preventDefault();ioeof.scrollLeft=ioeof.dataset['dragscroll']-(e.pageX-ioeof.offsetLeft-ioeof.dataset['dragstart'])*1;};ioeof.onmouseup=function(e){ioeof.classList.remove('dragging');};ioeof.onmouseleave=function(e){ioeof.classList.remove('dragging');};return this;};
});

var ioeof=new Ioeof().config('#IoeofTest'/*Selector*/,6/*Tab Margin Width*/)
    .draggable()/*if you need Horizontal Drag Scrolling*/
    .onclick(function(tab,index,self){
        /*tab click event*/
        document.querySelector('#ClickTest').innerHTML='#'+String(index)+' tab is activated : <b>'+tab.textContent+'</b>';
    });
/*ioeof.center(960);/*if you need to set a center width*/
if(ioeof.count())ioeof.click(0);/*manual click tab*/