$(function () {

		'use strict';



		// scoreboxes
		let scoreBoxes = $('.score-box');
		scoreBoxes.each(function(){

			let boxes = $(this).find('.box');
			let totalBoxes = boxes.length;

			// set total number
			let scoreTotal = $('.score-total');
			scoreTotal.html(totalBoxes);

			// score given number
			let scoreGiven = $('.score-given');

			// hover a box
			boxes.each(function(){

				let prevBoxes = $(this).prevAll('.box');

				// on hover
				$(this).hover(function(){

					let number = $(this).data('number');
					scoreGiven.html(number);

					$(boxes).removeClass('active');

					$(this).addClass('active');
					prevBoxes.addClass('active');

				}, function() {

				  $(this).removeClass('active');
					prevBoxes.removeClass('active');

				});

				// on box click
				$(this).click(function(){
					boxes.not(this).removeClass('chosen-score');
					$(this).addClass('chosen-score');
                  
				});

			});


			// check if score is chosen on leave
			scoreBoxes.mouseleave(function() {

				let chosenScore = $(this).find('.chosen-score');
				let prevBoxes = $(chosenScore).prevAll('.box');
				let number = $(chosenScore).data('number');
              
                if (number!==undefined)
                {  

				chosenScore.addClass('active');
				prevBoxes.addClass('active');
				scoreGiven.html(number);
                }
              else
                scoreGiven.html('?');

			});

		});


	});


/*******************************************************************/
/* ftrtch dino */
/* [type: JS] [file:interaction-range] [171.748] DESIGN*/
/*******************************************************************/
/* 0.4 D>D */
/* db 162 */