let config = {
	series: ["minor2", "major3"]
};
let c, snap;

const Series = function() {
	this.currentValue = "sin";
};
const addRow = function() {
	console.log("hi");
	let newRow = new Series();
	app.rows.push(newRow);
};

function init() {
	snap = Snap('svg');
	let el = document.getElementById("world");
	document.querySelector("#addRow").addEventListener("click", addRow);
	c = el.getContext("2d");
}

var app = new Vue({
	el: "#app",
	data: {
		intervals: {
			prime: 1,
			minor2: 1.067,
			major2: 1.125,
			minor3: 1.2,
			major3: 1.25,
			perfect4: 1.333,
			dim5: 1.414,
			perfect5: 1.5,
			minor6: 1.6,
			major6: 1.667,
			minor7: 1.778,
			major7: 1.875,
			octave: 2
		},
		paperWidth: 840,
		paperHeight: 1100,
		speed: 10,
		sliceHeight: 10,
		renderMode: 'svg',
		multiplier: 15,
		reverseScale: true,
		rows: [[{ interval: "perfect5" }]]
	},
	methods: {
		removeRow: function(index) {
			this.rows.splice(index, 1);
			this.draw();
		},
		clearSVG: function() {
			let elements = document.querySelectorAll("svg *");
			for (let i = 0; i < elements.length; i++) {
				elements[i].parentNode.removeChild(elements[i]);
			}
		},
		drawCanvas: function() {
			let series = this.rows;
			c.canvas.height = this.paperHeight;
			c.canvas.width = this.paperWidth;
			let width = this.paperWidth / series.length;
			let count = this.paperHeight / this.sliceHeight;
			for (let s = 0; s < series.length; s++) {
				let goingUp = true;
				let value = this.speed; // This can be used to adjust the 'speed'
				for (let i = 0; i < count; i++) {
					if (value > 255) {
						goingUp = false;
					} else if (value < this.speed) {
						goingUp = true;
					}
					if (goingUp) {
						value *= this.intervals[series[s].currentValue];
					} else {
						value /= this.intervals[series[s].currentValue];
					}
					c.fillStyle = "rgb(" + value + "," + value + "," + value + ")";
					c.fillRect(width * s, i * this.sliceHeight, width, this.sliceHeight);
				}
			}
		},
		drawSVG: function() {
			this.clearSVG();
			let c = snap;
			c.attr({
   			width: this.paperWidth,
				height: this.paperHeight
  			})
			let series = this.rows;
			let width = this.paperWidth / series.length;
			let count = this.paperHeight / this.sliceHeight;
			console.log(count)
			for (let s = 0; s < series.length; s++) {
				let goingUp = true;
				let value = this.speed; 
				for (let i = 0; i < count; i++) {
					if (value > 255) {
						if (this.reverseScale){
							goingUp = false;
						} else {
							value = 0;
						}
					} else if (value < this.speed) {
						goingUp = true;
					}
					if (goingUp || this.reverseScale === false) {
						value *= this.intervals[series[s].currentValue];
					} else {
						value /= this.intervals[series[s].currentValue];
					}
					//Let's generate the points
					let path = []
					let _value = value * this.multiplier;
					for (let j = 0; j < _value; j++){
						let x = (s * width) + (j * (width / _value));
						let y = i * this.sliceHeight;
						if (j % 2 == 0){ //even
							y += this.sliceHeight
						}
						path.push([x,y])
					}
					c.polyline(path)
				}
			}
		},
		draw: function() {
			this.drawCanvas();
			this.drawSVG();
		}
	}
});

document.addEventListener("DOMContentLoaded", function() {
	init();
});