// array met namen fotobestanden
var fotos = ['246.jpg','245.jpg','244.jpg','95.jpg','77.jpg','39.jpg','37.jpg','36.jpg','35.jpg','34.jpg','107.jpg','108.jpg'];
			 
// moeilijkheidsgraad -> waarde radiobutton
var level;

//aantal fotos in array
var aantalFotos=fotos.length;

//geselecteerde foto
var foto;

//array met puzzel-elementen in volgorde
var puzzel = [];

//configuratie moeilijkheidsgraad
var levels = [];
	levels[0] = [];
	levels[0]['rij']=4;
	levels[0]['kolom']=4;
	levels[1] = [];
	levels[1]['rij']=6;
	levels[1]['kolom']=5;
	levels[2] = [];
	levels[2]['rij']=8;
	levels[2]['kolom']=8;
	
//afmetingen fotos
var fotoBreedte = 700;
var fotoHoogte = 467;

//afmeting div-tags -> te berekenen
var celBreedte;
var celHoogte;

//score
var aantalClicks = 0;
var aantalCorrect = 0;

//wachttijd 150ms (als je op 2 deeltjes geklikt hebt blijft dit 150ms transparant voor ze verwisseld worden)
var wacht = 150;

$(document).ready(function(){
	// change-event aan radiobuttons koppelen
	$('input[name=level]').bind('click',function(){
		level = $(this).val();
		nieuw();	
	});
	
	//click-event aan knop koppelen
	$('#shuffle').bind('click',function(){
		nieuw();	
	});
	
	//ken aan alle div-tags in #foto een click-event toe
	$('#foto').delegate('div','click',function(){
		//wanner op div-tag in #foto wordt geklikt, 
		//roep functie verwerk aan en geef div-object mee
		verwerk(this);
	});
	
	//haal geselecteerd niveau op
	//waarde van radiobutton met attribuut checked
	level = $('input[name=level][checked=checked]').val();
	//roep functie nieuw op
	nieuw();
});

//functie selecteert willikeurige afbeelding uit array en initieert puzzel
function nieuw()
{
	// controleer of #foto kindnodes bevat
	// zo ja, verwijder kindnodes
	if($('#foto').children().length >0)
	{
		$('#foto').empty();
	}
	
	// zoek pad van een willekeurig geselecteerde afbeelding
	foto = '/images/klasfoto/' + fotos[Math.floor(aantalFotos * Math.random())];
	
	// bereken celbreedte en -hoogte
	celBreedte = Math.floor(fotoBreedte / levels[level]['kolom']);
	celHoogte = Math.floor(fotoHoogte / levels[level]['rij']);
	
	
	//maak div-element aan
	var div = $('<div>');
		div.css({position:'absolute',
				 width:celBreedte + 'px',
				 height:celHoogte + 'px',
				 overflow:'hidden'});
	var img = $('<img>');
		img.attr('src',foto);
		
	// voeg foto toe aan #thumb
	//als er al iets in thumb zit eerst wegdoen
	if ($('#thumb').children().length >0)
	{
		$('#thumb').empty();
	}
	$('#thumb').append($(img).clone());
	
	$(img).css('position','absolute');
	$(div).append(img);
	
	//maak voor elke cel (rij/kolom een kloon van de div en positioneer foto
	//zet kloon in array puzzel
	for (var rij = 0; rij < levels[level]['rij']; rij++)
	{
		for(var kolom = 0; kolom < levels[level]['kolom']; kolom++)
		{
			// maak voor elke cel een kloon van div
			var cel = $(div).clone();
			// bereken voor elke cel een id = aantal kolommen*aantal rijen + kolomnummer
			var id = levels[level]['kolom']*rij+kolom;
			//console.log(id);
			cel.attr('id','puzzel_' + id);
			
			//bereken left en top voor foto
			var links = '-' + celBreedte * kolom + 'px';
			var top = '-' + celHoogte * rij + 'px';
			
			//positioneer afbeelding
			$(cel).find('img')
				  .css({left:links,
				  		top:top});
						
			//duw cel in array puzzel
			puzzel.push(cel);
		}	
	}
	
	//zet alle elementen op willikeurige plaats
	for (var rij = 0; rij < levels[level]['rij']; rij++)
	{
		for(var kolom = 0; kolom < levels[level]['kolom']; kolom++)
		{
			// bereken index van willekeurig element uit puzzel-array
			index = Math.floor(puzzel.length * Math.random());
			
			//  haal puzzestuk uit array puzzel met index
			var puzzelStuk = puzzel[index];
			
			// bereken positie puzzelstuk
			var links = celBreedte *kolom + 'px';
			var top = celHoogte * rij + 'px';
			
			//positioneer puzzelstuk
			$(puzzelStuk).css({left:links,
							   top:top});
							   
			//voeg toe aan foto
			$('#foto').append(puzzelStuk);
			
			//verwijder puzzelStuk uit puzzel
			puzzel.splice(index,1);
		}
	}
	
	// zet aantal clicks,.... (alle spans) op 0 -> zie function score()
	aantalClicks = 0;
	score();
	
}

//verwerk aangeklikte div-tag
function verwerk(obj)
{
	//wordt op geselecteerd object geklikt -> verwijder klasse
	if($(obj).hasClass('geselecteerd'))
	{
		$(obj).removeClass('geselecteerd');
	}
	else
	{
		$(obj).addClass('geselecteerd');
		if($('.geselecteerd').length == 2)
		{
			verwissel();
		}
	}
}

//verwissel de twee geselecteerde div-tags in DOM
function verwissel()
{
	aantalClicks += 2;
	
	//haal geselecteerde objecten uit de pagina
	var puzzel_1 = $('.geselecteerd').eq(0);
	var puzzel_2 = $('.geselecteerd').eq(1);
	
	//vraag index op van geselecteerde elementen in #foto
	var puzzel_1_ndx = $(puzzel_1).index();
	var puzzel_2_ndx = $(puzzel_2).index();
	
	// maak puzzelstukken los van DOM met detach()
	puzzel_1 = $(puzzel_1).detach();
	puzzel_2 = $(puzzel_2).detach();
	
	// vraag left en top op van beide elementen
	var links_1 = $(puzzel_1).css('left');
	var boven_1 = $(puzzel_1).css('top');
	
	var links_2 = $(puzzel_2).css('left');
	var boven_2 = $(puzzel_2).css('top');
	
	//ken left en top toe van ander element
	$(puzzel_1).css({left:links_2,
					 top:boven_2});
					 
	$(puzzel_2).css({left:links_1,
					 top:boven_1});
					 
	// elementen terug toevoegen 
	if (puzzel_1_ndx == 0)
	{
		$('#foto div').eq(0).before(puzzel_2);
	}
	else
	{
		puzzel_1_ndx--;
		$('#foto div').eq(puzzel_1_ndx).after(puzzel_2);
	}
	puzzel_2_ndx--;
	$('#foto div').eq(puzzel_2_ndx).after(puzzel_1);
	
	deselecteer();
	score();
}

//deselecteer de geselecteerde div-tags
function deselecteer()
{
	$('.geselecteerd').removeClass('geselecteerd');
}

// zoek aantal correcte puzzelstukken
//update cpanel
function score()
{
	//toon aantal clicks
	$('#clicks').text(aantalClicks);
	
	//bereken aantal correcte puzzelstukken
	var aantalCorrect = 0;
	
	$('#foto div').each(function(index,value) {
		if($(this).attr('id') == 'puzzel_' + index)
		{
			aantalCorrect++;
		}	
	});
	
	$('#correct').text(aantalCorrect);
	var aantalFout = levels[level]['rij']*levels[level]['kolom']-aantalCorrect;
	$('#fout').text(aantalFout);		
}