$(document).ready(function()
{
	$.g_aCount = new Array();
	$.g_aItem = 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.scrollItems').each( function() 
	{
		// Restwaarde berekenen met de modulo (%)
		$.g_aCount[ this.id ] = ( $( 'div#extremeWide ul li' ).size() % 4 );
		$.g_aItem[ this.id ] = $( 'div#extremeWide ul li:first-child' ).attr('id');
	});
		
	// Vorige en volgende knoppen activeren
	$('img.homeLeftBtn').click( function()
	{
		gotoPrevious();
	});
	$('img.homeRightBtn').click( function()
	{
		gotoNext();
		
		//alert( "derp "+$.g_aItem['extremeWide'] );
	});

});

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

// Naar de vorige serie gaan
function gotoPrevious()
{
	l_oCurrent = $( "div#extremeWide ul li#" + $.g_aItem['extremeWide'] );
		
	if( l_oCurrent.prev().attr('id') != undefined ) 
	{
		$.g_aItem['extremeWide'] = l_oCurrent.prev().attr('id');
		animateSerie( 'extremeWide' );
	}
	
	// Knoppen tonen of verbergen
	l_sVisibility = ( l_oCurrent.prev().prev().attr('id') != undefined ) ? "visible" : "hidden";
	$( '#homeRight' ).css( "visibility", "visible" );
	$( '#homeLeft' ).css( "visibility", l_sVisibility );
	
	return false;
}

// Naar de volgende serie gaan
function gotoNext()
{
	l_oCurrent = $( "div#extremeWide ul li#" + $.g_aItem['extremeWide'] );
		
	if( l_oCurrent.next().next().next().next().attr('id') != undefined ) 
	{
		$.g_aItem['extremeWide'] = l_oCurrent.next().attr('id');
		animateSerie( 'extremeWide' );
	}
	
	// Knoppen tonen of verbergen
	l_sVisibility = ( l_oCurrent.next().next().next().next().next().attr('id') != undefined ) ? "visible" : "hidden";
	$( '#homeRight' ).css( "visibility", l_sVisibility );
	$( '#homeLeft' ).css( "visibility", "visible" );
	
	return false;
}