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


game()
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
function game(){
	//gameIntro()
	gameEvents()
	
	startGame()
}


// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
function gameIntro(){
	let rnd = 1 + Math.floor(Math.random() * 3);
	$('.intro-pic-1').attr('src', `img/intro-${rnd}.png`)
	setTimeout(r=>{
		$('.intro-pic-1').css('opacity', 1)
	}, 300)
	
}
// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
function startGame(){

	createInfographic()

	//actusSlider('#actus-slider');
	
}
// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
function createInfographic(){

	$paper = $('#info .paper')
	$('.prompt-1').fadeIn(1500)
	
}
// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
function dragNdrop(){

	$('.word').pep({
		droppable : '#info .node.empty',
		activeClass : 'dragged',
		droppableActiveClass : 'hovered',
		initiate : function(){
			let firstTop = $(this.el).css('top')
			let firstLeft = $(this.el).css('left') || '0px'
			//let firstTop = $(this.el).offset().top
			//let firstLeft = $(this.el).offset().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).offset().left)
			//$(this.el).css('top', $(this.el).offset().top)

		},
		start : function(){ 
			let offL = $(this.el).offset().left
			let offT = $(this.el).offset().top - 96

			$(this.el).css({
				'left': offL,
				'top': offT,
				'z-index': 39,
			}).removeClass('fixed')
				.appendTo('#game')
			$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')
			$(`#info .node[data-idx="${socket}"]`)
				.removeClass('full')
				.addClass('empty');
			$(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('data-idx')
				fixWordToSocket( $(this.el), socket)

			} else {
				$(this.el).appendTo('#words')
				$(this.el).css('top', $(this.el).attr('data-top'))
				$(this.el).css('left', $(this.el).attr('data-left'))
				$(this.el).css('transform', 'unset')
			}
			$('#info .node').removeClass('hovered')
			
		},
	})
}

// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
function successA(){
	$('#game').addClass('stage-b')
	$('#words').css('right', '-26%')
	$('#intro').html('ΣΥΓΧΑΡΗΤΗΡΙΑ! Ο εννοιολογικός χάρτης που σχημάτισες σου προσφέρει μια εικόνα της περίπλοκης οργάνωσης της οθωμανικής κοινωνίας.<br>').fadeIn(500)
	$('<button>').html('OK').appendTo('#intro')
		.click(function(){
			$('#intro').fadeOut(500);
		})
}
// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
function svgLine( line, i ){
	let id = 'ar-'+i
	let H = ``
	let refX = 40
	let size = 30
	if ( $(window).width() < 640 ) { refX = 30; size = 15; }
	if ( $(window).width() < 480 ) { refX = 25; size = 10; }
	if ( line[2] === true )
		H += `
		<defs>
		  <marker id="${id}" markerWidth="${size}" markerHeight="${size}" refx="${refX}" refy="6" orient="auto" >
			  <path d="M2,1 L2,10 L10,6 L2,2" />
		  </marker>
		</defs>
		`

	H += `
  	<polyline
		vector-effect="non-scaling-stroke"
    	points="0,0 50,50 100,100"
		style="fill: none;
		marker-end: url(#${id});" />
	`
	let H2 = `
	<line x1="0" y1="0" x2="100" y2="0"
		absoluteStrokeWidth="true"
		vector-effect="non-scaling-stroke"
		markerUnits="strokeWidth"
		style="fill: none;
		marker-end: url(#${id});" />
    `
	
	let $svg = $('<svg class="svg-line" viewBox="0 0 100 100">')
		//.attr('preserveAspectRatio', 'none')
		.html( H )
					  
	return $svg			  
}









// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
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
}
// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
function gameEvents(){
	
	// START
	// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
	$('button.start').click(function(){
		$('#intro').fadeOut(500)
		$('.intro-pic-1').css('opacity', 0)
		setTimeout(r=>{
			$('.intro-pic-1').hide()
			startGame()
		}, 1000)
	})
	
	
	// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
	$('main').click(function(e){
		let scene = parseInt( $('#game').attr('data-scene') )
		scene++
		$('#game').attr('data-scene', scene)
		
		let LL = 0;
		let TT = 45;
		if ( scene == 1) { LL =  45; TT = -30; }
		if ( scene == 2) { LL = -45; TT = -75; }
		if ( scene == 3) { LL =  45; TT = -115; }
		if ( scene == 4) { LL = -45; TT = -155; }
		if ( scene == 5) { LL =  45; TT = -195; }
		
		if ( $(window).width() <= 800 ) {
			if ( scene == 1) { TT = -75; }
			if ( scene == 2) { TT = -155; }
			if ( scene == 3) { TT = -240; }
			if ( scene == 4) { TT = -320; }
			if ( scene == 5) { TT = -400; }
		}
		if ( $(window).width() <= 640 ) {
			if ( scene == 1) { TT = -135; }
			if ( scene == 2) { TT = -245; }
			if ( scene == 3) { TT = -355; }
			if ( scene == 4) { TT = -470; }
			if ( scene == 5) { TT = -575; }
		}
		if ( $(window).width() <= 480 ) {
			if ( scene == 1) { TT = -200; }
			if ( scene == 2) { TT = -365; }
			if ( scene == 3) { TT = -530; }
			if ( scene == 4) { TT = -690; }
			if ( scene == 5) { TT = -840; }
		}
		
		
		$('#info').css('transform',
					   `translate3d(${LL}vw,${TT}vw,0vw)`)
		
		
		if ( scene == 6) {
			LL = 0; TT = -100;
			if ( $(window).width() <= 800 ) TT = -200;
			$('#info').css('transform',
						   `translate3d(0vw,${TT}vw,0vw) scale(0.6)`)
			
			setTimeout(r=>{
				TT = -30;
				if ( $(window).width() <= 800 ) TT = -50;
				$('#info').css('transform',
						`translate3d(0vw,${TT}vw,0vw) scale(0.6)`)
					  .css('transition', '6s all')
			}, 2000)
			setTimeout(r=>{
				TT = 45;
				if ( $(window).width() <= 800 ) TT = 35;
				$('#info')
						.css('transform',
						`translate3d(0vw,${TT}vw,0vw) scale(1)`)
					  .css('transition', '2s all')
				$('#game').attr('data-scene', 0)
				$('.prompt-1').fadeIn(1500)
			}, 8000)
		}
		
		
		
		
		
		setTimeout(r=>{ $('.drag-prompt').fadeOut(1500) })
		setTimeout(r=>{ $('.prompt-'+(scene+1)).fadeIn(1500) }, 2000)
		
	})

	
}
// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
function paperDrag(){
	
	
	// DRAG INFOGRAPHIC
	// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
	let infoL = 40;
	let infoT = -30;
	
	if ( $(window).width() <= 800 ) infoT = -25;
	
	let L1,T1,L2,T2;
	$('main').mousedown(function(e){
		L1 = e.pageX
		T1 = e.pageY
	})
	$('main').mouseup(function(e){
		
		let limitL = -50
		let limitR = 50
		if ( $(window).width() < 800 ) {
			limitL = -50
			limitR = 50
		}
		
		L2 = e.pageX
		T2 = e.pageY
		let offsX = (L2 - L1) / 10;
		let offsY = (T2 - T1) / 10;
		infoL += offsX
		infoT += offsY
		if ( infoL < limitL ) infoL = limitL
		if ( infoL > limitR )  infoL = limitR
		if ( infoT > 50 )   infoT = 50
		if ( infoT < -260 ) infoT = -260
console.log('---', infoL, infoT)
		
		$('#info').css('transform', `translate3d(${infoL.toFixed(2)}vw,${infoT.toFixed(2)}vw,0vw)`)
		
	})
	
}
