$(document).ready(

	function()
	{
		initPageables();
   	}	

);

function initPageables()
{ 
	
		
	/* paginering */
	$(".pageable").each(
	
		function()
		{
			var currentIndex = 0;
									
			var id = $(this).attr("id"); //voorbeeld: dossiers_23
			
			if ( id )
			{
				/*
					type = type content dat opgehaald moet worden
					dataId = id van newscategorie/commentaren etc..
					resultLimit = aantal items dat moet worden opgehaald vanaf (currentIndex * resultLimit)
				*/
				//alert(id);
				var data = id.split("_");
				var type = data[0];
				var dataId = parseInt(data[1]);
				var resultLimit = data[2] || 12;
				
				resultLimit = parseInt( resultLimit );
								
				/*
					betreffende pageable-object selecteren
				*/ 
				var baseExpression = "#" + id;
				
				var pageable = $( baseExpression );
				
				/*
					bijbehorende pager selecteren
				*/
				var pagerExpression = baseExpression + " .pager";
				
				var pages =  $( pagerExpression + " p a");
				
				/*
					aantal pagina's opvragen
				*/
				//var numPages = pages.size();
				var numPages = $(pagerExpression + " p a:last").text();
				
				/*
					kijk of er een pager aanwezig is
				*/
				
				if(numPages > 0)
				{
					/*
						limit voor currentIndex
					*/
					var max = numPages - 1;					
					
					/*
						om de gefloate links te centreren
					*/
					var pager = $(baseExpression + " .pager p");
					var numLinks = pager.find("a").size();
					var numShorters = pager.find("span").size();
					var marginLeft = Math.round( ((numLinks+numShorters) * 26) / 2 );
							
					pager.css( { margin: "0 0 0 -" + marginLeft + "px" } );
									
					
					
				
					/*
						elke pagina link index geven en die toewijzen aan currentIndex bij onclick
					*/
					pages.each(
						
						function(i)
						{
							$(this).click(
								
								function()
								{			
									currentIndex = ($(this).text()-1);
									switchState(id, type, dataId, currentIndex, resultLimit);
									
									return false;
								}
								
							);
						}
					);
					
					/*
						vorige/volgende buttons instellen
					*/
					
					var prev = $( pagerExpression + " .prev");
					var next = $( pagerExpression + " .next");
					
					/*
						vorige in eerste instantie verbergen
					*/
					//prev.hide();
					
					/*
						wanneer er 1 pagina is, volgende verbergen
					*/
					if(numPages == 1) {
						next.hide();
					}
					
					prev.click(
					
						function()
						{
							currentIndex--;
							if ( currentIndex <= 0 ) 
							{
								currentIndex = 0;						
							}
							
							switchState(id, type, dataId, currentIndex, resultLimit);
							
							return false;
						}
					);
					
					next.click(
						
						function()
						{
							currentIndex++;				
							if ( currentIndex >= max ) 
							{
								currentIndex = max;			
							}
							
							switchState(id, type, dataId, currentIndex, resultLimit);
							
							return false;
						}
					
					);
				}
			
			}
			
			
		}
		
	);
	
}

//initPages('comments_1_new_stelling', 'comments', parts[1], currentIndex, resultLimit, pager, num_pages );

function initPages(id, type, dataId, aCurrentIndex, resultLimit, baseExpression, numPages) 
{	
	var pagerExpression = baseExpression + " .pager";
	
	//limit voor currentIndex
	var max = numPages - 1;					
	
	
	var currentIndex = aCurrentIndex || 0;
	
	//om de gefloate links te centreren
	var pager = $(baseExpression + " .pager p");
	
	var numLinks = pager.find("a").size();
	var numShorters = pager.find("span").size();
	var marginLeft = Math.round( ((numLinks+numShorters) * 26) / 2 );
			
		
	pager.css( { margin: "0 0 0 -" + marginLeft + "px" } );
				
					
	var pages =  $( pagerExpression + " p a");	
	/*
		elke pagina link index geven en die toewijzen aan currentIndex bij onclick
	*/
	pages.each(
		
		function(i)
		{
			$(this).click(
				
				function()
				{			
					currentIndex = ($(this).text()-1);
					switchState(id, type, dataId, currentIndex, resultLimit);
					
					return false;
				}
				
			);
		}
	);
	
	/*
		vorige/volgende buttons instellen
	*/
	
	var prev = $( pagerExpression + " .prev");
	var next = $( pagerExpression + " .next");
	
	/*
		vorige in eerste instantie verbergen
	*/
	//prev.hide();
	
	/*
		wanneer er 1 pagina is, volgende verbergen
	*/
	/*if(numPages == 1) {
		next.hide();
	}*/
	
	prev.click(
	
		function()
		{
			currentIndex--;
			if ( currentIndex <= 0 ) 
			{
				currentIndex = 0;						
			}
			
			switchState(id, type, dataId, currentIndex, resultLimit);
			
			return false;
		}
	);
	
	next.click(
		
		function()
		{
			currentIndex++;				
			if ( currentIndex >= max ) 
			{
				currentIndex = max;			
			}
			
			switchState(id, type, dataId, currentIndex, resultLimit);
			
			return false;
		}
	
	);

}

/*
	lokale functie die bij elke klik wordt aangeroepen
*/

function switchState(id, type, dataId, currentIndex, resultLimit)
{		
	/*
		nieuwe data ophalen en betreffende view updaten
	*/

	if (type == 'comments') {
	
		var activeClass = "active";
		var sort = $('div.pageable').attr('id');
		var sort = sort.split('_');
		var arg2 = sort[3];
		var sort = sort[2];
		var resultOffset = currentIndex * 10;
		
		sortComments(sort + '_' + dataId + '_' + resultOffset + '_' +arg2, currentIndex );
		
		var newPagerExpression = "#" + $(".pageable").attr("id") + " .pager";
		$( newPagerExpression + " p .active").removeClass( activeClass );		
		$( newPagerExpression + " p a:eq(" + currentIndex + ")").addClass( activeClass );

	} else {
		updateView( id, type, dataId, currentIndex, resultLimit );
	}

}



function updateView( targetName, type, dataId, currentIndex, resultLimit )
{	
		var target = "#" + targetName;
 		$.ajax({
			type: "GET",
			url: ("/page/ajax/getPagedItems/" + type +"/" + currentIndex + "/" + resultLimit + "/" + dataId) ,
			dataType: "xml",
			success: function(xml) {
					/*
						alle kolommen -> binnen rows -> binnen het doel legen uitgezonderd de pager
					*/
					var lastRow = $( target + " .row").size() - 1;
					var allColumnsExpression = target + " .row:lt(" + lastRow + ") .column";
					$( allColumnsExpression ).text( "" );
				
					var xmlResults = $(xml).find("item");
			
					var numXmlResults = xmlResults.size();
		
					trace = "";
					
					var numCols = $( target + " .row:eq(0) .column").size();
					
					//aantal pagina's
					var num_pages = $(target +" .pager p a:last").text();
					
					//bijbehorende pager selecteren
					var pager = target + " #pager";
																		
					//pager items opbouwen wanneer er meer dan 1 pagina is
					if(num_pages > 1) {
						
							$(pager).text("");	
						
							//build pager
							pagertemplate = getPagerTemplate(num_pages, currentIndex);
							$(pager).append(pagertemplate);
							
																					
							var baseExpression = "#" + targetName;
							var pageable = $( baseExpression );

							initPages(targetName, type, dataId, currentIndex, resultLimit, baseExpression, num_pages );

							//init pages
							//initPageables(currentIndex);
					}
					else {
						$(pager).text("");	
						
					}			
										
					xmlResults.each(
			
						function(i)
						{ 
										
							//TO DO: need to make global to work for all pages 
							var headline = $(this).find('headline').text();
							var headline = headline.replace(/-nL2Br-/g,'<br/>');
							var href = $(this).find('url').text();
							var extra =  $(this).find('extra').text();
							
							if(type != 'dossierlinks') {
								var status_new = $(this).find('new').text();
								var image_src = $(this).find('imgsrc').text();
								var date =  $(this).find('datum').text();
								var play =  $(this).find('play').text();
							}
							
							if(type == "dossiernieuws"){
								var item = getNewsItemTemplate( image_src, href, headline, date, extra, play );
							}
							if(type == "dossieruitzendingen"){
								var item = getNewsItemTemplate( image_src, href, headline, date, extra, play );
							}
							if(type == "dossieropinie"){
								var item = getNewsItemTemplate( image_src, href, headline, date, extra, play );
							}
							if(type == "opinieblogs"){
								var item = getNewsItemTemplate( image_src, href, headline, date, extra, play );
							}
							if(type == "opiniehoofdredactioneel"){
								var item = getNewsItemTemplate( image_src, href, headline, date, extra, play );
							}	
							if(type == "opinietegast"){
								var item = getNewsItemTemplate( image_src, href, headline, date, extra, play );
							}	
							if(type == "opinieuwverhaal"){
								var item = getNewsItemTemplate( image_src, href, headline, date, extra, play );
							}	
							if(type == "dossierlinks"){
								var item = getLinkItemTemplate( href, headline, extra );
							}
							if(type == "dossiers"){
								var item = getDossierTemplate( image_src, href, headline, status_new);
							}
							
							var row = i < ( resultLimit / 2 ) ? 0 : 1;
							//var col = i % 3;
							var col = i % numCols;
						
							var exp = target + " .row:eq(" + row + ") .column:eq(" + col + ")";
							
							trace += exp + "\n"
							
							item.css({display: "none"});
														
							$( exp ).append( item.fadeIn("slow", function() { $(this).css( { opacity:1 } ) } ) );
							
						}
					);
					
					//alert( trace );
	            }
		})
}



/**
 * Calculate start and end point of pagination links depending on 
 * current_page and num_display_entries.
 * @return {Array}
 */
function getInterval(num_display_entries, current_page, np)  {
	var ne_half = Math.ceil(num_display_entries/2);
	var upper_limit = np-num_display_entries;
	var start = current_page>ne_half?Math.max(Math.min(current_page-ne_half, upper_limit), 0):0;
	var end = current_page>ne_half?Math.min(current_page+ne_half, np):Math.min(num_display_entries, np);
	return [start,end];
}

//zet pager 
function getPagerTemplate(num_pages, currentIndex, displayEntries ) {

	//aantal getoonde pagina's 
	var num_display_entries = displayEntries || 10;
	
	//alert(num_display_entries);
	
	// extra entries die links en rechts in de verkorte pager worden getoond
	var num_edge_entries = 2;
	
	var shorten_text = '...';

	//interval 
	var interval = getInterval(num_display_entries, currentIndex, num_pages);
	
	//alert(interval[0]);
	
	var div = $('<div></div>').addClass("pager");
	var a_prev = $('<a></a>').attr({ href : '#' }).addClass("prev").text("Vorige");
	
	//vorige link verbergen indien nodig 
	if(currentIndex == 0) {
		a_prev.css({"display" : "none"});
	}
		
	var p = $("<p></p>");

	/*
	*	toon een pager met inkorting
	*	Voorbeeld:
	*	pager: aa...bbbbbb...cc
	*		aa = starting point
	*		bbb	= interval links
	*		cc = ending point
	*/
	if(num_pages > (num_display_entries + num_edge_entries)) {
		
		// Generate starting points
		if (interval[0] > 0 && num_edge_entries > 0)
		{
			var end = Math.min(num_edge_entries, interval[0]);
			for(var i=0; i<end; i++) {
				//appendItem(i);
				var a = $("<a></a>").attr( { href : '#' } ).text(i+1);
				if(i == currentIndex) {
					a.addClass("active");	
				}
				p.append(a);	
			}
			
			if(num_edge_entries < interval[0] && shorten_text)
			{
				var span = $("<span></span>").text(shorten_text);
				p.append(span);						
			}
		}
		
		// Generate interval links
		for(var i=interval[0]; i<interval[1]; i++) {
			//appendItem(i);
			//alert(i);
			
			var a = $("<a></a>").attr( { href : '#' } ).text(i+1);
			if(i == currentIndex) {
				a.addClass("active");	
			}
			p.append(a);	
		}
		
		// Generate ending points
		if (interval[1] < num_pages && num_edge_entries > 0)
		{ 
			
			if(num_pages-num_edge_entries > interval[1]&& shorten_text)
			{ 
				var span = $("<span></span>").text(shorten_text);
				p.append(span);	
			}
			
			var begin = Math.max(num_pages-num_edge_entries, interval[1]);
			for(var i=begin; i<num_pages; i++) {
				//appendItem(i);
				var a = $("<a></a>").attr( { href : '#' } ).text(i+1);
				if(i == currentIndex) {
					a.addClass("active");	
				}
				p.append(a);	
			}
			
			
		}
	
	}
	//toon normale pager 
	else {
		for(i = 0;i <= (parseInt(num_pages)-1); i++) {
						
			if(i == currentIndex) {
				var a = $("<a></a>").attr( { href : '#' } ).text(i+1).addClass("active");	
			}
			else {
				var a = $("<a></a>").attr( { href : '#' } ).text(i+1);	
			}
			p.append(a);			
		}
	}
	
	var a_next =  $('<a></a>').attr({ href : '#' }).addClass("next").text("Volgende");
	
	//volgende link verbergen 
	if((currentIndex == num_pages-1) || num_pages == 1) {
		a_next.css({"display" : "none"});
	}	
	
	div.append(a_prev).append(p).append(a_next);

	return div;
}


/*
	blokje van het type 'category'
*/
function getNewsItemTemplate( src, href, headline, date, extra, play )
{
	var div = $("<div></div>").addClass("newsitem");
	var image = $("<p></p>").addClass("image");
					
	var a = $("<a></a>").attr( { href : href } ).text("Lees meer");
	
	if ( src != "" )
	{
		image.css( { "background-image" : "url(" + src + ")" });

	}

	if ( play != "" )
	{
		a.addClass("uitzending");
	}

	var a2 = $("<a></a>").attr( { href : href } ).html( headline )
	
	var h = $("<h3></h3>").append( a2 );
	var pub = $("<p></p>").addClass("published").text( date );
	var extra = $("<p></p>").text( extra );
	
	image.append( a );
	
	div.append( image ).append( h ).append( pub ).append( extra );
	
	return div;
}

/*
	blokje van het type 'category'
*/
function getLinkItemTemplate( href, headline, extra )
{	
	var dl = $("<dl></dl>").addClass("links");
		
	var a = $("<a></a>").attr( { href : href } ).html( headline );
	a.attr({ rel : 'external'});
	
	var dt = $("<dt></dt>").append( a );
	
	if(extra != "") {
		var a2 = $("<a></a>").attr( { href : href } ).html( extra );
	}
	else {
		var a2 = $("<a></a>").attr( { href : href } ).html( href );
	}
	
	
	var dd = $("<dd></dd>").append( a2 );

	dl.append(dt).append(dd);
	
	return dl;
}

/*
	blokje van het type dossier 
*/
function getDossierTemplate( src, href, headline, status_new )
{
	var dl = $("<dl></dl>");

	var a = $("<a></a>").attr( { href : href } ).html( headline );

	var dt = $("<dt></dt>").append( a );
	
	var a2 = $("<a></a>").attr( { href : href } ).html( 'bg image met hier intro dossier' );
	
	if(status_new == 'ja') {
		a2.addClass('new');
	}
		
	var dd = $("<dd></dd>").append( a2 );
	
	if(src != "") {
		dd.css( { "background-image" : "url(" + src + ")" });
	}
		
	dl.append( dt ).append( dd );

	return dl;
}