
		/* ...............	Калькулятор переводит числа между системами счисления с основаниями от 2 до 36	......... */
																											   /*		 Версия от 29.03.16 			*/
	
	
	
	//---------------------------------- Оформление CSS ----------------------------------------------
	
	
	
	//Создаем элемент 'style' для оформления нашего калькулятора (функцию смотри вверху)
	var calcStyle = document.createElement('style');
	calcStyle.setAttribute('type','text/css');
	
	//Заполняем его содержимым
	calcStyle.innerHTML=
		'#systemCalc{'+					//Класс для всего калькулятора, т.е. элемента 'field'
			'position: relative;'+	
			'border: 3px;'+
			'border-radius: 5px;'+
			'border-color: #BFBFEE;'+
			'border-style: solid;'+
			'font-family: Arial;'+
			'font-size: 14px;'+
			'line-height: 1.5;'+			//Чтобы лучше читался текст
		'}'+
		
		'#legendSysCalc{'+				//Класс для элемента 'legend'
			'font-weight: bold;'+
		'}'+
		
		'table#calcTable tr td:nth-of-type(2){'+				//Выбираем в каждой строке вторую ячейку
			'text-align: right;'+									//Чтобы кнопка 'Перевести' расположилась справа
			'padding-left: 2em;'+									//Чтобы поля ввода не прилипали к тексту первых ячеек
		'}'+
				
		'table#calcTable tr td:nth-of-type(3){'+				//Выбираем в каждой строке третью ячейку
			'color: #C90000;'+
			'font-size: 13px;'+
			'text-indent: 1em;'+
		'}'+
		
		'table#calcTable tr td:nth-of-type(2) input{'+		//Применяем к 'input' в каждой строке во второй ячейке
			'width: 160px;'+
			'border: 1px;'+
			'border-radius: 2px;'+
			'border-color: #BFBFEE;'+
			'border-style: solid;'+
			'text-indent: 0.5em;'+
			'font-size: 14px;'+
			'padding-right: 0.5em;'+
		'}'+
		
		'#newNumber{'+							//Класс для поля с переведенным числом
			'color: orange;'+
			'font-weight: bold;'+
		'}'+
		
		
		'#calcButton{'+						//Класс для кнопки 'Перевести'
			'border: 1px;'+
			'border-radius: 2px;'+
			'border-color: #BFBFEE;'+
			'border-style: solid;'+
			'font-size: 13px;'+
			'background: linear-gradient(180deg, #DDDDFF, #FFFFFF);'+
			'cursor: pointer;'+
			'color: #8888AA;'+
		'}'+
		
		'#calcReset{'+							//Класс для кнопки 'Сброс'
			'border: 1px;'+
			'border-radius: 2px;'+
			'border-color: #BFBFEE;'+
			'border-style: solid;'+
			'font-size: 13px;'+
			'background: linear-gradient(180deg, #DDDDFF, #FFFFFF);'+
			'cursor: pointer;'+
			'color: #AAAABB;'+
		'}'+
		
		
		
		'#calcButton:hover, #calcReset:hover{'+				//Класс для кнопки 'Перевести' при наведении курсора
			'color: #000000;'+										//Шрифт становится черного цвета
			'border-color: #7E7EEE;'+
		'}'+
		
		'#calcImage{'+													//Класс для блока с рисунком
			'position: absolute;'+	
			'right: 0%;'+
			'bottom: -5%;'+
			'color: green;'+
			'font-size: 5em;'+
			'opacity: 0.2;'+
		'}';
		
		
		
		
	
	
	
	
	
	
	
	//Находим заголовок страницы 
	var headCalc = document.getElementsByTagName('head')[0];
	//Вставляем в него стили для оформления калькулятора
	headCalc.appendChild(calcStyle);
	
	//Создаем элемент 'fieldset' нашего калькулятора 
	var calcFieldset = document.createElement('fieldset');
	calcFieldset.setAttribute('id','systemCalc');
	
	//Заполняем его содержимым
	calcFieldset.innerHTML=
		'<legend id="legendSysCalc">Калькулятор перевода целых чисел A<sub>2-36</sub> &#8644; B<sub>2-36</sub>&nbsp;</legend>'+
		
		'<table id="calcTable">'+
			'<col id="col_1_calc"> <col id="col_2_calc"> <col id="col_2_calc">'+
			
			'<tr>'+
				'<td><label for="startSystem">Исходная система счисления</label></td>'+
				'<td><input id="startSystem" maxlength="2" value=""></td>'+
				'<td id="startSystemInfo"></td>'+
			'</tr>'+
			
			'<tr>'+
				'<td><label for="startNumber">Исходное число</label></td>'+   
				'<td><input id="startNumber" maxlength="200" value=""></td>'+
				'<td id="startNumberInfo"></td>'+
			'</tr>'+
		
			'<tr>'+
				'<td><label for="newSystem">Новая система счисления</label></td>'+
				'<td><input id="newSystem" maxlength="2" value=""></td>'+
				'<td id="newSystemInfo"></td>'+
			'</tr>'+
			
			'<tr>'+
				'<td><label for="newNumber">Переведенное число</label></td>'+
				'<td><input id="newNumber" maxlength="300" readonly></td>'+
				'<td id="newNumberInfo"></td>'+
			'</tr>'+
			
			'<tr>'+
				'<td></td>   <td><button id="calcReset">Сброс</button> &nbsp; &nbsp; <button id="calcButton">Перевести</button></td> 		<td id="calcButtonInfo"></td>'+
			'</tr>'+
					
		'</table>'+
		
		'<div id="calcImage">&#127796;</div>';
		

		
//	...................	Если нужно вставить калькулятор в другое место, следует переписать данный блок	........................
	
	
	//Находим элемент, в который будем вставлять калькулятор
	var parentDiv = document.getElementById('contentBlock');
	//Находим элемент, перед которым будем вставлять калькулятор
	var insertCalc = document.getElementById('insertCalc');
	//Вставляем калькулятор в нужное место 
	parentDiv.insertBefore(calcFieldset, insertCalc);
	
	
	
//......................................................................................................................................	




	//Находим поля ввода числа и оснований по их id.
	var startNumber = document.getElementById('startNumber');  
	var startSystem = document.getElementById('startSystem');
	var newSystem = document.getElementById('newSystem');
	 	 
	//Вешаем на них обработчик события 'oninput', которое возбуждается при вводе пользователем символа в поле ввода.
	startNumber.addEventListener('input', errorCalc);
	startSystem.addEventListener('input', errorCalc);
	newSystem.addEventListener('input', errorCalc);
	startSystem.addEventListener('blur', focusCalc);
	newSystem.addEventListener('blur', focusCalc);

	
	
	
	
	
	//Обрабатываем и проверяем введенные данные в полях калькулятора
	
	
	//Определим функцию соответствия символов в данной строке символам заданного массива.
	function matchLetterCalc(str, arr, inputFieldCalc){
		
		//Создадим массив для некорректных символов.
		var wrongSimbolsCalc=[];
		//Приведем строку (значение текущего поля ввода) к нижнему регистру и разобьем ее в массив по символам.
		str = str.split('');
		
		//Для полей ввода ноль не должен быть первой цифрой (незначащие нули убираем, т.к. числа целые)
		if(str[0]==0){
			//Поместим некорректный символ в массив.
			wrongSimbolsCalc.push(str[0]);
			//После чего удаляем ноль из поля ввода.
			str.splice(0,1);
		}
						
		//Для полей ввода основания СС максимальное значение основания может быть 36
		if((inputFieldCalc==startSystem||inputFieldCalc==newSystem)&&str.length>1&&inputFieldCalc.value>36){
						
			//Поместим заранее какой-нибудь некорректный символ в массив.
			wrongSimbolsCalc.push('f');
			//После чего удаляем все лишние символы, начиная со второго, из поля ввода.
			str.splice(1, str.length-1);
		}
				
				
		//Запустим цикл по всем символам str. 
		for(var i=0; i<str.length; i++){
			//Зададим счетчик совпадений.
			var matchCounterCalc=0;
		
			//А теперь зададим цикл по всем элементам массива.
			for(var k=0;k<arr.length;k++){
				//И сравним i-й символ переданной строки (В ЛЮБОМ РЕГИСТРЕ) со всеми символами переданного массива.
				if(str[i].toLowerCase()==arr[k]||str[i].toUpperCase()==arr[k]){
					//Если найдем соответствие, значит символ введденный пользователем корректен. Присвоим счетчику 1 и прервем внутренний цикл.
					matchCounterCalc=1;
					break;
				} 
			}
			//Если i-й символ переданной строки не совпал ни с одним из символов переданного массива,  
			if(matchCounterCalc==0){
				//то поместим некорректный символ в массив.
				wrongSimbolsCalc.push(str[i]);
				
				//Удаляем его.
				str.splice(str.indexOf(str[i]),1);
				//При этом элементы массива сместятся на 1 к началу, поэтому
				i=i-1;
			}
		}
		//Соберем строку назад.
		str = str.join('');
		//Вернем массив со строкой и массивом ошибок.
		return 	[str,wrongSimbolsCalc];	
	}
	
	
	
	
	
	
	
	
	
	
	//Определяем функцию вывода сообщения при получении фокуса полями для ввода оснований СС
	function focusCalc(){
		//Используем arguments функции для получения ее неявного параметра (это наш обработчик события) и далее объекта,
		//породившего это событие (это наше поле ввода input.
		var focusFieldCalc = arguments[0].currentTarget;
		
		if(focusFieldCalc.value=='1'){
			//Определяем соответствующую полю ввода ячейку таблицы в третьей невидимой колонке, куда будем писать сообщение.
			if(focusFieldCalc==startSystem){
				var errorFieldCalc = document.getElementById('startSystemInfo'); 
			}
			
			if(focusFieldCalc==newSystem){
				var errorFieldCalc = document.getElementById('newSystemInfo'); 
			}
						
			//Выводим сообщение, а затем убираем
			errorFieldCalc.innerHTML = 'Выберите основание от 2 до 36';
			
			//Если setTimeout был запущен при вводе числа, отменяем его
			clearTimeout(errorCalc.clearNameErrorCalcField);
			//Запускаем очистку через 1.5 секунды
			focusCalc.st = setTimeout(function(){errorFieldCalc.innerHTML = '';}, 1500);
		}
	}
	
	
	
	
	
	
	
	//Определяем функцию обработки введенных в поле ввода символов на соответствие допустимости ввода в данное поле.
	function errorCalc(){
		//Используем arguments функции для получения ее неявного параметра (это наш обработчик события) и далее объекта,
		//породившего это событие (это наше поле ввода input.
		var inputFieldCalc = arguments[0].currentTarget;
				
		
		if(inputFieldCalc==startSystem){
			//Определяем соответствующую полю ввода ячейку таблицы в третьей невидимой колонке, куда будем писать ошибки.
			var errorFieldCalc = document.getElementById('startSystemInfo'); 
			//Создадим массив из допустимых цифр 
			var letterArrayCalc = ['0','1','2','3','4','5','6','7','8','9'];
						
			//Иначе, очищаем поле для вывода ошибок при каждом вводе нового символа.
			errorFieldCalc.innerHTML = ''; 
					
			//Сбрасываем исходное число
			startNumber.value='';
			//Сбрасываем переведенное число
			newNumber.value='';
		}
		
		
		if(inputFieldCalc==startNumber){
			//Определяем соответствующую полю ввода ячейку таблицы в третьей невидимой колонке, куда будем писать ошибки.
			var errorFieldCalc = document.getElementById('startNumberInfo'); 
			//Создадим массив из букв латинского алфавита и цифр в зависимости от системы счисления
			var letterArrayCalc_0 = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
			//Массив будет урезаться в зависимости от введенного значения основания исходной СС 
			//Если исходная СС не указана, то все символы станут недопустимыми и будет выведено соответствующее сообщение (см. ниже)
			var letterArrayCalc = letterArrayCalc_0.slice(0, 1*startSystem.value);
			//Очищаем поле для вывода ошибок при каждом вводе нового символа.
			errorFieldCalc.innerHTML = '';
		}
		
				
		if(inputFieldCalc==newSystem){
			//Определяем соответствующую полю ввода ячейку таблицы в третьей невидимой колонке, куда будем писать ошибки.
			var errorFieldCalc = document.getElementById('newSystemInfo'); 
			//Создадим массив из допустимых цифр 
			var letterArrayCalc = ['0','1','2','3','4','5','6','7','8','9'];
						
			//Очищаем поле для вывода ошибок при каждом вводе нового символа.
			errorFieldCalc.innerHTML = ''; 
			
			//Сбрасываем переведенное число
			newNumber.value='';
		}
		
				
					
			//Вызовем функцию matchLetterCalc(inputFieldCalc.value, letterArrayCalc) для проверки введенного символа на корректность (если он был введен!)
		if(inputFieldCalc.value!=''){
			var m_1 = matchLetterCalc(inputFieldCalc.value, letterArrayCalc, inputFieldCalc)
			
			//Присвоим переменной возвращенный функцией массив ошибок. 
			var matchResultCalc = m_1[1];
			//А исправленную строку полю ввода.
			inputFieldCalc.value = m_1[0];
			//Переводим все в верхний регистр, как принято в системах счисления
			inputFieldCalc.value = inputFieldCalc.value.toUpperCase();
		

		
				//Если символ разрешен, то массив ошибок будет пустым
			if(matchResultCalc.length==0){
					//если предыдущий введенный символ был недопустимым, то для данного поля ввода был запущен метод setTimeout с задержкой 2 секунды.
					//Нужно его прервать (это нужно для первого в поле неверного символа). Если поле изменилось, то прерывать не нужно.
				if(errorCalc.inputFieldCalc==inputFieldCalc) clearTimeout(errorCalc.clearNameErrorCalcField);
			
			
				//Если же символ недопустим, то	длина массива будет больше нуля
			}else if(matchResultCalc.length>0){
				//если предыдущий введенный символ был недопустимым, то была запущен метод setTimeout с задержкой 2 секунды.
				//Нужно его прервать и запустить заново, но уже для символа, введенного только что.
				clearTimeout(errorCalc.clearNameErrorCalcField);
				
							
					//Для полей ввода оснований СС в соответствующую ячейку вывода ошибки пишем
				if(inputFieldCalc==startSystem||inputFieldCalc==newSystem){
					errorFieldCalc.innerHTML = 'Основание должно быть от 2 до 36';
				
					//Для поля ввода исходного числа
				}else if(inputFieldCalc==startNumber){	
						//Если исходная СС не была указана, то все символы стали недопустимыми (сообщаем об этом)
					if(startSystem.value==''||startSystem.value=='1'){
						//Сообщение покажем возле поля ввода исходной СС					
						errorFieldCalc=document.getElementById('startSystemInfo');
						errorFieldCalc.innerHTML='Укажите основание от 2 до 36';
					
						//Если первая цифра окажется нулем, выведем отдельное сообщение
					}else if(matchResultCalc[0]=='0'){
						errorFieldCalc.innerHTML = 'Незначащий &nbsp; 0 &nbsp; вводить не нужно';
						
						//Если вставили один другой недопустимый символ, сообщим об этом, выведя и сам символ
					}else if(matchResultCalc.length==1){
						errorFieldCalc.innerHTML = '\' ' + matchResultCalc + ' \'' + ' - ' + 'недопустимый символ в данной СС';
					
						//Если было введено сразу несколько недопустимых символов, например, при вставке из буфера	
					}else{
						errorFieldCalc.innerHTML = '\' ' + matchResultCalc + ' \'' + ' - ' + 'недопустимые символы в данной СС';
					}
				}
				
				
				//Очистим через 1.5 секунды поле вывода сообщения об ошибке.
				var clearNameErrorCalcField = setTimeout(function(){errorFieldCalc.innerHTML = '';}, 1500);
				
				//Чтобы прервать запущенный clearNameErrorCalcField в случае повторного ввода недопустимого символа ранее двух секунд
				//необходимо сохранить этот вызов между вызовами всей функции errorCalc().
				errorCalc.clearNameErrorCalcField = clearNameErrorCalcField;
				
				//Для сохранения информации о текущем поле ввода между вызовами функции присвоим его объект в свойство функции.				
				errorCalc.inputFieldCalc=inputFieldCalc;
			}
		}	
	}
	
	
	
	
	
	
	//Находим кнопку 'Перевести'
	var calcButton = document.getElementById('calcButton');
	calcButton.addEventListener('click', calculateNumber);
	//Находим поле вывода переведенного числа
	var newNumber = document.getElementById('newNumber');
	
	
	
	
	
	//Определяем функцию перевода числа
	function calculateNumber(){
		
			//Рассчет будет выполняться, если правильно заполнены все поля
		if(startNumber.value!=''&&startSystem.value!=''&&startSystem.value!='1'&&newSystem.value!=''&&newSystem.value!='1'){
			var a = startNumber.value;
			var b = startSystem.value;
			var c = newSystem.value;
			var d = '';
			
			//Создадим массив из цифр и букв латинского алфавита  
			var numberArrayCalc = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']; 
			
			//Если нужно перевести из 10-ной СС в другую (см. теорию статьи)
			if(b==10){
				//Будем делить, пока частное не станет равным нулю
				while(a>0){
					//Находим остатки от деления
					var r=a%c;
					//Записываем их в виде цифр новой системы в новое число (число будет получаться в виде строки)
					d=numberArrayCalc[r]+d;
					//Находим частное от деления
					a=(a-r)/c;
				}
				
			}else if(c==10){
				//Преобразуем строку с числом в массив с цифрами числа (в виде строк) и перевернем массив для правильного соответствия индексов и значений
				a=a.split('').reverse();
				//Задаем начальное значение суммы
				var s=0;
				for(var i=0;i<a.length;i++){
					//Считаем каждый член полинома в десятичной системе счисления (смотри теорию)
					s+= numberArrayCalc.indexOf(a[i])*Math.pow(b,i);
				}
				//Присваиваем переведенное в десятичную систему число (получится строка)
				d+=s;
				
			}else {
				//Сперва преобразуем число в десятичную систему счисления, а затем переведем в требуемую!!!
				
				//Преобразуем строку с числом в массив с цифрами числа (в виде строк) и перевернем массив
				a=a.split('').reverse();
				//Задаем начальное значение суммы
				var s=0;
				
				for(var i=0;i<a.length;i++){
					//Считаем каждый член полинома в десятичной системе счисления (смотри теорию)
					s+= numberArrayCalc.indexOf(a[i])*Math.pow(b,i);
				}
				//Присваиваем переведенное в десятичную систему число (получится строка)
				a=s;
				
				//Будем делить, пока частное не станет равным нулю
				while(a>0){
					//Находим остатки от деления
					var r=a%c;
					//Записываем их в виде цифр новой системы в новое число (число будет получаться в виде строки)
					d=numberArrayCalc[r]+d;
					//Находим частное от деления
					a=(a-r)/c;
				}	
			}
			newNumber.value=d;
			
			//Если поля были заполнены неправильно, выводим предупреждение
		}else{
			//Определяем соответствующую полю ввода ячейку таблицы в третьей невидимой колонке, куда будем писать ошибки.
			var errorFieldCalc = document.getElementById('calcButtonInfo'); 
			
			//Выводим предупреждение
			errorFieldCalc.innerHTML = 'Заполните правильно все поля';
			setTimeout(function(){errorFieldCalc.innerHTML = '';}, 2000);
		}	
	}
	
	
	
	//Находим кнопку 'Сброс'
	var calcReset = document.getElementById('calcReset');
	calcReset.addEventListener('click', calculateReset);
	
	
	function calculateReset(){
		startNumber.value='';
		startSystem.value='';
		newSystem.value='';
		newNumber.value='';
		
		startNumberInfo.innerHTML='';
		startSystemInfo.innerHTML='';
		newSystemInfo.innerHTML='';
		newNumberInfo.innerHTML='';
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
