function Point(x, y) {
	this.x = x;
	this.y = y;
}

function Line(id, parentId, points) {
	this.id = id;
	this.parentId = parentId;
	this.points = points;
	this.segments = [];
	this.create();
}

Line.prototype.create = function() {
	for(var i=0; i<=this.points.length-2; i++) {
		this.segments[i] = document.createElement('div'); 
		this.segments[i].id = this.id + '_' + 'segment' + i;
		this.segments[i].className = 'segment';
		this.segments[i].style.display = 'none';
		document.getElementById(this.parentId).appendChild(this.segments[i]);
	}
}

Line.prototype.draw = function() {
	for(var i=0; i<=this.points.length-2; i++) {
		var x1 = this.points[i].x;
		var y1 = this.points[i].y;

		var x2 = this.points[i+1].x;
		var y2 = this.points[i+1].y;

		this.segments[i].style.top = Math.min(y1, y2) + 'px';
		this.segments[i].style.left = Math.min(x1, x2) + 'px';

		this.segments[i].style.width = Math.abs(x1 - x2) + 'px';
		this.segments[i].style.height = Math.abs(y1 - y2) + 'px';

		this.segments[i].style.display = 'block';
	}
}

function makeRandomLine() {
	var points_count = parseInt(document.getElementById('points_count').value)
	var dir = Math.random()<0.5;
	var points = [];
	var max_x = 800;
	var max_y = 600;

	points[0]= new Point(Math.floor(Math.random()*max_x), Math.floor(Math.random()*max_y));

	for(var i=1; i<=points_count-1; i++, dir = !dir) {
		points[i] = dir ? new Point(points[i-1].x, Math.floor(Math.random()*max_y))
										: new Point(Math.floor(Math.random()*max_x), points[i-1].y);
	}

	var parentId = 'linesContainer';
	document.getElementById(parentId).innerHTML = '';
	var line = new Line('line1', parentId, points);
	line.draw();
}

window.onload = function() {
	document.getElementById('refresh').onclick = makeRandomLine;
	makeRandomLine();
}