//vars aanmaken
var nScreenWidth;
var nTotal = 0;	
var bAnimate = true;

$(window).load(function(){
	_init();
});
$(window).resize(function(){
	setScreensize();
});
//thanks to hashchange plugin
$(window).hashchange(function(){
	checkHash();
});

function _init(){
	//functions
	initJSON();
}

function initJSON(){
	var sApiKey = 'a984a7ea7922559a025f20153cd66c8c';
	var nPhotosetID = '72157627097994738';
	var sMethod = 'flickr.photosets.getPhotos';
	$.ajax({
		type: 'GET',
		url: 'http://api.flickr.com/services/rest/',
		data: 'method='+sMethod+'&api_key='+sApiKey+'&photoset_id='+nPhotosetID+'&extras=url_s,url_z&format=json&jsoncallback=?',
		dataType: 'json',
		success: function(data){
			var sThumbs = '';
			var sSlides = '';	
			$.each(data.photoset.photo, function(i,item){
				//idtje voor slider
				var nId = (i+1);
				//thumbjes voor de homepage
				var sClass = '';
				if(i%2){
					sClass += ' right';	
				}
				sThumbs += '<div class="thumb'+sClass+'">';
				sThumbs += '<div class="image">';
				sThumbs += '<img src="'+item.url_s+'" alt="'+item.title+'">';
				sThumbs += '</div>';
				sThumbs += '<a class="overlay" href="#!img_'+nId+'"></a>';
				sThumbs += '</div>';
				
				//slides vullen
				sSlides += '<div class="article" id="page_img_'+nId+'">';
				sSlides += '<div class="content">';
				sSlides += '<div class="slide">';
				sSlides += '<div class="logo">';
				sSlides += '<a href="#!home"></a>';
				sSlides += '</div>';
				sSlides += '<div class="wrapper">';
				sSlides += '<a class="backto" href="#!home"></a>';
				sSlides += '<div class="img">';
				sSlides += '<img src="'+item.url_z+'" alt="'+item.title+'">';
				sSlides += '<a class="nav prev" href="#!img_'+(nId-1)+'"></a>';
				sSlides += '<a class="nav next" href="#!img_'+(nId+1)+'"></a>';
				sSlides += '</div>';
				sSlides += '<p>'+item.title+'</p>';
				sSlides += '</div>';
				sSlides += '</div>';
				sSlides += '</div>';
				sSlides += '</div>';
												
				nTotal++;
			});
			
			//thumbjes plaatsen
			$('#gallery').html(sThumbs);
			//slides plaatsen
			$('#website').append(sSlides);
			
			//laatste en eerste button aanpassen
			$('#page_img_1 .prev').hide();
			$('#page_img_'+nTotal+' .next').hide();
			
			//preloaden
			var nLoaded = 0;
			var nImages = parseInt($('.image img, .img img').length);
			$('.image img, .img img').each(function(){
				var cacheImage = new Image();
      			cacheImage.src = this.src;
				cacheImage.onloaded = nLoaded++;
			});
			
			//website inladen
			if(nLoaded == nImages){
				$('#loading').fadeOut(300, function(){
					$('#website').fadeIn();	
					//slider inladen
					initSlider();
				});
			}
		}
	});	
}
function initSlider(){
	//slide breedte geven van scherm
	setScreensize();
	
	//hash gezet?
	checkHash();
	
	//wanneer anchor link geklikt
	$('a[href*="#!"]').click(function(e){		
	
		//wat is de huidige pagina
		var nCurrent = getCurrent();
		
		//wat is de nieuwe pagina
		var sPage = this.hash.slice(2);
		var nPage = 0;
		if(sPage.indexOf('_') > 0){
			var aPage = sPage.split('_');
			nPage = aPage[1];
		}
		
		//animeren die handel
		animate(nCurrent,nPage, false);
		
	});	
	
	//wanneer gebruik van arrow keys
	$(document).keydown(function(e) {

		//wat is de huidige pagina
		var nCurrent = getCurrent();
		var nPage = 0;
		
		//keycodes opslaan
		var keyCode = e.keyCode || e.which,
		arrow = {left: 37, right: 39 };
		
		//links of rechts?
		var bKey = false;
		switch(keyCode){
			case arrow.left:
				bKey = true;
				nPage = nCurrent-1;
			break;
			case arrow.right:
				bKey = true;
				nPage = nCurrent+1;
			break;
		}
		
		//afvangen of 'page' bestaat
		if(nPage > nTotal || nPage < 0) return false;
		
		if(bKey){
			//animeren die handel
			animate(nCurrent,nPage, true);
			//standaard event annuleren
			return false;
		}

	});
}
function animate(nCurrent,nPage, bHash){
	if(bAnimate){
		//indien homepage, remove scrollbar
		var bResetScrollbar = false;
		if(nCurrent == 0 || nPage == 0){
			$('#wrapper').css('overflow','hidden');	
			bResetScrollbar = true;
		}
		
		//wat is de huidige positie
		var nLeft = getLeftPos();
		
		//afvangen of de 'page' bestaat
		if(nPage > nTotal) nPage = nTotal; setHash(nPage);
		if(nPage < 0) nPage = 1; setHash(nPage);
		
		//hoeveel terug of verder
		var nLeftPos = 0;
		var nX = 0;
		if(nPage > 0){
			if(nPage > nCurrent){
				var nX = nPage - nCurrent;
				nLeftPos = nLeft - (nX * nScreenWidth);	
			} else if(nPage < nCurrent){
				var nX = nCurrent - nPage;
				nLeftPos = nLeft + (nX * nScreenWidth);	
			} else {
				return false;	
			}
		}
		//en animeren maar
		bAnimate = false;
		$('#website').animate({
			left: nLeftPos	
		}, 500, function(){
			bAnimate = true;
			if(bResetScrollbar) $('#wrapper').css('overflow','auto');			
			if(bHash) setHash(nPage);
		});	
	}
}
function setHash(nPage){
	var sHash = '';
	
	if(nPage == 0) sHash = '#!home';
	else sHash = '#!img_'+nPage;
	
	window.location.hash = sHash;		
}
function setScreensize(){
	nScreenWidth = $(window).width();
	$('.article').width(nScreenWidth);	
	
	//positie opnieuw berekenen
	var nCurrent = getCurrent();	
	var nLeftCurrent = getLeftPos();
	var nLeftPos = (nCurrent * nScreenWidth) * -1;
	
	$('#website').css('left',nLeftPos);
}
function getCurrent(){
	//wat is de huidige pagina
	var sCurrent = 'home';
	var nCurrent = 0;
	if(window.location.hash) {
		sCurrent = window.location.hash.slice(2);
	}
	if(sCurrent.indexOf('_') > 0){
		var aCurrent = sCurrent.split('_');
		nCurrent = aCurrent[1];
	}	
	return parseInt(nCurrent);	
}
function getLeftPos(){
	return parseInt($('#website').css('left'));	
}
function checkHash(){
	//is er een hash gezet?
	var nHash = getCurrent();
	
	//afvangen of de 'hash' bestaat
	if(nHash > nTotal) nHash = nTotal; setHash(nHash);
	if(nHash < 0) nHash = 1; setHash(nHash);
	
	if(nHash > 0){
		$('#website').animate({
			left: -(nHash * nScreenWidth)
		}, 0);	
	}	
}