Value selector circle

by pragya91

HTML

<body>
		<div id="eventContainer">
			<div id="circle-list">
			    
			</div>
		</div>
	</body>

CSS

#circle-list
			{

			    position:absolute;
			    margin:0;
			    padding:0;
			    list-style:none;
			    border:solid 2px solid black;
				width:400px;
				height:400px;
				top: 200px;
			    left: 300px;
			}
			
			#circle-list div
			{
			    display:block;
			    position:absolute;
			    background:#ccc;
			    font-family:arial;
			    width:30px;
			    height:30px;
			    line-height:30px;
			    text-align:center;
			    margin: 0px 0 0 0px;
			    border:2px solid pink;
			    
			    transition-property: top, left;
  				transition-duration: 0.2s, 0.2s;
			}
			#eventContainer{
				width:100%;
				height:1000px;
			}

JavaScript

(function() {
	var values = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
	var topLeft = [];
	var degree = values.length > 20 ? 360 / values.length : 20;
	var baseAngle = 0;
	var center = {
		x : 200,
		y : 200
	};
	var radius = 150;
	var nodeArray = [];
	var downY = 0;
	var prevY = 0, currY = 0;
	var threshold = 10, initThreshold = 10;
	var selectIndex = 0;
	var prevStep = 0;

	for (var i = 0; i < values.length; i++) {
		var angle = baseAngle + (i * degree);

		var x = radius * Math.cos(angle * (Math.PI / 180));
		var y = radius * Math.sin(angle * (Math.PI / 180));
		topLeft.push({
			top : y,
			left : x
		});
		nodeArray[i] = document.createElement("div");
		nodeArray[i].innerText = values[i];
		nodeArray[i].style.top = y + "px";
		nodeArray[i].style.left = x + "px";
		document.getElementById("circle-list").appendChild(nodeArray[i]);
	}
	threshold = Math.round(Math.abs(topLeft[1].top - topLeft[0].top));
	function rotateDivs(steps, direction) {
		var moveSteps = steps - prevStep;
		prevSteps = steps;
		if (direction == "clock") {
			for ( i = 0; i < nodeArray.length; i++) {
				nodeArray[i].style.top = topLeft[(i + moveSteps) % topLeft.length].top;
				nodeArray[i].style.left = topLeft[(i + moveSteps) % topLeft.length].left;
			}
		} else {
			for ( i = 0; i < nodeArray.length; i++) {
				if (moveSteps <= i) {
					console.log("i,(i-moveSteps)%topLeft.length", i, (i - moveSteps) % topLeft.length);
					nodeArray[i].style.top = topLeft[(i - moveSteps) % topLeft.length].top;
					nodeArray[i].style.left = topLeft[(i - moveSteps) % topLeft.length].left;
				} else {
					console.log("i,topLeft.length -i-moveSteps", i, topLeft.length - i - moveSteps);
					nodeArray[i].style.top = topLeft[(topLeft.length - i - moveSteps)].top;
					nodeArray[i].style.left = topLeft[(topLeft.length - i - moveSteps)].left;
				}

			}
		}

		console.log("steps", steps);

	}

	function mouseIsDown(e) {
		downY = prevY = e.pageY;
		document.addEventListener("mousemove",...