//js file

var currentIndex;
var itemURL = 'http://thomas.theo.kuleuven.be/pastoraal/vieringen/jquery/scroller/items.data.php';

$(document).ready(function(){
	$.getJSON(itemURL,{'func':'count-items'}, handle_init)
});

function handle_init(data){
	if(data.total > 0){
		$('#vieringen-carousel').jcarousel({
			'start':1,
			'scroll':1,
			'animation':'fast',
			'auto':10,
			'wrap':'last',
			initCallback: mycarousel_initCallback,
			itemLoadCallback: mycarousel_itemLoadCallback,
			itemFirstInCallback: mycarousel_itemFirstInCallback
		});
	}
}
function mycarousel_initCallback(carousel){
	var iCSS = {	'position':'absolute',
					'width':'200px',
					'height':'100px',
					'background-color':'#444',
					'top':0,
					'right':0,
					'margin':'10px',
					'z-index':'999',
					'opacity':'0.8',
					'padding':'25px',
					'color':'#FFF'
					}
	
	$('.jcarousel-container').append('<div id="controls"></div>');	
	$('.jcarousel-container').append('<div id="info"></div>');
	
	$('#info').css(iCSS);
	$('#info').corner();
	
}
function mycarousel_itemFirstInCallback(carousel, item, index, state) { 
	currentIndex = index;
	var lCSS = {	'color':'#444',
					'text-decoration':'none'
				};

	$('#controls a').css(lCSS);
	$("#control-"+index).css('color','#F00');
	
	$.getJSON(itemURL,{'func':'get-items'}, function(data){
		
		var arrayindex = index - 1;
		$('#info').html('<h3 class="sc_title">'+data.items[arrayindex].title+'</h3><p>'+data.items[arrayindex].content+'</p>');
		$('.sc_title').css('color','#FFF');
	});
	
}
function mycarousel_itemLoadCallback(carousel, state)
{
	// Since we get all URLs in one file, we simply add all items
    // at once and set the size accordingly.
    if (state != 'init')
        return;
		$.getJSON(itemURL,{'func':'get-items'}, function(data){
			mycarousel_itemAddCallback(carousel, carousel.first, carousel.last, data);
		});
};
function mycarousel_itemAddCallback(carousel, first, last, data)
{
    // Simply add all items at once and set the size accordingly.
    var items = data.items;

    for (i = 0; i < items.length; i++) {
		var index = i + 1;
		carousel.add(i+1, mycarousel_getItemHTML(items[i].img, items[i].url));
		$('#controls').append('<a href="#" title="'+ index +'" id="control-'+ index +'">&bull;</a>');
    }
	/* EXTERNAL CONTROLS */
	var cCSS = {	'position':'absolute',
					'z-index':'555',
					'bottom':25,
					'left':350,
					'width':80,
					'font-size':30
				};
	var lCSS = {	'color':'#444',
					'text-decoration':'none'
				};
	
	$('#controls').css(cCSS);	
	$('#controls a').css(lCSS);	
	$('#controls a').bind({	'click':function() {
												carousel.scroll($.jcarousel.intval($(this).attr('title')));
												return false;
												},
							'mouseover': function(){ $(this).css('color','#FFF'); },
							'mouseleave': function(){ 	if($(this).attr('title') != currentIndex){
															$(this).css('color','#444');
														}else{
															$(this).css('color','#F00');
														}
													} 
						  });
	carousel.size(items.length);
};
/**
 * Item html creation helper.
 */
function mycarousel_getItemHTML(img,url)
{
    return '<a href="'+url+'"><img src="' + img + '" alt="" /></a>';
};