w5BRHZ9a

1//tip: use Ctrl+A to select the whole text.
2// $.getScript("https://pastebin.com/raw/D5d8ADME", function() {});
3
4//AnonProMod v1.6
5
6 window.onerror = function (msg, url, line) {
7	if (!url.includes('anondraw.min.js')){
8		 anondraw.collab.chat.addMessage('WARNING!',"Error: " + msg + ". Line: " + line); 
9//alert("WARNING! Error: " + msg + " URL: " + url + " Line: " + line);	
10       //        alert("Message : " + msg + " Url : " + url + " Line number : " + line);
11	}
12}
13
14if (document.readyState === "complete" || document.readyState === "loaded") {
15var perspective = 0;
16var mycolor = 0;
17var bgurl;
18var bgscreen;
19window.alert_attach = 0;
20window.alert_perspective = 0;
21window.alert_aka = 0;
22window.alert_textart = 0;
23window.originalzoom = 1;
24window.forcechatfocus = 0;
25
26var storedchatfocus = localStorage.getItem("storedchatfocus");
27if (!storedchatfocus) {
28window.forcechatfocus = 0;
29} else {
30window.forcechatfocus = storedchatfocus;
31}
32
33var joiners = localStorage.getItem("joiners");
34if (!joiners) {
35window.joiners = "";
36} else {
37window.joiners = joiners;	
38}
39	//anondraw.collab.chat.addMessage('### AnonProMod v1.0 ###'); 	   
40	 //anondraw.collab.chat.addMessage('AnonProMod',"You're free to edit the code but please don't remove or edit the numbers from the name."); 
41	 
42	// 	  	anondraw.collab.chat.addMessage('### NEW HERE? ###'); 
43//anondraw.collab.chat.addMessage('Send /commands to see its list.');			
44// anondraw.collab.chat.addMessage('NEW HERE?','Send /tips for extra info.');	 
45	  anondraw.collab.chat.addMessage('Chat','Up/down arrow keys to chat history. Right click on name to call it.');  
46	  anondraw.collab.chat.addMessage('Pseudo layer',"Tiny camera button captures a sketch screenshot. Let it as background on the big camera button and paint over it in a transparent zone.");
47	  
48	  anondraw.collab.chat.addMessage('Persp. tool','Activate the aim-cross and use the grab tool to move the aim. Click on the target button to set a spot. Once they are set, use the line tool to draw and Q, W, E keys to switch spots.');
49	  
50	  	  anondraw.collab.chat.addMessage('Ref. pic','click and drag to move, mouse wheel to resize, right click to delete.');
51	  
52anondraw.collab.chat.addMessage('Old features','/nick /pm /rooms /logout /tilemap /discord /buttons /animation ');
53
54anondraw.collab.chat.addMessage('Chat',"Send /chatfocus to stop your chat from triggering canvas shortcuts. Use /left and /right to change it's position.");
55
56	//  	anondraw.collab.chat.addMessage('### WARNING! ###'); 	   
57	// anondraw.collab.chat.addMessage('WARNING!',"When you see 'social media buttons' it means the mod didn't load correctly. If it happens, please refresh and retry."); 
58	 
59
60
61//remove every top button except 'settings', adding a id for it
62document.getElementsByClassName("drawtogether-control-container")[0].removeChild(document.getElementsByClassName("drawtogether-control-container")[0].childNodes[7]);
63document.getElementsByClassName("drawtogether-control-container")[0].removeChild(document.getElementsByClassName("drawtogether-control-container")[0].childNodes[6]);
64document.getElementsByClassName("drawtogether-control-container")[0].removeChild(document.getElementsByClassName("drawtogether-control-container")[0].childNodes[5]);
65document.getElementsByClassName("drawtogether-control-container")[0].removeChild(document.getElementsByClassName("drawtogether-control-container")[0].childNodes[4]);
66
67document.getElementsByClassName("drawtogether-control-container")[0].childNodes[3].id = "settingsbtn";
68
69document.getElementsByClassName("drawtogether-control-container")[0].removeChild(document.getElementsByClassName("drawtogether-control-container")[0].childNodes[2]);
70document.getElementsByClassName("drawtogether-control-container")[0].removeChild(document.getElementsByClassName("drawtogether-control-container")[0].childNodes[1]);
71document.getElementsByClassName("drawtogether-control-container")[0].removeChild(document.getElementsByClassName("drawtogether-control-container")[0].childNodes[0]);
72
73
74//change bg color
75document.getElementsByClassName("drawtogether-control-container")[0].style.background = "rgb(35, 52, 69)";
76document.getElementsByClassName("control-container")[0].style.background = "rgb(35, 52, 69)";
77//document.getElementsByClassName("mouse-coords")[0].style.background = "rgb(35, 52, 69)";
78
79//resize slider
80document.getElementsByClassName("control-integer")[0].childNodes[2].style.maxWidth = "8.2rem";
81
82
83document.head.insertAdjacentHTML('beforeend','<style>.drawtogether-control-container .control-button {vertical-align: top !important; line-height:2.2rem !important}</style>');
84
85//remove 3 buttons from bottom menu
86document.getElementsByClassName("mouse-coords")[0].removeChild(document.getElementsByClassName("mouse-coords")[0].childNodes[10]);
87document.getElementsByClassName("mouse-coords")[0].removeChild(document.getElementsByClassName("mouse-coords")[0].childNodes[9]);
88document.getElementsByClassName("mouse-coords")[0].removeChild(document.getElementsByClassName("mouse-coords")[0].childNodes[8]);
89
90
91//adding ids to bottom menu buttons
92document.getElementsByClassName("mouse-coords")[0].childNodes[7].id = "regionsbtn"
93document.getElementsByClassName("mouse-coords")[0].childNodes[6].id = "favoritesbtn"
94document.getElementsByClassName("mouse-coords")[0].childNodes[5].id = "spawnbtn"
95document.getElementsByClassName("mouse-coords")[0].childNodes[4].id = "randombtn"
96
97
98document.getElementsByClassName("control-integer-input")[0].id = 'thesizeslider';
99
100
101//remove ink container
102document.getElementsByClassName("drawtogether-ink-container")[0].parentNode.removeChild(document.getElementsByClassName("drawtogether-ink-container")[0]);
103
104
105//spread top container
106document.getElementsByClassName("drawtogether-info-container")[0].style.top = "3rem";
107document.getElementsByClassName("drawtogether-control-container")[0].style.width = "100%";
108
109
110//let settings shorter
111document.getElementById("settingsbtn").innerHTML = "⚙️";
112
113
114//move chat to left
115document.getElementsByClassName("drawtogether-info-container")[0].style.right = "auto";
116document.getElementsByClassName("drawtogether-info-container")[0].style.left = "0";
117document.getElementsByClassName("drawtogether-chat-container")[0].style.right = "auto";
118document.getElementsByClassName("drawtogether-chat-container")[0].style.left = "0";
119document.getElementsByClassName("drawtogether-paint-container")[0].style.left = "auto";
120document.getElementsByClassName("drawtogether-paint-container")[0].style.right = "0";
121
122
123//place a new background under all canvases
124document.getElementsByClassName("paint-canvas-background")[0].style.backgroundImage = "";
125document.getElementsByClassName("paint-canvas-background")[0].style.background = "transparent";
126
127  var wallpapercontainer = document.createElement("DIV");
128  wallpapercontainer.style.width = '100%';
129  wallpapercontainer.style.height = '100%';
130
131wallpapercontainer.style.backgroundImage = "url(images/transparent.png)";
132wallpapercontainer.style.backgroundSize = anondraw.collab.paint.public.zoom * 12.45 + "%";
133wallpapercontainer.style.backgroundPosition="center center"; 
134
135  wallpapercontainer.style.margin = '0';
136  wallpapercontainer.style.padding = '0';
137  wallpapercontainer.style.overflow = 'hidden';
138  wallpapercontainer.style.border = '0';
139   wallpapercontainer.style.position = 'absolute';
140  wallpapercontainer.style.zIndex = '0';
141  wallpapercontainer.style.pointerEvents = 'none';
142  wallpapercontainer.id = 'wallpapercontainer';  
143  var body = document.getElementsByClassName("drawtogether-paint-container")[0];
144  body.insertBefore(wallpapercontainer, body.childNodes[0]);
145  
146  
147
148//add light lightbutton
149var lightstate;
150var lightbutton = document.createElement("button");
151lightbutton.innerHTML = "?";
152lightbutton.id = "lightbtn";
153
154lightbutton.style.backgroundColor = "transparent";
155lightbutton.style.width = "34px";
156lightbutton.style.bottom = "0";
157lightbutton.style.right = "34px";
158lightbutton.style.top = "auto !important";
159lightbutton.style.position = "absolute";
160lightbutton.style.textAlign = "center";
161lightbutton.style.zIndex = "999";
162
163lightbutton.className = "x-button"
164
165var body = document.getElementsByClassName("drawtogether-paint-container")[0];
166body.appendChild(lightbutton);
167lightbutton.addEventListener ("click", function() {
168if (lightstate == 1){
169document.getElementById("wallpapercontainer").style.backgroundImage = "url(images/transparent.png)";
170document.getElementById("wallpapercontainer").style.backgroundSize = anondraw.collab.paint.public.zoom * 12.45 + "%";
171window.lightstate = 0;
172lightbutton.classList.remove("activated");
173} else {
174document.getElementById("wallpapercontainer").style.backgroundImage = "";
175document.getElementById("wallpapercontainer").style.background = "transparent";
176document.getElementById("wallpapercontainer").style.backgroundSize = anondraw.collab.paint.public.zoom * 100 + "%";
177window.lightstate = 1;
178lightbutton.classList.add("activated");
179document.getElementById("bglinkbtn").classList.remove("activated");
180document.getElementById("photobtn").classList.remove("activated");
181window.photostate = 0;
182window.bglinkstate = 0;
183}
184});
185
186
187
188//hide chat button
189var chatstate;
190var cbutton = document.createElement("button");
191cbutton.innerHTML = "?";
192cbutton.id = "chatbtn";
193cbutton.className = "control-button activated"
194var body = document.getElementsByClassName("drawtogether-control-container")[0];
195body.insertBefore(cbutton, body.childNodes[1]);
196cbutton.addEventListener ("click", function() {
197if (chatstate == 1){
198window.chatstate = 0;
199cbutton.classList.add("activated");
200
201document.getElementsByClassName("drawtogether-chat-container")[0].style.display = "block";
202
203if (!isminimized && !document.getElementById("ghostbtn").classList.contains('activated')){
204document.getElementsByClassName("drawtogether-info-container")[0].style.display = "block";	
205document.getElementsByClassName("drawtogether-paint-container")[0].style.width= "calc(100% - 20rem)";
206anondraw.collab.paint.resize();
207} else {
208if (document.getElementById("namesdisplaybtn").classList.contains('activated')) {
209document.getElementsByClassName("drawtogether-info-container")[0].style.display = "block";
210}	
211}	
212anondraw.collab.updatePlayerList()
213} else {
214window.chatstate = 1;
215cbutton.classList.remove("activated");
216document.getElementById('emolist').style.display = "none";
217document.getElementById('emojilist').style.display = "none";
218window.emostate = 0;
219emobutton.classList.remove("activated");
220window.emojistate = 0;
221emojibutton.classList.remove("activated");
222document.getElementsByClassName("drawtogether-info-container")[0].style.display = "none";
223document.getElementsByClassName("drawtogether-chat-container")[0].style.display = "none";
224document.getElementsByClassName("drawtogether-paint-container")[0].style.width= "100%";
225anondraw.collab.paint.resize();
226}
227});
228
229//add vars for timezone and color
230var everynumber = ['₀₀₀', '₀₁₀', '₀₂₀', '₀₃₀', '₀₄₀', '₀₅₀', '₀₆₀', '₀₇₀', '₀₈₀', '₀₉₀', '₁₀₀', '₁₁₀', '₁₂₀', '₁₃₀', '₁₄₀', '₁₅₀', '₁₆₀', '₁₇₀', '₁₈₀', '₁₉₀', '₂₀₀', '₂₁₀', '₂₂₀', '₂₃₀', '₂₄₀', '₂₅₀', '₂₆₀', '₂₇₀', '₂₈₀', '₂₉₀', '₃₀₀', '₃₁₀', '₃₂₀', '₃₃₀', '₃₄₀', '₃₅₀', '₃₆₀', '₃₇₀', '₃₈₀', '₃₉₀', '₄₀₀', '₄₁₀', '₄₂₀', '₄₃₀', '₄₄₀', '₄₅₀', '₄₆₀', '₄₇₀', '₄₈₀', '₄₉₀', '₅₀₀', '₅₁₀', '₅₂₀', '₅₃₀', '₅₄₀', '₅₅₀', '₅₆₀', '₅₇₀', '₅₈₀', '₅₉₀', '₆₀₀', '₆₁₀', '₆₂₀', '₆₃₀', '₆₄₀', '₆₅₀', '₆₆₀', '₆₇₀', '₆₈₀', '₆₉₀', '₇₀₀', '₇₁₀', '₇₂₀', '₇₃₀', '₇₄₀', '₇₅₀', '₇₆₀', '₇₇₀', '₇₈₀', '₇₉₀', '₈₀₀', '₈₁₀', '₈₂₀', '₈₃₀', '₈₄₀', '₈₅₀', '₈₆₀', '₈₇₀', '₈₈₀', '₈₉₀', '₉₀₀', '₉₁₀', '₉₂₀', '₉₃₀', '₉₄₀', '₉₅₀', '₉₆₀', '₉₇₀', '₉₈₀', '₉₉₀', '₀₀₁', '₀₁₁', '₀₂₁', '₀₃₁', '₀₄₁', '₀₅₁', '₀₆₁', '₀₇₁', '₀₈₁', '₀₉₁', '₁₀₁', '₁₁₁', '₁₂₁', '₁₃₁', '₁₄₁', '₁₅₁', '₁₆₁', '₁₇₁', '₁₈₁', '₁₉₁', '₂₀₁', '₂₁₁', '₂₂₁', '₂₃₁', '₂₄₁', '₂₅₁', '₂₆₁', '₂₇₁', '₂₈₁', '₂₉₁', '₃₀₁', '₃₁₁', '₃₂₁', '₃₃₁', '₃₄₁', '₃₅₁', '₃₆₁', '₃₇₁', '₃₈₁', '₃₉₁', '₄₀₁', '₄₁₁', '₄₂₁', '₄₃₁', '₄₄₁', '₄₅₁', '₄₆₁', '₄₇₁', '₄₈₁', '₄₉₁', '₅₀₁', '₅₁₁', '₅₂₁', '₅₃₁', '₅₄₁', '₅₅₁', '₅₆₁', '₅₇₁', '₅₈₁', '₅₉₁', '₆₀₁', '₆₁₁', '₆₂₁', '₆₃₁', '₆₄₁', '₆₅₁', '₆₆₁', '₆₇₁', '₆₈₁', '₆₉₁', '₇₀₁', '₇₁₁', '₇₂₁', '₇₃₁', '₇₄₁', '₇₅₁', '₇₆₁', '₇₇₁', '₇₈₁', '₇₉₁', '₈₀₁', '₈₁₁', '₈₂₁', '₈₃₁', '₈₄₁', '₈₅₁', '₈₆₁', '₈₇₁', '₈₈₁', '₈₉₁', '₉₀₁', '₉₁₁', '₉₂₁', '₉₃₁', '₉₄₁', '₉₅₁', '₉₆₁', '₉₇₁', '₉₈₁', '₉₉₁', '₀₀₂', '₀₁₂', '₀₂₂', '₀₃₂', '₀₄₂', '₀₅₂', '₀₆₂', '₀₇₂', '₀₈₂', '₀₉₂', '₁₀₂', '₁₁₂', '₁₂₂', '₁₃₂', '₁₄₂', '₁₅₂', '₁₆₂', '₁₇₂', '₁₈₂', '₁₉₂', '₂₀₂', '₂₁₂', '₂₂₂', '₂₃₂', '₂₄₂', '₂₅₂', '₂₆₂', '₂₇₂', '₂₈₂', '₂₉₂', '₃₀₂', '₃₁₂', '₃₂₂', '₃₃₂', '₃₄₂', '₃₅₂', '₃₆₂', '₃₇₂', '₃₈₂', '₃₉₂', '₄₀₂', '₄₁₂', '₄₂₂', '₄₃₂', '₄₄₂', '₄₅₂', '₄₆₂', '₄₇₂', '₄₈₂', '₄₉₂', '₅₀₂', '₅₁₂', '₅₂₂', '₅₃₂', '₅₄₂', '₅₅₂', '₅₆₂', '₅₇₂', '₅₈₂', '₅₉₂', '₆₀₂', '₆₁₂', '₆₂₂', '₆₃₂', '₆₄₂', '₆₅₂', '₆₆₂', '₆₇₂', '₆₈₂', '₆₉₂', '₇₀₂', '₇₁₂', '₇₂₂', '₇₃₂', '₇₄₂', '₇₅₂', '₇₆₂', '₇₇₂', '₇₈₂', '₇₉₂', '₈₀₂', '₈₁₂', '₈₂₂', '₈₃₂', '₈₄₂', '₈₅₂', '₈₆₂', '₈₇₂', '₈₈₂', '₈₉₂', '₉₀₂', '₉₁₂', '₉₂₂', '₉₃₂', '₉₄₂', '₉₅₂', '₉₆₂', '₉₇₂', '₉₈₂', '₉₉₂', '₀₀₃', '₀₁₃', '₀₂₃', '₀₃₃', '₀₄₃', '₀₅₃', '₀₆₃', '₀₇₃', '₀₈₃', '₀₉₃', '₁₀₃', '₁₁₃', '₁₂₃', '₁₃₃', '₁₄₃', '₁₅₃', '₁₆₃', '₁₇₃', '₁₈₃', '₁₉₃', '₂₀₃', '₂₁₃', '₂₂₃', '₂₃₃', '₂₄₃', '₂₅₃', '₂₆₃', '₂₇₃', '₂₈₃', '₂₉₃', '₃₀₃', '₃₁₃', '₃₂₃', '₃₃₃', '₃₄₃', '₃₅₃', '₃₆₃', '₃₇₃', '₃₈₃', '₃₉₃', '₄₀₃', '₄₁₃', '₄₂₃', '₄₃₃', '₄₄₃', '₄₅₃', '₄₆₃', '₄₇₃', '₄₈₃', '₄₉₃', '₅₀₃', '₅₁₃', '₅₂₃', '₅₃₃', '₅₄₃', '₅₅₃', '₅₆₃', '₅₇₃', '₅₈₃', '₅₉₃', '₆₀₃', '₆₁₃', '₆₂₃', '₆₃₃', '₆₄₃', '₆₅₃', '₆₆₃', '₆₇₃', '₆₈₃', '₆₉₃', '₇₀₃', '₇₁₃', '₇₂₃', '₇₃₃', '₇₄₃', '₇₅₃', '₇₆₃', '₇₇₃', '₇₈₃', '₇₉₃', '₈₀₃', '₈₁₃', '₈₂₃', '₈₃₃', '₈₄₃', '₈₅₃', '₈₆₃', '₈₇₃', '₈₈₃', '₈₉₃', '₉₀₃', '₉₁₃', '₉₂₃', '₉₃₃', '₉₄₃', '₉₅₃', '₉₆₃', '₉₇₃', '₉₈₃', '₉₉₃', '₀₀₄', '₀₁₄', '₀₂₄', '₀₃₄', '₀₄₄', '₀₅₄', '₀₆₄', '₀₇₄', '₀₈₄', '₀₉₄', '₁₀₄', '₁₁₄', '₁₂₄', '₁₃₄', '₁₄₄', '₁₅₄', '₁₆₄', '₁₇₄', '₁₈₄', '₁₉₄', '₂₀₄', '₂₁₄', '₂₂₄', '₂₃₄', '₂₄₄', '₂₅₄', '₂₆₄', '₂₇₄', '₂₈₄', '₂₉₄', '₃₀₄', '₃₁₄', '₃₂₄', '₃₃₄', '₃₄₄', '₃₅₄', '₃₆₄', '₃₇₄', '₃₈₄', '₃₉₄', '₄₀₄', '₄₁₄', '₄₂₄', '₄₃₄', '₄₄₄', '₄₅₄', '₄₆₄', '₄₇₄', '₄₈₄', '₄₉₄', '₅₀₄', '₅₁₄', '₅₂₄', '₅₃₄', '₅₄₄', '₅₅₄', '₅₆₄', '₅₇₄', '₅₈₄', '₅₉₄', '₆₀₄', '₆₁₄', '₆₂₄', '₆₃₄', '₆₄₄', '₆₅₄', '₆₆₄', '₆₇₄', '₆₈₄', '₆₉₄', '₇₀₄', '₇₁₄', '₇₂₄', '₇₃₄', '₇₄₄', '₇₅₄', '₇₆₄', '₇₇₄', '₇₈₄', '₇₉₄', '₈₀₄', '₈₁₄', '₈₂₄', '₈₃₄', '₈₄₄', '₈₅₄', '₈₆₄', '₈₇₄', '₈₈₄', '₈₉₄', '₉₀₄', '₉₁₄', '₉₂₄', '₉₃₄', '₉₄₄', '₉₅₄', '₉₆₄', '₉₇₄', '₉₈₄', '₉₉₄', '₀₀₅', '₀₁₅', '₀₂₅', '₀₃₅', '₀₄₅', '₀₅₅', '₀₆₅', '₀₇₅', '₀₈₅', '₀₉₅', '₁₀₅', '₁₁₅', '₁₂₅', '₁₃₅', '₁₄₅', '₁₅₅', '₁₆₅', '₁₇₅', '₁₈₅', '₁₉₅', '₂₀₅', '₂₁₅', '₂₂₅', '₂₃₅', '₂₄₅', '₂₅₅', '₂₆₅', '₂₇₅', '₂₈₅', '₂₉₅', '₃₀₅', '₃₁₅', '₃₂₅', '₃₃₅', '₃₄₅', '₃₅₅', '₃₆₅', '₃₇₅', '₃₈₅', '₃₉₅', '₄₀₅', '₄₁₅', '₄₂₅', '₄₃₅', '₄₄₅', '₄₅₅', '₄₆₅', '₄₇₅', '₄₈₅', '₄₉₅', '₅₀₅', '₅₁₅', '₅₂₅', '₅₃₅', '₅₄₅', '₅₅₅', '₅₆₅', '₅₇₅', '₅₈₅', '₅₉₅', '₆₀₅', '₆₁₅', '₆₂₅', '₆₃₅', '₆₄₅', '₆₅₅', '₆₆₅', '₆₇₅', '₆₈₅', '₆₉₅', '₇₀₅', '₇₁₅', '₇₂₅', '₇₃₅', '₇₄₅', '₇₅₅', '₇₆₅', '₇₇₅', '₇₈₅', '₇₉₅', '₈₀₅', '₈₁₅', '₈₂₅', '₈₃₅', '₈₄₅', '₈₅₅', '₈₆₅', '₈₇₅', '₈₈₅', '₈₉₅', '₉₀₅', '₉₁₅', '₉₂₅', '₉₃₅', '₉₄₅', '₉₅₅', '₉₆₅', '₉₇₅', '₉₈₅', '₉₉₅', '₀₀₆', '₀₁₆', '₀₂₆', '₀₃₆', '₀₄₆', '₀₅₆', '₀₆₆', '₀₇₆', '₀₈₆', '₀₉₆', '₁₀₆', '₁₁₆', '₁₂₆', '₁₃₆', '₁₄₆', '₁₅₆', '₁₆₆', '₁₇₆', '₁₈₆', '₁₉₆', '₂₀₆', '₂₁₆', '₂₂₆', '₂₃₆', '₂₄₆', '₂₅₆', '₂₆₆', '₂₇₆', '₂₈₆', '₂₉₆', '₃₀₆', '₃₁₆', '₃₂₆', '₃₃₆', '₃₄₆', '₃₅₆', '₃₆₆', '₃₇₆', '₃₈₆', '₃₉₆', '₄₀₆', '₄₁₆', '₄₂₆', '₄₃₆', '₄₄₆', '₄₅₆', '₄₆₆', '₄₇₆', '₄₈₆', '₄₉₆', '₅₀₆', '₅₁₆', '₅₂₆', '₅₃₆', '₅₄₆', '₅₅₆', '₅₆₆', '₅₇₆', '₅₈₆', '₅₉₆', '₆₀₆', '₆₁₆', '₆₂₆', '₆₃₆', '₆₄₆', '₆₅₆', '₆₆₆', '₆₇₆', '₆₈₆', '₆₉₆', '₇₀₆', '₇₁₆', '₇₂₆', '₇₃₆', '₇₄₆', '₇₅₆', '₇₆₆', '₇₇₆', '₇₈₆', '₇₉₆', '₈₀₆', '₈₁₆', '₈₂₆', '₈₃₆', '₈₄₆', '₈₅₆', '₈₆₆', '₈₇₆', '₈₈₆', '₈₉₆', '₉₀₆', '₉₁₆', '₉₂₆', '₉₃₆', '₉₄₆', '₉₅₆', '₉₆₆', '₉₇₆', '₉₈₆', '₉₉₆', '₀₀₇', '₀₁₇', '₀₂₇', '₀₃₇', '₀₄₇', '₀₅₇', '₀₆₇', '₀₇₇', '₀₈₇', '₀₉₇', '₁₀₇', '₁₁₇', '₁₂₇', '₁₃₇', '₁₄₇', '₁₅₇', '₁₆₇', '₁₇₇', '₁₈₇', '₁₉₇', '₂₀₇', '₂₁₇', '₂₂₇', '₂₃₇', '₂₄₇', '₂₅₇', '₂₆₇', '₂₇₇', '₂₈₇', '₂₉₇', '₃₀₇', '₃₁₇', '₃₂₇', '₃₃₇', '₃₄₇', '₃₅₇', '₃₆₇', '₃₇₇', '₃₈₇', '₃₉₇', '₄₀₇', '₄₁₇', '₄₂₇', '₄₃₇', '₄₄₇', '₄₅₇', '₄₆₇', '₄₇₇', '₄₈₇', '₄₉₇', '₅₀₇', '₅₁₇', '₅₂₇', '₅₃₇', '₅₄₇', '₅₅₇', '₅₆₇', '₅₇₇', '₅₈₇', '₅₉₇', '₆₀₇', '₆₁₇', '₆₂₇', '₆₃₇', '₆₄₇', '₆₅₇', '₆₆₇', '₆₇₇', '₆₈₇', '₆₉₇', '₇₀₇', '₇₁₇', '₇₂₇', '₇₃₇', '₇₄₇', '₇₅₇', '₇₆₇', '₇₇₇', '₇₈₇', '₇₉₇', '₈₀₇', '₈₁₇', '₈₂₇', '₈₃₇', '₈₄₇', '₈₅₇', '₈₆₇', '₈₇₇', '₈₈₇', '₈₉₇', '₉₀₇', '₉₁₇', '₉₂₇', '₉₃₇', '₉₄₇', '₉₅₇', '₉₆₇', '₉₇₇', '₉₈₇', '₉₉₇', '₀₀₈', '₀₁₈', '₀₂₈', '₀₃₈', '₀₄₈', '₀₅₈', '₀₆₈', '₀₇₈', '₀₈₈', '₀₉₈', '₁₀₈', '₁₁₈', '₁₂₈', '₁₃₈', '₁₄₈', '₁₅₈', '₁₆₈', '₁₇₈', '₁₈₈', '₁₉₈', '₂₀₈', '₂₁₈', '₂₂₈', '₂₃₈', '₂₄₈', '₂₅₈', '₂₆₈', '₂₇₈', '₂₈₈', '₂₉₈', '₃₀₈', '₃₁₈', '₃₂₈', '₃₃₈', '₃₄₈', '₃₅₈', '₃₆₈', '₃₇₈', '₃₈₈', '₃₉₈', '₄₀₈', '₄₁₈', '₄₂₈', '₄₃₈', '₄₄₈', '₄₅₈', '₄₆₈', '₄₇₈', '₄₈₈', '₄₉₈', '₅₀₈', '₅₁₈', '₅₂₈', '₅₃₈', '₅₄₈', '₅₅₈', '₅₆₈', '₅₇₈', '₅₈₈', '₅₉₈', '₆₀₈', '₆₁₈', '₆₂₈', '₆₃₈', '₆₄₈', '₆₅₈', '₆₆₈', '₆₇₈', '₆₈₈', '₆₉₈', '₇₀₈', '₇₁₈', '₇₂₈', '₇₃₈', '₇₄₈', '₇₅₈', '₇₆₈', '₇₇₈', '₇₈₈', '₇₉₈', '₈₀₈', '₈₁₈', '₈₂₈', '₈₃₈', '₈₄₈', '₈₅₈', '₈₆₈', '₈₇₈', '₈₈₈', '₈₉₈', '₉₀₈', '₉₁₈', '₉₂₈', '₉₃₈', '₉₄₈', '₉₅₈', '₉₆₈', '₉₇₈', '₉₈₈', '₉₉₈', '₀₀₉', '₀₁₉', '₀₂₉', '₀₃₉', '₀₄₉', '₀₅₉', '₀₆₉', '₀₇₉', '₀₈₉', '₀₉₉', '₁₀₉', '₁₁₉', '₁₂₉', '₁₃₉', '₁₄₉', '₁₅₉', '₁₆₉', '₁₇₉', '₁₈₉', '₁₉₉', '₂₀₉', '₂₁₉', '₂₂₉', '₂₃₉', '₂₄₉', '₂₅₉', '₂₆₉', '₂₇₉', '₂₈₉', '₂₉₉', '₃₀₉', '₃₁₉', '₃₂₉', '₃₃₉', '₃₄₉', '₃₅₉', '₃₆₉', '₃₇₉', '₃₈₉', '₃₉₉', '₄₀₉', '₄₁₉', '₄₂₉', '₄₃₉', '₄₄₉', '₄₅₉', '₄₆₉', '₄₇₉', '₄₈₉', '₄₉₉', '₅₀₉', '₅₁₉', '₅₂₉', '₅₃₉', '₅₄₉', '₅₅₉', '₅₆₉', '₅₇₉', '₅₈₉', '₅₉₉', '₆₀₉', '₆₁₉', '₆₂₉', '₆₃₉', '₆₄₉', '₆₅₉', '₆₆₉', '₆₇₉', '₆₈₉', '₆₉₉', '₇₀₉', '₇₁₉', '₇₂₉', '₇₃₉', '₇₄₉', '₇₅₉', '₇₆₉', '₇₇₉', '₇₈₉', '₇₉₉', '₈₀₉', '₈₁₉', '₈₂₉', '₈₃₉', '₈₄₉', '₈₅₉', '₈₆₉', '₈₇₉', '₈₈₉', '₈₉₉', '₉₀₉', '₉₁₉', '₉₂₉', '₉₃₉', '₉₄₉', '₉₅₉', '₉₆₉', '₉₇₉', '₉₈₉', '₉₉₉'];
231
232var d = new Date();
233mytimezone = d.getTimezoneOffset() /60;
234
235if (mytimezone == '0') {window.mytwodigit = '₀₀'} else if (mytimezone == '1') {window.mytwodigit = '₀₁'} else if (mytimezone == '2') {window.mytwodigit = '₀₂'} else if (mytimezone == '3') {window.mytwodigit = '₀₃'} else if (mytimezone == '4') {window.mytwodigit = '₀₄'} else if (mytimezone == '5') {window.mytwodigit = '₀₅'} else if (mytimezone == '6') {window.mytwodigit = '₀₆'} else if (mytimezone == '7') {window.mytwodigit = '₀₇'} else if (mytimezone == '8') {window.mytwodigit = '₀₈'} else if (mytimezone == '9') {window.mytwodigit = '₀₉'} else if (mytimezone == '10') {window.mytwodigit = '₁₀'} else if (mytimezone == '11') {window.mytwodigit = '₁₁'} else if (mytimezone == '12') {window.mytwodigit = '₁₂'} else if (mytimezone == '13') {window.mytwodigit = '₁₃'} else if (mytimezone == '14') {window.mytwodigit = '₁₄'} else if (mytimezone == '15') {window.mytwodigit = '₁₅'} else if (mytimezone == '16') {window.mytwodigit = '₁₆'} else if (mytimezone == '17') {window.mytwodigit = '₁₇'} else if (mytimezone == '18') {window.mytwodigit = '₁₈'} else if (mytimezone == '19') {window.mytwodigit = '₁₉'} else if (mytimezone == '20') {window.mytwodigit = '₂₀'} else if (mytimezone == '21') {window.mytwodigit = '₂₁'} else if (mytimezone == '22') {window.mytwodigit = '₂₂'} else if (mytimezone == '23') {window.mytwodigit = '₂₃'} else if (mytimezone == '24') {window.mytwodigit = '₂₄'} else if (mytimezone == '-1') {window.mytwodigit = '₂₅'} else if (mytimezone == '-2') {window.mytwodigit = '₂₆'} else if (mytimezone == '-3') {window.mytwodigit = '₂₇'} else if (mytimezone == '-4') {window.mytwodigit = '₂₈'} else if (mytimezone == '-5') {window.mytwodigit = '₂₉'} else if (mytimezone == '-6') {window.mytwodigit = '₃₀'} else if (mytimezone == '-7') {window.mytwodigit = '₃₁'} else if (mytimezone == '-8') {window.mytwodigit = '₃₂'} else if (mytimezone == '-9') {window.mytwodigit = '₃₃'} else if (mytimezone == '-10') {window.mytwodigit = '₃₄'} else if (mytimezone == '-11') {window.mytwodigit = '₃₅'} else if (mytimezone == '-12') {window.mytwodigit = '₃₆'} else if (mytimezone == '-13') {window.mytwodigit = '₃₇'} else if (mytimezone == '-14') {window.mytwodigit = '₃₈'} else if (mytimezone == '-15') {window.mytwodigit = '₃₉'} else if (mytimezone == '-16') {window.mytwodigit = '₄₀'} else if (mytimezone == '-17') {window.mytwodigit = '₄₁'} else if (mytimezone == '-18') {window.mytwodigit = '₄₂'} else if (mytimezone == '-19') {window.mytwodigit = '₄₃'} else if (mytimezone == '-20') {window.mytwodigit = '₄₄'} else if (mytimezone == '-21') {window.mytwodigit = '₄₅'} else if (mytimezone == '-22') {window.mytwodigit = '₄₆'} else if (mytimezone == '-23') {window.mytwodigit = '₄₇'} else if (mytimezone == '-24') {window.mytwodigit = '₄₈'} else if (mytimezone == '1.5') {window.mytwodigit = '₄₉'} else if (mytimezone == '2.5') {window.mytwodigit = '₅₀'} else if (mytimezone == '3.5') {window.mytwodigit = '₅₁'} else if (mytimezone == '4.5') {window.mytwodigit = '₅₂'} else if (mytimezone == '5.5') {window.mytwodigit = '₅₃'} else if (mytimezone == '6.5') {window.mytwodigit = '₅₄'} else if (mytimezone == '7.5') {window.mytwodigit = '₅₅'} else if (mytimezone == '8.5') {window.mytwodigit = '₅₆'} else if (mytimezone == '9.5') {window.mytwodigit = '₅₇'} else if (mytimezone == '10.5') {window.mytwodigit = '₅₈'} else if (mytimezone == '11.5') {window.mytwodigit = '₅₉'} else if (mytimezone == '12.5') {window.mytwodigit = '₆₀'} else if (mytimezone == '13.5') {window.mytwodigit = '₆₁'} else if (mytimezone == '14.5') {window.mytwodigit = '₆₂'} else if (mytimezone == '15.5') {window.mytwodigit = '₆₃'} else if (mytimezone == '16.5') {window.mytwodigit = '₆₄'} else if (mytimezone == '17.5') {window.mytwodigit = '₆₅'} else if (mytimezone == '18.5') {window.mytwodigit = '₆₆'} else if (mytimezone == '19.5') {window.mytwodigit = '₆₇'} else if (mytimezone == '20.5') {window.mytwodigit = '₆₈'} else if (mytimezone == '21.5') {window.mytwodigit = '₆₉'} else if (mytimezone == '22.5') {window.mytwodigit = '₇₀'} else if (mytimezone == '23.5') {window.mytwodigit = '₇₁'} else if (mytimezone == '24.5') {window.mytwodigit = '₇₂'} else if (mytimezone == '-1.5') {window.mytwodigit = '₇₃'} else if (mytimezone == '-2.5') {window.mytwodigit = '₇₄'} else if (mytimezone == '-3.5') {window.mytwodigit = '₇₅'} else if (mytimezone == '-4.5') {window.mytwodigit = '₇₆'} else if (mytimezone == '-5.5') {window.mytwodigit = '₇₇'} else if (mytimezone == '-6.5') {window.mytwodigit = '₇₈'} else if (mytimezone == '-7.5') {window.mytwodigit = '₇₉'} else if (mytimezone == '-8.5') {window.mytwodigit = '₈₀'} else if (mytimezone == '-9.5') {window.mytwodigit = '₈₁'} else if (mytimezone == '-10.5') {window.mytwodigit = '₈₂'} else if (mytimezone == '-11.5') {window.mytwodigit = '₈₃'} else if (mytimezone == '-12.5') {window.mytwodigit = '₈₄'} else if (mytimezone == '-13.5') {window.mytwodigit = '₈₅'} else if (mytimezone == '-14.5') {window.mytwodigit = '₈₆'} else if (mytimezone == '-15.5') {window.mytwodigit = '₈₇'} else if (mytimezone == '-16.5') {window.mytwodigit = '₈₈'} else if (mytimezone == '-17.5') {window.mytwodigit = '₈₉'} else if (mytimezone == '-18.5') {window.mytwodigit = '₉₀'} else if (mytimezone == '-19.5') {window.mytwodigit = '₉₁'} else if (mytimezone == '-20.5') {window.mytwodigit = '₉₂'} else if (mytimezone == '-21.5') {window.mytwodigit = '₉₃'} else if (mytimezone == '-22.5') {window.mytwodigit = '₉₄'} else if (mytimezone == '-23.5') {window.mytwodigit = '₉₅'} else if (mytimezone == '-24.5') {window.mytwodigit = '₉₆'} else {window.mytwodigit = '₉₉'};
236
237//add new nick changer also saves last messages to be called by arrow keys
238
239var persona = localStorage.getItem("drawtogether-name");
240var onedigit = persona.substring(persona.length - 1, persona.length);
241var twodigit = persona.substring(persona.length - 3, persona.length - 1);
242var threedigit = persona.substring(persona.length - 3, persona.length);
243
244if (persona) {
245if (!everynumber.includes(threedigit)) {
246var cutweight = persona.slice(0, 28);
247var newpersona = cutweight + " " + mytwodigit + '₀';
248anondraw.collab.changeName(newpersona);
249} else {
250window.onedigit = persona.substring(persona.length - 1, persona.length);
251window.twodigit = persona.substring(persona.length - 3, persona.length - 1);
252window.threedigit = persona.substring(persona.length - 3, persona.length);	
253window.mycolor =  persona.substring(persona.length - 1, persona.length);
254}
255} else {
256var onedigit = 'x';
257var twodigit = 'xx';
258var threedigit = 'xxx';
259}
260
261var chatbackup1="";
262var chatbackup2="";
263var chatbackup3="";
264
265anondraw.collab.chat.sendChat=function(){
266var lastestchatbackup = 3;	
267	 if (lastestchatbackup == 3) {
268		 window.chatbackup3 = chatbackup2;
269		 window.chatbackup2 = chatbackup1;
270window.chatbackup1 = document.getElementsByClassName('drawtogheter-chat-input')[0].value;
271 window.lastestchatbackup = 1;
272 } else if (lastestchatbackup == 1) {
273	 window.chatbackup3 = chatbackup2;
274	 window.chatbackup2 = chatbackup1; 
275window.chatbackup1 = document.getElementsByClassName('drawtogheter-chat-input')[0].value;
276 window.lastestchatbackup = 2;	 
277 }  else if (lastestchatbackup == 2) {
278window.chatbackup3 = chatbackup2;
279window.chatbackup2 = chatbackup1;
280window.chatbackup1 = document.getElementsByClassName('drawtogheter-chat-input')[0].value;
281 window.lastestchatbackup = 3;	 
282 }
283 
284 
285var persona = localStorage.getItem("drawtogether-name");
286var onedigit = persona.substring(persona.length - 1, persona.length);
287var twodigit = persona.substring(persona.length - 3, persona.length - 1);
288var threedigit = persona.substring(persona.length - 3, persona.length);
289
290if (persona) {
291if (!everynumber.includes(threedigit)) {
292var cutweight = persona.slice(0, 28);
293var newpersona = cutweight + " " + mytwodigit + '₀';
294anondraw.collab.changeName(newpersona);
295} else {
296window.onedigit = persona.substring(persona.length - 1, persona.length);
297window.twodigit = persona.substring(persona.length - 3, persona.length - 1);
298window.threedigit = persona.substring(persona.length - 3, persona.length);	
299window.mycolor =  persona.substring(persona.length - 1, persona.length);
300}
301} else {
302var onedigit = 'x';
303var twodigit = 'xx';
304var threedigit = 'xxx';
305}
306 
307	
308	var str = document.getElementsByClassName('drawtogheter-chat-input')[0].value;
309	var res = str.substring(0, 5);
310	if (res == "/nick" || res == "/NICK" || res == "/Nick") {
311str = str.slice(5);
312if (!everynumber.includes(threedigit)) {
313var cutweight = str.slice(0, 28);
314var newpersona = cutweight + " " + mytwodigit + '₀';
315} else {
316var cutweight = str.slice(0, 28);
317var newpersona = cutweight + " " + threedigit;
318} 
319anondraw.collab.changeName(newpersona);
320document.getElementsByClassName('drawtogheter-chat-input')[0].value = '';	
321return
322}
323	
324
325	var res = str.substring(0, 5);
326	if (res == "/left" || res == "/LEFT" || res == "/Left") {
327str = str.slice(5);
328document.getElementsByClassName("drawtogether-info-container")[0].style.right = "auto";
329document.getElementsByClassName("drawtogether-info-container")[0].style.left = "0";
330document.getElementsByClassName("drawtogether-chat-container")[0].style.right = "auto";
331document.getElementsByClassName("drawtogether-chat-container")[0].style.left = "0";
332document.getElementsByClassName("drawtogether-paint-container")[0].style.left = "auto";
333document.getElementsByClassName("drawtogether-paint-container")[0].style.right = "0";
334document.getElementById('emojilist').style.right = "auto";
335document.getElementById('emojilist').style.left = "0";
336document.getElementById('emolist').style.right = "auto";
337document.getElementById('emolist').style.left = "0";
338
339document.getElementById('bghorizontalpositionslider').style.right = "0";
340document.getElementById('bghorizontalpositionslider').style.left = "auto";
341document.getElementById('bgverticalpositionslider').style.right = "0";
342document.getElementById('bgverticalpositionslider').style.left = "auto";
343document.getElementById('canvasopacityslider').style.right = "0";
344document.getElementById('canvasopacityslider').style.left = "auto";
345document.getElementById('oldcanvasopacityslider').style.right = "0";
346document.getElementById('oldcanvasopacityslider').style.left = "auto";
347
348
349
350
351document.getElementById('crossbtn').style.right = "0";
352document.getElementById('crossbtn').style.left = "auto";
353document.getElementById('lightbtn').style.right = "34px";
354document.getElementById('lightbtn').style.left = "auto";
355document.getElementById('photobtn').style.right = "68px";
356document.getElementById('photobtn').style.left = "auto";
357document.getElementById('bglinkbtn').style.right = "102px";
358document.getElementById('bglinkbtn').style.left = "auto";
359
360document.getElementById('wide').style.right = "0";
361document.getElementById('wide').style.left = "auto";
362document.getElementById('wide').style.webkitTransform = 'scaleX(1)';
363document.getElementById('wide').style.transform = 'scaleX(1)';
364document.getElementById('upsidedownbtn').style.right = "32px";
365document.getElementById('upsidedownbtn').style.left = "auto";
366document.getElementById('mirrorbtn').style.right = "64px";
367document.getElementById('mirrorbtn').style.left = "auto";
368
369
370 localStorage.setItem("chatside", 'left');
371 anondraw.collab.paint.resize();
372
373document.getElementsByClassName('drawtogheter-chat-input')[0].value = '';		
374return
375}
376
377
378	var res = str.substring(0, 6);
379	if (res == "/right" || res == "/RIGHT" || res == "/Right") {
380str = str.slice(6);
381document.getElementsByClassName("drawtogether-info-container")[0].style.right = "0";
382document.getElementsByClassName("drawtogether-info-container")[0].style.left = "auto";
383document.getElementsByClassName("drawtogether-chat-container")[0].style.right = "0";
384document.getElementsByClassName("drawtogether-chat-container")[0].style.left = "auto";
385document.getElementsByClassName("drawtogether-paint-container")[0].style.left = "0";
386document.getElementsByClassName("drawtogether-paint-container")[0].style.right = "auto";
387document.getElementById('emojilist').style.right = "0";
388document.getElementById('emojilist').style.left = "auto";
389document.getElementById('emolist').style.right = "0";
390document.getElementById('emolist').style.left = "auto";
391
392document.getElementById('bghorizontalpositionslider').style.right = "auto";
393document.getElementById('bghorizontalpositionslider').style.left = "0";
394document.getElementById('bgverticalpositionslider').style.right = "auto";
395document.getElementById('bgverticalpositionslider').style.left = "0";
396document.getElementById('canvasopacityslider').style.right = "auto";
397document.getElementById('canvasopacityslider').style.left = "0";
398document.getElementById('oldcanvasopacityslider').style.right = "auto";
399document.getElementById('oldcanvasopacityslider').style.left = "0";
400
401
402document.getElementById('crossbtn').style.right = "auto";
403document.getElementById('crossbtn').style.left = "0";
404document.getElementById('lightbtn').style.right = "auto";
405document.getElementById('lightbtn').style.left = "34px";
406document.getElementById('photobtn').style.right = "auto";
407document.getElementById('photobtn').style.left = "68px";
408document.getElementById('bglinkbtn').style.right = "auto";
409document.getElementById('bglinkbtn').style.left = "102px";
410
411document.getElementById('wide').style.right = "auto";
412document.getElementById('wide').style.left = "0";
413document.getElementById('wide').style.webkitTransform = 'scaleX(-1)';
414document.getElementById('wide').style.transform = 'scaleX(-1)';
415document.getElementById('upsidedownbtn').style.right = "auto";
416document.getElementById('upsidedownbtn').style.left = "32px";
417document.getElementById('mirrorbtn').style.right = "auto";
418document.getElementById('mirrorbtn').style.left = "64px";
419
420
421localStorage.setItem("chatside", 'right');
422anondraw.collab.paint.resize();
423
424document.getElementsByClassName('drawtogheter-chat-input')[0].value = '';		
425return
426}
427	
428	
429	if (str == "/commands" || str == "/COMMANDS" || str == "/Commands") {	
430
431
432	   anondraw.collab.chat.addMessage('### OLD FEATURES: ###');	  
433	   anondraw.collab.chat.addMessage('/nick name (without the numbers)');
434	  anondraw.collab.chat.addMessage('/pm (opens private messages center)');  
435	  anondraw.collab.chat.addMessage('/rooms (opens menu to switch rooms)');	  
436	  anondraw.collab.chat.addMessage('/buttons (clickable buttons on/off)');	 	 
437	  anondraw.collab.chat.addMessage('/tilemap (opens tilemap)');	  
438	  anondraw.collab.chat.addMessage('/animation (opens animation menu)');	  	  
439	  anondraw.collab.chat.addMessage('/logout (closes the session)');
440	  
441	  	   anondraw.collab.chat.addMessage('### NEW FEATURES: ###');   
442	 	anondraw.collab.chat.addMessage('/aka name (notification trigger)');  
443	  anondraw.collab.chat.addMessage('/bgscreen (set screenshot bg image activated in the bottom right icon)');
444	   anondraw.collab.chat.addMessage('/bgurl http://site.com (set url bg image activated in the bottom right icon)');
445	   anondraw.collab.chat.addMessage('/bw (let canvas black & white)');	   
446	   anondraw.collab.chat.addMessage('/filter word (favs or regions list)');
447	   anondraw.collab.chat.addMessage("/here (set anchor button's target)");  
448
449document.getElementsByClassName('drawtogheter-chat-input')[0].value = '';		
450return	  
451	}
452	
453		if (str == "/tips" || str == "/TIPS" || str == "/Tips") {	
454/*
455	 	  anondraw.collab.chat.addMessage('### TIPS: ###'); 	   
456	  anondraw.collab.chat.addMessage('Use mouse scroll to zoom.'); 	 
457	  anondraw.collab.chat.addMessage('Use arrows to chat history.');
458	  anondraw.collab.chat.addMessage('### Perspective Tool: ###'); 
459	  anondraw.collab.chat.addMessage('Activate the aim cross in the bottom right corner for precision');
460	  anondraw.collab.chat.addMessage('Click on the target button to set a spot');
461	  anondraw.collab.chat.addMessage('Once the 3 spots are set, use the line tool to draw');
462	  anondraw.collab.chat.addMessage('Use these keyboard keys to switch the active spot: Q, W, E');
463*/
464	  anondraw.collab.chat.addMessage('TIPS:','Use mouse scroll to zoom. | Use arrows to chat history. | ');  
465	  anondraw.collab.chat.addMessage('Persp. Tool:','Activate the aim cross in the bottom right corner for precision. Click on the target button to set a spot. Once the 3 spots are set, use the line tool to draw. Use these keyboard keys to switch the active spot: Q, W, E');
466
467document.getElementsByClassName('drawtogheter-chat-input')[0].value = '';		
468return	  
469	}
470
471var res = str.slice(0, 7);
472if (res == "/filter" || res == "/FILTER" || res == "/Filter") {
473str = str.trim();
474str = str.slice(7);
475str = str.trim();
476
477var ancestor = document.getElementsByClassName("favorites-container")[0],
478    descendents = ancestor.getElementsByClassName("favorite-container");
479    // gets all descendent of ancestor
480var i, e;
481for (i = 0; i < descendents.length; ++i) {
482    e = descendents[i];
483	if (!e.getAttribute("data-name").toLowerCase().includes(str.toLowerCase())){
484    e.style.display = 'none';
485	}
486}
487
488var ancestor2 = document.getElementsByClassName("regions-container")[0],
489    descendents2 = ancestor2.getElementsByClassName("region-container");
490    // gets all descendent of ancestor
491var i, e;
492for (i = 0; i < descendents2.length; ++i) {
493    e2 = descendents2[i];
494	if (!e2.getAttribute("data-name").toLowerCase().includes(str.toLowerCase())){
495    e2.style.display = 'none';
496	}
497}
498
499document.getElementsByClassName('drawtogheter-chat-input')[0].value = '';	
500return
501}
502	
503
504	if (str == "/bw" || str == "/BW" || str == "/Bw") {
505var canvas  = document.getElementsByClassName("paint-canvas-background")[0];
506        var context = canvas.getContext('2d');
507
508var imgData = context.getImageData(0, 0, canvas.width, canvas.height);
509        var pixels  = imgData.data;
510        for (var i = 0, n = pixels.length; i < n; i += 4) {
511        var grayscale = pixels[i] * .3 + pixels[i+1] * .59 + pixels[i+2] * .11;
512        pixels[i  ] = grayscale;        // red
513        pixels[i+1] = grayscale;        // green
514        pixels[i+2] = grayscale;        // blue
515        //pixels[i+3]              is alpha
516    }
517    context.putImageData(imgData, 0, 0);
518	
519	
520var canvas  = document.getElementsByClassName("paint-canvas paint-canvas-public")[0];
521        var context = canvas.getContext('2d');
522
523var imgData = context.getImageData(0, 0, canvas.width, canvas.height);
524        var pixels  = imgData.data;
525        for (var i = 0, n = pixels.length; i < n; i += 4) {
526        var grayscale = pixels[i] * .3 + pixels[i+1] * .59 + pixels[i+2] * .11;
527        pixels[i  ] = grayscale;        // red
528        pixels[i+1] = grayscale;        // green
529        pixels[i+2] = grayscale;        // blue
530        //pixels[i+3]              is alpha
531    }
532    context.putImageData(imgData, 0, 0);	
533//document.getElementsByClassName("control-text-input")[0].value = str;
534document.getElementsByClassName('drawtogheter-chat-input')[0].value = '';		
535return	
536	}	
537	
538	if (str == "/color" || str == "/COLOR" || str == "/Color") {
539anondraw.collab.paint.resize();
540document.getElementsByClassName('drawtogheter-chat-input')[0].value = '';		
541return	
542	}
543
544
545
546	if (str == "/chatfocus" || str == "/CHATFOCUS" || str == "/Chatfocus") {
547if (window.forcechatfocus == 1){
548window.forcechatfocus = 0;
549localStorage.setItem("storedchatfocus", 0);
550anondraw.collab.chat.addMessage('WARNING!',"Force chat focus is OFF. Preference saved, send again to undo."); 
551} else {
552window.forcechatfocus = 1;
553localStorage.setItem("storedchatfocus", 1);
554anondraw.collab.chat.addMessage('WARNING!',"Force chat focus is ON. Preference saved, send again to undo."); 	
555}
556document.getElementsByClassName('drawtogheter-chat-input')[0].value = '';		
557return	
558	}	
559	
560	
561var res = str.slice(0, 4);
562if (res == "/aka" || res == "/AKA" || res == "/Aka") {
563str = str.trim();
564str = str.slice(4);
565str = str.trim();
566str = str.replace(/"/g, "") ;
567str = str.replace(/'/g, "") ;
568str = str.replace(/, /g, ",") ;
569str = str.replace(/ , /g, ",") ;
570
571var lastestakachar = str.substring(str.length - 1,  str.length);
572if (lastestakachar == ","){
573str=str.slice(0, str.length - 1);	
574}
575
576localStorage.setItem("storedaka", str);
577var akaarray = str.split(",");
578window.akaarray = str.split(",");
579document.getElementsByClassName('drawtogheter-chat-input')[0].value = '';		
580anondraw.collab.chat.addMessage('Notification','List updated: ' + str);
581return
582}	
583
584
585var res = str.slice(0, 10);
586if (res == "/extrabots" || res == "/EXTRABOTS" || res == "/Extrabots") {
587str = str.trim();
588str = str.slice(10);
589str = str.trim();
590str = str.replace(/"/g, "") ;
591str = str.replace(/'/g, "") ;
592str = str.replace(/, /g, ",") ;
593str = str.replace(/ , /g, ",") ;
594
595localStorage.setItem("storedbots", str);
596
597document.getElementsByClassName('drawtogheter-chat-input')[0].value = '';		
598anondraw.collab.chat.addMessage('Notification','List updated: ' + str);
599return
600}	
601
602	
603	
604
605var res = str.slice(0, 6);
606if (res == "/bgurl" || res == "/BGURL" || res == "/Bgurl") {
607str = str.trim();
608str = str.slice(6);
609str = str.trim();
610window.bgurl = str;
611localStorage.setItem("bgurl", str);
612document.getElementsByClassName('drawtogheter-chat-input')[0].value = '';	
613anondraw.collab.chat.addMessage('Background URL','Updated: ' + str);
614window.originalzoom = 1;
615return
616}
617
618var bgscreen;
619var res = str.slice(0, 9);
620if (res == "/bgscreen" || res == "/BGSCREEN" || res == "/Bgscreen") {
621str = str.trim();
622str = str.slice(6);
623str = str.trim();
624
625
626				var g = document.createElement("canvas"),
627                            k = anondraw.collab.paint.public.canvas.height,
628                            l = anondraw.collab.paint.public.canvas.width;
629                        g.width = l;
630                        g.height = k;
631                        var m = g.getContext("2d");
632
633                                m.drawImage(anondraw.collab.paint.background.canvas, 0, 0, l, k);
634                                m.drawImage(anondraw.collab.paint.public.canvas, 0, 0, l, k);
635                                anondraw.collab.lastBanSnapshot = g.toDataURL("image/png");                                
636 
637window.bgscreen = "'" + g.toDataURL("image/png") + "'";
638
639localStorage.setItem("bgscreen", window.bgscreen);
640anondraw.collab.chat.addMessage('Snapshot taken',"click on the right bottom corner button to activate"); 
641window.originalzoom = anondraw.collab.paint.public.zoom;
642//anondraw.collab.changeName(str);
643//anondraw.collab.chat.onMessage( step_one);
644
645document.getElementsByClassName('drawtogheter-chat-input')[0].value = '';		
646return
647}
648
649
650var res = str.slice(0, 5);
651if (res == "/snap" || res == "/SNAP" || res == "/Snap") {
652str = str.trim();
653str = str.slice(5);
654str = str.trim();
655Paint.prototype.PATH_PRECISION = str;
656document.getElementsByClassName('drawtogheter-chat-input')[0].value = '';
657anondraw.collab.chat.addMessage('Snap to grid','New value: ' + str + " (standard: 1000)");	
658return
659}
660	
661if (str == "/id" || str == "/ID" || str == "/Id") {
662document.getElementsByClassName('drawtogheter-chat-input')[0].value = anondraw.collab.account.id;	
663return
664}
665
666if (str == "/version" || str == "/VERSION" || str == "/Version") {
667document.getElementsByClassName('drawtogheter-chat-input')[0].value = "I'm using AnonProMod v1.6";	
668return
669}
670
671if (str == "/timezone" || str == "/TIMEZONE" || str == "/Timezone") {
672let d = new Date();
673let n = d.getTimezoneOffset();
674document.getElementsByClassName('drawtogheter-chat-input')[0].value = n/60;	
675return
676}
677
678if (str == "/pm" || str == "/PM" || str == "/Pm") {
679var win = window.open('https://www.anondraw.com/messages', '_blank');
680 win.focus();
681document.getElementsByClassName('drawtogheter-chat-input')[0].value = '';	
682return
683}
684
685if (str == "/profile" || str == "/PROFILE" || str == "/Profile") {
686var win = window.open('https://www.anondraw.com/profile', '_blank');
687 win.focus();
688document.getElementsByClassName('drawtogheter-chat-input')[0].value = '';	
689return
690}
691
692if (str == "/buttons" || str == "/BUTTONS" || str == "/Buttons") {
693//DrawTogether.prototype.toggleClickableArea();
694    var a = anondraw.collab.clickableAreasContainer.classList.toggle("hide");
695    anondraw.collab.clickableAreaButton.classList.toggle("activated", !a)
696
697if (anondraw.collab.clickableAreaButton.classList.contains('activated')){
698anondraw.collab.chat.addMessage('Buttons','ON');
699} else {
700anondraw.collab.chat.addMessage('Buttons','OFF');
701}	
702	
703document.getElementsByClassName('drawtogheter-chat-input')[0].value = '';	
704return
705}
706
707if (str == "/tilemap" || str == "/TILEMAP" || str == "/Tilemap" || str == "/tilesmap" || str == "/TILESMAP" || str == "/Tilesmap") {
708//DrawTogether.prototype.openTilesMap();
709var ttthis = anondraw.collab;
710    var a = ttthis.gui.createWindow({
711        title: "TileMap for room " + ttthis.current_room
712    }).appendChild(document.createElement("div"));
713    a.classList.add("content");
714	a.style.zIndex = '999999991';
715    var b = new RoomTileCanvas(ttthis.favList);
716    a.appendChild(b.container);
717    b.resize();
718    b.addEventListener("click", function(a) {
719        ttthis.handleGotoAndCenter(a.position[0], a.position[1])
720    }.bind(ttthis));
721    b.tiledCanvas.goto(ttthis.paint.public.leftTopX / ttthis.paint.public.settings.chunkSize * b.settings.tileSize, ttthis.paint.public.leftTopY /
722        ttthis.paint.public.settings.chunkSize * b.settings.tileSize);
723    ttthis.tiles = ttthis.tiles || {};
724    if (ttthis.tiles[ttthis.current_room]) b.useTiles(ttthis.tiles[ttthis.current_room]);
725    else {
726        var c = ttthis.current_room;
727        b.requestData(ttthis.settings.imageServer, c);
728        b.callbacks.push(function() {
729            ttthis.tiles[c] = b.tiles
730        }.bind(ttthis))
731    }
732document.getElementsByClassName('drawtogheter-chat-input')[0].value = '';	
733return
734}
735
736if (str == "/animation" || str == "/ANIMATION" || str == "/Animation" || str == "/animations" || str == "/ANIMATIONS" || str == "/Animations") {
737//DrawTogether.prototype.toggleAnimationManager();
738anondraw.collab.animationsWindow.style.zIndex = "999999992";
739if ($(".animation-window").is(":visible") ){
740anondraw.collab.animationsWindow.classList.remove("show")	
741} else {
742anondraw.collab.animationsWindow.classList.add("show")
743}
744document.getElementsByClassName('drawtogheter-chat-input')[0].value = '';	
745return
746};
747
748
749
750if (str == "/discord" || str == "/DISCORD" || str == "/Discord") {
751//DrawTogether.prototype.openDiscordWindow();
752     anondraw.collab.gui.createWindow({
753        title: "Voice chat: Discord"
754    }).appendChild(document.createElement("div")).innerHTML = '<iframe src="https://discordapp.com/widget?id=187008981837938689&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0"></iframe>'
755document.getElementsByClassName('drawtogheter-chat-input')[0].value = '';	
756return
757}
758if (str == "/rooms" || str == "/ROOMS" || str == "/Rooms") {
759anondraw.collab.openRoomWindow();
760document.getElementsByClassName('drawtogheter-chat-input')[0].value = '';	
761return
762}
763if (str == "/github" || str == "/GITHUB" || str == "/Github" || str == "/GitHub") {
764var win = window.open('https://github.com/Squarific/anondraw', '_blank');
765win.focus();
766document.getElementsByClassName('drawtogheter-chat-input')[0].value = '';	
767return
768}
769if (str == "/logout" || str == "/LOGOUT" || str == "/Logout") {
770window.open("https://www.anondraw.com/logout", "_self");
771document.getElementsByClassName('drawtogheter-chat-input')[0].value = '';	
772return
773}
774
775    anondraw.collab.chat.onMessage(document.getElementsByClassName('drawtogheter-chat-input')[0].value);
776    document.getElementsByClassName('drawtogheter-chat-input')[0].value = "";
777};
778	
779
780//function to let text caret on the end of the text
781function setCaretPosition(ctrl, pos) {
782  // Modern browsers
783  if (ctrl.setSelectionRange) {
784    ctrl.focus();
785    ctrl.setSelectionRange(pos, pos);
786  
787  // IE8 and below
788  } else if (ctrl.createTextRange) {
789    var range = ctrl.createTextRange();
790    range.collapse(true);
791    range.moveEnd('character', pos);
792    range.moveStart('character', pos);
793    range.select();
794  }
795}
796
797
798
799//add cross xbutton
800var crossstate;
801var xbutton = document.createElement("button");
802xbutton.innerHTML = "➕";
803xbutton.id = "crossbtn";
804xbutton.style.color = "black";
805xbutton.style.backgroundColor = "transparent";
806xbutton.style.bottom = "0";
807xbutton.style.width = "34px";
808xbutton.style.right = "0px";
809xbutton.style.top = "auto !important";
810xbutton.style.position = "absolute";
811xbutton.style.textAlign = "center";
812xbutton.style.zIndex = "999";
813
814
815xbutton.className = "x-button"
816document.head.insertAdjacentHTML('beforeend','<style>.x-button:hover {background-color: #23344560 !important;}</style>');
817var body = document.getElementsByClassName("drawtogether-paint-container")[0];
818body.appendChild(xbutton);
819xbutton.addEventListener ("click", function() {
820if (crossstate == 1){
821document.getElementById('aimcross').remove();
822window.crossstate = 0;
823xbutton.classList.remove("activated");
824} else {
825var img = new Image();
826img.src = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjIiIHdpZHRoPSIyMiI+DQo8cGF0aCBpZD0ibGluZUFCIiBkPSJNIDEgMTEgTCAxMCAxMSIgc3Ryb2tlPSJyZWQiIHN0cm9rZS13aWR0aD0iMyIgZmlsbD0ibm9uZSIgLz4NCjxwYXRoIGlkPSJsaW5lQUIiIGQ9Ik0gMTIgMTEgTCAyMiAxMSIgc3Ryb2tlPSJyZWQiIHN0cm9rZS13aWR0aD0iMyIgZmlsbD0ibm9uZSIgLz4NCjxwYXRoIGlkPSJsaW5lQUIiIGQ9Ik0gMTEgMSBMIDExIDEwIiBzdHJva2U9InJlZCIgc3Ryb2tlLXdpZHRoPSIzIiBmaWxsPSJub25lIiAvPg0KPHBhdGggaWQ9ImxpbmVBQiIgZD0iTSAxMSAxMiBMIDExIDIyIiBzdHJva2U9InJlZCIgc3Ryb2tlLXdpZHRoPSIzIiBmaWxsPSJub25lIiAvPg0KPC9zdmc+";
827img.id = "aimcross";
828img.style.pointerEvents = "none";
829img.style.width = "22px";
830img.style.height = "22px";
831
832img.style.position = "absolute";
833
834img.style.left = "50%";
835img.style.top = "50%";
836
837img.style.MozTransform = "translate(-11px, -11px)";
838img.style.webkitTransform = "translate(-11px, -11px)";
839img.style.msTransform = "translate(-11px, -11px)";
840img.style.transform = "translate(-11px, -11px)";
841
842img.style.zIndex = "999999";
843
844document.getElementsByClassName('drawtogether-paint-container')[0].appendChild(img);
845window.crossstate = 1;
846xbutton.classList.add("activated");
847}
848});
849
850
851//pass items from bottom menu to top
852document.getElementsByClassName("drawtogether-control-container")[0].appendChild(regionsbtn);
853document.getElementsByClassName("drawtogether-control-container")[0].appendChild(favoritesbtn);
854document.getElementsByClassName("drawtogether-control-container")[0].appendChild(randombtn);
855document.getElementsByClassName("drawtogether-control-container")[0].appendChild(spawnbtn);
856
857
858//remove bottom menu container
859document.getElementsByClassName("mouse-coords")[0].style.display = "none";
860document.getElementsByClassName("control-container")[0].style.display = "none";
861
862
863//set id for tool buttons
864document.getElementsByClassName("control-container")[0].childNodes[0].id = "movebtn";
865document.getElementsByClassName("control-container")[0].childNodes[1].id = "linebtn";
866document.getElementsByClassName("control-container")[0].childNodes[2].id = "brushbtn";
867document.getElementsByClassName("control-container")[0].childNodes[3].id = "textbtn";
868document.getElementsByClassName("control-container")[0].childNodes[4].id = "pickerbtn";
869document.getElementsByClassName("control-container")[0].childNodes[5].id = "zoombtn";
870document.getElementsByClassName("control-container")[0].childNodes[6].id = "selectbtn";
871document.getElementsByClassName("control-container")[0].childNodes[7].id = "undobtn";
872
873document.getElementsByClassName("control-container")[0].childNodes[8].id = "brushsizebtn";
874
875document.getElementsByClassName("control-container")[0].childNodes[9].id = "pluszoombtn";
876document.getElementsByClassName("control-container")[0].childNodes[10].id = "defaultzoombtn";
877document.getElementsByClassName("control-container")[0].childNodes[11].id = "minuszoombtn";
878document.getElementsByClassName("control-container")[0].childNodes[12].id = "colorsAbtn";
879document.getElementsByClassName("control-container")[0].childNodes[13].id = "colorsBbtn";
880
881
882//replace old buttons and move tool buttons to top menu
883document.getElementsByClassName("drawtogether-control-container")[0].appendChild(settingsbtn);
884document.getElementsByClassName("drawtogether-control-container")[0].appendChild(chatbtn);
885
886document.getElementsByClassName("drawtogether-control-container")[0].appendChild(spawnbtn);
887document.getElementsByClassName("drawtogether-control-container")[0].appendChild(randombtn);
888document.getElementsByClassName("drawtogether-control-container")[0].appendChild(favoritesbtn);
889document.getElementsByClassName("drawtogether-control-container")[0].appendChild(regionsbtn);
890
891
892document.getElementsByClassName("drawtogether-control-container")[0].appendChild(movebtn);
893document.getElementsByClassName("drawtogether-control-container")[0].appendChild(textbtn);
894document.getElementsByClassName("drawtogether-control-container")[0].appendChild(selectbtn);
895document.getElementsByClassName("drawtogether-control-container")[0].appendChild(undobtn);
896
897
898document.getElementsByClassName("drawtogether-control-container")[0].appendChild(brushbtn);
899document.getElementsByClassName("drawtogether-control-container")[0].appendChild(linebtn);
900
901document.getElementsByClassName("drawtogether-control-container")[0].appendChild(brushsizebtn);
902
903document.getElementsByClassName("drawtogether-control-container")[0].appendChild(pickerbtn);
904document.getElementsByClassName("drawtogether-control-container")[0].appendChild(colorsAbtn);
905document.getElementsByClassName("drawtogether-control-container")[0].appendChild(colorsBbtn);
906
907document.getElementsByClassName("drawtogether-control-container")[0].appendChild(minuszoombtn);
908document.getElementsByClassName("drawtogether-control-container")[0].appendChild(defaultzoombtn);
909document.getElementsByClassName("drawtogether-control-container")[0].appendChild(pluszoombtn);
910
911document.getElementsByClassName("drawtogether-control-container")[0].appendChild(zoombtn);
912
913
914//fix giant button
915document.getElementById("spawnbtn").firstChild.style.height = "1.3rem";
916
917
918//let buttons equal
919var menus = document.getElementsByClassName("control-button");
920for (var i = 0; menus[i]; i++)
921{
922  menus[i].style.margin = "0px";
923  menus[i].style.textAlign = "center";
924  menus[i].style.borderRadius = "0";
925  menus[i].style.minWidth = "2.3rem";  
926  menus[i].style.maxHeight = "2.3rem";
927   menus[i].style.top = "0px";
928   menus[i].style.border = "0px";
929   menus[i].style.boxSizing = "border-box";
930   menus[i].style.setProperty('padding', '0px', 'important');
931  
932menus[i].style.MozUserSelect = "none";  
933menus[i].style.webkitUserSelect = "none";
934menus[i].style.msUserSelect= "none";
935menus[i].style.userSelect = "none";
936   
937}
938document.getElementById("spawnbtn").style.marginLeft = "7px";
939document.getElementById("movebtn").style.marginLeft = "7px";
940document.getElementById("brushbtn").style.marginLeft = "7px";
941document.getElementById("minuszoombtn").style.marginLeft = "7px";
942document.getElementById("zoombtn").style.marginLeft = "7px";
943document.getElementById("colorsBbtn").style.height = "2.3rem";
944
945
946
947document.getElementsByClassName("drawtogether-control-container")[0].style.height = "2.3rem";
948document.getElementsByClassName("drawtogether-control-container")[0].style.margin = "0";
949document.getElementsByClassName("drawtogether-control-container")[0].style.padding = "0";
950document.getElementsByClassName("drawtogether-info-container")[0].style.top = "2.3rem";
951document.getElementsByClassName("drawtogether-paint-container")[0].style.top = "2.3rem";
952anondraw.collab.paint.resize();
953
954//resize button icons
955document.getElementById("spawnbtn").firstChild.style.height = "1.0rem";
956document.getElementById("favoritesbtn").firstChild.style.height = "1.0rem";
957document.getElementById("regionsbtn").firstChild.style.height = "1.0rem";
958document.getElementById("randombtn").firstChild.style.height = "1.0rem";
959document.getElementById("movebtn").firstChild.style.height = "1.0rem";
960document.getElementById("selectbtn").firstChild.style.height = "1.0rem";
961document.getElementById("textbtn").firstChild.style.height = "1.0rem";
962document.getElementById("undobtn").firstChild.style.height = "1.0rem";
963document.getElementById("brushbtn").firstChild.style.height = "1.0rem";
964document.getElementById("linebtn").firstChild.style.height = "1.0rem";
965document.getElementById("pickerbtn").firstChild.style.height = "1.0rem";
966document.getElementById("zoombtn").firstChild.style.height = "1.0rem";
967document.getElementById("minuszoombtn").firstChild.style.height = "1.0rem";
968document.getElementById("defaultzoombtn").firstChild.style.height = "1.0rem";
969document.getElementById("pluszoombtn").firstChild.style.height = "1.0rem";
970
971document.getElementById("brushsizebtn").childNodes[2].style.height = "2.3rem";
972document.getElementById("brushsizebtn").childNodes[2].style.padding = "0px";
973document.getElementById("brushsizebtn").childNodes[2].style.verticalAlign = "bottom";
974document.getElementById("brushsizebtn").childNodes[0].style.fontSize = "0.9em";
975document.getElementById("brushsizebtn").childNodes[0].style.top = "-2px";
976document.getElementById("colorsBbtn").style.verticalAlign = "bottom";
977
978
979
980
981
982//resize sliders thumb and add a size limit to emotes
983  var novoestilo = document.createElement("STYLE");
984  var novaclasse = document.createTextNode(".oslider::-moz-range-thumb { width: 24px !important; height: 24px !important; } .oslider::-webkit-slider-thumb { width: 24px !important; height: 24px !important; }");
985  novoestilo.appendChild(novaclasse);
986  document.head.appendChild(novoestilo);
987  document.getElementById("brushsizebtn").childNodes[2].classList.add("oslider");
988  
989  
990 
991  var novoestiloB = document.createElement("STYLE");
992  var novaclasseB = document.createTextNode(".emotes {max-height: 3em;max-width: 3em;}");
993  novoestiloB.appendChild(novaclasseB);
994  document.head.appendChild(novoestiloB);
995
996//add invisible emotes window
997var emolist = document.createElement("div");
998emolist.id = "emolist";
999emolist.style.width = "20rem";
1000//emolist.style.height = "40%";
1001emolist.style.top = "2.3rem";
1002emolist.style.bottom = "60%";
1003emolist.style.right = "auto";
1004emolist.style.left = "0";
1005emolist.style.zIndex = "9999999991";
1006emolist.style.position = "absolute";
1007emolist.style.backgroundColor = "#e0e5e7";
1008emolist.style.border = "2px solid rgb(35, 52, 69)";
1009emolist.style.overflowY = "scroll";
1010emolist.style.overflowX = "hidden";
1011emolist.style.cursor = "pointer";
1012emolist.style.display = "none";
1013emolist.innerHTML = "<img class='emotes' data-name='4Head' src='https://www.anondraw.com/images/emotes/4Head.png'> <img class='emotes' data-name='ANDY' src='https://www.anondraw.com/images/emotes/ANDY.gif'> <img class='emotes' data-name='ANELE' src='https://www.anondraw.com/images/emotes/ANELE.png'> <img class='emotes' data-name='ArgieB8' src='https://www.anondraw.com/images/emotes/ArgieB8.png'> <img class='emotes' data-name='ArsonNoSexy' src='https://www.anondraw.com/images/emotes/ArsonNoSexy.png'> <img class='emotes' data-name='AsianGlow' src='https://www.anondraw.com/images/emotes/AsianGlow.png'> <img class='emotes' data-name='AthenaPMS' src='https://www.anondraw.com/images/emotes/AthenaPMS.png'> <img class='emotes' data-name='BAIT' src='https://www.anondraw.com/images/emotes/BAIT.png'> <img class='emotes' data-name='BCWarrior' src='https://www.anondraw.com/images/emotes/BCWarrior.png'> <img class='emotes' data-name='BCouch' src='https://www.anondraw.com/images/emotes/BCouch.png'> <img class='emotes' data-name='BIGTHONK' src='https://www.anondraw.com/images/emotes/BIGTHONK.gif'> <img class='emotes' data-name='BLACKHOWO' src='https://www.anondraw.com/images/emotes/BLACKHOWO.jpg'> <img class='emotes' data-name='BORT' src='https://www.anondraw.com/images/emotes/BORT.png'> <img class='emotes' data-name='BabyRage' src='https://www.anondraw.com/images/emotes/BabyRage.png'> <img class='emotes' data-name='BatChest' src='https://www.anondraw.com/images/emotes/BatChest.png'> <img class='emotes' data-name='BibleThump' src='https://www.anondraw.com/images/emotes/BibleThump.png'> <img class='emotes' data-name='BigBrother' src='https://www.anondraw.com/images/emotes/BigBrother.png'> <img class='emotes' data-name='BionicBunion' src='https://www.anondraw.com/images/emotes/BionicBunion.png'> <img class='emotes' data-name='BlargNaut' src='https://www.anondraw.com/images/emotes/BlargNaut.png'> <img class='emotes' data-name='BloodTrail' src='https://www.anondraw.com/images/emotes/BloodTrail.png'> <img class='emotes' data-name='BrainSlug' src='https://www.anondraw.com/images/emotes/BrainSlug.png'> <img class='emotes' data-name='BrokeBack' src='https://www.anondraw.com/images/emotes/BrokeBack.png'> <img class='emotes' data-name='BuddhaBar' src='https://www.anondraw.com/images/emotes/BuddhaBar.png'> <img class='emotes' data-name='CAB' src='https://www.anondraw.com/images/emotes/CAB.png'> <img class='emotes' data-name='CATDARE' src='https://www.anondraw.com/images/emotes/CATDARE.png'> <img class='emotes' data-name='CATFUG' src='https://www.anondraw.com/images/emotes/CATFUG.png'> <img class='emotes' data-name='CATOHNO' src='https://www.anondraw.com/images/emotes/CATOHNO.jpg'> <img class='emotes' data-name='CasualLama' src='https://www.anondraw.com/images/emotes/CasualLama.png'> <img class='emotes' data-name='CasualLamaOriginal' src='https://www.anondraw.com/images/emotes/CasualLamaOriginal.png'> <img class='emotes' data-name='CoolCat' src='https://www.anondraw.com/images/emotes/CoolCat.png'> <img class='emotes' data-name='CorgiDerp' src='https://www.anondraw.com/images/emotes/CorgiDerp.png'> <img class='emotes' data-name='CougarHunt' src='https://www.anondraw.com/images/emotes/CougarHunt.png'> <img class='emotes' data-name='DAESuppy' src='https://www.anondraw.com/images/emotes/DAESuppy.png'> <img class='emotes' data-name='DBstyle' src='https://www.anondraw.com/images/emotes/DBstyle.png'> <img class='emotes' data-name='DIAPERJAKE' src='https://www.anondraw.com/images/emotes/DIAPERJAKE.png'> <img class='emotes' data-name='DIAPERJAKE2' src='https://www.anondraw.com/images/emotes/DIAPERJAKE2.png'> <img class='emotes' data-name='DISGUSTING' src='https://www.anondraw.com/images/emotes/DISGUSTING.png'> <img class='emotes' data-name='DONT' src='https://www.anondraw.com/images/emotes/DONT.png'> <img class='emotes' data-name='DOOMGuy' src='https://www.anondraw.com/images/emotes/DOOMGuy.png'> <img class='emotes' data-name='DansGame' src='https://www.anondraw.com/images/emotes/DansGame.png'> <img class='emotes' data-name='DatSheffy' src='https://www.anondraw.com/images/emotes/DatSheffy.png'> <img class='emotes' data-name='DendiFace' src='https://www.anondraw.com/images/emotes/DendiFace.png'> <img class='emotes' data-name='DogFace' src='https://www.anondraw.com/images/emotes/DogFace.png'> <img class='emotes' data-name='EXTRATHICC' src='https://www.anondraw.com/images/emotes/EXTRATHICC.png'> <img class='emotes' data-name='EagleEye' src='https://www.anondraw.com/images/emotes/EagleEye.png'> <img class='emotes' data-name='EleGiggle' src='https://www.anondraw.com/images/emotes/EleGiggle.png'> <img class='emotes' data-name='EvilFetus' src='https://www.anondraw.com/images/emotes/EvilFetus.png'> <img class='emotes' data-name='F' src='https://www.anondraw.com/images/emotes/F.gif'> <img class='emotes' data-name='FILLDIAPER' src='https://www.anondraw.com/images/emotes/FILLDIAPER.gif'> <img class='emotes' data-name='FPSMarksman' src='https://www.anondraw.com/images/emotes/FPSMarksman.png'> <img class='emotes' data-name='FRANKCONFUSED' src='https://www.anondraw.com/images/emotes/FRANKCONFUSED.jpg'> <img class='emotes' data-name='FROG' src='https://www.anondraw.com/images/emotes/FROG.png'> <img class='emotes' data-name='FUCKYOU' src='https://www.anondraw.com/images/emotes/FUCKYOU.gif'> <img class='emotes' data-name='FUNgineer' src='https://www.anondraw.com/images/emotes/FUNgineer.png'> <img class='emotes' data-name='FailFish' src='https://www.anondraw.com/images/emotes/FailFish.png'> <img class='emotes' data-name='FrankerZ' src='https://www.anondraw.com/images/emotes/FrankerZ.png'> <img class='emotes' data-name='FreakinStinkin' src='https://www.anondraw.com/images/emotes/FreakinStinkin.png'> <img class='emotes' data-name='FunRun' src='https://www.anondraw.com/images/emotes/FunRun.png'> <img class='emotes' data-name='FuzzyOtterOO' src='https://www.anondraw.com/images/emotes/FuzzyOtterOO.png'> <img class='emotes' data-name='GingerPower' src='https://www.anondraw.com/images/emotes/GingerPower.png'> <img class='emotes' data-name='GrammarKing' src='https://www.anondraw.com/images/emotes/GrammarKing.png'> <img class='emotes' data-name='HANA' src='https://www.anondraw.com/images/emotes/HANA.png'> <img class='emotes' data-name='HORNSBY' src='https://www.anondraw.com/images/emotes/HORNSBY.png'> <img class='emotes' data-name='HassaanChop' src='https://www.anondraw.com/images/emotes/HassaanChop.png'> <img class='emotes' data-name='HassanChop' src='https://www.anondraw.com/images/emotes/HassanChop.png'> <img class='emotes' data-name='HeyGuys' src='https://www.anondraw.com/images/emotes/HeyGuys.png'> <img class='emotes' data-name='HotPokket' src='https://www.anondraw.com/images/emotes/HotPokket.png'> <img class='emotes' data-name='HumbleLife' src='https://www.anondraw.com/images/emotes/HumbleLife.png'> <img class='emotes' data-name='IMPOSTER' src='https://www.anondraw.com/images/emotes/IMPOSTER.jpg'> <img class='emotes' data-name='INTELLECTUAL' src='https://www.anondraw.com/images/emotes/INTELLECTUAL.png'> <img class='emotes' data-name='ISPY' src='https://www.anondraw.com/images/emotes/ISPY.jpg'> <img class='emotes' data-name='ITSAMEME' src='https://www.anondraw.com/images/emotes/ITSAMEME.png'> <img class='emotes' data-name='ItsBoshyTime' src='https://www.anondraw.com/images/emotes/ItsBoshyTime.png'> <img class='emotes' data-name='JKanStyle' src='https://www.anondraw.com/images/emotes/JKanStyle.png'> <img class='emotes' data-name='JT' src='https://www.anondraw.com/images/emotes/JT.png'> <img class='emotes' data-name='Jebaited' src='https://www.anondraw.com/images/emotes/Jebaited.png'> <img class='emotes' data-name='JonCarnage' src='https://www.anondraw.com/images/emotes/JonCarnage.png'> <img class='emotes' data-name='KAPOW' src='https://www.anondraw.com/images/emotes/KAPOW.png'> <img class='emotes' data-name='Kappa' src='https://www.anondraw.com/images/emotes/Kappa.png'> <img class='emotes' data-name='KappaClaus' src='https://www.anondraw.com/images/emotes/KappaClaus.png'> <img class='emotes' data-name='KappaPride' src='https://www.anondraw.com/images/emotes/KappaPride.png'> <img class='emotes' data-name='KappaRoss' src='https://www.anondraw.com/images/emotes/KappaRoss.png'> <img class='emotes' data-name='KappaWealth' src='https://www.anondraw.com/images/emotes/KappaWealth.png'> <img class='emotes' data-name='Keepo' src='https://www.anondraw.com/images/emotes/Keepo.png'> <img class='emotes' data-name='KevinTurtle' src='https://www.anondraw.com/images/emotes/KevinTurtle.png'> <img class='emotes' data-name='Kippa' src='https://www.anondraw.com/images/emotes/Kippa.png'> <img class='emotes' data-name='KoalaSQUISHY' src='https://www.anondraw.com/images/emotes/KoalaSQUISHY.gif'> <img class='emotes' data-name='KrakenWulf' src='https://www.anondraw.com/images/emotes/KrakenWulf.gif'> <img class='emotes' data-name='Kreygasm' src='https://www.anondraw.com/images/emotes/Kreygasm.png'> <img class='emotes' data-name='LENNY' src='https://www.anondraw.com/images/emotes/LENNY.gif'> <img class='emotes' data-name='LemmeSmash' src='https://www.anondraw.com/images/emotes/LemmeSmash.png'> <img class='emotes' data-name='MEAT' src='https://www.anondraw.com/images/emotes/MEAT.png'> <img class='emotes' data-name='MEATHEART' src='https://www.anondraw.com/images/emotes/MEATHEART.png'> <img class='emotes' data-name='MEOW' src='https://www.anondraw.com/images/emotes/MEOW.png'> <img class='emotes' data-name='MILK.' src='https://www.anondraw.com/images/emotes/MILK.jpeg'> <img class='emotes' data-name='MILK' src='https://www.anondraw.com/images/emotes/MILK.png'> <img class='emotes' data-name='MINDME' src='https://www.anondraw.com/images/emotes/MINDME.png'> <img class='emotes' data-name='MOON' src='https://www.anondraw.com/images/emotes/MOON.gif'> <img class='emotes' data-name='MVGame' src='https://www.anondraw.com/images/emotes/MVGame.png'> <img class='emotes' data-name='Mau5' src='https://www.anondraw.com/images/emotes/Mau5.png'> <img class='emotes' data-name='MikeHogu' src='https://www.anondraw.com/images/emotes/MikeHogu.png'> <img class='emotes' data-name='MingLee' src='https://www.anondraw.com/images/emotes/MingLee.png'> <img class='emotes' data-name='MrDestructoid' src='https://www.anondraw.com/images/emotes/MrDestructoid.png'> <img class='emotes' data-name='NIBBAWAT' src='https://www.anondraw.com/images/emotes/NIBBAWAT.jpg'> <img class='emotes' data-name='NinjaTroll' src='https://www.anondraw.com/images/emotes/NinjaTroll.png'> <img class='emotes' data-name='NoNoSpot' src='https://www.anondraw.com/images/emotes/NoNoSpot.png'> <img class='emotes' data-name='NoYou' src='https://www.anondraw.com/images/emotes/NoYou.png'> <img class='emotes' data-name='NotATK' src='https://www.anondraw.com/images/emotes/NotATK.png'> <img class='emotes' data-name='NotLikeThis' src='https://www.anondraw.com/images/emotes/NotLikeThis.png'> <img class='emotes' data-name='Nyan' src='https://www.anondraw.com/images/emotes/Nyan.png'> <img class='emotes' data-name='OBOI' src='https://www.anondraw.com/images/emotes/OBOI.png'> <img class='emotes' data-name='OMGScoots' src='https://www.anondraw.com/images/emotes/OMGScoots.png'> <img class='emotes' data-name='OSfrog' src='https://www.anondraw.com/images/emotes/OSfrog.png'> <img class='emotes' data-name='OSkomodo' src='https://www.anondraw.com/images/emotes/OSkomodo.png'> <img class='emotes' data-name='OSsloth' src='https://www.anondraw.com/images/emotes/OSsloth.png'> <img class='emotes' data-name='OhMyDog' src='https://www.anondraw.com/images/emotes/OhMyDog.png'> <img class='emotes' data-name='OneHand' src='https://www.anondraw.com/images/emotes/OneHand.png'> <img class='emotes' data-name='OpieOP' src='https://www.anondraw.com/images/emotes/OpieOP.png'> <img class='emotes' data-name='OptimizePrime' src='https://www.anondraw.com/images/emotes/OptimizePrime.png'> <img class='emotes' data-name='PIKASHOOK' src='https://www.anondraw.com/images/emotes/PIKASHOOK.png'> <img class='emotes' data-name='PISCES' src='https://www.anondraw.com/images/emotes/PISCES.png'> <img class='emotes' data-name='PJSalt' src='https://www.anondraw.com/images/emotes/PJSalt.png'> <img class='emotes' data-name='PMSTwin' src='https://www.anondraw.com/images/emotes/PMSTwin.png'> <img class='emotes' data-name='PRChase' src='https://www.anondraw.com/images/emotes/PRChase.png'> <img class='emotes' data-name='PanicVis' src='https://www.anondraw.com/images/emotes/PanicVis.png'> <img class='emotes' data-name='PartyTime' src='https://www.anondraw.com/images/emotes/PartyTime.png'> <img class='emotes' data-name='PazPazowitz' src='https://www.anondraw.com/images/emotes/PazPazowitz.png'> <img class='emotes' data-name='PeoplesChamp' src='https://www.anondraw.com/images/emotes/PeoplesChamp.png'> <img class='emotes' data-name='PermaSmug' src='https://www.anondraw.com/images/emotes/PermaSmug.png'> <img class='emotes' data-name='PeteZaroll' src='https://www.anondraw.com/images/emotes/PeteZaroll.png'> <img class='emotes' data-name='PeteZarollTie' src='https://www.anondraw.com/images/emotes/PeteZarollTie.png'> <img class='emotes' data-name='PicoMause' src='https://www.anondraw.com/images/emotes/PicoMause.png'> <img class='emotes' data-name='PipeHype' src='https://www.anondraw.com/images/emotes/PipeHype.png'> <img class='emotes' data-name='PogChamp' src='https://www.anondraw.com/images/emotes/PogChamp.png'> <img class='emotes' data-name='Poooound' src='https://www.anondraw.com/images/emotes/Poooound.png'> <img class='emotes' data-name='PraiseIt' src='https://www.anondraw.com/images/emotes/PraiseIt.png'> <img class='emotes' data-name='PunchTrees' src='https://www.anondraw.com/images/emotes/PunchTrees.png'> <img class='emotes' data-name='PuppeyFace' src='https://www.anondraw.com/images/emotes/PuppeyFace.png'> <img class='emotes' data-name='RAT' src='https://www.anondraw.com/images/emotes/RAT.gif'> <img class='emotes' data-name='RaccAttack' src='https://www.anondraw.com/images/emotes/RaccAttack.png'> <img class='emotes' data-name='RalpherZ' src='https://www.anondraw.com/images/emotes/RalpherZ.png'> <img class='emotes' data-name='RedCoat' src='https://www.anondraw.com/images/emotes/RedCoat.png'> <img class='emotes' data-name='ResidentSleeper' src='https://www.anondraw.com/images/emotes/ResidentSleeper.png'> <img class='emotes' data-name='RitzMitz' src='https://www.anondraw.com/images/emotes/RitzMitz.png'> <img class='emotes' data-name='RuleFive' src='https://www.anondraw.com/images/emotes/RuleFive.png'> <img class='emotes' data-name='S1Y' src='https://www.anondraw.com/images/emotes/S1Y.gif'> <img class='emotes' data-name='SHRED' src='https://www.anondraw.com/images/emotes/SHRED.png'> <img class='emotes' data-name='SINFUL' src='https://www.anondraw.com/images/emotes/SINFUL.png'> <img class='emotes' data-name='SMOrc' src='https://www.anondraw.com/images/emotes/SMOrc.png'> <img class='emotes' data-name='SMSkull' src='https://www.anondraw.com/images/emotes/SMSkull.png'> <img class='emotes' data-name='SPECIALEYES' src='https://www.anondraw.com/images/emotes/SPECIALEYES.gif'> <img class='emotes' data-name='SPOTTED' src='https://www.anondraw.com/images/emotes/SPOTTED.jpg'> <img class='emotes' data-name='SSSsss' src='https://www.anondraw.com/images/emotes/SSSsss.png'> <img class='emotes' data-name='SeemsGood' src='https://www.anondraw.com/images/emotes/SeemsGood.png'> <img class='emotes' data-name='ShadyLulu' src='https://www.anondraw.com/images/emotes/ShadyLulu.png'> <img class='emotes' data-name='ShazBotstix' src='https://www.anondraw.com/images/emotes/ShazBotstix.png'> <img class='emotes' data-name='ShibeZ' src='https://www.anondraw.com/images/emotes/ShibeZ.png'> <img class='emotes' data-name='SoBayed' src='https://www.anondraw.com/images/emotes/SoBayed.png'> <img class='emotes' data-name='SoonerLater' src='https://www.anondraw.com/images/emotes/SoonerLater.png'> <img class='emotes' data-name='SriHead' src='https://www.anondraw.com/images/emotes/SriHead.png'> <img class='emotes' data-name='StoneLightning' src='https://www.anondraw.com/images/emotes/StoneLightning.png'> <img class='emotes' data-name='StrawBeary' src='https://www.anondraw.com/images/emotes/StrawBeary.png'> <img class='emotes' data-name='SuperVinlin' src='https://www.anondraw.com/images/emotes/SuperVinlin.png'> <img class='emotes' data-name='Swagnet' src='https://www.anondraw.com/images/emotes/Swagnet.gif'> <img class='emotes' data-name='SwiftRage' src='https://www.anondraw.com/images/emotes/SwiftRage.png'> <img class='emotes' data-name='TF2John' src='https://www.anondraw.com/images/emotes/TF2John.png'> <img class='emotes' data-name='THOTDETECTED' src='https://www.anondraw.com/images/emotes/THOTDETECTED.png'> <img class='emotes' data-name='TTours' src='https://www.anondraw.com/images/emotes/TTours.png'> <img class='emotes' data-name='TerriLSD' src='https://www.anondraw.com/images/emotes/TerriLSD.gif'> <img class='emotes' data-name='ThatsHot' src='https://www.anondraw.com/images/emotes/ThatsHot.png'> <img class='emotes' data-name='TheRinger' src='https://www.anondraw.com/images/emotes/TheRinger.png'> <img class='emotes' data-name='TheTarFu' src='https://www.anondraw.com/images/emotes/TheTarFu.png'> <img class='emotes' data-name='TheThing' src='https://www.anondraw.com/images/emotes/TheThing.png'> <img class='emotes' data-name='ThunBeast' src='https://www.anondraw.com/images/emotes/ThunBeast.png'> <img class='emotes' data-name='TinyFace' src='https://www.anondraw.com/images/emotes/TinyFace.png'> <img class='emotes' data-name='TooSpicy' src='https://www.anondraw.com/images/emotes/TooSpicy.png'> <img class='emotes' data-name='TriHard' src='https://www.anondraw.com/images/emotes/TriHard.png'> <img class='emotes' data-name='UleetBackup' src='https://www.anondraw.com/images/emotes/UleetBackup.png'> <img class='emotes' data-name='UnSane' src='https://www.anondraw.com/images/emotes/UnSane.png'> <img class='emotes' data-name='UncleNox' src='https://www.anondraw.com/images/emotes/UncleNox.png'> <img class='emotes' data-name='VaultBoy' src='https://www.anondraw.com/images/emotes/VaultBoy.png'> <img class='emotes' data-name='VoHiYo' src='https://www.anondraw.com/images/emotes/VoHiYo.png'> <img class='emotes' data-name='Void1' src='https://www.anondraw.com/images/emotes/Void1.jpg'> <img class='emotes' data-name='Void2' src='https://www.anondraw.com/images/emotes/Void2.jpg'> <img class='emotes' data-name='Volcania' src='https://www.anondraw.com/images/emotes/Volcania.png'> <img class='emotes' data-name='WHEEZE' src='https://www.anondraw.com/images/emotes/WHEEZE.png'> <img class='emotes' data-name='WTRuck' src='https://www.anondraw.com/images/emotes/WTRuck.png'> <img class='emotes' data-name='WholeWheat' src='https://www.anondraw.com/images/emotes/WholeWheat.png'> <img class='emotes' data-name='WillDraw4Rep' src='https://www.anondraw.com/images/emotes/WillDraw4Rep.png'> <img class='emotes' data-name='WinWaker' src='https://www.anondraw.com/images/emotes/WinWaker.png'> <img class='emotes' data-name='WutFace' src='https://www.anondraw.com/images/emotes/WutFace.png'> <img class='emotes' data-name='XDOUBT' src='https://www.anondraw.com/images/emotes/XDOUBT.png'> <img class='emotes' data-name='YARANAIKA' src='https://www.anondraw.com/images/emotes/YARANAIKA.png'> <img class='emotes' data-name='YARANAIKA2' src='https://www.anondraw.com/images/emotes/YARANAIKA2.png'> <img class='emotes' data-name='YARANAIKA3' src='https://www.anondraw.com/images/emotes/YARANAIKA3.png'> <img class='emotes' data-name='YIFFPRIDE' src='https://www.anondraw.com/images/emotes/YIFFPRIDE.png'> <img class='emotes' data-name='YOUREWELCOME' src='https://www.anondraw.com/images/emotes/YOUREWELCOME.png'> <img class='emotes' data-name='YouWHY' src='https://www.anondraw.com/images/emotes/YouWHY.png'> <img class='emotes' data-name='Zwhat' src='https://www.anondraw.com/images/emotes/Zwhat.png'> <img class='emotes' data-name='bleedPurple' src='https://www.anondraw.com/images/emotes/bleedPurple.png'> <img class='emotes' data-name='cmonBruh' src='https://www.anondraw.com/images/emotes/cmonBruh.png'> <img class='emotes' data-name='deExcite' src='https://www.anondraw.com/images/emotes/deExcite.png'> <img class='emotes' data-name='deIlluminati' src='https://www.anondraw.com/images/emotes/deIlluminati.png'> <img class='emotes' data-name='duDudu' src='https://www.anondraw.com/images/emotes/duDudu.png'> <img class='emotes' data-name='ihaterat' src='https://www.anondraw.com/images/emotes/ihaterat.gif'> <img class='emotes' data-name='mcaT' src='https://www.anondraw.com/images/emotes/mcaT.png'> <img class='emotes' data-name='panicBasket' src='https://www.anondraw.com/images/emotes/panicBasket.png'> <img class='emotes' data-name='riPepperonis' src='https://www.anondraw.com/images/emotes/riPepperonis.png'> <img class='emotes' data-name='sadrat' src='https://www.anondraw.com/images/emotes/sadrat.gif'> <img class='emotes' data-name='twitchRaid' src='https://www.anondraw.com/images/emotes/twitchRaid.png'>";
1014document.getElementsByClassName("collab-container")[0].appendChild(emolist);
1015  
1016 //add emotions button
1017var emostate;
1018var emobutton = document.createElement("button");
1019emobutton.innerHTML = "<img src='https://www.anondraw.com/images/emotes/Kappa.png' style='height:1.0rem'>";
1020emobutton.id = "emobtn";
1021emobutton.title = "emotes";
1022emobutton.style.margin = "0";
1023emobutton.style.borderRadius = "0";
1024emobutton.style.padding = "0";
1025emobutton.style.borderBottom = "0";
1026emobutton.style.width = "20px"; 
1027emobutton.style.height = "1.5rem"; 
1028emobutton.style.lineHeight = "100%"; 
1029emobutton.style.position = "absolute";
1030emobutton.style.bottom = "1.5rem";
1031emobutton.style.left = "80px";
1032emobutton.className = "control-button"
1033var body = document.getElementsByClassName("drawtogether-chat-container")[0];
1034body.appendChild(emobutton);
1035emobutton.addEventListener ("click", function() {
1036if (emostate == 1){
1037document.getElementById("emolist").style.display = "none";
1038window.emostate = 0;
1039emobutton.classList.remove("activated");
1040} else {
1041document.getElementById("emolist").style.display = "block";
1042window.emostate = 1;
1043emobutton.classList.add("activated");
1044document.getElementById("emojilist").style.display = "none";
1045window.emojistate = 0;
1046emojibutton.classList.remove("activated");
1047}
1048});
1049
1050
1051$(".emotes").click(function() {
1052document.getElementsByClassName("drawtogheter-chat-input")[0].value = document.getElementsByClassName("drawtogheter-chat-input")[0].value + $(this)[0].getAttribute("data-name") + " ";
1053});
1054
1055
1056//add invisible emotes window
1057var emojilist = document.createElement("div");
1058emojilist.id = "emojilist";
1059emojilist.style.width = "20rem";
1060//emojilist.style.height = "40%";
1061emojilist.style.top = "2.3rem";
1062emojilist.style.bottom = "60%";
1063emojilist.style.right = "auto";
1064emojilist.style.left = "0";
1065emojilist.style.zIndex = "9999999992";
1066emojilist.style.position = "absolute";
1067emojilist.style.backgroundColor = "#e0e5e7";
1068emojilist.style.border = "2px solid rgb(35, 52, 69)";
1069emojilist.style.overflowY = "scroll";
1070emojilist.style.overflowX = "hidden";
1071emojilist.style.fontSize = "1.9em";
1072emojilist.style.cursor = "pointer";
1073emojilist.style.display = "none";
1074emojilist.innerHTML = "<span class='emojis' title='Grinning Face'>?</span> <span class='emojis' title='Grinning Face With Big Eyes'>?</span> <span class='emojis' title='Grinning Face With Smiling Eyes'>?</span> <span class='emojis' title='Beaming Face With Smiling Eyes'>?</span> <span class='emojis' title='Grinning Squinting Face'>?</span> <span class='emojis' title='Grinning Face With Sweat'>?</span> <span class='emojis' title='Rolling on the Floor Laughing'>?</span> <span class='emojis' title='Face With Tears of Joy'>?</span> <span class='emojis' title='Slightly Smiling Face'>?</span> <span class='emojis' title='Upside-Down Face'>?</span> <span class='emojis' title='Winking Face'>?</span> <span class='emojis' title='Smiling Face With Smiling Eyes'>?</span> <span class='emojis' title='Smiling Face With Halo'>?</span> <span class='emojis' title='Smiling Face With Heart-Eyes'>?</span> <span class='emojis' title='Star-Struck'>? </span> <span class='emojis' title='Face Blowing a Kiss'>?</span> <span class='emojis' title='Kissing Face'>?</span> <span class='emojis' title='Kissing Face With Closed Eyes'>?</span> <span class='emojis' title='Kissing Face With Smiling Eyes'>?</span> <span class='emojis' title='Face Savoring Food'>?</span> <span class='emojis' title='Face With Tongue'>?</span> <span class='emojis' title='Winking Face With Tongue'>?</span> <span class='emojis' title='Zany Face'>? </span> <span class='emojis' title='Squinting Face With Tongue'>?</span> <span class='emojis' title='Money-Mouth Face'>?</span> <span class='emojis' title='Hugging Face'>?</span> <span class='emojis' title='Face With Hand Over Mouth'>? </span> <span class='emojis' title='Shushing Face'>? </span> <span class='emojis' title='Thinking Face'>?</span> <span class='emojis' title='Zipper-Mouth Face'>?</span> <span class='emojis' title='Face With Raised Eyebrow'>? </span> <span class='emojis' title='Neutral Face'>?</span> <span class='emojis' title='Expressionless Face'>?</span> <span class='emojis' title='Face Without Mouth'>?</span> <span class='emojis' title='Smirking Face'>?</span> <span class='emojis' title='Unamused Face'>?</span> <span class='emojis' title='Face With Rolling Eyes'>?</span> <span class='emojis' title='Grimacing Face'>?</span> <span class='emojis' title='Lying Face'>?</span> <span class='emojis' title='Relieved Face'>?</span> <span class='emojis' title='Pensive Face'>?</span> <span class='emojis' title='Sleepy Face'>?</span> <span class='emojis' title='Drooling Face'>?</span> <span class='emojis' title='Sleeping Face'>?</span> <span class='emojis' title='Face With Medical Mask'>?</span> <span class='emojis' title='Face With Thermometer'>?</span> <span class='emojis' title='Face With Head-Bandage'>?</span> <span class='emojis' title='Nauseated Face'>?</span> <span class='emojis' title='Face Vomiting'>? </span> <span class='emojis' title='Sneezing Face'>?</span> <span class='emojis' title='Dizzy Face'>?</span> <span class='emojis' title='Exploding Head'>? </span> <span class='emojis' title='Cowboy Hat Face'>?</span> <span class='emojis' title='Smiling Face With Sunglasses'>?</span> <span class='emojis' title='Nerd Face'>?</span> <span class='emojis' title='Face With Monocle'>? </span> <span class='emojis' title='Confused Face'>?</span> <span class='emojis' title='Worried Face'>?</span> <span class='emojis' title='Slightly Frowning Face'>?</span> <span class='emojis' title='Face With Open Mouth'>?</span> <span class='emojis' title='Hushed Face'>?</span> <span class='emojis' title='Astonished Face'>?</span> <span class='emojis' title='Flushed Face'>?</span> <span class='emojis' title='Frowning Face With Open Mouth'>?</span> <span class='emojis' title='Anguished Face'>?</span> <span class='emojis' title='Fearful Face'>?</span> <span class='emojis' title='Anxious Face With Sweat'>?</span> <span class='emojis' title='Sad but Relieved Face'>?</span> <span class='emojis' title='Crying Face'>?</span> <span class='emojis' title='Loudly Crying Face'>?</span> <span class='emojis' title='Face Screaming in Fear'>?</span> <span class='emojis' title='Confounded Face'>?</span> <span class='emojis' title='Persevering Face'>?</span> <span class='emojis' title='Disappointed Face'>?</span> <span class='emojis' title='Downcast Face With Sweat'>?</span> <span class='emojis' title='Weary Face'>?</span> <span class='emojis' title='Tired Face'>?</span> <span class='emojis' title='Face With Steam From Nose'>?</span> <span class='emojis' title='Pouting Face'>?</span> <span class='emojis' title='Angry Face'>?</span> <span class='emojis' title='Face With Symbols on Mouth'>? </span> <span class='emojis' title='Smiling Face With Horns'>?</span> <span class='emojis' title='Angry Face With Horns'>?</span> <span class='emojis' title='Skull'>?</span> <span class='emojis' title='Pile of Poo'>?</span> <span class='emojis' title='Clown Face'>?</span> <span class='emojis' title='Ogre'>?</span> <span class='emojis' title='Goblin'>?</span> <span class='emojis' title='Ghost'>?</span> <span class='emojis' title='Alien'>?</span> <span class='emojis' title='Alien Monster'>?</span> <span class='emojis' title='Flying Saucer'>? </span> <span class='emojis' title='Robot Face'>?</span> <span class='emojis' title='Kiss Mark'>?</span> <span class='emojis' title='Waving Hand'>?</span> <span class='emojis' title='Raised Back of Hand'>?</span> <span class='emojis' title='Hand With Fingers Splayed'>?</span> <span class='emojis' title='Raised Hand'>✋</span> <span class='emojis' title='Vulcan Salute'>?</span> <span class='emojis' title='OK Hand'>?</span> <span class='emojis' title='Victory Hand'>✌ </span> <span class='emojis' title='Crossed Fingers'>?</span> <span class='emojis' title='Love-You Gesture'>? </span> <span class='emojis' title='Sign of the Horns'>?</span> <span class='emojis' title='Call Me Hand'>?</span> <span class='emojis' title='Backhand Index Pointing Left'>?</span> <span class='emojis' title='Backhand Index Pointing Right'>?</span> <span class='emojis' title='Backhand Index Pointing Up'>?</span> <span class='emojis' title='Middle Finger'>? </span> <span class='emojis' title='Backhand Index Pointing Down'>?</span> <span class='emojis' title='Index Pointing Up'>☝ </span> <span class='emojis' title='Thumbs Up'>?</span> <span class='emojis' title='Thumbs Down'>?</span> <span class='emojis' title='Raised Fist'>✊</span> <span class='emojis' title='Oncoming Fist'>?</span> <span class='emojis' title='Left-Facing Fist'>?</span> <span class='emojis' title='Right-Facing Fist'>?</span> <span class='emojis' title='Clapping Hands'>?</span> <span class='emojis' title='Raising Hands'>?</span> <span class='emojis' title='Open Hands'>?</span> <span class='emojis' title='Palms Up Together'>? </span> <span class='emojis' title='Handshake'>?</span> <span class='emojis' title='Folded Hands'>?</span> <span class='emojis' title='Writing Hand'>✍ </span> <span class='emojis' title='Nail Polish'>?</span> <span class='emojis' title='Selfie'>?</span> <span class='emojis' title='Flexed Biceps'>?</span> <span class='emojis' title='Ear'>?</span> <span class='emojis' title='Nose'>?</span> <span class='emojis' title='Brain'>? </span> <span class='emojis' title='Eyes'>?</span> <span class='emojis' title='Tongue'>?</span> <span class='emojis' title='Mouth'>?</span> <span class='emojis' title='Person Walking'>? </span> <span class='emojis' title='Person Running'>?</span> <span class='emojis' title='Woman Dancing'>?</span> <span class='emojis' title='Man Dancing'>?</span> <span class='emojis' title='Glasses'>?</span> <span class='emojis' title='Monkey Face'>?</span> <span class='emojis' title='See-No-Evil Monkey'>?</span> <span class='emojis' title='Hear-No-Evil Monkey'>?</span> <span class='emojis' title='Speak-No-Evil Monkey'>?</span> <span class='emojis' title='Crescent Moon'>?</span> <span class='emojis' title='Star'>⭐</span> <span class='emojis' title='Snowman Without Snow'>⛄</span> <span class='emojis' title='Rainbow'>?</span> <span class='emojis' title='Banana'>?</span> <span class='emojis' title='Pizza'>?</span> <span class='emojis' title='Hot Beverage'>☕</span> <span class='emojis' title='Beer Mug'>?</span> <span class='emojis' title='Clinking Glasses'>?</span> <span class='emojis' title='Balloon'>?</span> <span class='emojis' title='Wrapped Gift'>?</span> <span class='emojis' title='Trophy'>?</span> <span class='emojis' title='Sports Medal'>?</span> <span class='emojis' title='1st Place Medal'>?</span> <span class='emojis' title='2nd Place Medal'>?</span> <span class='emojis' title='3rd Place Medal'>?</span> <span class='emojis' title='Musical Note'>?</span> <span class='emojis' title='Drum'>?</span> <span class='emojis' title='Video Game'>?</span> <span class='emojis' title='House'>?</span> <span class='emojis' title='Love Letter'>?</span> <span class='emojis' title='Bomb'>?</span> <span class='emojis' title='Toilet'>?</span> <span class='emojis' title='Person Taking Bath'>?</span> <span class='emojis' title='Person in Bed'>?</span> <span class='emojis' title='Zzz'>?</span> <span class='emojis' title='Kitchen Knife'>?</span> <span class='emojis' title='Gem Stone'>?</span> <span class='emojis' title='Light Bulb'>?</span> <span class='emojis' title='Money Bag'>?</span> <span class='emojis' title='Chart Increasing'>?</span> <span class='emojis' title='Chart Decreasing'>?</span> <span class='emojis' title='Sparkling Heart'>? </span> <span class='emojis' title='Orange Heart'>? </span> <span class='emojis' title='Yellow Heart'>?</span> <span class='emojis' title='Green Heart'>?</span> <span class='emojis' title='Blue Heart'>?</span> <span class='emojis' title='Purple Heart'>?</span> <span class='emojis' title='Black Heart'>?</span> <span class='emojis' title='Broken Heart'>?</span> <span class='emojis' title='Hundred Points'>?</span> <span class='emojis' title='Speech Balloon'>?</span> <span class='emojis' title='Thought Balloon'>?</span> <span class='emojis' title='Fire'>?</span> <span class='emojis' title='Wastebasket'>?</span> <span class='emojis' title='No One Under Eighteen'>?</span> <span class='emojis' title='VS'>?</span> <span class='emojis' title='OK'>?</span> <span class='emojis' title='White Heavy Check Mark'>✅</span> <span class='emojis' title='Heavy Plus Sign'>➕</span> <span class='emojis' title='Question Mark'>❓</span> <span class='emojis' title='Exclamation Mark'>❗ </span>";
1075document.getElementsByClassName("collab-container")[0].appendChild(emojilist);
1076  
1077 //add emotions button
1078var emojistate;
1079var emojibutton = document.createElement("button");
1080emojibutton.innerHTML = "?";
1081emojibutton.id = "emojibtn";
1082emojibutton.title = "emojis";
1083emojibutton.style.margin = "0";
1084emojibutton.style.borderRadius = "0";
1085emojibutton.style.padding = "0";
1086emojibutton.style.borderBottom = "0";
1087emojibutton.style.width = "20px"; 
1088emojibutton.style.height = "1.5rem"; 
1089emojibutton.style.lineHeight = "100%"; 
1090emojibutton.style.position = "absolute";
1091emojibutton.style.bottom = "1.5rem";
1092emojibutton.style.left = "60px";
1093emojibutton.className = "control-button"
1094var body = document.getElementsByClassName("drawtogether-chat-container")[0];
1095body.appendChild(emojibutton);
1096emojibutton.addEventListener ("click", function() {
1097if (emojistate == 1){
1098document.getElementById("emojilist").style.display = "none";
1099window.emojistate = 0;
1100emojibutton.classList.remove("activated");
1101} else {
1102document.getElementById("emojilist").style.display = "block";
1103window.emojistate = 1;
1104emojibutton.classList.add("activated");
1105document.getElementById("emolist").style.display = "none";
1106window.emostate = 0;
1107emobutton.classList.remove("activated");
1108}
1109});
1110
1111
1112$(".emojis").click(function() {
1113document.getElementsByClassName("drawtogheter-chat-input")[0].value = document.getElementsByClassName("drawtogheter-chat-input")[0].value + $(this)[0].innerHTML;
1114});
1115
1116
1117//editing the textholder
1118document.getElementsByClassName("drawtogheter-chat-input")[0].setAttribute("placeholder", "");
1119
1120
1121//add spot button
1122
1123var spotbutton = document.createElement("button");
1124spotbutton.innerHTML = "?";
1125spotbutton.id = "spotbtn";
1126spotbutton.title = "share position";
1127spotbutton.style.margin = "0";
1128spotbutton.style.borderRadius = "0";
1129spotbutton.style.padding = "0";
1130spotbutton.style.borderBottom = "0";
1131spotbutton.style.width = "20px"; 
1132spotbutton.style.height = "1.5rem";
1133spotbutton.style.lineHeight = "1.5rem";
1134spotbutton.style.left = "120px";
1135spotbutton.style.bottom = "1.5rem";
1136spotbutton.style.position = "absolute";
1137spotbutton.className = "control-button"
1138var body = document.getElementsByClassName("drawtogether-chat-container")[0];
1139body.appendChild(spotbutton);
1140spotbutton.addEventListener ("click", function() {
1141var example = window.location.href;
1142var step_one = example.replace(/.*\D,/, "");
1143var chatinput = document.getElementsByClassName('drawtogheter-chat-input')[0];
1144if (chatinput.value.substring(chatinput.value.length - 1, chatinput.value.length) == " " || chatinput.value.length < 1){
1145chatinput.value = chatinput.value + step_one;	
1146} else {
1147chatinput.value = chatinput.value + " " + step_one;
1148}
1149
1150var input = document.getElementsByClassName("drawtogheter-chat-input")[0];
1151setCaretPosition(input, input.value.length);
1152//anondraw.collab.chat.onMessage( step_one);
1153});
1154
1155
1156
1157 //add ruler button
1158var rulerstate;
1159var rulerbutton = document.createElement("button");
1160rulerbutton.innerHTML = "?";
1161rulerbutton.id = "rulerbtn";
1162rulerbutton.style.margin = "0";
1163rulerbutton.style.borderRadius = "0";
1164rulerbutton.style.padding = "0";
1165rulerbutton.style.borderBottom = "0";
1166rulerbutton.style.minWidth = "2.3rem"; 
1167rulerbutton.className = "control-button"
1168var body = document.getElementsByClassName("drawtogether-control-container")[0];
1169body.insertBefore(rulerbutton, body.childNodes[17]);
1170
1171
1172
1173
1174
1175//add ruler slider (only visible when active)
1176var rulerslider = document.createElement('input');
1177rulerslider.id = "rulerslider";
1178rulerslider.title = "grid scale";
1179rulerslider.type = 'range';
1180rulerslider.min = 0.01;
1181rulerslider.max = 0.09;
1182rulerslider.value = 0.01;
1183rulerslider.step = 0.01;
1184
1185
1186rulerslider.style.color = "rgb(196, 196, 196)";
1187rulerslider.style.backgroundColor = "#e6e6e6";
1188	
1189	
1190	
1191rulerslider.style.webkitAppearance = "none";	
1192rulerslider.style.appearance = "none";
1193rulerslider.style.boxSizing = "border-box";	
1194rulerslider.style.height = "2.3rem";
1195rulerslider.style.padding = "0px";
1196rulerslider.style.margin = "0px";
1197rulerslider.style.marginRight = "10px";
1198rulerslider.style.border = "0px";
1199rulerslider.style.outline = "0px";
1200rulerslider.style.verticalAlign = "bottom";
1201rulerslider.style.display = "none";
1202rulerslider.style.width = "4.6rem";
1203
1204    
1205document.getElementsByClassName("drawtogether-control-container")[0].insertBefore(rulerslider, document.getElementsByClassName("drawtogether-control-container")[0].childNodes[18]);
1206
1207
1208
1209
1210document.getElementById("rulerslider").oninput = function() {
1211  
1212  document.getElementsByClassName("drawtogheter-chat-input")[0].setAttribute("placeholder", document.getElementById("rulerslider").value);
1213}
1214
1215rulerbutton.addEventListener ("click", function() {
1216if (rulerstate == 1){
1217Paint.prototype.PATH_PRECISION = 1E3;
1218window.rulerstate = 0;
1219rulerbutton.classList.remove("activated");
1220document.getElementById("rulerslider").style.display = "none";
1221
1222
1223document.getElementById("rulerbtn").style.borderBottom = '0';
1224document.getElementById("rulerslider").style.borderBottom = '0';
1225document.getElementById("arrowup").style.left = document.getElementsByClassName("paint-selected-tool")[0].offsetLeft + 19 - 8;
1226} else {
1227Paint.prototype.PATH_PRECISION = 0.01;	
1228window.rulerstate = 1;
1229rulerbutton.classList.add("activated");
1230document.getElementById("rulerslider").style.display = "inline-block";
1231
1232
1233document.getElementById("rulerbtn").style.borderBottom = '5px solid #00eef9';
1234document.getElementById("rulerslider").style.borderBottom = '5px solid #00eef9';
1235document.getElementById("arrowup").style.left = document.getElementsByClassName("paint-selected-tool")[0].offsetLeft + 19 - 8;
1236}
1237});
1238
1239document.getElementById("rulerslider").addEventListener("change", function(){
1240Paint.prototype.PATH_PRECISION = document.getElementById("rulerslider").value;
1241});
1242
1243
1244document.getElementById("rulerslider").classList.add("oslider");
1245document.getElementById("rulerslider").classList.add("control-integer-input");
1246
1247//editing the tooltips
1248document.getElementById("rulerbtn").setAttribute("title", "Snap to grid");
1249document.getElementById("crossbtn").setAttribute("title", "Where your coords are pointing at");
1250document.getElementById("lightbtn").setAttribute("title", "Turn the background white");
1251document.getElementById("chatbtn").setAttribute("title", "Show or hide the chat window");
1252
1253
1254//adding yellow highlight at favs and regions buttons
1255var openfav;
1256var openreg;
1257document.getElementsByClassName("favorites-button")[0].addEventListener("click",
1258function() {
1259if (openfav == 1) {
1260document.getElementsByClassName("favorites-button")[0].classList.remove("activated");
1261document.getElementById('arrowup').style.visibility = 'visible';
1262window.openfav = 0;
1263} else {
1264document.getElementsByClassName("favorites-button")[0].classList.add("activated");
1265document.getElementsByClassName("regions-button")[0].classList.remove("activated");
1266document.getElementById('arrowup').style.visibility = 'hidden';
1267window.openfav = 1;
1268window.openreg = 0;
1269}
1270 }.bind(this));
1271 
1272 document.getElementsByClassName("regions-button")[0].addEventListener("click",
1273function() {
1274if (openreg == 1) {
1275document.getElementsByClassName("regions-button")[0].classList.remove("activated");
1276document.getElementById('arrowup').style.visibility = 'visible';
1277window.openreg = 0;
1278} else {
1279document.getElementsByClassName("regions-button")[0].classList.add("activated");
1280document.getElementsByClassName("favorites-button")[0].classList.remove("activated");
1281document.getElementById('arrowup').style.visibility = 'hidden';
1282window.openreg = 1;
1283window.openfav = 0;
1284}
1285 }.bind(this));
1286 
1287 
1288 //add save button
1289var savebtn = document.createElement("DIV");
1290savebtn.innerHTML = "?";
1291savebtn.id = "linksave";
1292//savebtn.href = "#";
1293//savebtn.download = "image.png";
1294savebtn.style.textAlign = "center";
1295savebtn.style.margin = "0";
1296savebtn.style.textDecoration = "none";
1297savebtn.style.borderRadius = "0";
1298savebtn.style.padding = "0";
1299savebtn.style.borderBottom = "0";
1300savebtn.style.minWidth = "2.3rem"; 
1301savebtn.className = "control-button";
1302var body = document.getElementsByClassName("drawtogether-control-container")[0];
1303body.insertBefore(savebtn, body.childNodes[2]);
1304
1305//const rand = i=>Math.random()*i<<0;
1306//const fileName = `image${100+rand(100)}.png`;
1307
1308document.getElementById("linksave").addEventListener ("click", function(e) {
1309
1310var a = [anondraw.collab.paint.local.leftTopX, anondraw.collab.paint.local.leftTopY];
1311var b = [anondraw.collab.paint.local.leftTopX + (anondraw.collab.paint.public.canvas.width / anondraw.collab.paint.local.zoom), anondraw.collab.paint.local.leftTopY + (anondraw.collab.paint.public.canvas.height / anondraw.collab.paint.local.zoom)];
1312   var c = document.createElement("img"),
1313        d = anondraw.collab.paint.exportImage(a, b);
1314    c.src = d;
1315    c.alt = "Right click to save";
1316	c.title = "Right click to save";
1317	c.style.maxWidth = '18rem'
1318	c.style.maxHeight = '9rem'
1319anondraw.collab.chat.addElementAsMessage(c);
1320  
1321  });
1322 
1323 
1324 
1325 //add arrow to seleted tool 
1326 var arrowup = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
1327arrowup.setAttribute('width',16);
1328arrowup.setAttribute('height',16);
1329arrowup.setAttribute('viewBox','0 0 16 16');
1330arrowup.setAttribute('id','arrowup');
1331var middlex = document.getElementsByClassName("paint-selected-tool")[0].offsetLeft + 19 - 8;
1332arrowup.setAttribute('style','position:absolute; z-index:999999; pointer-events: none; left:' + middlex + '; top: 27px;');
1333var svgNS = arrowup.namespaceURI; var path = document.createElementNS(svgNS,'path');
1334path.setAttribute('x',0); path.setAttribute('y',0);
1335path.setAttribute('d','M296,339 L304,349 L288,349 L296,339 Z M296,339');
1336path.setAttribute('style','fill:#FFF;stroke:"#FFF";stroke-width:0');
1337path.setAttribute('transform','translate(-288.000000, -336.000000)');
1338arrowup.appendChild(path);
1339document.getElementsByClassName('collab-container')[0].appendChild(arrowup);
1340
1341  document.getElementById("movebtn").addEventListener('click', function() {
1342  document.getElementById("arrowup").style.left = document.getElementById("movebtn").offsetLeft + 19 - 8;
1343  });  
1344  document.getElementById("brushbtn").addEventListener('click', function() {
1345  document.getElementById("arrowup").style.left = document.getElementById("brushbtn").offsetLeft + 19 - 8;
1346  });  
1347  document.getElementById("textbtn").addEventListener('click', function() {
1348  document.getElementById("arrowup").style.left = document.getElementById("textbtn").offsetLeft + 19 - 8;
1349  });  
1350  document.getElementById("selectbtn").addEventListener('click', function() {
1351  document.getElementById("arrowup").style.left = document.getElementById("selectbtn").offsetLeft + 19 - 8;
1352  });  
1353  document.getElementById("linebtn").addEventListener('click', function() {
1354  document.getElementById("arrowup").style.left = document.getElementById("linebtn").offsetLeft + 19 - 8;
1355  });  
1356  document.getElementById("pickerbtn").addEventListener('click', function() {
1357  document.getElementById("arrowup").style.left = document.getElementById("pickerbtn").offsetLeft + 19 - 8;
1358  });  
1359  document.getElementById("zoombtn").addEventListener('click', function() {
1360  document.getElementById("arrowup").style.left = document.getElementById("zoombtn").offsetLeft + 19 - 8;
1361  });
1362 
1363
1364//move favorites and regions menus to let it close to their trigger buttons 
1365 document.getElementsByClassName('favorites-window')[0].style.right = "auto";
1366 document.getElementsByClassName('favorites-window')[0].style.bottom = "auto";
1367 document.getElementsByClassName('regions-window')[0].style.right = "auto";
1368 document.getElementsByClassName('regions-window')[0].style.bottom = "auto";
1369 document.getElementsByClassName('favorites-window')[0].style.top = "0";
1370document.getElementsByClassName('regions-window')[0].style.top = "0";
1371 
1372 
1373 //reduce send chat button
1374 document.getElementsByClassName('button-small')[0].id = "sendchat";
1375 document.getElementsByClassName('button-small')[0].innerHTML = "✔";
1376 document.getElementsByClassName('button-small')[0].style.width = "20px";
1377 document.getElementsByClassName('button-small')[0].style.height = "100%";
1378 document.getElementsByClassName('button-small')[0].style.lineHeight = "2em";
1379 document.getElementsByClassName('button-small')[0].style.fontSize = "1em !important";
1380  document.getElementsByClassName('button-small')[0].style.right = "20px";
1381 document.getElementsByClassName('drawtogheter-chat-input')[0].style.width = "100%";
1382 document.getElementsByClassName('drawtogheter-chat-input')[0].style.height = "100%";
1383document.getElementsByClassName('drawtogheter-chat-input')[0].style.padding = "0px 3.5em 0px 0.5em";
1384 document.getElementsByClassName('inputcontainer')[0].style.height = "1.5rem";
1385 
1386 //add clean chat button
1387var cleanchatbtn = document.createElement("button");
1388cleanchatbtn.fontSize = "5px";
1389cleanchatbtn.innerHTML = "✖";
1390cleanchatbtn.style.height = "100%";
1391cleanchatbtn.style.width = "20px";
1392cleanchatbtn.id = "cleanchatbtn";
1393cleanchatbtn.style.margin = "0";
1394cleanchatbtn.style.right = "0px";
1395cleanchatbtn.style.borderRadius = "0";
1396cleanchatbtn.style.padding = "0";
1397cleanchatbtn.style.borderBottom = "0";
1398cleanchatbtn.style.position = "absolute";
1399cleanchatbtn.className = "control-button";
1400//cleanchatbtn.style.backgroundColor = "#323e4a";
1401var body = document.getElementsByClassName("inputcontainer")[0];
1402body.insertBefore(cleanchatbtn, body.childNodes[1]);
1403
1404//document.head.insertAdjacentHTML('beforeend','<style>#cleanchatbtn:hover {background-color: #485869;}</style>');
1405
1406document.getElementById("cleanchatbtn").addEventListener ("click", function() {
1407document.getElementsByClassName('drawtogheter-chat-input')[0].value = "";
1408document.getElementsByClassName("drawtogheter-chat-input")[0].style.background = 'white';
1409document.getElementsByClassName("drawtogheter-chat-input")[0].placeholder = '';
1410document.getElementsByClassName("drawtogether-control-container")[0].style.background = 'rgb(39,77,99)'; //dark blue
1411document.title = "AnonProMod ? v1.6";
1412});
1413
1414
1415
1416//king
1417document.getElementsByClassName("drawtogether-info-playerlist")[0].removeChild(document.getElementsByClassName("drawtogether-pl-title")[0]);
1418
1419
1420DrawTogether.prototype.updatePlayerList = function() {
1421    for (var a = 3196 === this.account.id; this.playerListDom.firstChild;) this.playerListDom.removeChild(this.playerListDom.firstChild);
1422    var b = this.playerListDom.appendChild(document.createElement("span"));
1423    b.appendChild(document.createTextNode("PlayerList (" + this.playerList.length + ")"));
1424    b.className = "drawtogether-pl-title";
1425    for (b = 0; b < this.playerList.length; b++) a && 2518 === this.playerList[b].userid || this.playerListDom.appendChild(this.createPlayerDom(this.playerList[b]))	
1426
1427var children = document.getElementsByClassName("drawtogether-info-playerlist")[0].children;
1428var toppest = 1000;
1429for (var i = 0; i < children.length; i++) {
1430  var currentking = children[i].offsetTop;
1431 if (currentking < toppest && !children[i].innerHTML.includes('PlayerList')) {
1432var toppest = currentking;
1433var kingelement = children[i];
1434window.toppest = currentking;
1435window.kingelement = children[i];
1436 }	  
1437}
1438if (!kingelement.innerHTML.includes(" ?")){
1439var crown = document.createTextNode(" ?");     // Create a text node
1440kingelement.appendChild(crown); 	
1441}
1442
1443};
1444
1445
1446//remove notification from /me  
1447     anondraw.collab.network.on("emote", function(b) {	
1448		var personame;
1449var personame = localStorage.getItem("drawtogether-name");
1450if (!personame){
1451var personame = '000000000000000000000000000000000';
1452window.personame = '000000000000000000000000000000000';
1453}		 
1454if (b.user == personame){
1455document.getElementsByClassName("drawtogheter-chat-input")[0].style.background = 'white';
1456document.getElementsByClassName("drawtogheter-chat-input")[0].placeholder = '';
1457document.getElementsByClassName("drawtogether-control-container")[0].style.background = 'rgb(35, 52, 69)';
1458}
1459    });
1460 
1461 
1462 //keep focus on chat regardless of the mouse position
1463 
1464 //turned off by peer pressure
1465window.lastclickedelement = 'canvas';
1466
1467window.onclick = function(e) {
1468 if (window.forcechatfocus == 1) { 	
1469if (e.target.classList.contains('paint-canvas')){
1470window.lastclickedelement = 'canvas';	
1471	 } else {
1472window.lastclickedelement = 'chat';		 
1473	 }
1474 } else {
1475window.lastclickedelement = 'canvas';	 
1476 }	 
1477};
1478
1479
1480
1481 //turned off by peer pressure
1482 
1483window.onkeydown = function(event) {	     
1484	 if (!$(".contestwindow:eq(0)").is(":visible") && !$(".gui-prompt-container:eq(0)").is(":visible") && !$(".gui-window:eq(0)").is(":visible") && !$(".titlecontainer:eq(0)").is(":visible") && !$(".msettings_main:eq(0)").is(":visible") && !$(".regions-window:eq(0)").is(":visible") && !$(".favorites-window:eq(0)").is(":visible") && !document.getElementsByClassName("paint-selected-tool")[0].innerHTML.includes('text.png') && window.lastclickedelement != 'canvas' && document.activeElement.tagName != 'TEXTAREA'  && document.activeElement.tagName != 'INPUT') {
1485event.preventDefault();
1486document.getElementsByClassName('drawtogheter-chat-input')[0].focus();
1487	 }
1488	 
1489};
1490
1491
1492//recover previous chat msgs
1493
1494document.onkeydown = checkKey;
1495
1496
1497var rollchat = 0;
1498function checkKey(e) {
1499    e = e || window.event;
1500
1501    if (e.keyCode == '38' && chatbackup1 !== undefined) {
1502        if (rollchat == 0){
1503document.getElementsByClassName('drawtogheter-chat-input')[0].value = chatbackup1;
1504window.rollchat = 1;			
1505		} else if (rollchat == 1){
1506document.getElementsByClassName('drawtogheter-chat-input')[0].value = chatbackup2;	
1507window.rollchat = 2;		
1508		} else if (rollchat == 2){
1509document.getElementsByClassName('drawtogheter-chat-input')[0].value = chatbackup3;
1510window.rollchat = 3;			
1511		} else if (rollchat == 3){
1512document.getElementsByClassName('drawtogheter-chat-input')[0].value = "";
1513window.rollchat = 0;			
1514		}
1515    }
1516    else if (e.keyCode == '40' && chatbackup3 !== undefined) {
1517       if (rollchat == 0){
1518document.getElementsByClassName('drawtogheter-chat-input')[0].value = chatbackup3;
1519window.rollchat = 3;			
1520		} else if (rollchat == 3){
1521document.getElementsByClassName('drawtogheter-chat-input')[0].value = chatbackup2;	
1522window.rollchat = 2;		
1523		} else if (rollchat == 2){
1524document.getElementsByClassName('drawtogheter-chat-input')[0].value = chatbackup1;
1525window.rollchat = 1;			
1526		} else if (rollchat == 1){
1527document.getElementsByClassName('drawtogheter-chat-input')[0].value = "";
1528window.rollchat = 0;			
1529		}
1530    }
1531	
1532		 if (perspective == 1){
1533
1534 if (e.keyCode == '81') {
1535ppointAbutton.checked = true;
1536var step_one = document.getElementById("ppointAbtn").value;
1537
1538window.perspectivex = Number(step_one.replace(/,.*/g, ""));
1539window.perspectivey  = Number(step_one.replace(/.*,/g, ""));
1540
1541document.getElementById("ppointBbtn").checked = false;
1542document.getElementById("ppointCbtn").checked = false;
1543
1544document.getElementById("ppointAbtnlabel").innerHTML = '<i class="material-icons-sharp">check_box</i>';	
1545document.getElementById("ppointBbtnlabel").innerHTML = '<i class="material-icons-sharp">check_box_outline_blank</i>';
1546document.getElementById("ppointCbtnlabel").innerHTML = '<i class="material-icons-sharp">check_box_outline_blank</i>';
1547
1548window.activecheckbox = document.getElementById("ppointAbtn");
1549 }
1550  if (e.keyCode == '87') {
1551ppointBbutton.checked = true;
1552var step_one = document.getElementById("ppointBbtn").value;
1553
1554window.perspectivex = Number(step_one.replace(/,.*/g, ""));
1555window.perspectivey  = Number(step_one.replace(/.*,/g, ""));
1556
1557document.getElementById("ppointAbtn").checked = false;
1558document.getElementById("ppointCbtn").checked = false;
1559document.getElementById("ppointBbtnlabel").innerHTML = '<i class="material-icons-sharp">check_box</i>';	
1560document.getElementById("ppointAbtnlabel").innerHTML = '<i class="material-icons-sharp">check_box_outline_blank</i>';
1561document.getElementById("ppointCbtnlabel").innerHTML = '<i class="material-icons-sharp">check_box_outline_blank</i>';
1562
1563window.activecheckbox = document.getElementById("ppointBbtn");		 
1564 }
1565  if (e.keyCode == '69') {
1566ppointCbutton.checked = true;
1567var step_one = document.getElementById("ppointCbtn").value;
1568
1569window.perspectivex = Number(step_one.replace(/,.*/g, ""));
1570window.perspectivey  = Number(step_one.replace(/.*,/g, ""));
1571
1572document.getElementById("ppointAbtn").checked = false;
1573document.getElementById("ppointBbtn").checked = false;
1574document.getElementById("ppointCbtnlabel").innerHTML = '<i class="material-icons-sharp">check_box</i>';	
1575document.getElementById("ppointAbtnlabel").innerHTML = '<i class="material-icons-sharp">check_box_outline_blank</i>';
1576document.getElementById("ppointBbtnlabel").innerHTML = '<i class="material-icons-sharp">check_box_outline_blank</i>';
1577
1578window.activecheckbox = document.getElementById("ppointCbtn");		 
1579 }	 
1580}
1581}
1582
1583
1584
1585
1586
1587//adjust messages box do stick in the input text box
1588document.getElementsByClassName('messagecontainer')[0].style.height = "calc(100% - 1.5rem)";
1589
1590//reduce padding in chat
1591document.head.insertAdjacentHTML('beforeend','<style> .drawtogether-chat-container .chat-message {padding: .2em;font-size: 1.2em;color: #25262b; word-wrap: break-word; margin: .4em; background: rgba(0,0,0,0.05)} </style>');
1592
1593//reduce padding in namelist
1594document.head.insertAdjacentHTML('beforeend','<style> .drawtogether-info-playerlist .drawtogether-player {display: inline-block;cursor: pointer;width: 100%;color: #bdcddd;font-size: 1em;padding-left: 0;padding-bottom: 0;padding-top: 0;margin-bottom: .1em;background: #233445;transition-duration: .2s;} </style>');
1595
1596//hide icons
1597document.head.insertAdjacentHTML('beforeend','<style> .drawtogether-player-button {display: none;padding: .2em; vertical-align: middle; margin-right: .2em; float:right; height:1.3em}.drawtogether-player:hover > .drawtogether-player-button {display: inline-block;}.drawtogether-player-button img {vertical-align: top;} .fa {font-size: 0.9em}.drawtogether-activated {display: inline-block !important;}</style>');
1598
1599
1600//attach zoom to mousewheel event
1601document.getElementsByClassName("drawtogether-paint-container")[0].addEventListener("wheel", wheelfunction);
1602
1603function wheelfunction(event) {
1604var y = event.deltaY;
1605if (y > 0){	
1606anondraw.collab.paint.zoomAbsolute(anondraw.collab.paint.public.zoom * 1 / 1.2);
1607document.getElementById("zoomslider").value = anondraw.collab.paint.public.zoom;
1608} else if (y < 0) {
1609anondraw.collab.paint.zoomAbsolute(anondraw.collab.paint.public.zoom * 1.2);	
1610document.getElementById("zoomslider").value = anondraw.collab.paint.public.zoom;
1611}
1612if (document.getElementById("wallpapercontainer").style.backgroundImage != 'url("images/transparent.png")'){
1613document.getElementById("wallpapercontainer").style.backgroundSize = (anondraw.collab.paint.public.zoom / (window.originalzoom)) * 100 + "%";
1614} else {
1615document.getElementById("wallpapercontainer").style.backgroundSize = anondraw.collab.paint.public.zoom * 12.45 + "%";	
1616}	
1617}
1618
1619
1620
1621//color on whole sentence and resize emojis
1622Chat.prototype.addMessage = function(a, b, c, d) {        	
1623	
1624    var e = this.messagesDom.appendChild(document.createElement("div"));
1625    e.classList.add("chat-message");
1626    var f = new Date,
1627        f = ("0" + f.getHours()).slice(-2) + ":" + ("0" + f.getMinutes()).slice(-2) + ":" + ("0" + f.getSeconds()).slice(-2);
1628    if ("undefined" == typeof b) b = a;
1629    else {
1630        var h = e.appendChild(document.createElement("span"));
1631		
1632
1633var cleanername = a.replace(/\(.*\)/g, "");
1634var cleanername = cleanername.replace(/\[.*\]/g, "");
1635var cleanername = cleanername.replace(/\<.*\>/g, "");
1636var cleanername = cleanername.replace(/₀/g, "");
1637var cleanername = cleanername.replace(/₁/g, "");	
1638var cleanername = cleanername.replace(/₂/g, "");	
1639var cleanername = cleanername.replace(/₃/g, "");	
1640var cleanername = cleanername.replace(/₄/g, "");	
1641var cleanername = cleanername.replace(/₅/g, "");	
1642var cleanername = cleanername.replace(/₆/g, "");	
1643var cleanername = cleanername.replace(/₇/g, "");	
1644var cleanername = cleanername.replace(/₈/g, "");	
1645var cleanername = cleanername.replace(/₉/g, "");	
1646var cleanername = cleanername.trim();
1647
1648		
1649	if (cleanername.length < 16){	
1650        h.appendChild(document.createTextNode(cleanername + ": "));
1651	} else {		
1652var shortenname = cleanername.substring(0, 14);
1653var shortenname = shortenname + "..";	
1654h.appendChild(document.createTextNode(shortenname + ": "));
1655	}		
1656
1657       // h.style.color = this.string2Color(a)
1658	   if (a != 'SERVER' && a != 'Regions' && a != 'Inspect tool' && a != 'Favorite added' && a != 'Snapshot taken' && a != 'Background URL' && a != 'Notification' && a != 'Anchor set' && a != 'Buttons' && a != 'Snap to grid' && a != 'WARNING!'){
1659	   h.style.color = "#000" //black nicknames to contrast with the rest of the sentence	 
1660
1661if (ghoststate == 1){
1662h.style.color = "#FFF"	
1663				if (a.substring(a.length - 1, a.length) == '₁'){
1664//h.className = h.className + " color1";
1665h.style.textShadow = '0 0 4px #e62e00';
1666} else if (a.substring(a.length - 1, a.length) == '₂'){
1667//h.className = h.className + " color2";
1668h.style.textShadow = '0 0 4px #d700d7';
1669} else if (a.substring(a.length - 1, a.length) == '₃'){
1670//h.className = h.className + " color3";
1671h.style.textShadow = '0 0 4px #8521e8';	
1672} else if (a.substring(a.length - 1, a.length) == '₄'){
1673//h.className = h.className + " color4";
1674h.style.textShadow = '0 0 4px #0066cc';	
1675} else if (a.substring(a.length - 1, a.length) == '₅'){
1676//h.className = h.className + " color5";
1677h.style.textShadow = '0 0 4px #009e9e';
1678} else if (a.substring(a.length - 1, a.length) == '₆'){
1679//h.className = h.className + " color6";
1680h.style.textShadow = '0 0 4px #a9a900';
1681} else if (a.substring(a.length - 1, a.length) == '₇'){
1682//h.className = h.className + " color7";
1683h.style.textShadow = '0 0 4px #669900';
1684} else if (a.substring(a.length - 1, a.length) == '₈'){
1685//h.className = h.className + " color8";
1686h.style.textShadow = '0 0 4px #7a7a52';
1687} else if (a.substring(a.length - 1, a.length) == '₉'){
1688//h.className = h.className + " color9";
1689h.style.textShadow = '0 0 4px #996633';
1690} else {	   
1691	   h.style.textShadow = '0 0 4px ' + anondraw.collab.chat.string2Color(a);
1692}
1693}
1694	   //$('<style type="text/css">.foo {color:' + this.string2Color(a) + '; text-shadow: 0 0 4px ' + this.string2Color(a) + ';}</style>').prependTo(h);
1695		}
1696
1697
1698    }
1699    if (h = localStorage.getItem("chatFilterByWordsArr")) var g = JSON.parse(h);
1700    var k =
1701        h = !1,
1702        l = !1;
1703    if (g)
1704        for (var m = 0; m < g.length; m++) {
1705            var n = -1,
1706                n = "",
1707                n = g[m].looseMatch ? g[m].inputText : this.strictMatch1 + g[m].inputText + this.strictMatch2,
1708                n = RegExp(n, this.matchSearchMode).test(b);
1709			
1710            1 < g[m].inputText.length && n && (e.style.opacity = 0.01 * g[m].visibility, g[m].overrideMute && (h = !0), g[m].mute && (k = !0), g[m].globalNotification && (l = !0))
1711        }
1712    if (g = localStorage.getItem("chatFilterByPlayerArr")) var p = JSON.parse(g);
1713    if (p)
1714			
1715        for (m = 0; m < p.length; m++)
1716            if (g = p[m].socketid && p[m].socketid == d, p[m].userid && p[m].userid == c || g) e.style.opacity =
1717                0.01 * p[m].visibility, 0 == p[m].visibility && (e.style.display = "none"), p[m].overrideMute && (h = !0), p[m].mute && (k = !0), p[m].globalNotification && (l = !0);
1718				e.style.color = this.string2Color(a);
1719
1720if (ghoststate == 0){	
1721				if (a.substring(a.length - 1, a.length) == '₁'){
1722//h.className = h.className + " color1";
1723e.className = e.className + " color1";
1724} else if (a.substring(a.length - 1, a.length) == '₂'){
1725//h.className = h.className + " color2";
1726e.className = e.className + " color2";
1727} else if (a.substring(a.length - 1, a.length) == '₃'){
1728//h.className = h.className + " color3";
1729e.className = e.className + " color3";	
1730} else if (a.substring(a.length - 1, a.length) == '₄'){
1731//h.className = h.className + " color4";
1732e.className = e.className + " color4";	
1733} else if (a.substring(a.length - 1, a.length) == '₅'){
1734//h.className = h.className + " color5";
1735e.className = e.className + " color5";
1736} else if (a.substring(a.length - 1, a.length) == '₆'){
1737//h.className = h.className + " color6";
1738e.className = e.className + " color6";
1739} else if (a.substring(a.length - 1, a.length) == '₇'){
1740//h.className = h.className + " color7";
1741e.className = e.className + " color7";
1742} else if (a.substring(a.length - 1, a.length) == '₈'){
1743//h.className = h.className + " color8";
1744e.className = e.className + " color8";
1745} else if (a.substring(a.length - 1, a.length) == '₉'){
1746//h.className = h.className + " color9";
1747e.className = e.className + " color9";
1748}
1749} else {
1750				if (a.substring(a.length - 1, a.length) == '₁'){
1751//h.className = h.className + " color1";
1752e.className = e.className + " color1ghost";
1753} else if (a.substring(a.length - 1, a.length) == '₂'){
1754//h.className = h.className + " color2";
1755e.className = e.className + " color2ghost";
1756} else if (a.substring(a.length - 1, a.length) == '₃'){
1757//h.className = h.className + " color3";
1758e.className = e.className + " color3ghost";	
1759} else if (a.substring(a.length - 1, a.length) == '₄'){
1760//h.className = h.className + " color4";
1761e.className = e.className + " color4ghost";	
1762} else if (a.substring(a.length - 1, a.length) == '₅'){
1763//h.className = h.className + " color5";
1764e.className = e.className + " color5ghost";
1765} else if (a.substring(a.length - 1, a.length) == '₆'){
1766//h.className = h.className + " color6";
1767e.className = e.className + " color6ghost";
1768} else if (a.substring(a.length - 1, a.length) == '₇'){
1769//h.className = h.className + " color7";
1770e.className = e.className + " color7ghost";
1771} else if (a.substring(a.length - 1, a.length) == '₈'){
1772//h.className = h.className + " color8";
1773e.className = e.className + " color8ghost";
1774} else if (a.substring(a.length - 1, a.length) == '₉'){
1775//h.className = h.className + " color9";
1776e.className = e.className + " color9ghost";
1777} else {
1778e.style.color = '#FFF';
1779e.style.textShadow  = '0 0 4px ' + anondraw.collab.chat.string2Color(a);
1780}
1781}
1782
1783
1784if (/^(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])+$/.test(b)){
1785e.style.fontSize = "2em";
1786}
1787var personame;
1788var personame = localStorage.getItem("drawtogether-name");
1789if (!personame){
1790var personame = '000000000000000000000000000000000';
1791window.personame = '000000000000000000000000000000000';
1792}
1793if (a != 'SERVER' && a != personame){
1794var words = b.split(/[\s,]+/);
1795for (var i = 0; i < words.length; i++) {
1796if (akaarray.indexOf(words[i] )!=-1){
1797	var sliceda;
1798	if (a.length > 7){
1799		var sliceda = a.slice(0, 6) + "..";
1800	} else {
1801	var sliceda = a;	
1802	}
1803	
1804	document.title = sliceda + ": " + b;
1805document.getElementsByClassName("drawtogheter-chat-input")[0].placeholder = a;
1806document.getElementsByClassName("drawtogether-control-container")[0].style.background = 'rgb(192, 255, 7)';	
1807document.getElementsByClassName("drawtogheter-chat-input")[0].style.background = 'rgb(192, 255, 7)';
1808	break
1809}
1810}
1811} 
1812
1813				
1814    this.addMessageToDom(e, b);
1815    e.title = f;
1816    e.alt = f;
1817    a === b || (this.userSettings.getBoolean("Mute chat") && !h || k) || (this.messageSound.volume = localStorage.getItem("chatBeepVolume") || 1, this.messageSound.play());
1818    l && ("granted" !== Notification.permission ? Notification.requestPermission() : document[this.hidden] && new Notification(a + ":", {
1819        icon: "http://www.anondraw.com/favicon.ico",
1820        body: b
1821    }))
1822};
1823
1824
1825
1826
1827
1828//fix leaving chat icons
1829document.head.insertAdjacentHTML('beforeend','<style>.chat-message .fa-trash {height: 1.3em;} </style>');
1830document.head.insertAdjacentHTML('beforeend','<style>.chat-message .fa-caret-up {height: 1.3em;} </style>');
1831document.head.insertAdjacentHTML('beforeend','<style>.chat-message .fa-envelope {height: 1.3em;} </style>');
1832
1833 
1834 //transparency to afk names e color nicknames
1835 
1836 document.head.insertAdjacentHTML('beforeend','<style> .afk {opacity: 0.5;}</style>');
1837 
1838 document.head.insertAdjacentHTML('beforeend','<style>.color1 {color: #e62e00 !important}.color2 {color: #d700d7 !important}.color3 {color: #8521e8 !important}.color4 {color: #0066cc !important}.color5 {color: #009e9e !important}.color6 {color: #a9a900 !important}.color7 {color: #669900 !important}.color8 {color: #7a7a52 !important}.color9 {color: #996633 !important}</style>');
1839 
1840  document.head.insertAdjacentHTML('beforeend','<style>.color1ghost {color: #FFF !important; text-shadow: 0px 0px 4px #e62e00 !important}.color2ghost {color: #FFF !important; text-shadow: 0px 0px 4px #d700d7 !important}.color3ghost {color: #FFF !important; text-shadow: 0px 0px 4px #8521e8 !important}.color4ghost {color: #FFF !important; text-shadow: 0px 0px 4px #0066cc !important}.color5ghost {color: #FFF !important; text-shadow: 0px 0px 4px #009e9e !important}.color6ghost {color: #FFF !important; text-shadow: 0px 0px 4px #a9a900 !important}.color7ghost {color: #FFF !important; text-shadow: 0px 0px 4px #669900 !important}.color8ghost {color: #FFF !important; text-shadow: 0px 0px 4px #7a7a52 !important}.color9ghost {color: #FFF !important; text-shadow: 0px 0px 4px #996633 !important}</style>');
1841 /*
1842  document.head.insertAdjacentHTML('beforeend','<style>.drawtogether-player-name.color1 {font-weight: 800;}.drawtogether-player-name.color2 {font-weight: 800;}.drawtogether-player-name.color3 {font-weight: 800;}.drawtogether-player-name.color4 {font-weight: 800;}.drawtogether-player-name.color5 {font-weight: 800;}.drawtogether-player-name.color6 {font-weight: 800;}.drawtogether-player-name.color7 {font-weight: 800;}.drawtogether-player-name.color8 {font-weight: 800;}.drawtogether-player-name.color9 {font-weight: 800;}</style>');
1843 */
1844anondraw.collab.createPlayerDom = function(a) {
1845    var b = document.createElement("div");
1846    b.className = "drawtogether-player " + (a.currentPlayer ? "currentplayer" : "");
1847    b.addEventListener("click", function(a, b) {
1848        this.moveQueue.length = 0;
1849        this.moveScreenTo(a)
1850    }.bind(this, a.id));
1851    var c = b.appendChild(document.createElement("span"));
1852    c.className = "drawtogether-player-button drawtogether-follow-button";
1853    a.id == this._forceFollow && c.classList.add("drawtogether-activated");
1854    c.appendChild(document.createElement("img")).src = "images/icons/eye.png";
1855    c.addEventListener("click", function(a, b) {
1856        this.moveQueue.length = 0;
1857        this._forceFollow = this._forceFollow == a ? null : a;
1858        this.updatePlayerList()
1859    }.bind(this, a.id));
1860    c = document.createElement("span");
1861    c.className = "drawtogether-player-button drawtogether-upvote-button fa fa-caret-up";
1862    c.addEventListener("click", function(a, b) {
1863        this.network.socket.emit("upvote", a)
1864    }.bind(this, a.id));
1865    if (a.userid) {
1866        var d = document.createElement("span");
1867        d.className = "drawtogether-player-button fa fa-envelope";
1868        d.addEventListener("click", function(b,
1869            c) {
1870            this.pms.createChatWindow(b, a.name)
1871        }.bind(this, a.userid))
1872    }
1873	
1874
1875	
1876
1877	
1878
1879	
1880    if (this.reputation >= this.KICKBAN_MIN_REP) {
1881        var e = document.createElement("span");
1882        e.className = "drawtogether-player-button drawtogether-kickban-button fa fa-trash";
1883        e.addEventListener("click", this.kickban.bind(this, a.id));
1884        b.appendChild(e)
1885    }
1886    var f = document.createElement("span");
1887		if (a.name.indexOf("afk")!=-1 || a.name.indexOf("brb")!=-1 || a.name.indexOf("AFK")!=-1 || a.name.indexOf("BRB")!=-1 || a.name.indexOf("Afk")!=-1 || a.name.indexOf("Brb")!=-1){
1888		f.className = "drawtogether-player-name afk";
1889	} else {
1890		f.className = "drawtogether-player-name";
1891	}
1892	
1893
1894    
1895    var h = "",
1896        g = "",
1897        k = "",
1898        e = "";
1899//    "undefined" !== typeof a.reputation && (h = " (" + a.reputation + " R)");
1900    "undefined" !== typeof a.gamescore && (g = " [" + a.gamescore +
1901        " Points]");
1902    a.currentPlayer && (k = " | DRAWING");
1903    1 == a.memberlevel && (e += "\u2764", f.className += " premium");
1904	
1905	
1906	if (a.name.substring(a.name.length - 1, a.name.length) == '₀'){
1907if (f.classList.contains('expremium')){
1908		f.classList.remove("expremium");
1909	       f.className = f.className + " premium";	
1910f.style.textShadow = '';		   
1911	}
1912if (!f.classList.contains('premium')){	
1913f.style.textShadow = '0 0 4px ' + string2ColorB(a.name);
1914}	
1915	}		
1916	
1917	
1918	if (a.name.substring(a.name.length - 1, a.name.length) == '₁'){
1919		f.className = f.className + " color1";	
1920if (f.classList.contains('premium')){
1921		f.classList.remove("premium");
1922	       f.className = f.className + " expremium";			  
1923}  f.style.textShadow = '0 0 4px #e62e00';		
1924	} else if (a.name.substring(a.name.length - 1, a.name.length) == '₂'){
1925	f.className = f.className + " color2";
1926	if (f.classList.contains('premium')){
1927		f.classList.remove("premium");
1928	       f.className = f.className + " expremium";	
1929		   
1930} f.style.textShadow = '0 0 4px #d700d7';
1931	} else if (a.name.substring(a.name.length - 1, a.name.length) == '₃'){
1932	f.className = f.className + " color3";	
1933	if (f.classList.contains('premium')){
1934		f.classList.remove("premium");
1935	       f.className = f.className + " expremium";	
1936		  
1937} f.style.textShadow = '0 0 4px #8521e8';	
1938	} else if (a.name.substring(a.name.length - 1, a.name.length) == '₄'){
1939	f.className = f.className + " color4";
1940if (f.classList.contains('premium')){
1941		f.classList.remove("premium");
1942	       f.className = f.className + " expremium";	
1943		 
1944}	f.style.textShadow = '0 0 4px #0066cc';
1945	} else if (a.name.substring(a.name.length - 1, a.name.length) == '₅'){
1946	f.className = f.className + " color5";
1947	if (f.classList.contains('premium')){
1948		f.classList.remove("premium");
1949	       f.className = f.className + " expremium";	
1950		   
1951} f.style.textShadow = '0 0 4px #009e9e';
1952	} else if (a.name.substring(a.name.length - 1, a.name.length) == '₆'){
1953	f.className = f.className + " color6";
1954	if (f.classList.contains('premium')){
1955		f.classList.remove("premium");
1956	       f.className = f.className + " expremium";	
1957		   
1958} f.style.textShadow = '0 0 4px #a9a900';
1959	} else if (a.name.substring(a.name.length - 1, a.name.length) == '₇'){
1960	f.className = f.className + " color7";
1961	if (f.classList.contains('premium')){
1962		f.classList.remove("premium");
1963	       f.className = f.className + " expremium";	
1964		   
1965} f.style.textShadow = '0 0 4px #669900';
1966	} else if (a.name.substring(a.name.length - 1, a.name.length) == '₈'){
1967	f.className = f.className + " color8";
1968	if (f.classList.contains('premium')){
1969		f.classList.remove("premium");
1970	       f.className = f.className + " expremium";	
1971		   
1972} f.style.textShadow = '0 0 4px #7a7a52';
1973	} else if (a.name.substring(a.name.length - 1, a.name.length) == '₉'){
1974	f.className = f.className + " color9";
1975	if (f.classList.contains('premium')){
1976		f.classList.remove("premium");
1977	       f.className = f.className + " expremium";	
1978		   
1979} f.style.textShadow = '0 0 4px #996633';
1980	} else {
1981if (!f.classList.contains('premium')){	
1982f.style.textShadow = '0 0 4px ' + string2ColorB(a.name);
1983}
1984	}		
1985	
1986if (ghoststate == 0){
1987f.style.textShadow = '';
1988}	
1989	
1990
1991	
1992
1993	
1994
1995var histwodigit = a.name.substring( a.name.length - 3,  a.name.length - 1);
1996
1997if (histwodigit == '₀₀') {window.histimezone = 0} else if (histwodigit == '₀₁') {window.histimezone = 1} else if (histwodigit == '₀₂') {window.histimezone = 2} else if (histwodigit == '₀₃') {window.histimezone = 3} else if (histwodigit == '₀₄') {window.histimezone = 4} else if (histwodigit == '₀₅') {window.histimezone = 5} else if (histwodigit == '₀₆') {window.histimezone = 6} else if (histwodigit == '₀₇') {window.histimezone = 7} else if (histwodigit == '₀₈') {window.histimezone = 8} else if (histwodigit == '₀₉') {window.histimezone = 9} else if (histwodigit == '₁₀') {window.histimezone = 10} else if (histwodigit == '₁₁') {window.histimezone = 11} else if (histwodigit == '₁₂') {window.histimezone = 12} else if (histwodigit == '₁₃') {window.histimezone = 13} else if (histwodigit == '₁₄') {window.histimezone = 14} else if (histwodigit == '₁₅') {window.histimezone = 15} else if (histwodigit == '₁₆') {window.histimezone = 16} else if (histwodigit == '₁₇') {window.histimezone = 17} else if (histwodigit == '₁₈') {window.histimezone = 18} else if (histwodigit == '₁₉') {window.histimezone = 19} else if (histwodigit == '₂₀') {window.histimezone = 20} else if (histwodigit == '₂₁') {window.histimezone = 21} else if (histwodigit == '₂₂') {window.histimezone = 22} else if (histwodigit == '₂₃') {window.histimezone = 23} else if (histwodigit == '₂₄') {window.histimezone = 24} else if (histwodigit == '₂₅') {window.histimezone = -1} else if (histwodigit == '₂₆') {window.histimezone = -2} else if (histwodigit == '₂₇') {window.histimezone = -3} else if (histwodigit == '₂₈') {window.histimezone = -4} else if (histwodigit == '₂₉') {window.histimezone = -5} else if (histwodigit == '₃₀') {window.histimezone = -6} else if (histwodigit == '₃₁') {window.histimezone = -7} else if (histwodigit == '₃₂') {window.histimezone = -8} else if (histwodigit == '₃₃') {window.histimezone = -9} else if (histwodigit == '₃₄') {window.histimezone = -10} else if (histwodigit == '₃₅') {window.histimezone = -11} else if (histwodigit == '₃₆') {window.histimezone = -12} else if (histwodigit == '₃₇') {window.histimezone = -13} else if (histwodigit == '₃₈') {window.histimezone = -14} else if (histwodigit == '₃₉') {window.histimezone = -15} else if (histwodigit == '₄₀') {window.histimezone = -16} else if (histwodigit == '₄₁') {window.histimezone = -17} else if (histwodigit == '₄₂') {window.histimezone = -18} else if (histwodigit == '₄₃') {window.histimezone = -19} else if (histwodigit == '₄₄') {window.histimezone = -20} else if (histwodigit == '₄₅') {window.histimezone = -21} else if (histwodigit == '₄₆') {window.histimezone = -22} else if (histwodigit == '₄₇') {window.histimezone = -23} else if (histwodigit == '₄₈') {window.histimezone = -24} else if (histwodigit == '₄₉') {window.histimezone = 1.5} else if (histwodigit == '₅₀') {window.histimezone = 2.5} else if (histwodigit == '₅₁') {window.histimezone = 3.5} else if (histwodigit == '₅₂') {window.histimezone = 4.5} else if (histwodigit == '₅₃') {window.histimezone = 5.5} else if (histwodigit == '₅₄') {window.histimezone = 6.5} else if (histwodigit == '₅₅') {window.histimezone = 7.5} else if (histwodigit == '₅₆') {window.histimezone = 8.5} else if (histwodigit == '₅₇') {window.histimezone = 9.5} else if (histwodigit == '₅₈') {window.histimezone = 10.5} else if (histwodigit == '₅₉') {window.histimezone = 11.5} else if (histwodigit == '₆₀') {window.histimezone = 12.5} else if (histwodigit == '₆₁') {window.histimezone = 13.5} else if (histwodigit == '₆₂') {window.histimezone = 14.5} else if (histwodigit == '₆₃') {window.histimezone = 15.5} else if (histwodigit == '₆₄') {window.histimezone = 16.5} else if (histwodigit == '₆₅') {window.histimezone = 17.5} else if (histwodigit == '₆₆') {window.histimezone = 18.5} else if (histwodigit == '₆₇') {window.histimezone = 19.5} else if (histwodigit == '₆₈') {window.histimezone = 20.5} else if (histwodigit == '₆₉') {window.histimezone = 21.5} else if (histwodigit == '₇₀') {window.histimezone = 22.5} else if (histwodigit == '₇₁') {window.histimezone = 23.5} else if (histwodigit == '₇₂') {window.histimezone = 24.5} else if (histwodigit == '₇₃') {window.histimezone = -1.5} else if (histwodigit == '₇₄') {window.histimezone = -2.5} else if (histwodigit == '₇₅') {window.histimezone = -3.5} else if (histwodigit == '₇₆') {window.histimezone = -4.5} else if (histwodigit == '₇₇') {window.histimezone = -5.5} else if (histwodigit == '₇₈') {window.histimezone = -6.5} else if (histwodigit == '₇₉') {window.histimezone = -7.5} else if (histwodigit == '₈₀') {window.histimezone = -8.5} else if (histwodigit == '₈₁') {window.histimezone = -9.5} else if (histwodigit == '₈₂') {window.histimezone = -10.5} else if (histwodigit == '₈₃') {window.histimezone = -11.5} else if (histwodigit == '₈₄') {window.histimezone = -12.5} else if (histwodigit == '₈₅') {window.histimezone = -13.5} else if (histwodigit == '₈₆') {window.histimezone = -14.5} else if (histwodigit == '₈₇') {window.histimezone = -15.5} else if (histwodigit == '₈₈') {window.histimezone = -16.5} else if (histwodigit == '₈₉') {window.histimezone = -17.5} else if (histwodigit == '₉₀') {window.histimezone = -18.5} else if (histwodigit == '₉₁') {window.histimezone = -19.5} else if (histwodigit == '₉₂') {window.histimezone = -20.5} else if (histwodigit == '₉₃') {window.histimezone = -21.5} else if (histwodigit == '₉₄') {window.histimezone = -22.5} else if (histwodigit == '₉₅') {window.histimezone = -23.5} else if (histwodigit == '₉₆') {window.histimezone = -24.5} else {window.histimezone = 'NaN'};
1998
1999var timedifference = Number(mytimezone) - Number(window.histimezone);
2000
2001if (isNaN(timedifference) && a.reputation != undefined){
2002	f.title = a.name + " (" + a.reputation + "R) " + a.userid;
2003} else if (a.reputation != undefined){
2004	f.title = a.name + " (" + a.reputation + "R) " + a.userid + " | timezone " + timedifference;
2005} else {
2006	f.title = a.name
2007}
2008
2009if (showbots == 0) {
2010if (botslist.includes(a.userid)){
2011f.style.display = 'none';
2012}
2013}
2014
2015//add right click eventlistener to write name on chat	
2016	f.addEventListener("contextmenu", function (event) {		
2017		event.preventDefault();
2018var chatinput = document.getElementsByClassName("drawtogheter-chat-input")[0];
2019
2020var cleanername = a.name.replace(/\(.*\)/g, "");
2021var cleanername = cleanername.replace(/\[.*\]/g, "");
2022var cleanername = cleanername.replace(/\<.*\>/g, "");
2023var cleanername = cleanername.replace(/₀/g, "");
2024var cleanername = cleanername.replace(/₁/g, "");	
2025var cleanername = cleanername.replace(/₂/g, "");	
2026var cleanername = cleanername.replace(/₃/g, "");	
2027var cleanername = cleanername.replace(/₄/g, "");	
2028var cleanername = cleanername.replace(/₅/g, "");	
2029var cleanername = cleanername.replace(/₆/g, "");	
2030var cleanername = cleanername.replace(/₇/g, "");	
2031var cleanername = cleanername.replace(/₈/g, "");	
2032var cleanername = cleanername.replace(/₉/g, "");	
2033var cleanername = cleanername.trim();
2034
2035	
2036
2037
2038if (chatinput.value.substring(chatinput.value.length - 1, chatinput.value.length) == " " || chatinput.value.length < 1){
2039chatinput.value = chatinput.value + cleanername;
2040} else {
2041chatinput.value = chatinput.value + " " + cleanername;
2042}		
2043	}, false);
2044
2045
2046var cleanername = a.name.replace(/\(.*\)/g, "");
2047var cleanername = cleanername.replace(/\[.*\]/g, "");
2048var cleanername = cleanername.replace(/\<.*\>/g, "");
2049var cleanername = cleanername.replace(/₀/g, "");
2050var cleanername = cleanername.replace(/₁/g, "");	
2051var cleanername = cleanername.replace(/₂/g, "");	
2052var cleanername = cleanername.replace(/₃/g, "");	
2053var cleanername = cleanername.replace(/₄/g, "");	
2054var cleanername = cleanername.replace(/₅/g, "");	
2055var cleanername = cleanername.replace(/₆/g, "");	
2056var cleanername = cleanername.replace(/₇/g, "");	
2057var cleanername = cleanername.replace(/₈/g, "");	
2058var cleanername = cleanername.replace(/₉/g, "");	
2059var cleanername = cleanername.trim();
2060
2061	
2062// f.appendChild(document.createTextNode(a.name + h + g + k));	
2063    f.appendChild(document.createTextNode(cleanername + h + g + k));	
2064	f.style.order = a.reputation;
2065	b.style.webkitOrder = a.reputation;
2066	
2067    b.appendChild(c);
2068    d && b.appendChild(d);
2069    b.appendChild(f);
2070
2071
2072if (a.reputation != undefined){
2073var cleanerrep =  a.reputation.toString().replace(/0/g, "₀");
2074var cleanerrep = cleanerrep.replace(/1/g, "₁");	
2075var cleanerrep = cleanerrep.replace(/2/g, "₂");	
2076var cleanerrep = cleanerrep.replace(/3/g, "₃");	
2077var cleanerrep = cleanerrep.replace(/4/g, "₄");	
2078var cleanerrep = cleanerrep.replace(/5/g, "₅");	
2079var cleanerrep = cleanerrep.replace(/6/g, "₆");	
2080var cleanerrep = cleanerrep.replace(/7/g, "₇");	
2081var cleanerrep = cleanerrep.replace(/8/g, "₈");	
2082var cleanerrep = cleanerrep.replace(/9/g, "₉");
2083}
2084	
2085		if (showbots == 0 && a.reputation != undefined) {
2086if (botslist.includes(a.userid)){
2087} else {
2088var beautynumbers = document.createTextNode(cleanerrep);     // Create a text node
2089b.appendChild(beautynumbers); 	
2090}
2091} else if (a.reputation != undefined){
2092var beautynumbers = document.createTextNode(cleanerrep);     // Create a text node
2093b.appendChild(beautynumbers); 
2094}
2095
2096if (a.reputation == undefined) {
2097//b.innerHTML = b.innerHTML+ "?"		
2098}	
2099
2100 var cjoin = b.appendChild(document.createElement("span"));
2101       cjoin.className = "drawtogether-player-button";
2102	   
2103if (joiners.includes(a.userid) && a.userid != undefined){	   
2104	cjoin.innerHTML = "⭐";
2105	cjoin.style.lineHeight = "0.9em";
2106} else {
2107	cjoin.innerHTML = "?";
2108	cjoin.style.lineHeight = "1em";
2109}	
2110	cjoin.style.marginRight = "0px";
2111	cjoin.addEventListener("click", function() {
2112		if (!joiners.includes(a.userid)){
2113	window.joiners = joiners + a.userid + ",";
2114	localStorage.setItem("joiners", joiners);
2115	this.innerHTML = "⭐";
2116		} else {			
2117	window.joiners = joiners.split(a.userid + ',').join('');
2118	localStorage.setItem("joiners", joiners);
2119	this.innerHTML = "?";	
2120		}
2121	});
2122	
2123	
2124	 
2125       //cmod.className = "drawtogether-player-button";
2126	   
2127if (/₀|₁|₂|₃|₄|₅|₆|₇|₈|₉/g.test(a.name)){	
2128	var cmod = b.appendChild(document.createElement("span"));   
2129	cmod.className = "drawtogether-player-button";
2130	cmod.innerHTML = "?";
2131	cmod.style.lineHeight = "0.9em";
2132	cmod.style.marginRight = "0px";
2133	cmod.title = "AnonProMod user";
2134	
2135	if (a.userid != undefined){
2136	cmod.addEventListener("click", function() {
2137	window.open('https://www.anondraw.com/profile/' + a.userid, '_blank').focus();
2138	});
2139	}
2140} else {
2141	var cuser = b.appendChild(document.createElement("span"));   
2142	cuser.className = "drawtogether-player-button";
2143	cuser.innerHTML = "?";
2144	cuser.style.lineHeight = "0.9em";
2145	cuser.style.marginRight = "0px";
2146	cuser.title = "regular user";
2147	
2148	if (a.userid != undefined){
2149	cuser.innerHTML = "?";	
2150	cuser.addEventListener("click", function() {
2151	window.open('https://www.anondraw.com/profile/' + a.userid, '_blank').focus();
2152	});
2153	}
2154}	
2155	
2156	
2157//    d = document.createElement("span");
2158//    d.appendChild(document.createTextNode(e));
2159//    d.className = "icons";
2160//    b.appendChild(d);
2161    return b
2162};
2163 
2164 
2165 
2166 //smaler emotes
2167 document.head.insertAdjacentHTML('beforeend','<style>.drawtogether-emote {max-height: 3em;max-width: 3em;vertical-align: bottom;}</style>');
2168 
2169 
2170 //dark page bg (to avoid white flash while loads)
2171 document.getElementsByTagName("BODY")[0].style.backgroundColor = "rgb(35, 52, 69)";
2172 
2173 
2174  //remember brush size and color
2175 var storedsize = localStorage.getItem("storedsize");
2176 var storedcolor = localStorage.getItem("storedcolor");
2177 
2178 if (storedsize) {
2179document.getElementById("thesizeslider").value =	storedsize;
2180
2181var event = new Event('input');
2182document.getElementById("thesizeslider").dispatchEvent(event);
2183}	
2184 
2185if (storedcolor) {
2186document.getElementsByClassName("sp-input")[0].value = storedcolor;
2187
2188var event = new Event('change');
2189document.getElementsByClassName("sp-input")[0].dispatchEvent(event);
2190
2191anondraw.collab.paint.current_color = tinycolor(storedcolor);
2192}
2193
2194document.getElementById("thesizeslider").addEventListener("input", function(){
2195localStorage.setItem("storedsize", document.getElementById("thesizeslider").value);
2196});
2197
2198
2199  
2200
2201//add anchor button
2202var anchorbutton = document.createElement("button");
2203anchorbutton.innerHTML = "⚓";
2204anchorbutton.id = "anchorbtn";
2205anchorbutton.style.margin = "0";
2206anchorbutton.style.borderRadius = "0";
2207anchorbutton.style.padding = "0";
2208anchorbutton.style.borderBottom = "0";
2209anchorbutton.style.minWidth = "2.3rem"; 
2210anchorbutton.className = "control-button"
2211var body = document.getElementsByClassName("drawtogether-control-container")[0];
2212body.insertBefore(anchorbutton, body.childNodes[5]);
2213
2214anchorbutton.addEventListener ("mouseenter", function() {
2215document.getElementById("setanchorbtn").style.display = "inline-block";
2216document.getElementById("anchorbtn").style.borderBottom = '5px solid #00eef9';
2217document.getElementById("setanchorbtn").style.borderBottom = '5px solid #00eef9';
2218document.getElementById("arrowup").style.left = document.getElementsByClassName("paint-selected-tool")[0].offsetLeft + 19 - 8;
2219});
2220
2221anchorbutton.addEventListener ("mouseleave", function() {
2222document.getElementById("setanchorbtn").style.display = "none";
2223document.getElementById("anchorbtn").style.borderBottom = '0';
2224document.getElementById("setanchorbtn").style.borderBottom = '0';
2225document.getElementById("arrowup").style.left = document.getElementsByClassName("paint-selected-tool")[0].offsetLeft + 19 - 8;
2226});
2227
2228anchorbutton.addEventListener ("click", function() {
2229anondraw.collab.paint.changeTool("grab");
2230
2231var example = window.location.href;
2232var step_one = example.replace(/.*#/, "");
2233var step_two = step_one.replace(/,.*/, "");	
2234var lastfav = localStorage.getItem(step_two + "_lastfav");
2235
2236if (lastfav){	
2237var example = window.location.href;
2238var step_one = example.replace(/,.*,.*/, "," + lastfav);
2239window.location.href = step_one;
2240//anondraw.collab.chat.onMessage( step_one);
2241}
2242});
2243
2244
2245//removing previous fullscreen button (i couldnt clear or edit its function) and replacing by another
2246 document.getElementsByClassName("popout-button")[0].style.display = "none";
2247 
2248 document.head.insertAdjacentHTML('beforeend','<style>#wide {position: absolute;right: 0;top: 0;width: 2em;cursor: pointer;} #wide:hover {background: #23344560;} .itsfull{transform: rotate(180deg);}</style>');
2249  
2250var wide = document.createElement("img"); 
2251wide.src = "images/icons/popout.png";
2252wide.id = "wide"; 
2253document.getElementsByClassName("drawtogether-paint-container")[0].appendChild(wide);
2254  
2255 var docelem = document.documentElement;
2256
2257/* View in fullscreen */
2258function openFullscreen() {
2259  if (docelem.requestFullscreen) {
2260    docelem.requestFullscreen();
2261  } else if (docelem.mozRequestFullScreen) { /* Firefox */
2262    docelem.mozRequestFullScreen();
2263  } else if (docelem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
2264    docelem.webkitRequestFullscreen();
2265  } else if (docelem.msRequestFullscreen) { /* IE/Edge */
2266    docelem.msRequestFullscreen();
2267  }
2268}
2269
2270/* Close fullscreen */
2271function closeFullscreen() {
2272  if (document.exitFullscreen) {
2273    document.exitFullscreen();
2274  } else if (document.mozCancelFullScreen) { /* Firefox */
2275    document.mozCancelFullScreen();
2276  } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
2277    document.webkitExitFullscreen();
2278  } else if (document.msExitFullscreen) { /* IE/Edge */
2279    document.msExitFullscreen();
2280  }
2281}
2282
2283var fullscreentoggle = 0;
2284document.getElementById("wide").addEventListener ("click", function() {
2285if (fullscreentoggle == 0){
2286document.getElementById("wide").classList.add("itsfull");
2287openFullscreen();
2288window.fullscreentoggle = 1;
2289} else {
2290document.getElementById("wide").classList.remove("itsfull");
2291closeFullscreen()
2292window.fullscreentoggle = 0;
2293}
2294});
2295 
2296
2297//update random place button 
2298document.getElementsByClassName("random-button")[0].innerHTML = "?";
2299
2300document.getElementById("brushbtn").innerHTML = "?";
2301 
2302 document.getElementById("linebtn").innerHTML = "/";
2303 
2304 
2305 //reassign icons to more and minus zoom buttons
2306document.querySelector('[title="Zoom in"]').innerHTML = "➕";
2307 document.querySelector('[title="Zoom out"]').innerHTML = "➖";
2308 
2309 
2310  //colorsbox colors
2311document.getElementsByClassName("sp-container")[0].style.backgroundColor = "rgb(35, 52, 69)";
2312document.getElementsByClassName("sp-input-container")[0].style.backgroundColor = "#ffffff";
2313document.getElementsByClassName("sp-input-container")[0].style.color = "#000";
2314document.getElementsByClassName("sp-container")[0].style.border = "solid 1px #000";
2315document.getElementsByClassName("sp-replacer")[0].style.borderColor = "#eee";
2316document.getElementsByClassName("sp-color")[0].style.borderColor = "#000"; 
2317 document.head.insertAdjacentHTML('beforeend','<style>.sp-thumb-el {border-color:black !important}</style>');
2318
2319  
2320 //stop text tool from being activated while theres text on input
2321 Paint.prototype.tools = {
2322    zoom: function(a, b) {
2323        if ("remove" == b) delete a.lastZoomPoint, delete a.lastZoomPointDelta, a.effectsCanvas.style.cursor = "", "function" == typeof a.effectsCanvasCtx.setLineDash && a.effectsCanvasCtx.setLineDash([]);
2324        else {
2325            a.effectsCanvas.style.cursor = "zoom-in";
2326            var c = a.getCoords(b),
2327                d = a.scaledCoords(c, b);
2328            "mousedown" != b.type && "touchstart" != b.type || a.lastZoomPoint || (a.lastTargetZoomPoint = c, a.lastZoomPoint = d, a.lastZoomPointDelta = d);
2329            if ("mouseup" == b.type || "touchend" == b.type) delete a.lastZoomPoint,
2330                delete a.lastZoomPointDelta;
2331            if (("mousemove" == b.type || "touchmove" == b.type) && a.lastZoomPoint) {
2332                a.effectsCanvasCtx.clearRect(0, 0, a.effectsCanvas.width, a.effectsCanvas.height);
2333                var e = d[1],
2334                    f = a.lastZoomPoint[0],
2335                    h = a.lastZoomPoint[1];
2336                Math.min(d[0], f);
2337                Math.min(e, h);
2338                Math.abs(e - h);
2339                delta = c[0] - a.lastTargetZoomPoint[0];
2340                zoomFactor = 1.1;
2341                0 > delta ? a.zoomToPoint(a.public.zoom * (1 / zoomFactor), f, h) : 0 < delta && a.zoomToPoint(a.public.zoom * zoomFactor, f, h);
2342                a.lastZoomPointDelta = d;
2343                a.lastTargetZoomPoint = c
2344            }
2345        }
2346    },
2347    select: function(a, b) {
2348        if ("remove" ==
2349            b) delete a.lastSelectPoint, a.effectsCanvas.style.cursor = "", "function" == typeof a.effectsCanvasCtx.setLineDash && a.effectsCanvasCtx.setLineDash([]);
2350        else {
2351            a.effectsCanvas.style.cursor = "cell";
2352            var c = a.getCoords(b),
2353                c = a.scaledCoords(c, b);
2354            "mousedown" != b.type && "touchstart" != b.type || a.lastSelectPoint || (a.lastSelectPoint = c);
2355            if ("mouseup" == b.type || "touchend" == b.type) {
2356                if (a.lastSelectPoint[0] == c[0] && a.lastSelectPoint[1] == c[1]) return;
2357                var d = Math.round(a.local.leftTopX + a.lastSelectPoint[0] / a.local.zoom),
2358                    e = Math.round(a.local.leftTopY +
2359                        a.lastSelectPoint[1] / a.local.zoom),
2360                    f = Math.round(a.local.leftTopX + c[0] / a.local.zoom),
2361                    h = Math.round(a.local.leftTopY + c[1] / a.local.zoom);
2362                a.dispatchEvent({
2363                    type: "select",
2364                    from: [d, e],
2365                    to: [f, h]
2366                });
2367                delete a.lastSelectPoint;
2368                a.effectsCanvasCtx.clearRect(0, 0, a.effectsCanvas.width, a.effectsCanvas.height)
2369            }
2370            if (("mousemove" == b.type || "touchmove" == b.type) && a.lastSelectPoint) {
2371                a.effectsCanvasCtx.clearRect(0, 0, a.effectsCanvas.width, a.effectsCanvas.height);
2372                var d = c[0],
2373                    e = c[1],
2374                    f = a.lastSelectPoint[0],
2375                    h = a.lastSelectPoint[1],
2376                    c =
2377                    Math.min(d, f),
2378                    g = Math.min(e, h),
2379                    d = Math.abs(d - f),
2380                    e = Math.abs(e - h),
2381                    h = a.effectsCanvasCtx;
2382                h.beginPath();
2383                "function" == typeof h.setLineDash && h.setLineDash([4]);
2384                h.rect(c, g, d, e);
2385                h.lineWidth = 2;
2386                h.strokeStyle = "darkgray";
2387                h.stroke()
2388            }
2389        }
2390    },
2391    grab: function(a, b) {
2392        if ("remove" == b || "mouseup" == b.type || "touchend" == b.type || "mouseleave" === b.type) delete a.lastGrabCoords, a.effectsCanvas.style.cursor = "";
2393        else {
2394            var c = a.getCoords(b),
2395                c = a.scaledCoords(c, b);
2396            a.lastGrabCoords || "mousedown" != b.type && "touchstart" != b.type || (a.lastGrabCoords = c, a.effectsCanvas.style.cursor =
2397                "move");
2398            "mousemove" != b.type && "touchmove" != b.type || !a.lastGrabCoords || (a.goto(a.local.leftTopX + (a.lastGrabCoords[0] - c[0]) / a.local.zoom, a.local.leftTopY + (a.lastGrabCoords[1] - c[1]) / a.local.zoom), a.lastGrabCoords = c)
2399        }
2400    },
2401    line: function(a, b) {
2402        if ("remove" == b) delete a.lastLinePoint, a.effectsCanvas.style.cursor = "";
2403        else {			
2404			if (perspective == 1){
2405				//var perspectivex = -780420;
2406				//var perspectivey = -978818;
2407				var realperspectivex = (((perspectivex ) - a.local.leftTopX)) * a.local.zoom;
2408				var realperspectivey = (((perspectivey) - a.local.leftTopY)) * a.local.zoom;
2409           var c = a.getCoords(b),
2410                c = a.scaledCoords(c, b);
2411            "mousedown" != b.type && "touchstart" != b.type || a.lastLinePoint || (a.lastLinePoint = c);
2412            if ("mouseup" == b.type || "touchend" == b.type) {
2413                if (realperspectivex == c[0] &&
2414                    realperspectivey == c[1]) return;					
2415x = perspectivex;
2416y = perspectivey;
2417x1 = Math.round((a.local.leftTopX + c[0] / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION;
2418y1 = Math.round((a.local.leftTopY + c[1] / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION;
2419distanceinspector = Math.abs( Math.sqrt(Math.pow(x - x1, 2)  +  Math.pow(y - y1, 2)));
2420if (distanceinspector > 10000){
2421	 anondraw.collab.chat.addMessage('WARNING!',"Perspective tool: The line is too long!"); 
2422	return
2423};
2424
2425					//Math.abs( Math.sqrt(Math.pow(x - x1, 2)  +  Math.pow(y - y1, 2)));
2426                a.addUserDrawing({
2427                    type: "line",
2428                    x: perspectivex,
2429                    y: perspectivey,
2430                    x1: Math.round((a.local.leftTopX + c[0] / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION,
2431                    y1: Math.round((a.local.leftTopY + c[1] / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION,
2432                    size: a.current_size,
2433                    color: a.current_color
2434                });
2435                delete a.lastLinePoint;
2436                a.effectsCanvasCtx.clearRect(0,
2437                    0, a.effectsCanvas.width, a.effectsCanvas.height)
2438            }
2439            if (("mousemove" == b.type || "touchmove" == b.type) && a.lastLinePoint) {
2440                a.effectsCanvasCtx.clearRect(0, 0, a.effectsCanvas.width, a.effectsCanvas.height);
2441                var d = a.effectsCanvasCtx;
2442                d.beginPath();
2443                d.arc(realperspectivex, realperspectivey, a.current_size * a.local.zoom / 2, 0, 2 * Math.PI, !0);
2444                d.fillStyle = a.current_color.toRgbString();
2445                d.fill();
2446                d.beginPath();
2447                d.moveTo(realperspectivex, realperspectivey);
2448                d.lineTo(c[0], c[1]);
2449                d.strokeStyle = a.current_color.toRgbString();
2450                d.lineWidth =
2451                    a.current_size * a.local.zoom;
2452                d.stroke();
2453                d.beginPath();
2454                d.arc(c[0], c[1], a.current_size * a.local.zoom / 2, 0, 2 * Math.PI, !0);
2455                d.fillStyle = a.current_color.toRgbString();
2456                d.fill()
2457            }				
2458			} else {
2459            var c = a.getCoords(b),
2460                c = a.scaledCoords(c, b);
2461            "mousedown" != b.type && "touchstart" != b.type || a.lastLinePoint || (a.lastLinePoint = c);
2462            if ("mouseup" == b.type || "touchend" == b.type) {
2463                if (a.lastLinePoint[0] == c[0] &&
2464                    a.lastLinePoint[1] == c[1]) return;
2465                a.addUserDrawing({
2466                    type: "line",
2467                    x: Math.round((a.local.leftTopX + a.lastLinePoint[0] / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION,
2468                    y: Math.round((a.local.leftTopY + a.lastLinePoint[1] / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION,
2469                    x1: Math.round((a.local.leftTopX + c[0] / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION,
2470                    y1: Math.round((a.local.leftTopY + c[1] / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION,
2471                    size: a.current_size,
2472                    color: a.current_color
2473                });
2474                delete a.lastLinePoint;
2475                a.effectsCanvasCtx.clearRect(0,
2476                    0, a.effectsCanvas.width, a.effectsCanvas.height)
2477            }
2478            if (("mousemove" == b.type || "touchmove" == b.type) && a.lastLinePoint) {
2479                a.effectsCanvasCtx.clearRect(0, 0, a.effectsCanvas.width, a.effectsCanvas.height);
2480                var d = a.effectsCanvasCtx;
2481                d.beginPath();
2482                d.arc(a.lastLinePoint[0], a.lastLinePoint[1], a.current_size * a.local.zoom / 2, 0, 2 * Math.PI, !0);
2483                d.fillStyle = a.current_color.toRgbString();
2484                d.fill();
2485                d.beginPath();
2486                d.moveTo(a.lastLinePoint[0], a.lastLinePoint[1]);
2487                d.lineTo(c[0], c[1]);
2488                d.strokeStyle = a.current_color.toRgbString();
2489                d.lineWidth =
2490                    a.current_size * a.local.zoom;
2491                d.stroke();
2492                d.beginPath();
2493                d.arc(c[0], c[1], a.current_size * a.local.zoom / 2, 0, 2 * Math.PI, !0);
2494                d.fillStyle = a.current_color.toRgbString();
2495                d.fill()
2496            }
2497			}
2498        }
2499    },
2500    brush: function(a, b, c) { 
2501        if ("remove" == b) delete a.lastMovePoint, delete a.lockcolor, delete a.brushing;
2502        else {
2503            a.lastMovePoint = a.lastMovePoint || [0, 0];
2504            c = a.getCoords(b);
2505            c = a.scaledCoords(c, b);
2506            if ("mousedown" == b.type || "touchstart" == b.type) a.brushing = !0, a.addUserPath(), a.addUserPathPoint([Math.round((a.local.leftTopX + c[0] / a.local.zoom) * a.PATH_PRECISION) /
2507                a.PATH_PRECISION, Math.round((a.local.leftTopY + c[1] / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION
2508            ]), a.effectsCanvasCtx.clearRect(a.lastMovePoint[0] - 2 * a.current_size * a.local.zoom, a.lastMovePoint[1] - 2 * a.current_size * a.local.zoom, 4 * a.current_size * a.local.zoom, 4 * a.current_size * a.local.zoom);
2509            if ("mouseup" == b.type || "touchend" == b.type || "mouseleave" == b.type) a.endUserPath(), a.brushing = !1;
2510            if ("mousemove" == b.type || "touchmove" == b.type) this.brushing || (a.effectsCanvasCtx.clearRect(a.lastMovePoint[0] - 2 * a.current_size *
2511                a.local.zoom, a.lastMovePoint[1] - 2 * a.current_size * a.local.zoom, 4 * a.current_size * a.local.zoom, 4 * a.current_size * a.local.zoom), b = a.effectsCanvasCtx, b.beginPath(), b.arc(c[0], c[1], a.current_size * a.local.zoom / 2, 0, 2 * Math.PI, !0), b.fillStyle = "gradient" == a.current_color.type ? a.current_color[0] ? a.current_color[0].color.toRgbString() : "black" : a.current_color.toRgbString(), b.fill(), a.lastMovePoint[0] = c[0], a.lastMovePoint[1] = c[1]), a.brushing && a.addUserPathPoint([Math.round((a.local.leftTopX + c[0] / a.local.zoom) * a.PATH_PRECISION) /
2512                a.PATH_PRECISION, Math.round((a.local.leftTopY + c[1] / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION
2513            ])
2514        }
2515    },
2516    picker: function(a, b) {
2517        if ("remove" == b) delete a.picking, a.effectsCanvas.style.cursor = "";
2518        else {
2519            var c = a.getCoords(b);
2520            "mousedown" != b.type && "touchstart" != b.type || (a.picking || a.rightClick) || (a.picking = !0, a.setColor(a.getColorAt(c).setAlpha(a.current_color.getAlpha())), a.effectsCanvas.style.cursor = "crosshair");
2521            if ("mouseup" == b.type || "touchend" == b.type) delete a.picking, a.effectsCanvas.style.cursor = "", this.change_size(a,
2522                "remove");
2523            ("mousemove" == b.type || "touchmove" == b.type) && a.picking && a.setColor(a.getColorAt(c).setAlpha(a.current_color.getAlpha()))
2524        }
2525    },
2526    block: function(a, b) {
2527        this.brush(a, b, "block")
2528    },
2529    text: function(a, b) {
2530		if (document.getElementsByClassName('drawtogheter-chat-input')[0].value.length < 1 && document.activeElement != document.getElementsByClassName('drawtogheter-chat-input')[0]){
2531        if ("remove" == b) delete a.lastMovePoint, delete a.lastToolText, a.textToolInput && a.container.removeChild(a.textToolInput), delete a.textToolInput;
2532        else {
2533            var c = a.getCoords(b),
2534                c = a.scaledCoords(c, b);
2535            a.textToolInput || (a.textToolInput = document.createElement("input"), a.textToolInput.className = "paint-texttool", a.textToolInput.placeholder =
2536                "Type some text", a.container.appendChild(a.textToolInput), a.textToolInput.addEventListener("input", function() {
2537                    this.exectool("redraw")
2538                }.bind(a)));
2539            a.textToolInput.focus();
2540            "mouseup" != b.type && "touchend" != b.type || !a.textToolInput.value || (a.addUserDrawing({
2541                type: "text",
2542                text: a.textToolInput.value.slice(0, 256) || "",
2543                x: Math.round(a.local.leftTopX + c[0] / a.local.zoom),
2544                y: Math.round(a.local.leftTopY + c[1] / a.local.zoom),
2545                size: a.current_size,
2546                color: a.current_color
2547            }), a.textToolInput.value = "");
2548            if ("mousemove" == b.type || "touchmove" ==
2549                b.type) a.lastMovePoint = a.lastMovePoint || [0, 0], a.effectsCanvasCtx.font = a.current_size * a.local.zoom + "px Verdana, Geneva, sans-serif", a.effectsCanvasCtx.clearRect(a.lastMovePoint[0], a.lastMovePoint[1] - 1.5 * a.current_size * a.local.zoom, a.effectsCanvasCtx.measureText(a.lastToolText).width, 2 * a.current_size * a.local.zoom), a.effectsCanvasCtx.fillStyle = a.current_color.toRgbString(), a.effectsCanvasCtx.fillText(a.textToolInput.value.slice(0, 256), c[0], c[1]), a.lastToolText = a.textToolInput.value.slice(0, 256), a.lastMovePoint =
2550                c;
2551            "redraw" == b && (a.effectsCanvasCtx.font = a.current_size * a.local.zoom + "px Verdana, Geneva, sans-serif", a.effectsCanvasCtx.clearRect(a.lastMovePoint[0], a.lastMovePoint[1] - 1.5 * a.current_size * a.local.zoom, a.effectsCanvasCtx.measureText(a.lastToolText).width, 2 * a.current_size * a.local.zoom), a.effectsCanvasCtx.fillStyle = a.current_color.toRgbString(), a.effectsCanvasCtx.fillText(a.textToolInput.value.slice(0, 256), a.lastMovePoint[0], a.lastMovePoint[1]), a.lastToolText = a.textToolInput.value.slice(0, 256))
2552        }
2553		}
2554    },
2555    change_size: function(a,
2556        b) {
2557        if ("remove" == b) delete a.lastChangeSizePoint, delete a.lastChangeSizePointAlt;
2558        else {
2559            var c = a.getCoords(b),
2560                d = a.scaledCoords(c, b);
2561            "mousedown" != b.type && "touchstart" != b.type || (a.lastChangeSizePoint || a.leftClick) || (a.lastTargetZoomPoint = c, a.lastChangeSizePoint = d, a.lastChangeSizePointAlt = d);
2562            if (("mousemove" == b.type || "touchmove" == b.type) && a.lastChangeSizePoint) {
2563                var e = c[0] - a.lastTargetZoomPoint[0];
2564                0 > e ? a.current_size -= 1 : 0 < e && (a.current_size += 1);
2565                a.changeToolSize(a.current_size, !0);
2566                a.lastChangeSizePointAlt = d;
2567                a.lastTargetZoomPoint = c;
2568                a.effectsCanvasCtx.clearRect(0, 0, a.effectsCanvas.width, a.effectsCanvas.height);
2569                c = a.effectsCanvasCtx;
2570                c.beginPath();
2571                c.arc(a.lastChangeSizePoint[0], a.lastChangeSizePoint[1], a.current_size * a.local.zoom / 2, 0, 2 * Math.PI, !0);
2572                c.fillStyle = "gradient" == a.current_color.type ? a.current_color[0] ? a.current_color[0].color.toRgbString() : "black" : a.current_color.toRgbString();
2573                c.fill()
2574            }
2575        }
2576    },
2577    change_rotation: function(a, b) {
2578        if ("remove" == b) delete a.lastChangeRotationPoint, delete a.RotationPointOnRight;
2579        else {
2580            var c = a.getCoords(b);
2581            a.scaledCoords(c, b);
2582            "mousedown" != b.type && "touchstart" != b.type || (a.lastChangeRotationPoint || !a.leftClick) || (a.lastChangeRotationPoint = c);
2583            if ("mousedown" == b.type || "touchstart" == b.type) {
2584                a.RotationPointOnRight = c[0] > a.canvasArray[0].width / 2 ? !0 : !1;
2585                var d = c[0],
2586                    e = c[1],
2587                    d = {
2588                        x: d,
2589                        y: e
2590                    },
2591                    e = {
2592                        x: a.canvasArray[0].width / 2,
2593                        y: a.canvasArray[0].height / 2
2594                    };
2595                a.RotationPointOnRight && (p3 = d, d = e, e = p3);
2596                a.anglething = 180 * Math.atan2(e.y - d.y, e.x - d.x) / Math.PI;
2597                a.anglething -= anondraw.collab.paint.rotation
2598            }
2599            "mousemove" !=
2600            b.type && "touchmove" != b.type || !a.lastChangeRotationPoint || (d = c[0], e = c[1], d = {
2601                x: d,
2602                y: e
2603            }, e = {
2604                x: a.canvasArray[0].width / 2,
2605                y: a.canvasArray[0].height / 2
2606            }, a.RotationPointOnRight && (p3 = d, d = e, e = p3), d = 180 * Math.atan2(e.y - d.y, e.x - d.x) / Math.PI, d -= a.anglething, a.setRotation(d * a.scale[0] * a.scale[1]), a.lastChangeRotationPoint = c)
2607        }
2608    }
2609};
2610 
2611 
2612 //server msgs
2613 var idbackup;
2614 DrawTogether.prototype.createPlayerLeftDom = function(a) {
2615	 window.idbackup = a.name;
2616    return this.createPlayerChatDom(a, " has left. ?")
2617};
2618
2619Chat.prototype.addElementAsMessage = function(a) {
2620    var b = Math.floor(this.messagesDom.scrollHeight - this.messagesDom.getBoundingClientRect().height),
2621        c = Math.ceil(this.messagesDom.scrollTop),
2622        d = this.messagesDom.appendChild(document.createElement("div"));
2623    d.classList.add("chat-message");
2624	
2625	
2626	if (a.innerHTML.indexOf(" has left. ?")!=-1){
2627	d.style.opacity = "0.6";
2628	d.style.fontSize = "1.0em";
2629	d.style.backgroundColor = "#333";
2630	d.style.color = "white";
2631	d.style.padding = ".2em .2em .2em .2em";
2632	d.style.marginLeft = "28px";
2633	}	
2634	
2635		if (a.innerHTML.indexOf(" has logged. ?")!=-1){
2636	d.style.opacity = "1";
2637	d.style.backgroundColor = "rgba(255,204,0,0.6)";
2638	d.style.color = "black";
2639	d.style.padding = ".2em .2em .2em .2em";
2640	d.style.marginLeft = "28px";
2641	}
2642
2643
2644	if (a.innerHTML.indexOf("Click here for the rules.")!=-1){
2645	d.style.opacity = "0.6";
2646	d.style.backgroundColor = "#008cff";
2647	d.style.color = "white";
2648	d.style.padding = ".2em .2em .2em .2em";
2649	d.style.marginLeft = "28px";
2650	}	
2651	
2652    d.appendChild(a);
2653    b - a.getBoundingClientRect().height <= c && this.scrollChat()
2654};
2655
2656//add padding to give room for the chat buttons
2657document.head.insertAdjacentHTML('beforeend','<style>.drawtogether-chat-container .chat-message {padding: .2em .2em .2em .3em;}</style>');
2658 
2659 //color selector function
2660
2661function setsingledigit(key){
2662if (key == 0) {window.mycolor = '₀';};
2663if (key == 1) {window.mycolor = '₁';};
2664if (key == 2) {window.mycolor = '₂';};
2665if (key == 3) {window.mycolor = '₃';};
2666if (key == 4) {window.mycolor = '₄';};
2667if (key == 5) {window.mycolor = '₅';};
2668if (key == 6) {window.mycolor = '₆';};
2669if (key == 7) {window.mycolor = '₇';};
2670if (key == 8) {window.mycolor = '₈';};
2671if (key == 9) {window.mycolor = '₉';};
2672
2673var persona = localStorage.getItem("drawtogether-name");
2674var onedigit = persona.substring(persona.length - 1, persona.length);
2675var twodigit = persona.substring(persona.length - 3, persona.length - 1);
2676var threedigit = persona.substring(persona.length - 3, persona.length);
2677
2678if (persona){
2679if (!everynumber.includes(threedigit)) {
2680var cutweight = persona.slice(0, 28);
2681var newpersona = cutweight + " " + mytwodigit + mycolor;
2682anondraw.collab.changeName(newpersona);
2683} else {
2684var cutweight = persona.substring(0, persona.length - 3);
2685var newpersona = cutweight + mytwodigit + mycolor;	
2686}};	
2687anondraw.collab.changeName(newpersona);
2688}	
2689
2690 //add coloroptions button
2691var coloroptionsbutton = document.createElement("div");
2692coloroptionsbutton.innerHTML = "<div style='background-color: #996633; height: 1.5rem; width: 20px; text-align: center; padding: 0px; float:right; vertical-align: bottom; line-height: 1.8em; border: 1px solid black;' data-color='33' onclick='setsingledigit(9)'>₉</div><div style='background-color: #7a7a52; height: 1.5rem; width: 20px; text-align: center; padding: 0px; float:right; vertical-align: bottom; line-height: 1.8em; border: 1px solid black;' data-color='32' onclick='setsingledigit(8)'>₈</div><div style='background-color: #669900; height: 1.5rem; width: 20px; text-align: center; padding: 0px; float:right; vertical-align: bottom; line-height: 1.8em; border: 1px solid black;' data-color='31' onclick='setsingledigit(7)'>₇</div><div style='background-color: #a9a900; height: 1.5rem; width: 20px; text-align: center; padding: 0px; float:right; vertical-align: bottom; line-height: 1.8em; border: 1px solid black;' data-color='23' onclick='setsingledigit(6)'>₆</div><div style='background-color: #009e9e; height: 1.5rem; width: 20px; text-align: center; padding: 0px; float:right; vertical-align: bottom; line-height: 1.8em; border: 1px solid black;' data-color='22' onclick='setsingledigit(5)'>₅</div><div style='background-color: #0066cc; height: 1.5rem; width: 20px; text-align: center; padding: 0px; float:right; vertical-align: bottom; line-height: 1.8em; border: 1px solid black;' data-color='21' onclick='setsingledigit(4)'>₄</div><div style='background-color: #8521e8; height: 1.5rem; width: 20px; text-align: center; padding: 0px; float:right; vertical-align: bottom; line-height: 1.8em; border: 1px solid black;' data-color='13' onclick='setsingledigit(3)'>₃</div><div style='background-color: #d700d7; height: 1.5rem; width: 20px; text-align: center; padding: 0px; float:right; vertical-align: bottom; line-height: 1.8em; border: 1px solid black;' data-color='12' onclick='setsingledigit(2)'>₂</div><div style='background-color: #e62e00; height: 1.5rem; width: 20px; text-align: center; padding: 0px; float:right; vertical-align: bottom; line-height: 1.8em; border: 1px solid black;' data-color='11' onclick='setsingledigit(1)'>₁</div><div style='background-color: black; color: grey; height: 1.5rem; width: 20px; text-align: center; padding: 0px; float:right; vertical-align: bottom; line-height:1.8em' data-color='none' onclick='setsingledigit(0)' onclick='setsingledigit(0)'>⛔</div>";
2693coloroptionsbutton.id = "coloroptionsbtn";
2694coloroptionsbutton.style.cursor = "pointer";
2695coloroptionsbutton.style.margin = "0";
2696coloroptionsbutton.style.borderRadius = "0";
2697coloroptionsbutton.style.padding = "0";
2698coloroptionsbutton.style.borderBottom = "0";
2699coloroptionsbutton.style.width = "200px"; 
2700coloroptionsbutton.style.height = "1.5rem";
2701coloroptionsbutton.style.lineHeight = "1.5rem";
2702coloroptionsbutton.style.left = "120px";
2703coloroptionsbutton.style.bottom = "1.5rem";
2704coloroptionsbutton.style.position = "absolute";
2705coloroptionsbutton.style.zIndex = "100";
2706coloroptionsbutton.style.display = "none";
2707var body = document.getElementsByClassName("drawtogether-chat-container")[0];
2708body.appendChild(coloroptionsbutton);
2709
2710
2711var colorsbutton = document.createElement("button");
2712colorsbutton.innerHTML = "?";
2713colorsbutton.id = "colorsbtn";
2714colorsbutton.title = "text color (only visible for mod users)";
2715colorsbutton.style.margin = "0";
2716colorsbutton.style.borderRadius = "0";
2717colorsbutton.style.padding = "0";
2718colorsbutton.style.borderBottom = "0";
2719colorsbutton.style.width = "20px"; 
2720colorsbutton.style.height = "1.5rem";
2721colorsbutton.style.lineHeight = "1.5rem";
2722colorsbutton.style.left = "100px";
2723colorsbutton.style.bottom = "1.5rem";
2724colorsbutton.style.position = "absolute";
2725colorsbutton.className = "control-button"
2726var body = document.getElementsByClassName("drawtogether-chat-container")[0];
2727body.appendChild(colorsbutton);
2728var showcolors = 0;
2729colorsbutton.addEventListener ("click", function() {
2730if (showcolors == 0){
2731document.getElementById("coloroptionsbtn").style.display = "inline-block";
2732colorsbutton.classList.add("activated");
2733window.showcolors = 1;
2734} else {
2735document.getElementById("coloroptionsbtn").style.display = "none";
2736colorsbutton.classList.remove("activated");
2737window.showcolors = 0;
2738}
2739});
2740 
2741  
2742 //colorbox open onmouseover and lock on checkbox
2743 document.getElementsByClassName("sp-container")[0].id = "maincolorsbox";
2744 
2745document.getElementsByClassName("sp-replacer")[0].addEventListener("mouseenter", function() {
2746if (!document.getElementById("eyecheckbox").checked){
2747document.getElementsByClassName("sp-replacer")[0].click();	
2748}
2749//document.getElementsByClassName('sp-container')[0].classList.remove("sp-hidden");
2750});
2751
2752document.getElementsByClassName("sp-container")[0].addEventListener("mouseleave", function() {
2753if (!document.getElementById("eyecheckbox").checked)	{
2754document.getElementsByClassName("sp-replacer")[0].click();
2755}
2756//document.getElementsByClassName('sp-container')[0].classList.add("sp-hidden");
2757localStorage.setItem("storedcolor", document.getElementsByClassName("sp-input")[0].value);
2758});
2759
2760
2761var eyecheckbox = document.createElement("INPUT");
2762eyecheckbox.id = "eyecheckbox";
2763eyecheckbox.setAttribute("type", "checkbox");
2764eyecheckbox.style.float = "left";
2765document.getElementsByClassName('sp-picker-container')[0].insertBefore(eyecheckbox,document.getElementsByClassName('sp-button-container')[0]);
2766  
2767var eyechecktext = document.createElement("SPAN");
2768eyechecktext.id = "eyechecktext";
2769eyechecktext.innerHTML = "??";
2770eyechecktext.style.color = "white";
2771eyechecktext.style.float = "left";
2772document.getElementsByClassName('sp-picker-container')[0].insertBefore(eyechecktext,document.getElementsByClassName('sp-button-container')[0]);
2773 
2774 document.getElementById("eyecheckbox").addEventListener( 'change', function() {
2775    if(this.checked) {
2776//$('#maincolorsbox').attr('style', 'display: inline-block !important');		
2777//$('#maincolorsbox').attr('style', function(i,s) { return s + 'display: inline-block !important' });
2778$('#maincolorsbox').attr('style', function(i,s) { return (s.replace('display: inline-block;', '')||'') + 'display: inline-block !important;' });
2779eyechecktext.innerHTML = "??";
2780    } else {
2781//$('#maincolorsbox').attr('style', 'display: inline-block');		
2782//$('#maincolorsbox').attr('style', function(i,s) { return s + 'display: inline-block' });
2783$('#maincolorsbox').attr('style', function(i,s) { return (s.replace('display: inline-block !important;', '')||'') + 'display: inline-block;' });
2784eyechecktext.innerHTML = "??";
2785    }
2786});
2787 
2788 
2789 //creating chatbuttons dock
2790 document.getElementsByClassName("drawtogether-chat-container")[0].style.background = 'rgb(35, 52, 69)'; 
2791 document.getElementsByClassName("messagecontainer")[0].style.height = 'calc(100% - 1.5rem - 1.5rem)';
2792 document.getElementsByClassName("messagecontainer")[0].style.background = '#d5d9db';
2793 
2794 
2795 
2796 //add ghost button
2797 document.head.insertAdjacentHTML('beforeend','<style>.chat-message:hover {background: rgba(255, 255, 255, 0.2);}</style>');
2798 document.head.insertAdjacentHTML('beforeend','<style>.premium {color: #ffd700; text-shadow: 0px 0px 4px #ffe866; background-image: none ;-webkit-text-fill-color: unset;}</style>');
2799 document.getElementsByClassName("drawtogether-info-playerlist")[0].style.fontWeight = '800';
2800 
2801var ghoststate = 0;
2802var ghostbutton = document.createElement("button");
2803ghostbutton.innerHTML = "?";
2804ghostbutton.id = "ghostbtn";
2805ghostbutton.title = "transparent chat";
2806ghostbutton.style.margin = "0";
2807ghostbutton.style.borderRadius = "0";
2808ghostbutton.style.padding = "0";
2809ghostbutton.style.borderBottom = "0";
2810ghostbutton.style.width = "20px"; 
2811ghostbutton.style.height = "1.5rem"; 
2812ghostbutton.style.lineHeight = "100%"; 
2813ghostbutton.style.position = "absolute";
2814ghostbutton.style.bottom = "1.5rem";
2815ghostbutton.style.left = "20px";
2816ghostbutton.className = "control-button"
2817var body = document.getElementsByClassName("drawtogether-chat-container")[0];
2818body.appendChild(ghostbutton);
2819ghostbutton.addEventListener ("click", function() {
2820if (ghoststate == 1){ 
2821
2822document.getElementsByClassName("drawtogether-info-container")[0].style.pointerEvents = "auto";
2823document.getElementsByClassName("drawtogether-chat-container")[0].style.pointerEvents = "auto";
2824document.getElementsByClassName("inputcontainer")[0].style.pointerEvents = "auto";
2825document.getElementsByClassName("drawtogether-chat-container")[0].childNodes[2].style.pointerEvents = "auto";
2826document.getElementsByClassName("drawtogether-chat-container")[0].childNodes[3].style.pointerEvents = "auto";
2827document.getElementsByClassName("drawtogether-chat-container")[0].childNodes[4].style.pointerEvents = "auto";
2828document.getElementsByClassName("drawtogether-chat-container")[0].childNodes[5].style.pointerEvents = "auto";
2829document.getElementsByClassName("drawtogether-chat-container")[0].childNodes[6].style.pointerEvents = "auto";
2830document.getElementsByClassName("drawtogether-chat-container")[0].childNodes[7].style.pointerEvents = "auto";
2831document.getElementsByClassName("drawtogether-chat-container")[0].childNodes[8].style.pointerEvents = "auto";
2832document.getElementsByClassName("drawtogether-chat-container")[0].childNodes[9].style.pointerEvents = "auto";
2833document.getElementsByClassName("drawtogether-chat-container")[0].childNodes[10].style.pointerEvents = "auto";
2834document.getElementsByClassName("drawtogether-chat-container")[0].childNodes[11].style.pointerEvents = "auto";
2835document.getElementsByClassName("drawtogether-chat-container")[0].childNodes[12].style.pointerEvents = "auto";
2836document.getElementsByClassName("drawtogether-chat-container")[0].childNodes[13].style.pointerEvents = "auto";
2837document.getElementsByClassName("drawtogether-chat-container")[0].childNodes[14].style.pointerEvents = "auto";
2838document.getElementsByClassName("drawtogether-chat-container")[0].childNodes[15].style.pointerEvents = "auto";
2839document.getElementsByClassName("drawtogether-chat-container")[0].childNodes[16].style.pointerEvents = "auto";
2840document.getElementsByClassName("drawtogether-chat-container")[0].childNodes[17].style.pointerEvents = "auto";
2841document.getElementsByClassName("drawtogether-chat-container")[0].childNodes[18].style.pointerEvents = "auto";
2842
2843
2844
2845  document.getElementsByClassName("messagecontainer")[0].style.fontWeight = 'inherit';	
2846    
2847  
2848document.head.insertAdjacentHTML('beforeend','<style>.drawtogether-info-playerlist .drawtogether-player {color: #bdcddd;}</style>');
2849document.head.insertAdjacentHTML('beforeend','<style>.drawtogether-info-playerlist .drawtogether-player:hover {color: #bdcddd;}</style>');
2850document.head.insertAdjacentHTML('beforeend','<style>.drawtogether-info-playerlist .drawtogether-player.premium {color: #ffd700; text-shadow: "none"; background-image: none;-webkit-text-fill-color: unset;}</style>');
2851if (isminimized){		
2852if (!document.getElementById("namesdisplaybtn").classList.contains('activated'))  {
2853document.getElementsByClassName("messagecontainer")[0].style.borderTop = '2px solid hsla(210, 0%, 20%, 1)';
2854} else {
2855document.getElementsByClassName("drawtogether-info-container")[0].style.borderTop = '2px solid hsla(210, 0%, 20%, 1)';	
2856}	
2857document.getElementsByClassName("messagecontainer")[0].style.borderRight = '2px solid hsla(210, 0%, 20%, 1)';
2858document.getElementsByClassName("drawtogether-info-container")[0].style.borderRight = '2px solid hsla(210, 0%, 20%, 1)';
2859}
2860
2861
2862 document.getElementsByClassName("drawtogether-info-container")[0].style.background = 'hsla(210, 0%, 20%, 1)';
2863 document.getElementsByClassName("drawtogether-chat-container")[0].style.background = 'hsla(210, 0%, 20%, 0)';
2864 document.head.insertAdjacentHTML('beforeend','<style>.drawtogether-info-playerlist .drawtogether-player {background: none;}</style>');
2865
2866document.getElementsByClassName("messagecontainer")[0].style.background = 'rgba(213, 217, 219, 1)';
2867
2868
2869//document.getElementById("emojilist").style.display = "none";
2870
2871if (!isminimized) {
2872 document.getElementsByClassName("drawtogether-paint-container")[0].style.width= "calc(100% - 20rem)";
2873anondraw.collab.paint.resize();
2874}	
2875document.head.insertAdjacentHTML('beforeend','<style>.chat-message:hover {background: rgba(255, 255, 255, 0.2);}</style>');
2876window.ghoststate = 0;
2877ghostbutton.classList.remove("activated");
2878 anondraw.collab.updatePlayerList()
2879} else {	
2880
2881document.getElementsByClassName("drawtogether-info-container")[0].style.pointerEvents = "none";
2882document.getElementsByClassName("drawtogether-chat-container")[0].style.pointerEvents = "none";
2883document.getElementsByClassName("inputcontainer")[0].style.pointerEvents = "auto";
2884document.getElementsByClassName("drawtogether-chat-container")[0].childNodes[2].style.pointerEvents = "auto";
2885document.getElementsByClassName("drawtogether-chat-container")[0].childNodes[3].style.pointerEvents = "auto";
2886document.getElementsByClassName("drawtogether-chat-container")[0].childNodes[4].style.pointerEvents = "auto";
2887document.getElementsByClassName("drawtogether-chat-container")[0].childNodes[5].style.pointerEvents = "auto";
2888document.getElementsByClassName("drawtogether-chat-container")[0].childNodes[6].style.pointerEvents = "auto";
2889document.getElementsByClassName("drawtogether-chat-container")[0].childNodes[7].style.pointerEvents = "auto";
2890document.getElementsByClassName("drawtogether-chat-container")[0].childNodes[8].style.pointerEvents = "auto";
2891document.getElementsByClassName("drawtogether-chat-container")[0].childNodes[9].style.pointerEvents = "auto";
2892document.getElementsByClassName("drawtogether-chat-container")[0].childNodes[10].style.pointerEvents = "auto";
2893document.getElementsByClassName("drawtogether-chat-container")[0].childNodes[11].style.pointerEvents = "auto";
2894document.getElementsByClassName("drawtogether-chat-container")[0].childNodes[12].style.pointerEvents = "auto";
2895document.getElementsByClassName("drawtogether-chat-container")[0].childNodes[13].style.pointerEvents = "auto";
2896document.getElementsByClassName("drawtogether-chat-container")[0].childNodes[14].style.pointerEvents = "auto";
2897document.getElementsByClassName("drawtogether-chat-container")[0].childNodes[15].style.pointerEvents = "auto";
2898document.getElementsByClassName("drawtogether-chat-container")[0].childNodes[16].style.pointerEvents = "auto";
2899document.getElementsByClassName("drawtogether-chat-container")[0].childNodes[17].style.pointerEvents = "auto";
2900document.getElementsByClassName("drawtogether-chat-container")[0].childNodes[18].style.pointerEvents = "auto";
2901
2902
2903  document.getElementsByClassName("messagecontainer")[0].style.fontWeight = '800';	
2904document.head.insertAdjacentHTML('beforeend','<style>.drawtogether-info-playerlist .drawtogether-player {color: #fff;}</style>');	
2905document.head.insertAdjacentHTML('beforeend','<style>.drawtogether-info-playerlist .drawtogether-player:hover {color: #f5f5f5;}</style>');
2906document.head.insertAdjacentHTML('beforeend','<style>.premium {color: #ffd700; text-shadow: 0px 0px 4px #ffe866; background-image: none ;-webkit-text-fill-color: unset;}</style>');
2907document.getElementsByClassName("messagecontainer")[0].style.borderTop = '0px solid rgba(35, 52, 69, 0)';
2908document.getElementsByClassName("messagecontainer")[0].style.borderRight = '0px solid rgba(35, 52, 69, 0)';
2909document.getElementsByClassName("drawtogether-info-container")[0].style.borderTop = '0px solid rgba(35, 52, 69, 0)';
2910document.getElementsByClassName("drawtogether-info-container")[0].style.borderRight = '0px solid rgba(35, 52, 69, 0)';
2911document.getElementsByClassName("messagecontainer")[0].style.background = 'rgba(213, 217, 219,0)';
2912document.head.insertAdjacentHTML('beforeend','<style>.drawtogether-info-playerlist .drawtogether-player { background: rgba(35, 52, 69, 0);}</style>');
2913document.getElementsByClassName("drawtogether-chat-container")[0].style.background = 'rgba(35, 52, 69, 0)'; 	
2914document.getElementsByClassName("drawtogether-info-container")[0].style.background = 'rgba(35, 52, 69, 0)';
2915//document.getElementById("emojilist").style.display = "block";
2916
2917if (!isminimized) {
2918document.getElementsByClassName("drawtogether-paint-container")[0].style.width= "100%";
2919anondraw.collab.paint.resize();	
2920}	
2921document.head.insertAdjacentHTML('beforeend','<style>.chat-message:hover {background: rgba(0,0,0,0.6);}</style>');
2922window.ghoststate = 1;
2923ghostbutton.classList.add("activated");
2924 anondraw.collab.updatePlayerList();
2925 document.getElementsByClassName("messagecontainer")[0].scrollTop = document.getElementsByClassName("messagecontainer")[0].scrollHeight;
2926}
2927});
2928 
2929 
2930 //add resize chat button
2931 var namesdisplaystate;
2932 document.getElementsByClassName("drawtogether-chat-container")[0].style.zIndex = '99999999';
2933 document.getElementsByClassName("drawtogether-info-container")[0].style.zIndex = '99999998';
2934 
2935var chatsizestate = 0;
2936var chatsizebutton = document.createElement("button");
2937chatsizebutton.innerHTML = '<i class="material-icons-sharp">keyboard_arrow_down</i>';
2938chatsizebutton.id = "chatsizebtn";
2939chatsizebutton.title = "resize chat";
2940chatsizebutton.style.margin = "0";
2941chatsizebutton.style.borderRadius = "0";
2942chatsizebutton.style.padding = "0";
2943chatsizebutton.style.borderBottom = "0";
2944chatsizebutton.style.width = "20px"; 
2945chatsizebutton.style.height = "1.5rem"; 
2946chatsizebutton.style.lineHeight = "100%"; 
2947chatsizebutton.style.position = "absolute";
2948chatsizebutton.style.bottom = "1.5rem";
2949chatsizebutton.style.left = "0px";
2950chatsizebutton.className = "control-button";
2951var body = document.getElementsByClassName("drawtogether-chat-container")[0];
2952body.appendChild(chatsizebutton);
2953var isminimized = false;
2954chatsizebutton.addEventListener ("click", function() {
2955if (chatsizestate == 1){
2956if (document.getElementById("namesdisplaybtn").classList.contains('activated'))  {
2957document.getElementsByClassName("drawtogether-info-container")[0].style.bottom = "60%";
2958document.getElementsByClassName("drawtogether-info-container")[0].style.top = "2.3rem";	
2959document.getElementsByClassName("drawtogether-chat-container")[0].style.top = '40%';
2960} else {
2961document.getElementsByClassName("drawtogether-chat-container")[0].style.top = '2.3rem';	
2962}
2963
2964document.getElementsByClassName("messagecontainer")[0].style.borderTop = '0px solid rgba(35, 52, 69, 0)';
2965document.getElementsByClassName("messagecontainer")[0].style.borderRight = '0px solid rgba(35, 52, 69, 0)';
2966document.getElementsByClassName("drawtogether-info-container")[0].style.borderRight = '0px solid rgba(35, 52, 69, 0)';
2967// document.getElementsByClassName("messagecontainer")[0].style.background = '#d5d9db';
2968 document.getElementsByClassName("drawtogether-paint-container")[0].style.width= "calc(100% - 20rem)";
2969anondraw.collab.paint.resize();
2970
2971document.getElementById("emojilist").style.bottom = "60%";
2972document.getElementById("emolist").style.bottom = "60%";
2973document.getElementById("emojilist").style.top = "2.3rem";
2974document.getElementById("emolist").style.top = "2.3rem";
2975document.head.insertAdjacentHTML('beforeend','<style>/* width */ ::-webkit-scrollbar {   width: 15px;   }</style>');
2976//namesdisplaybutton.classList.add("activated");
2977//window.namesdisplaystate = 0;
2978
2979if (document.getElementById("ghostbtn").classList.contains('activated')) {
2980document.getElementsByClassName("drawtogether-paint-container")[0].style.width= "100%";
2981anondraw.collab.paint.resize();
2982}	
2983
2984window.chatsizestate = 0;
2985window.isminimized = false;
2986chatsizebutton.innerHTML = '<i class="material-icons-sharp">keyboard_arrow_down</i>';
2987} else {
2988document.getElementsByClassName("drawtogether-info-container")[0].style.bottom = "30%";
2989document.getElementsByClassName("drawtogether-info-container")[0].style.top = "60%";	
2990document.getElementsByClassName("drawtogether-chat-container")[0].style.top = '70%';
2991
2992
2993if (!document.getElementById("ghostbtn").classList.contains('activated')) {
2994if (!document.getElementById("namesdisplaybtn").classList.contains('activated'))  {		
2995document.getElementsByClassName("messagecontainer")[0].style.borderTop = '2px solid hsla(210, 0%, 20%, 1)';
2996}
2997document.getElementsByClassName("drawtogether-info-container")[0].style.borderRight = '2px solid rgb(35, 52, 69)';
2998document.getElementsByClassName("messagecontainer")[0].style.borderRight = '2px solid hsla(210, 0%, 20%, 1)';
2999}
3000// document.getElementsByClassName("messagecontainer")[0].style.background = 'transparent';
3001 document.getElementsByClassName("drawtogether-paint-container")[0].style.width= "100%";
3002anondraw.collab.paint.resize();
3003
3004document.getElementById("emojilist").style.bottom = "30%";
3005document.getElementById("emolist").style.bottom = "30%";
3006document.getElementById("emojilist").style.top = "40%";
3007document.getElementById("emolist").style.top = "40%";
3008document.head.insertAdjacentHTML('beforeend','<style>/* width */ ::-webkit-scrollbar {   width: 20px;   }</style>');
3009window.chatsizestate = 1;
3010window.isminimized = true;
3011chatsizebutton.innerHTML = '<i class="material-icons-sharp">keyboard_arrow_up</i>';
3012document.getElementsByClassName("messagecontainer")[0].scrollTop = document.getElementsByClassName("messagecontainer")[0].scrollHeight;
3013}
3014});
3015
3016
3017
3018//add display names button
3019var namesdisplaybutton = document.createElement("button");
3020namesdisplaybutton.innerHTML = "?";
3021namesdisplaybutton.id = "namesdisplaybtn";
3022namesdisplaybutton.title = "display userslist";
3023namesdisplaybutton.style.margin = "0";
3024namesdisplaybutton.style.borderRadius = "0";
3025namesdisplaybutton.style.padding = "0";
3026namesdisplaybutton.style.borderBottom = "0";
3027namesdisplaybutton.style.width = "20px"; 
3028namesdisplaybutton.style.height = "1.5rem"; 
3029namesdisplaybutton.style.lineHeight = "100%"; 
3030namesdisplaybutton.style.position = "absolute";
3031namesdisplaybutton.style.bottom = "1.5rem";
3032namesdisplaybutton.style.left = "40px";
3033namesdisplaybutton.className = "control-button activated";
3034var body = document.getElementsByClassName("drawtogether-chat-container")[0];
3035body.appendChild(namesdisplaybutton);
3036
3037namesdisplaybutton.addEventListener ("click", function() {
3038if (namesdisplaystate == 1){
3039if (isminimized){	
3040document.getElementsByClassName("drawtogether-info-container")[0].style.display = 'block';
3041document.getElementsByClassName("messagecontainer")[0].style.borderTop = '0px solid rgba(35, 52, 69, 0)';
3042document.getElementsByClassName("drawtogether-info-container")[0].style.bottom = "30%";
3043document.getElementsByClassName("drawtogether-info-container")[0].style.top = "60%";	
3044document.getElementsByClassName("drawtogether-chat-container")[0].style.top = '70%';
3045
3046namesdisplaybutton.classList.add("activated");
3047window.namesdisplaystate = 0;
3048} else {
3049document.getElementsByClassName("drawtogether-info-container")[0].style.display = 'block';
3050document.getElementsByClassName("messagecontainer")[0].style.borderTop = '0px solid rgba(35, 52, 69, 0)';
3051document.getElementsByClassName("drawtogether-info-container")[0].style.bottom = "60%";
3052document.getElementsByClassName("drawtogether-info-container")[0].style.top = "2.3rem";	
3053document.getElementsByClassName("drawtogether-chat-container")[0].style.top = '40%';
3054
3055namesdisplaybutton.classList.add("activated");
3056window.namesdisplaystate = 0;
3057}
3058anondraw.collab.updatePlayerList();
3059} else {
3060if (isminimized){
3061document.getElementsByClassName("drawtogether-chat-container")[0].style.top = '70%';
3062document.getElementsByClassName("drawtogether-info-container")[0].style.display = 'none';
3063if (!document.getElementById("ghostbtn").classList.contains('activated')) {
3064document.getElementsByClassName("messagecontainer")[0].style.borderTop = '2px solid hsla(210, 0%, 20%, 1)';
3065}
3066namesdisplaybutton.classList.remove("activated");
3067window.namesdisplaystate = 1;
3068} else {
3069document.getElementsByClassName("drawtogether-chat-container")[0].style.top = '2.3rem';
3070document.getElementsByClassName("drawtogether-info-container")[0].style.display = 'none';
3071document.getElementsByClassName("messagecontainer")[0].style.borderTop = '0px solid rgb(35, 52, 69)';
3072namesdisplaybutton.classList.remove("activated");
3073window.namesdisplaystate = 1;
3074}
3075}
3076});
3077
3078
3079//set chat bg and border
3080document.getElementsByClassName("drawtogether-info-container")[0].style.background = 'rgba(35, 52, 69, 1)';
3081//document.getElementsByClassName("drawtogether-info-playerlist")[0].style.background = '#233445';
3082document.getElementsByClassName("inputcontainer")[0].style.borderBottom = '2px solid hsla(210, 0%, 20%, 1)';
3083document.getElementsByClassName("inputcontainer")[0].style.borderLeft = '2px solid hsla(210, 0%, 20%, 1)';
3084
3085
3086//add nsfw position button
3087var xxxspotbutton = document.createElement("button");
3088xxxspotbutton.innerHTML = "?";
3089xxxspotbutton.id = "xxxspotbtn";
3090xxxspotbutton.title = "share nsfw position";
3091xxxspotbutton.style.margin = "0";
3092xxxspotbutton.style.borderRadius = "0";
3093xxxspotbutton.style.padding = "0";
3094xxxspotbutton.style.borderBottom = "0";
3095xxxspotbutton.style.width = "20px"; 
3096xxxspotbutton.style.height = "1.5rem";
3097xxxspotbutton.style.lineHeight = "1.5rem";
3098xxxspotbutton.style.left = "140px";
3099xxxspotbutton.style.bottom = "1.5rem";
3100xxxspotbutton.style.position = "absolute";
3101xxxspotbutton.className = "control-button"
3102var body = document.getElementsByClassName("drawtogether-chat-container")[0];
3103body.appendChild(xxxspotbutton);
3104xxxspotbutton.addEventListener ("click", function() {
3105var example = window.location.href;
3106var step_one = example.replace(/.*\D,/, "");
3107var chatinput = document.getElementsByClassName('drawtogheter-chat-input')[0];
3108if (chatinput.value.substring(chatinput.value.length - 1, chatinput.value.length) == " " || chatinput.value.length < 1){
3109chatinput.value = chatinput.value + step_one + " ?"	
3110} else {
3111chatinput.value = chatinput.value + " " + step_one + " ?"
3112}
3113
3114var input = document.getElementsByClassName("drawtogheter-chat-input")[0];
3115setCaretPosition(input, input.value.length);
3116//anondraw.collab.chat.onMessage( step_one);
3117});
3118
3119
3120
3121
3122//add 18+ button
3123var nsfwbutton = document.createElement("button");
3124nsfwbutton.innerHTML = "?";
3125nsfwbutton.id = "nsfwbtn";
3126nsfwbutton.title = "drawing nsfw (nick)";
3127nsfwbutton.style.margin = "0";
3128nsfwbutton.style.borderRadius = "0";
3129nsfwbutton.style.padding = "0";
3130nsfwbutton.style.borderBottom = "0";
3131nsfwbutton.style.width = "20px"; 
3132nsfwbutton.style.height = "1.5rem";
3133nsfwbutton.style.lineHeight = "1.5rem";
3134nsfwbutton.style.left = "260px";
3135nsfwbutton.style.bottom = "1.5rem";
3136nsfwbutton.style.position = "absolute";
3137nsfwbutton.className = "control-button"
3138var body = document.getElementsByClassName("drawtogether-chat-container")[0];
3139body.appendChild(nsfwbutton);
3140var nsfwstate = 0;
3141var nsfwname;
3142nsfwbutton.addEventListener ("click", function() {
3143if (nsfwstate == 0){
3144var persona = localStorage.getItem("drawtogether-name");
3145var threedigit = persona.substring(persona.length - 3, persona.length);
3146
3147if (persona) {
3148if (everynumber.includes(threedigit)) {
3149var nsfwname = persona.replace(threedigit, "");
3150var cutweight = nsfwname.slice(0, 25);
3151var nsfwname = nsfwname + " |? " + threedigit;
3152anondraw.collab.changeName(nsfwname);
3153} else {
3154var cutweight = persona.slice(0, 25);
3155var nsfwname = cutweight + " |? " + mytwodigit + '₀';
3156anondraw.collab.changeName(nsfwname);
3157}
3158}	
3159nsfwbutton.classList.add("activated");	
3160window.nsfwstate=1;
3161} else {
3162anondraw.collab.changeName(persona);	
3163nsfwbutton.classList.remove("activated");	
3164window.nsfwstate=0;
3165}
3166//anondraw.collab.changeName(str);
3167//anondraw.collab.chat.onMessage( step_one);
3168});
3169
3170
3171
3172
3173//add afk button
3174var persona = localStorage.getItem("drawtogether-name");
3175if (persona.indexOf(" |afk")!=-1){
3176var nonafkname = persona.replace(" |afk", "");
3177anondraw.collab.changeName(nonafkname);
3178}
3179
3180var persona = localStorage.getItem("drawtogether-name");
3181if (persona.indexOf(" |brb")!=-1){
3182var nonafkname = persona.replace(" |brb", "");
3183anondraw.collab.changeName(nonafkname);
3184}
3185
3186var persona = localStorage.getItem("drawtogether-name");
3187if (persona.indexOf(" |?")!=-1){
3188var nonafkname = persona.replace(" |?", "");
3189anondraw.collab.changeName(nonafkname);
3190}
3191
3192var afkbutton = document.createElement("button");
3193afkbutton.innerHTML = "?";
3194afkbutton.id = "afkbtn";
3195afkbutton.title = "afk";
3196afkbutton.style.margin = "0";
3197afkbutton.style.borderRadius = "0";
3198afkbutton.style.padding = "0";
3199afkbutton.style.borderBottom = "0";
3200afkbutton.style.width = "20px"; 
3201afkbutton.style.height = "1.5rem";
3202afkbutton.style.lineHeight = "1.5rem";
3203afkbutton.style.left = "280px";
3204afkbutton.style.bottom = "1.5rem";
3205afkbutton.style.position = "absolute";
3206afkbutton.className = "control-button"
3207var body = document.getElementsByClassName("drawtogether-chat-container")[0];
3208body.appendChild(afkbutton);
3209var afkstate = 0;
3210var afkname;
3211afkbutton.addEventListener ("click", function() {
3212if (afkstate == 0){
3213var persona = localStorage.getItem("drawtogether-name");
3214var threedigit = persona.substring(persona.length - 3, persona.length);
3215
3216if (persona) {
3217if (everynumber.includes(threedigit)) {
3218var afkname = persona.replace(threedigit, "");
3219var cutweight = afkname.slice(0, 23);
3220var afkname = afkname + " |afk " + threedigit;
3221anondraw.collab.changeName(afkname);
3222} else {
3223var cutweight = persona.slice(0, 23);
3224var afkname = cutweight + " |afk " + mytwodigit + '₀';
3225anondraw.collab.changeName(afkname);
3226}
3227}	
3228afkbutton.classList.add("activated");	
3229window.afkstate=1;
3230} else {
3231anondraw.collab.changeName(persona);	
3232afkbutton.classList.remove("activated");	
3233window.afkstate=0;
3234}
3235//anondraw.collab.changeName(str);
3236//anondraw.collab.chat.onMessage( step_one);
3237});
3238
3239//add brb button
3240var brbbutton = document.createElement("button");
3241brbbutton.innerHTML = "?";
3242brbbutton.id = "brbbtn";
3243brbbutton.title = "brb!";
3244brbbutton.style.margin = "0";
3245brbbutton.style.borderRadius = "0";
3246brbbutton.style.padding = "0";
3247brbbutton.style.borderBottom = "0";
3248brbbutton.style.width = "20px"; 
3249brbbutton.style.height = "1.5rem";
3250brbbutton.style.lineHeight = "1.5rem";
3251brbbutton.style.left = "300px";
3252brbbutton.style.bottom = "1.5rem";
3253brbbutton.style.position = "absolute";
3254brbbutton.className = "control-button"
3255var body = document.getElementsByClassName("drawtogether-chat-container")[0];
3256body.appendChild(brbbutton);
3257var brbstate = 0;
3258var brbname;
3259brbbutton.addEventListener ("click", function() {
3260if (brbstate == 0){
3261var persona = localStorage.getItem("drawtogether-name");
3262var threedigit = persona.substring(persona.length - 3, persona.length);
3263
3264if (persona) {
3265if (everynumber.includes(threedigit)) {
3266var brbname = persona.replace(threedigit, "");
3267var cutweight = brbname.slice(0, 23);
3268var brbname = brbname + " |brb " + threedigit;
3269anondraw.collab.changeName(brbname);
3270} else {
3271var cutweight = persona.slice(0, 23);
3272var brbname = cutweight + " |brb " + mytwodigit + '₀';
3273anondraw.collab.changeName(brbname);
3274}
3275}	
3276brbbutton.classList.add("activated");	
3277window.brbstate=1;
3278} else {
3279anondraw.collab.changeName(persona);	
3280brbbutton.classList.remove("activated");	
3281window.brbstate=0;
3282}
3283//anondraw.collab.changeName(str);
3284//anondraw.collab.chat.onMessage( step_one);
3285});
3286
3287
3288     
3289
3290 
3291
3292
3293
3294//add botdisplay button
3295var botslist = "31029,31075,31098";
3296
3297var storedbots = localStorage.getItem("bots");
3298if (storedbots) {
3299window.botslist = botslist + "," + storedbots;
3300}
3301
3302var botstate = 0;
3303var showbots = 0;
3304anondraw.collab.updatePlayerList();
3305
3306var botdisplaybutton = document.createElement("button");
3307botdisplaybutton.innerHTML = "?";
3308botdisplaybutton.id = "botdisplaybtn";
3309botdisplaybutton.title = "display bots";
3310botdisplaybutton.style.margin = "0";
3311botdisplaybutton.style.borderRadius = "0";
3312botdisplaybutton.style.padding = "0";
3313botdisplaybutton.style.borderBottom = "0";
3314botdisplaybutton.style.width = "20px"; 
3315botdisplaybutton.style.height = "1.5rem";
3316botdisplaybutton.style.lineHeight = "1.5rem";
3317botdisplaybutton.style.left = "160px";
3318botdisplaybutton.style.bottom = "1.5rem";
3319botdisplaybutton.style.position = "absolute";
3320botdisplaybutton.className = "control-button";
3321var body = document.getElementsByClassName("drawtogether-chat-container")[0];
3322body.appendChild(botdisplaybutton);
3323	
3324
3325
3326botdisplaybutton.addEventListener ("click", function() {
3327	if (botstate == 1){
3328window.showbots = 0;		
3329 anondraw.collab.updatePlayerList();
3330botdisplaybutton.classList.remove("activated");
3331window.botstate = 0;			
3332	} else {	
3333window.showbots = 1;	
3334 anondraw.collab.updatePlayerList();
3335botdisplaybutton.classList.add("activated");	
3336window.botstate = 1;	
3337	}
3338});
3339
3340
3341//add backgroundurl button
3342var storedbgurl = localStorage.getItem("bgurl");
3343if (storedbgurl) {
3344window.bgurl = storedbgurl;
3345}
3346
3347
3348var backgroundurlbutton = document.createElement("button");
3349backgroundurlbutton.innerHTML = "?";
3350backgroundurlbutton.id = "backgroundurlbtn";
3351backgroundurlbutton.title = "set url bg image (activated in the bottom right icon)";
3352backgroundurlbutton.style.margin = "0";
3353backgroundurlbutton.style.borderRadius = "0";
3354backgroundurlbutton.style.padding = "0";
3355backgroundurlbutton.style.borderBottom = "0";
3356backgroundurlbutton.style.width = "20px"; 
3357backgroundurlbutton.style.height = "1.5rem";
3358backgroundurlbutton.style.lineHeight = "1.5rem";
3359backgroundurlbutton.style.left = "220px";
3360backgroundurlbutton.style.bottom = "1.5rem";
3361backgroundurlbutton.style.position = "absolute";
3362backgroundurlbutton.className = "control-button"
3363var body = document.getElementsByClassName("drawtogether-chat-container")[0];
3364body.appendChild(backgroundurlbutton);
3365backgroundurlbutton.addEventListener ("click", function() {
3366document.getElementsByClassName("drawtogheter-chat-input")[0].maxLength = 524288;	
3367var chatinput = document.getElementsByClassName("drawtogheter-chat-input")[0].value = "/bgurl " + document.getElementsByClassName("drawtogheter-chat-input")[0].value;	
3368
3369var input = document.getElementsByClassName("drawtogheter-chat-input")[0];
3370setCaretPosition(input, input.value.length);	
3371//anondraw.collab.changeName(str);
3372//anondraw.collab.chat.onMessage( step_one);
3373});
3374
3375
3376//add screenshot button
3377var screenshotbutton = document.createElement("button");
3378screenshotbutton.innerHTML = "?";
3379screenshotbutton.id = "screenshotbtn";
3380screenshotbutton.title = "set screenshot bg image (activated in the bottom right icon)";
3381screenshotbutton.style.margin = "0";
3382screenshotbutton.style.borderRadius = "0";
3383screenshotbutton.style.padding = "0";
3384screenshotbutton.style.borderBottom = "0";
3385screenshotbutton.style.width = "20px"; 
3386screenshotbutton.style.height = "1.5rem";
3387screenshotbutton.style.lineHeight = "1.5rem";
3388screenshotbutton.style.left = "240px";
3389screenshotbutton.style.bottom = "1.5rem";
3390screenshotbutton.style.position = "absolute";
3391screenshotbutton.className = "control-button"
3392var body = document.getElementsByClassName("drawtogether-chat-container")[0];
3393body.appendChild(screenshotbutton);
3394
3395
3396screenshotbutton.addEventListener ("click", function() {
3397
3398				var g = document.createElement("canvas"),
3399                            k = anondraw.collab.paint.public.canvas.height,
3400                            l = anondraw.collab.paint.public.canvas.width;
3401                        g.width = l;
3402                        g.height = k;
3403                        var m = g.getContext("2d");
3404
3405                                m.drawImage(anondraw.collab.paint.background.canvas, 0, 0, l, k);
3406                                m.drawImage(anondraw.collab.paint.public.canvas, 0, 0, l, k);
3407                                anondraw.collab.lastBanSnapshot = g.toDataURL("image/png");                                
3408 
3409window.bgscreen = "'" + g.toDataURL("image/png") + "'";
3410
3411localStorage.setItem("bgscreen", window.bgscreen);
3412anondraw.collab.chat.addMessage('Snapshot taken',"click on the right bottom corner button to activate"); 
3413window.originalzoom = anondraw.collab.paint.public.zoom;
3414//anondraw.collab.changeName(str);
3415//anondraw.collab.chat.onMessage( step_one);
3416});
3417
3418
3419
3420
3421
3422//add aka button
3423
3424var akaarray;
3425
3426var storedaka = localStorage.getItem("storedaka");
3427if (storedaka){
3428window.akaarray = storedaka.split(",");
3429} else {
3430window.akaarray = [];	
3431}
3432
3433var akabutton = document.createElement("button");
3434akabutton.innerHTML = "?";
3435akabutton.id = "akabtn";
3436akabutton.title = "notification list (separate words with comma)";
3437akabutton.style.margin = "0";
3438akabutton.style.borderRadius = "0";
3439akabutton.style.padding = "0";
3440akabutton.style.borderBottom = "0";
3441akabutton.style.width = "20px"; 
3442akabutton.style.height = "1.5rem";
3443akabutton.style.lineHeight = "1.5rem";
3444akabutton.style.left = "180px";
3445akabutton.style.bottom = "1.5rem";
3446akabutton.style.position = "absolute";
3447akabutton.className = "control-button"
3448var body = document.getElementsByClassName("drawtogether-chat-container")[0];
3449body.appendChild(akabutton);
3450akabutton.addEventListener ("click", function() {
3451if (window.alert_aka == 0)	{
3452	anondraw.collab.chat.addMessage('WARNING!',"/aka is case sensitive!");
3453window.alert_aka = 1;
3454}
3455if (akaarray){	
3456document.getElementsByClassName("drawtogheter-chat-input")[0].value = "/aka " + akaarray;	
3457} else {	
3458document.getElementsByClassName("drawtogheter-chat-input")[0].value = "/aka " + document.getElementsByClassName("drawtogheter-chat-input")[0].value;	
3459}
3460
3461var input = document.getElementsByClassName("drawtogheter-chat-input")[0];
3462setCaretPosition(input, input.value.length);
3463//anondraw.collab.changeName(str);
3464//anondraw.collab.chat.onMessage( step_one);
3465});
3466
3467//reset aka notification and increase chat limit to paste image links as background
3468document.getElementsByClassName("drawtogheter-chat-input")[0].addEventListener ("click", function() {
3469	document.title = "AnonProMod ? v1.6";
3470document.getElementsByClassName("drawtogheter-chat-input")[0].style.background = 'white';
3471document.getElementsByClassName("drawtogheter-chat-input")[0].placeholder = '';
3472document.getElementsByClassName("drawtogether-control-container")[0].style.background = 'hsla(210, 0%, 20%, 1)';
3473
3474if (document.getElementsByClassName("drawtogheter-chat-input")[0].value.indexOf("/bgurl")!=-1){
3475document.getElementsByClassName("drawtogheter-chat-input")[0].maxLength = 524288;
3476} else {
3477document.getElementsByClassName("drawtogheter-chat-input")[0].maxLength = 255;	
3478}
3479	
3480});
3481document.getElementsByClassName("drawtogheter-chat-input")[0].addEventListener ("keydown", function() {
3482	document.title = "AnonProMod ? v1.6";
3483document.getElementsByClassName("drawtogheter-chat-input")[0].style.background = 'white';
3484document.getElementsByClassName("drawtogheter-chat-input")[0].placeholder = '';
3485document.getElementsByClassName("drawtogether-control-container")[0].style.background = 'hsla(210, 0%, 20%, 1)';
3486
3487if (document.getElementsByClassName("drawtogheter-chat-input")[0].value.indexOf("/bgurl")!=-1){
3488document.getElementsByClassName("drawtogheter-chat-input")[0].maxLength = 524288;
3489} else {
3490document.getElementsByClassName("drawtogheter-chat-input")[0].maxLength = 255;	
3491}
3492
3493});
3494
3495//add filter button
3496var filterbutton = document.createElement("button");
3497filterbutton.innerHTML = "?";
3498filterbutton.id = "filterbtn";
3499filterbutton.title = "filter favorites or regions list";
3500filterbutton.style.margin = "0";
3501filterbutton.style.borderRadius = "0";
3502filterbutton.style.padding = "0";
3503filterbutton.style.borderBottom = "0";
3504filterbutton.style.width = "20px"; 
3505filterbutton.style.height = "1.5rem";
3506filterbutton.style.lineHeight = "1.5rem";
3507filterbutton.style.left = "200px";
3508filterbutton.style.bottom = "1.5rem";
3509filterbutton.style.position = "absolute";
3510filterbutton.className = "control-button"
3511var body = document.getElementsByClassName("drawtogether-chat-container")[0];
3512body.appendChild(filterbutton);
3513filterbutton.addEventListener ("click", function() {
3514var chatinput = document.getElementsByClassName("drawtogheter-chat-input")[0].value = "/filter " + document.getElementsByClassName("drawtogheter-chat-input")[0].value;
3515
3516
3517var input = document.getElementsByClassName("drawtogheter-chat-input")[0];
3518setCaretPosition(input, input.value.length);
3519//anondraw.collab.changeName(str);
3520//anondraw.collab.chat.onMessage( step_one);
3521});
3522
3523
3524
3525//add new button
3526var newbutton = document.createElement("button");
3527newbutton.innerHTML = "?";
3528newbutton.id = "newbtn";
3529newbutton.title = "fresh ink snapshot";
3530newbutton.style.margin = "0";
3531newbutton.style.borderRadius = "0";
3532newbutton.style.padding = "0";
3533newbutton.style.borderBottom = "0";
3534newbutton.style.width = "20px"; 
3535newbutton.style.height = "1.5rem";
3536newbutton.style.background = "rgb(0, 238, 249)";
3537newbutton.style.lineHeight = "1.5rem";
3538newbutton.style.left = "260px";
3539newbutton.style.bottom = "1.5rem";
3540newbutton.style.position = "absolute";
3541newbutton.style.display = "none";
3542newbutton.className = "control-button";
3543var body = document.getElementsByClassName("drawtogether-chat-container")[0];
3544body.appendChild(newbutton);
3545
3546newbutton.addEventListener ("mouseover", function() {
3547document.getElementById("newbtn").style.display = 'inline-block';
3548document.getElementById("oldbtn").style.display = 'inline-block';
3549});
3550
3551newbutton.addEventListener ("mouseleave", function() {
3552document.getElementById("newbtn").style.display = 'none';
3553document.getElementById("oldbtn").style.display = 'none';
3554});
3555
3556newbutton.addEventListener ("click", function() {
3557window.bgscreen = "'" + document.getElementsByClassName("paint-canvas paint-canvas-public")[0].toDataURL() + "'";
3558localStorage.setItem("bgscreen", bgscreen);
3559anondraw.collab.chat.addMessage('Snapshot taken',"click on the right bottom corner button to activate"); 
3560//anondraw.collab.changeName(str);
3561//anondraw.collab.chat.onMessage( step_one);
3562});
3563
3564//add old button
3565var oldbutton = document.createElement("button");
3566oldbutton.innerHTML = "?";
3567oldbutton.id = "oldbtn";
3568oldbutton.title = "old ink snapshot";
3569oldbutton.style.margin = "0";
3570oldbutton.style.borderRadius = "0";
3571oldbutton.style.padding = "0";
3572oldbutton.style.borderBottom = "0";
3573oldbutton.style.width = "20px"; 
3574oldbutton.style.height = "1.5rem";
3575oldbutton.style.background = "rgb(0, 238, 249)";
3576oldbutton.style.lineHeight = "1.5rem";
3577oldbutton.style.left = "280px";
3578oldbutton.style.bottom = "1.5rem";
3579oldbutton.style.position = "absolute";
3580oldbutton.style.display = "none";
3581oldbutton.className = "control-button";
3582var body = document.getElementsByClassName("drawtogether-chat-container")[0];
3583body.appendChild(oldbutton);
3584
3585oldbutton.addEventListener ("mouseover", function() {
3586document.getElementById("newbtn").style.display = 'inline-block';
3587document.getElementById("oldbtn").style.display = 'inline-block';
3588});
3589
3590oldbutton.addEventListener ("mouseleave", function() {
3591document.getElementById("newbtn").style.display = 'none';
3592document.getElementById("oldbtn").style.display = 'none';
3593});
3594
3595oldbutton.addEventListener ("click", function() {
3596window.bgscreen = "'" + document.getElementsByClassName("paint-canvas-background")[0].toDataURL() + "'";
3597localStorage.setItem("bgscreen", bgscreen);
3598anondraw.collab.chat.addMessage('Snapshot taken',"click on the right bottom corner button to activate"); 
3599//anondraw.collab.changeName(str);
3600//anondraw.collab.chat.onMessage( step_one);
3601});
3602
3603
3604
3605
3606
3607
3608
3609
3610
3611//add zoom slider 
3612var zoomslider = document.createElement('input');
3613zoomslider.id = "zoomslider";
3614zoomslider.title = "zoom";
3615zoomslider.type = 'range';
3616zoomslider.min = 0.26;
3617zoomslider.max = 6.2;
3618zoomslider.value = 1;
3619zoomslider.step = 0.01;
3620zoomslider.style.position = "absolute"; 
3621zoomslider.style.zIndex = "99999999"; 
3622zoomslider.classList.add("zoomslider");
3623document.getElementsByClassName("drawtogether-paint-container")[0].appendChild(zoomslider);
3624
3625document.head.insertAdjacentHTML('beforeend','<style>.zoomslider { -webkit-appearance: none; appearance: none; width: 400px; height: 16px; background: #d3d3d3; outline: none; opacity: 0.3; -webkit-transition: .2s; transition: opacity .2s; bottom: 10px; left: 50%; transform: translateX(-50%);}  .zoomslider:hover { opacity: 0.6; }  .zoomslider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: DimGrey; cursor: pointer; }  .zoomslider::-moz-range-thumb { width: 20px; height: 20px; background: DimGrey; cursor: pointer; }</style>');
3626
3627document.getElementById("zoomslider").oninput = function(){
3628anondraw.collab.paint.zoomAbsolute(this.value);
3629if (document.getElementById("wallpapercontainer").style.backgroundImage != 'url("images/transparent.png")'){
3630document.getElementById("wallpapercontainer").style.backgroundSize = (anondraw.collab.paint.public.zoom / (window.originalzoom)) * 100 + "%";
3631} else {
3632document.getElementById("wallpapercontainer").style.backgroundSize = anondraw.collab.paint.public.zoom * 12.45 + "%";	
3633}
3634document.getElementsByClassName("drawtogheter-chat-input")[0].setAttribute("placeholder", anondraw.collab.paint.public.zoom * 100 + "%");
3635};
3636
3637
3638
3639
3640//add canvasopacity slider 
3641var canvasopacityslider = document.createElement('input');
3642canvasopacityslider.id = "canvasopacityslider";
3643canvasopacityslider.title = "fresh ink opacity";
3644canvasopacityslider.type = 'range';
3645canvasopacityslider.min = 0.0;
3646canvasopacityslider.max = 1.0;
3647canvasopacityslider.value = 1.0;
3648canvasopacityslider.step = 0.01;
3649canvasopacityslider.style.position = "absolute"; 
3650canvasopacityslider.style.zIndex = "99999999"; 
3651canvasopacityslider.style.margin = "0"; 
3652canvasopacityslider.classList.add("canvasopacityslider");
3653document.getElementsByClassName("drawtogether-paint-container")[0].appendChild(canvasopacityslider);
3654
3655document.head.insertAdjacentHTML('beforeend','<style>.canvasopacityslider { -webkit-appearance: none; appearance: none; width: 136px; height: 16px; background: #d3d3d3; outline: none; opacity: 0.3; -webkit-transition: .2s; transition: opacity .2s; bottom: 102px; right: 0px;}  .canvasopacityslider:hover { opacity: 0.6; }  .canvasopacityslider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: DimGrey; cursor: pointer; }  .canvasopacityslider::-moz-range-thumb { width: 20px; height: 20px; background: DimGrey; cursor: pointer; }</style>');
3656
3657document.getElementById("canvasopacityslider").oninput = function(){
3658document.getElementsByClassName("paint-canvas paint-canvas-public")[0].style.opacity = document.getElementById("canvasopacityslider").value;
3659document.getElementsByClassName("drawtogheter-chat-input")[0].setAttribute("placeholder", document.getElementById("canvasopacityslider").value);
3660};
3661
3662
3663//add oldcanvasopacity slider 
3664var oldcanvasopacityslider = document.createElement('input');
3665oldcanvasopacityslider.id = "oldcanvasopacityslider";
3666oldcanvasopacityslider.title = "dry ink opacity";
3667oldcanvasopacityslider.type = 'range';
3668oldcanvasopacityslider.min = 0.0;
3669oldcanvasopacityslider.max = 1.0;
3670oldcanvasopacityslider.value = 1.0;
3671oldcanvasopacityslider.step = 0.01;
3672oldcanvasopacityslider.style.position = "absolute"; 
3673oldcanvasopacityslider.style.zIndex = "99999999"; 
3674oldcanvasopacityslider.style.margin = "0"; 
3675oldcanvasopacityslider.classList.add("oldcanvasopacityslider");
3676document.getElementsByClassName("drawtogether-paint-container")[0].appendChild(oldcanvasopacityslider);
3677
3678document.head.insertAdjacentHTML('beforeend','<style>.oldcanvasopacityslider { -webkit-appearance: none; appearance: none; width: 136px; height: 16px; background: #d3d3d3; outline: none; opacity: 0.3; -webkit-transition: .2s; transition: opacity .2s; bottom: 78px; right: 0px;}  .oldcanvasopacityslider:hover { opacity: 0.6; }  .oldcanvasopacityslider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: DimGrey; cursor: pointer; }  .oldcanvasopacityslider::-moz-range-thumb { width: 20px; height: 20px; background: DimGrey; cursor: pointer; }</style>');
3679
3680document.getElementById("oldcanvasopacityslider").oninput = function(){
3681document.getElementsByClassName("paint-canvas-background")[0].style.opacity = document.getElementById("oldcanvasopacityslider").value;
3682document.getElementsByClassName("drawtogheter-chat-input")[0].setAttribute("placeholder", document.getElementById("oldcanvasopacityslider").value);
3683};
3684
3685var ybgpos = 50;
3686var xbgpos = 50;
3687//add bgverticalposition slider 
3688var bgverticalpositionslider = document.createElement('input');
3689bgverticalpositionslider.id = "bgverticalpositionslider";
3690bgverticalpositionslider.title = "bg Y position";
3691bgverticalpositionslider.type = 'range';
3692bgverticalpositionslider.min = -250;
3693bgverticalpositionslider.max = 350;
3694bgverticalpositionslider.value = 50;
3695//bgverticalpositionslider.step = 1;
3696bgverticalpositionslider.style.position = "absolute"; 
3697bgverticalpositionslider.style.zIndex = "99999999"; 
3698bgverticalpositionslider.style.margin = "0"; 
3699bgverticalpositionslider.classList.add("bgverticalpositionslider");
3700document.getElementsByClassName("drawtogether-paint-container")[0].appendChild(bgverticalpositionslider);
3701
3702document.head.insertAdjacentHTML('beforeend','<style>.bgverticalpositionslider { -webkit-appearance: none; appearance: none; width: 136px; height: 16px; background: #d3d3d3; outline: none; opacity: 0.3; -webkit-transition: .2s; transition: opacity .2s; bottom: 54px; right: 0px;}  .bgverticalpositionslider:hover { opacity: 0.6; }  .bgverticalpositionslider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: DimGrey; cursor: pointer; }  .bgverticalpositionslider::-moz-range-thumb { width: 20px; height: 20px; background: DimGrey; cursor: pointer; }</style>');
3703
3704document.getElementById("bgverticalpositionslider").oninput = function(){
3705window.ybgpos = document.getElementById("bgverticalpositionslider").value;
3706document.getElementById("wallpapercontainer").style.backgroundPosition = xbgpos + "% " + document.getElementById("bgverticalpositionslider").value + "%";
3707document.getElementsByClassName("drawtogheter-chat-input")[0].setAttribute("placeholder", xbgpos + "% " + document.getElementById("bgverticalpositionslider").value + "%");
3708};
3709
3710
3711//add bghorizontalposition slider 
3712var bghorizontalpositionslider = document.createElement('input');
3713bghorizontalpositionslider.id = "bghorizontalpositionslider";
3714bghorizontalpositionslider.title = "bg X position";
3715bghorizontalpositionslider.type = 'range';
3716bghorizontalpositionslider.min = -250;
3717bghorizontalpositionslider.max = 350;
3718bghorizontalpositionslider.value = 50;
3719//bghorizontalpositionslider.step = 1;
3720bghorizontalpositionslider.style.position = "absolute"; 
3721bghorizontalpositionslider.style.zIndex = "99999999"; 
3722bghorizontalpositionslider.style.margin = "0"; 
3723bghorizontalpositionslider.classList.add("bghorizontalpositionslider");
3724document.getElementsByClassName("drawtogether-paint-container")[0].appendChild(bghorizontalpositionslider);
3725
3726document.head.insertAdjacentHTML('beforeend','<style>.bghorizontalpositionslider { -webkit-appearance: none; appearance: none; width: 136px; height: 16px; background: #d3d3d3; outline: none; opacity: 0.3; -webkit-transition: .2s; transition: opacity .2s; bottom: 30px; right: 0px;}  .bghorizontalpositionslider:hover { opacity: 0.6; }  .bghorizontalpositionslider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: DimGrey; cursor: pointer; }  .bghorizontalpositionslider::-moz-range-thumb { width: 20px; height: 20px; background: DimGrey; cursor: pointer; }</style>');
3727
3728document.getElementById("bghorizontalpositionslider").oninput = function(){
3729window.xbgpos = document.getElementById("bghorizontalpositionslider").value;
3730document.getElementById("wallpapercontainer").style.backgroundPosition = document.getElementById("bghorizontalpositionslider").value + "% " + ybgpos + "%";
3731document.getElementsByClassName("drawtogheter-chat-input")[0].setAttribute("placeholder", document.getElementById("bghorizontalpositionslider").value + "% " + ybgpos + "%");
3732};
3733
3734
3735//reset sliders on ESC press
3736$(document).keyup(function(e) {
3737    if(e.key === "Escape") {
3738document.getElementById("wallpapercontainer").style.backgroundPosition = "50% 50%";
3739document.getElementsByClassName("paint-canvas-background")[0].style.opacity = 1;
3740document.getElementsByClassName("paint-canvas paint-canvas-public")[0].style.opacity = 1;
3741document.getElementById("rotationslider").value = 1;
3742document.getElementById("bgverticalpositionslider").value = 50;
3743document.getElementById("bghorizontalpositionslider").value = 50;
3744document.getElementById("canvasopacityslider").value = 1.0;
3745document.getElementById("oldcanvasopacityslider").value = 1.0;
3746//anondraw.collab.paint.zoomAbsolute(1);
3747//document.getElementById("zoomslider").value = 1;
3748
3749document.getElementsByClassName("drawtogheter-chat-input")[0].setAttribute("placeholder", "50% 50%");
3750    }
3751});
3752
3753
3754
3755   //add perspective button
3756var perspectivestate;
3757var perspectivebutton = document.createElement("button");
3758perspectivebutton.innerHTML = "✳";
3759perspectivebutton.id = "perspectivebtn";
3760perspectivebutton.style.margin = "0";
3761perspectivebutton.style.borderRadius = "0";
3762perspectivebutton.style.padding = "0";
3763perspectivebutton.style.borderBottom = "0";
3764perspectivebutton.style.minWidth = "2.3rem"; 
3765perspectivebutton.className = "control-button"
3766var body = document.getElementsByClassName("drawtogether-control-container")[0];
3767body.insertBefore(perspectivebutton, body.childNodes[19]);
3768
3769
3770var perspective;
3771perspectivebutton.addEventListener ("click", function() {
3772anondraw.collab.paint.changeTool("grab");	
3773if (perspectivestate == 1){
3774window.perspectivestate = 0;
3775window.perspective = 0;
3776perspectivebutton.classList.remove("activated");
3777document.getElementById("ppointAbtnlabel").style.display = "none";
3778document.getElementById("ppointBbtnlabel").style.display = "none";
3779document.getElementById("ppointCbtnlabel").style.display = "none";
3780document.getElementById("setperspectivebtn").style.display = "none";
3781
3782document.getElementById("perspectivebtn").style.borderBottom = '0';
3783document.getElementById("ppointAbtnlabel").style.borderBottom = '0';
3784document.getElementById("ppointBbtnlabel").style.borderBottom = '0';
3785document.getElementById("ppointCbtnlabel").style.borderBottom = '0';
3786document.getElementById("setperspectivebtn").style.borderBottom = '0';
3787document.getElementById("arrowup").style.left = document.getElementsByClassName("paint-selected-tool")[0].offsetLeft + 19 - 8;
3788} else {
3789	
3790	
3791
3792if (window.alert_perspective == 0){
3793anondraw.collab.chat.addMessage('WARNING!',"Close this tool after use it to avoid accidental giant lines.");	
3794window.alert_perspective = 1;
3795}
3796window.perspectivestate = 1;
3797window.perspective = 1;
3798perspectivebutton.classList.add("activated");
3799document.getElementById("ppointAbtnlabel").style.display = "inline-block";
3800document.getElementById("ppointBbtnlabel").style.display = "inline-block";
3801document.getElementById("ppointCbtnlabel").style.display = "inline-block";
3802document.getElementById("setperspectivebtn").style.display = "inline-block";
3803
3804document.getElementById("perspectivebtn").style.borderBottom = '5px solid #00eef9';
3805document.getElementById("ppointAbtnlabel").style.borderBottom = '5px solid #00eef9';
3806document.getElementById("ppointBbtnlabel").style.borderBottom = '5px solid #00eef9';
3807document.getElementById("ppointCbtnlabel").style.borderBottom = '5px solid #00eef9';
3808document.getElementById("setperspectivebtn").style.borderBottom = '5px solid #00eef9';
3809document.getElementById("arrowup").style.left = document.getElementsByClassName("paint-selected-tool")[0].offsetLeft + 19 - 8;
3810}
3811});
3812
3813
3814 //add perspective point A button
3815var ppointAstate;
3816var ppointAbutton = document.createElement("INPUT");
3817ppointAbutton.setAttribute("type", "checkbox");
3818ppointAbutton.id = "ppointAbtn";
3819ppointAbutton.checked = true;
3820ppointAbutton.style.display = 'none';
3821var body = document.getElementsByClassName("drawtogether-control-container")[0];
3822body.insertBefore(ppointAbutton, body.childNodes[20]);
3823
3824var perspectivex;
3825var perspectivey;
3826var activecheckbox = document.getElementById("ppointAbtn");
3827
3828
3829
3830ppointAbutton.addEventListener ("click", function() {
3831if (ppointAbutton.checked){
3832var step_one = document.getElementById("ppointAbtn").value;
3833
3834window.perspectivex = Number(step_one.replace(/,.*/g, ""));
3835window.perspectivey  = Number(step_one.replace(/.*,/g, ""));
3836
3837
3838
3839
3840document.getElementById("ppointBbtn").checked = false;
3841document.getElementById("ppointCbtn").checked = false;
3842ppointAbtnlabel.innerHTML = '<i class="material-icons-sharp">check_box</i>';	
3843ppointCbtnlabel.innerHTML = '<i class="material-icons-sharp">check_box_outline_blank</i>';
3844ppointBbtnlabel.innerHTML = '<i class="material-icons-sharp">check_box_outline_blank</i>';
3845
3846window.activecheckbox = document.getElementById("ppointAbtn");
3847} 
3848});
3849
3850 //add perspective point B button
3851var ppointBstate;
3852var ppointBbutton = document.createElement("INPUT");
3853ppointBbutton.setAttribute("type", "checkbox");
3854ppointBbutton.id = "ppointBbtn";
3855ppointBbutton.style.display = 'none';
3856var body = document.getElementsByClassName("drawtogether-control-container")[0];
3857body.insertBefore(ppointBbutton, body.childNodes[21]);
3858
3859ppointBbutton.addEventListener ("click", function() {
3860if (ppointBbutton.checked){
3861var step_one = document.getElementById("ppointBbtn").value;
3862
3863window.perspectivex = Number(step_one.replace(/,.*/g, ""));
3864window.perspectivey  = Number(step_one.replace(/.*,/g, ""));
3865
3866
3867
3868document.getElementById("ppointAbtn").checked = false;
3869document.getElementById("ppointCbtn").checked = false;
3870ppointBbtnlabel.innerHTML = '<i class="material-icons-sharp">check_box</i>';	
3871ppointAbtnlabel.innerHTML = '<i class="material-icons-sharp">check_box_outline_blank</i>';
3872ppointCbtnlabel.innerHTML = '<i class="material-icons-sharp">check_box_outline_blank</i>';
3873
3874window.activecheckbox = document.getElementById("ppointBbtn");
3875} 
3876});
3877
3878 //add perspective point C button
3879var ppointCstate;
3880var ppointCbutton = document.createElement("INPUT");
3881ppointCbutton.setAttribute("type", "checkbox");
3882ppointCbutton.id = "ppointCbtn";
3883ppointCbutton.style.display = 'none';
3884var body = document.getElementsByClassName("drawtogether-control-container")[0];
3885body.insertBefore(ppointCbutton, body.childNodes[22]);
3886
3887ppointCbutton.addEventListener ("click", function() {
3888if (ppointCbutton.checked){
3889var step_one = document.getElementById("ppointCbtn").value;
3890
3891window.perspectivex = Number(step_one.replace(/,.*/g, ""));
3892window.perspectivey  = Number(step_one.replace(/.*,/g, ""));
3893
3894
3895
3896document.getElementById("ppointAbtn").checked = false;
3897document.getElementById("ppointBbtn").checked = false;
3898ppointCbtnlabel.innerHTML = '<i class="material-icons-sharp">check_box</i>';	
3899ppointAbtnlabel.innerHTML = '<i class="material-icons-sharp">check_box_outline_blank</i>';
3900ppointBbtnlabel.innerHTML = '<i class="material-icons-sharp">check_box_outline_blank</i>';
3901
3902window.activecheckbox = document.getElementById("ppointCbtn");
3903} 
3904});
3905
3906
3907 
3908
3909 //add setperspective button
3910var setperspectivestate;
3911var setperspectivebutton = document.createElement("button");
3912setperspectivebutton.innerHTML = "?";
3913setperspectivebutton.id = "setperspectivebtn";
3914setperspectivebutton.style.margin = "0";
3915setperspectivebutton.style.marginRight = "10px";
3916setperspectivebutton.style.borderRadius = "0";
3917setperspectivebutton.style.padding = "0";
3918setperspectivebutton.style.borderBottom = "0";
3919setperspectivebutton.style.display = "none";
3920setperspectivebutton.style.minWidth = "2.3rem"; 
3921setperspectivebutton.className = "control-button"
3922var body = document.getElementsByClassName("drawtogether-control-container")[0];
3923body.insertBefore(setperspectivebutton, body.childNodes[15]);
3924
3925setperspectivebutton.addEventListener ("click", function() {
3926var example = window.location.href;
3927var step_one = example.replace(/.*\D,/, "");
3928activecheckbox.value = step_one;
3929activecheckbox.title = step_one;
3930
3931if (activecheckbox == document.getElementById("ppointAbtn")){
3932localStorage.setItem("perspectivepointA", step_one);	
3933document.getElementById("ppointAbtnlabel").title = step_one;
3934ppointBbutton.checked = true;
3935var step_one = document.getElementById("ppointBbtn").value;
3936window.perspectivex = Number(step_one.replace(/,.*/g, ""));
3937window.perspectivey  = Number(step_one.replace(/.*,/g, ""));
3938
3939document.getElementById("ppointAbtn").checked = false;
3940document.getElementById("ppointCbtn").checked = false;
3941ppointBbtnlabel.innerHTML = '<i class="material-icons-sharp">check_box</i>';	
3942ppointAbtnlabel.innerHTML = '<i class="material-icons-sharp">check_box_outline_blank</i>';
3943ppointCbtnlabel.innerHTML = '<i class="material-icons-sharp">check_box_outline_blank</i>';
3944
3945window.activecheckbox = document.getElementById("ppointBbtn");	
3946} else if (activecheckbox == document.getElementById("ppointBbtn")){
3947localStorage.setItem("perspectivepointB", step_one);	
3948document.getElementById("ppointBbtnlabel").title = step_one;
3949ppointCbutton.checked = true;
3950var step_one = document.getElementById("ppointCbtn").value;
3951window.perspectivex = Number(step_one.replace(/,.*/g, ""));
3952window.perspectivey  = Number(step_one.replace(/.*,/g, ""));
3953
3954document.getElementById("ppointAbtn").checked = false;
3955document.getElementById("ppointBbtn").checked = false;
3956ppointCbtnlabel.innerHTML = '<i class="material-icons-sharp">check_box</i>';	
3957ppointAbtnlabel.innerHTML = '<i class="material-icons-sharp">check_box_outline_blank</i>';
3958ppointBbtnlabel.innerHTML = '<i class="material-icons-sharp">check_box_outline_blank</i>';
3959
3960window.activecheckbox = document.getElementById("ppointCbtn");
3961} else if (activecheckbox == document.getElementById("ppointCbtn")){
3962localStorage.setItem("perspectivepointC", step_one);	
3963document.getElementById("ppointCbtnlabel").title = step_one;
3964ppointAbutton.checked = true;
3965var step_one = document.getElementById("ppointAbtn").value;
3966window.perspectivex = Number(step_one.replace(/,.*/g, ""));
3967window.perspectivey  = Number(step_one.replace(/.*,/g, ""));
3968
3969document.getElementById("ppointBbtn").checked = false;
3970document.getElementById("ppointCbtn").checked = false;
3971ppointAbtnlabel.innerHTML = '<i class="material-icons-sharp">check_box</i>';	
3972ppointBbtnlabel.innerHTML = '<i class="material-icons-sharp">check_box_outline_blank</i>';
3973ppointCbtnlabel.innerHTML = '<i class="material-icons-sharp">check_box_outline_blank</i>';
3974
3975
3976window.activecheckbox = document.getElementById("ppointAbtn");
3977}	
3978
3979});
3980
3981var perspectivepointA = localStorage.getItem("perspectivepointA");
3982var perspectivepointB = localStorage.getItem("perspectivepointB");
3983var perspectivepointC = localStorage.getItem("perspectivepointC");
3984if (perspectivepointA !== null){
3985document.getElementById("ppointAbtn").value = perspectivepointA;
3986var perspectivex = Number(perspectivepointA.replace(/,.*/g, ""));
3987var perspectivey  = Number(perspectivepointA.replace(/.*,/g, ""));
3988window.perspectivex = Number(perspectivepointA.replace(/,.*/g, ""));
3989window.perspectivey  = Number(perspectivepointA.replace(/.*,/g, ""));
3990document.getElementById("ppointAbtn").title = perspectivepointA;
3991
3992}
3993if (perspectivepointB !== null){
3994document.getElementById("ppointBbtn").value = perspectivepointB;
3995document.getElementById("ppointBbtn").title = perspectivepointB;
3996
3997}
3998if (perspectivepointC !== null){
3999document.getElementById("ppointCbtn").value = perspectivepointC;
4000document.getElementById("ppointCbtn").title = perspectivepointC;
4001
4002}
4003
4004
4005 //add reference button
4006var referencestate = 0;
4007var referencebutton = document.createElement("button");
4008referencebutton.innerHTML = "?";
4009referencebutton.id = "referencebtn";
4010referencebutton.style.margin = "0";
4011referencebutton.style.borderRadius = "0";
4012referencebutton.style.padding = "0";
4013referencebutton.style.borderBottom = "0";
4014referencebutton.style.minWidth = "2.3rem"; 
4015referencebutton.className = "control-button";
4016var body = document.getElementsByClassName("drawtogether-control-container")[0];
4017body.insertBefore(referencebutton, body.childNodes[3]);
4018
4019document.getElementById("referencebtn").addEventListener("click", function (e) {
4020anondraw.collab.paint.changeTool("grab");
4021if (referencestate == 0){
4022document.getElementById("openreflabel").style.display = 'inline-block';
4023document.getElementById("pastearea").style.display = 'inline-block';
4024document.getElementById("referenceslider").style.display = 'inline-block';
4025document.getElementById("clickthroughbtn").style.display = 'inline-block';
4026
4027document.getElementById("referencebtn").style.borderBottom = '5px solid #00eef9';
4028document.getElementById("openreflabel").style.borderBottom = '5px solid #00eef9';
4029document.getElementById("pastearea").style.borderBottom = '5px solid #00eef9';
4030document.getElementById("referenceslider").style.borderBottom = '5px solid #00eef9';
4031document.getElementById("clickthroughbtn").style.borderBottom = '5px solid #00eef9';
4032
4033
4034window.referencestate = 1;
4035document.getElementById("referencebtn").classList.add("activated");
4036document.getElementById("arrowup").style.left = document.getElementsByClassName("paint-selected-tool")[0].offsetLeft + 19 - 8;
4037} else {
4038document.getElementById("openreflabel").style.display = 'none';
4039document.getElementById("pastearea").style.display = 'none';
4040document.getElementById("referenceslider").style.display = 'none';
4041document.getElementById("clickthroughbtn").style.display = 'none';
4042
4043document.getElementById("referencebtn").style.borderBottom = '0';
4044document.getElementById("openreflabel").style.borderBottom = '0';
4045document.getElementById("pastearea").style.borderBottom = '0';
4046document.getElementById("referenceslider").style.borderBottom = '0';
4047document.getElementById("clickthroughbtn").style.borderBottom = '0';
4048
4049window.referencestate = 0;	
4050document.getElementById("referencebtn").classList.remove("activated");
4051document.getElementById("arrowup").style.left = document.getElementsByClassName("paint-selected-tool")[0].offsetLeft + 19 - 8;
4052}
4053  }, false);  
4054
4055
4056
4057 //add placeimg button
4058var placeimgstate;
4059var placeimgbutton = document.createElement("button");
4060placeimgbutton.innerHTML = "?";
4061placeimgbutton.id = "placeimgbtn";
4062placeimgbutton.style.margin = "0";
4063placeimgbutton.style.borderRadius = "0";
4064placeimgbutton.style.padding = "0";
4065placeimgbutton.style.borderBottom = "0";
4066placeimgbutton.style.minWidth = "2.3rem"; 
4067placeimgbutton.className = "control-button"
4068var body = document.getElementsByClassName("drawtogether-control-container")[0];
4069body.insertBefore(placeimgbutton, body.childNodes[4]);
4070placeimgbutton.addEventListener ("click", function() {
4071			
4072anondraw.collab.paint.changeTool("grab");	
4073if (placeimgstate == 1){
4074document.getElementById("openstamplabel").style.display = 'none';
4075document.getElementById("pastestamp").style.display = 'none';
4076
4077document.getElementById("attachelementbtn").style.display = 'none';
4078document.getElementById("svgdiv").style.display = 'none';
4079document.getElementById("attachfilllabel").style.display = 'none';
4080document.getElementById("attachinvertlabel").style.display = 'none';
4081document.getElementById("attachfliplabel").style.display = 'none';
4082document.getElementById("attachsizeslider").style.display = 'none';
4083
4084document.getElementById("placeimgbtn").style.borderBottom = '0';
4085document.getElementById("openstamplabel").style.borderBottom = '0';
4086document.getElementById("pastestamp").style.borderBottom = '0';
4087document.getElementById("attachelementbtn").style.borderBottom = '0';
4088
4089document.getElementById("attachfilllabel").style.borderBottom = '0';
4090document.getElementById("attachinvertlabel").style.borderBottom = '0';
4091document.getElementById("attachfliplabel").style.borderBottom = '0';
4092document.getElementById("attachsizeslider").style.borderBottom = '0';
4093
4094
4095placeimgbutton.classList.remove("activated");	
4096window.placeimgstate = 0;
4097document.getElementById("arrowup").style.left = document.getElementsByClassName("paint-selected-tool")[0].offsetLeft + 19 - 8;	
4098} else {
4099
4100
4101if (window.alert_attach == 0){	
4102	 anondraw.collab.chat.addMessage('WARNING!',"Attached elements are visible for other users only after they refresh the page. Checkboxes have effect in the next image load.");
4103window.alert_attach = 1;	 
4104}
4105document.getElementById("openstamplabel").style.display = 'inline-block';
4106document.getElementById("pastestamp").style.display = 'inline-block';
4107document.getElementById("attachelementbtn").style.display = 'inline-block';
4108document.getElementById("svgdiv").style.display = 'inline-block';
4109document.getElementById("attachfilllabel").style.display = 'inline-block';
4110document.getElementById("attachinvertlabel").style.display = 'inline-block';
4111document.getElementById("attachfliplabel").style.display = 'inline-block';
4112document.getElementById("attachsizeslider").style.display = 'inline-block';
4113
4114
4115document.getElementById("placeimgbtn").style.borderBottom = '5px solid #00eef9';
4116document.getElementById("openstamplabel").style.borderBottom = '5px solid #00eef9';
4117document.getElementById("pastestamp").style.borderBottom = '5px solid #00eef9';
4118document.getElementById("attachelementbtn").style.borderBottom = '5px solid #00eef9';
4119
4120document.getElementById("attachfilllabel").style.borderBottom = '5px solid #00eef9';
4121document.getElementById("attachinvertlabel").style.borderBottom = '5px solid #00eef9';
4122document.getElementById("attachfliplabel").style.borderBottom = '5px solid #00eef9';
4123document.getElementById("attachsizeslider").style.borderBottom = '5px solid #00eef9';
4124
4125
4126placeimgbutton.classList.add("activated");
4127window.placeimgstate = 1;	
4128document.getElementById("arrowup").style.left = document.getElementsByClassName("paint-selected-tool")[0].offsetLeft + 19 - 8;		
4129}
4130});
4131
4132
4133 //add circle button
4134var circlestate;
4135var circlebutton = document.createElement("button");
4136circlebutton.innerHTML = "?";
4137circlebutton.id = "circlebtn";
4138circlebutton.style.margin = "0";
4139circlebutton.style.borderRadius = "0";
4140circlebutton.style.padding = "0";
4141circlebutton.style.borderBottom = "0";
4142circlebutton.style.minWidth = "2.3rem"; 
4143circlebutton.className = "control-button"
4144var body = document.getElementsByClassName("drawtogether-control-container")[0];
4145body.insertBefore(circlebutton, body.childNodes[17]);
4146
4147circlebutton.addEventListener ("click", function() {
4148anondraw.collab.paint.changeTool("grab");	
4149if (circlestate == 1){
4150document.getElementById("xradiusarea").style.display = 'none';
4151document.getElementById("yradiusarea").style.display = 'none';
4152document.getElementById("ellipserotationslider").style.display = 'none';
4153document.getElementById("startanglearea").style.display = 'none';
4154document.getElementById("endanglearea").style.display = 'none';
4155document.getElementById("submitellipsebtn").style.display = 'none';	
4156document.getElementById("startspot").style.display = 'none';
4157document.getElementById("endspot").style.display = 'none';
4158
4159document.getElementById("circlebtn").style.borderBottom = '0';
4160document.getElementById("xradiusarea").style.borderBottom = '0';
4161document.getElementById("yradiusarea").style.borderBottom = '0';
4162document.getElementById("ellipserotationslider").style.borderBottom = '0';
4163document.getElementById("startanglearea").style.borderBottom = '0';
4164document.getElementById("endanglearea").style.borderBottom = '0';
4165document.getElementById("submitellipsebtn").style.borderBottom = '0';
4166
4167
4168document.getElementById('circlepreview').remove();
4169window.circlestate = 0;
4170circlebutton.classList.remove("activated");
4171document.getElementById("arrowup").style.left = document.getElementsByClassName("paint-selected-tool")[0].offsetLeft + 19 - 8;
4172} else {
4173document.getElementById("xradiusarea").style.display = 'inline-block';
4174document.getElementById("yradiusarea").style.display = 'inline-block';
4175document.getElementById("ellipserotationslider").style.display = 'inline-block';
4176document.getElementById("startanglearea").style.display = 'inline-block';
4177document.getElementById("endanglearea").style.display = 'inline-block';
4178document.getElementById("submitellipsebtn").style.display = 'inline-block';
4179document.getElementById("startspot").style.display = 'inline-block';
4180document.getElementById("endspot").style.display = 'inline-block';
4181
4182
4183document.getElementById("circlebtn").style.borderBottom = '5px solid #00eef9';
4184document.getElementById("xradiusarea").style.borderBottom = '5px solid #00eef9';
4185document.getElementById("yradiusarea").style.borderBottom = '5px solid #00eef9';
4186document.getElementById("ellipserotationslider").style.borderBottom = '5px solid #00eef9';
4187document.getElementById("startanglearea").style.borderBottom = '5px solid #00eef9';
4188document.getElementById("endanglearea").style.borderBottom = '5px solid #00eef9';
4189document.getElementById("submitellipsebtn").style.borderBottom = '5px solid #00eef9';
4190
4191document.getElementById("arrowup").style.left = document.getElementsByClassName("paint-selected-tool")[0].offsetLeft + 19 - 8;
4192
4193var circleimg = new Image();
4194circleimg.src = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNDA4IiB3aWR0aD0iNDA4Ij4NCiAgPGNpcmNsZSBjeD0iMjA0IiBjeT0iMjA0IiByPSIyMDAiIHN0cm9rZT0iI2ZmNjZhMyIgc3Ryb2tlLXdpZHRoPSI4IiBmaWxsPSJ0cmFuc3BhcmVudCIgLz4NCjwvc3ZnPiA=";
4195circleimg.id = "circlepreview";
4196
4197circleimg.style.pointerEvents = "none";
4198circleimg.style.width = (document.getElementById("xradiusarea").value * 2) + "px";
4199circleimg.style.height = (document.getElementById("yradiusarea").value * 2) + "px";
4200
4201circleimg.style.position = "absolute";
4202
4203circleimg.style.left = "50%";
4204circleimg.style.top = "50%";
4205circleimg.style.opacity = "0.6";
4206circleimg.style.transformOrigin = "top left";
4207circleimg.style.MozTransform = "translate(-50%, -50%)";
4208circleimg.style.webkitTransform = "translate(-50%, -50%)";
4209circleimg.style.msTransform = "translate(-50%, -50%)";
4210circleimg.style.transform = "translate(-50%, -50%)";
4211
4212circleimg.style.zIndex = "999999";
4213
4214document.getElementsByClassName('drawtogether-paint-container')[0].appendChild(circleimg);
4215window.circlestate = 1;
4216circlebutton.classList.add("activated");
4217
4218var rotation = Number(document.getElementById("ellipserotationslider").value);
4219var xray = Number(document.getElementById("xradiusarea").value);
4220var yray = Number(document.getElementById("yradiusarea").value);
4221var example = window.location.href;
4222var step_one = example.replace(/.*#/, "");
4223var step_two = step_one.replace(/,.*/, "");
4224var step_three = example.replace(/.*\D,/, "");
4225var centerx = Number(step_three.replace(/,.*/g, ""));
4226var centery  = Number(step_three.replace(/.*,/g, ""));
4227var circlestart = Number(document.getElementById("startanglearea").value) + 180;
4228var circleend = Number(document.getElementById("endanglearea").value) + 180;
4229var xoffset = (document.getElementsByClassName("paint-canvas-background")[0].width / 2) - 6;
4230var yoffset = (document.getElementsByClassName("paint-canvas-background")[0].height / 2) - 6;
4231
4232startspotimg.style.left = (((xray * Math.cos(circlestart * Math.PI / 180)) * Math.cos(rotation * Math.PI / 180) - (yray * Math.sin(circlestart * Math.PI / 180)) * Math.sin(rotation * Math.PI / 180)) + xoffset) + "px";
4233startspotimg.style.top = (((yray * Math.sin(circlestart * Math.PI / 180)) * Math.cos(rotation * Math.PI / 180) + (xray * Math.cos(circlestart * Math.PI / 180)) * Math.sin(rotation * Math.PI / 180)) + yoffset) + "px";
4234endspotimg.style.left = (((xray * Math.cos(circleend * Math.PI / 180)) * Math.cos(rotation * Math.PI / 180) - (yray * Math.sin(circleend * Math.PI / 180)) * Math.sin(rotation * Math.PI / 180)) + xoffset) + "px";
4235endspotimg.style.top = (((yray * Math.sin(circleend * Math.PI / 180)) * Math.cos(rotation * Math.PI / 180) + (xray * Math.cos(circleend * Math.PI / 180)) * Math.sin(rotation * Math.PI / 180)) + yoffset) + "px";
4236}
4237});
4238
4239
4240//add photo photobutton
4241var photostate;
4242var photobutton = document.createElement("button");
4243photobutton.innerHTML = "?";
4244photobutton.id = "photobtn";
4245photobutton.title = "use screenshot as background";
4246photobutton.style.backgroundColor = "transparent";
4247photobutton.style.width = "34px";
4248photobutton.style.bottom = "0";
4249photobutton.style.right = "68px";
4250photobutton.style.top = "auto !important";
4251photobutton.style.position = "absolute";
4252photobutton.style.textAlign = "center";
4253photobutton.style.zIndex = "999";
4254
4255photobutton.className = "x-button"
4256
4257var body = document.getElementsByClassName("drawtogether-paint-container")[0];
4258body.appendChild(photobutton);
4259photobutton.addEventListener ("click", function() {
4260if (typeof bgscreen == 'undefined'){
4261var storedbgscreen = localStorage.getItem("bgscreen");
4262if (storedbgscreen) {
4263window.bgscreen = storedbgscreen;
4264}
4265}	
4266if (photostate == 1){
4267document.getElementById("wallpapercontainer").style.backgroundImage = "url(images/transparent.png)";
4268document.getElementById("wallpapercontainer").style.backgroundSize = anondraw.collab.paint.public.zoom * 12.45 + "%";
4269window.photostate = 0;
4270photobutton.classList.remove("activated");
4271} else {
4272document.getElementById("wallpapercontainer").style.backgroundImage = "url(" + bgscreen +")";
4273document.getElementById("wallpapercontainer").style.backgroundSize = 100 + "%";
4274window.photostate = 1;
4275photobutton.classList.add("activated");
4276document.getElementById("lightbtn").classList.remove("activated");
4277document.getElementById("bglinkbtn").classList.remove("activated");
4278window.lightstate = 0;
4279window.bglinkstate = 0;
4280}
4281});
4282
4283
4284
4285//add bglink bglinkbutton
4286
4287var bglinkstate;
4288var bglinkbutton = document.createElement("button");
4289bglinkbutton.innerHTML = "?";
4290bglinkbutton.id = "bglinkbtn";
4291bglinkbutton.title = "use image from URL as background";
4292bglinkbutton.style.backgroundColor = "transparent";
4293bglinkbutton.style.width = "34px";
4294bglinkbutton.style.bottom = "0";
4295bglinkbutton.style.right = "102px";
4296bglinkbutton.style.top = "auto !important";
4297bglinkbutton.style.position = "absolute";
4298bglinkbutton.style.textAlign = "center";
4299bglinkbutton.style.zIndex = "999";
4300
4301bglinkbutton.className = "x-button"
4302
4303var body = document.getElementsByClassName("drawtogether-paint-container")[0];
4304body.appendChild(bglinkbutton);
4305bglinkbutton.addEventListener ("click", function() {
4306if (bglinkstate == 1){
4307document.getElementById("wallpapercontainer").style.backgroundImage = "url(images/transparent.png)";
4308document.getElementById("wallpapercontainer").style.backgroundSize = anondraw.collab.paint.public.zoom * 12.45 + "%";
4309window.bglinkstate = 0;
4310bglinkbutton.classList.remove("activated");
4311} else {
4312document.getElementById("wallpapercontainer").style.backgroundImage = "url(" + bgurl +")";
4313document.getElementById("wallpapercontainer").style.backgroundSize = anondraw.collab.paint.public.zoom * 100 + "%";
4314window.bglinkstate = 1;
4315bglinkbutton.classList.add("activated");
4316document.getElementById("lightbtn").classList.remove("activated");
4317document.getElementById("photobtn").classList.remove("activated");
4318
4319window.photostate = 0;
4320window.lightstate = 0;
4321}
4322});
4323
4324
4325//add mirror mirrorbutton
4326var mirrorstate;
4327var mirrorbutton = document.createElement("button");
4328mirrorbutton.innerHTML = "?";
4329mirrorbutton.id = "mirrorbtn";
4330
4331mirrorbutton.style.backgroundColor = "transparent";
4332mirrorbutton.style.width = "32px";
4333mirrorbutton.style.top = "0";
4334mirrorbutton.style.right = "64px";
4335mirrorbutton.style.top = "auto !important";
4336mirrorbutton.style.position = "absolute";
4337mirrorbutton.style.textAlign = "center";
4338mirrorbutton.style.zIndex = "999";
4339mirrorbutton.style.color = "#bdc9d5";
4340mirrorbutton.style.lineHeight = "32px";
4341
4342mirrorbutton.className = "x-button"
4343
4344var body = document.getElementsByClassName("drawtogether-paint-container")[0];
4345body.appendChild(mirrorbutton);
4346var ismirrored = 0;
4347mirrorbutton.addEventListener ("click", function() {
4348if (ismirrored == 1){
4349	window.ismirrored = 0;
4350	mirrorbutton.innerHTML = "?";
4351    anondraw.collab.paint.scale[0] = !1 ? -1 : 1;
4352    anondraw.collab.paint.redrawAll();
4353    anondraw.collab.paint.dispatchEvent({
4354        type: "canvaschange",
4355        rotation: anondraw.collab.paint.rotation,
4356        scale: anondraw.collab.paint.scale		
4357})	} else {
4358	window.ismirrored = 1;
4359	mirrorbutton.innerHTML = "?";
4360    anondraw.collab.paint.scale[0] = 1 ? -1 : 1;
4361    anondraw.collab.paint.redrawAll();
4362    anondraw.collab.paint.dispatchEvent({
4363        type: "canvaschange",
4364        rotation: anondraw.collab.paint.rotation,
4365        scale: anondraw.collab.paint.scale	
4366	})}
4367});
4368
4369
4370
4371
4372//add upsidedown upsidedownbutton
4373var upsidedownstate;
4374var upsidedownbutton = document.createElement("button");
4375upsidedownbutton.innerHTML = "?";
4376upsidedownbutton.id = "upsidedownbtn";
4377
4378upsidedownbutton.style.backgroundColor = "transparent";
4379upsidedownbutton.style.width = "32px";
4380upsidedownbutton.style.top = "0";
4381upsidedownbutton.style.right = "32px";
4382upsidedownbutton.style.top = "auto !important";
4383upsidedownbutton.style.position = "absolute";
4384upsidedownbutton.style.textAlign = "center";
4385upsidedownbutton.style.zIndex = "999";
4386upsidedownbutton.style.color = "#bdc9d5";
4387upsidedownbutton.style.lineHeight = "32px";
4388
4389upsidedownbutton.className = "x-button"
4390
4391var body = document.getElementsByClassName("drawtogether-paint-container")[0];
4392body.appendChild(upsidedownbutton);
4393var isupsidedowned = 0;
4394upsidedownbutton.addEventListener ("click", function() {
4395if (isupsidedowned == 1){
4396	window.isupsidedowned = 0;
4397	upsidedownbutton.innerHTML = "?"; //?
4398     anondraw.collab.paint.scale[1] = !1 ? -1 : 1;
4399     anondraw.collab.paint.redrawAll();
4400     anondraw.collab.paint.dispatchEvent({
4401        type: "canvaschange",
4402        rotation:  anondraw.collab.paint.rotation,
4403        scale:  anondraw.collab.paint.scale
4404	
4405    })	} else {
4406	window.isupsidedowned = 1;
4407	upsidedownbutton.innerHTML = "?"; //?
4408     anondraw.collab.paint.scale[1] = 1 ? -1 : 1;
4409     anondraw.collab.paint.redrawAll();
4410     anondraw.collab.paint.dispatchEvent({
4411        type: "canvaschange",
4412        rotation:  anondraw.collab.paint.rotation,
4413        scale:  anondraw.collab.paint.scale
4414	
4415    })}
4416});
4417
4418
4419
4420//pass rotation slider to canvas
4421
4422//add rotation slider 
4423var rotationslider = document.createElement('input');
4424rotationslider.id = "rotationslider";
4425rotationslider.title = "rotation";
4426rotationslider.type = 'range';
4427rotationslider.min = -180;
4428rotationslider.max = 180;
4429rotationslider.value = 0;
4430rotationslider.step = 1;
4431rotationslider.style.position = "absolute"; 
4432rotationslider.style.zIndex = "99999999"; 
4433rotationslider.classList.add("rotationslider");
4434document.getElementsByClassName("drawtogether-paint-container")[0].appendChild(rotationslider);
4435
4436document.head.insertAdjacentHTML('beforeend','<style>.rotationslider { -webkit-appearance: none; appearance: none; width: 400px; height: 16px; background: #d3d3d3; outline: none; opacity: 0.3; -webkit-transition: .2s; transition: opacity .2s; top: 10px; left: 50%; transform: translateX(-50%);}  .rotationslider:hover { opacity: 0.6; }  .rotationslider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: DimGrey; cursor: pointer; }  .rotationslider::-moz-range-thumb { width: 20px; height: 20px; background: DimGrey; cursor: pointer; }</style>');
4437
4438document.getElementById("rotationslider").oninput = function(){
4439anondraw.collab.paint.setRotation(this.value);
4440document.getElementsByClassName("drawtogheter-chat-input")[0].setAttribute("placeholder", this.value + "°");
4441};
4442
4443
4444
4445//playerlist order by rep
4446document.head.insertAdjacentHTML('beforeend','<style>.drawtogether-info-playerlist {display: flex; flex-wrap: wrap; -webkit-flex-flow: row-reverse wrap-reverse; flex-flow: row-reverse wrap-reverse;}</style>');
4447document.head.insertAdjacentHTML('beforeend','<style>.drawtogether-player {flex-basis: 20rem !important;}</style>');
4448
4449
4450//add reference pic content
4451  var referencecontainer = document.createElement("DIV");
4452  referencecontainer.style.width = '100%';
4453  referencecontainer.style.height = '100%';
4454  referencecontainer.style.margin = '0';
4455  referencecontainer.style.padding = '0';
4456  referencecontainer.style.overflow = 'hidden';
4457  referencecontainer.style.border = '0';
4458   referencecontainer.style.position = 'absolute';
4459  referencecontainer.style.zIndex = '9999999999';
4460  referencecontainer.style.pointerEvents = 'none';
4461  referencecontainer.id = 'referencecontainer';  
4462  var body = document.getElementsByClassName("collab-container")[0];
4463  body.appendChild(referencecontainer);
4464  
4465
4466document.getElementById("referencecontainer").addEventListener("contextmenu", function(e) {
4467e = e || window.event;
4468    e.preventDefault();	
4469document.getElementById("referencecontainer").removeChild(e.target);
4470 });
4471 
4472document.getElementById("referencecontainer").addEventListener("wheel", function(event) {
4473event = event || window.event;
4474var y = event.deltaY;	 
4475if (y > 0){	
4476event.target.width = event.target.width / 1.2;
4477} else if (y < 0) {
4478event.target.width = event.target.width * 1.2;
4479}	
4480});
4481
4482
4483  var pastearea = document.createElement("TEXTAREA");
4484  pastearea.style.width = '4.6rem';
4485  pastearea.style.height = '2.3rem';
4486  pastearea.style.lineHeight = '0.9em';
4487  pastearea.style.verticalAlign = 'bottom';
4488  pastearea.style.display = 'none';
4489  pastearea.placeholder = 'paste pic';
4490  pastearea.id = 'pastearea'; 
4491  pastearea.title = 'paste reference picture';  
4492  var body = document.getElementsByClassName("drawtogether-control-container")[0];
4493  body.insertBefore(pastearea, body.childNodes[4]);
4494  
4495  document.getElementById('pastearea').onpaste = function (event) {
4496  // use event.originalEvent.clipboard for newer chrome versions
4497  var items = (event.clipboardData  || event.originalEvent.clipboardData).items;
4498  console.log(JSON.stringify(items)); // will give you the mime types
4499  // find pasted image among pasted items
4500  var blob = null;
4501  for (var i = 0; i < items.length; i++) {
4502    if (items[i].type.indexOf("image") === 0) {
4503      blob = items[i].getAsFile();
4504    }
4505  }
4506  // load image if there is a pasted image
4507  if (blob !== null) {
4508    var reader = new FileReader();
4509    reader.onload = function(event) {
4510		
4511      console.log(event.target.result); // data url!
4512	  
4513	  let imgElement = document.createElement("img");
4514	imgElement.src = event.target.result;
4515	imgElement.style.position = 'absolute';
4516	imgElement.style.height = 'auto';
4517	imgElement.style.pointerEvents = 'auto';
4518	imgElement.classList.add("reference-pic");
4519	    var body = document.getElementById("referencecontainer");
4520		dragElement(imgElement);
4521  body.appendChild(imgElement);
4522  
4523	  
4524    };
4525    reader.readAsDataURL(blob);
4526  }
4527}
4528  
4529  
4530   var openref = document.createElement("INPUT");
4531   openref.setAttribute("type", "file");
4532   openref.style.display = 'none';
4533  openref.style.width = '2.3rem';
4534  openref.style.height = '2.3rem';
4535  openref.innerHTML = '?';
4536  openref.style.verticalAlign = 'bottom';
4537  openref.placeholder = 'paste pic';
4538  openref.id = 'openref';  
4539  openref.title = 'open reference picture'; 
4540  var body = document.getElementsByClassName("drawtogether-control-container")[0];
4541  body.insertBefore(openref, body.childNodes[4]);
4542  
4543   var openreflabel = document.createElement("LABEL");
4544  openreflabel.style.width = '2.3rem';
4545  openreflabel.style.height = '2.3rem';
4546  openreflabel.style.display = 'none';
4547  openreflabel.innerHTML = '?';
4548  openreflabel.title = 'open reference picture';
4549  openreflabel.style.textAlign = 'center';
4550  openreflabel.style.verticalAlign = 'bottom';
4551  openreflabel.id = 'openreflabel';  
4552  openreflabel.htmlFor = 'openref';  
4553  openreflabel.className = "control-button";
4554  openreflabel.style.margin = "0";
4555  openreflabel.style.borderRadius = "0";
4556  openreflabel.style.padding = "0";
4557  openreflabel.style.borderBottom = "0";
4558  var body = document.getElementsByClassName("drawtogether-control-container")[0];
4559  body.insertBefore(openreflabel, body.childNodes[4]);
4560  
4561
4562  
4563document.getElementById("openreflabel").addEventListener("click", function (e) {
4564document.getElementById("openref").value = "";	
4565  }, false);    
4566  
4567document.getElementById("openref").addEventListener("change", function (e) {
4568    readURL(this);
4569  }, false);
4570  
4571function readURL(input) {
4572if (input.files && input.files[0]) {
4573    var reader = new FileReader();    
4574    reader.onload = function(e) {
4575	let imgElement = document.createElement("img");
4576	imgElement.src = e.target.result;
4577	imgElement.style.position = 'absolute';
4578	imgElement.style.height = 'auto';
4579	//imgElement.style.pointerEvents = 'auto';
4580	imgElement.classList.add("reference-pic");
4581	var body = document.getElementById("referencecontainer");
4582	dragElement(imgElement);
4583	body.appendChild(imgElement);	  
4584    }    
4585    reader.readAsDataURL(input.files[0]);
4586  }
4587}
4588document.head.insertAdjacentHTML('beforeend','<style>.reference-pic {pointer-events: auto;}</style>');
4589
4590//add click through reference button
4591var clickthroughstate = 0;
4592var clickthroughbutton = document.createElement("button");
4593clickthroughbutton.innerHTML = "?";
4594clickthroughbutton.id = "clickthroughbtn";
4595clickthroughbutton.title = "click through the images";
4596clickthroughbutton.style.margin = "0";
4597clickthroughbutton.style.display = "none";
4598clickthroughbutton.style.marginRight = "10px";
4599clickthroughbutton.style.borderRadius = "0";
4600clickthroughbutton.style.padding = "0";
4601clickthroughbutton.style.borderBottom = "0";
4602clickthroughbutton.style.minWidth = "2.3rem"; 
4603clickthroughbutton.className = "control-button"
4604var body = document.getElementsByClassName("drawtogether-control-container")[0];
4605body.insertBefore(clickthroughbutton, body.childNodes[7]);
4606
4607document.getElementById("clickthroughbtn").addEventListener("click", function (e) {
4608if (clickthroughstate == 0){
4609document.head.insertAdjacentHTML('beforeend','<style>.reference-pic {pointer-events: none !important;}</style>');
4610window.clickthroughstate = 1;
4611document.getElementById("clickthroughbtn").classList.add("activated");
4612} else {
4613document.head.insertAdjacentHTML('beforeend','<style>.reference-pic {pointer-events: auto !important;}</style>');
4614window.clickthroughstate = 0;	
4615document.getElementById("clickthroughbtn").classList.remove("activated");
4616}
4617  }, false);  
4618
4619
4620
4621//add reference slider (only visible when active)
4622var referenceslider = document.createElement('input');
4623referenceslider.id = "referenceslider";
4624referenceslider.title = "reference pictures opacity";
4625referenceslider.type = 'range';
4626referenceslider.min = 0.0;
4627referenceslider.max = 1.0;
4628referenceslider.value = 1.0;
4629referenceslider.step = 0.01;
4630referenceslider.style.color = "rgb(196, 196, 196)";
4631referenceslider.style.backgroundColor = "#e6e6e6";
4632referenceslider.style.webkitAppearance = "none";	
4633referenceslider.style.appearance = "none";
4634referenceslider.style.boxSizing = "border-box";	
4635referenceslider.style.height = "2.3rem";
4636referenceslider.style.padding = "0px";
4637referenceslider.style.margin = "0px";
4638referenceslider.style.border = "0px";
4639referenceslider.style.outline = "0px";
4640referenceslider.style.verticalAlign = "bottom";
4641referenceslider.style.display = "none";
4642referenceslider.style.width = "4.6rem";
4643    
4644document.getElementsByClassName("drawtogether-control-container")[0].insertBefore(referenceslider, document.getElementsByClassName("drawtogether-control-container")[0].childNodes[7]);
4645
4646document.getElementById("referenceslider").classList.add("oslider");
4647document.getElementById("referenceslider").classList.add("control-integer-input");
4648
4649document.getElementById("referenceslider").addEventListener("input", function(){
4650document.getElementById("referencecontainer").style.opacity = document.getElementById("referenceslider").value;
4651document.getElementsByClassName("drawtogheter-chat-input")[0].setAttribute("placeholder", document.getElementById("referenceslider").value);
4652});
4653
4654
4655
4656
4657//add input xradius input
4658  var xradiusarea = document.createElement("INPUT");
4659  xradiusarea.setAttribute("type", "number");
4660  xradiusarea.style.width = '2.6rem';
4661  xradiusarea.style.height = '2.3rem';
4662  xradiusarea.style.lineHeight = '2em';
4663   xradiusarea.style.marginRight = '2px';
4664  xradiusarea.style.verticalAlign = 'bottom';
4665  xradiusarea.style.display = 'none';
4666  //xradiusarea.placeholder = 'xradius pic';
4667  xradiusarea.id = 'xradiusarea'; 
4668  xradiusarea.value = 50; 
4669   xradiusarea.min = 1; 
4670    xradiusarea.max = document.getElementsByClassName("paint-canvas-background")[0].height;
4671	xradiusarea.step = 1;
4672  xradiusarea.title = 'width radius';  
4673  var body = document.getElementsByClassName("drawtogether-control-container")[0];
4674  body.insertBefore(xradiusarea, body.childNodes[23]);
4675  
4676xradiusarea.addEventListener("input", function(){
4677document.getElementById("circlepreview").style.width = document.getElementById("xradiusarea").value * 2 + "px";
4678
4679var rotation = Number(document.getElementById("ellipserotationslider").value);
4680var xray = Number(document.getElementById("xradiusarea").value);
4681var yray = Number(document.getElementById("yradiusarea").value);
4682var example = window.location.href;
4683var step_one = example.replace(/.*#/, "");
4684var step_two = step_one.replace(/,.*/, "");
4685var step_three = example.replace(/.*\D,/, "");
4686var centerx = Number(step_three.replace(/,.*/g, ""));
4687var centery  = Number(step_three.replace(/.*,/g, ""));
4688var circlestart = Number(document.getElementById("startanglearea").value) + 180;
4689var circleend = Number(document.getElementById("endanglearea").value) + 180;
4690var xoffset = (document.getElementsByClassName("paint-canvas-background")[0].width / 2) - 6;
4691var yoffset = (document.getElementsByClassName("paint-canvas-background")[0].height / 2) - 6;
4692
4693startspotimg.style.left = (((xray * Math.cos(circlestart * Math.PI / 180)) * Math.cos(rotation * Math.PI / 180) - (yray * Math.sin(circlestart * Math.PI / 180)) * Math.sin(rotation * Math.PI / 180)) + xoffset) + "px";
4694startspotimg.style.top = (((yray * Math.sin(circlestart * Math.PI / 180)) * Math.cos(rotation * Math.PI / 180) + (xray * Math.cos(circlestart * Math.PI / 180)) * Math.sin(rotation * Math.PI / 180)) + yoffset) + "px";
4695endspotimg.style.left = (((xray * Math.cos(circleend * Math.PI / 180)) * Math.cos(rotation * Math.PI / 180) - (yray * Math.sin(circleend * Math.PI / 180)) * Math.sin(rotation * Math.PI / 180)) + xoffset) + "px";
4696endspotimg.style.top = (((yray * Math.sin(circleend * Math.PI / 180)) * Math.cos(rotation * Math.PI / 180) + (xray * Math.cos(circleend * Math.PI / 180)) * Math.sin(rotation * Math.PI / 180)) + yoffset) + "px";
4697});
4698  
4699  
4700  
4701  //add input yradius input
4702  var yradiusarea = document.createElement("INPUT");
4703  yradiusarea.setAttribute("type", "number");
4704  yradiusarea.style.width = '2.6rem';
4705  yradiusarea.style.height = '2.3rem';
4706  yradiusarea.style.lineHeight = '2em';
4707   yradiusarea.style.marginRight = '2px';
4708  yradiusarea.style.verticalAlign = 'bottom';
4709  yradiusarea.style.display = 'none';
4710  //yradiusarea.placeholder = 'yradius pic';
4711  yradiusarea.id = 'yradiusarea'; 
4712   yradiusarea.value = 50; 
4713   yradiusarea.min = 1; 
4714    yradiusarea.max = document.getElementsByClassName("paint-canvas-background")[0].height;
4715	yradiusarea.step = 1;
4716  yradiusarea.title = 'height radius';  
4717  var body = document.getElementsByClassName("drawtogether-control-container")[0];
4718  body.insertBefore(yradiusarea, body.childNodes[24]);
4719  
4720yradiusarea.addEventListener("input", function(){
4721document.getElementById("circlepreview").style.height = document.getElementById("yradiusarea").value * 2 + "px";
4722
4723var rotation = Number(document.getElementById("ellipserotationslider").value);
4724var xray = Number(document.getElementById("xradiusarea").value);
4725var yray = Number(document.getElementById("yradiusarea").value);
4726var example = window.location.href;
4727var step_one = example.replace(/.*#/, "");
4728var step_two = step_one.replace(/,.*/, "");
4729var step_three = example.replace(/.*\D,/, "");
4730var centerx = Number(step_three.replace(/,.*/g, ""));
4731var centery  = Number(step_three.replace(/.*,/g, ""));
4732var circlestart = Number(document.getElementById("startanglearea").value) + 180;
4733var circleend = Number(document.getElementById("endanglearea").value) + 180;
4734var xoffset = (document.getElementsByClassName("paint-canvas-background")[0].width / 2) - 6;
4735var yoffset = (document.getElementsByClassName("paint-canvas-background")[0].height / 2) - 6;
4736
4737startspotimg.style.left = (((xray * Math.cos(circlestart * Math.PI / 180)) * Math.cos(rotation * Math.PI / 180) - (yray * Math.sin(circlestart * Math.PI / 180)) * Math.sin(rotation * Math.PI / 180)) + xoffset) + "px";
4738startspotimg.style.top = (((yray * Math.sin(circlestart * Math.PI / 180)) * Math.cos(rotation * Math.PI / 180) + (xray * Math.cos(circlestart * Math.PI / 180)) * Math.sin(rotation * Math.PI / 180)) + yoffset) + "px";
4739endspotimg.style.left = (((xray * Math.cos(circleend * Math.PI / 180)) * Math.cos(rotation * Math.PI / 180) - (yray * Math.sin(circleend * Math.PI / 180)) * Math.sin(rotation * Math.PI / 180)) + xoffset) + "px";
4740endspotimg.style.top = (((yray * Math.sin(circleend * Math.PI / 180)) * Math.cos(rotation * Math.PI / 180) + (xray * Math.cos(circleend * Math.PI / 180)) * Math.sin(rotation * Math.PI / 180)) + yoffset) + "px";
4741});
4742  
4743  
4744  
4745  //add ellipserotation slider (only visible when active)
4746var ellipserotationslider = document.createElement('input');
4747ellipserotationslider.id = "ellipserotationslider";
4748ellipserotationslider.title = "ellipse rotation";
4749ellipserotationslider.type = 'range';
4750ellipserotationslider.min = 0;
4751ellipserotationslider.max = 360;
4752ellipserotationslider.value = 0;
4753ellipserotationslider.step = 1;
4754
4755ellipserotationslider.style.marginRight = "2px";
4756ellipserotationslider.style.color = "rgb(196, 196, 196)";
4757ellipserotationslider.style.backgroundColor = "#e6e6e6";	
4758	
4759ellipserotationslider.style.webkitAppearance = "none";	
4760ellipserotationslider.style.appearance = "none";
4761ellipserotationslider.style.boxSizing = "border-box";	
4762ellipserotationslider.style.height = "2.3rem";
4763ellipserotationslider.style.padding = "0px";
4764ellipserotationslider.style.margin = "0px";
4765ellipserotationslider.style.marginRight = "2px";
4766ellipserotationslider.style.border = "0px";
4767ellipserotationslider.style.outline = "0px";
4768ellipserotationslider.style.verticalAlign = "bottom";
4769ellipserotationslider.style.display = "none";
4770ellipserotationslider.style.width = "4.6rem";
4771
4772document.getElementsByClassName("drawtogether-control-container")[0].insertBefore(ellipserotationslider, document.getElementsByClassName("drawtogether-control-container")[0].childNodes[25]);
4773
4774document.getElementById("ellipserotationslider").classList.add("oslider");
4775document.getElementById("ellipserotationslider").classList.add("control-integer-input");
4776
4777ellipserotationslider.addEventListener("input", function(){
4778document.getElementsByClassName("drawtogheter-chat-input")[0].setAttribute("placeholder", document.getElementById("ellipserotationslider").value);
4779document.getElementById("circlepreview").style.transform = 'rotate(' + document.getElementById("ellipserotationslider").value + 'deg) translate(-50%, -50%)';
4780
4781
4782var rotation = Number(document.getElementById("ellipserotationslider").value);
4783var xray = Number(document.getElementById("xradiusarea").value);
4784var yray = Number(document.getElementById("yradiusarea").value);
4785var example = window.location.href;
4786var step_one = example.replace(/.*#/, "");
4787var step_two = step_one.replace(/,.*/, "");
4788var step_three = example.replace(/.*\D,/, "");
4789var centerx = Number(step_three.replace(/,.*/g, ""));
4790var centery  = Number(step_three.replace(/.*,/g, ""));
4791var circlestart = Number(document.getElementById("startanglearea").value) + 180;
4792var circleend = Number(document.getElementById("endanglearea").value) + 180;
4793var xoffset = (document.getElementsByClassName("paint-canvas-background")[0].width / 2) - 6;
4794var yoffset = (document.getElementsByClassName("paint-canvas-background")[0].height / 2) - 6;
4795
4796startspotimg.style.left = (((xray * Math.cos(circlestart * Math.PI / 180)) * Math.cos(rotation * Math.PI / 180) - (yray * Math.sin(circlestart * Math.PI / 180)) * Math.sin(rotation * Math.PI / 180)) + xoffset) + "px";
4797startspotimg.style.top = (((yray * Math.sin(circlestart * Math.PI / 180)) * Math.cos(rotation * Math.PI / 180) + (xray * Math.cos(circlestart * Math.PI / 180)) * Math.sin(rotation * Math.PI / 180)) + yoffset) + "px";
4798endspotimg.style.left = (((xray * Math.cos(circleend * Math.PI / 180)) * Math.cos(rotation * Math.PI / 180) - (yray * Math.sin(circleend * Math.PI / 180)) * Math.sin(rotation * Math.PI / 180)) + xoffset) + "px";
4799endspotimg.style.top = (((yray * Math.sin(circleend * Math.PI / 180)) * Math.cos(rotation * Math.PI / 180) + (xray * Math.cos(circleend * Math.PI / 180)) * Math.sin(rotation * Math.PI / 180)) + yoffset) + "px";
4800});
4801
4802
4803
4804  //add ellipserotation slider (only visible when active)
4805var startanglearea = document.createElement('input');
4806startanglearea.id = "startanglearea";
4807startanglearea.title = "start spot";
4808startanglearea.type = 'range';
4809startanglearea.min = 0;
4810startanglearea.max = 360;
4811startanglearea.value = 0;
4812startanglearea.step = 1;
4813
4814startanglearea.style.marginRight = "2px";
4815startanglearea.style.color = "rgb(196, 196, 196)";
4816startanglearea.style.backgroundColor = "#e6e6e6";	
4817	
4818startanglearea.style.webkitAppearance = "none";	
4819startanglearea.style.appearance = "none";
4820startanglearea.style.boxSizing = "border-box";	
4821startanglearea.style.height = "2.3rem";
4822startanglearea.style.padding = "0px";
4823startanglearea.style.margin = "0px";
4824startanglearea.style.marginRight = "2px";
4825startanglearea.style.border = "0px";
4826startanglearea.style.outline = "0px";
4827startanglearea.style.verticalAlign = "bottom";
4828startanglearea.style.display = "none";
4829startanglearea.style.width = "4.6rem";
4830
4831document.getElementsByClassName("drawtogether-control-container")[0].insertBefore(startanglearea, document.getElementsByClassName("drawtogether-control-container")[0].childNodes[26]);
4832
4833document.getElementById("startanglearea").classList.add("oslider");
4834document.getElementById("startanglearea").classList.add("control-integer-input");
4835  
4836     startanglearea.addEventListener("input", function(){
4837document.getElementsByClassName("drawtogheter-chat-input")[0].setAttribute("placeholder", document.getElementById("startanglearea").value);
4838var rotation = Number(document.getElementById("ellipserotationslider").value);
4839var xray = Number(document.getElementById("xradiusarea").value);
4840var yray = Number(document.getElementById("yradiusarea").value);
4841var example = window.location.href;
4842var step_one = example.replace(/.*#/, "");
4843var step_two = step_one.replace(/,.*/, "");
4844var step_three = example.replace(/.*\D,/, "");
4845var centerx = Number(step_three.replace(/,.*/g, ""));
4846var centery  = Number(step_three.replace(/.*,/g, ""));
4847var circlestart = Number(document.getElementById("startanglearea").value) + 180;
4848var circleend = Number(document.getElementById("endanglearea").value) + 180;
4849var xoffset = (document.getElementsByClassName("paint-canvas-background")[0].width / 2) - 6;
4850var yoffset = (document.getElementsByClassName("paint-canvas-background")[0].height / 2) - 6;
4851
4852startspotimg.style.left = (((xray * Math.cos(circlestart * Math.PI / 180)) * Math.cos(rotation * Math.PI / 180) - (yray * Math.sin(circlestart * Math.PI / 180)) * Math.sin(rotation * Math.PI / 180)) + xoffset) + "px";
4853startspotimg.style.top = (((yray * Math.sin(circlestart * Math.PI / 180)) * Math.cos(rotation * Math.PI / 180) + (xray * Math.cos(circlestart * Math.PI / 180)) * Math.sin(rotation * Math.PI / 180)) + yoffset) + "px";   
4854   });
4855   
4856  
4857  //add ellipserotation slider (only visible when active)
4858var endanglearea = document.createElement('input');
4859endanglearea.id = "endanglearea";
4860endanglearea.title = "end spot";
4861endanglearea.type = 'range';
4862endanglearea.min = 0;
4863endanglearea.max = 360;
4864endanglearea.value = 360;
4865endanglearea.step = 1;
4866
4867endanglearea.style.marginRight = "2px";
4868endanglearea.style.color = "rgb(196, 196, 196)";
4869endanglearea.style.backgroundColor = "#e6e6e6";	
4870	
4871endanglearea.style.webkitAppearance = "none";	
4872endanglearea.style.appearance = "none";
4873endanglearea.style.boxSizing = "border-box";	
4874endanglearea.style.height = "2.3rem";
4875endanglearea.style.padding = "0px";
4876endanglearea.style.margin = "0px";
4877endanglearea.style.marginRight = "2px";
4878endanglearea.style.border = "0px";
4879endanglearea.style.outline = "0px";
4880endanglearea.style.verticalAlign = "bottom";
4881endanglearea.style.display = "none";
4882endanglearea.style.width = "4.6rem";
4883
4884document.getElementsByClassName("drawtogether-control-container")[0].insertBefore(endanglearea, document.getElementsByClassName("drawtogether-control-container")[0].childNodes[27]);
4885
4886document.getElementById("endanglearea").classList.add("oslider");
4887document.getElementById("endanglearea").classList.add("control-integer-input");
4888  
4889   endanglearea.addEventListener("input", function(){
4890document.getElementsByClassName("drawtogheter-chat-input")[0].setAttribute("placeholder", document.getElementById("endanglearea").value);	   
4891var rotation = Number(document.getElementById("ellipserotationslider").value);
4892var xray = Number(document.getElementById("xradiusarea").value);
4893var yray = Number(document.getElementById("yradiusarea").value);
4894var example = window.location.href;
4895var step_one = example.replace(/.*#/, "");
4896var step_two = step_one.replace(/,.*/, "");
4897var step_three = example.replace(/.*\D,/, "");
4898var centerx = Number(step_three.replace(/,.*/g, ""));
4899var centery  = Number(step_three.replace(/.*,/g, ""));
4900var circlestart = Number(document.getElementById("startanglearea").value) + 180;
4901var circleend = Number(document.getElementById("endanglearea").value) + 180;
4902var xoffset = (document.getElementsByClassName("paint-canvas-background")[0].width / 2) - 6;
4903var yoffset = (document.getElementsByClassName("paint-canvas-background")[0].height / 2) - 6;
4904
4905endspotimg.style.left = (((xray * Math.cos(circleend * Math.PI / 180)) * Math.cos(rotation * Math.PI / 180) - (yray * Math.sin(circleend * Math.PI / 180)) * Math.sin(rotation * Math.PI / 180)) + xoffset) + "px";
4906endspotimg.style.top = (((yray * Math.sin(circleend * Math.PI / 180)) * Math.cos(rotation * Math.PI / 180) + (xray * Math.cos(circleend * Math.PI / 180)) * Math.sin(rotation * Math.PI / 180)) + yoffset) + "px";	   
4907   });
4908
4909
4910
4911//add submit ellipse button
4912var submitellipsestate = 0;
4913var submitellipsebutton = document.createElement("button");
4914submitellipsebutton.innerHTML = "✅";
4915submitellipsebutton.id = "submitellipsebtn";
4916submitellipsebutton.title = "Print ellipse on canvas";
4917submitellipsebutton.style.margin = "0";
4918submitellipsebutton.style.display = "none";
4919submitellipsebutton.style.marginRight = "10px";
4920submitellipsebutton.style.borderRadius = "0";
4921submitellipsebutton.style.padding = "0";
4922submitellipsebutton.style.borderBottom = "0";
4923submitellipsebutton.style.minWidth = "2.3rem"; 
4924submitellipsebutton.className = "control-button"
4925var body = document.getElementsByClassName("drawtogether-control-container")[0];
4926body.insertBefore(submitellipsebutton, body.childNodes[28]);
4927
4928submitellipsebutton.addEventListener("click", function(){
4929var i;
4930var circlestart = Number(document.getElementById("startanglearea").value) + 180;
4931var circleend = Number(document.getElementById("endanglearea").value) + 180;
4932
4933var rotation = Number(document.getElementById("ellipserotationslider").value);
4934//var centerx = document.getElementsByClassName("paint-canvas-background")[0].width / 2;
4935//var centery = document.getElementsByClassName("paint-canvas-background")[0].height / 2;
4936var xray = Number(document.getElementById("xradiusarea").value);
4937var yray = Number(document.getElementById("yradiusarea").value);
4938
4939var example = window.location.href;
4940var step_one = example.replace(/.*#/, "");
4941var step_two = step_one.replace(/,.*/, "");
4942var step_three = example.replace(/.*\D,/, "");
4943var centerx = Number(step_three.replace(/,.*/g, ""));
4944var centery  = Number(step_three.replace(/.*,/g, ""));
4945
4946 
4947anondraw.collab.paint.addUserPath();
4948var lastestlap = 0;
4949var i;
4950var i = circlestart;
4951fakei = circlestart
4952window.changingsides;
4953
4954if (circlestart <= circleend){
4955window.changingsides = circlestart - circleend;
4956} else {
4957window.changingsides =	360 - Math.abs(circlestart - circleend);
4958}
4959
4960for (i = circlestart;i <= circlestart + (Math.abs(changingsides)); i++) { 
4961
4962
4963
4964x = (xray * Math.cos(fakei * Math.PI / 180)) * Math.cos(rotation * Math.PI / 180) - (yray * Math.sin(fakei * Math.PI / 180)) * Math.sin(rotation * Math.PI / 180);
4965y = (yray * Math.sin(fakei * Math.PI / 180)) * Math.cos(rotation * Math.PI / 180) + (xray * Math.cos(fakei * Math.PI / 180)) * Math.sin(rotation * Math.PI / 180);
4966
4967
4968//var offsettedx = x + centerx;
4969//var offsettedy = y + centery;
4970var xoffset = (document.getElementsByClassName("paint-canvas-background")[0].width / 2);
4971var yoffset = (document.getElementsByClassName("paint-canvas-background")[0].height / 2);
4972
4973var a = anondraw.collab.paint;
4974 
4975anondraw.collab.paint.addUserPathPoint([Math.round((a.local.leftTopX + (x  + xoffset) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (y + yoffset) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);
4976
4977fakei++
4978if (fakei == 541){
4979fakei = 181;	
4980}
4981
4982
4983}
4984anondraw.collab.paint.endUserPath();	
4985});
4986
4987
4988//add endspot end spot
4989var endspotimg = new Image();
4990endspotimg.src = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTIiIHdpZHRoPSIxMiI+DQogIDxjaXJjbGUgY3g9IjYiIGN5PSI2IiByPSI2IiBmaWxsPSJyZWQiIC8+DQo8L3N2Zz4g";
4991endspotimg.id = "endspot";
4992endspotimg.style.pointerEvents = "none";
4993endspotimg.style.display = "none";
4994endspotimg.style.width = "12px";
4995endspotimg.style.height = "12px";
4996endspotimg.style.position = "absolute";
4997endspotimg.style.opacity = "0.3";
4998endspotimg.style.transformOrigin = "top left";
4999endspotimg.style.zIndex = "999999";
5000
5001var rotation = Number(document.getElementById("ellipserotationslider").value);
5002var xray = Number(document.getElementById("xradiusarea").value);
5003var yray = Number(document.getElementById("yradiusarea").value);
5004var example = window.location.href;
5005var step_one = example.replace(/.*#/, "");
5006var step_two = step_one.replace(/,.*/, "");
5007var step_three = example.replace(/.*\D,/, "");
5008var centerx = Number(step_three.replace(/,.*/g, ""));
5009var centery  = Number(step_three.replace(/.*,/g, ""));
5010var circlestart = Number(document.getElementById("startanglearea").value) + 180;
5011var circleend = Number(document.getElementById("endanglearea").value) + 180;
5012var xoffset = (document.getElementsByClassName("paint-canvas-background")[0].width / 2) - 6;
5013var yoffset = (document.getElementsByClassName("paint-canvas-background")[0].height / 2) - 6;
5014
5015endspotimg.style.left = (((xray * Math.cos(circleend * Math.PI / 180)) * Math.cos(rotation * Math.PI / 180) - (yray * Math.sin(circleend * Math.PI / 180)) * Math.sin(rotation * Math.PI / 180)) + xoffset) + "px";
5016endspotimg.style.top = (((yray * Math.sin(circleend * Math.PI / 180)) * Math.cos(rotation * Math.PI / 180) + (xray * Math.cos(circleend * Math.PI / 180)) * Math.sin(rotation * Math.PI / 180)) + yoffset) + "px";
5017
5018
5019document.getElementsByClassName('drawtogether-paint-container')[0].appendChild(endspotimg);
5020
5021//add startspot end spot
5022var startspotimg = new Image();
5023startspotimg.src = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTIiIHdpZHRoPSIxMiI+DQogIDxjaXJjbGUgY3g9IjYiIGN5PSI2IiByPSI2IiBmaWxsPSJncmVlbiIgLz4NCjwvc3ZnPiA=";
5024startspotimg.id = "startspot";
5025startspotimg.style.pointerEvents = "none";
5026startspotimg.style.display = "none";
5027startspotimg.style.width = "12px";
5028startspotimg.style.height = "12px";
5029startspotimg.style.position = "absolute";
5030startspotimg.style.opacity = "0.3";
5031startspotimg.style.transformOrigin = "top left";
5032startspotimg.style.zIndex = "999999";
5033
5034
5035var rotation = Number(document.getElementById("ellipserotationslider").value);
5036var xray = Number(document.getElementById("xradiusarea").value);
5037var yray = Number(document.getElementById("yradiusarea").value);
5038var example = window.location.href;
5039var step_one = example.replace(/.*#/, "");
5040var step_two = step_one.replace(/,.*/, "");
5041var step_three = example.replace(/.*\D,/, "");
5042var centerx = Number(step_three.replace(/,.*/g, ""));
5043var centery  = Number(step_three.replace(/.*,/g, ""));
5044var circlestart = Number(document.getElementById("startanglearea").value) + 180;
5045var circleend = Number(document.getElementById("endanglearea").value) + 180;
5046var xoffset = (document.getElementsByClassName("paint-canvas-background")[0].width / 2) - 6;
5047var yoffset = (document.getElementsByClassName("paint-canvas-background")[0].height / 2) - 6;
5048
5049startspotimg.style.left = (((xray * Math.cos(circlestart * Math.PI / 180)) * Math.cos(rotation * Math.PI / 180) - (yray * Math.sin(circlestart * Math.PI / 180)) * Math.sin(rotation * Math.PI / 180)) + xoffset) + "px";
5050startspotimg.style.top = (((yray * Math.sin(circlestart * Math.PI / 180)) * Math.cos(rotation * Math.PI / 180) + (xray * Math.cos(circlestart * Math.PI / 180)) * Math.sin(rotation * Math.PI / 180)) + yoffset) + "px";
5051
5052document.getElementsByClassName('drawtogether-paint-container')[0].appendChild(startspotimg);
5053
5054
5055
5056//adding inner buttons for attach image
5057
5058  var pastestamp = document.createElement("TEXTAREA");
5059  pastestamp.style.width = '4.6rem';
5060  pastestamp.style.height = '2.3rem';
5061  pastestamp.style.lineHeight = '0.9em';
5062  pastestamp.style.marginRight = '2px';
5063  pastestamp.style.verticalAlign = 'bottom';
5064  pastestamp.style.display = 'none';
5065  pastestamp.placeholder = 'paste pic';
5066  pastestamp.id = 'pastestamp'; 
5067  pastestamp.title = 'attach pic from clipboard';  
5068  var body = document.getElementsByClassName("drawtogether-control-container")[0];
5069  body.insertBefore(pastestamp, body.childNodes[10]);
5070
5071
5072   var openstamp = document.createElement("INPUT");
5073   openstamp.setAttribute("type", "file");
5074   openstamp.style.display = 'none';
5075  openstamp.style.width = '2.3rem';
5076  openstamp.style.height = '2.3rem';
5077  openstamp.innerHTML = '?';
5078  openstamp.style.verticalAlign = 'bottom';
5079  openstamp.placeholder = 'paste pic';
5080  openstamp.id = 'openstamp';  
5081  openstamp.title = 'attach image from file'; 
5082  var body = document.getElementsByClassName("drawtogether-control-container")[0];
5083  body.insertBefore(openstamp, body.childNodes[10]);
5084  
5085   var openstamplabel = document.createElement("LABEL");
5086  openstamplabel.style.width = '2.3rem';
5087  openstamplabel.style.height = '2.3rem';
5088  openstamplabel.style.display = 'none';
5089  openstamplabel.innerHTML = '?';
5090  openstamplabel.title = 'attach image from file';
5091  openstamplabel.style.textAlign = 'center';
5092  openstamplabel.style.verticalAlign = 'bottom';
5093  openstamplabel.id = 'openstamplabel';  
5094  openstamplabel.htmlFor = 'openstamp';  
5095  openstamplabel.className = "control-button";
5096  openstamplabel.style.margin = "0";
5097  openstamplabel.style.borderRadius = "0";
5098  openstamplabel.style.padding = "0";
5099  openstamplabel.style.borderBottom = "0";
5100  var body = document.getElementsByClassName("drawtogether-control-container")[0];
5101  body.insertBefore(openstamplabel, body.childNodes[10]);
5102
5103
5104  //add input textart input
5105  var textartarea = document.createElement("INPUT");
5106  textartarea.setAttribute("type", "text");
5107  textartarea.style.width = '9.2rem';
5108  textartarea.style.height = '2.3rem';
5109  textartarea.style.lineHeight = '2em';
5110   textartarea.style.margin = '0px';
5111   textartarea.style.marginRight = '2px';
5112   textartarea.style.paddingLeft = '5px';
5113  textartarea.style.verticalAlign = 'bottom';
5114  textartarea.style.display = 'none';
5115  //textartarea.placeholder = 'textart pic';
5116  textartarea.id = 'textartarea'; 
5117   textartarea.placeholder = 'your text here'; 
5118
5119  textartarea.title = 'attach text';  
5120  var body = document.getElementsByClassName("drawtogether-control-container")[0];
5121  body.insertBefore(textartarea, body.childNodes[13]);
5122    
5123  
5124  var x = document.createElement("SELECT");
5125  x.setAttribute("id", "fontselector");
5126  x.title = 'attach text font selector';
5127  x.style.height = '2.3rem';
5128  x.style.lineHeight = '2em';
5129  x.style.margin = '0px';
5130  x.style.marginRight = '2px';
5131  x.style.verticalAlign = 'bottom';
5132  x.style.display = 'none';
5133  var body = document.getElementsByClassName("drawtogether-control-container")[0];
5134  body.insertBefore(x, body.childNodes[13]);
5135
5136
5137  var z = document.createElement("option");
5138  z.setAttribute("value", "Alfa Slab One");
5139  var t = document.createTextNode("Alfa Slab One");
5140  z.appendChild(t);
5141  document.getElementById("fontselector").appendChild(z);
5142
5143  var z = document.createElement("option");
5144  z.setAttribute("value", "Georgia");
5145  var t = document.createTextNode("Georgia");
5146  z.appendChild(t);
5147  document.getElementById("fontselector").appendChild(z);
5148
5149  var z = document.createElement("option");
5150  z.setAttribute("value", "Impact");
5151  var t = document.createTextNode("Impact");
5152  z.appendChild(t);
5153  document.getElementById("fontselector").appendChild(z);
5154  
5155  var z = document.createElement("option");
5156  z.setAttribute("value", "Permanent Marker");
5157  var t = document.createTextNode("Permanent Marker");
5158  z.appendChild(t);
5159  document.getElementById("fontselector").appendChild(z);
5160  
5161  var z = document.createElement("option");
5162  z.setAttribute("value", "Satisfy");
5163  var t = document.createTextNode("Satisfy");
5164  z.appendChild(t);
5165  document.getElementById("fontselector").appendChild(z);
5166  
5167  var z = document.createElement("option");
5168  z.setAttribute("value", "Special Elite");
5169  var t = document.createTextNode("Special Elite");
5170  z.appendChild(t);
5171  document.getElementById("fontselector").appendChild(z);  
5172  
5173  
5174  document.head.insertAdjacentHTML('beforeend',"<style>@import url('https://fonts.googleapis.com/css?family=Alfa+Slab+One|Permanent+Marker|Satisfy|Special+Elite&display=swap'); font-family: 'Special Elite', cursive;font-family: 'Alfa Slab One', cursive;font-family: 'Permanent Marker', cursive;font-family: 'Satisfy', cursive;</style>");
5175  
5176  var x = document.createElement("A");
5177  x.style.visibility = 'hidden';
5178  x.style.fontFamily = 'Alfa Slab One';
5179  x.style.pointerEvents = "none";
5180  x.position = 'absolute';
5181  document.body.appendChild(x);
5182  
5183  var x = document.createElement("A");
5184  x.style.visibility = 'hidden';
5185  x.style.fontFamily = 'Permanent Marker';
5186    x.style.pointerEvents = "none";
5187  x.position = 'absolute';
5188  document.body.appendChild(x);
5189  
5190  var x = document.createElement("A");
5191  x.style.visibility = 'hidden';
5192  x.style.fontFamily = 'Satisfy';
5193    x.style.pointerEvents = "none";
5194  x.position = 'absolute';
5195  document.body.appendChild(x);
5196  
5197  var x = document.createElement("A");
5198  x.style.visibility = 'hidden';
5199  x.style.fontFamily = 'Special Elite';
5200    x.style.pointerEvents = "none";
5201  x.position = 'absolute';
5202  document.body.appendChild(x);
5203
5204
5205
5206//player has logged
5207var arrA;
5208var arrC;
5209var notlogged = "";
5210var logbackup = "";
5211var myname = localStorage.getItem("drawtogether-name");
5212anondraw.collab.network.on("playerlist", function(arrA) {
5213	window.arrA = arrA;	
5214			if (arrA[arrA.length - 1].userid == undefined){
5215				window.notlogged = arrA[arrA.length - 1].id;
5216			}
5217			if (arrA[arrA.length - 1].id == notlogged && typeof arrA[arrA.length - 1].userid == 'number' && arr[arr.length - 1].name != idbackup && arr[arr.length - 1].name != myname && arrA[arrA.length - 1].userid != anondraw.collab.account.id && arrA[arrA.length - 1].userid != logbackup){
5218				
5219				window.logbackup = arrA[arrA.length - 1].userid;
5220				var shortname = arrA[arrA.length - 1].name.split(/ \<| \[| \{/, 1); 						
5221
5222//anondraw.collab.createPlayerChatDom(arr[arr.length - 1].name, " has logged. ?")
5223
5224 //anondraw.collab.chat.addElementAsMessage(anondraw.collab.createPlayerChatDom(arr[arr.length - 1].name, " has logged. ?"));
5225//  anondraw.collab.chat.addElementAsMessage( anondraw.collab.createPlayerLoggedDom( anondraw.collab.playerList[anondraw.collab.playerList.length]))
5226
5227//anondraw.collab.chat.addElementAsMessage( anondraw.collab.createPlayerChatDom(anondraw.collab.playerList[anondraw.collab.playerList.length - 1], " has logged. ?"));
5228        b = document.createElement("div");
5229        b.appendChild(document.createTextNode(arrA[arrA.length - 1].name + " has logged. ?"));
5230
5231if (joiners.includes(arrA[arrA.length - 1].userid)){
5232document.title = arrA[arrA.length - 1].name + " joined";
5233document.getElementsByClassName("drawtogheter-chat-input")[0].placeholder = arrA[arrA.length - 1].name;
5234document.getElementsByClassName("drawtogether-control-container")[0].style.background = 'rgb(255, 0, 102)';	
5235document.getElementsByClassName("drawtogheter-chat-input")[0].style.background = 'rgb(255, 0, 102)';	
5236}
5237 
5238        b.addEventListener("click", function(){window.open('https://www.anondraw.com/profile/' + arrA[arrA.length - 1].userid, '_blank').focus()});
5239        b.style.cursor = "pointer";
5240        anondraw.collab.chat.addElementAsMessage(b)
5241
5242
5243//anondraw.collab.chat.addMessage(arr[arr.length - 1].name + " has logged.");
5244//anondraw.collab.chat.addMessage("SERVER", arr[arr.length - 1].name + " (" + arrA[arrA.length - 1].userid + ") has logged.");
5245			}
5246window.arr = arrA;
5247    });
5248	
5249
5250
5251var x = document.createElement("DIV");
5252x.id = 'svgdiv';
5253x.style.position = 'absolute';
5254x.style.left = '350px';
5255x.style.top = '80px';
5256x.style.zIndex = '999999';
5257x.style.display = 'none';
5258x.style.opacity = '0.8';
5259x.style.pointerEvents = "none";
5260document.getElementsByClassName("drawtogether-paint-container")[0].appendChild(x);
5261
5262 //add copycanvas button
5263 /*
5264var copycanvasstate;
5265var copycanvasbutton = document.createElement("button");
5266copycanvasbutton.innerHTML = "?";
5267copycanvasbutton.id = "copycanvasbtn";
5268copycanvasbutton.style.margin = "0";
5269copycanvasbutton.style.borderRadius = "0";
5270copycanvasbutton.style.padding = "0";
5271copycanvasbutton.style.borderBottom = "0";
5272copycanvasbutton.style.minWidth = "2.3rem"; 
5273copycanvasbutton.className = "control-button"
5274var body = document.getElementsByClassName("drawtogether-control-container")[0];
5275body.insertBefore(copycanvasbutton, body.childNodes[3]);
5276*/
5277
5278
5279
5280
5281 //update nick colors when loads the mod
5282 anondraw.collab.updatePlayerList()
5283
5284//brighter colors for regular users
5285Chat.prototype.string2Color = function(a) {
5286    for (var b = 2348, c = 0.9, d = 0.4, e = Math.max(a.length - 1, 2); 0 <= e; e--)
5287        for (var f = a.length - 1; 0 <= f; f--) b = (b << 5) - b + ~a.charCodeAt(f);
5288    0 > b && (b = -b, d = 0.35);
5289    360 < b && (a = parseInt(b / 360), b -= 360 * a, 0 === a % 3 ? c = 1 : 0 === a % 2 && (c = 0.95));
5290    return "hsl(" + b + ", 100%, 30%)"
5291};
5292
5293//brighter colors for chatlist
5294function string2ColorB (a) {
5295    for (var b = 2348, c = 0.9, d = 0.4, e = Math.max(a.length - 1, 2); 0 <= e; e--)
5296        for (var f = a.length - 1; 0 <= f; f--) b = (b << 5) - b + ~a.charCodeAt(f);
5297    0 > b && (b = -b, d = 0.35);
5298    360 < b && (a = parseInt(b / 360), b -= 360 * a, 0 === a % 3 ? c = 1 : 0 === a % 2 && (c = 0.95));
5299    return "hsl(" + b + ", 100%, 20%)"
5300};
5301
5302//rename gridbox button
5303 DrawTogether.prototype.createGridInSelection = function(a, b) {
5304    var c = QuickSettings.create(50, 50, "Grid settings");
5305    c.addControl({
5306        type: "range",
5307        title: "Squares",
5308        min: 1,
5309        max: 50,
5310        value: 5,
5311        step: 1,
5312        callback: this.updateGeneratedGridPreview.bind(this, c, a, b)
5313    });
5314    c.addControl({
5315        type: "range",
5316        title: "Gutter",
5317        min: 0,
5318        max: 200,
5319        value: 0,
5320        step: 1,
5321        callback: this.updateGeneratedGridPreview.bind(this, c, a, b)
5322    });
5323    c.addButton("Save for animation manager", function() {
5324        var d = c.getRangeValue("Squares"),
5325            e = c.getRangeValue("Gutter"),
5326            f = Math.ceil((Math.abs(b[0] -
5327                a[0]) - 2 * d) / (d - 1));
5328        e > f && (e = f);
5329        var f = e * (d - 1),
5330            h = Math.floor(Math.abs(b[0] - a[0] - f) / d) * d + f,
5331            f = Math.floor((Math.abs(b[0] - a[0]) - h) / 2),
5332            h = (h - e * (d - 1)) / d,
5333            g = Math.abs(b[1] - a[1]),
5334            f = [Math.min(a[0], b[0]) + f, Math.min(a[1], b[1])];
5335        this.myAnimations.push({
5336            name: null,
5337            fps: 16,
5338            leftTop: f,
5339            squares: d,
5340            sqwidth: h,
5341            sqheight: g,
5342            gutter: e,
5343            bufferFrames: {}
5344        });
5345        this.updateAnimationsCookie();
5346        this.updateAnimationManager()
5347    }.bind(this));
5348    c.addButton("Generate", function() {
5349        var d = c.getRangeValue("Squares"),
5350            e = c.getRangeValue("Gutter"),
5351            f = Math.ceil((Math.abs(b[0] -
5352                a[0]) - 2 * d) / (d - 1));
5353        e > f && (e = f);
5354        var f = e * (d - 1),
5355            f = Math.floor(Math.abs(b[0] - a[0] - f) / d) * d + f,
5356            h = Math.floor((Math.abs(b[0] - a[0]) - f) / 2),
5357            g = (f - e * (d - 1)) / d,
5358            k = Math.abs(b[1] - a[1]),
5359            h = [Math.min(a[0], b[0]) + h, Math.min(a[1], b[1])];
5360        5 <= this.reputation || 1E3 < f || 200 < g ? (console.log("Generating grid", d, g, k), this.paint.generateGrid(h, d, g, k, e)) : this.chat.addMessage("Grids wider than 1000 pixels or higher than 200 are limited to users with 5+ reputation.")
5361    }.bind(this));
5362    c.addButton("Close", function() {
5363        clearTimeout(this.updateGridPreviewTimeout);
5364        c._panel.parentNode.removeChild(c._panel);
5365        this.updateGeneratedGridPreview("Clear Grid Preview")
5366    }.bind(this));
5367    (function e() {
5368        this.updateGeneratedGridPreview(c, a, b);
5369        this.updateGridPreviewTimeout = setTimeout(e.bind(this), 300)
5370    }).apply(this)
5371};
5372
5373
5374document.addEventListener('keyup', function(e) {
5375	if (e.keyCode == 86 ||e.keyCode == 80||e.keyCode == 66||e.keyCode == 84||e.keyCode == 76||e.keyCode == 90||e.keyCode == 71){
5376  document.getElementById("arrowup").style.left = document.getElementsByClassName("paint-selected-tool")[0].offsetLeft + 19 - 8;
5377	}
5378  }); 
5379
5380
5381//commands were working only with ENTER key... fixing SEND button  
5382document.getElementsByClassName("inputcontainer")[0].removeChild(document.getElementById("sendchat"));
5383
5384var newsendchatbtn = document.createElement("button");
5385
5386 newsendchatbtn.id = "newsendchatbtn";
5387 newsendchatbtn.innerHTML = "✔";
5388 newsendchatbtn.style.width = "20px";
5389 newsendchatbtn.style.height = "100%";
5390 newsendchatbtn.style.lineHeight = "2em";
5391 newsendchatbtn.style.fontSize = "1em !important";
5392 newsendchatbtn.style.right = "20px";
5393
5394newsendchatbtn.style.margin = "0";
5395newsendchatbtn.style.borderRadius = "0";
5396newsendchatbtn.style.padding = "0";
5397newsendchatbtn.style.borderBottom = "0";
5398newsendchatbtn.style.position = "absolute";
5399newsendchatbtn.className = "control-button";
5400//newsendchatbtn.style.backgroundColor = "#323e4a";
5401var body = document.getElementsByClassName("inputcontainer")[0];
5402body.insertBefore(newsendchatbtn, body.childNodes[1]);
5403
5404//document.head.insertAdjacentHTML('beforeend','<style>#newsendchatbtn:hover {background-color: #485869;}</style>');
5405
5406document.getElementById("newsendchatbtn").addEventListener ("click", function() {
5407anondraw.collab.chat.sendChat.call();
5408});
5409
5410
5411
5412
5413
5414
5415
5416
5417//attach invert colors
5418var attachcheckBstate;
5419var attachcheckBbutton = document.createElement("INPUT");
5420attachcheckBbutton.setAttribute("type", "checkbox");
5421attachcheckBbutton.id = "inv";
5422attachcheckBbutton.title = "invert colors";
5423attachcheckBbutton.style.display = 'none';
5424var body = document.getElementsByClassName("drawtogether-control-container")[0];
5425body.insertBefore(attachcheckBbutton, body.childNodes[13]);
5426document.getElementById("inv").addEventListener ("click", function() {
5427
5428if (document.getElementById("inv").checked){
5429document.getElementById("attachinvertlabel").innerHTML = '<i class="material-icons-sharp">check_box</i>';	
5430} else {
5431document.getElementById("attachinvertlabel").innerHTML = '<i class="material-icons-sharp">check_box_outline_blank</i>';
5432}
5433
5434});
5435
5436//attach mirror
5437var attachcheckCstate;
5438var attachcheckCbutton = document.createElement("INPUT");
5439attachcheckCbutton.setAttribute("type", "checkbox");
5440attachcheckCbutton.id = "mirror";
5441attachcheckCbutton.title = "flip horizontal";
5442attachcheckCbutton.style.display = 'none';
5443var body = document.getElementsByClassName("drawtogether-control-container")[0];
5444body.insertBefore(attachcheckCbutton, body.childNodes[13]);
5445document.getElementById("mirror").addEventListener ("change", function() {
5446
5447if (document.getElementById("mirror").checked){
5448document.getElementById("attachfliplabel").innerHTML = '<i class="material-icons-sharp">check_box</i>';	
5449} else {
5450document.getElementById("attachfliplabel").innerHTML = '<i class="material-icons-sharp">check_box_outline_blank</i>';
5451}	
5452	
5453});
5454
5455
5456//attach fill with lines
5457var attachcheckAstate;
5458var attachcheckAbutton = document.createElement("INPUT");
5459attachcheckAbutton.setAttribute("type", "checkbox");
5460attachcheckAbutton.id = "lin";
5461attachcheckAbutton.title = "fill with lines";
5462attachcheckAbutton.checked = false;
5463attachcheckAbutton.style.display = 'none';
5464var body = document.getElementsByClassName("drawtogether-control-container")[0];
5465body.insertBefore(attachcheckAbutton, body.childNodes[13]);
5466document.getElementById("lin").addEventListener ("change", function() {
5467
5468if (document.getElementById("lin").checked){
5469document.getElementById("attachfilllabel").innerHTML = '<i class="material-icons-sharp">check_box</i>';	
5470} else {
5471document.getElementById("attachfilllabel").innerHTML = '<i class="material-icons-sharp">check_box_outline_blank</i>';
5472}
5473	
5474linesbox();
5475});
5476
5477
5478//add input fontsize input
5479  var fontsizearea = document.createElement("INPUT");
5480  fontsizearea.setAttribute("type", "number");
5481  fontsizearea.style.width = '2.6rem';
5482  fontsizearea.style.height = '2.3rem';
5483  fontsizearea.style.lineHeight = '2em';
5484   fontsizearea.style.marginRight = '2px';
5485  fontsizearea.style.verticalAlign = 'bottom';
5486  fontsizearea.style.display = 'none';
5487  //fontsizearea.placeholder = 'fontsize pic';
5488  fontsizearea.id = 'fontsize'; 
5489  fontsizearea.value = 50; 
5490   fontsizearea.min = 10; 
5491    fontsizearea.max = 100;
5492	fontsizearea.step = 1;
5493  fontsizearea.title = 'width radius';  
5494  var body = document.getElementsByClassName("drawtogether-control-container")[0];
5495  body.insertBefore(fontsizearea, body.childNodes[18]);
5496  
5497  
5498  //add attach element button
5499var attachelementstate;
5500var attachelementbutton = document.createElement("button");
5501attachelementbutton.innerHTML = "✅";
5502attachelementbutton.id = "attachelementbtn";
5503attachelementbutton.style.margin = "0";
5504attachelementbutton.style.marginRight = "10px";
5505attachelementbutton.style.borderRadius = "0";
5506attachelementbutton.style.padding = "0";
5507attachelementbutton.style.borderBottom = "0";
5508attachelementbutton.style.display = "none";
5509attachelementbutton.style.minWidth = "2.3rem"; 
5510attachelementbutton.className = "control-button";
5511var body = document.getElementsByClassName("drawtogether-control-container")[0];
5512body.insertBefore(attachelementbutton, body.childNodes[16]);
5513
5514
5515
5516
5517//attach fill with lines
5518var textartfillstate;
5519var textartfillbutton = document.createElement("INPUT");
5520textartfillbutton.setAttribute("type", "checkbox");
5521textartfillbutton.id = "txtlin";
5522textartfillbutton.title = "fill with lines";
5523textartfillbutton.checked = false;
5524textartfillbutton.style.display = 'none';
5525var body = document.getElementsByClassName("drawtogether-control-container")[0];
5526body.insertBefore(textartfillbutton, body.childNodes[19]);
5527document.getElementById("txtlin").addEventListener ("change", function() {
5528
5529if (document.getElementById("txtlin").checked){
5530txtlinlabel.innerHTML = '<i class="material-icons-sharp">check_box</i>';	
5531} else {
5532txtlinlabel.innerHTML = '<i class="material-icons-sharp">check_box_outline_blank</i>';
5533}
5534linesbox();
5535});
5536
5537
5538/*
5539  document.getElementById("sendchat").style.display = "inline-block";
5540  document.getElementById("sendchat").style.position = "absolute";
5541  document.getElementById("sendchat").style.top = "0";
5542  document.getElementById("sendchat").style.right = "20px";
5543  document.getElementById("sendchat").style.width = "20px";
5544  document.getElementById("sendchat").style.lineHeight = "1.4rem";
5545  document.getElementById("sendchat").style.textAlign = "center";
5546  document.getElementById("sendchat").style.color = "#fff";
5547  document.getElementById("sendchat").style.background = "#323e4a";
5548  document.getElementById("sendchat").style.cursor = "pointer";
5549  document.getElementById("sendchat").classList.remove("button-small");  
5550
5551document.getElementById("sendchat").addEventListener("click", function(){
5552anondraw.collab.chat.sendChat.call();
5553});
5554  */
5555
5556//add title to untitled buttons
5557document.getElementById("settingsbtn").title = "Settings"
5558document.getElementById("linksave").title = "Save canvas as .png"
5559document.getElementById("referencebtn").title = "Add reference pictures"
5560document.getElementById("placeimgbtn").title = "Attach image"
5561document.getElementById("anchorbtn").title = "Jump to your anchor spot"
5562document.getElementById("randombtn").title = "Jump to a random location"
5563document.getElementById("circlebtn").title = "Create ellipses"
5564document.getElementById("perspectivebtn").title = "Perspective tool"
5565document.getElementById("setperspectivebtn").title = "Set current perspective point"
5566
5567
5568//add little space on the top of nicks list
5569document.getElementsByClassName("drawtogether-info-playerlist")[0].style.paddingTop = "5px";
5570
5571
5572//add special scrollbar (not visible in firefox)
5573document.head.insertAdjacentHTML('beforeend','<style>/* width */ ::-webkit-scrollbar {   width: 15px;   }/* Track */ ::-webkit-scrollbar-track {   background: rgba(0,0,0,0.05); } /* Handle */ ::-webkit-scrollbar-thumb {   background: rgba(0,0,0,0.2); }/* Handle on hover */ ::-webkit-scrollbar-thumb:hover {   background: rgba(0,0,0,0.3); }</style>');
5574
5575
5576//bring options boxes to top
5577document.head.insertAdjacentHTML('beforeend','<style>.msettings_main {z-index:999999999 !important;} .gui-prompt-container {z-index:999999999 !important;} .gui-window {z-index:999999999 !important;} .favorites-window {z-index:999999999 !important;} .regions-window {z-index:999999999 !important;} .drawtogether-roomwindow {z-index:999999999 !important;} .pmcontainer {z-index:999999999 !important;}</style>');
5578
5579
5580//dragable colorsbox
5581function dragElement(elmnt) {
5582  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
5583  if (document.getElementById(elmnt.id + "header")) {
5584    // if present, the header is where you move the DIV from:
5585    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
5586  } else {
5587    // otherwise, move the DIV from anywhere inside the DIV: 
5588    elmnt.onmousedown = dragMouseDown;
5589  }
5590
5591  function dragMouseDown(e) {
5592    e = e || window.event;
5593    e.preventDefault();
5594    // get the mouse cursor position at startup:
5595    pos3 = e.clientX;
5596    pos4 = e.clientY;
5597    document.onmouseup = closeDragElement;
5598    // call a function whenever the cursor moves:
5599    document.onmousemove = elementDrag;
5600  }
5601
5602  function elementDrag(e) {
5603    e = e || window.event;
5604    e.preventDefault();
5605    // calculate the new cursor position:
5606    pos1 = pos3 - e.clientX;
5607    pos2 = pos4 - e.clientY;
5608    pos3 = e.clientX;
5609    pos4 = e.clientY;
5610    // set the element's new position:
5611    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
5612    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
5613  }
5614
5615  function closeDragElement() {
5616    // stop moving when mouse button is released:
5617    document.onmouseup = null;
5618    document.onmousemove = null;
5619  }
5620}
5621
5622dragElement(document.getElementById("maincolorsbox"));
5623document.getElementById("maincolorsbox").style.zIndex = '9999999993';
5624
5625
5626
5627//replace colorsbox elements:
5628var bodyA = document.getElementsByClassName("sp-container")[0];
5629bodyA.style.paddingBottom = '10px';
5630bodyA.style.border = '0';
5631
5632var bodyB = document.getElementsByClassName("sp-palette-container")[0];
5633bodyB.style.borderRight = '0';
5634bodyB.style.float = 'none';
5635bodyB.style.paddingBottom = '0';
5636bodyB.style.marginBottom = '0';
5637bodyB.style.display = 'block';
5638
5639var bodyC = document.getElementsByClassName("sp-picker-container")[0];
5640bodyC.style.borderLeft = '0';
5641bodyC.style.float = 'none';
5642bodyC.style.paddingBottom = '0';
5643bodyC.style.marginBottom = '0';
5644
5645
5646 //add placetxt button
5647var placetxtstate;
5648var placetxtbutton = document.createElement("button");
5649placetxtbutton.innerHTML = "?";
5650placetxtbutton.id = "placetxtbtn";
5651placetxtbutton.title = "Text art";
5652placetxtbutton.style.margin = "0";
5653placetxtbutton.style.borderRadius = "0";
5654placetxtbutton.style.padding = "0";
5655placetxtbutton.style.borderBottom = "0";
5656placetxtbutton.style.minWidth = "2.3rem"; 
5657placetxtbutton.className = "control-button"
5658var body = document.getElementsByClassName("drawtogether-control-container")[0];
5659body.insertBefore(placetxtbutton, body.childNodes[17]);
5660placetxtbutton.addEventListener ("click", function() {
5661anondraw.collab.paint.changeTool("grab");	
5662if (placetxtstate == 1){
5663document.getElementById("svgdiv").style.display = 'none';	
5664document.getElementById("textartarea").style.display = 'none';
5665document.getElementById("fontselector").style.display = 'none';
5666document.getElementById("fontsize").style.display = 'none';
5667document.getElementById("attachtextartbtn").style.display = 'none';
5668document.getElementById("txtlinlabel").style.display = 'none';
5669
5670document.getElementById("placetxtbtn").style.borderBottom = '0';
5671
5672document.getElementById("textartarea").style.borderBottom = '0';
5673document.getElementById("fontselector").style.borderBottom = '0';
5674document.getElementById("fontsize").style.borderBottom = '0';
5675document.getElementById("attachtextartbtn").style.borderBottom = '0';
5676document.getElementById("txtlinlabel").style.borderBottom = '0';
5677
5678placetxtbutton.classList.remove("activated");	
5679window.placetxtstate = 0;
5680document.getElementById("arrowup").style.left = document.getElementsByClassName("paint-selected-tool")[0].offsetLeft + 19 - 8;	
5681} else {
5682if (window.alert_textart == 0){	
5683	 anondraw.collab.chat.addMessage('WARNING!',"Text art is visible for other users only after they refresh the page. The checkbox have effect in the next text input. If the text is getting out of bounds, add a simple space to adjust.");
5684window.alert_textart = 1;	 
5685}	
5686document.getElementById("svgdiv").style.display = 'inline-block';
5687document.getElementById("textartarea").style.display = 'inline-block';
5688document.getElementById("fontselector").style.display = 'inline-block';
5689document.getElementById("fontsize").style.display = 'inline-block';
5690document.getElementById("attachtextartbtn").style.display = 'inline-block';
5691document.getElementById("txtlinlabel").style.display = 'inline-block';
5692
5693document.getElementById("placetxtbtn").style.borderBottom = '5px solid #00eef9';
5694
5695document.getElementById("textartarea").style.borderBottom = '5px solid #00eef9';
5696document.getElementById("fontselector").style.borderBottom = '5px solid #00eef9';
5697document.getElementById("fontsize").style.borderBottom = '5px solid #00eef9';
5698document.getElementById("attachtextartbtn").style.borderBottom = '5px solid #00eef9';
5699document.getElementById("txtlinlabel").style.borderBottom = '5px solid #00eef9';
5700
5701
5702placetxtbutton.classList.add("activated");
5703window.placetxtstate = 1;
5704document.getElementById("arrowup").style.left = document.getElementsByClassName("paint-selected-tool")[0].offsetLeft + 19 - 8;			
5705}
5706});
5707
5708
5709  //add attach element button
5710var attachtextartstate;
5711var attachtextartbutton = document.createElement("button");
5712attachtextartbutton.innerHTML = "✅";
5713attachtextartbutton.id = "attachtextartbtn";
5714attachtextartbutton.style.margin = "0";
5715attachtextartbutton.style.marginRight = "10px";
5716attachtextartbutton.style.borderRadius = "0";
5717attachtextartbutton.style.padding = "0";
5718attachtextartbutton.style.borderBottom = "0";
5719attachtextartbutton.style.display = "none";
5720attachtextartbutton.style.minWidth = "2.3rem"; 
5721attachtextartbutton.className = "control-button";
5722var body = document.getElementsByClassName("drawtogether-control-container")[0];
5723body.insertBefore(attachtextartbutton, body.childNodes[21]);
5724
5725
5726
5727
5728
5729 //add shortcuts button
5730 /*
5731var stop = false;
5732window.stop = false;
5733window.addEventListener('keypress', myFunc.bind(event),true);
5734function myFunc(event){
5735if(stop){
5736    event.stopPropagation();
5737}
5738}
5739 
5740var shortcutsstate;
5741var shortcutsbutton = document.createElement("button");
5742shortcutsbutton.innerHTML = "?";
5743shortcutsbutton.id = "shortcutsbtn";
5744shortcutsbutton.title = "Keyboard shortcuts";
5745shortcutsbutton.style.margin = "0";
5746shortcutsbutton.style.borderRadius = "0";
5747shortcutsbutton.style.padding = "0";
5748shortcutsbutton.style.borderBottom = "0";
5749shortcutsbutton.style.minWidth = "2.3rem"; 
5750shortcutsbutton.className = "control-button"
5751var body = document.getElementsByClassName("drawtogether-control-container")[0];
5752body.insertBefore(shortcutsbutton, body.childNodes[22]);
5753shortcutsbutton.classList.add("activated");
5754shortcutsbutton.addEventListener ("click", function() {
5755if (shortcutsstate == 1){
5756window.stop = false;
5757shortcutsbutton.classList.add("activated");	
5758window.shortcutsstate = 0;	
5759} else {
5760window.stop = true;
5761shortcutsbutton.classList.remove("activated");
5762window.shortcutsstate = 1;			
5763}
5764});
5765*/
5766
5767
5768
5769
5770  //add attach element button
5771var setanchorstate;
5772var setanchorbutton = document.createElement("button");
5773setanchorbutton.innerHTML = "✅";
5774setanchorbutton.id = "setanchorbtn";
5775setanchorbutton.title = "Set anchor button's target";
5776setanchorbutton.style.margin = "0";
5777setanchorbutton.style.marginRight = "10px";
5778setanchorbutton.style.borderRadius = "0";
5779setanchorbutton.style.padding = "0";
5780setanchorbutton.style.borderBottom = "0";
5781setanchorbutton.style.display = "none";
5782setanchorbutton.style.minWidth = "2.3rem"; 
5783setanchorbutton.className = "control-button";
5784var body = document.getElementsByClassName("drawtogether-control-container")[0];
5785body.insertBefore(setanchorbutton, body.childNodes[26]);
5786
5787setanchorbutton.addEventListener ("mouseover", function() {
5788document.getElementById("setanchorbtn").style.display = "inline-block";
5789document.getElementById("anchorbtn").style.borderBottom = '5px solid #00eef9';
5790document.getElementById("setanchorbtn").style.borderBottom = '5px solid #00eef9';
5791});
5792
5793setanchorbutton.addEventListener ("mouseleave", function() {
5794document.getElementById("setanchorbtn").style.display = "none";
5795document.getElementById("anchorbtn").style.borderBottom = '0';
5796document.getElementById("setanchorbtn").style.borderBottom = '0';
5797});
5798
5799setanchorbutton.addEventListener ("click", function() {
5800	//localStorage.setItem("lastfav", a + "," + c);
5801var example = window.location.href;
5802var step_one = example.replace(/.*#/, "");
5803var step_two = step_one.replace(/,.*/, "");
5804
5805
5806var step_three = example.replace(/.*\D,/, "");
5807var step_x = Number(step_three.replace(/,.*/g, ""));
5808var step_y  = Number(step_three.replace(/.*,/g, ""));
5809	
5810	localStorage.setItem(step_two + "_lastfav", step_x + "," + step_y);	
5811		 anondraw.collab.chat.addMessage('Anchor set',"x." + step_x + " y." + step_y); 
5812});
5813
5814
5815
5816
5817
5818//add attachsize slider (only visible when active)
5819var attachsizeslider = document.createElement('input');
5820attachsizeslider.id = "attachsizeslider";
5821attachsizeslider.title = "attach img size";
5822attachsizeslider.type = 'range';
5823attachsizeslider.min = 0.0;
5824attachsizeslider.max = 5.0;
5825attachsizeslider.value = 1.0;
5826attachsizeslider.step = 0.01;
5827attachsizeslider.style.color = "rgb(196, 196, 196)";
5828attachsizeslider.style.backgroundColor = "#e6e6e6";
5829attachsizeslider.style.webkitAppearance = "none";	
5830attachsizeslider.style.appearance = "none";
5831attachsizeslider.style.boxSizing = "border-box";	
5832attachsizeslider.style.height = "2.3rem";
5833attachsizeslider.style.padding = "0px";
5834attachsizeslider.style.margin = "0px";
5835attachsizeslider.style.border = "0px";
5836attachsizeslider.style.outline = "0px";
5837attachsizeslider.style.verticalAlign = "bottom";
5838attachsizeslider.style.display = "none";
5839attachsizeslider.style.width = "4.6rem";
5840    
5841document.getElementsByClassName("drawtogether-control-container")[0].insertBefore(attachsizeslider, document.getElementsByClassName("drawtogether-control-container")[0].childNodes[13]);
5842
5843document.getElementById("attachsizeslider").classList.add("oslider");
5844document.getElementById("attachsizeslider").classList.add("control-integer-input");
5845
5846document.getElementById("attachsizeslider").addEventListener("input", function(){
5847document.getElementsByClassName("inputcontainer")[0].placeholder = document.getElementById("attachsizeslider").value;
5848});
5849
5850document.getElementById("attachsizeslider").addEventListener("input", function(){
5851document.getElementsByClassName("drawtogheter-chat-input")[0].setAttribute("placeholder", document.getElementById("attachsizeslider").value);
5852  });
5853
5854
5855document.getElementById("attachsizeslider").addEventListener("change", function(){
5856Potrace.process(function(){
5857    displaySVG(document.getElementById("attachsizeslider").value);
5858  });
5859});
5860/*
5861//add title
5862var titlelabel = document.createElement("span");
5863titlelabel.innerHTML = "AnonProMod v1.0";
5864titlelabel.id = "titlelabel";
5865titlelabel.style.margin = "0";
5866titlelabel.style.borderRadius = "0";
5867titlelabel.style.padding = "0";
5868titlelabel.style.borderBottom = "0";
5869
5870titlelabel.style.fontSize = "0.8em"; 
5871titlelabel.style.color = "#456789";
5872 
5873titlelabel.style.lineHeight = "100%"; 
5874titlelabel.style.position = "absolute";
5875titlelabel.style.bottom = "1.7rem";
5876titlelabel.style.right = "4px";
5877var body = document.getElementsByClassName("drawtogether-chat-container")[0];
5878body.appendChild(titlelabel);
5879*/
5880 
5881 //links highlights
5882 document.head.insertAdjacentHTML('beforeend','<style>a {color: black !important;background: rgba(255, 0, 0, 0.3);} a:hover {color: white !important;background: rgba(255, 0, 0, 0.3);}</style>');
5883 
5884 
5885 //reset slider when zoom is reseted: 
5886 document.getElementById("defaultzoombtn").addEventListener("click", function(){
5887	 document.getElementById("zoomslider").value = '1';	 
5888	 if (document.getElementById("wallpapercontainer").style.backgroundImage != 'url("images/transparent.png")'){
5889document.getElementById("wallpapercontainer").style.backgroundSize = (anondraw.collab.paint.public.zoom / (window.originalzoom)) * 100 + "%";
5890} else {
5891document.getElementById("wallpapercontainer").style.backgroundSize = anondraw.collab.paint.public.zoom * 12.45 + "%";	
5892}
5893 });
5894  document.getElementById("minuszoombtn").addEventListener("click", function(){
5895	 document.getElementById("zoomslider").value = anondraw.collab.paint.public.zoom;
5896if (document.getElementById("wallpapercontainer").style.backgroundImage != 'url("images/transparent.png")'){
5897document.getElementById("wallpapercontainer").style.backgroundSize = (anondraw.collab.paint.public.zoom / (window.originalzoom)) * 100 + "%";
5898} else {
5899document.getElementById("wallpapercontainer").style.backgroundSize = anondraw.collab.paint.public.zoom * 12.45 + "%";	
5900}	 
5901 });
5902  document.getElementById("pluszoombtn").addEventListener("click", function(){
5903	 document.getElementById("zoomslider").value = anondraw.collab.paint.public.zoom;	
5904if (document.getElementById("wallpapercontainer").style.backgroundImage != 'url("images/transparent.png")'){
5905document.getElementById("wallpapercontainer").style.backgroundSize = (anondraw.collab.paint.public.zoom / (window.originalzoom)) * 100 + "%";
5906} else {
5907document.getElementById("wallpapercontainer").style.backgroundSize = anondraw.collab.paint.public.zoom * 12.45 + "%";	
5908} 
5909 });
5910 
5911 
5912 //check chatside preference
5913var chatside = localStorage.getItem("chatside");
5914if (!chatside) {
5915//
5916} else if (chatside == 'right') {
5917 document.getElementsByClassName("drawtogether-info-container")[0].style.right = "0";
5918document.getElementsByClassName("drawtogether-info-container")[0].style.left = "auto";
5919document.getElementsByClassName("drawtogether-chat-container")[0].style.right = "0";
5920document.getElementsByClassName("drawtogether-chat-container")[0].style.left = "auto";
5921document.getElementsByClassName("drawtogether-paint-container")[0].style.left = "0";
5922document.getElementsByClassName("drawtogether-paint-container")[0].style.right = "auto";
5923document.getElementById('emojilist').style.right = "0";
5924document.getElementById('emojilist').style.left = "auto";
5925document.getElementById('emolist').style.right = "0";
5926document.getElementById('emolist').style.left = "auto";
5927
5928document.getElementById('bghorizontalpositionslider').style.right = "auto";
5929document.getElementById('bghorizontalpositionslider').style.left = "0";
5930document.getElementById('bgverticalpositionslider').style.right = "auto";
5931document.getElementById('bgverticalpositionslider').style.left = "0";
5932document.getElementById('canvasopacityslider').style.right = "auto";
5933document.getElementById('canvasopacityslider').style.left = "0";
5934document.getElementById('oldcanvasopacityslider').style.right = "auto";
5935document.getElementById('oldcanvasopacityslider').style.left = "0";
5936
5937document.getElementById('crossbtn').style.right = "auto";
5938document.getElementById('crossbtn').style.left = "0";
5939document.getElementById('lightbtn').style.right = "auto";
5940document.getElementById('lightbtn').style.left = "34px";
5941document.getElementById('photobtn').style.right = "auto";
5942document.getElementById('photobtn').style.left = "68px";
5943document.getElementById('bglinkbtn').style.right = "auto";
5944document.getElementById('bglinkbtn').style.left = "102px";
5945
5946document.getElementById('wide').style.right = "auto";
5947document.getElementById('wide').style.left = "0";
5948document.getElementById('wide').style.webkitTransform = 'scaleX(-1)';
5949document.getElementById('wide').style.transform = 'scaleX(-1)';
5950document.getElementById('upsidedownbtn').style.right = "auto";
5951document.getElementById('upsidedownbtn').style.left = "32px";
5952document.getElementById('mirrorbtn').style.right = "auto";
5953document.getElementById('mirrorbtn').style.left = "64px";
5954
5955anondraw.collab.paint.resize();
5956}
5957 
5958 
5959 
5960 
5961 //shift+click to placename (rest of the code is in the end, outside)
5962 document.head.insertAdjacentHTML('beforeend','<style>.drawtogether-player-name {-webkit-user-select: none;-moz-user-select: none;-khtml-user-select: none;-ms-user-select: none;}</style>');
5963 
5964 
5965 
5966//change title
5967document.title = "AnonProMod ? v1.6";
5968 
5969
5970//add pen pressure checkboxes (only works in Opera so only shows up in Opera)
5971
5972
5973
5974
5975
5976
5977//new colors
5978 document.head.insertAdjacentHTML('beforeend','<style>.control-button {background-color: rgb(90,130,152);}</style>');	// mid blue
5979 document.head.insertAdjacentHTML('beforeend','<style>.control-button:hover {background-color: rgb(39,77,99);}</style>'); //dark blue
5980  document.head.insertAdjacentHTML('beforeend','<style>.paint-selected-tool {background: hsla(210, 0%, 60%, 1)!important;}</style>');
5981 document.getElementsByClassName("drawtogether-control-container")[0].style.background = 'rgb(39,77,99)'; //dark blue
5982 document.getElementsByClassName("drawtogether-info-container")[0].style.background = 'rgb(39,77,99)'; // dark blue
5983 document.getElementsByClassName("drawtogether-chat-container")[0].style.background = 'hsla(210, 0%, 20%, 0)';
5984 document.head.insertAdjacentHTML('beforeend','<style>.drawtogether-info-playerlist .drawtogether-player {background: none;}</style>');
5985 document.head.insertAdjacentHTML('beforeend','<style>.drawtogether-info-playerlist .drawtogether-player:hover {background: hsla(211, 0%, 24%, 1);}</style>'); 
5986 document.head.insertAdjacentHTML('beforeend','<style>#newsendchatbtn {background-color: rgb(90,130,152);}</style>');  //mid blue
5987 document.head.insertAdjacentHTML('beforeend','<style>#cleanchatbtn {background-color: rgb(90,130,152);}</style>'); //mid blue
5988 document.head.insertAdjacentHTML('beforeend','<style>#newsendchatbtn:hover {background-color: rgb(39,77,99) !important;}</style>'); //dark blue	
5989 document.head.insertAdjacentHTML('beforeend','<style>#cleanchatbtn:hover {background-color: rgb(39,77,99) !important;}</style>'); //dark blue
5990
5991
5992//new buttons
5993var x = document.createElement("LINK");
5994x.href = "https://fonts.googleapis.com/icon?family=Material+Icons+Sharp";
5995x.rel = "stylesheet";
5996document.body.appendChild(x);
5997
5998document.head.insertAdjacentHTML('beforeend','<style>.control-button .material-icons-sharp{line-height: 1.0em; font-size: 1.4em; vertical-align: text-bottom;}</style>');
5999
6000document.getElementById("settingsbtn").innerHTML= '<i class="material-icons-sharp">settings_applications</i>';
6001document.getElementById("linksave").innerHTML= '<i class="material-icons-sharp">save</i>';
6002document.getElementById("referencebtn").innerHTML= '<i class="material-icons-sharp">burst_mode</i>';
6003document.getElementById("openreflabel").innerHTML= '<i class="material-icons-sharp">folder_open</i>';
6004document.getElementById("clickthroughbtn").innerHTML= '<i class="material-icons-sharp">mouse</i>';
6005document.getElementById("placeimgbtn").innerHTML= '<i class="material-icons-sharp">attach_file</i>';
6006document.getElementById("openstamplabel").innerHTML= '<i class="material-icons-sharp">folder_open</i>';
6007document.getElementById("attachelementbtn").innerHTML= '<i class="material-icons-sharp">play_circle_outline</i>';
6008document.getElementById("placetxtbtn").innerHTML= '<i class="material-icons-sharp">text_format</i>';
6009document.getElementById("attachtextartbtn").innerHTML= '<i class="material-icons-sharp">play_circle_outline</i>';
6010document.getElementById("chatbtn").innerHTML= '<i class="material-icons-sharp">chat</i>';
6011document.getElementById("spawnbtn").innerHTML= '<i class="material-icons-sharp">home</i>';
6012document.getElementById("anchorbtn").innerHTML= '<i class="material-icons-sharp">my_location</i>';
6013document.getElementById("setanchorbtn").innerHTML= '<i class="material-icons-sharp">play_circle_outline</i>';
6014document.getElementById("randombtn").innerHTML= '<i class="material-icons-sharp">shuffle</i>';
6015document.getElementById("favoritesbtn").innerHTML= '<i class="material-icons-sharp">favorite</i>';
6016document.getElementById("regionsbtn").innerHTML= '<i class="material-icons-sharp">texture</i>';
6017document.getElementById("movebtn").innerHTML= '<i class="material-icons-sharp">open_with</i>';
6018document.getElementById("textbtn").innerHTML= '<i class="material-icons-sharp">text_fields</i>';
6019document.getElementById("selectbtn").innerHTML= '<i class="material-icons-sharp">tab_unselected</i>';
6020document.getElementById("undobtn").innerHTML= '<i class="material-icons-sharp">undo</i>';
6021document.getElementById("brushbtn").innerHTML= '<i class="material-icons-sharp">brush</i>';
6022document.getElementById("linebtn").style.fontWeight = '800';
6023document.getElementById("circlebtn").innerHTML= '<i class="material-icons-sharp">panorama_fish_eye</i>';
6024document.getElementById("submitellipsebtn").innerHTML= '<i class="material-icons-sharp">play_circle_outline</i>';
6025document.getElementById("pickerbtn").innerHTML= '<i class="material-icons-sharp">colorize</i>';
6026document.getElementById("perspectivebtn").innerHTML= '<i class="material-icons-sharp">share</i>';
6027document.getElementById("setperspectivebtn").innerHTML= '<i class="material-icons-sharp">play_circle_outline</i>';
6028document.getElementById("rulerbtn").innerHTML= '<i class="material-icons-sharp">grid_on</i>';
6029document.getElementById("minuszoombtn").innerHTML= '<i class="material-icons-sharp">zoom_out</i>';
6030document.getElementById("defaultzoombtn").innerHTML= '<i class="material-icons-sharp">find_replace</i>';
6031document.getElementById("pluszoombtn").innerHTML= '<i class="material-icons-sharp">zoom_in</i>';
6032document.getElementById("zoombtn").innerHTML= '<i class="material-icons-sharp">image_search</i>';
6033document.getElementById("setanchorbtn").innerHTML= '<i class="material-icons-sharp">play_circle_outline</i>';
6034
6035
6036document.getElementById("crossbtn").innerHTML= '<i class="material-icons-sharp">games</i>';
6037document.getElementById("lightbtn").innerHTML= '<i class="material-icons-sharp">wb_incandescent</i>';
6038document.getElementById("photobtn").innerHTML= '<i class="material-icons-sharp">photo_camera</i>';
6039document.getElementById("bglinkbtn").innerHTML= '<i class="material-icons-sharp">insert_link</i>';
6040document.getElementById("crossbtn").style.lineHeight = '0.5em';
6041document.getElementById("lightbtn").style.lineHeight = '0.5em';
6042document.getElementById("photobtn").style.lineHeight = '0.5em';
6043document.getElementById("bglinkbtn").style.lineHeight = '0.5em';
6044
6045document.head.insertAdjacentHTML('beforeend','<style>.x-button {color: white !important;}</style>');
6046
6047document.getElementById("colorsBbtn").style.background = '#e6e6e6';
6048document.getElementById("colorsBbtn").style.border = '0';
6049
6050document.head.insertAdjacentHTML('beforeend','<style>.activated {background: hsla(208, 25%, 50%, 0.8)!important;}</style>');
6051
6052var body = document.getElementsByClassName("drawtogether-control-container")[0];
6053body.insertBefore(document.getElementById("favoritesbtn"), document.getElementById("anchorbtn"));
6054body.insertBefore(document.getElementById("regionsbtn"), document.getElementById("favoritesbtn"));
6055body.insertBefore(document.getElementById("textbtn"),document.getElementById("placetxtbtn"));
6056body.insertBefore(document.getElementById("zoombtn"), document.getElementById("selectbtn"));
6057document.getElementById("zoombtn").style.margin='0';
6058body.insertBefore(document.getElementById("perspectivebtn"), document.getElementById("undobtn"));
6059
6060body.insertBefore(document.getElementById("ppointAbtn"), document.getElementById("undobtn"));
6061body.insertBefore(document.getElementById("ppointBbtn"), document.getElementById("undobtn"));
6062body.insertBefore(document.getElementById("ppointCbtn"), document.getElementById("undobtn"));
6063
6064body.insertBefore(document.getElementById("setperspectivebtn"), document.getElementById("undobtn"));
6065body.insertBefore(document.getElementById("rulerbtn"), document.getElementById("undobtn"));
6066body.insertBefore(document.getElementById("rulerslider"), document.getElementById("undobtn"));
6067document.getElementById("perspectivebtn").style.margin='0';
6068body.insertBefore(document.getElementById("fontsize"), document.getElementById("txtlin"));
6069
6070
6071document.getElementById("chatsizebtn").innerHTML= '<i class="material-icons-sharp">keyboard_arrow_down</i>';
6072document.getElementById("ghostbtn").innerHTML= '<i class="material-icons-sharp">opacity</i>';
6073document.getElementById("namesdisplaybtn").innerHTML= '<i class="material-icons-sharp">account_box</i>';
6074document.getElementById("emojibtn").innerHTML= '<i class="material-icons-sharp">sentiment_satisfied</i>';
6075document.getElementById("emobtn").innerHTML= '<i class="material-icons-sharp">face</i>';
6076document.getElementById("colorsbtn").innerHTML= '<i class="material-icons-sharp">color_lens</i>';
6077document.getElementById("spotbtn").innerHTML= '<i class="material-icons-sharp">where_to_vote</i>';
6078document.getElementById("xxxspotbtn").innerHTML= '<i class="material-icons-sharp">room</i>';
6079document.getElementById("botdisplaybtn").innerHTML= '<i class="material-icons-sharp">android</i>';
6080document.getElementById("akabtn").innerHTML= '<i class="material-icons-sharp">notifications_none</i>';
6081document.getElementById("filterbtn").innerHTML= '<i class="material-icons-sharp">search</i>';
6082document.getElementById("backgroundurlbtn").innerHTML= '<i class="material-icons-sharp">insert_link</i>';
6083document.getElementById("screenshotbtn").innerHTML= '<i class="material-icons-sharp">linked_camera</i>';
6084document.getElementById("nsfwbtn").innerHTML= '<i class="material-icons-sharp">error</i>';
6085document.getElementById("afkbtn").innerHTML= '<i class="material-icons-sharp">schedule</i>';
6086document.getElementById("brbbtn").innerHTML= '<i class="material-icons-sharp">timer</i>';
6087
6088document.getElementById("newsendchatbtn").innerHTML= '<i class="material-icons-sharp" style="color: #6fd800;">done_outline</i>';
6089document.getElementById("cleanchatbtn").innerHTML= '<i class="material-icons-sharp">backspace</i>';
6090
6091
6092document.head.insertAdjacentHTML('beforeend','<style>.drawtogether-chat-container .control-button .material-icons-sharp {line-height:1.4em !important; font-size: 1.4em !important;}</style>');
6093
6094document.getElementsByClassName("sp-preview")[0].style.border = '2px solid hsla(210, 0%, 40%, 1)';
6095
6096
6097
6098//remove old and new screenshots since now both are the same
6099document.getElementsByClassName("drawtogether-chat-container")[0].removeChild(document.getElementById("newbtn"));
6100document.getElementsByClassName("drawtogether-chat-container")[0].removeChild(document.getElementById("oldbtn"));
6101
6102
6103//add label to replace previous checkboxes
6104 var ppointCbtnlabel = document.createElement("LABEL");
6105  ppointCbtnlabel.style.display = 'none';
6106  ppointCbtnlabel.innerHTML = '<i class="material-icons-sharp">check_box_outline_blank</i>';
6107
6108  ppointCbtnlabel.style.textAlign = 'center';
6109  ppointCbtnlabel.style.verticalAlign = 'bottom';
6110  ppointCbtnlabel.style.marginLeft = '7px';
6111  ppointCbtnlabel.id = 'ppointCbtnlabel';  
6112  ppointCbtnlabel.htmlFor = 'ppointCbtn';  
6113  ppointCbtnlabel.className = "control-button";
6114  ppointCbtnlabel.style.margin = "0";
6115  ppointCbtnlabel.style.borderRadius = "0";
6116  ppointCbtnlabel.style.padding = "0";
6117  ppointCbtnlabel.style.borderBottom = "0";
6118  var body = document.getElementsByClassName("drawtogether-control-container")[0];
6119  body.insertBefore(ppointCbtnlabel, body.childNodes[37]);
6120  
6121 document.getElementById("ppointCbtn").addEventListener('change', function(event) {	
6122if (document.getElementById("ppointCbtn").checked){
6123ppointCbtnlabel.innerHTML = '<i class="material-icons-sharp">check_box</i>';	
6124ppointAbtnlabel.innerHTML = '<i class="material-icons-sharp">check_box_outline_blank</i>';
6125ppointBbtnlabel.innerHTML = '<i class="material-icons-sharp">check_box_outline_blank</i>';
6126} else {
6127ppointCbtnlabel.innerHTML = '<i class="material-icons-sharp">check_box_outline_blank</i>';	
6128}
6129}); 
6130
6131
6132var ppointBbtnlabel = document.createElement("LABEL");
6133  ppointBbtnlabel.style.display = 'none';
6134  ppointBbtnlabel.innerHTML = '<i class="material-icons-sharp">check_box_outline_blank</i>';
6135
6136  ppointBbtnlabel.style.textAlign = 'center';
6137  ppointBbtnlabel.style.verticalAlign = 'bottom';
6138  ppointBbtnlabel.style.marginLeft = '7px';
6139  ppointBbtnlabel.id = 'ppointBbtnlabel';  
6140  ppointBbtnlabel.htmlFor = 'ppointBbtn';  
6141  ppointBbtnlabel.className = "control-button";
6142  ppointBbtnlabel.style.margin = "0";
6143  ppointBbtnlabel.style.borderRadius = "0";
6144  ppointBbtnlabel.style.padding = "0";
6145  ppointBbtnlabel.style.borderBottom = "0";
6146  var body = document.getElementsByClassName("drawtogether-control-container")[0];
6147  body.insertBefore(ppointBbtnlabel, body.childNodes[37]);
6148 document.getElementById("ppointBbtn").addEventListener('change', function(event) {	
6149if (document.getElementById("ppointBbtn").checked){
6150ppointBbtnlabel.innerHTML = '<i class="material-icons-sharp">check_box</i>';
6151ppointAbtnlabel.innerHTML = '<i class="material-icons-sharp">check_box_outline_blank</i>';	
6152ppointCbtnlabel.innerHTML = '<i class="material-icons-sharp">check_box_outline_blank</i>';
6153} else {
6154ppointBbtnlabel.innerHTML = '<i class="material-icons-sharp">check_box_outline_blank</i>';	
6155}
6156}); 
6157
6158  var ppointAbtnlabel = document.createElement("LABEL");
6159  ppointAbtnlabel.style.display = 'none';
6160  ppointAbtnlabel.innerHTML = '<i class="material-icons-sharp">check_box</i>';
6161
6162  ppointAbtnlabel.style.textAlign = 'center';
6163  ppointAbtnlabel.style.verticalAlign = 'bottom';
6164  ppointAbtnlabel.style.marginLeft = '7px';
6165  ppointAbtnlabel.id = 'ppointAbtnlabel';  
6166  ppointAbtnlabel.htmlFor = 'ppointAbtn';  
6167  ppointAbtnlabel.className = "control-button";
6168  ppointAbtnlabel.style.margin = "0";
6169  ppointAbtnlabel.style.borderRadius = "0";
6170  ppointAbtnlabel.style.padding = "0";
6171  ppointAbtnlabel.style.borderBottom = "0";
6172  var body = document.getElementsByClassName("drawtogether-control-container")[0];
6173  body.insertBefore(ppointAbtnlabel, body.childNodes[37]);
6174 document.getElementById("ppointAbtn").addEventListener('change', function(event) {	
6175if (document.getElementById("ppointAbtn").checked){
6176ppointAbtnlabel.innerHTML = '<i class="material-icons-sharp">check_box</i>';
6177ppointBbtnlabel.innerHTML = '<i class="material-icons-sharp">check_box_outline_blank</i>';
6178ppointCbtnlabel.innerHTML = '<i class="material-icons-sharp">check_box_outline_blank</i>';	
6179} else {
6180ppointAbtnlabel.innerHTML = '<i class="material-icons-sharp">check_box_outline_blank</i>';	
6181}
6182}); 
6183
6184var perspectivepointA = localStorage.getItem("perspectivepointA");
6185var perspectivepointB = localStorage.getItem("perspectivepointB");
6186var perspectivepointC = localStorage.getItem("perspectivepointC");
6187if (perspectivepointA !== null){
6188document.getElementById("ppointAbtnlabel").title = perspectivepointA;
6189}
6190if (perspectivepointB !== null){
6191document.getElementById("ppointBbtnlabel").title = perspectivepointB;
6192}
6193if (perspectivepointC !== null){
6194document.getElementById("ppointCbtnlabel").title = perspectivepointC;
6195}
6196
6197
6198
6199
6200 var txtlinlabel = document.createElement("LABEL");
6201  txtlinlabel.style.display = 'none';
6202  txtlinlabel.innerHTML = '<i class="material-icons-sharp">check_box_outline_blank</i>';
6203txtlinlabel.title = 'fill with lines'; 
6204  txtlinlabel.style.textAlign = 'center';
6205  txtlinlabel.style.verticalAlign = 'bottom';
6206  txtlinlabel.style.marginLeft = '7px';
6207  txtlinlabel.id = 'txtlinlabel';  
6208  txtlinlabel.htmlFor = 'txtlin';  
6209  txtlinlabel.className = "control-button";
6210  txtlinlabel.style.margin = "0";
6211  txtlinlabel.style.borderRadius = "0";
6212  txtlinlabel.style.padding = "0";
6213  txtlinlabel.style.borderBottom = "0";
6214  var body = document.getElementsByClassName("drawtogether-control-container")[0];
6215  body.insertBefore(txtlinlabel, body.childNodes[24]);
6216  
6217  
6218  
6219  
6220  
6221   var attachfilllabel = document.createElement("LABEL");
6222  attachfilllabel.style.display = 'none';
6223  attachfilllabel.innerHTML = '<i class="material-icons-sharp">check_box_outline_blank</i>';
6224attachfilllabel.title = 'fill with lines'; 
6225  attachfilllabel.style.textAlign = 'center';
6226  attachfilllabel.style.verticalAlign = 'bottom';
6227  attachfilllabel.style.marginLeft = '7px';
6228  attachfilllabel.id = 'attachfilllabel';  
6229  attachfilllabel.htmlFor = 'lin';  
6230  attachfilllabel.className = "control-button";
6231  attachfilllabel.style.margin = "0";
6232  attachfilllabel.style.borderRadius = "0";
6233  attachfilllabel.style.padding = "0";
6234  attachfilllabel.style.borderBottom = "0";
6235  var body = document.getElementsByClassName("drawtogether-control-container")[0];
6236  body.insertBefore(attachfilllabel, body.childNodes[14]);
6237     
6238  
6239   var attachinvertlabel = document.createElement("LABEL");
6240  attachinvertlabel.style.display = 'none';
6241  attachinvertlabel.innerHTML = '<i class="material-icons-sharp">check_box_outline_blank</i>';
6242attachinvertlabel.title = 'invert colors'; 
6243  attachinvertlabel.style.textAlign = 'center';
6244  attachinvertlabel.style.verticalAlign = 'bottom';
6245  attachinvertlabel.style.marginLeft = '7px';
6246  attachinvertlabel.id = 'attachinvertlabel';  
6247  attachinvertlabel.htmlFor = 'inv';  
6248  attachinvertlabel.className = "control-button";
6249  attachinvertlabel.style.margin = "0";
6250  attachinvertlabel.style.borderRadius = "0";
6251  attachinvertlabel.style.padding = "0";
6252  attachinvertlabel.style.borderBottom = "0";
6253  var body = document.getElementsByClassName("drawtogether-control-container")[0];
6254  body.insertBefore(attachinvertlabel, body.childNodes[14]);
6255
6256
6257var attachfliplabel = document.createElement("LABEL");
6258  attachfliplabel.style.display = 'none';
6259  attachfliplabel.innerHTML = '<i class="material-icons-sharp">check_box_outline_blank</i>';
6260attachfliplabel.title = 'flip horizontal'; 
6261  attachfliplabel.style.textAlign = 'center';
6262  attachfliplabel.style.verticalAlign = 'bottom';
6263  attachfliplabel.style.marginLeft = '7px';
6264  attachfliplabel.id = 'attachfliplabel';  
6265  attachfliplabel.htmlFor = 'mirror';  
6266  attachfliplabel.className = "control-button";
6267  attachfliplabel.style.margin = "0";
6268  attachfliplabel.style.borderRadius = "0";
6269  attachfliplabel.style.padding = "0";
6270  attachfliplabel.style.borderBottom = "0";
6271  var body = document.getElementsByClassName("drawtogether-control-container")[0];
6272  body.insertBefore(attachfliplabel, body.childNodes[14]);
6273
6274
6275
6276//recolor popup windows (not working) maybe because the elements are created later, dinamically
6277document.head.insertAdjacentHTML('beforeend','<style>.titlecontainer {background-color: hsla(210, 0%, 40%, 1) !important; .msettings_title_bar {background-color: hsla(210, 0%, 40%, 1) !important;} .drawtogether-button{background-color: hsla(210, 0%, 40%, 1) !important; border-bottom:0 !important} .drawtogether-button:hover{background-color: hsla(210, 0%, 20%, 1) !important; border-bottom:0 !important} .msettings_button {background-color: hsla(210, 0%, 40%, 1) !important; border-bottom:0 !important} .msettings_button:hover {background-color: hsla(210, 0%, 20%, 1) !important; border-bottom:0 !important} .gui-prompt-button {background-color: hsla(210, 0%, 40%, 1) !important; border-bottom:0 !important} .gui-prompt-button:hover {background-color: hsla(210, 0%, 20%, 1) !important; border-bottom:0 !important} .gui-prompt-option-button {background-color: hsla(210, 0%, 40%, 1) !important; border-bottom:0 !important} .gui-prompt-option-button:hover {background-color: hsla(210, 0%, 20%, 1) !important; border-bottom:0 !important}</style>');
6278
6279
6280//few buttons were missing title
6281document.getElementById("spawnbtn").title = 'Go to spawn';
6282document.getElementById("attachelementbtn").title = 'Print on canvas';
6283document.getElementById("fontsize").title = 'Font size';
6284document.getElementById("attachtextartbtn").title = 'Print on canvas';
6285document.getElementById("regionsbtn").title = 'Protected areas list';
6286document.getElementById("favoritesbtn").title = 'Favorites list';
6287
6288
6289
6290var x = document.createElement("IMG");
6291x.id = 'pastedImage';
6292x.style.display = 'none';
6293document.body.appendChild(x);
6294
6295var x = document.createElement("IMG");
6296x.id = 'imgdiv';
6297x.style.display = 'none';
6298document.body.appendChild(x);
6299
6300/* 
6301 * A javascript port of Potrace (http://potrace.sourceforge.net).
6302 * 
6303 * Licensed under the GPL
6304 * 
6305 * Usage
6306 *   loadImageFromFile(file) : load image from File API
6307 *   loadImageFromUrl(url): load image from URL
6308 *     because of the same-origin policy, can not load image from another domain.
6309 *     input color/grayscale image is simply converted to binary image. no pre-
6310 *     process is performed.
6311 * 
6312 *   setParameter({para1: value, ...}) : set parameters
6313 *     parameters:
6314 *        turnpolicy ("black" / "white" / "left" / "right" / "minority" / "majority")
6315 *          how to resolve ambiguities in path decomposition. (default: "minority")       
6316 *        turdsize
6317 *          suppress speckles of up to this size (default: 2)
6318 *        optcurve (true / false)
6319 *          turn on/off curve optimization (default: true)
6320 *        alphamax
6321 *          corner threshold parameter (default: 1)
6322 *        opttolerance 
6323 *          curve optimization tolerance (default: 0.2)
6324 *       
6325 *   process(callback) : wait for the image be loaded, then run potrace algorithm,
6326 *                       then call callback function.
6327 * 
6328 *   getSVG: getSVG(size, opt_type) : return a string of generated SVG image.
6329 *                                    result_image_size = original_image_size * size
6330 *                                    optional parameter opt_type can be "curve"
6331 */
6332window.cop = "";
6333  window.ignrange = 0;
6334  window.actualsmoo = 6 * 0.133;
6335  window.actualcomp = 10 / 10; 
6336  window.smoorange = 6; //(it was from a slider removed)
6337 
6338var Potrace = (function() {
6339
6340
6341
6342  function Point(x, y) {
6343    this.x = x;
6344    this.y = y;
6345  }
6346  
6347  Point.prototype.copy = function(){
6348    return new Point(this.x, this.y);
6349  };
6350
6351  function Bitmap(w, h) {
6352    this.w = w;
6353    this.h = h;
6354    this.size = w * h;
6355    this.arraybuffer = new ArrayBuffer(this.size);
6356    this.data = new Int8Array(this.arraybuffer);
6357  }
6358
6359  Bitmap.prototype.at = function (x, y) {
6360    return (x >= 0 && x < this.w && y >=0 && y < this.h) && 
6361        this.data[this.w * y + x] === 1;
6362  };
6363
6364  Bitmap.prototype.index = function(i) {
6365    var point = new Point();
6366    point.y = Math.floor(i / this.w);
6367    point.x = i - point.y * this.w;
6368    return point;
6369  };
6370
6371  Bitmap.prototype.flip = function(x, y) {
6372    if (this.at(x, y)) {
6373      this.data[this.w * y + x] = 0;
6374    } else {
6375      this.data[this.w * y + x] = 1;
6376    }
6377  };
6378    
6379  Bitmap.prototype.copy = function() {
6380    var bm = new Bitmap(this.w, this.h), i;
6381    for (i = 0; i < this.size; i++) {
6382      bm.data[i] = this.data[i];
6383    }
6384    return bm;
6385  };
6386
6387  function Path() {
6388    this.area = 0;
6389    this.len = 0;
6390    this.curve = {};
6391    this.pt = [];
6392    this.minX = 100000;
6393    this.minY = 100000;
6394    this.maxX= -1;
6395    this.maxY = -1;
6396  }
6397
6398  function Curve(n) {
6399    this.n = n;
6400    this.tag = new Array(n);
6401    this.c = new Array(n * 3);
6402    this.alphaCurve = 0;
6403    this.vertex = new Array(n);
6404    this.alpha = new Array(n);
6405    this.alpha0 = new Array(n);
6406    this.beta = new Array(n);
6407  }
6408
6409  var imgElement = document.createElement("img"),
6410      imgCanvas = document.createElement("canvas"),
6411      bm = null,
6412      pathlist = [],
6413      callback,
6414      info = {
6415        isReady: false,
6416        turnpolicy: "minority", 
6417        turdsize: ignrange,
6418        optcurve: true,
6419        alphamax: actualsmoo,
6420        opttolerance: actualcomp
6421      };
6422	  
6423
6424
6425
6426  imgElement.onload = function() {
6427  
6428if (window.loading == 1) { 
6429window.loading = 0;
6430if (document.getElementById('txtlin').checked) {
6431var smoorange = "0"; 
6432window.actualsmoo = smoorange * 0.133;
6433}
6434loadCanvasB();
6435} else {
6436	if (document.getElementById('lin').checked) {
6437var smoorange = "0";  
6438window.actualsmoo = smoorange * 0.133;	
6439	}
6440    loadCanvas();
6441	}
6442    loadBm();
6443  };
6444
6445  function loadImageFromFile(file) {
6446    if (info.isReady) {
6447      clear();
6448    }
6449    imgElement.file = file;
6450    var reader = new FileReader();
6451    reader.onload = (function(aImg) {
6452      return function(e) {
6453	  
6454var path = window.location.pathname;
6455var page = path.split("/").pop();
6456
6457        aImg.src = e.target.result;
6458 	  
6459
6460		
6461      };
6462    })(imgElement);
6463    reader.readAsDataURL(file);
6464  }
6465  
6466  function loadImageFromUrl(url) {
6467    if (info.isReady) {
6468      clear();
6469    }
6470	if (url == "https://i.imgur.com/jigW8rp.png"){
6471	window.loading = 1;
6472	}
6473	
6474var path = window.location.pathname;
6475var page = path.split("/").pop();
6476	
6477
6478imgElement.src = url;
6479
6480    
6481  }
6482  
6483  function setParameter(obj) {
6484   var key;
6485   for (key in obj) {
6486     if (obj.hasOwnProperty(key)) {
6487       info[key] = obj[key];
6488     }
6489    }
6490  }
6491  
6492  function loadCanvas() {
6493	  
6494	  
6495if (imgElement.naturalWidth > screen.width || imgElement.naturalHeight > screen.height) {
6496
6497var howlongw = imgElement.naturalWidth - screen.width;
6498var howlongh = imgElement.naturalHeight - screen.height;
6499
6500	
6501if (howlongw > howlongh) {
6502var howmuch = screen.width / imgElement.naturalWidth;
6503
6504    imgCanvas.width = howmuch * imgElement.naturalWidth;
6505    imgCanvas.height = howmuch * imgElement.naturalHeight;
6506    var ctx = imgCanvas.getContext('2d');
6507	ctx.clearRect(0, 0, howmuch * imgElement.naturalWidth, howmuch * imgElement.naturalHeight);
6508} else {
6509var howmuch = screen.height / imgElement.naturalHeight;  
6510
6511    imgCanvas.width = howmuch * imgElement.naturalWidth;
6512    imgCanvas.height = howmuch * imgElement.naturalHeight;
6513    var ctx = imgCanvas.getContext('2d');
6514	ctx.clearRect(0, 0, howmuch * imgElement.naturalWidth, howmuch * imgElement.naturalHeight);
6515}} else {
6516var howmuch = "1";  
6517    imgCanvas.width = imgElement.naturalWidth;
6518    imgCanvas.height = imgElement.naturalHeight;
6519    var ctx = imgCanvas.getContext('2d');
6520	ctx.clearRect(0, 0, imgElement.naturalWidth, imgElement.naturalHeight);
6521}
6522
6523
6524
6525
6526
6527
6528ctx.beginPath();
6529ctx.rect(0, 0, imgElement.naturalWidth, imgElement.naturalHeight);
6530ctx.fillStyle = "white";
6531ctx.fill();
6532
6533
6534    ctx.drawImage(imgElement, 0, 0, howmuch * imgElement.naturalWidth, howmuch * imgElement.naturalHeight);
6535
6536
6537var oneofthree = ctx.getImageData(0,howmuch * imgElement.naturalHeight -1,1,howmuch * imgElement.naturalHeight).data;
6538var twoofthree = ctx.getImageData(1,howmuch * imgElement.naturalHeight -1,2,howmuch * imgElement.naturalHeight).data;
6539var threeofthree = ctx.getImageData(2,howmuch * imgElement.naturalHeight -1,3,howmuch * imgElement.naturalHeight).data;
6540var outsideofthree = ctx.getImageData(0,howmuch * imgElement.naturalHeight -2,1,howmuch * imgElement.naturalHeight -1).data;
6541
6542var theperfectmatch = "255002550255025500255255";
6543
6544var picturematch = "" + oneofthree[0] + oneofthree[1] + oneofthree[2] + oneofthree[3] + twoofthree[0] + twoofthree[1] + twoofthree[2] + twoofthree[3] + threeofthree[0] + threeofthree[1] + threeofthree[2] + threeofthree[3];
6545
6546if(document.getElementById('mirror').checked) {
6547ctx.clearRect(imgElement, 0, 0, imgCanvas.width, imgCanvas.height);	
6548ctx.translate(imgCanvas.width, 0);
6549ctx.scale(-1, 1);
6550
6551ctx.drawImage(imgElement, 0, 0, howmuch * imgElement.naturalWidth, howmuch * imgElement.naturalHeight);
6552}
6553
6554if (picturematch == theperfectmatch) {
6555
6556ctx.clearRect(imgElement, 0, 0, howmuch * imgElement.naturalWidth, howmuch * imgElement.naturalHeight);
6557
6558ctx.drawImage(imgElement, -3, 0, howmuch * imgElement.naturalWidth, howmuch * imgElement.naturalHeight);
6559ctx.drawImage(imgElement, howmuch * imgElement.naturalWidth -3, 0, howmuch * imgElement.naturalWidth, howmuch * imgElement.naturalHeight);
6560
6561
6562//covering the 3 rgb offset pixel (from chromium clipboard) with outside color
6563ctx.fillStyle = 'rgb(' + outsideofthree[0] + ', ' + outsideofthree[1] + ', ' + outsideofthree[3] + ')';
6564ctx.fillRect(howmuch * imgElement.naturalWidth -3,howmuch * imgElement.naturalHeight -1, howmuch * imgElement.naturalWidth, howmuch * imgElement.naturalHeight);
6565
6566//alert('rgb(' + outsideofthree[0] + ', ' + outsideofthree[1] + ', ' + outsideofthree[3] + ')');
6567}
6568
6569
6570	
6571
6572if(document.getElementById('inv').checked) {
6573	
6574var imgData = ctx.getImageData(0, 0, howmuch * imgElement.naturalWidth, howmuch * imgElement.naturalHeight);
6575
6576// invert colors
6577var i;
6578for (i = 0; i < imgData.data.length; i += 4) {
6579  imgData.data[i] = 255-imgData.data[i];
6580  imgData.data[i + 1] = 255-imgData.data[i + 1];
6581  imgData.data[i + 2] = 255-imgData.data[i + 2];
6582  imgData.data[i + 3] = 255;
6583}
6584
6585ctx.putImageData(imgData, 0, 0);	
6586	
6587}	
6588
6589
6590	
6591if(document.getElementById('lin').checked) {
6592
6593
6594  var pimg = document.getElementById("textpattern");
6595  var pat = ctx.createPattern(pimg, "repeat");
6596  ctx.rect(0, 0, imgElement.naturalWidth, imgElement.naturalHeight);
6597  ctx.fillStyle = pat;
6598  ctx.fill();
6599
6600}	
6601	
6602}
6603  
6604 
6605    function loadCanvasB() {
6606var sizeclean = document.getElementById("fontsize").value;
6607	
6608	
6609    imgCanvas.height = sizeclean * 1.4;	
6610
6611	
6612	//imgCanvas.width = '140';
6613	
6614	var fontselector = document.getElementById("fontselector");
6615	var currentfont = fontselector.value;
6616	
6617
6618
6619var ctx = imgCanvas.getContext('2d');
6620
6621if (window.currentValue1 !== false) {
6622var italictext = 'italic';
6623} else {
6624var italictext = 'normal';
6625}
6626
6627if (window.currentValue2 !== false) {
6628var boldtext = 'bold';
6629} else {
6630var boldtext = 'normal';
6631}
6632
6633
6634var sizepx = " " + document.getElementById("fontsize").value + "px ";
6635	
6636ctx.font=italictext + " " + boldtext + sizepx + currentfont;
6637var thefontsize = sizepx;
6638	
6639
6640	var txtA = document.getElementById("textartarea").value;
6641
6642
6643
6644imgCanvas.width = ctx.measureText(txtA).width;
6645
6646
6647if (imgCanvas.width > screen.width) {
6648imgCanvas.width = screen.width;
6649
6650}
6651    
6652window.globalwidth = imgCanvas.width;
6653window.globalheight = imgCanvas.height;
6654
6655
6656if (window.currentValue1 !== false) {
6657var italictext = 'italic';
6658} else {
6659var italictext = 'normal';
6660}
6661
6662if (window.currentValue2 !== false) {
6663var boldtext = 'bold';
6664} else {
6665var boldtext = 'normal';
6666}
6667	
6668ctx.font=italictext + " " + boldtext + thefontsize + currentfont;
6669
6670
6671var inthemiddle = Math.round(imgCanvas.width/2);
6672
6673
6674var vmiddle1 = Math.round(sizeclean * 0.9);
6675var vmiddle2 = Math.round(imgCanvas.height - (sizeclean/2));
6676
6677
6678ctx.beginPath();
6679ctx.rect(0, 0, imgCanvas.width, imgCanvas.height);
6680ctx.fillStyle = "white";
6681ctx.fill();
6682
6683ctx.fillStyle = "black";
6684	ctx.textAlign = "center"; 
6685	
6686    ctx.fillText(txtA, inthemiddle, vmiddle1);
6687
6688
6689
6690if(document.getElementById('inv').checked) {
6691	
6692var imgData = ctx.getImageData(0, 0, imgCanvas.width, imgCanvas.height);
6693
6694// invert colors
6695var i;
6696for (i = 0; i < imgData.data.length; i += 4) {
6697  imgData.data[i] = 255-imgData.data[i];
6698  imgData.data[i + 1] = 255-imgData.data[i + 1];
6699  imgData.data[i + 2] = 255-imgData.data[i + 2];
6700  imgData.data[i + 3] = 255;
6701}
6702
6703ctx.putImageData(imgData, 0, 0);	
6704	
6705}	
6706
6707if(document.getElementById('txtlin').checked) {
6708
6709  var pimg = document.getElementById("textpattern");
6710  var pat = ctx.createPattern(pimg, "repeat");
6711  ctx.rect(0, 0, imgElement.naturalWidth, imgElement.naturalHeight);
6712  ctx.fillStyle = pat;
6713  ctx.fill();
6714
6715}
6716
6717
6718  }
6719  
6720  
6721  function loadBm() {
6722    var ctx = imgCanvas.getContext('2d');
6723    bm = new Bitmap(imgCanvas.width, imgCanvas.height);
6724    var imgdataobj = ctx.getImageData(0, 0, bm.w, bm.h);
6725    var l = imgdataobj.data.length, i, j, color;
6726    for (i = 0, j = 0; i < l; i += 4, j++) {
6727      color = 0.2126 * imgdataobj.data[i] + 0.7153 * imgdataobj.data[i + 1] +
6728          0.0721 * imgdataobj.data[i + 2];
6729      bm.data[j] = (color < 128 ? 1 : 0);
6730    }
6731    info.isReady = true;
6732  }
6733  
6734
6735  
6736  
6737  function bmToPathlist() {
6738  
6739    var bm1 = bm.copy(),
6740      currentPoint = new Point(0, 0),
6741      path;
6742    
6743    function findNext(point) {
6744      var i = bm1.w * point.y + point.x;
6745      while (i < bm1.size && bm1.data[i] !== 1) {
6746        i++;
6747      }
6748      return i < bm1.size && bm1.index(i);
6749    }
6750    
6751    function majority(x, y) {
6752      var i, a, ct;
6753      for (i = 2; i < 5; i++) {
6754        ct = 0;
6755        for (a = -i + 1; a <= i - 1; a++) {
6756          ct += bm1.at(x + a, y + i - 1) ? 1 : -1;
6757          ct += bm1.at(x + i - 1, y + a - 1) ? 1 : -1;
6758          ct += bm1.at(x + a - 1, y - i) ? 1 : -1;
6759          ct += bm1.at(x - i, y + a) ? 1 : -1;
6760        }
6761        if (ct > 0) {
6762          return 1;
6763        } else if (ct < 0) {
6764          return 0;
6765        }
6766      }
6767      return 0;
6768    }
6769    
6770    function findPath(point) {
6771      var path = new Path(),
6772        x = point.x, y = point.y,
6773        dirx = 0, diry = 1, tmp;
6774      
6775      path.sign = bm.at(point.x, point.y) ? "+" : "-";
6776      
6777      while (1) {
6778        path.pt.push(new Point(x, y));
6779        if (x > path.maxX)
6780          path.maxX = x;
6781        if (x < path.minX)
6782          path.minX = x;
6783        if (y > path.maxY)
6784          path.maxY = y;
6785        if (y < path.minY)
6786          path.minY = y;
6787        path.len++;
6788        
6789        x += dirx;
6790        y += diry;
6791        path.area -= x * diry;
6792        
6793        if (x === point.x && y === point.y)
6794          break;
6795        
6796        var l = bm1.at(x + (dirx + diry - 1 ) / 2, y + (diry - dirx - 1) / 2);
6797        var r = bm1.at(x + (dirx - diry - 1) / 2, y + (diry + dirx - 1) / 2);
6798        
6799        if (r && !l) {
6800          if (info.turnpolicy === "right" ||
6801          (info.turnpolicy === "black" && path.sign === '+') ||
6802          (info.turnpolicy === "white" && path.sign === '-') ||
6803          (info.turnpolicy === "majority" && majority(x, y)) ||
6804          (info.turnpolicy === "minority" && !majority(x, y))) {
6805            tmp = dirx;
6806            dirx = -diry;
6807            diry = tmp;
6808          } else {
6809            tmp = dirx;
6810            dirx = diry;
6811            diry = -tmp;
6812          }
6813        } else if (r) {
6814          tmp = dirx;
6815          dirx = -diry;
6816          diry = tmp;
6817        } else if (!l) {
6818          tmp = dirx;
6819          dirx = diry;
6820          diry = -tmp;
6821        }
6822      }
6823      return path;
6824    }
6825    
6826    function xorPath(path){
6827      var y1 = path.pt[0].y,
6828        len = path.len,
6829        x, y, maxX, minY, i, j;
6830      for (i = 1; i < len; i++) {
6831        x = path.pt[i].x;
6832        y = path.pt[i].y;
6833        
6834        if (y !== y1) {
6835          minY = y1 < y ? y1 : y;
6836          maxX = path.maxX;
6837          for (j = x; j < maxX; j++) {
6838            bm1.flip(j, minY);
6839          }
6840          y1 = y;
6841        }
6842      }
6843      
6844    }
6845    
6846    while (currentPoint = findNext(currentPoint)) {
6847
6848      path = findPath(currentPoint);
6849      
6850      xorPath(path);
6851      
6852      if (path.area > ignrange) {
6853        pathlist.push(path);
6854      }
6855    }
6856    
6857  }
6858  
6859
6860  function processPath() {
6861  
6862    function Quad() {
6863      this.data = [0,0,0,0,0,0,0,0,0];
6864    }
6865
6866    Quad.prototype.at = function(x, y) {
6867      return this.data[x * 3 + y];
6868    };
6869    
6870    function Sum(x, y, xy, x2, y2) {
6871      this.x = x;
6872      this.y = y;
6873      this.xy = xy;
6874      this.x2 = x2;
6875      this.y2 = y2;
6876    }
6877    
6878    function mod(a, n) {
6879        return a >= n ? a % n : a>=0 ? a : n-1-(-1-a) % n;
6880    }
6881  
6882    function xprod(p1, p2) {
6883      return p1.x * p2.y - p1.y * p2.x;
6884    }
6885    
6886    function cyclic(a, b, c) {
6887      if (a <= c) {
6888        return (a <= b && b < c);
6889      } else {
6890        return (a <= b || b < c);
6891      }
6892    }
6893      
6894    function sign(i) {
6895      return i > 0 ? 1 : i < 0 ? -1 : 0;
6896    }
6897    
6898    function quadform(Q, w) {
6899      var v = new Array(3), i, j, sum;
6900    
6901      v[0] = w.x;
6902      v[1] = w.y;
6903      v[2] = 1;
6904      sum = 0.0;
6905    
6906      for (i=0; i<3; i++) {
6907        for (j=0; j<3; j++) {
6908          sum += v[i] * Q.at(i, j) * v[j];
6909        }
6910      }
6911      return sum;
6912    }
6913  
6914    function interval(lambda, a, b) {
6915      var res = new Point();
6916    
6917      res.x = a.x + lambda * (b.x - a.x);
6918      res.y = a.y + lambda * (b.y - a.y);
6919      return res;
6920    }
6921    
6922    function dorth_infty(p0, p2) {
6923      var r = new Point();
6924      
6925      r.y = sign(p2.x - p0.x);
6926      r.x = -sign(p2.y - p0.y);
6927    
6928      return r;
6929    }
6930    
6931    function ddenom(p0, p2) {
6932      var r = dorth_infty(p0, p2);
6933    
6934      return r.y * (p2.x - p0.x) - r.x * (p2.y - p0.y);
6935    }
6936    
6937    function dpara(p0, p1, p2) {
6938      var x1, y1, x2, y2;
6939    
6940      x1 = p1.x - p0.x;
6941      y1 = p1.y - p0.y;
6942      x2 = p2.x - p0.x;
6943      y2 = p2.y - p0.y;
6944    
6945      return x1 * y2 - x2 * y1;
6946    }
6947    
6948    function cprod(p0, p1, p2, p3) {
6949      var x1, y1, x2, y2;
6950    
6951      x1 = p1.x - p0.x;
6952      y1 = p1.y - p0.y;
6953      x2 = p3.x - p2.x;
6954      y2 = p3.y - p2.y;
6955    
6956      return x1 * y2 - x2 * y1;
6957    }
6958      
6959    function iprod(p0, p1, p2) {
6960      var x1, y1, x2, y2;
6961    
6962      x1 = p1.x - p0.x;
6963      y1 = p1.y - p0.y;
6964      x2 = p2.x - p0.x;
6965      y2 = p2.y - p0.y;
6966    
6967      return x1*x2 + y1*y2;
6968    }
6969      
6970    function iprod1(p0, p1, p2, p3) {
6971      var x1, y1, x2, y2;
6972    
6973      x1 = p1.x - p0.x;
6974      y1 = p1.y - p0.y;
6975      x2 = p3.x - p2.x;
6976      y2 = p3.y - p2.y;
6977    
6978      return x1 * x2 + y1 * y2;
6979    }
6980    
6981    function ddist(p, q) {
6982      return Math.sqrt((p.x - q.x) * (p.x - q.x) + (p.y - q.y) * (p.y - q.y));
6983    }
6984    
6985    function bezier(t, p0, p1, p2, p3) {
6986      var s = 1 - t, res = new Point();
6987    
6988      res.x = s*s*s*p0.x + 3*(s*s*t)*p1.x + 3*(t*t*s)*p2.x + t*t*t*p3.x;
6989      res.y = s*s*s*p0.y + 3*(s*s*t)*p1.y + 3*(t*t*s)*p2.y + t*t*t*p3.y;
6990    
6991      return res;
6992    }
6993  
6994    function tangent(p0, p1, p2, p3, q0, q1) {
6995      var A, B, C, a, b, c, d, s, r1, r2;
6996    
6997      A = cprod(p0, p1, q0, q1);
6998      B = cprod(p1, p2, q0, q1);
6999      C = cprod(p2, p3, q0, q1);
7000    
7001      a = A - 2 * B + C;
7002      b = -2 * A + 2 * B;
7003      c = A;
7004      
7005      d = b * b - 4 * a * c;
7006    
7007      if (a===0 || d<0) {
7008        return -1.0;
7009      }
7010    
7011      s = Math.sqrt(d);
7012    
7013      r1 = (-b + s) / (2 * a);
7014      r2 = (-b - s) / (2 * a);
7015    
7016      if (r1 >= 0 && r1 <= 1) {
7017        return r1;
7018      } else if (r2 >= 0 && r2 <= 1) {
7019        return r2;
7020      } else {
7021        return -1.0;
7022      }
7023    }
7024    
7025    function calcSums(path) {
7026      var i, x, y;
7027      path.x0 = path.pt[0].x;
7028      path.y0 = path.pt[0].y;
7029      
7030      path.sums = [];
7031      var s = path.sums;
7032      s.push(new Sum(0, 0, 0, 0, 0));
7033      for(i = 0; i < path.len; i++){
7034        x = path.pt[i].x - path.x0;
7035        y = path.pt[i].y - path.y0;
7036        s.push(new Sum(s[i].x + x, s[i].y + y, s[i].xy + x * y,
7037            s[i].x2 + x * x, s[i].y2 + y * y));
7038      }
7039    }
7040   
7041    function calcLon(path) {
7042      
7043      var n = path.len, pt = path.pt, dir,
7044        pivk = new Array(n),
7045        nc = new Array(n),
7046        ct = new Array(4);
7047      path.lon = new Array(n);
7048      
7049      var constraint = [new Point(), new Point()],
7050          cur = new Point(),
7051          off = new Point(),
7052          dk = new Point(),
7053          foundk;
7054      
7055      var i, j, k1, a, b, c, d, k = 0;
7056      for(i = n - 1; i >= 0; i--){
7057        if (pt[i].x != pt[k].x && pt[i].y != pt[k].y) {
7058          k = i + 1;
7059        }
7060        nc[i] = k;
7061      }
7062      
7063      for (i = n - 1; i >= 0; i--) {
7064        ct[0] = ct[1] = ct[2] = ct[3] = 0;
7065        dir = (3 + 3 * (pt[mod(i + 1, n)].x - pt[i].x) + 
7066            (pt[mod(i + 1, n)].y - pt[i].y)) / 2;
7067        ct[dir]++;
7068        
7069        constraint[0].x = 0;
7070        constraint[0].y = 0;
7071        constraint[1].x = 0;
7072        constraint[1].y = 0;
7073        
7074        k = nc[i];
7075        k1 = i;
7076        while (1) {
7077          foundk = 0;
7078          dir =  (3 + 3 * sign(pt[k].x - pt[k1].x) + 
7079              sign(pt[k].y - pt[k1].y)) / 2;
7080          ct[dir]++;
7081          
7082          if (ct[0] && ct[1] && ct[2] && ct[3]) {
7083            pivk[i] = k1;
7084            foundk = 1;
7085            break;
7086          }
7087          
7088          cur.x = pt[k].x - pt[i].x;
7089          cur.y = pt[k].y - pt[i].y;
7090          
7091          if (xprod(constraint[0], cur) < 0 || xprod(constraint[1], cur) > 0) {
7092            break;
7093          }
7094              
7095          if (Math.abs(cur.x) <= 1 && Math.abs(cur.y) <= 1) {
7096          
7097          } else {
7098            off.x = cur.x + ((cur.y >= 0 && (cur.y > 0 || cur.x < 0)) ? 1 : -1);
7099            off.y = cur.y + ((cur.x <= 0 && (cur.x < 0 || cur.y < 0)) ? 1 : -1);
7100            if (xprod(constraint[0], off) >= 0) {
7101              constraint[0].x = off.x;
7102              constraint[0].y = off.y;
7103            }
7104            off.x = cur.x + ((cur.y <= 0 && (cur.y < 0 || cur.x < 0)) ? 1 : -1);
7105            off.y = cur.y + ((cur.x >= 0 && (cur.x > 0 || cur.y < 0)) ? 1 : -1);
7106            if (xprod(constraint[1], off) <= 0) {
7107              constraint[1].x = off.x;
7108              constraint[1].y = off.y;
7109            }
7110          }
7111          k1 = k;
7112          k = nc[k1];
7113          if (!cyclic(k, i, k1)) {
7114            break;
7115          }
7116        }
7117        if (foundk === 0) {
7118          dk.x = sign(pt[k].x-pt[k1].x);
7119          dk.y = sign(pt[k].y-pt[k1].y);
7120          cur.x = pt[k1].x - pt[i].x;
7121          cur.y = pt[k1].y - pt[i].y;
7122  
7123          a = xprod(constraint[0], cur);
7124          b = xprod(constraint[0], dk);
7125          c = xprod(constraint[1], cur);
7126          d = xprod(constraint[1], dk);
7127  
7128          j = 10000000;
7129          if (b < 0) {
7130            j = Math.floor(a / -b);
7131          }
7132          if (d > 0) {
7133            j = Math.min(j, Math.floor(-c / d));
7134          }
7135          pivk[i] = mod(k1+j,n);
7136        }
7137      }
7138      
7139      j=pivk[n-1];
7140      path.lon[n-1]=j;
7141      for (i=n-2; i>=0; i--) {
7142        if (cyclic(i+1,pivk[i],j)) {
7143          j=pivk[i];
7144        }
7145        path.lon[i]=j;
7146      }
7147  
7148      for (i=n-1; cyclic(mod(i+1,n),j,path.lon[i]); i--) {
7149        path.lon[i] = j;
7150      }
7151    }
7152    
7153    function bestPolygon(path) {
7154      
7155      function penalty3(path, i, j) {
7156        
7157        var n = path.len, pt = path.pt, sums = path.sums;
7158        var x, y, xy, x2, y2,
7159          k, a, b, c, s,
7160          px, py, ex, ey,
7161          r = 0;
7162        if (j>=n) {
7163          j -= n;
7164          r = 1;
7165        }
7166        
7167        if (r === 0) {
7168          x = sums[j+1].x - sums[i].x;
7169          y = sums[j+1].y - sums[i].y;
7170          x2 = sums[j+1].x2 - sums[i].x2;
7171          xy = sums[j+1].xy - sums[i].xy;
7172          y2 = sums[j+1].y2 - sums[i].y2;
7173          k = j+1 - i;
7174        } else {
7175          x = sums[j+1].x - sums[i].x + sums[n].x;
7176          y = sums[j+1].y - sums[i].y + sums[n].y;
7177          x2 = sums[j+1].x2 - sums[i].x2 + sums[n].x2;
7178          xy = sums[j+1].xy - sums[i].xy + sums[n].xy;
7179          y2 = sums[j+1].y2 - sums[i].y2 + sums[n].y2;
7180          k = j+1 - i + n;
7181        } 
7182      
7183        px = (pt[i].x + pt[j].x) / 2.0 - pt[0].x;
7184        py = (pt[i].y + pt[j].y) / 2.0 - pt[0].y;
7185        ey = (pt[j].x - pt[i].x);
7186        ex = -(pt[j].y - pt[i].y);
7187      
7188        a = ((x2 - 2*x*px) / k + px*px);
7189        b = ((xy - x*py - y*px) / k + px*py);
7190        c = ((y2 - 2*y*py) / k + py*py);
7191        
7192        s = ex*ex*a + 2*ex*ey*b + ey*ey*c;
7193      
7194        return Math.sqrt(s);
7195      }
7196      
7197      var i, j, m, k,    
7198      n = path.len,
7199      pen = new Array(n + 1),
7200      prev = new Array(n + 1),
7201      clip0 = new Array(n),
7202      clip1 = new Array(n + 1),
7203      seg0 = new Array (n + 1),
7204      seg1 = new Array(n + 1),
7205      thispen, best, c;
7206      
7207      for (i=0; i<n; i++) {
7208        c = mod(path.lon[mod(i-1,n)]-1,n);
7209        if (c == i) {
7210          c = mod(i+1,n);
7211        }
7212        if (c < i) {
7213          clip0[i] = n;
7214        } else {
7215          clip0[i] = c;
7216        }
7217      }
7218      
7219      j = 1;
7220      for (i=0; i<n; i++) {
7221        while (j <= clip0[i]) {
7222          clip1[j] = i;
7223          j++;
7224        }
7225      }
7226      
7227      i = 0;
7228      for (j=0; i<n; j++) {
7229        seg0[j] = i;
7230        i = clip0[i];
7231      }
7232      seg0[j] = n;
7233      m = j;
7234    
7235      i = n;
7236      for (j=m; j>0; j--) {
7237        seg1[j] = i;
7238        i = clip1[i];
7239      }
7240      seg1[0] = 0;
7241      
7242      pen[0]=0;
7243      for (j=1; j<=m; j++) {
7244        for (i=seg1[j]; i<=seg0[j]; i++) {
7245          best = -1;
7246          for (k=seg0[j-1]; k>=clip1[i]; k--) {
7247            thispen = penalty3(path, k, i) + pen[k];
7248            if (best < 0 || thispen < best) {
7249              prev[i] = k;
7250              best = thispen;
7251            }
7252          }
7253          pen[i] = best;
7254        }
7255      }
7256      path.m = m;
7257      path.po = new Array(m);
7258    
7259      for (i=n, j=m-1; i>0; j--) {
7260        i = prev[i];
7261        path.po[j] = i;
7262      }
7263    }
7264    
7265    function adjustVertices(path) {
7266      
7267      function pointslope(path, i, j, ctr, dir) {
7268    
7269        var n = path.len, sums = path.sums,
7270          x, y, x2, xy, y2,
7271          k, a, b, c, lambda2, l, r=0;
7272      
7273        while (j>=n) {
7274          j-=n;
7275          r+=1;
7276        }
7277        while (i>=n) {
7278          i-=n;
7279          r-=1;
7280        }
7281        while (j<0) {
7282          j+=n;
7283          r-=1;
7284        }
7285        while (i<0) {
7286          i+=n;
7287          r+=1;
7288        }
7289        
7290        x = sums[j+1].x-sums[i].x+r*sums[n].x;
7291        y = sums[j+1].y-sums[i].y+r*sums[n].y;
7292        x2 = sums[j+1].x2-sums[i].x2+r*sums[n].x2;
7293        xy = sums[j+1].xy-sums[i].xy+r*sums[n].xy;
7294        y2 = sums[j+1].y2-sums[i].y2+r*sums[n].y2;
7295        k = j+1-i+r*n;
7296        
7297        ctr.x = x/k;
7298        ctr.y = y/k;
7299      
7300        a = (x2-x*x/k)/k;
7301        b = (xy-x*y/k)/k;
7302        c = (y2-y*y/k)/k;
7303        
7304        lambda2 = (a+c+Math.sqrt((a-c)*(a-c)+4*b*b))/2;
7305      
7306        a -= lambda2;
7307        c -= lambda2;
7308      
7309        if (Math.abs(a) >= Math.abs(c)) {
7310          l = Math.sqrt(a*a+b*b);
7311          if (l!==0) {
7312            dir.x = -b/l;
7313            dir.y = a/l;
7314          }
7315        } else {
7316          l = Math.sqrt(c*c+b*b);
7317          if (l!==0) {
7318            dir.x = -c/l;
7319            dir.y = b/l;
7320          }
7321        }
7322        if (l===0) {
7323          dir.x = dir.y = 0; 
7324        }
7325      }
7326      
7327      var m = path.m, po = path.po, n = path.len, pt = path.pt,
7328        x0 = path.x0, y0 = path.y0,
7329        ctr = new Array(m), dir = new Array(m),
7330        q = new Array(m),
7331        v = new Array(3), d, i, j, k, l,
7332        s = new Point();
7333      
7334      path.curve = new Curve(m);
7335  
7336      for (i=0; i<m; i++) {
7337        j = po[mod(i+1,m)];
7338        j = mod(j-po[i],n)+po[i];
7339        ctr[i] = new Point();
7340        dir[i] = new Point();
7341        pointslope(path, po[i], j, ctr[i], dir[i]);
7342      }
7343    
7344      for (i=0; i<m; i++) {
7345        q[i] = new Quad();
7346        d = dir[i].x * dir[i].x + dir[i].y * dir[i].y;
7347        if (d === 0.0) {
7348          for (j=0; j<3; j++) {
7349            for (k=0; k<3; k++) {
7350              q[i].data[j * 3 + k] = 0;
7351            }
7352          }
7353        } else {
7354          v[0] = dir[i].y;
7355          v[1] = -dir[i].x;
7356          v[2] = - v[1] * ctr[i].y - v[0] * ctr[i].x;
7357          for (l=0; l<3; l++) {
7358            for (k=0; k<3; k++) {
7359              q[i].data[l * 3 + k] = v[l] * v[k] / d;
7360            }
7361          }
7362        }
7363      }
7364     
7365      var Q, w, dx, dy, det, min, cand, xmin, ymin, z;
7366      for (i=0; i<m; i++) {
7367        Q = new Quad();
7368        w = new Point();
7369    
7370        s.x = pt[po[i]].x-x0;
7371        s.y = pt[po[i]].y-y0;
7372    
7373        j = mod(i-1,m);
7374        
7375        for (l=0; l<3; l++) {
7376          for (k=0; k<3; k++) {
7377            Q.data[l * 3 + k] = q[j].at(l, k) + q[i].at(l, k);
7378          }
7379        }
7380        
7381        while(1) {
7382          
7383          det = Q.at(0, 0)*Q.at(1, 1) - Q.at(0, 1)*Q.at(1, 0);
7384          if (det !== 0.0) {
7385            w.x = (-Q.at(0, 2)*Q.at(1, 1) + Q.at(1, 2)*Q.at(0, 1)) / det;
7386            w.y = ( Q.at(0, 2)*Q.at(1, 0) - Q.at(1, 2)*Q.at(0, 0)) / det;
7387            break;
7388          }
7389    
7390          if (Q.at(0, 0)>Q.at(1, 1)) {
7391            v[0] = -Q.at(0, 1);
7392            v[1] = Q.at(0, 0);
7393          } else if (Q.at(1, 1)) {
7394            v[0] = -Q.at(1, 1);
7395            v[1] = Q.at(1, 0);
7396          } else {
7397            v[0] = 1;
7398            v[1] = 0;
7399          }
7400          d = v[0] * v[0] + v[1] * v[1];
7401          v[2] = - v[1] * s.y - v[0] * s.x;
7402          for (l=0; l<3; l++) {
7403            for (k=0; k<3; k++) {
7404              Q.data[l * 3 + k] += v[l] * v[k] / d;
7405            }
7406          }
7407        }
7408        dx = Math.abs(w.x-s.x);
7409        dy = Math.abs(w.y-s.y);
7410        if (dx <= 0.5 && dy <= 0.5) {
7411          path.curve.vertex[i] = new Point(w.x+x0, w.y+y0);
7412          continue;
7413        }
7414    
7415        min = quadform(Q, s);
7416        xmin = s.x;
7417        ymin = s.y;
7418    
7419        if (Q.at(0, 0) !== 0.0) {
7420          for (z=0; z<2; z++) {
7421            w.y = s.y-0.5+z;
7422            w.x = - (Q.at(0, 1) * w.y + Q.at(0, 2)) / Q.at(0, 0);
7423            dx = Math.abs(w.x-s.x);
7424            cand = quadform(Q, w);
7425            if (dx <= 0.5 && cand < min) {
7426              min = cand;
7427              xmin = w.x;
7428              ymin = w.y;
7429            }
7430          }
7431        }
7432  
7433        if (Q.at(1, 1) !== 0.0) {
7434          for (z=0; z<2; z++) {
7435            w.x = s.x-0.5+z;
7436            w.y = - (Q.at(1, 0) * w.x + Q.at(1, 2)) / Q.at(1, 1);
7437            dy = Math.abs(w.y-s.y);
7438            cand = quadform(Q, w);
7439            if (dy <= 0.5 && cand < min) {
7440              min = cand;
7441              xmin = w.x;
7442              ymin = w.y;
7443            }
7444          }
7445        }
7446  
7447        for (l=0; l<2; l++) {
7448          for (k=0; k<2; k++) {
7449            w.x = s.x-0.5+l;
7450            w.y = s.y-0.5+k;
7451            cand = quadform(Q, w);
7452            if (cand < min) {
7453              min = cand;
7454              xmin = w.x;
7455              ymin = w.y;
7456            }
7457          }
7458        }
7459    
7460        path.curve.vertex[i] = new Point(xmin + x0, ymin + y0);
7461      }
7462    }
7463    
7464    function reverse(path) {
7465      var curve = path.curve, m = curve.n, v = curve.vertex, i, j, tmp;
7466    
7467      for (i=0, j=m-1; i<j; i++, j--) {
7468        tmp = v[i];
7469        v[i] = v[j];
7470        v[j] = tmp;
7471      }
7472    }
7473    
7474    function smooth(path) {
7475      var m = path.curve.n, curve = path.curve;
7476
7477      var i, j, k, dd, denom, alpha,
7478        p2, p3, p4;
7479    
7480      for (i=0; i<m; i++) {
7481        j = mod(i+1, m);
7482        k = mod(i+2, m);
7483        p4 = interval(1/2.0, curve.vertex[k], curve.vertex[j]);
7484    
7485        denom = ddenom(curve.vertex[i], curve.vertex[k]);
7486        if (denom !== 0.0) {
7487          dd = dpara(curve.vertex[i], curve.vertex[j], curve.vertex[k]) / denom;
7488          dd = Math.abs(dd);
7489          alpha = dd>1 ? (1 - 1.0/dd) : 0;
7490          alpha = alpha / 0.75;
7491        } else {
7492          alpha = 4/3.0;
7493        }
7494        curve.alpha0[j] = alpha;
7495    
7496        if (alpha >= window.actualsmoo) { 
7497          curve.tag[j] = "CORNER";
7498          curve.c[3 * j + 1] = curve.vertex[j];
7499          curve.c[3 * j + 2] = p4;
7500        } else {
7501          if (alpha < 0.55) {
7502            alpha = 0.55;
7503          } else if (alpha > 1) {
7504            alpha = 1;
7505          }
7506          p2 = interval(0.5+0.5*alpha, curve.vertex[i], curve.vertex[j]);
7507          p3 = interval(0.5+0.5*alpha, curve.vertex[k], curve.vertex[j]);
7508          curve.tag[j] = "CURVE";
7509          curve.c[3 * j + 0] = p2;
7510          curve.c[3 * j + 1] = p3;
7511          curve.c[3 * j + 2] = p4;
7512        }
7513        curve.alpha[j] = alpha;  
7514        curve.beta[j] = 0.5;
7515      }
7516      curve.alphacurve = 1;
7517    }
7518    
7519    function optiCurve(path) {
7520      function Opti(){
7521        this.pen = 0;
7522        this.c = [new Point(), new Point()];
7523        this.t = 0;
7524        this.s = 0;
7525        this.alpha = 0;
7526      }
7527      
7528      function opti_penalty(path, i, j, res, opttolerance, convc, areac) {
7529        var m = path.curve.n, curve = path.curve, vertex = curve.vertex, 
7530          k, k1, k2, conv, i1,
7531          area, alpha, d, d1, d2,
7532          p0, p1, p2, p3, pt,
7533          A, R, A1, A2, A3, A4,
7534          s, t;
7535      
7536        if (i==j) {
7537          return 1;
7538        }
7539      
7540        k = i;
7541        i1 = mod(i+1, m);
7542        k1 = mod(k+1, m);
7543        conv = convc[k1];
7544        if (conv === 0) {
7545          return 1;
7546        }
7547        d = ddist(vertex[i], vertex[i1]);
7548        for (k=k1; k!=j; k=k1) {
7549          k1 = mod(k+1, m);
7550          k2 = mod(k+2, m);
7551          if (convc[k1] != conv) {
7552            return 1;
7553          }
7554          if (sign(cprod(vertex[i], vertex[i1], vertex[k1], vertex[k2])) !=
7555              conv) {
7556            return 1;
7557          }
7558          if (iprod1(vertex[i], vertex[i1], vertex[k1], vertex[k2]) <
7559              d * ddist(vertex[k1], vertex[k2]) * -0.999847695156) {
7560            return 1;
7561          }
7562        }
7563    
7564        p0 = curve.c[mod(i,m) * 3 + 2].copy();
7565        p1 = vertex[mod(i+1,m)].copy();
7566        p2 = vertex[mod(j,m)].copy();
7567        p3 = curve.c[mod(j,m) * 3 + 2].copy();
7568      
7569        area = areac[j] - areac[i];
7570        area -= dpara(vertex[0], curve.c[i * 3 + 2], curve.c[j * 3 + 2])/2;
7571        if (i>=j) {
7572          area += areac[m];
7573        }
7574      
7575        A1 = dpara(p0, p1, p2);
7576        A2 = dpara(p0, p1, p3);
7577        A3 = dpara(p0, p2, p3);
7578  
7579        A4 = A1+A3-A2;    
7580        
7581        if (A2 == A1) {
7582          return 1;
7583        }
7584      
7585        t = A3/(A3-A4);
7586        s = A2/(A2-A1);
7587        A = A2 * t / 2.0;
7588        
7589        if (A === 0.0) {
7590          return 1;
7591        }
7592      
7593        R = area / A;
7594        alpha = 2 - Math.sqrt(4 - R / 0.3);
7595      
7596        res.c[0] = interval(t * alpha, p0, p1);
7597        res.c[1] = interval(s * alpha, p3, p2);
7598        res.alpha = alpha;
7599        res.t = t;
7600        res.s = s;
7601      
7602        p1 = res.c[0].copy();
7603        p2 = res.c[1].copy(); 
7604      
7605        res.pen = 0;
7606      
7607        for (k=mod(i+1,m); k!=j; k=k1) {
7608          k1 = mod(k+1,m);
7609          t = tangent(p0, p1, p2, p3, vertex[k], vertex[k1]);
7610          if (t<-0.5) {
7611            return 1;
7612          }
7613          pt = bezier(t, p0, p1, p2, p3);
7614          d = ddist(vertex[k], vertex[k1]);
7615          if (d === 0.0) {
7616            return 1;
7617          }
7618          d1 = dpara(vertex[k], vertex[k1], pt) / d;
7619          if (Math.abs(d1) > opttolerance) {
7620            return 1;
7621          }
7622          if (iprod(vertex[k], vertex[k1], pt) < 0 ||
7623              iprod(vertex[k1], vertex[k], pt) < 0) {
7624            return 1;
7625          }
7626          res.pen += d1 * d1;
7627        }
7628      
7629        for (k=i; k!=j; k=k1) {
7630          k1 = mod(k+1,m);
7631          t = tangent(p0, p1, p2, p3, curve.c[k * 3 + 2], curve.c[k1 * 3 + 2]);
7632          if (t<-0.5) {
7633            return 1;
7634          }
7635          pt = bezier(t, p0, p1, p2, p3);
7636          d = ddist(curve.c[k * 3 + 2], curve.c[k1 * 3 + 2]);
7637          if (d === 0.0) {
7638            return 1;
7639          }
7640          d1 = dpara(curve.c[k * 3 + 2], curve.c[k1 * 3 + 2], pt) / d;
7641          d2 = dpara(curve.c[k * 3 + 2], curve.c[k1 * 3 + 2], vertex[k1]) / d;
7642          d2 *= 0.75 * curve.alpha[k1];
7643          if (d2 < 0) {
7644            d1 = -d1;
7645            d2 = -d2;
7646          }
7647          if (d1 < d2 - opttolerance) {
7648            return 1;
7649          }
7650          if (d1 < d2) {
7651            res.pen += (d1 - d2) * (d1 - d2);
7652          }
7653        }
7654      
7655        return 0;
7656      }
7657    
7658      var curve = path.curve, m = curve.n, vert = curve.vertex, 
7659        pt = new Array(m + 1),
7660        pen = new Array(m + 1),
7661        len = new Array(m + 1),
7662        opt = new Array(m + 1),
7663        om, i,j,r,
7664        o = new Opti(), p0,
7665        i1, area, alpha, ocurve,
7666        s, t;
7667      
7668      var convc = new Array(m), areac = new Array(m + 1);
7669      
7670      for (i=0; i<m; i++) {
7671        if (curve.tag[i] == "CURVE") {
7672          convc[i] = sign(dpara(vert[mod(i-1,m)], vert[i], vert[mod(i+1,m)]));
7673        } else {
7674          convc[i] = 0;
7675        }
7676      }
7677    
7678      area = 0.0;
7679      areac[0] = 0.0;
7680      p0 = curve.vertex[0];
7681      for (i=0; i<m; i++) {
7682        i1 = mod(i+1, m);
7683        if (curve.tag[i1] == "CURVE") {
7684          alpha = curve.alpha[i1];
7685          area += 0.3 * alpha * (4-alpha) *
7686              dpara(curve.c[i * 3 + 2], vert[i1], curve.c[i1 * 3 + 2])/2;
7687          area += dpara(p0, curve.c[i * 3 + 2], curve.c[i1 * 3 + 2])/2;
7688        }
7689        areac[i+1] = area;
7690      }
7691    
7692      pt[0] = -1;
7693      pen[0] = 0;
7694      len[0] = 0;
7695    
7696    
7697      for (j=1; j<=m; j++) {
7698        pt[j] = j-1;
7699        pen[j] = pen[j-1];
7700        len[j] = len[j-1]+1;
7701    
7702        for (i=j-2; i>=0; i--) {
7703          r = opti_penalty(path, i, mod(j,m), o, actualcomp, convc, 
7704              areac);
7705          if (r) {
7706            break;
7707          }
7708            if (len[j] > len[i]+1 ||
7709                (len[j] == len[i]+1 && pen[j] > pen[i] + o.pen)) {
7710              pt[j] = i;
7711              pen[j] = pen[i] + o.pen;
7712              len[j] = len[i] + 1;
7713              opt[j] = o;
7714              o = new Opti();
7715            }
7716        }
7717      }
7718      om = len[m];
7719      ocurve = new Curve(om);
7720      s = new Array(om);
7721      t = new Array(om);
7722    
7723      j = m;
7724      for (i=om-1; i>=0; i--) {
7725        if (pt[j]==j-1) {
7726          ocurve.tag[i]     = curve.tag[mod(j,m)];
7727          ocurve.c[i * 3 + 0]    = curve.c[mod(j,m) * 3 + 0];
7728          ocurve.c[i * 3 + 1]    = curve.c[mod(j,m) * 3 + 1];
7729          ocurve.c[i * 3 + 2]    = curve.c[mod(j,m) * 3 + 2];
7730          ocurve.vertex[i]  = curve.vertex[mod(j,m)];
7731          ocurve.alpha[i]   = curve.alpha[mod(j,m)];
7732          ocurve.alpha0[i]  = curve.alpha0[mod(j,m)];
7733          ocurve.beta[i]    = curve.beta[mod(j,m)];
7734          s[i] = t[i] = 1.0;
7735        } else {
7736          ocurve.tag[i] = "CURVE";
7737          ocurve.c[i * 3 + 0] = opt[j].c[0];
7738          ocurve.c[i * 3 + 1] = opt[j].c[1];
7739          ocurve.c[i * 3 + 2] = curve.c[mod(j,m) * 3 + 2];
7740          ocurve.vertex[i] = interval(opt[j].s, curve.c[mod(j,m) * 3 + 2],
7741                                       vert[mod(j,m)]);
7742          ocurve.alpha[i] = opt[j].alpha;
7743          ocurve.alpha0[i] = opt[j].alpha;
7744          s[i] = opt[j].s;
7745          t[i] = opt[j].t;
7746        }
7747        j = pt[j];
7748      }
7749    
7750      for (i=0; i<om; i++) {
7751        i1 = mod(i+1,om);
7752        ocurve.beta[i] = s[i] / (s[i] + t[i1]);
7753      }
7754      ocurve.alphacurve = 1;
7755      path.curve = ocurve;
7756    }
7757    
7758    for (var i = 0; i < pathlist.length; i++) {
7759      var path = pathlist[i];
7760      calcSums(path);
7761      calcLon(path);
7762      bestPolygon(path);
7763      adjustVertices(path);
7764      
7765      if (path.sign === "-") {
7766        reverse(path);
7767      }
7768      
7769      smooth(path);
7770      
7771      if (info.optcurve) {
7772        optiCurve(path);
7773      }
7774    }
7775  
7776  }
7777
7778  function process(c) {
7779    if (c) {
7780      callback = c;
7781    }
7782    if (!info.isReady) {
7783      setTimeout(process, 100);
7784      return;
7785    }
7786    bmToPathlist();
7787    processPath();
7788    callback();
7789    callback = null;
7790  }
7791
7792  function clear() {
7793    bm = null;
7794    pathlist = [];
7795    callback = null;
7796    info.isReady = false;
7797  }
7798  
7799
7800  
7801  function getSVG(size, opt_type) {
7802  
7803    function path(curve) {
7804    
7805      function bezier(i) {
7806        var b = 'C ' + (curve.c[i * 3 + 0].x * size).toFixed(3) + ' ' +
7807            (curve.c[i * 3 + 0].y * size).toFixed(3) + ',';
7808        b += (curve.c[i * 3 + 1].x * size).toFixed(3) + ' ' +
7809            (curve.c[i * 3 + 1].y * size).toFixed(3) + ',';
7810        b += (curve.c[i * 3 + 2].x * size).toFixed(3) + ' ' +
7811            (curve.c[i * 3 + 2].y * size).toFixed(3) + ' ';
7812        return b;
7813      }
7814    
7815      function segment(i) {
7816        var s = 'L ' + (curve.c[i * 3 + 1].x * size).toFixed(3) + ' ' +
7817            (curve.c[i * 3 + 1].y * size).toFixed(3) + ' ';
7818        s += (curve.c[i * 3 + 2].x * size).toFixed(3) + ' ' +
7819            (curve.c[i * 3 + 2].y * size).toFixed(3) + ' ';
7820        return s;
7821      }
7822
7823      var n = curve.n, i;
7824      var p = 'M' + (curve.c[(n - 1) * 3 + 2].x * size).toFixed(3) +
7825          ' ' + (curve.c[(n - 1) * 3 + 2].y * size).toFixed(3) + ' ';
7826      for (i = 0; i < n; i++) {
7827        if (curve.tag[i] === "CURVE") {
7828          p += bezier(i);
7829        } else if (curve.tag[i] === "CORNER") {
7830          p += segment(i);
7831        }
7832      }
7833      //p += 
7834      return p;
7835    }
7836
7837    var w = bm.w * size, h = bm.h * size,
7838      len = pathlist.length, c, i, strokec, fillc, fillrule;
7839if (cop != 1){
7840    var svg = '<svg id="svg" version="1.1" width="' + w + '" height="' + h +
7841        '" xmlns="http://www.w3.org/2000/svg">';
7842svg += '<path d="';} else {
7843	var svg = '';
7844}
7845    for (i = 0; i < len; i++) {
7846      c = pathlist[i].curve;
7847      svg += path(c);
7848    }
7849    if (opt_type === "curve") {
7850      strokec = "red";
7851      fillc = "none";
7852      fillrule = '';
7853    } else {
7854      strokec = "none";
7855      fillc = "black";
7856      fillrule = ' fill-rule="evenodd"';
7857    }
7858	if (cop != 1){
7859    svg += '" stroke="' + strokec + '" fill="' + fillc + '"' + fillrule + '/></svg>';
7860	} else {
7861	svg=svg.trim()
7862	}
7863    return svg;
7864  }
7865  
7866  return{
7867    loadImageFromFile: loadImageFromFile,
7868    loadImageFromUrl: loadImageFromUrl,
7869    setParameter: setParameter,
7870    process: process,
7871    getSVG: getSVG,
7872    img: imgElement
7873  };
7874})();
7875
7876
7877
7878
7879
7880
7881
7882var cop;
7883var textInput = document.getElementById("textartarea");
7884var fontselector = document.getElementById("fontselector");
7885var currentValue1 = false;
7886var currentValue2 = false; 
7887var finalres;
7888
7889var openstamp = document.getElementById("openstamp");  
7890  openstamp.addEventListener("change", function (e) {
7891    handleFiles(this.files);
7892}, false);
7893
7894  document.getElementById("openstamplabel").addEventListener("click", function (e) {
7895document.getElementById("openstamp").value = "";	
7896  }, false);  
7897  
7898  
7899var copytarget = document.getElementById("attachelementbtn");
7900copytarget.addEventListener("click", async function (e) {
7901window.cop = 1;
7902
7903//alert(Potrace.getSVG(1))
7904var ç = anondraw.collab.paint;
7905window.ç = anondraw.collab.paint;
7906var a = anondraw.collab.paint;
7907var extrax = 350;
7908var extray = 80;	
7909 
7910toconsole(Potrace.getSVG(document.getElementById("attachsizeslider").value)); 
7911
7912window.cop = 0;
7913}, false);  
7914var copytarget = document.getElementById("attachtextartbtn");
7915copytarget.addEventListener("click", async function (e) {
7916window.cop = 1;
7917
7918//alert(Potrace.getSVG(1))
7919var ç = anondraw.collab.paint;
7920window.ç = anondraw.collab.paint;	
7921var a = anondraw.collab.paint;
7922var extrax = 350;
7923var extray = 80;
7924 
7925toconsole(Potrace.getSVG(document.getElementById("attachsizeslider").value)); 
7926
7927window.cop = 0;
7928}, false);  
7929
7930
7931
7932var x = document.createElement("CANVAS");
7933x.id = 'canvaspattern';
7934x.setAttribute("width", "6px");
7935x.setAttribute("height", "6px");
7936x.style.display = 'none';
7937document.body.appendChild(x);
7938
7939var x = document.createElement("CANVAS");
7940x.id = 'anotherp';
7941x.setAttribute("width", "6px");
7942x.setAttribute("height", "6px");
7943x.style.display = 'none';
7944document.body.appendChild(x);
7945
7946var x = document.createElement("CANVAS");
7947x.id = 'textpattern';
7948x.setAttribute("width", "4px");
7949x.setAttribute("height", "4px");
7950x.style.display = 'none';
7951document.body.appendChild(x);
7952
7953
7954
7955var pcanvas = document.getElementById("canvaspattern");
7956var pctx = pcanvas.getContext("2d");
7957pctx.fillStyle = "#FFFFFF";
7958pctx.fillRect(0,0,6,3);
7959
7960var bpcanvas = document.getElementById("anotherp");
7961var bpctx = bpcanvas.getContext("2d");
7962bpctx.fillStyle = "#000000";
7963bpctx.fillRect(0,0,6,3);
7964   
7965var tcanvas = document.getElementById("textpattern");
7966var tctx = tcanvas.getContext("2d");
7967tctx.fillStyle = "#FFFFFF";
7968tctx.fillRect(0,0,4,2);  
7969  
7970
7971textInput.addEventListener("change", function (e) {
7972var tInputval = document.getElementById("textartarea").value;   
7973if (tInputval !== "") { 
7974    Potrace.loadImageFromUrl("https://i.imgur.com/jigW8rp.png");
7975    Potrace.process(function(){
7976    displaySVGB(1);
7977    });
7978	}
7979  }, false);
7980  
7981  
7982fontselector.addEventListener("change", function (e) {   
7983var tInputval = document.getElementById("textartarea").value;   
7984if (tInputval !== "") { 
7985    Potrace.loadImageFromUrl("https://i.imgur.com/jigW8rp.png");
7986    Potrace.process(function(){
7987    displaySVGB(1);
7988    });
7989	}
7990  }, false);
7991  
7992  function handleFiles(files) {
7993  Potrace.loadImageFromFile(files[0]);
7994  Potrace.process(function(){
7995    displaySVG(document.getElementById("attachsizeslider").value);
7996  });
7997}
7998
7999
8000function displaySVG(size, type){ 
8001  svgdiv.style.display = 'inline-block';
8002  svgdiv.innerHTML = Potrace.getSVG(document.getElementById("attachsizeslider").value, 'curve'); 
8003}
8004
8005function displaySVGB(size, type){
8006  svgdiv.style.display = 'inline-block';
8007  svgdiv.innerHTML = Potrace.getSVG(1, 'curve');   
8008}
8009
8010document.getElementById('pastestamp').onpaste = function (event) {
8011  // use event.originalEvent.clipboard for newer chrome versions
8012  var items = (event.clipboardData  || event.originalEvent.clipboardData).items;
8013  console.log(JSON.stringify(items)); // will give you the mime types
8014  // find pasted image among pasted items
8015  var blob = null;
8016  for (var i = 0; i < items.length; i++) {
8017    if (items[i].type.indexOf("image") === 0) {
8018      blob = items[i].getAsFile();
8019    }
8020  }
8021  // load image if there is a pasted image
8022  if (blob !== null) {
8023    var reader = new FileReader();
8024    reader.onload = function(event) {
8025      console.log(event.target.result); // data url!
8026      document.getElementById("pastedImage").src = event.target.result;
8027	  
8028	  Potrace.loadImageFromUrl(event.target.result);
8029      Potrace.process(function(){
8030      displaySVG(document.getElementById("attachsizeslider").value);
8031    });
8032	  
8033	  
8034    };
8035    reader.readAsDataURL(blob);
8036  }  
8037}
8038
8039
8040function ignoref() {
8041window.ignrange = document.getElementById("ignore").value;  
8042document.getElementById('ignresult').innerHTML = ignrange;
8043}
8044
8045function smoothf() {
8046window.actualsmoo = smoorange * 0.133;
8047document.getElementById('smthresult').innerHTML = smoorange;
8048}
8049
8050function compressf() {
8051var comprange = document.getElementById("compress").value;
8052window.actualcomp = comprange / 10;  
8053document.getElementById('compresult').innerHTML = comprange;
8054}
8055
8056function linesbox() {
8057var lincheck = document.getElementById("lin").checked;
8058//alert('1');
8059if (lincheck ==1){
8060//alert('2');
8061var smoorange = "0"; 
8062window.actualsmoo = smoorange * 0.133;
8063} else {
8064//alert('3');
8065var smoorange; 
8066window.actualsmoo = smoorange * 0.133;
8067}
8068}
8069
8070document.getElementById("fontsize").oninput = function() {
8071
8072}
8073
8074document.getElementById("fontsize").onchange = function() {
8075  var tInputval = document.getElementById("textartarea").value;
8076if (tInputval !== ""){  
8077var imgdiv = document.getElementById('imgdiv');
8078imgdiv.style.display = "none";    
8079    Potrace.loadImageFromUrl("https://i.imgur.com/jigW8rp.png");
8080    Potrace.process(function(){
8081      displaySVGB(1);
8082    });
8083	}
8084	}
8085
8086
8087function toconsole(data){
8088var extrax = 350;
8089var extray = 80;	
8090var line = data; 
8091var finalproduct = [];
8092
8093//var OFFx = parseInt(anondraw.collab.paint.local.leftTopX);
8094//var OFFy = parseInt(anondraw.collab.paint.local.leftTopY);
8095
8096var OFFx = 0;
8097var OFFy = 0;
8098
8099var a = anondraw.collab.paint;
8100 
8101
8102
8103var line = line.replace(/M/g, "#M");
8104var line = line.replace(/L /g, "#L");
8105var line = line.replace(/C /g, "#C");
8106var line = line.replace(/,/g, " ");
8107line = line.substr(1); //removing # from the start
8108var line_array = line.split('#');
8109
8110for(var i = 0; i < line_array.length; i++) {
8111  
8112  if (line_array[i].indexOf("M")>=0) {
8113  //var line = line.replace(/#M/g, "");
8114
8115  var M_array = line_array[i].split(' ');  
8116  var Mx = M_array[0].replace(/M/g, "");
8117  var My = M_array[1];
8118  var lastx = Mx;
8119  var lasty = My;
8120var oMx = parseFloat(Mx) + parseFloat(OFFx) ;
8121var oMy = parseFloat(Mx) + parseFloat(OFFy) ;
8122    
8123  //alert(Mx+ " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" +My);
8124  finalproduct.push("ç.endUserPath()");  
8125  //finalproduct.push("anondraw.collab.paint.addUserPathPoint([" + oMx+ " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oMy + "]);");
8126  }
8127  
8128  if (line_array[i].indexOf("L")>=0) {
8129  //var line = line.replace(/#L/g, "");
8130    
8131  var L_array = line_array[i].split(' ');  
8132  
8133  var Lx0 = lastx
8134  var Ly0 = lasty
8135  var Lxa = L_array[0].replace(/L/g, "");
8136  var Lya = L_array[1];
8137  var Lxb = L_array[2];
8138  var Lyb = L_array[3];
8139  var lastx = Lxb;
8140  var lasty = Lyb;
8141  
8142  var oLx0 = parseFloat(Lx0) + parseFloat(OFFx) ;
8143  var oLy0 = parseFloat(Ly0) + parseFloat(OFFy) ;
8144  var oLxa = parseFloat(Lxa) + parseFloat(OFFx) ;
8145  var oLya = parseFloat(Lya) + parseFloat(OFFy) ;
8146  var oLxb = parseFloat(Lxb) + parseFloat(OFFx) ;
8147  var oLyb = parseFloat(Lyb) + parseFloat(OFFy) ;
8148    
8149  //alert(Lxa+ " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" +Lya + " " + Lxb+ " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" +Lyb);
8150 
8151 
8152 
8153  finalproduct.push("ç.addUserPath()");
8154  finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oLx0.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oLy0.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
8155  finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oLxa.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oLya.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
8156  finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oLxb.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oLyb.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
8157  }
8158  
8159  if (line_array[i].indexOf("C")>=0) {
8160  //var line = line.replace(/#C/g, "");
8161    
8162  var C_array = line_array[i].split(' ');  
8163var p0x = lastx;
8164var p0y = lasty;
8165var cp0x = C_array[0].replace(/C/g, "");
8166var cp0y = C_array[1];
8167var cp1x = C_array[2];
8168var cp1y = C_array[3];
8169var p1x = C_array[4];
8170var p1y = C_array[5];
8171var lastx = p1x;
8172var lasty = p1y;    
8173
8174
8175//next lines check the distance between the start and the end of a curve to determine how many ley points will be used
8176if (p0x == p1x)
8177{
8178var distanceworth = Math.abs(p0y - p1y);	
8179}
8180
8181else if (p0y == p1y)
8182{
8183var distanceworth = Math.abs(p0x - p1x);	
8184}	
8185
8186else
8187{
8188var distanceworth = Math.sqrt( Math.pow(p0x - p1x,2) + Math.pow(p0y - p1y,2));
8189}
8190// previous lines check the distance between the start and the end of a curve to determine how many ley points will be used
8191if (distanceworth >= 60) {    
8192var t=0.1
8193
8194var Ax = ( (1 - t) * p0x ) + (t * cp0x)
8195var Ay = ( (1 - t) * p0y ) + (t * cp0y)
8196var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
8197var By = ( (1 - t) * cp0y ) + (t * cp1y)
8198var Cx = ( (1 - t) * cp1x ) + (t * p1x)
8199var Cy = ( (1 - t) * cp1y ) + (t * p1y)
8200var Dx = ( (1 - t) * Ax ) + (t * Bx)
8201var Dy = ( (1 - t) * Ay ) + (t * By)
8202var Ex = ( (1 - t) * Bx ) + (t * Cx)
8203var Ey = ( (1 - t) * By ) + (t * Cy)
8204	
8205var CPfx = ( (1 - t) * Dx ) + (t * Ex)
8206var CPfy = ( (1 - t) * Dy ) + (t * Ey)
8207
8208
8209var t=0.2
8210
8211var Ax = ( (1 - t) * p0x ) + (t * cp0x)
8212var Ay = ( (1 - t) * p0y ) + (t * cp0y)
8213var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
8214var By = ( (1 - t) * cp0y ) + (t * cp1y)
8215var Cx = ( (1 - t) * cp1x ) + (t * p1x)
8216var Cy = ( (1 - t) * cp1y ) + (t * p1y)
8217var Dx = ( (1 - t) * Ax ) + (t * Bx)
8218var Dy = ( (1 - t) * Ay ) + (t * By)
8219var Ex = ( (1 - t) * Bx ) + (t * Cx)
8220var Ey = ( (1 - t) * By ) + (t * Cy)
8221	
8222var CP2x = ( (1 - t) * Dx ) + (t * Ex)
8223var CP2y = ( (1 - t) * Dy ) + (t * Ey)
8224
8225
8226var t=0.3
8227
8228var Ax = ( (1 - t) * p0x ) + (t * cp0x)
8229var Ay = ( (1 - t) * p0y ) + (t * cp0y)
8230var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
8231var By = ( (1 - t) * cp0y ) + (t * cp1y)
8232var Cx = ( (1 - t) * cp1x ) + (t * p1x)
8233var Cy = ( (1 - t) * cp1y ) + (t * p1y)
8234var Dx = ( (1 - t) * Ax ) + (t * Bx)
8235var Dy = ( (1 - t) * Ay ) + (t * By)
8236var Ex = ( (1 - t) * Bx ) + (t * Cx)
8237var Ey = ( (1 - t) * By ) + (t * Cy)
8238	
8239var CP3x = ( (1 - t) * Dx ) + (t * Ex)
8240var CP3y = ( (1 - t) * Dy ) + (t * Ey)
8241
8242
8243var t=0.4
8244
8245var Ax = ( (1 - t) * p0x ) + (t * cp0x)
8246var Ay = ( (1 - t) * p0y ) + (t * cp0y)
8247var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
8248var By = ( (1 - t) * cp0y ) + (t * cp1y)
8249var Cx = ( (1 - t) * cp1x ) + (t * p1x)
8250var Cy = ( (1 - t) * cp1y ) + (t * p1y)
8251var Dx = ( (1 - t) * Ax ) + (t * Bx)
8252var Dy = ( (1 - t) * Ay ) + (t * By)
8253var Ex = ( (1 - t) * Bx ) + (t * Cx)
8254var Ey = ( (1 - t) * By ) + (t * Cy)
8255	
8256var CP4x = ( (1 - t) * Dx ) + (t * Ex)
8257var CP4y = ( (1 - t) * Dy ) + (t * Ey)
8258
8259
8260var t=0.5
8261
8262var Ax = ( (1 - t) * p0x ) + (t * cp0x)
8263var Ay = ( (1 - t) * p0y ) + (t * cp0y)
8264var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
8265var By = ( (1 - t) * cp0y ) + (t * cp1y)
8266var Cx = ( (1 - t) * cp1x ) + (t * p1x)
8267var Cy = ( (1 - t) * cp1y ) + (t * p1y)
8268var Dx = ( (1 - t) * Ax ) + (t * Bx)
8269var Dy = ( (1 - t) * Ay ) + (t * By)
8270var Ex = ( (1 - t) * Bx ) + (t * Cx)
8271var Ey = ( (1 - t) * By ) + (t * Cy)
8272	
8273var CP5x = ( (1 - t) * Dx ) + (t * Ex)
8274var CP5y = ( (1 - t) * Dy ) + (t * Ey)
8275
8276
8277var t=0.6
8278
8279var Ax = ( (1 - t) * p0x ) + (t * cp0x)
8280var Ay = ( (1 - t) * p0y ) + (t * cp0y)
8281var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
8282var By = ( (1 - t) * cp0y ) + (t * cp1y)
8283var Cx = ( (1 - t) * cp1x ) + (t * p1x)
8284var Cy = ( (1 - t) * cp1y ) + (t * p1y)
8285var Dx = ( (1 - t) * Ax ) + (t * Bx)
8286var Dy = ( (1 - t) * Ay ) + (t * By)
8287var Ex = ( (1 - t) * Bx ) + (t * Cx)
8288var Ey = ( (1 - t) * By ) + (t * Cy)
8289	
8290var CP6x = ( (1 - t) * Dx ) + (t * Ex)
8291var CP6y = ( (1 - t) * Dy ) + (t * Ey)
8292
8293
8294var t=0.7
8295
8296var Ax = ( (1 - t) * p0x ) + (t * cp0x)
8297var Ay = ( (1 - t) * p0y ) + (t * cp0y)
8298var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
8299var By = ( (1 - t) * cp0y ) + (t * cp1y)
8300var Cx = ( (1 - t) * cp1x ) + (t * p1x)
8301var Cy = ( (1 - t) * cp1y ) + (t * p1y)
8302var Dx = ( (1 - t) * Ax ) + (t * Bx)
8303var Dy = ( (1 - t) * Ay ) + (t * By)
8304var Ex = ( (1 - t) * Bx ) + (t * Cx)
8305var Ey = ( (1 - t) * By ) + (t * Cy)
8306	
8307var CP7x = ( (1 - t) * Dx ) + (t * Ex)
8308var CP7y = ( (1 - t) * Dy ) + (t * Ey)
8309
8310
8311var t=0.8
8312
8313var Ax = ( (1 - t) * p0x ) + (t * cp0x)
8314var Ay = ( (1 - t) * p0y ) + (t * cp0y)
8315var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
8316var By = ( (1 - t) * cp0y ) + (t * cp1y)
8317var Cx = ( (1 - t) * cp1x ) + (t * p1x)
8318var Cy = ( (1 - t) * cp1y ) + (t * p1y)
8319var Dx = ( (1 - t) * Ax ) + (t * Bx)
8320var Dy = ( (1 - t) * Ay ) + (t * By)
8321var Ex = ( (1 - t) * Bx ) + (t * Cx)
8322var Ey = ( (1 - t) * By ) + (t * Cy)
8323	
8324var CP8x = ( (1 - t) * Dx ) + (t * Ex)
8325var CP8y = ( (1 - t) * Dy ) + (t * Ey)
8326
8327
8328var t=0.9
8329
8330var Ax = ( (1 - t) * p0x ) + (t * cp0x)
8331var Ay = ( (1 - t) * p0y ) + (t * cp0y)
8332var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
8333var By = ( (1 - t) * cp0y ) + (t * cp1y)
8334var Cx = ( (1 - t) * cp1x ) + (t * p1x)
8335var Cy = ( (1 - t) * cp1y ) + (t * p1y)
8336var Dx = ( (1 - t) * Ax ) + (t * Bx)
8337var Dy = ( (1 - t) * Ay ) + (t * By)
8338var Ex = ( (1 - t) * Bx ) + (t * Cx)
8339var Ey = ( (1 - t) * By ) + (t * Cy)
8340	
8341var CP9x = ( (1 - t) * Dx ) + (t * Ex)
8342var CP9y = ( (1 - t) * Dy ) + (t * Ey)
8343
8344
8345var op0x = parseFloat(p0x) + parseFloat(OFFx) 
8346var oCPfx = parseFloat(CPfx) + parseFloat(OFFx) 
8347var oCP2x = parseFloat(CP2x) + parseFloat(OFFx) 
8348var oCP3x = parseFloat(CP3x) + parseFloat(OFFx) 
8349var oCP4x = parseFloat(CP4x) + parseFloat(OFFx) 
8350var oCP5x = parseFloat(CP5x) + parseFloat(OFFx) 
8351var oCP6x = parseFloat(CP6x) + parseFloat(OFFx) 
8352var oCP7x = parseFloat(CP7x) + parseFloat(OFFx) 
8353var oCP8x = parseFloat(CP8x) + parseFloat(OFFx) 
8354var oCP9x = parseFloat(CP9x) + parseFloat(OFFx) 
8355var op1x = parseFloat(p1x) + parseFloat(OFFx) 
8356
8357var op0y = parseFloat(p0y) + parseFloat(OFFy) 
8358var oCPfy = parseFloat(CPfy) + parseFloat(OFFy) 
8359var oCP2y = parseFloat(CP2y) + parseFloat(OFFy) 
8360var oCP3y = parseFloat(CP3y) + parseFloat(OFFy) 
8361var oCP4y = parseFloat(CP4y) + parseFloat(OFFy) 
8362var oCP5y = parseFloat(CP5y) + parseFloat(OFFy) 
8363var oCP6y = parseFloat(CP6y) + parseFloat(OFFy) 
8364var oCP7y = parseFloat(CP7y) + parseFloat(OFFy) 
8365var oCP8y = parseFloat(CP8y) + parseFloat(OFFy) 
8366var oCP9y = parseFloat(CP9y) + parseFloat(OFFy) 
8367var op1y = parseFloat(p1y) + parseFloat(OFFy) 
8368
8369finalproduct.push("ç.addUserPath()");
8370finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + op0x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + op0y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
8371finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCPfx.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCPfy.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
8372finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCP2x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCP2y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
8373finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCP3x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCP3y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
8374finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCP4x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCP4y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
8375finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCP5x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCP5y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
8376finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCP6x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCP6y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
8377finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCP7x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCP7y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
8378finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCP8x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCP8y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
8379finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCP9x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCP9y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");  
8380finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + op1x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + op1y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");  
8381//   alert(line_array[i]);
8382}
8383
8384else if (distanceworth < 60 && distanceworth >= 50) {    
8385var t=0.1111111
8386
8387var Ax = ( (1 - t) * p0x ) + (t * cp0x)
8388var Ay = ( (1 - t) * p0y ) + (t * cp0y)
8389var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
8390var By = ( (1 - t) * cp0y ) + (t * cp1y)
8391var Cx = ( (1 - t) * cp1x ) + (t * p1x)
8392var Cy = ( (1 - t) * cp1y ) + (t * p1y)
8393var Dx = ( (1 - t) * Ax ) + (t * Bx)
8394var Dy = ( (1 - t) * Ay ) + (t * By)
8395var Ex = ( (1 - t) * Bx ) + (t * Cx)
8396var Ey = ( (1 - t) * By ) + (t * Cy)
8397	
8398var CPfx = ( (1 - t) * Dx ) + (t * Ex)
8399var CPfy = ( (1 - t) * Dy ) + (t * Ey)
8400
8401
8402var t=0.2222222
8403
8404var Ax = ( (1 - t) * p0x ) + (t * cp0x)
8405var Ay = ( (1 - t) * p0y ) + (t * cp0y)
8406var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
8407var By = ( (1 - t) * cp0y ) + (t * cp1y)
8408var Cx = ( (1 - t) * cp1x ) + (t * p1x)
8409var Cy = ( (1 - t) * cp1y ) + (t * p1y)
8410var Dx = ( (1 - t) * Ax ) + (t * Bx)
8411var Dy = ( (1 - t) * Ay ) + (t * By)
8412var Ex = ( (1 - t) * Bx ) + (t * Cx)
8413var Ey = ( (1 - t) * By ) + (t * Cy)
8414	
8415var CP2x = ( (1 - t) * Dx ) + (t * Ex)
8416var CP2y = ( (1 - t) * Dy ) + (t * Ey)
8417
8418
8419var t=0.3333333
8420
8421var Ax = ( (1 - t) * p0x ) + (t * cp0x)
8422var Ay = ( (1 - t) * p0y ) + (t * cp0y)
8423var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
8424var By = ( (1 - t) * cp0y ) + (t * cp1y)
8425var Cx = ( (1 - t) * cp1x ) + (t * p1x)
8426var Cy = ( (1 - t) * cp1y ) + (t * p1y)
8427var Dx = ( (1 - t) * Ax ) + (t * Bx)
8428var Dy = ( (1 - t) * Ay ) + (t * By)
8429var Ex = ( (1 - t) * Bx ) + (t * Cx)
8430var Ey = ( (1 - t) * By ) + (t * Cy)
8431	
8432var CP3x = ( (1 - t) * Dx ) + (t * Ex)
8433var CP3y = ( (1 - t) * Dy ) + (t * Ey)
8434
8435
8436var t=0.4444444
8437
8438var Ax = ( (1 - t) * p0x ) + (t * cp0x)
8439var Ay = ( (1 - t) * p0y ) + (t * cp0y)
8440var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
8441var By = ( (1 - t) * cp0y ) + (t * cp1y)
8442var Cx = ( (1 - t) * cp1x ) + (t * p1x)
8443var Cy = ( (1 - t) * cp1y ) + (t * p1y)
8444var Dx = ( (1 - t) * Ax ) + (t * Bx)
8445var Dy = ( (1 - t) * Ay ) + (t * By)
8446var Ex = ( (1 - t) * Bx ) + (t * Cx)
8447var Ey = ( (1 - t) * By ) + (t * Cy)
8448	
8449var CP4x = ( (1 - t) * Dx ) + (t * Ex)
8450var CP4y = ( (1 - t) * Dy ) + (t * Ey)
8451
8452
8453var t=0.5555555
8454
8455var Ax = ( (1 - t) * p0x ) + (t * cp0x)
8456var Ay = ( (1 - t) * p0y ) + (t * cp0y)
8457var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
8458var By = ( (1 - t) * cp0y ) + (t * cp1y)
8459var Cx = ( (1 - t) * cp1x ) + (t * p1x)
8460var Cy = ( (1 - t) * cp1y ) + (t * p1y)
8461var Dx = ( (1 - t) * Ax ) + (t * Bx)
8462var Dy = ( (1 - t) * Ay ) + (t * By)
8463var Ex = ( (1 - t) * Bx ) + (t * Cx)
8464var Ey = ( (1 - t) * By ) + (t * Cy)
8465	
8466var CP5x = ( (1 - t) * Dx ) + (t * Ex)
8467var CP5y = ( (1 - t) * Dy ) + (t * Ey)
8468
8469
8470var t=0.6666666
8471
8472var Ax = ( (1 - t) * p0x ) + (t * cp0x)
8473var Ay = ( (1 - t) * p0y ) + (t * cp0y)
8474var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
8475var By = ( (1 - t) * cp0y ) + (t * cp1y)
8476var Cx = ( (1 - t) * cp1x ) + (t * p1x)
8477var Cy = ( (1 - t) * cp1y ) + (t * p1y)
8478var Dx = ( (1 - t) * Ax ) + (t * Bx)
8479var Dy = ( (1 - t) * Ay ) + (t * By)
8480var Ex = ( (1 - t) * Bx ) + (t * Cx)
8481var Ey = ( (1 - t) * By ) + (t * Cy)
8482	
8483var CP6x = ( (1 - t) * Dx ) + (t * Ex)
8484var CP6y = ( (1 - t) * Dy ) + (t * Ey)
8485
8486
8487var t=0.7777777
8488
8489var Ax = ( (1 - t) * p0x ) + (t * cp0x)
8490var Ay = ( (1 - t) * p0y ) + (t * cp0y)
8491var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
8492var By = ( (1 - t) * cp0y ) + (t * cp1y)
8493var Cx = ( (1 - t) * cp1x ) + (t * p1x)
8494var Cy = ( (1 - t) * cp1y ) + (t * p1y)
8495var Dx = ( (1 - t) * Ax ) + (t * Bx)
8496var Dy = ( (1 - t) * Ay ) + (t * By)
8497var Ex = ( (1 - t) * Bx ) + (t * Cx)
8498var Ey = ( (1 - t) * By ) + (t * Cy)
8499	
8500var CP7x = ( (1 - t) * Dx ) + (t * Ex)
8501var CP7y = ( (1 - t) * Dy ) + (t * Ey)
8502
8503
8504var t=0.8888888
8505
8506var Ax = ( (1 - t) * p0x ) + (t * cp0x)
8507var Ay = ( (1 - t) * p0y ) + (t * cp0y)
8508var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
8509var By = ( (1 - t) * cp0y ) + (t * cp1y)
8510var Cx = ( (1 - t) * cp1x ) + (t * p1x)
8511var Cy = ( (1 - t) * cp1y ) + (t * p1y)
8512var Dx = ( (1 - t) * Ax ) + (t * Bx)
8513var Dy = ( (1 - t) * Ay ) + (t * By)
8514var Ex = ( (1 - t) * Bx ) + (t * Cx)
8515var Ey = ( (1 - t) * By ) + (t * Cy)
8516	
8517var CP8x = ( (1 - t) * Dx ) + (t * Ex)
8518var CP8y = ( (1 - t) * Dy ) + (t * Ey)
8519
8520
8521var op0x = parseFloat(p0x) + parseFloat(OFFx) 
8522var oCPfx = parseFloat(CPfx) + parseFloat(OFFx) 
8523var oCP2x = parseFloat(CP2x) + parseFloat(OFFx) 
8524var oCP3x = parseFloat(CP3x) + parseFloat(OFFx) 
8525var oCP4x = parseFloat(CP4x) + parseFloat(OFFx) 
8526var oCP5x = parseFloat(CP5x) + parseFloat(OFFx) 
8527var oCP6x = parseFloat(CP6x) + parseFloat(OFFx) 
8528var oCP7x = parseFloat(CP7x) + parseFloat(OFFx) 
8529var oCP8x = parseFloat(CP8x) + parseFloat(OFFx) 
8530var op1x = parseFloat(p1x) + parseFloat(OFFx) 
8531
8532var op0y = parseFloat(p0y) + parseFloat(OFFy) 
8533var oCPfy = parseFloat(CPfy) + parseFloat(OFFy) 
8534var oCP2y = parseFloat(CP2y) + parseFloat(OFFy) 
8535var oCP3y = parseFloat(CP3y) + parseFloat(OFFy) 
8536var oCP4y = parseFloat(CP4y) + parseFloat(OFFy) 
8537var oCP5y = parseFloat(CP5y) + parseFloat(OFFy) 
8538var oCP6y = parseFloat(CP6y) + parseFloat(OFFy) 
8539var oCP7y = parseFloat(CP7y) + parseFloat(OFFy) 
8540var oCP8y = parseFloat(CP8y) + parseFloat(OFFy) 
8541var op1y = parseFloat(p1y) + parseFloat(OFFy) 
8542
8543finalproduct.push("ç.addUserPath()");
8544finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + op0x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + op0y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
8545finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCPfx.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCPfy.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
8546finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCP2x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCP2y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
8547finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCP3x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCP3y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
8548finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCP4x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCP4y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
8549finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCP5x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCP5y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
8550finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCP6x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCP6y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
8551finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCP7x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCP7y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
8552finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCP8x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCP8y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
8553finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + op1x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + op1y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");  
8554//   alert(line_array[i]);
8555}
8556
8557else if (distanceworth < 50 && distanceworth >= 40) {    
8558var t=0.125
8559
8560var Ax = ( (1 - t) * p0x ) + (t * cp0x)
8561var Ay = ( (1 - t) * p0y ) + (t * cp0y)
8562var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
8563var By = ( (1 - t) * cp0y ) + (t * cp1y)
8564var Cx = ( (1 - t) * cp1x ) + (t * p1x)
8565var Cy = ( (1 - t) * cp1y ) + (t * p1y)
8566var Dx = ( (1 - t) * Ax ) + (t * Bx)
8567var Dy = ( (1 - t) * Ay ) + (t * By)
8568var Ex = ( (1 - t) * Bx ) + (t * Cx)
8569var Ey = ( (1 - t) * By ) + (t * Cy)
8570	
8571var CPfx = ( (1 - t) * Dx ) + (t * Ex)
8572var CPfy = ( (1 - t) * Dy ) + (t * Ey)
8573
8574
8575var t=0.25
8576
8577var Ax = ( (1 - t) * p0x ) + (t * cp0x)
8578var Ay = ( (1 - t) * p0y ) + (t * cp0y)
8579var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
8580var By = ( (1 - t) * cp0y ) + (t * cp1y)
8581var Cx = ( (1 - t) * cp1x ) + (t * p1x)
8582var Cy = ( (1 - t) * cp1y ) + (t * p1y)
8583var Dx = ( (1 - t) * Ax ) + (t * Bx)
8584var Dy = ( (1 - t) * Ay ) + (t * By)
8585var Ex = ( (1 - t) * Bx ) + (t * Cx)
8586var Ey = ( (1 - t) * By ) + (t * Cy)
8587	
8588var CP2x = ( (1 - t) * Dx ) + (t * Ex)
8589var CP2y = ( (1 - t) * Dy ) + (t * Ey)
8590
8591
8592var t=0.375
8593
8594var Ax = ( (1 - t) * p0x ) + (t * cp0x)
8595var Ay = ( (1 - t) * p0y ) + (t * cp0y)
8596var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
8597var By = ( (1 - t) * cp0y ) + (t * cp1y)
8598var Cx = ( (1 - t) * cp1x ) + (t * p1x)
8599var Cy = ( (1 - t) * cp1y ) + (t * p1y)
8600var Dx = ( (1 - t) * Ax ) + (t * Bx)
8601var Dy = ( (1 - t) * Ay ) + (t * By)
8602var Ex = ( (1 - t) * Bx ) + (t * Cx)
8603var Ey = ( (1 - t) * By ) + (t * Cy)
8604	
8605var CP3x = ( (1 - t) * Dx ) + (t * Ex)
8606var CP3y = ( (1 - t) * Dy ) + (t * Ey)
8607
8608
8609var t=0.5
8610
8611var Ax = ( (1 - t) * p0x ) + (t * cp0x)
8612var Ay = ( (1 - t) * p0y ) + (t * cp0y)
8613var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
8614var By = ( (1 - t) * cp0y ) + (t * cp1y)
8615var Cx = ( (1 - t) * cp1x ) + (t * p1x)
8616var Cy = ( (1 - t) * cp1y ) + (t * p1y)
8617var Dx = ( (1 - t) * Ax ) + (t * Bx)
8618var Dy = ( (1 - t) * Ay ) + (t * By)
8619var Ex = ( (1 - t) * Bx ) + (t * Cx)
8620var Ey = ( (1 - t) * By ) + (t * Cy)
8621	
8622var CP4x = ( (1 - t) * Dx ) + (t * Ex)
8623var CP4y = ( (1 - t) * Dy ) + (t * Ey)
8624
8625
8626var t=0.625
8627
8628var Ax = ( (1 - t) * p0x ) + (t * cp0x)
8629var Ay = ( (1 - t) * p0y ) + (t * cp0y)
8630var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
8631var By = ( (1 - t) * cp0y ) + (t * cp1y)
8632var Cx = ( (1 - t) * cp1x ) + (t * p1x)
8633var Cy = ( (1 - t) * cp1y ) + (t * p1y)
8634var Dx = ( (1 - t) * Ax ) + (t * Bx)
8635var Dy = ( (1 - t) * Ay ) + (t * By)
8636var Ex = ( (1 - t) * Bx ) + (t * Cx)
8637var Ey = ( (1 - t) * By ) + (t * Cy)
8638	
8639var CP5x = ( (1 - t) * Dx ) + (t * Ex)
8640var CP5y = ( (1 - t) * Dy ) + (t * Ey)
8641
8642
8643var t=0.75
8644
8645var Ax = ( (1 - t) * p0x ) + (t * cp0x)
8646var Ay = ( (1 - t) * p0y ) + (t * cp0y)
8647var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
8648var By = ( (1 - t) * cp0y ) + (t * cp1y)
8649var Cx = ( (1 - t) * cp1x ) + (t * p1x)
8650var Cy = ( (1 - t) * cp1y ) + (t * p1y)
8651var Dx = ( (1 - t) * Ax ) + (t * Bx)
8652var Dy = ( (1 - t) * Ay ) + (t * By)
8653var Ex = ( (1 - t) * Bx ) + (t * Cx)
8654var Ey = ( (1 - t) * By ) + (t * Cy)
8655	
8656var CP6x = ( (1 - t) * Dx ) + (t * Ex)
8657var CP6y = ( (1 - t) * Dy ) + (t * Ey)
8658
8659
8660var t=0.875
8661
8662var Ax = ( (1 - t) * p0x ) + (t * cp0x)
8663var Ay = ( (1 - t) * p0y ) + (t * cp0y)
8664var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
8665var By = ( (1 - t) * cp0y ) + (t * cp1y)
8666var Cx = ( (1 - t) * cp1x ) + (t * p1x)
8667var Cy = ( (1 - t) * cp1y ) + (t * p1y)
8668var Dx = ( (1 - t) * Ax ) + (t * Bx)
8669var Dy = ( (1 - t) * Ay ) + (t * By)
8670var Ex = ( (1 - t) * Bx ) + (t * Cx)
8671var Ey = ( (1 - t) * By ) + (t * Cy)
8672	
8673var CP7x = ( (1 - t) * Dx ) + (t * Ex)
8674var CP7y = ( (1 - t) * Dy ) + (t * Ey)
8675
8676
8677var op0x = parseFloat(p0x) + parseFloat(OFFx) 
8678var oCPfx = parseFloat(CPfx) + parseFloat(OFFx) 
8679var oCP2x = parseFloat(CP2x) + parseFloat(OFFx) 
8680var oCP3x = parseFloat(CP3x) + parseFloat(OFFx) 
8681var oCP4x = parseFloat(CP4x) + parseFloat(OFFx) 
8682var oCP5x = parseFloat(CP5x) + parseFloat(OFFx) 
8683var oCP6x = parseFloat(CP6x) + parseFloat(OFFx) 
8684var oCP7x = parseFloat(CP7x) + parseFloat(OFFx) 
8685var op1x = parseFloat(p1x) + parseFloat(OFFx) 
8686
8687var op0y = parseFloat(p0y) + parseFloat(OFFy) 
8688var oCPfy = parseFloat(CPfy) + parseFloat(OFFy) 
8689var oCP2y = parseFloat(CP2y) + parseFloat(OFFy) 
8690var oCP3y = parseFloat(CP3y) + parseFloat(OFFy) 
8691var oCP4y = parseFloat(CP4y) + parseFloat(OFFy) 
8692var oCP5y = parseFloat(CP5y) + parseFloat(OFFy) 
8693var oCP6y = parseFloat(CP6y) + parseFloat(OFFy) 
8694var oCP7y = parseFloat(CP7y) + parseFloat(OFFy) 
8695var op1y = parseFloat(p1y) + parseFloat(OFFy) 
8696
8697finalproduct.push("ç.addUserPath()");
8698finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + op0x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + op0y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
8699finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCPfx.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCPfy.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
8700finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCP2x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCP2y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
8701finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCP3x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCP3y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
8702finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCP4x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCP4y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
8703finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCP5x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCP5y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
8704finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCP6x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCP6y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
8705finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCP7x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCP7y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
8706finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + op1x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + op1y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");  
8707//   alert(line_array[i]);
8708}
8709
8710else if (distanceworth < 40 && distanceworth >= 30) {    
8711var t=0.1428571
8712
8713var Ax = ( (1 - t) * p0x ) + (t * cp0x)
8714var Ay = ( (1 - t) * p0y ) + (t * cp0y)
8715var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
8716var By = ( (1 - t) * cp0y ) + (t * cp1y)
8717var Cx = ( (1 - t) * cp1x ) + (t * p1x)
8718var Cy = ( (1 - t) * cp1y ) + (t * p1y)
8719var Dx = ( (1 - t) * Ax ) + (t * Bx)
8720var Dy = ( (1 - t) * Ay ) + (t * By)
8721var Ex = ( (1 - t) * Bx ) + (t * Cx)
8722var Ey = ( (1 - t) * By ) + (t * Cy)
8723	
8724var CPfx = ( (1 - t) * Dx ) + (t * Ex)
8725var CPfy = ( (1 - t) * Dy ) + (t * Ey)
8726
8727
8728var t=0.2857142
8729
8730var Ax = ( (1 - t) * p0x ) + (t * cp0x)
8731var Ay = ( (1 - t) * p0y ) + (t * cp0y)
8732var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
8733var By = ( (1 - t) * cp0y ) + (t * cp1y)
8734var Cx = ( (1 - t) * cp1x ) + (t * p1x)
8735var Cy = ( (1 - t) * cp1y ) + (t * p1y)
8736var Dx = ( (1 - t) * Ax ) + (t * Bx)
8737var Dy = ( (1 - t) * Ay ) + (t * By)
8738var Ex = ( (1 - t) * Bx ) + (t * Cx)
8739var Ey = ( (1 - t) * By ) + (t * Cy)
8740	
8741var CP2x = ( (1 - t) * Dx ) + (t * Ex)
8742var CP2y = ( (1 - t) * Dy ) + (t * Ey)
8743
8744
8745var t=0.4285713
8746
8747var Ax = ( (1 - t) * p0x ) + (t * cp0x)
8748var Ay = ( (1 - t) * p0y ) + (t * cp0y)
8749var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
8750var By = ( (1 - t) * cp0y ) + (t * cp1y)
8751var Cx = ( (1 - t) * cp1x ) + (t * p1x)
8752var Cy = ( (1 - t) * cp1y ) + (t * p1y)
8753var Dx = ( (1 - t) * Ax ) + (t * Bx)
8754var Dy = ( (1 - t) * Ay ) + (t * By)
8755var Ex = ( (1 - t) * Bx ) + (t * Cx)
8756var Ey = ( (1 - t) * By ) + (t * Cy)
8757	
8758var CP3x = ( (1 - t) * Dx ) + (t * Ex)
8759var CP3y = ( (1 - t) * Dy ) + (t * Ey)
8760
8761
8762var t=0.5714284
8763
8764var Ax = ( (1 - t) * p0x ) + (t * cp0x)
8765var Ay = ( (1 - t) * p0y ) + (t * cp0y)
8766var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
8767var By = ( (1 - t) * cp0y ) + (t * cp1y)
8768var Cx = ( (1 - t) * cp1x ) + (t * p1x)
8769var Cy = ( (1 - t) * cp1y ) + (t * p1y)
8770var Dx = ( (1 - t) * Ax ) + (t * Bx)
8771var Dy = ( (1 - t) * Ay ) + (t * By)
8772var Ex = ( (1 - t) * Bx ) + (t * Cx)
8773var Ey = ( (1 - t) * By ) + (t * Cy)
8774	
8775var CP4x = ( (1 - t) * Dx ) + (t * Ex)
8776var CP4y = ( (1 - t) * Dy ) + (t * Ey)
8777
8778
8779var t=0.7142855
8780
8781var Ax = ( (1 - t) * p0x ) + (t * cp0x)
8782var Ay = ( (1 - t) * p0y ) + (t * cp0y)
8783var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
8784var By = ( (1 - t) * cp0y ) + (t * cp1y)
8785var Cx = ( (1 - t) * cp1x ) + (t * p1x)
8786var Cy = ( (1 - t) * cp1y ) + (t * p1y)
8787var Dx = ( (1 - t) * Ax ) + (t * Bx)
8788var Dy = ( (1 - t) * Ay ) + (t * By)
8789var Ex = ( (1 - t) * Bx ) + (t * Cx)
8790var Ey = ( (1 - t) * By ) + (t * Cy)
8791	
8792var CP5x = ( (1 - t) * Dx ) + (t * Ex)
8793var CP5y = ( (1 - t) * Dy ) + (t * Ey)
8794
8795
8796var t=0.8571426
8797
8798var Ax = ( (1 - t) * p0x ) + (t * cp0x)
8799var Ay = ( (1 - t) * p0y ) + (t * cp0y)
8800var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
8801var By = ( (1 - t) * cp0y ) + (t * cp1y)
8802var Cx = ( (1 - t) * cp1x ) + (t * p1x)
8803var Cy = ( (1 - t) * cp1y ) + (t * p1y)
8804var Dx = ( (1 - t) * Ax ) + (t * Bx)
8805var Dy = ( (1 - t) * Ay ) + (t * By)
8806var Ex = ( (1 - t) * Bx ) + (t * Cx)
8807var Ey = ( (1 - t) * By ) + (t * Cy)
8808	
8809var CP6x = ( (1 - t) * Dx ) + (t * Ex)
8810var CP6y = ( (1 - t) * Dy ) + (t * Ey)
8811
8812
8813var op0x = parseFloat(p0x) + parseFloat(OFFx) 
8814var oCPfx = parseFloat(CPfx) + parseFloat(OFFx) 
8815var oCP2x = parseFloat(CP2x) + parseFloat(OFFx) 
8816var oCP3x = parseFloat(CP3x) + parseFloat(OFFx) 
8817var oCP4x = parseFloat(CP4x) + parseFloat(OFFx) 
8818var oCP5x = parseFloat(CP5x) + parseFloat(OFFx) 
8819var oCP6x = parseFloat(CP6x) + parseFloat(OFFx) 
8820var op1x = parseFloat(p1x) + parseFloat(OFFx) 
8821
8822var op0y = parseFloat(p0y) + parseFloat(OFFy) 
8823var oCPfy = parseFloat(CPfy) + parseFloat(OFFy) 
8824var oCP2y = parseFloat(CP2y) + parseFloat(OFFy) 
8825var oCP3y = parseFloat(CP3y) + parseFloat(OFFy) 
8826var oCP4y = parseFloat(CP4y) + parseFloat(OFFy) 
8827var oCP5y = parseFloat(CP5y) + parseFloat(OFFy) 
8828var oCP6y = parseFloat(CP6y) + parseFloat(OFFy) 
8829var op1y = parseFloat(p1y) + parseFloat(OFFy) 
8830
8831finalproduct.push("ç.addUserPath()");
8832finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + op0x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + op0y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
8833finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCPfx.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCPfy.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
8834finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCP2x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCP2y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
8835finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCP3x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCP3y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
8836finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCP4x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCP4y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
8837finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCP5x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCP5y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
8838finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCP6x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCP6y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
8839finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + op1x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + op1y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");  
8840//   alert(line_array[i]);
8841}
8842
8843else if (distanceworth < 30 && distanceworth >= 20) {    
8844var t=0.166
8845
8846var Ax = ( (1 - t) * p0x ) + (t * cp0x)
8847var Ay = ( (1 - t) * p0y ) + (t * cp0y)
8848var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
8849var By = ( (1 - t) * cp0y ) + (t * cp1y)
8850var Cx = ( (1 - t) * cp1x ) + (t * p1x)
8851var Cy = ( (1 - t) * cp1y ) + (t * p1y)
8852var Dx = ( (1 - t) * Ax ) + (t * Bx)
8853var Dy = ( (1 - t) * Ay ) + (t * By)
8854var Ex = ( (1 - t) * Bx ) + (t * Cx)
8855var Ey = ( (1 - t) * By ) + (t * Cy)
8856	
8857var CPfx = ( (1 - t) * Dx ) + (t * Ex)
8858var CPfy = ( (1 - t) * Dy ) + (t * Ey)
8859
8860
8861var t=0.332
8862
8863var Ax = ( (1 - t) * p0x ) + (t * cp0x)
8864var Ay = ( (1 - t) * p0y ) + (t * cp0y)
8865var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
8866var By = ( (1 - t) * cp0y ) + (t * cp1y)
8867var Cx = ( (1 - t) * cp1x ) + (t * p1x)
8868var Cy = ( (1 - t) * cp1y ) + (t * p1y)
8869var Dx = ( (1 - t) * Ax ) + (t * Bx)
8870var Dy = ( (1 - t) * Ay ) + (t * By)
8871var Ex = ( (1 - t) * Bx ) + (t * Cx)
8872var Ey = ( (1 - t) * By ) + (t * Cy)
8873	
8874var CP2x = ( (1 - t) * Dx ) + (t * Ex)
8875var CP2y = ( (1 - t) * Dy ) + (t * Ey)
8876
8877
8878var t=0.498
8879
8880var Ax = ( (1 - t) * p0x ) + (t * cp0x)
8881var Ay = ( (1 - t) * p0y ) + (t * cp0y)
8882var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
8883var By = ( (1 - t) * cp0y ) + (t * cp1y)
8884var Cx = ( (1 - t) * cp1x ) + (t * p1x)
8885var Cy = ( (1 - t) * cp1y ) + (t * p1y)
8886var Dx = ( (1 - t) * Ax ) + (t * Bx)
8887var Dy = ( (1 - t) * Ay ) + (t * By)
8888var Ex = ( (1 - t) * Bx ) + (t * Cx)
8889var Ey = ( (1 - t) * By ) + (t * Cy)
8890	
8891var CP3x = ( (1 - t) * Dx ) + (t * Ex)
8892var CP3y = ( (1 - t) * Dy ) + (t * Ey)
8893
8894
8895var t=0.664
8896
8897var Ax = ( (1 - t) * p0x ) + (t * cp0x)
8898var Ay = ( (1 - t) * p0y ) + (t * cp0y)
8899var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
8900var By = ( (1 - t) * cp0y ) + (t * cp1y)
8901var Cx = ( (1 - t) * cp1x ) + (t * p1x)
8902var Cy = ( (1 - t) * cp1y ) + (t * p1y)
8903var Dx = ( (1 - t) * Ax ) + (t * Bx)
8904var Dy = ( (1 - t) * Ay ) + (t * By)
8905var Ex = ( (1 - t) * Bx ) + (t * Cx)
8906var Ey = ( (1 - t) * By ) + (t * Cy)
8907	
8908var CP4x = ( (1 - t) * Dx ) + (t * Ex)
8909var CP4y = ( (1 - t) * Dy ) + (t * Ey)
8910
8911
8912var t=0.83
8913
8914var Ax = ( (1 - t) * p0x ) + (t * cp0x)
8915var Ay = ( (1 - t) * p0y ) + (t * cp0y)
8916var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
8917var By = ( (1 - t) * cp0y ) + (t * cp1y)
8918var Cx = ( (1 - t) * cp1x ) + (t * p1x)
8919var Cy = ( (1 - t) * cp1y ) + (t * p1y)
8920var Dx = ( (1 - t) * Ax ) + (t * Bx)
8921var Dy = ( (1 - t) * Ay ) + (t * By)
8922var Ex = ( (1 - t) * Bx ) + (t * Cx)
8923var Ey = ( (1 - t) * By ) + (t * Cy)
8924	
8925var CP5x = ( (1 - t) * Dx ) + (t * Ex)
8926var CP5y = ( (1 - t) * Dy ) + (t * Ey)
8927
8928
8929var op0x = parseFloat(p0x) + parseFloat(OFFx) 
8930var oCPfx = parseFloat(CPfx) + parseFloat(OFFx) 
8931var oCP2x = parseFloat(CP2x) + parseFloat(OFFx) 
8932var oCP3x = parseFloat(CP3x) + parseFloat(OFFx) 
8933var oCP4x = parseFloat(CP4x) + parseFloat(OFFx) 
8934var oCP5x = parseFloat(CP5x) + parseFloat(OFFx) 
8935var op1x = parseFloat(p1x) + parseFloat(OFFx) 
8936
8937var op0y = parseFloat(p0y) + parseFloat(OFFy) 
8938var oCPfy = parseFloat(CPfy) + parseFloat(OFFy) 
8939var oCP2y = parseFloat(CP2y) + parseFloat(OFFy) 
8940var oCP3y = parseFloat(CP3y) + parseFloat(OFFy) 
8941var oCP4y = parseFloat(CP4y) + parseFloat(OFFy) 
8942var oCP5y = parseFloat(CP5y) + parseFloat(OFFy) 
8943var op1y = parseFloat(p1y) + parseFloat(OFFy) 
8944
8945finalproduct.push("ç.addUserPath()");
8946finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + op0x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + op0y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
8947finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCPfx.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCPfy.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
8948finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCP2x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCP2y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
8949finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCP3x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCP3y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
8950finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCP4x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCP4y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
8951finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCP5x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCP5y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
8952finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + op1x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + op1y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");  
8953//   alert(line_array[i]);
8954}
8955
8956else if (distanceworth < 20 && distanceworth >= 15) {    
8957var t=0.2
8958
8959var Ax = ( (1 - t) * p0x ) + (t * cp0x)
8960var Ay = ( (1 - t) * p0y ) + (t * cp0y)
8961var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
8962var By = ( (1 - t) * cp0y ) + (t * cp1y)
8963var Cx = ( (1 - t) * cp1x ) + (t * p1x)
8964var Cy = ( (1 - t) * cp1y ) + (t * p1y)
8965var Dx = ( (1 - t) * Ax ) + (t * Bx)
8966var Dy = ( (1 - t) * Ay ) + (t * By)
8967var Ex = ( (1 - t) * Bx ) + (t * Cx)
8968var Ey = ( (1 - t) * By ) + (t * Cy)
8969	
8970var CPfx = ( (1 - t) * Dx ) + (t * Ex)
8971var CPfy = ( (1 - t) * Dy ) + (t * Ey)
8972
8973
8974var t=0.4
8975
8976var Ax = ( (1 - t) * p0x ) + (t * cp0x)
8977var Ay = ( (1 - t) * p0y ) + (t * cp0y)
8978var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
8979var By = ( (1 - t) * cp0y ) + (t * cp1y)
8980var Cx = ( (1 - t) * cp1x ) + (t * p1x)
8981var Cy = ( (1 - t) * cp1y ) + (t * p1y)
8982var Dx = ( (1 - t) * Ax ) + (t * Bx)
8983var Dy = ( (1 - t) * Ay ) + (t * By)
8984var Ex = ( (1 - t) * Bx ) + (t * Cx)
8985var Ey = ( (1 - t) * By ) + (t * Cy)
8986	
8987var CP2x = ( (1 - t) * Dx ) + (t * Ex)
8988var CP2y = ( (1 - t) * Dy ) + (t * Ey)
8989
8990
8991var t=0.6
8992
8993var Ax = ( (1 - t) * p0x ) + (t * cp0x)
8994var Ay = ( (1 - t) * p0y ) + (t * cp0y)
8995var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
8996var By = ( (1 - t) * cp0y ) + (t * cp1y)
8997var Cx = ( (1 - t) * cp1x ) + (t * p1x)
8998var Cy = ( (1 - t) * cp1y ) + (t * p1y)
8999var Dx = ( (1 - t) * Ax ) + (t * Bx)
9000var Dy = ( (1 - t) * Ay ) + (t * By)
9001var Ex = ( (1 - t) * Bx ) + (t * Cx)
9002var Ey = ( (1 - t) * By ) + (t * Cy)
9003	
9004var CP3x = ( (1 - t) * Dx ) + (t * Ex)
9005var CP3y = ( (1 - t) * Dy ) + (t * Ey)
9006
9007
9008var t=0.8
9009
9010var Ax = ( (1 - t) * p0x ) + (t * cp0x)
9011var Ay = ( (1 - t) * p0y ) + (t * cp0y)
9012var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
9013var By = ( (1 - t) * cp0y ) + (t * cp1y)
9014var Cx = ( (1 - t) * cp1x ) + (t * p1x)
9015var Cy = ( (1 - t) * cp1y ) + (t * p1y)
9016var Dx = ( (1 - t) * Ax ) + (t * Bx)
9017var Dy = ( (1 - t) * Ay ) + (t * By)
9018var Ex = ( (1 - t) * Bx ) + (t * Cx)
9019var Ey = ( (1 - t) * By ) + (t * Cy)
9020	
9021var CP4x = ( (1 - t) * Dx ) + (t * Ex)
9022var CP4y = ( (1 - t) * Dy ) + (t * Ey)
9023
9024
9025
9026var op0x = parseFloat(p0x) + parseFloat(OFFx) 
9027var oCPfx = parseFloat(CPfx) + parseFloat(OFFx) 
9028var oCP2x = parseFloat(CP2x) + parseFloat(OFFx) 
9029var oCP3x = parseFloat(CP3x) + parseFloat(OFFx) 
9030var oCP4x = parseFloat(CP4x) + parseFloat(OFFx) 
9031var op1x = parseFloat(p1x) + parseFloat(OFFx) 
9032
9033var op0y = parseFloat(p0y) + parseFloat(OFFy) 
9034var oCPfy = parseFloat(CPfy) + parseFloat(OFFy) 
9035var oCP2y = parseFloat(CP2y) + parseFloat(OFFy) 
9036var oCP3y = parseFloat(CP3y) + parseFloat(OFFy) 
9037var oCP4y = parseFloat(CP4y) + parseFloat(OFFy) 
9038var op1y = parseFloat(p1y) + parseFloat(OFFy) 
9039
9040finalproduct.push("ç.addUserPath()");
9041finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + op0x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + op0y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
9042finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCPfx.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCPfy.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
9043finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCP2x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCP2y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
9044finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCP3x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCP3y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
9045finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCP4x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCP4y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
9046finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + op1x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + op1y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");  
9047//   alert(line_array[i]);
9048}
9049
9050else if (distanceworth < 15 && distanceworth >= 10) {    
9051var t=0.25
9052
9053var Ax = ( (1 - t) * p0x ) + (t * cp0x)
9054var Ay = ( (1 - t) * p0y ) + (t * cp0y)
9055var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
9056var By = ( (1 - t) * cp0y ) + (t * cp1y)
9057var Cx = ( (1 - t) * cp1x ) + (t * p1x)
9058var Cy = ( (1 - t) * cp1y ) + (t * p1y)
9059var Dx = ( (1 - t) * Ax ) + (t * Bx)
9060var Dy = ( (1 - t) * Ay ) + (t * By)
9061var Ex = ( (1 - t) * Bx ) + (t * Cx)
9062var Ey = ( (1 - t) * By ) + (t * Cy)
9063	
9064var CPfx = ( (1 - t) * Dx ) + (t * Ex)
9065var CPfy = ( (1 - t) * Dy ) + (t * Ey)
9066
9067
9068var t=0.5
9069
9070var Ax = ( (1 - t) * p0x ) + (t * cp0x)
9071var Ay = ( (1 - t) * p0y ) + (t * cp0y)
9072var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
9073var By = ( (1 - t) * cp0y ) + (t * cp1y)
9074var Cx = ( (1 - t) * cp1x ) + (t * p1x)
9075var Cy = ( (1 - t) * cp1y ) + (t * p1y)
9076var Dx = ( (1 - t) * Ax ) + (t * Bx)
9077var Dy = ( (1 - t) * Ay ) + (t * By)
9078var Ex = ( (1 - t) * Bx ) + (t * Cx)
9079var Ey = ( (1 - t) * By ) + (t * Cy)
9080	
9081var CP2x = ( (1 - t) * Dx ) + (t * Ex)
9082var CP2y = ( (1 - t) * Dy ) + (t * Ey)
9083
9084
9085var t=0.75
9086
9087var Ax = ( (1 - t) * p0x ) + (t * cp0x)
9088var Ay = ( (1 - t) * p0y ) + (t * cp0y)
9089var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
9090var By = ( (1 - t) * cp0y ) + (t * cp1y)
9091var Cx = ( (1 - t) * cp1x ) + (t * p1x)
9092var Cy = ( (1 - t) * cp1y ) + (t * p1y)
9093var Dx = ( (1 - t) * Ax ) + (t * Bx)
9094var Dy = ( (1 - t) * Ay ) + (t * By)
9095var Ex = ( (1 - t) * Bx ) + (t * Cx)
9096var Ey = ( (1 - t) * By ) + (t * Cy)
9097	
9098var CP3x = ( (1 - t) * Dx ) + (t * Ex)
9099var CP3y = ( (1 - t) * Dy ) + (t * Ey)
9100
9101
9102var op0x = parseFloat(p0x) + parseFloat(OFFx) 
9103var oCPfx = parseFloat(CPfx) + parseFloat(OFFx) 
9104var oCP2x = parseFloat(CP2x) + parseFloat(OFFx) 
9105var oCP3x = parseFloat(CP3x) + parseFloat(OFFx) 
9106var op1x = parseFloat(p1x) + parseFloat(OFFx) 
9107
9108var op0y = parseFloat(p0y) + parseFloat(OFFy) 
9109var oCPfy = parseFloat(CPfy) + parseFloat(OFFy) 
9110var oCP2y = parseFloat(CP2y) + parseFloat(OFFy) 
9111var oCP3y = parseFloat(CP3y) + parseFloat(OFFy) 
9112var op1y = parseFloat(p1y) + parseFloat(OFFy) 
9113
9114finalproduct.push("ç.addUserPath()");
9115finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + op0x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + op0y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
9116finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCPfx.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCPfy.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
9117finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCP2x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCP2y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
9118finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCP3x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCP3y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
9119finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + op1x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + op1y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");  
9120//   alert(line_array[i]);
9121}
9122
9123else if (distanceworth < 10 && distanceworth >= 5) {    
9124var t=0.33
9125
9126var Ax = ( (1 - t) * p0x ) + (t * cp0x)
9127var Ay = ( (1 - t) * p0y ) + (t * cp0y)
9128var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
9129var By = ( (1 - t) * cp0y ) + (t * cp1y)
9130var Cx = ( (1 - t) * cp1x ) + (t * p1x)
9131var Cy = ( (1 - t) * cp1y ) + (t * p1y)
9132var Dx = ( (1 - t) * Ax ) + (t * Bx)
9133var Dy = ( (1 - t) * Ay ) + (t * By)
9134var Ex = ( (1 - t) * Bx ) + (t * Cx)
9135var Ey = ( (1 - t) * By ) + (t * Cy)
9136	
9137var CPfx = ( (1 - t) * Dx ) + (t * Ex)
9138var CPfy = ( (1 - t) * Dy ) + (t * Ey)
9139
9140
9141var t=0.66
9142
9143var Ax = ( (1 - t) * p0x ) + (t * cp0x)
9144var Ay = ( (1 - t) * p0y ) + (t * cp0y)
9145var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
9146var By = ( (1 - t) * cp0y ) + (t * cp1y)
9147var Cx = ( (1 - t) * cp1x ) + (t * p1x)
9148var Cy = ( (1 - t) * cp1y ) + (t * p1y)
9149var Dx = ( (1 - t) * Ax ) + (t * Bx)
9150var Dy = ( (1 - t) * Ay ) + (t * By)
9151var Ex = ( (1 - t) * Bx ) + (t * Cx)
9152var Ey = ( (1 - t) * By ) + (t * Cy)
9153	
9154var CP2x = ( (1 - t) * Dx ) + (t * Ex)
9155var CP2y = ( (1 - t) * Dy ) + (t * Ey)
9156
9157
9158var op0x = parseFloat(p0x) + parseFloat(OFFx) 
9159var oCPfx = parseFloat(CPfx) + parseFloat(OFFx) 
9160var oCP2x = parseFloat(CP2x) + parseFloat(OFFx) 
9161var op1x = parseFloat(p1x) + parseFloat(OFFx) 
9162
9163var op0y = parseFloat(p0y) + parseFloat(OFFy) 
9164var oCPfy = parseFloat(CPfy) + parseFloat(OFFy) 
9165var oCP2y = parseFloat(CP2y) + parseFloat(OFFy) 
9166var op1y = parseFloat(p1y) + parseFloat(OFFy) 
9167
9168finalproduct.push("ç.addUserPath()");
9169finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + op0x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + op0y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
9170finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCPfx.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCPfy.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
9171finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCP2x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCP2y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
9172finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + op1x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + op1y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");  
9173//   alert(line_array[i]);
9174}
9175
9176else if (distanceworth < 5) {    
9177var t=0.5
9178
9179var Ax = ( (1 - t) * p0x ) + (t * cp0x)
9180var Ay = ( (1 - t) * p0y ) + (t * cp0y)
9181var Bx = ( (1 - t) * cp0x ) + (t * cp1x)
9182var By = ( (1 - t) * cp0y ) + (t * cp1y)
9183var Cx = ( (1 - t) * cp1x ) + (t * p1x)
9184var Cy = ( (1 - t) * cp1y ) + (t * p1y)
9185var Dx = ( (1 - t) * Ax ) + (t * Bx)
9186var Dy = ( (1 - t) * Ay ) + (t * By)
9187var Ex = ( (1 - t) * Bx ) + (t * Cx)
9188var Ey = ( (1 - t) * By ) + (t * Cy)
9189	
9190var CPfx = ( (1 - t) * Dx ) + (t * Ex)
9191var CPfy = ( (1 - t) * Dy ) + (t * Ey)
9192
9193
9194var op0x = parseFloat(p0x) + parseFloat(OFFx) 
9195var oCPfx = parseFloat(CPfx) + parseFloat(OFFx) 
9196var op1x = parseFloat(p1x) + parseFloat(OFFx) 
9197
9198var op0y = parseFloat(p0y) + parseFloat(OFFy) 
9199var oCPfy = parseFloat(CPfy) + parseFloat(OFFy) 
9200var op1y = parseFloat(p1y) + parseFloat(OFFy) 
9201
9202finalproduct.push("ç.addUserPath()");
9203finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + op0x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + op0y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
9204finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + oCPfx.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + oCPfy.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");
9205finalproduct.push("ç.addUserPathPoint([Math.round((a.local.leftTopX + (" + op1x.toFixed(1) + " + extrax) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION, Math.round((a.local.leftTopY + (" + op1y.toFixed(1) + " + extray) / a.local.zoom) * a.PATH_PRECISION) / a.PATH_PRECISION]);");  
9206//   alert(line_array[i]);
9207}
9208
9209  }
9210}
9211
9212var theend = finalproduct.join(";");
9213
9214eval(theend);
9215return
9216//return theend
9217}
9218
9219//place selected tool arrow on grab toolbar
9220 document.getElementById("arrowup").style.left = 474 - 8 + "px";
9221
9222//remove left menu
9223document.getElementsByClassName("menu")[0].parentNode.removeChild(document.getElementsByClassName("menu")[0]);
9224document.getElementsByClassName("content-container")[0].style.left = "0";
9225anondraw.collab.paint.resize();
9226
9227 //remove social media buttons
9228document.getElementsByClassName("at-share-btn-elements")[0].parentNode.removeChild(document.getElementsByClassName("at-share-btn-elements")[0]);	
9229
9230
9231 } else {
9232	 alert('Page not 100% loaded yet. Try again after few seconds!');
9233 } ;
9234 
9235 
9236
9237 
9238 
9239 
9240  //
9241 //
9242 //AnonProMod v1.6
9243 //
9244 //press ENTER (console)
9245 //or
9246 //press Ctrl+ENTER (snippets)