var step = 100, time = 20;
var pane_width = 825, n_panes = 5;
var active = false, act_p = 0, mgn = 0, car_id, dir, stp;

function doMove() {
	mgn -= stp * dir;
	car_ph = document.getElementById(car_id);
	if((mgn * dir) >= (-1 * act_p * pane_width * dir)) {
		car_ph.style.margin = '0 0 0 ' + mgn + 'px';
	} else {
		mgn = -1 * act_p * pane_width;
		car_ph.style.margin = '0 0 0 ' + mgn + 'px';
		active = false;
		return;
	}
	setTimeout(doMove, time);
}

function move(id, d) {
	if(d == 'l') {
		if(act_p == 0) return;
		act_p -= 1; dir = -1;
	}
	if(d == 'r') {
		if(act_p == n_panes - 1) return;
		act_p += 1; dir = 1;
	}
	if(!active) {
		active = true;
		car_id = id;
		stp = step;
		doMove();
	}
}

function jump(id, idx) {
	idx -= 1;
	if(act_p == idx) return;
	dir = (act_p > idx) ? -1 : 1;
	stp = (idx - act_p) * dir > 1 ? step * 2 : step;
	act_p = idx;
	if(!active) {
		active = true;
		car_id = id;
		doMove();
	}
}

function pick_rnd(n, t) {
	ar = [];
	for(var i = 0; i < t; i++) ar[i] = i + 1;
	function rndord() { return (Math.round(Math.random()) - 0.5); }
	ar.sort(rndord);
	return ar.slice(0, n);
}

function show_rnd(name, n) {
	total = 1;
	while(true) {
		if(!(document.getElementById(name + total))) { total--; break; }
		total++;
	}
	rnd = pick_rnd(n, total);
	for(i = 0; i < rnd.length; i++)
		document.getElementById(name + rnd[i]).style.display = 'inline';
}