<commit_before><!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Control SORTING</title>
	<meta name="apple-mobile-web-app-capable" content="yes">
	<link href='http://fonts.googleapis.com/css?family=Raleway:300' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=PT+Sans:400' rel='stylesheet' type='text/css'>
	<!--<script src="https://cdn.socket.io/socket.io-1.0.6.js"></script>-->
	<script src="js/vendors/socket.io.js"></script>
	<!--<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js" charset="utf-8"></script>-->
	<script src="js/vendors/d3.min.js"></script>
	<link rel="stylesheet" href="css/control.css">
	<link rel="stylesheet" href="css/afun.css">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
</head>
<body>
	<div id="algorithms">
		<div id="headers">
			<h1>Left</h1>
			<h1>Right</h1>
		</div>	
		<div id="left" class="algos">
			<ul></ul>
		</div>
		<div id="right" class="algos">
			<ul></ul>
		</div>
	</div>
	<div id="controls">
		<div>
			<ul id="c1">
				<li class="c2">
					<a href="#" id="fastback"><i class="icon-fast-backward"></i><span>restart</span></a>
				</li>
				<li>
					<a href="#" id="back"><i class="icon-left-open"></i><span>step back</span></a>
				</li>
				<li>
					<a href="#" id="play"><i class="icon-play"></i><i class="icon-pause"></i><span class="play">play</span><span class="pause">pause</span></a>
				</li>
				<li>
					<a href="#" id="forward"><i class="icon-right-open"></i><span>step forward</span></a>
				</li>
				<li class="c2">
					<a href="#" id="fastforward"><i class="icon-fast-forward"></i><span>sort sequence</span></a>
				</li>
			</ul>
		</div>
	</div>
	<script>

		var sortingController={};

		;(function(){

			var is_touch_device = 'ontouchstart' in document.documentElement;
			
			var algorithms=[
				{
					name:"Quick Sort",
					file:"QuickSort3",
					O:"O(n log n)",
					active:true,
					position:"left"
				},
				{
					name:"Quick Sort 3-way",
					file:"QuickSort4",
					O:"O(n log n)",
					active:false
				},
				{
					name:"Heap Sort",
					file:"HeapSort",
					O:"O(n log n)",
					active:true,
					position:"right"
				},
				{
					name:"Smooth Sort",
					file:"SmoothSort",
					O:"O(n log n)",
					active:false
				},
				{
					name:"Shell Sort",
					file:"ShellSortShell",
					O:"Shell, 1959<br/>&Theta;(N&sup2;) [when N=2p]",
					active:false
				},
				{
					name:"Shell Sort",
					file:"ShellSortKnuth2",
					O:"Knuth, 1973<br/>&Theta;(N<sup>3/2</sup>)",
					active:false
				},
				{
					name:"Shell Sort",
					file:"ShellSortTokuda",
					O:"Tokuda, 1992<br/>&nbsp;",
					active:false
				},
				{
					name:"Shell Sort",
					file:"ShellSortCiura",
					O:"Ciura, 2001<br/>&nbsp;",
					active:false
				},
				{
					name:"Merge Sort",
					file:"MergeSort",
					O:"IN-PLACE Version<br/>O(n&sup2;)",
					active:false
				},
				{
					name:"Cycle Sort",
					file:"CycleSort",
					O:"O(n&sup2;)",
					active:false
				},
				{
					name:"Selection Sort",
					file:"SelectionSort",
					O:"O(n&sup2;)",
					active:false
				},
				{
					name:"Insertion Sort",
					file:"InsertionSort",
					O:"O(n&sup2;)",
					active:false
				},
				{
					name:"Gnome Sort",
					file:"GnomeSort",
					O:"O(n&sup2;)",
					active:false
				},
				{
					name:"Comb Sort",
					file:"CombSort",
					O:"&Omega;(n&sup2;/2<sup>p</sup>",
					active:false
				},
				{
					name:"Bubble Sort",
					file:"BubbleSort",
					O:"O(n&sup2;)",
					active:false
				},
				{
					name:"Cocktail Sort",
					file:"CocktailSort",
					O:"O(n&sup2;)",
					active:false
				},
				{
					name:"OddEven Sort",
					file:"OddEvenSort",
					O:"O(n&sup2;)",
					active:false
				},
				{
					name:"Radix Sort",
					file:"RadixSort",
					O:"Worst Case: O(kN)",
					active:false
				}
			];
			

			function SortingController() {
				
				var socket;
				this.active=true;
				var running=0;
				var self=this;

				this.activeTimeOut=null;

				var waitingTime = 15 * 1000;

				var current={
					left:"Quicksort3",
					right:"HeapSort"
				}

				var idleTO;


				var HEIGHT=window.innerHeight;

				d3.select("#algorithms")
						.selectAll(".algos")
						.style("height",(HEIGHT-50)+"px")



				this.getStatus=function() {
					//console.log("getStatus",running);
					return running;
				}
				this.setStatus=function(status) {
					running=status;
					//console.log("setStatus",running);
				}
				function initSocket() {
					//socket = io.connect('http://localhost:8080');
					socket = io.connect('http://sortingcontrol-littleark.rhcloud.com:8000');
					
					socket.on("open",function(data){
						console.log("open",data);
						if(data.status=="connected") {
							socket.emit("join","control-room");
						}
					});
					
					socket.on("close",function(data){
						console.log("close",data)
					});

					socket.on('error', function (reason){
						console.error('Unable to connect Socket.IO', reason);
					});

					socket.on('joined',function(message){
						console.log("joined",message);

						selectChart(message.algorithms[0],"left");
						selectChart(message.algorithms[1],"right");

						self.setStatus(message.playing);
						
						d3.select("#controls #play").classed("play",sortingController.getStatus());
					})

					socket.on('message',function(message){
						console.log("message",message);
					})

					
					socket.on('change-confirmed',function(status){
						console.log("change-confirmed",status);
					})

					socket.on('sorting-chart',function(status) {
						switch(status.action) {
							case 'pause':
								console.log("PAUSE","sorting-chart event",status);

								self.setStatus(false);
								d3.select("#controls #play").classed("play",self.getStatus());
								self.active=true;
								console.log("SET ACTIVE TO",self.active)
								console.log("pause "+self.active)
							break;
							case 'end':
								console.log("END","sorting-chart event",status)
								startIdleMode();
								self.active=true;
								console.log("SET ACTIVE TO",self.active)
								console.log("end "+self.active)
							break;
							case 'play':
								console.log("PLAY","sorting-chart event",status)
								clearIdleTimeout();
								self.setStatus(true);
								d3.select("#controls #play").classed("play",self.getStatus());
								self.active=true;
								console.log("SET ACTIVE TO",self.active)
								console.log("play "+self.active)
							break;
							case 'reset':

							break;
							default:
								console.log("sorting-chart event",status)
						};
					});

					socket.on("reset",function(){
						location.reload();
					})
				}
				initSocket();
				
				this.setCurrent=function(algo,position) {
					startIdleMode();
					current[position]=algo;
				}
				this.changeChart=function(position) {
					startIdleMode();
					self.active=false;
					console.log("SET ACTIVE TO",self.active)
					console.log("change "+self.active)
					socket.emit("control-chart",{action:"change",position:(position=="left")?0:1,algorithm:current[position]});
				}
				this.playChart=function() {
					startIdleMode();
					self.active=false;
					console.log("SET ACTIVE TO",self.active)
					socket.emit("control-chart",{action:"play"});
				}
				this.pauseChart=function() {
					startIdleMode();
					self.active=false;
					console.log("SET ACTIVE TO",self.active)
					socket.emit("control-chart",{action:"pause"});
				}
				this.forwardChart=function() {
					startIdleMode();
					socket.emit("control-chart",{action:"forward"});
				}
				this.backwardChart=function() {
					startIdleMode();
					socket.emit("control-chart",{action:"backward"});
				}
				this.fastforwardChart=function() {
					startIdleMode();
					socket.emit("control-chart",{action:"fastforward"});
				}
				this.fastbackChart=function() {
					startIdleMode();
					socket.emit("control-chart",{action:"fastback"});
				}

				function clearIdleTimeout() {
					if(typeof idleTO != 'undefined') {
						clearTimeout(idleTO);
						idleTO=null;
					}
				}

				function startIdleMode() {
					
					clearIdleTimeout();
					idleTO=setTimeout(function(){
						self.startPlaying();
					},waitingTime)
				}

				this.startPlaying=function() {
					var running=this.getStatus();
					
					if(!running) {
						this.pauseChart();
						this.playChart();

						this.setStatus(true);
							
					}

					d3.select("#controls #play").classed("play",this.getStatus());
				}

			}

			sortingController=new SortingController();

			document.addEventListener('paused', function start(e) {
				//var running=sorting.getStatus();
				
				d3.select("#controls #play").classed("play",running);
				//sorting.pause();
				sortingController.pauseChart();
			});
			d3.select("#controls #back")
				.on("click",function(d,i){
					d3.event.preventDefault();

					if(!sortingController.active) {
						console.log("not active")
						return;
					}

					sortingController.backwardChart();
					sortingController.setStatus(false);
					d3.select("#controls #play").classed("play",sortingController.getStatus());
					
					
				});
			d3.select("#controls #forward")
				.on("click",function(d,i){
					d3.event.preventDefault();

					if(!sortingController.active) {
						console.log("not active")
						return;
					}

					sortingController.forwardChart();
					//var running=sorting.getStatus();
					sortingController.setStatus(false);
					d3.select("#controls #play").classed("play",sortingController.getStatus());
					
				});
			d3.select("#controls #play")
				.on("click",function(d,i){
					d3.event.preventDefault();

					if(!sortingController.active) {
						console.log("not active")
						return;
					}

					var running=sortingController.getStatus();
					
					if(!running) {
						sortingController.pauseChart();
						sortingController.playChart();

						sortingController.setStatus(true);
							
					} else {
						sortingController.pauseChart();
						sortingController.setStatus(false);
					}

					d3.select(this).classed("play",sortingController.getStatus());
					
				});

			d3.select("#controls #fastback")
				.on("click",function(d,i){
					d3.event.preventDefault();

					if(!sortingController.active) {
						console.log("not active")
						return;
					}

					sortingController.fastbackChart();
					//var running=sorting.getStatus();
					sortingController.setStatus(false);
					d3.select("#controls #play").classed("play",sortingController.getStatus());

					
					
				});

			d3.select("#controls #fastforward")
				.on("click",function(d,i){
					d3.event.preventDefault();

					if(!sortingController.active) {
						console.log("not active")
						return;
					}

					sortingController.fastforwardChart();
					//var running=sorting.getStatus();
					sortingController.setStatus(false);
					d3.select("#controls #play").classed("play",sortingController.getStatus());
					
					
				});

			(["left","right"]).forEach(function(position){
				d3.select("#algorithms #"+position+" ul")
					.selectAll("li")
					.data(algorithms)
					.enter()
					.append("li")
						.append("a")
						.attr("class",function(d){
							return d.file;
						})
						.classed("selected",function(d){
							return d.active && d.position==position;
						})
						.attr("href","#")
							.html(function(d){
								return "<div class=\"info\">"+d.name+"<br/><i>"+d.O+"</i></div><span></span>";
							})
							/*.on("click",function(){
								d3.event.preventDefault();
							})*/
							//.on(is_touch_device?"touchend":"mousedown",function(d){
							.on("click",function(d){
								d3.event.preventDefault();
								d3.event.stopPropagation();
								


								if(!sortingController.active) {
									return;
								}
								/*
								if(sortingController.activeTimeOut) {
									clearTimeout(sortingController.activeTimeOut);
									sortingController.activeTimeOut=null;
								}
								*/



								if(!d3.select(this).classed("selected") && !d3.select(this).classed("unselectable")) {
									
									//also in changeChart, just to enforce it.
									self.active=false;

									sortingController.setStatus(false);
									d3.select("#controls #play").classed("play",sortingController.getStatus());

									selectChart(d.file,position)

									//sortingController.activeTimeOut=setTimeout(function(){
										sortingController.changeChart(position);	
									//},1000);
									


								}
								

							});
			});

			function selectChart(chart,position) {

				sortingController.setCurrent(chart,position);

				d3.selectAll("#algorithms #"+position+" li a.selected").classed("selected",false);
				d3.selectAll("#algorithms #"+position+" li a")
					.filter(function(d){
						return d.file==chart;
					})
					.classed("selected",true);

				d3.selectAll("#algorithms #"+(position=="left"?"right":"left")+" li a")
					.classed("unselectable",false)
					.filter(function(d){
						return d.file==chart;
					})
					.classed("unselectable",true);
			}
			




		}());
	</script>
</body>
</html><commit_msg>small change in the title<commit_after><!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Controls SORTING</title>
	<meta name="apple-mobile-web-app-capable" content="yes">
	<link href='http://fonts.googleapis.com/css?family=Raleway:300' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=PT+Sans:400' rel='stylesheet' type='text/css'>
	<!--<script src="https://cdn.socket.io/socket.io-1.0.6.js"></script>-->
	<script src="js/vendors/socket.io.js"></script>
	<!--<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js" charset="utf-8"></script>-->
	<script src="js/vendors/d3.min.js"></script>
	<link rel="stylesheet" href="css/control.css">
	<link rel="stylesheet" href="css/afun.css">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
</head>
<body>
	<div id="algorithms">
		<div id="headers">
			<h1>Left</h1>
			<h1>Right</h1>
		</div>	
		<div id="left" class="algos">
			<ul></ul>
		</div>
		<div id="right" class="algos">
			<ul></ul>
		</div>
	</div>
	<div id="controls">
		<div>
			<ul id="c1">
				<li class="c2">
					<a href="#" id="fastback"><i class="icon-fast-backward"></i><span>restart</span></a>
				</li>
				<li>
					<a href="#" id="back"><i class="icon-left-open"></i><span>step back</span></a>
				</li>
				<li>
					<a href="#" id="play"><i class="icon-play"></i><i class="icon-pause"></i><span class="play">play</span><span class="pause">pause</span></a>
				</li>
				<li>
					<a href="#" id="forward"><i class="icon-right-open"></i><span>step forward</span></a>
				</li>
				<li class="c2">
					<a href="#" id="fastforward"><i class="icon-fast-forward"></i><span>sort sequence</span></a>
				</li>
			</ul>
		</div>
	</div>
	<script>

		var sortingController={};

		;(function(){

			var is_touch_device = 'ontouchstart' in document.documentElement;
			
			var algorithms=[
				{
					name:"Quick Sort",
					file:"QuickSort3",
					O:"O(n log n)",
					active:true,
					position:"left"
				},
				{
					name:"Quick Sort 3-way",
					file:"QuickSort4",
					O:"O(n log n)",
					active:false
				},
				{
					name:"Heap Sort",
					file:"HeapSort",
					O:"O(n log n)",
					active:true,
					position:"right"
				},
				{
					name:"Smooth Sort",
					file:"SmoothSort",
					O:"O(n log n)",
					active:false
				},
				{
					name:"Shell Sort",
					file:"ShellSortShell",
					O:"Shell, 1959<br/>&Theta;(N&sup2;) [when N=2p]",
					active:false
				},
				{
					name:"Shell Sort",
					file:"ShellSortKnuth2",
					O:"Knuth, 1973<br/>&Theta;(N<sup>3/2</sup>)",
					active:false
				},
				{
					name:"Shell Sort",
					file:"ShellSortTokuda",
					O:"Tokuda, 1992<br/>&nbsp;",
					active:false
				},
				{
					name:"Shell Sort",
					file:"ShellSortCiura",
					O:"Ciura, 2001<br/>&nbsp;",
					active:false
				},
				{
					name:"Merge Sort",
					file:"MergeSort",
					O:"IN-PLACE Version<br/>O(n&sup2;)",
					active:false
				},
				{
					name:"Cycle Sort",
					file:"CycleSort",
					O:"O(n&sup2;)",
					active:false
				},
				{
					name:"Selection Sort",
					file:"SelectionSort",
					O:"O(n&sup2;)",
					active:false
				},
				{
					name:"Insertion Sort",
					file:"InsertionSort",
					O:"O(n&sup2;)",
					active:false
				},
				{
					name:"Gnome Sort",
					file:"GnomeSort",
					O:"O(n&sup2;)",
					active:false
				},
				{
					name:"Comb Sort",
					file:"CombSort",
					O:"&Omega;(n&sup2;/2<sup>p</sup>",
					active:false
				},
				{
					name:"Bubble Sort",
					file:"BubbleSort",
					O:"O(n&sup2;)",
					active:false
				},
				{
					name:"Cocktail Sort",
					file:"CocktailSort",
					O:"O(n&sup2;)",
					active:false
				},
				{
					name:"OddEven Sort",
					file:"OddEvenSort",
					O:"O(n&sup2;)",
					active:false
				},
				{
					name:"Radix Sort",
					file:"RadixSort",
					O:"Worst Case: O(kN)",
					active:false
				}
			];
			

			function SortingController() {
				
				var socket;
				this.active=true;
				var running=0;
				var self=this;

				this.activeTimeOut=null;

				var waitingTime = 15 * 1000;

				var current={
					left:"Quicksort3",
					right:"HeapSort"
				}

				var idleTO;


				var HEIGHT=window.innerHeight;

				d3.select("#algorithms")
						.selectAll(".algos")
						.style("height",(HEIGHT-50)+"px")



				this.getStatus=function() {
					//console.log("getStatus",running);
					return running;
				}
				this.setStatus=function(status) {
					running=status;
					//console.log("setStatus",running);
				}
				function initSocket() {
					//socket = io.connect('http://localhost:8080');
					socket = io.connect('http://sortingcontrol-littleark.rhcloud.com:8000');
					
					socket.on("open",function(data){
						console.log("open",data);
						if(data.status=="connected") {
							socket.emit("join","control-room");
						}
					});
					
					socket.on("close",function(data){
						console.log("close",data)
					});

					socket.on('error', function (reason){
						console.error('Unable to connect Socket.IO', reason);
					});

					socket.on('joined',function(message){
						console.log("joined",message);

						selectChart(message.algorithms[0],"left");
						selectChart(message.algorithms[1],"right");

						self.setStatus(message.playing);
						
						d3.select("#controls #play").classed("play",sortingController.getStatus());
					})

					socket.on('message',function(message){
						console.log("message",message);
					})

					
					socket.on('change-confirmed',function(status){
						console.log("change-confirmed",status);
					})

					socket.on('sorting-chart',function(status) {
						switch(status.action) {
							case 'pause':
								console.log("PAUSE","sorting-chart event",status);

								self.setStatus(false);
								d3.select("#controls #play").classed("play",self.getStatus());
								self.active=true;
								console.log("SET ACTIVE TO",self.active)
								console.log("pause "+self.active)
							break;
							case 'end':
								console.log("END","sorting-chart event",status)
								startIdleMode();
								self.active=true;
								console.log("SET ACTIVE TO",self.active)
								console.log("end "+self.active)
							break;
							case 'play':
								console.log("PLAY","sorting-chart event",status)
								clearIdleTimeout();
								self.setStatus(true);
								d3.select("#controls #play").classed("play",self.getStatus());
								self.active=true;
								console.log("SET ACTIVE TO",self.active)
								console.log("play "+self.active)
							break;
							case 'reset':

							break;
							default:
								console.log("sorting-chart event",status)
						};
					});

					socket.on("reset",function(){
						location.reload();
					})
				}
				initSocket();
				
				this.setCurrent=function(algo,position) {
					startIdleMode();
					current[position]=algo;
				}
				this.changeChart=function(position) {
					startIdleMode();
					self.active=false;
					console.log("SET ACTIVE TO",self.active)
					console.log("change "+self.active)
					socket.emit("control-chart",{action:"change",position:(position=="left")?0:1,algorithm:current[position]});
				}
				this.playChart=function() {
					startIdleMode();
					self.active=false;
					console.log("SET ACTIVE TO",self.active)
					socket.emit("control-chart",{action:"play"});
				}
				this.pauseChart=function() {
					startIdleMode();
					self.active=false;
					console.log("SET ACTIVE TO",self.active)
					socket.emit("control-chart",{action:"pause"});
				}
				this.forwardChart=function() {
					startIdleMode();
					socket.emit("control-chart",{action:"forward"});
				}
				this.backwardChart=function() {
					startIdleMode();
					socket.emit("control-chart",{action:"backward"});
				}
				this.fastforwardChart=function() {
					startIdleMode();
					socket.emit("control-chart",{action:"fastforward"});
				}
				this.fastbackChart=function() {
					startIdleMode();
					socket.emit("control-chart",{action:"fastback"});
				}

				function clearIdleTimeout() {
					if(typeof idleTO != 'undefined') {
						clearTimeout(idleTO);
						idleTO=null;
					}
				}

				function startIdleMode() {
					
					clearIdleTimeout();
					idleTO=setTimeout(function(){
						self.startPlaying();
					},waitingTime)
				}

				this.startPlaying=function() {
					var running=this.getStatus();
					
					if(!running) {
						this.pauseChart();
						this.playChart();

						this.setStatus(true);
							
					}

					d3.select("#controls #play").classed("play",this.getStatus());
				}

			}

			sortingController=new SortingController();

			document.addEventListener('paused', function start(e) {
				//var running=sorting.getStatus();
				
				d3.select("#controls #play").classed("play",running);
				//sorting.pause();
				sortingController.pauseChart();
			});
			d3.select("#controls #back")
				.on("click",function(d,i){
					d3.event.preventDefault();

					if(!sortingController.active) {
						console.log("not active")
						return;
					}

					sortingController.backwardChart();
					sortingController.setStatus(false);
					d3.select("#controls #play").classed("play",sortingController.getStatus());
					
					
				});
			d3.select("#controls #forward")
				.on("click",function(d,i){
					d3.event.preventDefault();

					if(!sortingController.active) {
						console.log("not active")
						return;
					}

					sortingController.forwardChart();
					//var running=sorting.getStatus();
					sortingController.setStatus(false);
					d3.select("#controls #play").classed("play",sortingController.getStatus());
					
				});
			d3.select("#controls #play")
				.on("click",function(d,i){
					d3.event.preventDefault();

					if(!sortingController.active) {
						console.log("not active")
						return;
					}

					var running=sortingController.getStatus();
					
					if(!running) {
						sortingController.pauseChart();
						sortingController.playChart();

						sortingController.setStatus(true);
							
					} else {
						sortingController.pauseChart();
						sortingController.setStatus(false);
					}

					d3.select(this).classed("play",sortingController.getStatus());
					
				});

			d3.select("#controls #fastback")
				.on("click",function(d,i){
					d3.event.preventDefault();

					if(!sortingController.active) {
						console.log("not active")
						return;
					}

					sortingController.fastbackChart();
					//var running=sorting.getStatus();
					sortingController.setStatus(false);
					d3.select("#controls #play").classed("play",sortingController.getStatus());

					
					
				});

			d3.select("#controls #fastforward")
				.on("click",function(d,i){
					d3.event.preventDefault();

					if(!sortingController.active) {
						console.log("not active")
						return;
					}

					sortingController.fastforwardChart();
					//var running=sorting.getStatus();
					sortingController.setStatus(false);
					d3.select("#controls #play").classed("play",sortingController.getStatus());
					
					
				});

			(["left","right"]).forEach(function(position){
				d3.select("#algorithms #"+position+" ul")
					.selectAll("li")
					.data(algorithms)
					.enter()
					.append("li")
						.append("a")
						.attr("class",function(d){
							return d.file;
						})
						.classed("selected",function(d){
							return d.active && d.position==position;
						})
						.attr("href","#")
							.html(function(d){
								return "<div class=\"info\">"+d.name+"<br/><i>"+d.O+"</i></div><span></span>";
							})
							/*.on("click",function(){
								d3.event.preventDefault();
							})*/
							//.on(is_touch_device?"touchend":"mousedown",function(d){
							.on("click",function(d){
								d3.event.preventDefault();
								d3.event.stopPropagation();
								


								if(!sortingController.active) {
									return;
								}
								/*
								if(sortingController.activeTimeOut) {
									clearTimeout(sortingController.activeTimeOut);
									sortingController.activeTimeOut=null;
								}
								*/



								if(!d3.select(this).classed("selected") && !d3.select(this).classed("unselectable")) {
									
									//also in changeChart, just to enforce it.
									self.active=false;

									sortingController.setStatus(false);
									d3.select("#controls #play").classed("play",sortingController.getStatus());

									selectChart(d.file,position)

									//sortingController.activeTimeOut=setTimeout(function(){
										sortingController.changeChart(position);	
									//},1000);
									


								}
								

							});
			});

			function selectChart(chart,position) {

				sortingController.setCurrent(chart,position);

				d3.selectAll("#algorithms #"+position+" li a.selected").classed("selected",false);
				d3.selectAll("#algorithms #"+position+" li a")
					.filter(function(d){
						return d.file==chart;
					})
					.classed("selected",true);

				d3.selectAll("#algorithms #"+(position=="left"?"right":"left")+" li a")
					.classed("unselectable",false)
					.filter(function(d){
						return d.file==chart;
					})
					.classed("unselectable",true);
			}
			




		}());
	</script>
</body>
</html>
{'fraction_non_alphanumeric': 0.18590886671472473, 'fraction_numerical': 0.009029859240429488, 'mean_word_length': 2.723407260912558, 'pattern_counts': {'":': 4, '<': 223, '<?xml version=': 0, '>': 223, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4375012', 'n_tokens_mistral': 12598, 'n_tokens_neox': 8605, 'n_words': 1127}