$(document).ready(function()
{
	$.g_aSerieId = new Array();
	$.g_aSerieCount = new Array();	// Deze array hebben we nodig om het terugschuiven goed te laten verlopen
	
	// Global var maken voor het onthouden van de gekozen serie
	$('div.serieImages').each( function() 
	{
		// Restwaarde berekenen met de modulo (%)
		$.g_aSerieCount[ this.id ] = ( $( 'div#'+this.id+' ul li' ).size() % 4 );
		$.g_aSerieId[ this.id ] = $( 'div#'+this.id+' ul li:first-child' ).attr('id');
	});
	
	// Vorige en volgende knoppen activeren
	$('img.left').click( function()
	{
		gotoPrevious( this.name );
	});
	$('img.right').click( function()
	{
		gotoNext( this.name );
	});
	
	
	$('.left').hover(
		function() 
		{
			$(this).attr('src', 'images/left-over.gif');
		}, 
		function() 
		{
			$(this).attr('src', 'images/left.gif');
		}
	);
	
	$('.right').hover(
		function() 
		{
			$(this).attr('src', 'images/right-over.gif');
		}, 
		function() 
		{
			$(this).attr('src', 'images/right.gif');
		}
	);

});

// Animeer de juiste serie naar de juiste positie
function animateSerie( p_iSerie )
{
	// Top en left bepalen
	var l_iPositionTop = $( 'div#serieImages'+p_iSerie+' ul li#' + $.g_aSerieId['serieImages'+p_iSerie] ).position().top;
	var l_iPositionLeft = $( 'div#serieImages'+p_iSerie+' ul li#' + $.g_aSerieId['serieImages'+p_iSerie] ).position().left;
	
	// Animeer de gekozen serie naar de juiste plaats
	$( 'div#serieImages'+p_iSerie+' > ul' ).animate(
	{ 
		top: '-' + l_iPositionTop,
		left: '-' + l_iPositionLeft
	}, 500 );
	
	return false;
}

// Naar de vorige serie gaan
function gotoPrevious( p_iSerie )
{
	/*
	// id van de volgende serie ophalen
	$.g_aSerieId['serieImages'+p_iSerie] = $( 'div#serieImages'+p_iSerie+' ul li#' + $.g_aSerieId['serieImages'+p_iSerie] ).prev().prev().prev().prev().attr('id');
	// Controleren of je bij de laatste serie bent, dan weer vooraan beginnen
	if( $.g_aSerieId['serieImages'+p_iSerie] == undefined ) 
	{
		switch( $.g_aSerieCount['serieImages'+p_iSerie] )
        {
            case 0: 
            	$.g_aSerieId['serieImages'+p_iSerie] = $( 'div#serieImages'+p_iSerie+' ul li:last-child' ).prev().prev().prev().attr('id');
            	break;
            case 1: 
            	$.g_aSerieId['serieImages'+p_iSerie] = $( 'div#serieImages'+p_iSerie+' ul li:last-child' ).attr('id');
            	break;
            case 2: 
            	$.g_aSerieId['serieImages'+p_iSerie] = $( 'div#serieImages'+p_iSerie+' ul li:last-child' ).prev().attr('id');
            	break;
            case 3: 
            	$.g_aSerieId['serieImages'+p_iSerie] = $( 'div#serieImages'+p_iSerie+' ul li:last-child' ).prev().prev().attr('id');
            	break;
            default: 
            	$.g_aSerieId['serieImages'+p_iSerie] = $( 'div#serieImages'+p_iSerie+' ul li:last-child' ).attr('id');
        }
	}
	*/

	l_oCurrent = $( 'div#serieImages'+p_iSerie+' ul li#' + $.g_aSerieId['serieImages'+p_iSerie] );
	
	if( l_oCurrent.prev().attr('id') != undefined ) 
	{
		$.g_aSerieId['serieImages'+p_iSerie] = l_oCurrent.prev().attr('id');
		animateSerie( p_iSerie );
	}
	
	// Knoppen tonen of verbergen
	l_sVisibility = ( l_oCurrent.prev().prev().attr('id') != undefined ) ? "visible" : "hidden";
	$( '#left'+p_iSerie ).css( "visibility", l_sVisibility );
	$( '#right'+p_iSerie ).css( "visibility", "visible" );
	
	return false;
}

// Naar de volgende serie gaan
function gotoNext( p_iSerie )
{
	/*
	// id van de volgende serie ophalen
	$.g_aSerieId['serieImages'+p_iSerie] = $( 'div#serieImages'+p_iSerie+' ul li#' + $.g_aSerieId['serieImages'+p_iSerie] ).next().next().next().next().attr('id');
	// Controleren of je bij de laatste serie bent, dan weer vooraan beginnen
	if( $.g_aSerieId['serieImages'+p_iSerie] == undefined ) $.g_aSerieId['serieImages'+p_iSerie] = $( 'div#serieImages'+p_iSerie+' ul li:first-child' ).attr('id');
	*/
	
	l_oCurrent = $( 'div#serieImages'+p_iSerie+' ul li#' + $.g_aSerieId['serieImages'+p_iSerie] );
	
	if( l_oCurrent.next().next().next().next().attr('id') != undefined ) 
	{
		$.g_aSerieId['serieImages'+p_iSerie] = l_oCurrent.next().attr('id');
		animateSerie( p_iSerie );
	}
	
	// Knoppen tonen of verbergen
	l_sVisibility = ( l_oCurrent.next().next().next().next().next().attr('id') != undefined ) ? "visible" : "hidden";
	$( '#right'+p_iSerie ).css( "visibility", l_sVisibility );
	$( '#left'+p_iSerie ).css( "visibility", "visible" );
	
	return false;
}