const pickerOptions = document.querySelectorAll('#orderPickerOptionsWrapper > img');
// get the list of angles that delimit the options in the picker
const øArray = [];
for(i=0, ø=(2 * Math.PI)/pickerOptions.length; i<pickerOptions.length; i++)
		øArray[i]=(i*ø) - (ø/2);


// add mouse event listeners 
const arrow = document.querySelector('#orderPickerArrow');
arrow.addEventListener('mousedown', () => {document.addEventListener('mousemove', onMouseMove)});
arrow.addEventListener('touchmove', () => {document.addEventListener('touchmove', onMouseMove)});
document.addEventListener('mouseup',() => {
	document.body.style.cursor = 'default';
	if(document.onmousemove !== undefined) document.removeEventListener('mousemove',onMouseMove);
})
document.addEventListener('touchend',() => {
	if(document.onmousemove !== undefined) document.removeEventListener('touchmove',onMouseMove);
})


// get the coordinates of the picker's topmost point (where the arrow resides at the beginning) – this will be the reference point for rotating the arrow later
const picker = document.querySelector('#orderPicker');
const pickerStyle = getComputedStyle(picker);
const x = picker.offsetLeft + (parseInt(pickerStyle['width'], 10) / 2);
const y = picker.offsetTop + (parseInt(pickerStyle['height'], 10) / 2);


const arrowWrapper = document.querySelector('#orderPickerArrowWrapper');
const optionWidth = pickerOptions[1].style.width;
const label = document.querySelector('#orderOptionSelectedName');
const pickerOptionsArray = Array.prototype.slice.call(pickerOptions);
/* The function to rotate arrow */
function onMouseMove(evt){
	// calculate the angle for the rotation, then rotate the arrow
	let ø = 0;
	if(evt.type=='touchmove')
		ø = -1 * Math.atan2(evt.touches[0].clientX - x, evt.touches[0].clientY - y) + Math.PI;
	else
		ø = -1 * Math.atan2(evt.clientX - x, evt.clientY - y) + Math.PI;
	arrowWrapper.style.transform = `rotate(${ø}rad)`;
	// remove any option's zoom in style
	let zoomedEle = pickerOptionsArray.find(element => {return element.style.width != optionWidth})
	if(zoomedEle) zoomedEle.style.width = optionWidth;
	// find the option the arrow rotated to and zoom in on it to select
	let i = øArray.indexOf(øArray.reduce((accumulator, currentValue)=>{
		if (currentValue<=ø && currentValue>=accumulator) return currentValue;
		else return accumulator;
	}));
	pickerOptions[i].style.width= '90px';
	// update the label (at the top of the picker) with the selected option
	label.textContent = pickerOptions[i].dataset.name;
}