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

let answers = [...words];
let orismoi = [
	'Επί Ηρακλείου η αυτοκρατορία χωρίστηκε σε',
    'Διάδοχος του Θεοδοσίου στο Ανατολικὀ τμἠμα',
    'Έδρα του Μαξιμιανού',
    'Το όνομα του βασιλιά των Φράγκων',
    'Έτσι η διαμάχη για τη λατρεία των εικόνων ονομάστηκε',
    'Ο τελευταίος ουσιαστικά Ρωμαἰος αυτοκράτορας',
	'Ο ιδρυτἠς του συστήματος της τετραρχἰας',
    'Ονομαζὀταν ο βοηθὀς του Αυγούστου',
    'Νέος το προσωνύμιο των διαδόχων του Ηρακλείου',
    'Επί Ιουστινιανού η Μεσόγειος ξαναγίνεται ρωμαϊκή',
    'Το καθεστώς των Γὀτθων που εγκαταστάθηκαν στην αυτοκρατορία',
	'Ασκούσε την πολιτική εξουσία στην επαρχία'
];
let solved  = 0;


const CWData = CWG(words)
console.log('CWData', CWData)


// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
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 )
	}
	

})
