$(document).ready(function()
{
	//Uitklappen van de series
	$('li.serietitles').click( function()
	{
		if( $('ul', this).css('display') != 'block' )
		{
			$('ul.serieClosed').slideUp( 500 );

			var iCollection = $(this).attr('id');
			var b_ActiveClass = $(this).hasClass('active');

			$('li.serietitles').css('color', '#FFFFFF');
			$(this).css('color', '#be3100');

			$('.collection-'+iCollection ).slideDown( 500, function()
			{
				if( $.g_sSerieId != $('.collection-'+iCollection ).children().children().last().attr('id') )
				{
					$('.collection-'+iCollection ).children().children().first().trigger('click');
				}
			});
		}
		else
		{
			$('ul.serieClosed').slideUp( 500 );
			$('li.serietitles').css('color', '#FFFFFF');
		}
	});

	// Controleren of je terug komt van een seriepagina
	if( $('#selectedserie').val() != 0 )
	{
		// juiste serie openen
		$('ul.serieClosed').slideUp( 500 );
		$('li.serietitles').css('color', '#FFFFFF')
		$( 'a#s' + $('#selectedserie').val() ).parent().parent().parent().css('color', '#be3100');
		$( 'a#s' + $('#selectedserie').val() ).parent().parent().slideDown( 500, function()
		{
			// De serie tonen waar je net vandaan komt
			$('#s' + $('#selectedserie').val()).trigger('click');
		});
	}
	else
	{
		//Eerste menu openklappen
		$('li.serietitles:first').trigger('click');
	}

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

	// Alle series tranparant maken
	$( 'div#serieImages > ul > li' ).css('opacity', 0.5);
	// De gekozen serie highlighten
	$( 'li#image-' + $.g_sSerieId ).css('opacity', 1 );
	$( 'a#' + $.g_sSerieId ).css('color', '#be3100' );

	// Afbeeldingen animeren door het menu
	$('a.seriename').bind('click', animateSerie );

	// Mouseover/out afbeeldingen
	$("div#serieImages > ul > li").mouseover(function()
	{
		$(this).css('opacity', 1);
	}).mouseout(function()
	{
		if( $(this).attr('id') != 'image-'+$.g_sSerieId ) $(this).css('opacity', 0.5);
	});

	// Mouseover/out menuknoppen
	$("div#collection ul li a").mouseover(function()
	{
		$(this).css('color', '#be3100');
	}).mouseout(function()
	{
		$(this).css('color', '#FFFFFF');
	});

	// Mouseover/out actieve menuknop
	$('a#' + $.g_sSerieId).mouseover(function()
	{
		$(this).css('color', '#be3100');
	}).mouseout(function()
	{
		$(this).css('color', '#be3100');
	});

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

// Animeer de juiste serie naar de juiste positie
function animateSerie()
{
	// Serie id opslaan, die hebben we nodig bij vorige/volgende
	$.g_sSerieId = $(this).attr('id');

	// Top en left bepalen
	var l_iPositionTop = $( 'li#image-' + $.g_sSerieId ).position().top;
	var l_iPositionLeft = $( 'li#image-' + $.g_sSerieId ).position().left;

	// Alle series tranparant maken
	$( 'div#serieImages > ul > li' ).css('opacity', 0.5);
	$( 'div#collection ul li a' ).css('color', '#FFFFFF');

	// Mouseover/out menuknoppen
	$("div#collection ul li a").mouseover(function()
	{
		$(this).css('color', '#be3100');
	}).mouseout(function()
	{
		$(this).css('color', '#FFFFFF');
	});

	// De gekozen serie highlighten
	$( 'li#image-' + $.g_sSerieId ).css('opacity', 1 );
	$( 'a#' + $.g_sSerieId ).css('color', '#be3100' );

	// Mouseover/out actieve menuknop
	$('a#' + $.g_sSerieId).mouseover(function()
	{
		$(this).css('color', '#be3100');
	}).mouseout(function()
	{
		$(this).css('color', '#be3100');
	});

	// Controleren of dit de laatste serie in een categorie is
	// Als dit het geval is, dan moet de afbeelding op de tweede plek komen
	if( $.g_sSerieId == $(this).parent().parent().children().last().children().first().attr('id') )
	{
		// Animeer de gekozen serie naar de juiste plaats
		$( 'div#serieImages > ul' ).animate(
		{
			top: '-' + l_iPositionTop,
			left: '-' + ( l_iPositionLeft - 290 )
		}, 500 );
	}
	else
	{
		// Animeer de gekozen serie naar de juiste plaats
		$( 'div#serieImages > ul' ).animate(
		{
			top: '-' + l_iPositionTop,
			left: '-' + l_iPositionLeft
		}, 500 );
	}

	return false;
}

// Naar de vorige serie gaan
function gotoPrevious()
{
	if( $('a#'+$.g_sSerieId).parent().prev().children().first().attr('id') == undefined )
	{
		// id van de laatste serie in de huidige groep ophalen
		$.g_sSerieId = $('a#'+$.g_sSerieId).parent().parent().children().last().children().first().attr('id');
	}
	else
	{
		// id van de vorige serie ophalen
		$.g_sSerieId = $('a#'+$.g_sSerieId).parent().prev().children().first().attr('id');
	}

	// Fake een click bij de juiste serie
	$( 'a#' + $.g_sSerieId ).trigger('click');

	return false;
}

// Naar de volgende serie gaan
function gotoNext()
{
	if( $('a#'+$.g_sSerieId).parent().next().children().first().attr('id') == undefined )
	{
		// id van de eerste serie in de huidige groep ophalen
		$.g_sSerieId = $('a#'+$.g_sSerieId).parent().parent().children().first().children().first().attr('id');
	}
	else
	{
		// id van de volgende serie ophalen
		$.g_sSerieId = $('a#'+$.g_sSerieId).parent().next().children().first().attr('id');
	}

	// Fake een click bij de juiste serie
	$( 'a#' + $.g_sSerieId ).trigger('click');

	return false;
}