document.addEventListener('DOMContentLoaded', function () {
	var cartNumber = document.getElementById('card');
	var form = document.querySelector('form');
	var cardNameInput = form.elements[1];
	var errorInput = document.querySelector('#error');

	function callback(event) {
		var value = this.value;
		var cardName;

		if (value[0] == 4) {
			cardName = 'Visa';
		} else if (value[0] == 5) {
			cardName = 'MasterCard';
		} else if (value[0] == 3 && (value[1] == 4 || value[1] == 7)) {
			cardName = 'American!';
		} else {
			cardName = '';
		}

		cardNameInput.value = cardName;

		if (cardName == 'MasterCard' && value.length != 16) {

			errorInput.classList.remove('hidden');

		} else if (cardName == 'Visa' && (value.length < 13 || value.length > 16)) {
			errorInput.classList.remove('hidden');

		} else if (cardName == 'American!' && value.length != 15) {
			errorInput.classList.remove('hidden');

		} else {
			errorInput.classList.add('hidden');
		}
	}

	cartNumber.addEventListener('keyup', callback);
});