class tabStrip{
	constructor(){
		this.container=[];
		this.content=document.createElement("div");
		this.content.style.position="relative";
		this.content.style.width="100%";
		this.content.style.height="22px";
		this.content.addEventListener("click",()=>{
			for(let i=0;i<this.container.length;i++){
				if(this.container[i].paper)this.container[i].paper.content.style.display="none";
			}
		},true);
		this.tagWidth=290;
		document.addEventListener("mouseup",this.render.bind(this));
	}
	addTag(tag){
		tag.setX(this.tagWidth*(this.container.length));
		this.container.push(tag);
		this.content.appendChild(tag.content);
	}
	render(){
		for(let i=0;i<this.container.length-1;i++){
			for(let j=0;j<this.container.length-i-1;j++){
				if(this.container[j].x+this.tagWidth/2>this.container[j+1].x){
					let temp=this.container[j];
					this.container[j]=this.container[j+1];
					this.container[j+1]=temp;
				}
			}
		}
		if(this.container[0].x+this.tagWidth/2>this.container[0+1].x){
			let temp=this.container[0];
			this.container[0]=this.container[0+1];
			this.container[0+1]=temp;
		}
		for(let i=0;i<this.container.length;i++){
			this.container[i].content.style.transition="left 200ms linear";
			this.container[i].setX(i*this.tagWidth);
		}
	}
}

class tabTag{
	constructor(tabname="New Tab",paper=null){
		this.paper=paper;
		this.x=0;
		this.content=document.createElement('div');
		this.content.onselectstart=function(){return false;}
		this.content.innerHTML=tabname;
		this.content.style.backgroundColor="#252525";
		this.content.style.border="1px solid #000";
		this.content.style.borderTop="1px solid #474747";
		this.content.style.color="#CCCCCC";
		this.content.style.paddingTop="2px";
		this.content.style.paddingLeft="8px";
		this.content.style.width="280px";
		this.content.style.position="absolute";
		this.content.addEventListener("click",()=>{
			if(this.paper)this.paper.content.style.display="inline";
		},true);
		this.content.addEventListener("mousedown",this.startDrag.bind(this));
		this.moveTag=(e)=>{
			this.setX(this.x+e.screenX-this.mx);
			this.mx=e.screenX;
		}
	}
	setX(x){
		this.content.style.left=x+"px";
		this.x=x;
	}
	bindPaper(paper){
		this.paper=paper;
	}
	startDrag(e){
		this.mx=e.screenX;
		this.content.style.zIndex=999;
		this.content.style.transition="none";
		document.addEventListener("mousemove",this.moveTag);
		document.addEventListener("mouseup",()=>{
			this.content.style.zIndex=1;
			document.removeEventListener("mousemove",this.moveTag);
		});
	}
	
}

@@ -1494,21 +1494,41 @@
 ontent.s
-tyle.
+etAttribute(%22style%22,%60%0A%09%09%09
 backgrou
@@ -1533,54 +1533,28 @@
 ound
-Color=%22
+:
 #252525
-%22
 ;%0A%09%09
-this.content.style.
+%09
 border
-=%22
+:
 1px 
@@ -1567,43 +1567,24 @@
 #000
-%22
 ;%0A%09%09
-this.content.style.
+%09
 border
-Top=%22
+-top:
 1px 
@@ -1600,193 +1600,96 @@
 4747
-%22
 ;%0A%09%09
-this.content.style.
+%09
 color
-=%22
+:
 #CCCCCC
-%22
 ;%0A%09%09
-this.content.style.
+%09
 padding
-Top=%22
+-top:
 2px
-%22
 ;%0A%09%09
-this.content.style.
+%09
 padding
-Left=%22
+-left:
 8px
-%22
 ;%0A%09%09
-this.content.style.
+%09
 width
-=%22
+:
 280px
-%22
 ;%0A%09%09
-this.content.style.
+%09
 position
 =%22ab
@@ -1688,18 +1688,17 @@
 tion
-=%22
+:
 absolute
 %22;%0A%09
@@ -1693,17 +1693,22 @@
 absolute
-%22
+;%0A%09%09%60)
 ;%0A%09%09this

change the way to write style