/*
 * PreVARS
 */
var infoLink 	= false;
var imageLink	= false;
var wAndH		= false;
var width		= false;
var height		= false;

/**
 * Image loader functie met een callback
 */
$.fn.loadImage = function( src, callBack )
{
	return this.each( function()
	{
		// Create image object
		var obj = new Image();
		
		// Set props and actions
		obj.onload			= callBack;
		obj.src				= src;
		obj.name			= 'photo-view';
		obj.style.display 	= 'none';
		
		// Do your stuff
		this.appendChild(obj);
	});
}

$(document).ready( function()
{
	
	/**
	 * Het openen van de kidsclub imageviewbox
	 */
	$('.photocollection ul li a').click( function()
	{
		
		// Sluit eerst de oude box als deze nog zichtbaar is
		if( $('.photo-popupwrapper').css('display') == 'block' )
			closeImageviewbox();
		
		// Get Width and Height
		wAndH 	= $(this).find('img').attr('rel');
		wAndH 	= wAndH.split(' ');
		
		// Set Width and Height
		width	= wAndH[0];
		height	= wAndH[1];
		
		// Get links
		infoLink	= $(this).attr('rel');
		imageLink	= $(this).find('img').attr('alt');
		
		// Show eerst de wrapper
		$('.photo-popupwrapper').show();
		
		// Fade het blok in
		$('.show-enlargement').fadeIn('normal', function()
		{
			// Stel de width en height in bij .show-enlargement
			$('.show-enlargement').css('width', width + 'px');
			$('.show-enlargement').css('height', height + 'px');	
		});
		
		// Load de image 
		$('.enlarged').loadImage( imageLink, function()
		{
			// Photo-title eerst leegmaken
			$('.photo-title').empty();
			
			// Daarna de data in laden
			$('.photo-title').load( infoLink, '', function()
			{
				$('.ajax-loader').hide();
				$('img[name="photo-view"]').fadeIn('normal', function()
				{
					$('.photo-title p').fadeIn('normal');
				});
			});
			
		});
		
		return false;
		
	});
	
	
	/**
	 * Het sluiten van de kidsclub imageviewbox
	 */
	$('.photo-close').click( function()
	{
		closeImageviewbox();
	});
	
	
	/**
	 * Functie voor het sluiten van de imageviewbox
	 */
	 function closeImageviewbox()
	 {
	 	// Fade de box out
		$('.show-enlargement').fadeOut('normal', function()
		{
			// Hide de wrapper
			$('.photo-popupwrapper').hide();
			
			// Verwijder de oude afbeelding
			$('img[name="photo-view"]').remove();
			
			// Verwijder de oude tekst
			$('.photo-title').empty();
			
			// Show de loader voor de volgende afbeelding
			$('.ajax-loader').show();
		});
	 }
	
});