//con questa funzione
function mycarousel_itemLoadCallback(carousel, state){
	//se gli elementi sono pił di uno e quindi scrolla
	//scrolla di uno si crea un elemento precedente
    if (carousel.prevFirst != null) {
       //i = l'indice dell'elemento precedente, vai a avanti sino all'ultimo elemento non visibile e rimuovili  
        for (var i = carousel.prevFirst; i <= carousel.prevLast; i++) {
            // jCarousel takes care not to remove visible items
            carousel.remove(i);
        }
    }


	//definisco il numero di elementi per pagine sommando il primo e l'ultimo +1
    var per_page = carousel.last - carousel.first + 1;
	//la pagina corrente sarą pari a zero
    var currPage = 0;
    var f,l;
    var cr = carousel;


	//
    for (var i = carousel.first; i <= carousel.last; i++) {
        var page = Math.ceil(i / per_page);

        if (currPage != page) {
            currPage = page;

            f = ((page - 1) * per_page) + 1;
            l = f + per_page - 1;

            f = f < carousel.first ? carousel.first : f;
            l = l > carousel.last ? carousel.last : l;

            if (carousel.has(f, l)) {
                continue;
            }

            mycarousel_makeRequest(carousel, f, l, per_page, page);
        }else if(currPage == page){

		}

    }
	
	
	
};

function mycarousel_makeRequest(carousel, first, last, per_page, page){
    // Lock carousel until request has been made
    carousel.lock();

    jQuery.get('portfolio-web-agency/portfolios.php',   {
            'per_page': per_page,
            'page': page
        },
        function(data) {
            mycarousel_itemAddCallback(carousel, first, last, data, page);
        },
        'xml'
    );
};

function mycarousel_itemAddCallback(carousel, first, last, data, page){
    // Unlock
    carousel.unlock();

    // Set size
    carousel.size($('photos', data).attr('total'));

    var photos = $('item', data);
    var per_page = carousel.last - carousel.first + 1;

    for (var i = first; i <= last; i++) {
        var pos = i - 1;
        var idx = Math.round(((pos / per_page) - Math.floor(pos / per_page)) * per_page);

        carousel.add(i, mycarousel_getItemHTML(i,photos.get(idx)));
    }
};

 
/**
 * Global item html creation helper.
 */
function mycarousel_getItemHTML(i,xml){

    //var url = 'http://farm'+$(photo).attr('farm')+'.static.flickr.com/'+$(photo).attr('server')+'/'+$(photo).attr('id')+'_'+$(photo).attr('secret')+'_s.jpg';
    //return '<a href="http://www.flickr.com/photos/'+$(photo).attr('owner')+'/'+$(photo).attr('id')+'/" target="_blank" title="'+$(photo).attr('title')+'"><img src="' + url + '" border="0" width="75" height="75" alt="'+$(photo).attr('title')+'" /></a>';

	

	var links = jQuery('links', xml).text();	
	var descrizione = jQuery('descrizionesito', xml).text();
	var sito        = jQuery('sito', xml).text();  
	var nomesito    = jQuery('nomesito', xml).text();  
	var image       = jQuery('image', xml).text();
	var items		= ""; 
	var img  		= new Image();

	items  = '<a href="'+links+'" class="links loading"><img src="'+image+'"/></a>';
	items += '<span class="titolosito">'+nomesito+'</span>';		
	items += '<span class="descrizionesito">'+descrizione+'</span>';		
	items += '<span class="linksito">';
		items += '<a href="javascript:void(0);" onclick="window.open(\''+sito+'\');" >';
			items += '<img src="http://www.studioeasyweb.it/grafica/template/vaialsito_r1_c1.gif" alt="Vai al sito" border="0">';
		items += '</a>';
	items += '</span>';
	items += '<span class="linkscheda">';
		items += '<a href="'+links+'" >';
			items += '<img src="http://www.studioeasyweb.it/grafica/template/vaialsito_r1_c8.gif" alt="Vedi la scheda" border="0">';
		items += '</a>';
	items += '</span>';
	
	//var it = $('.jcarousel-item-'+i);
	
	//$(it).css({'background': '#f00 url("http://www.studioeasyweb.it/grafica/images/loading-small.gif") 50% 50% no-repeat'});

	 //$('.jcarousel-item-'+i).css({'background': '#f5f5f5'});

	 //$('.jcarousel-item-'+i+' a.links').attr('src',(jQuery('image', xml).text()));



	/*$(img)
		.load(function () {				
			$(it).children('.links').csscss({'background': '#f00 url("http://www.studioeasyweb.it/grafica/images/loading-small.gif") 50% 50% no-repeat'});
			$(it).children('.links').append('<img src="'+this.src+'"/>');
			$(it).children('.links').removeClass('loading');
		})
	.attr('src',(jQuery('image', xml).text()));	*/
	
	 //$('.jcarousel-item-'+i).css({'background': '#f5f5f5 url("http://www.studioeasyweb.it/grafica/images/loading-small.gif") 50% 50% no-repeat'});
	 //$('.jcarousel-item-'+i).css({'background': '#f5f5f5'});
	 //$('.jcarousel-item-'+i+' a.links').attr('src',(jQuery('image', xml).text()));	
	return	items;
};

jQuery(document).ready(function() {
	$('#portfolio').append('<ul id="mycarousel" class="jcarousel-skin-tango"></ul>');
    jQuery('#mycarousel').jcarousel({
		scroll:1,
		auto:4,
        start: 1,
        offset: 1,
        animation: 'slow',
		wrap: 'both',
        easing: 'swing',
        itemLoadCallback: mycarousel_itemLoadCallback//viene richiamata al momento del caricamento degli articoli

    });
	
			
	/*$('#mycarousel .jcarousel-item-placeholder').css({'background': 'transparent url("grafica/images/loading-small.gif") 50% 50% no-repeat'});*/

});