var breakpoints = [320, 750, 1024, 1600];

var result = document.querySelector(".result"),
	ranges = document.querySelectorAll('input[type="range"]'),
	values = document.querySelectorAll('input[type="range"]+input'),
	live = document.querySelector(".live"),
	currentWidth = document.querySelector(".currentWidth");

function update(evt) {
	var bp = [];
	currentWidth.innerText = "(current width: " + document.body.clientWidth + ")";
	var isChangeSourceRange = true;
	if (evt) {
		isChangeSourceRange = evt.target.type.toString().toLowerCase() === "range";
		evt.preventDefault();
	}
	var last = 0;
	Array.prototype.forEach.call(ranges, function (r, i) {
		var val = parseInt(isChangeSourceRange ? r.value : values[i].value);
		val = val < last ? last + 1 : val;
		r.value = val;
		values[i].value = val;
		bp.push(val);
		var id = i + 1;
		var rect = document.querySelector(".vbp" + id);
		rect.setAttribute("width", val);
		// rect.setAttribute('x', last);
		var txt = document.querySelector(".vbpt" + id);
		txt.setAttribute("x", val + 2);
		txt.textContent = val;
		last = val;
	});
	generateMediaQueries(bp);
}

function init() {
	Array.prototype.forEach.call(ranges, function (r, i) {
		r.value = breakpoints[i];
		values[i].value = breakpoints[i];
	});
	Array.prototype.forEach.call(ranges, function (r, i) {
		r.addEventListener("input", update);
		values[i].addEventListener("change", update);
	});
	window.addEventListener("resize", update);
}

function generateMediaQueries(breakpoints) {
	var mq = [];
	var last = -1;

	breakpoints.forEach(function (bp) {
		if (last !== -1) {
			mq.push(bp);
		}
		mq.push(mq.length > 1 ? parseInt(bp) + 1 : bp);
		last = parseInt(bp);
	});

	var rules = "";
	(livecss = ""), (bp = 2);
	for (var i = 0; i < mq.length; i += 2) {
		var rule = "@media all and (min-width:" + mq[i] + "px)";
		if (mq[i + 1]) {
			rule += " and (max-width:" + mq[i + 1] + "px)";
		}
		var liveRule = rule;
		rule += " {\n   /* CSS rules here */\n}";
		liveRule +=
			" {\nrect:nth-child(" +
			bp +
			") {stroke: rgba(0,0,0,1);stroke-width: 5px;}\n}";
		bp++;
		// livecss+=liveRule;
		rules += rule + "\n\n";
	}
	result.value = rules;
	live.innerHTML = livecss;
}

init();
update();