// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
let words = [
	'ΑΡΓΕΑΔΩΝ',
	'ΜΟΝΑΡΧΙΑ',
	'ΤΕΤΡΑΡΧΙΕΣ',
	'ΕΘΝΙΚΟ',
	'ΤΑΓΟΣ',
	'ΔΩΡΙΚΑ',
	'ΜΟΛΟΣΣΟΙ',
	'ΜΑΚΕΔΟΝΙΑΣ',
	'ΜΕΓΑΛΟΓΑΙΟΚΤΗΜΟΝΕΣ',
	'ΒΑΡΒΑΡΟΥΣ',
	'ΔΗΜΟΣΘΕΝΗΣ',
	'ΙΣΟΚΡΑΤΗΣ',
	'ΟΜΟΣΠΟΝΔΙΑΚΟ',
	'ΤΥΡΑΝΝΟΣ',
]

let answers = [...words];
let orismoi = [
	'Μέχρι τα τέλη του 4ου αι. π.Χ. οι Μακεδόνες βασιλείς ανήκαν στη δυναστεία των .........',
    'Η πολιτική οργάνωση των Μακεδόνων και των Ηπειρωτών βασίστηκε στη ..........',
    'Η Θεσσαλία χωρίστηκε σε τέσσερα διοικητικά τμήματα που ονομάστηκαν ..........',
    'Ο θεσμός της βασιλείας στη Μακεδονία και στην Ήπειρο απέκτησε ......... χαρακτήρα.',
    '......... ονομαζόταν ο κοινός ηγέτης που αναγνώριζαν οι Θεσσαλοί σε περίπτωση πολέμου.',
    'Οι Ηπειρώτες αποτελούνταν από ......... φύλα που εγκαταστάθηκαν στην ευρύτερη περιοχή της Πίνδου.',
    'Ένα από τα ισχυρότερα ηπειρωτικά φύλα ήταν οι ..........',
    'Στα χρόνια της βασιλείας του Φιλίππου Β’ το κράτος της ......... ισχυροποιήθηκε.',
    'Σημαντικό πολιτικό ρόλο στη Θεσσαλία έπαιζαν οι ..........',
    'Αρχαίοι συγγραφείς, όπως ο Θουκυδίδης και ο Στράβων χαρακτήριζαν τους βόρειους Έλληνες ως .......... ',
    'Εναντίον του Φιλίππου Β’ και της επέκτασης της βασιλείας του στην υπόλοιπη Ελλάδα στράφηκε μέσα από τους λόγους του ο ..........',
    'Ο ......... ήταν υπέρμαχος της ανάδειξης ενός εθνικού ηγέτη που θα έβαζε τέλος στους μακροχρόνιους πολέμους μεταξύ των Ελλήνων.',
    'Η ίδρυση του «Κοινού των Ηπειρωτών» και του «Κοινού των Θεσσαλών» συνδέεται με τη μετάβαση των Ηπειρωτών και των Θεσσαλών, αντίστοιχα, σε ένα ......... σύστημα οργάνωσης.',
    'Μια ισχυρή κεντρική εξουσία σε όλη τη Θεσσαλία κατόρθωσε να επιβάλλει ο ......... των Φερών, Ιάσων.'
];
let solved  = 0;


const CWData = CWG(words)


// ΑΡΙΘΜΗΜΕΝΟ ΣΤΑΥΡΟΛΕΞΟ
// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
const gen = () => {
  //const words = $('key').value.split('\n').map(i => i.trim())
  //const answers = $('val').value.split('\n').map(i => i.trim())

  	if ( $('#ctnr').length ) {
	  	$('#ctnr').remove()
	  	$('#hint').remove()
  	}

	
  	const ctnr = $('<div id="ctnr">').css({
	  	height: 30 * CWData.height + 4,
      	width: 30 * CWData.width + 4,
  	})
  	const hint = $('<div id="hint">')
  	$('#crossword').append( ctnr )
  	$('#crossword').append( hint )

  	let count = 0
  	CWData.ownerMap.forEach((line, y) => {
    	line.forEach((obj, x) => {
		$('<input>')
			.attr('id', x + '' + y)
			.attr('data-letter', obj.letter)
			.attr('data-v', obj.v)
			.attr('data-h', obj.h)
			.attr('data-x', x)
			.attr('data-y', y)
			.attr('data-vidx', obj.vIdx)
			.attr('data-hidx', obj.hIdx)
			.attr('maxlength', 1)
			.attr('autocomplete', 'disabled')
			.css({
				left : 30 * x,
				top : 30 * y,
			}).appendTo( ctnr )
			
			
	if ( obj.vIdx === 0 ) {
		$('<div class="numb">').html(obj.v+1).appendTo( ctnr).css({
			left : (30 * x) - 0,
			top : (30 * y) - 16,
		})
	}
	if ( obj.hIdx === 0 ) {
		$('<div class="numb">').html(obj.h+1).appendTo( ctnr).css({
			left : (30 * x) - 36,
			top : (30 * y) + 2,
			'text-align': 'right',
		})
	}

      		count += 1
    	})
  	})

  	let doinVertically = null
	ctnr[0].addEventListener('focus', e => {
    	const el = e.target
    	const h = el.dataset.h
    	const v = el.dataset.v
    	hint.innerHTML = (h ? 'horizion：' + answers[h] : '') + (v ? '<br>vertical：' + answers[v] : '<br>')
  	}, true)

  	ctnr[0].addEventListener('click', e => {
		const el = e.target
		if (el.nodeName !== 'INPUT') return hint.innerHTML = ''
		const x = + el.dataset.x
		const y = + el.dataset.y
		if ($(`#${x}${y + 1}`).length) doinVertically = true
		else if ($(`#${x + 1}${y}`).length) doinVertically = false
		else doinVertically = null
  	})

  	ctnr[0].addEventListener('input', e => {
		const el = e.target
		const x = + el.dataset.x
		const y = + el.dataset.y
		if (e.data === el.dataset.letter) count -= 1
		if (count === 0) setTimeout(() => alert('ΣΥΓΧΑΡΗΤΗΡΙΑ!'), 4)
		const findNextEl = (x, y, v) => {
		  	const rtnEl = $(`#${x + !v}${y + v}`)
		  	if (!rtnEl.length) return el.blur()
		  	if (rtnEl.value) return findNextEl(x + !v, y + v, v)
		  	return rtnEl
		}
		const nextEl = findNextEl(x, y, doinVertically)
		if (nextEl) nextEl.focus()
  	})

}





// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
function createOrismoi(){
	let $orismoi = $('#orismoi')
	let $list = $('.orismoi-list')
	$('<div class="close-orismoi">')
		.appendTo( $orismoi )
		.click(r=>{ $orismoi.toggleClass('closed') })
	
	if ( $(window).width() <= 800 ) {
		setTimeout(r=>{
			$orismoi.addClass('closed')
		}, 1200)
	}
	
	orismoi.forEach((txt, idx) =>{
		$('<div class="txt">')
			.attr('data-idx', idx)
			.html( (idx+1)+'. '+txt ).appendTo( $list )
	})

	
	// solve selected
	//solve( 0 )
	//$list.find('.txt').first().addClass('solved');
	
}
function solve( idx ){
	if ( CWData.positionObjArr[idx].isHorizon ) {
		sel = `#crossword [data-h="${idx}"]`;
	} else {
		sel = `#crossword [data-v="${idx}"]`;
	}
	
	$( sel ).each(function(){
		$(this).addClass('solved')
			.val( $(this).attr('data-letter') )
	})
	$(`#orismoi .txt[data-idx="${idx}"]`).addClass('solved')
	solved++
}




// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
//$('#gen').onclick = gen
gen()
createOrismoi()

$('body').on('mouseenter', '#orismoi .txt', function(){
	let idx = $(this).attr('data-idx')
	$(`#crossword input[data-h="${idx}"]`).addClass('hovered')
	$(`#crossword input[data-v="${idx}"]`).addClass('hovered')
})
$('body').on('mouseleave', '#orismoi .txt', function(){
	$(`#crossword input`).removeClass('hovered')
})

$('body').on('mouseover', '#crossword input', function(){
	let h = $(this).attr('data-h')
	let v = $(this).attr('data-v')
	let tp;
	if ( h ) {
		tp = $(`#orismoi .txt[data-idx="${h}"]`).position().top;
console.log('H-tp ', tp)
		$(`#orismoi .txt[data-idx="${h}"]`).addClass('hovered')
		if ( tp < 0 )
			$('.orismoi-list').animate({ scrollTop: tp+80 }, 100);
		if ( tp > ($(window).height()-30) )
			$('.orismoi-list').animate({ scrollTop: tp-30 }, 100);
	} else if ( v ) {
console.log('V-tp ', tp)
		tp = $(`#orismoi .txt[data-idx="${v}"]`).position().top;
		$(`#orismoi .txt[data-idx="${v}"]`).addClass('hovered')
		if ( tp < 0 )
			$('.orismoi-list').animate({ scrollTop: tp+80 }, 100);
		if ( tp > ($(window).height()-30) )
			$('.orismoi-list').animate({ scrollTop: tp-30 }, 100);
	}
	
})
$('body').on('mouseleave', '#crossword input', function(){
	let h = $(this).attr('data-h')
	let v = $(this).attr('data-v')
	
	if ( h )
		$(`#orismoi .txt[data-idx="${h}"]`).removeClass('hovered')
	if ( v )
		$(`#orismoi .txt[data-idx="${v}"]`).removeClass('hovered')
	
})

$('body').on('change', '#crossword input', function(){
	let val = $(this).val()
	let correct = $(this).attr('data-letter')
	let h = $(this).attr('data-h')
	let v = $(this).attr('data-v')
	let hword = words[h]
	let vword = words[v]
	
	if ( h ) {
		let _wordH = "";
		$(`#crossword [data-h="${h}"]`).each(function(){
			_wordH += $(this).val().toUpperCase() || '*';
		})
		if ( _wordH == hword ) solve( h )
	}
	if ( v ) {
		let _wordV = "";
		$(`#crossword [data-v="${v}"]`).each(function(){
			_wordV += $(this).val().toUpperCase() || '*';
		})
		if ( _wordV == vword ) solve( v )
	}
	

})
