<commit_before><!DOCTYPE HTML>
<html>
<head>
	 <script src="./js/MIDI/audioDetect.js" type="text/javascript"></script>
	<script src="./js/MIDI/loadPlugin.js" type="text/javascript"></script>
	<script src="./js/MIDI/Plugin.js" type="text/javascript"></script>
	<script src="./js/MIDI/Player.js" type="text/javascript"></script>
	<script src="./js/Window/DOMLoader.XMLHttp.js" type="text/javascript"></script>
	<script src="./js/Window/DOMLoader.script.js" type="text/javascript"></script>
	<!-- base64 packages -->
	<script src="./inc/Polyfill/Base64.js" type="text/javascript"></script>
	<script src="./inc/base64binary.js" type="text/javascript"></script>
	Awesome App
</head>

<body bgcolor= "black" onLoad='init();'>

	<style type="text/css">
		#container {
			position:absolute; left: 17%; top:50%; height:13em; width: 710px; margin-top:-5em ; 
			background-color: gray; 
			padding: 25px}
		#buttons {padding-bottom: 10px}
	</style>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

	<div id="container">
		<div id="buttons">
	  		<button type="button" id="start" class="buttons" style="height: 55px; width: 55px">
		    	<img src="img/start.png" style=" height: 40px ; width: 40 px">
			</button>
			<!--
	    	<button type="button" id="stop" style="height: 55px; width: 55px">
		    	<img src="img/stop.png" style="height: 40px ; width: 40 px">
			</button> -->
			<button type ="button" id="submit" class="buttons" style="height: 55px; width: 100px">
				<img src ="img/submit.png" style="height: 40px; width: 90 px">
			</button>
		</div>

	<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.1-beta2.js">
	</script>
	<script>
		// Musical shit
		var range = 14;
		var pentMaj = [0, 2, 4, 5, 7, 9, 11, 12, 14, 16, 17, 19, 21, 23, 24];

		var ready = false;
		var running = false;

        // creates a 20 x 6 array
	  	var boxes = new Array(20);
	  	for (var i = 0; i < 20; i++) {
	   		boxes[i] = new Array(6);
	  	}

		// Creates a stage
		var stage = new Kinetic.Stage({
			container: 'container',
			align: 'center',
			width: 900,
			height: 400
		});

        var layer1 = new Kinetic.Layer();
        var layer2 = new Kinetic.Layer();
        var timeLineLayer = new Kinetic.Layer();

        // displays the array of objects containing previous user's last bar
        for (var i = 0; i < 4; i++) {
        	for (var j = 0; j < range; j++) {

        		// request last bar from port
        		if (true) {
	        		boxes[i][j] = new Kinetic.Rect({
							col : i,
							row : j,
		        			isOn : false,
		        			x: i * 35,
		        			y: j * 25,
		        			width: 35,
		        			height: 25,
		        			fill: 'blue',
		        			stroke:'gray',
		        			strokeWidth:3,
		        			id: 'box' + i.toString() + j.toString()
		        	})
        		layer2.add(boxes[i][j]);
        		}
	        }
    	}
    	var greyStep = 151515;
	  	// Creates an array of objects containing a boolean and kinetic rectangles
		for(var i = 4; i < 20; i++) {
			for (var j = 0; j < range; j++) {
				boxes[i][j] = new Kinetic.Rect({
						col : i,
						row : j,
						isOn : false,
						x: /*Math.floor((i)/ 4) * 7 + */(i * 35),
						y: j * 25,
						width: 35,
						height: 25,
						fill: '#' + (Math.floor((i)/4) * greyStep),
						strokeWidth: 3,
						stroke: 'gray',
						id: 'box' + i.toString() + j.toString()
					})

				boxes[i][j].on('click', function() {
					console.log("this: " + this.id);
					console.log("col: " + this.col);
					console.log("width: " + this.width);
					if (this.isOn) {
						this.isOn = false;
						this.setFill('#' + (Math.floor((this.attrs.col)/4) * greyStep));
					} else {
						this.isOn = true;
				        this.setFill('red');
					}
	   	    		layer1.draw();
	   		   	});

				boxes[i][j].on('mouseover', function() {
					this.setFill('#993333');
	   	    		layer1.draw();
	   		   	});

				boxes[i][j].on('mouseout', function() {
					if (this.isOn) {
						this.setFill('red');
					} else {
						console.log(this.attrs.col);
				        this.setFill('#' + (Math.floor((this.attrs.col)/4) * greyStep));
					}
	   	    		layer1.draw();
	   		   	});

				layer1.add(boxes[i][j]);
			}
		}

		var timeLine = new Kinetic.Rect({
			x: 0,
			y: 0,
			width: 6,
			height: 350,
			fill: 'yellow',
			id: "time_line"
		});


		timeLineLayer.add(timeLine);
		stage.add(layer1);
		stage.add(layer2);
		stage.add(timeLineLayer);

      	var trans = null;

    	document.getElementById('start').addEventListener('click', function() {
    			if (ready & !running) {
    				running = true;
					timeLine.setAttrs({
			          x: 0
			        });

		  		    trans = timeLine.transitionTo({
		    	      x: 700,
			          duration: 5
		        	});

		        	MIDI.programChange(0, 0);

					for (i = 0; i < 20; i++) {
						for (j = 0; j < range; j++) {
							console.log("X: " + i + " Y: " + j);
							if (boxes[i][j].isOn) {
								var delay = i / 4
								var velocity = 100;
								MIDI.noteOn(0, (MIDI.pianoKeyOffset + 24) + pentMaj[range-1-j], velocity, delay);
								// TODO: Not ass notes MIDI.noteOff(0, (MIDI.pianoKeyOffset + 24) + pentMaj[range-1-j], i/4);
							}
						}
					}

					running = false;
				}
	    }, false);



	    document.getElementById('submit').addEventListener('click', function() {
        	if(trans) {
          	trans.stop();
 	       }

 	       //Creates output array of boolean

		  	var out = new Array(16);
		  	for (var i = 0; i < 16; i++) {
		   		out[i] = new Array(range);
		  	}


 	       	for (var i = 0; i < 16; i++) {
 	       		for (var j = 0; j < range; j++) {
 	       			out[i][j] = {
 	       				col : i,
 	       				row : j,
 	       				isOn : boxes[i+4][j].isOn 	       				
 	       			}
 	       		}
 		    }

 	       var jsonOut = JSON.stringify(out);
 	       console.log(jsonOut);

      	}, false);

      	function init() {
	    	MIDI.loadPlugin({
				soundfontUrl: "./soundfont/",
				instruments: [ "acoustic_grand_piano"], // or multiple instruments
				callback: function() {
					ready = true;
				}
			});
	    }

	</script>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html><commit_msg>fixed weird stuff<commit_after><!DOCTYPE HTML>
<html>
<head>
	 <script src="./js/MIDI/audioDetect.js" type="text/javascript"></script>
	<script src="./js/MIDI/loadPlugin.js" type="text/javascript"></script>
	<script src="./js/MIDI/Plugin.js" type="text/javascript"></script>
	<script src="./js/MIDI/Player.js" type="text/javascript"></script>
	<script src="./js/Window/DOMLoader.XMLHttp.js" type="text/javascript"></script>
	<script src="./js/Window/DOMLoader.script.js" type="text/javascript"></script>
	<!-- base64 packages -->
	<script src="./inc/Polyfill/Base64.js" type="text/javascript"></script>
	<script src="./inc/base64binary.js" type="text/javascript"></script>
	Awesome App
</head>

<body bgcolor= "black" onLoad='init();'>

	<style type="text/css">
		#container {
			position:absolute; left: 17%; top:50%; height:13em; width: 710px; margin-top:-5em ; 
			background-color: gray; 
			padding: 25px}
		#buttons {padding-bottom: 10px}
	</style>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

	<div id="container">
		<div id="buttons">
	  		<button type="button" id="start" class="buttons" style="height: 55px; width: 55px">
		    	<img src="img/start.png" style=" height: 40px ; width: 40 px">
			</button>
			<!--
	    	<button type="button" id="stop" style="height: 55px; width: 55px">
		    	<img src="img/stop.png" style="height: 40px ; width: 40 px">
			</button> -->
			<button type ="button" id="submit" class="buttons" style="height: 55px; width: 100px">
				<img src ="img/submit.png" style="height: 40px; width: 90 px">
			</button>
		</div>

	<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.1-beta2.js">
	</script>
	<script>
		// Musical shit
		var range = 14;
		var pentMaj = [0, 2, 4, 5, 7, 9, 11, 12, 14, 16, 17, 19, 21, 23, 24];

		var ready = false;
		var running = false;

        // creates a 20 x 6 array
	  	var boxes = new Array(20);
	  	for (var i = 0; i < 20; i++) {
	   		boxes[i] = new Array(6);
	  	}
		
		// Creates a stage
		var stage = new Kinetic.Stage({
			container: 'container',
			align: 'center',
			width: 900,
			height: 400
		});

        var layer1 = new Kinetic.Layer();
        var layer2 = new Kinetic.Layer();
        var timeLineLayer = new Kinetic.Layer();

        // displays the array of objects containing previous user's last bar
        for (var i = 0; i < 4; i++) {
        	for (var j = 0; j < range; j++) {

        		// request last bar from port
        		if (true) {
	        		boxes[i][j] = new Kinetic.Rect({
							col : i,
							row : j,
		        			isOn : false,
		        			x: i * 35,
		        			y: j * 25,
		        			width: 35,
		        			height: 25,
		        			fill: 'blue',
		        			stroke:'gray',
		        			strokeWidth:3,
		        			id: 'box' + i.toString() + j.toString()
		        	})
        		layer2.add(boxes[i][j]);
        		}
	        }
    	}
    	var greyStep = 151515;
	  	// Creates an array of objects containing a boolean and kinetic rectangles
		for(var i = 4; i < 20; i++) {
			for (var j = 0; j < range; j++) {
				boxes[i][j] = new Kinetic.Rect({
						col : i,
						row : j,
						isOn : false,
						x: /*Math.floor((i)/ 4) * 7 + */(i * 35),
						y: j * 25,
						width: 35,
						height: 25,
						fill: '#' + (Math.floor((i)/4) * greyStep),
						strokeWidth: 3,
						stroke: 'gray',
						id: 'box' + i.toString() + j.toString()
					})

				boxes[i][j].on('click', function() {
					console.log("this: " + this.id);
					console.log("col: " + this.col);
					console.log("width: " + this.width);
					if (this.isOn) {
						this.isOn = false;
						this.setFill('#' + (Math.floor((this.attrs.col)/4) * greyStep));
					} else {
						this.isOn = true;
				        this.setFill('red');
					}
	   	    		layer1.draw();
	   		   	});

				boxes[i][j].on('mouseover', function() {
					this.setFill('#993333');
	   	    		layer1.draw();
	   		   	});

				boxes[i][j].on('mouseout', function() {
					if (this.isOn) {
						this.setFill('red');
					} else {
						console.log(this.attrs.col);
				        this.setFill('#' + (Math.floor((this.attrs.col)/4) * greyStep));
					}
	   	    		layer1.draw();
	   		   	});

				layer1.add(boxes[i][j]);
			}
		}

		var timeLine = new Kinetic.Rect({
			x: 0,
			y: 0,
			width: 6,
			height: 350,
			fill: 'yellow',
			id: "time_line"
		});


		timeLineLayer.add(timeLine);
		stage.add(layer1);
		stage.add(layer2);
		stage.add(timeLineLayer);

      	var trans = null;

    	document.getElementById('start').addEventListener('click', function() {
    			if (ready & !running) {
    				running = true;
					timeLine.setAttrs({
			          x: 0
			        });

		  		    trans = timeLine.transitionTo({
		    	      x: 700,
			          duration: 5
		        	});

		        	MIDI.programChange(0, 0);

					for (i = 0; i < 20; i++) {
						for (j = 0; j < range; j++) {
							console.log("X: " + i + " Y: " + j);
							if (boxes[i][j].isOn) {
								var delay = i / 4
								var velocity = 100;
								MIDI.noteOn(0, (MIDI.pianoKeyOffset + 24) + pentMaj[range-1-j], velocity, delay);
								// TODO: Not ass notes MIDI.noteOff(0, (MIDI.pianoKeyOffset + 24) + pentMaj[range-1-j], i/4);
							}
						}
					}

					running = false;
				}
	    }, false);



	    document.getElementById('submit').addEventListener('click', function() {
        	if(trans) {
          	trans.stop();
 	       }

 	       //Creates output array of boolean

		  	var out = new Array(16);
		  	for (var i = 0; i < 16; i++) {
		   		out[i] = new Array(range);
		  	}


 	       	for (var i = 0; i < 16; i++) {
 	       		for (var j = 0; j < range; j++) {
 	       			out[i][j] = {
 	       				col : i,
 	       				row : j,
 	       				isOn : boxes[i+4][j].isOn 	       				
 	       			}
 	       		}
 		    }

 	       var jsonOut = JSON.stringify(out);
 	       console.log(jsonOut);

      	}, false);

      	function init() {
	    	MIDI.loadPlugin({
				soundfontUrl: "./soundfont/",
				instruments: [ "acoustic_grand_piano"], // or multiple instruments
				callback: function() {
					ready = true;
				}
			});
	    }

	</script>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
{'fraction_non_alphanumeric': 0.18452950558213715, 'fraction_numerical': 0.02934609250398724, 'mean_word_length': 2.0431933996602765, 'pattern_counts': {'":': 0, '<': 163, '<?xml version=': 0, '>': 143, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4754948', 'n_tokens_mistral': 5782, 'n_tokens_neox': 4533, 'n_words': 997}