
let oroi = [
	'Συνθήκη Βερντέν',
	'Ίδρυση βασιλείου Αγγλίας',
	'Έναρξη πρώτης Σταυροφορίας',
	'Κατάληψη της Ιερουσαλήμ από τους σταυροφόρους',
	'Έναρξη δεύτερης Σταυροφορίας',
	'Κατάληψη της Ιερουσαλήμ από τον Σαλαντίν',
	'Διανομή της Ρωμανίας',
	'Άλωση της Κωνσταντινούπολης από τους Σταυροφόρους',
	'Έκδοση της Μάγκνα Κάρτα',
	'Εκατονταετής Πόλεμος'
]


// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
function game(){
	let $intro,
		$line,
		$oroi,
		$hovered,
		$stageB,
		$containers,
		$stageBmessage,
		stageAok = false;
	
	let _oroi = act_shuffleArray( [...oroi] )
	
	
	
	
	// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
	createLine()
	createOroi()
	intro()
	

	// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
	function createLine(){
		$line = $('<div id="t-line">').appendTo('#timeline')
		$('<div class="line">').appendTo( $line )
		
		for (n=1;n<=oroi.length;n++){
			$(`<div id="socket-${n}" class="socket">`)
				.attr('data-idx', n)
				.appendTo( $line )
		}
		
	}
	// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
	function createOroi(){
		$oroi = $('<div id="t-oroi">').appendTo('#timeline')

		_oroi.forEach((name,n) =>{
			$(`<div id="oros-${n}" class="oros">`)
				.attr('alt', name)
				.attr('data-idx', n)
				.html(`<p>${name}</p>`)
				.appendTo( $oroi )
		})

		setTimeout(r=>{
			$('.oros').each(function(){
				let xx = $(this).position().left
				let yy = $(this).position().top
				$(this).css({
					left	 : xx + 'px',
					top 	 : yy + 'px',
				})
			})
		}, 100)
		setTimeout(r=>{
			$('.oros').each(function(){
				$(this).css({
					position : 'absolute',
				})
			})
		}, 200)
		
		
	}
	
	
	// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
	function intro(){
		$intro = $('<div id="intro">').appendTo('main')
		$('<div class="message">')
			.html(`<p>Να κατατάξετε στη σωστή χρονολογική σειρά τα ακόλουθα γεγονότα, αρχίζοντας από το αρχαιότερο.</p>`)
			.appendTo( $intro )
			$('<button>').text('ΕΝΑΡΞΗ')
				.appendTo( $intro.find('.message') )
				.click( dragNdrop )
		
	
	}
	
	// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
	function dragNdrop(){
		$intro.find('.message').remove()
		
		$('.oros').pep({
			droppable : '.socket',
			droppableActiveClass : 'hovered',
			initiate : function(){
				$('#timeline .message').remove()
				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)
				}

			},
			start : function(){
				$(this.el).css('z-index', 99).removeClass('fixed')
					.appendTo('#t-oroi')
				$hovered = this.activeDropRegions[0] || false
				if ( $(this.el).attr('data-socket') ) {
					$('#socket-'+$(this.el).attr('data-socket'))
						.removeClass('full')
				}
				
				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)
				}
				
				
			},
			stop : function(ev){
				$(this.el).css('z-index', 9)
				$hovered = this.activeDropRegions[0] || false
				$(this.el)
					.attr('data-socket', null)
					.removeClass('fixed')
				
				if ( $hovered && ! $hovered.is('.full') ){
					//$(this.el).css('transition', '1s all')
					$hovered.addClass('full')
					let socket = $hovered.attr('data-idx')
					fixPersonToSocket( $(this.el), socket)
					if ( $('.socket.full').length == oroi.length )
						allSocketsFull()
				}
				
			},
		});
		
	}
	// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
	function fixPersonToSocket( $el, socket ){
		
		$el.addClass('fixed').attr('data-socket', socket)
		let $socket = $(`#socket-${socket}`)
		
		$el.appendTo( $socket )
		
		/*
		let xx = $socket.offset().left
		let yy = $socket.offset().top
		
		$el.css('transition', '0.5s all')
		
		setTimeout(r =>{
			$el.css({
				left: (parseInt(xx)-40) + 'px',
				top: (parseInt(yy)-200) + 'px',
				transform: 'unset',
			})
		}, 50)
		*/
				
	}
	// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
	function allSocketsFull(){
		let order = []
		$('#t-line .oros').each(function(){
			let sck = $(this).attr('data-socket')
			order[sck-1] = $(this).find('p').text()
		})
		let $msg = $('<div id="message">').appendTo('main')
		let msg = '<p>Η σειρά δεν είναι σωστή. Συνεχίστε την προσπάθεια.</p><button>ΣΥΝΕΧΕΙΑ</button>'
		if ( JSON.stringify(oroi) == JSON.stringify(order) ) {
			msg = '<p>Συγχαρητήρια! Η σειρά είναι σωστή!</p><button>ΕΝΤΑΞΕΙ</button>'
			$msg.addClass('success')
			stageAok = true;
		}
		$msg.html( msg )
		
		$('body').off('click', '#message button')
		$('body').on('click', '#message button', function(){
			$('#message').remove()
		})
	}
	
	
	
	
	
}


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



// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
game();