$(document).ready(function()
{
	// Teller om bij te houden dat de code bij een callback als laatste uitgevoerd wordt
	$.g_iCounter = 0;
	// Alleen bij de eerste klik moeten de panelen inklappen
	$.g_bFirstClick = true;
	$('li.backclick').bind('click', slidePanel);

	// Validator
	$("#contactForm").validate();

	// Global var maken voor het onthouden van de gekozen serie
	$.g_sSerieId = $( 'div#inspirations_holder ul li:first-child' ).attr('id');

	// Vorige en volgende knoppen activeren
	$('a#image-previous').bind('click', gotoPrevious );
	$('a#image-next').bind('click', gotoNext );

	// Juiste pagina openen (deeplink)
	var l_sPage = $('#backstagecontainer').attr('name');

	switch( l_sPage )
	{
		case 'william':
			$( 'li#william' ).trigger('click');
			$( 'li#william img' ).attr('src', 'templates/pages/backstage/images/william_ov.png');
			break;
		case 'annet':
			$( 'li#annet' ).trigger('click');
			$( 'li#annet img' ).attr('src', 'templates/pages/backstage/images/annet_ov.png');
			break;
		case 'inspirations':
			$( 'li#inspirations' ).trigger('click');
			$( 'li#inspirations img' ).attr('src', 'templates/pages/backstage/images/inspirations_ov.png');
			break;
		case 'history':
			$( 'li#history' ).trigger('click');
			$( 'li#history img' ).attr('src', 'templates/pages/backstage/images/history_ov.png');
			break;
		case 'cv':
			$( 'li#cv' ).trigger('click');
			$( 'li#cv img' ).attr('src', 'templates/pages/backstage/images/cv_ov.png');
			break;
	}
	
	//Extra backup om menu te sluiten als er over ander menu gehoverd wordt.
	$('.menu > li .close-press').mouseover( function() {
		$('ul.backstage').css('visibility', 'hidden');	
	});
	
	$('.menu > li .close-contact').mouseover( function() {
		$('ul.backstage').css('visibility', 'hidden');	
	});
	
	setFancybox();
	
});

function setFancybox()
{
	$("a.william-form").click(function() 
	{	
		$.fancybox({
			'hideOnContentClick': false,
			'hideOnOverlayClick': false,
			'autoDimensions'	: false,
			'showCloseButton'   : false,
			'enableEscapeButton': false,
			'scrolling'			: 'no',
			'centerOnScroll'	: false,
			'width'				: 360,
			'height'			: 'auto',
			'href'				: 'templates/pages/backstage/form/index.php?name=william',
			'titlePosition' 	: 'inside',
			'showNavArrows'		: false,
			'titleFormat'		: formatTitle
		});
		
		return false;
	});
	
	$("a.annet-form").click(function() 
	{
		$.fancybox({
			'hideOnContentClick': false,
			'hideOnOverlayClick': false,
			'autoDimensions'	: false,
			'showCloseButton'   : false,
			'enableEscapeButton': false,
			'scrolling'			: 'no',
			'centerOnScroll'	: false,
			'width'				: 360,
			'height'			: 'auto',
			'href'				: 'templates/pages/backstage/form/index.php?name=annet',
			'titlePosition' 	: 'inside',
			'showNavArrows'		: false,
			'titleFormat'		: formatTitle
		});
		
		return false;
	});
}

function formatTitle( title, currentArray, currentIndex, currentOpts ) {
    return '<div id="closeBox"><a href="javascript:;" onclick="$.fancybox.close();"><img src="images/close.gif" /></a></div>';
}

function slidePanel()
{	
	//Highlighten van de images
	if( $.g_BSsliderId != undefined)
	{	
		$( 'li#'+$.g_BSsliderId.id+' img' ).attr('src', 'templates/pages/backstage/images/'+$.g_BSsliderId.id+'.png');
	}
	
	// Bepalen op welk onderdeel er geklikt is
	$.g_BSsliderId = this;
	
	//Nog een keer toevoegen zodat je geen vertraging krijgt van de highlight
	$( 'li#'+$.g_BSsliderId.id+' img' ).attr('src', 'templates/pages/backstage/images/'+$.g_BSsliderId.id+'_ov.png');
	
	// Achtergrondkleur goed zetten en knop highlighten
	//$("li#william").css( 'background-color', '#808080');
	//$("li#annet").css( 'background-color', '#A6A6A6');
	//$("li#studio").css( 'background-color', '#B2B2B2');
	//$("li#inspirations").css( 'background-color', '#CCCCCC');
	//$("li#history").css( 'background-color', '#E5E5E5');
	//$(this).css( 'background-color', '#BE3100');

	// Zorgen dat alle knoppen ingeklapt zijn (alleen bij de eerste klik)
	if( $.g_bFirstClick )
	{
		$.g_iCounter = 0;

		$("li.backclick").animate( { width: 60 }, 500, function()
		{
			if( $.g_iCounter == 4 )
			{
				// Breedte bepalen van de contentruimte (contentvlak - de ruimte die de knoppen in beslag nemen)
				$('#backstagecontainer').width(300);

				// De gekozen content tonen
				$("#"+$.g_BSsliderId.id+"_uitgeklapt").fadeIn( 500,
					function(){
					// Scrollbar toevoegen
					$("#"+$.g_BSsliderId.id+"_uitgeklapt .scrolling").jScrollPane();
					
					//Highlighten van het gekozen onderdeel
					$( 'li#'+$.g_BSsliderId.id+' img' ).attr('src', 'templates/pages/backstage/images/'+$.g_BSsliderId.id+'_ov.png');
				});

			}

			$.g_iCounter++;
		});

		$.g_bFirstClick = false;
	}
	else
	{
		$.g_iCounter = 0;

		// Alle content vlakken verbergen
		$(".uitgeklapt").fadeOut( 'slow', function()
		{
			if( $.g_iCounter == 4 )
			{	
				//Highlighten van het gekozen item
				$( 'li#'+$.g_BSsliderId.id+' img' ).attr('src', 'templates/pages/backstage/images/'+$.g_BSsliderId.id+'_ov.png');
				
				// De gekozen content tonen
				$("#"+$.g_BSsliderId.id+"_uitgeklapt").fadeIn( 500,
					function(){
					// Scrollbar toevoegen
					$("#"+$.g_BSsliderId.id+"_uitgeklapt .scrolling").jScrollPane();
				});
			}
	
			$.g_iCounter++;
		});
	}
}

//Animeer de juiste serie naar de juiste positie
function animateSerie()
{
	// Top en left bepalen
	var l_iPositionTop = $( 'li#' + $.g_sSerieId ).position().top;
	var l_iPositionLeft = $( 'li#' + $.g_sSerieId ).position().left;

	// Animeer de gekozen serie naar de juiste plaats
	$( 'div#inspirations_holder > ul' ).animate(
	{
		top: '-' + l_iPositionTop,
		left: '-' + l_iPositionLeft
	}, 500 );

	return false;
}

// Naar de vorige serie gaan
function gotoPrevious()
{
	// id van de volgende serie ophalen
	$.g_sSerieId = $( 'li#' + $.g_sSerieId ).prev().attr('id');
	// Controleren of je bij de laatste serie bent, dan weer vooraan beginnen
	if( $.g_sSerieId == undefined ) $.g_sSerieId = $( 'div#inspirations_holder ul li:last-child' ).attr('id');

	animateSerie();

	return false;
}

// Naar de volgende serie gaan
function gotoNext()
{
	// id van de vorige serie ophalen
	$.g_sSerieId = $( 'li#' + $.g_sSerieId ).next().attr('id');
	// Controleren of je bij de eerste serie bent, dan weer achteraan beginnen
	if( $.g_sSerieId == undefined ) $.g_sSerieId = $( 'div#inspirations_holder ul li:first-child' ).attr('id');

	animateSerie();

	return false;
}