var carousels = [];

class Carousel {
	constructor(obj) {
		this.obj = obj;
		this.current = 0;
		this.items = [];
		this.items_widths = [];
		for(var i = 0; i < this.obj.children.length; i ++) {
			var item = this.obj.children[i];
			if(item.classList.contains("carousel-item")) {
				this.items.push(item);
				this.items_widths.push(Math.min(item.offsetWidth, 128));
			}
		}
	}
	step() {
		this.current = (this.current+1) % this.items.length;
		var max_width = this.obj.offsetWidth;
		var width = 16*this.items.length;
		for(var i = 0; i < this.items.length; i ++) {
			var j = (i + this.current) % this.items.length;
			var item = this.items[j];
			if(!item.classList.contains("carousel-hidden")) {
				// Update width
				this.items_widths[j] = Math.min(item.offsetWidth, 128);
			}
			width += this.items_widths[j];
			if(width > max_width) {
				item.classList.add("carousel-hidden");
			} else {
				this.obj.appendChild(item);
				item.classList.remove("carousel-hidden");
			}
		}
	}
}

function step_carousels() {
	for(carousel of carousels) {
		carousel.step();
	}
}

window.onload = function() {
	for(obj of document.getElementsByClassName("carousel")) {
		carousels.push(new Carousel(obj))
	}
	step_carousels();
	setInterval(step_carousels, 2000);
};