
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
let text = `<p>Από τον 4ο αιώνα , διάφορα γερμανικά φύλα εισέβαλαν στα εδάφη του Ρωμαϊκού κράτους και οργανώθηκαν σε βασίλεια. Όλες οι μετακινήσεις γερμανικών και μη φύλων στα εδάφη της Ρωμαϊκής Αυτοκρατορίας, ονομάστηκαν [Μεγάλες μεταναστεύσεις των λαών].<br>
Το σημαντικότερο ήταν το βασίλειο των Φράγκων που ίδρυσε ο [Χλωδοβίκος], γενάρχης της δυναστείας των [Μεροβιγγείων]. Μετά το θάνατό του το βασίλειο περιήλθε σε εκτεταμένη κρίση.<br>Το 732 ο [Μαγιορδόμος] Κάρολος Μαρτέλος αναχαίτισε την προέλαση των Αράβων στο [Πουατιέ] και το 751 αρχίζει η δυναστεία των [Καρολιδών] με τη στέψη του Πιπίνου ως [Ελέω θεού βασιλιάς].<br>Ο διάδοχός του Καρλομάγνος επεκτείνει το φραγκικό βασίλειο και δημιουργεί ένα πανίσχυρο χριστιανικό κράτος. Όταν το 800 στέφτηκε [Άγιος αυτοκράτορας των Ρωμαίων] προκλήθηκε διαμάχη ανάμεσα στη Δύση και στο Βυζάντιο.<br>Μετά το θάνατό του το φραγκικό βασίλειο τριχοτομήθηκε με τη [Συνθήκη Βερντέν].<br>Ο Όθων Α΄ στη συνέχεια ίδρυσε την [Αγία Ρωμαϊκή Αυτοκρατορία του Γερμανικού Έθνους], η οποία διαλύθηκε μετά τη [Μάχη του Αούστερλιτς]</p>`;
let blankText = '';
let moreWords = [
	'Μεδίνα',
	'Κρούμος',
	'Μάχη του Αούστερλιτς',
	'Κακώσεις',
	'Αναστήλωση',
	'Χάγανος',
	'Σκλαβηνίες',
];


let words = [];
let _words = [];
let prompt = 'Σύρετε τις λέξεις και αποθέστε τις στα κουτάκια';
let $main,
	$hovered;



fillTheBlanks();
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
function fillTheBlanks(){
	$main = $('#fill-blanks')
	
	getWordsFromText();
	$('#text').html( blankText )
	
	_words.forEach(w =>{
		let i = words.indexOf( w );
		$('<div class="word">').attr('alt', i)
			.html(w).appendTo('#words')
	})
	
	
	setTimeout(r=>{
		$('.word').each(function(){
			let xx = $(this).position().left
			let yy = $(this).position().top
			$(this).css({
				left	 : xx + 'px',
				top 	 : yy + 'px',
			})
		})
	}, 100)
	setTimeout(r=>{
		$('.word').each(function(){
			$(this).css({
				position : 'absolute',
			})
		})
	}, 200)
	
	setTimeout(dragNdrop, 300)
	
}



// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
function getWordsFromText(){
	var newTxt = text.split('[');
	for (var i = 1; i < newTxt.length; i++) {
		words.push( newTxt[i].split(']')[0] )
	}
	blankText = text;
	words.forEach((w,i) =>{
		blankText =
			blankText.replace(`[${w}]`, `<i alt="${i}"></i>`)
	})
	_words = [...words, ...moreWords]
	_words = act_shuffleArray( _words )

}


// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
function dragNdrop(){

	$('.word').pep({
		droppable : '#text i',
		activeClass : 'dragged',
		droppableActiveClass : 'hovered',
		initiate : function(){
			let firstTop = $(this.el).css('top')
			let firstLeft = $(this.el).css('left') || '0px'
			if ( ! $(this.el).attr('data-top') ) {
				$(this.el).attr('data-top', firstTop)
				$(this.el).attr('data-left', firstLeft)
			}

			
			$(this.el).css('left', $(this.el).position().left)
			$(this.el).css('top', $(this.el).position().top)
		},
		start : function(){

			$(this.el).css('z-index', 99).removeClass('fixed')
				.appendTo('#words')
			$hovered = this.activeDropRegions[0] || false
			
			let firstTop = $(this.el).attr('data-top')
			let firstLeft = $(this.el).attr('data-left')
			let thisTop  = $(this.el).css('top')
			let thisLeft  = $(this.el).css('left')
			if ( firstTop != thisTop ){
				$(this.el).css('top', firstTop)
			}
			if ( firstLeft != thisLeft ){
				$(this.el).css('left', firstLeft)
			}
			
			
			let socket = $(this.el).attr('data-socket')
			$(`#text i[alt="${socket}"]`).removeClass('full');
			$(this.el).attr('data-socket', null)
				
		},
		stop  : function(){
			$(this.el).removeClass('dragged')

			$hovered = this.activeDropRegions[0] || false
			$(this.el)
				.attr('data-socket', null)
				.removeClass('fixed')

			if ( $hovered ){
				let socket = $hovered.attr('alt')
				fixWordToSocket( $(this.el), socket)

			}
			$('#text i').removeClass('hovered')
			
		},
        drag: function(ev, obj){
			const edgeThreshold = 40;
			const scrollSpeed = 20;

			// Handle both mouse and touch events
			const clientY = ev.clientY || (ev.touches && ev.touches[0] ? ev.touches[0].clientY : 0);
			const windowHeight = window.innerHeight;
			
			let scrolled = false;
			
			if (clientY < edgeThreshold) {
				console.log('********************** EDGE')
				// Store current position before scroll
				const currentTop = parseInt($(this.el).css('top'));
				
				// Scroll the page
				document.body.scrollBy({ top: -scrollSpeed, behavior: 'auto' });
				document.documentElement.scrollTop -= scrollSpeed;
				
				// Adjust element position to compensate for scroll
				//$(this.el).css('top', (currentTop - scrollSpeed) + 'px');
				scrolled = true;
			}
			
			if (clientY > windowHeight - edgeThreshold) {
				console.log('********************** BOTTOM EDGE')
				// Store current position before scroll
				const currentTop = parseInt($(this.el).css('top'));
				
				// Scroll the page
				document.body.scrollBy({ top: scrollSpeed, behavior: 'auto' });
				document.documentElement.scrollTop += scrollSpeed;
				
				// Adjust element position to compensate for scroll
				//$(this.el).css('top', (currentTop + scrollSpeed) + 'px');
				scrolled = true;
			}
        }
	})
}
// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
function fixWordToSocket( $el, socket ){

	let $socket = $(`#text i[alt="${socket}"]`)
	if ( $socket.is('.full') ) return;

	$el.addClass('fixed').attr('data-socket', socket)
	$el.appendTo( $socket )
	$socket.addClass('full')

	let fixedCount = 0;
	setTimeout(r=>{
		fixedCount = $('#text i.full').length
		if ( fixedCount == words.length ) allSocketsFull();
	}, 10)


}
// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
function allSocketsFull(){
	let playerWords = []
	$('#text i.full .word').each(function(){
		playerWords.push( $(this).text() )
	})
		
	$('#final').empty();
	
	if ( playerWords.join(',') == words.join(',') ){
		
		$('#words .word').fadeOut(300);
		$('<div class="message">')
			.addClass('success')
			.html('Συγχαρητήρια! Όλα τα κενά καλύφθηκαν με τις σωστές λέξεις.')
			.appendTo('#final')
			.click(function(){
				$(this).remove()
				$('#final').css('opacity', 0)
			})
		
	} else {
		let score = 0;
		playerWords.forEach((w,i)=>{
			if ( w == words[i] ) score++
		})
		$('<div class="message">')
			.html(`'Εχετε ${score} από τις ${words.length} λέξεις σωστές. Συνεχίστε την προσπάθεια.`)
			.appendTo('#final')
			.click(function(){
				$(this).remove()
				$('#final').css('opacity', 0)
			})
		
		
	}
	$('#final').css('opacity', 1)
		
console.log('*****', playerWords, words)
	
}




// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
function act_shuffleArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
	return array
}