var cases = document.getElementsByClassName("case");

var cases_el = document.getElementById("cases");

for (let i = cases.length - 1; i >= 0; i--) {	
	toggle_case(cases[i]);	
	draggable(cases[i]);
	initial_height_closed(cases[i]);
}

function draggable(e) {
	var  x, y, x_offset, y_offset, dragged = false;

	function drag_start(el) {
		console.log("start");
		el = el || window.event;
		el.preventDefault();
		x = el.clientX || el.targetTouches[0].pageX;
		y = el.clientY || el.targetTouches[0].pageY;
		x_offset = x - parseInt(e.offsetLeft);
		y_offset = y - parseInt(e.offsetTop);
		document.onmouseup = drag_stop;
		document.ontouchend = drag_stop;
		document.onmousemove = drag;
		document.ontouchmove = drag;
		// el.target.focus();
	}

	function drag(el) {
		el = el || window.event;
		el.preventDefault();

		let cx = el.clientX || el.touches[el.touches.length].pageX;
		let cy = el.clientY || el.touches[el.touches.length].pageY;

		if ((cx !== x) & (cy !== y)) {
			e.style.left = (cx - x_offset) + "px";
			e.style.top = (cy - y_offset) + "px";			
			if (!dragged)
				fix_cases_el_height(e);
			dragged = true;
		}
	}

	function drag_stop(el) {
		el = el || window.event;
		el.preventDefault();		
		document.onmouseup = null;
		document.ontouchend = null;
		document.onmousemove = null;
		document.ontouchmove = null;

		let cx = el.clientX || el.touches[el.touches.length].pageX;
		let cy = el.clientY || el.touches[el.touches.length].pageY;

		// if no move then collapse
		if ((cx == x) & (cy == y)) {
			toggle_case(e);
		}
	}

	e.onmousedown = drag_start;
	e.touchstart = drag_start;

}

function initial_height_closed(c) {
	c.initial_height_closed = c.offsetHeight;
}

function toggle_case(c) {	
	for (let i = c.children.length - 1; i >= 1; i--) {
		c.children[i].classList.toggle('hidden');		
		c.opened = !c.children[i].classList.contains('hidden')
	}


	if(c.opened) {
		// c.style.removeProperty('height');		
		c.classList.remove('close');
		fix_cases_height();
	} else {
		c.classList.add('close');
	}
}

function fix_cases_height(){
	for (let i = cases.length - 1; i >= 0; i--) {	
		if (!cases[i].opened) {
			cases[i].classList.add('close');
		}
	}
}

function fix_cases_el_height(e){
	let h = cases_el.offsetHeight;
	// e.style.position = 'absolute';
	for (let i = cases.length - 1; i >= 0; i--) {	
		cases[i].style.position = 'absolute';
	}

	cases_el.style.height = h + 'px';
}