$(document).ready(function () {
		
	//jCarousel Plugin
	$('#carousel').jcarousel({
		vertical: true,	//display vertical carousel
		scroll: 0,	//auto scroll
		auto: 0,	//the speed of scrolling
		wrap: 'last', //go back to top when reach last item
        visible: 3,
        easing: 'swing',
        initCallback: mycarousel_initCallback	//extra called back function
//        buttonNextCallback:   mycarousel_buttonNextCallback,
//        buttonPrevCallback:   mycarousel_buttonPrevCallback
    });

	//Front page Carousel - Initial Setup
	//set all the item to full opacity
   	$('div#slideshow-carousel a img').css({'opacity': '0.5'});
   	
   	//readjust the first item to 50% opacity
   	$('div#slideshow-carousel a img:first').css({'opacity': '1.0'});
   	
   	//append the arrow to the first item
   	$('div#slideshow-carousel li a:first').append('<SPAN class=arrow></SPAN>')

 
  	//Add hover and click event to each of the item in the carousel
    $('div#slideshow-carousel li a').hover(
       	function () {
        	
        	//check to make sure the item is not selected
       		if (!$(this).has('span').length) {
       			//reset all the item's opacity to 50%
        		$('div#slideshow-carousel li a img').stop(true, true).css({'opacity': '0.5'});
        		
        		//adust the current selected item to full opacity
   	    		$(this).stop(true, true).children('img').css({'opacity': '1.0'});
       		}		
       	},
       	function () {
        		
        	//on mouse out, reset all the item back to 50% opacity
       		$('div#slideshow-carousel li a img').stop(true, true).css({'opacity': '0.5'});
       		
       		//reactivate the selected item by loop through them and look for the one
       		//that has the span arrow
       		$('div#slideshow-carousel li a').each(function () {
				//found the span and reset the opacity back to full opacity
       			if ($(this).has('span').length) $(this).children('img').css({'opacity': '1.0'});

       		});
        		
       	}
	).click(function () {

		//remove the span.arrow
	    $('span.arrow').remove();
	    
	    //append it to the current item        
		$(this).append('<SPAN class=arrow></SPAN>');
		
		//remove the active class from the slideshow main
		$('div#slideshow-main li').removeClass('active');
		
		//display the main image by appending active class to it.        
       	$('div#slideshow-main li.' + $(this).attr('rel')).addClass('active');	
        	
       	return false;
	});


});

var milliSecondiCambioElementoAttivo = 4000; //Tempo in millisecondi tra una transizione e l'altra
var stopAnimazione = false; //Indica se lo scorrimento dell'elemento attivo deve essere bloccato oppure no
var timeoutID; //Identifica richieste di "scorrimento elemento attivo" messe in coda.




//Carousel Tweaking
function mycarousel_initCallback(carousel) {

    timeoutID = setTimeout(function () { scorriElemento(carousel); }, milliSecondiCambioElementoAttivo);

	// Pause autoscrolling if the user moves with the cursor over the clip.
    // resume otherwise
	carousel.clip.hover(function() {
	    clearTimeout(timeoutID);
	    stopAnimazione = true;
	}, function() {
	    stopAnimazione = false;
	    timeoutID = setTimeout(function () { scorriElemento(carousel); }, milliSecondiCambioElementoAttivo);
	});

    //Interrompo animazione se sono sopra bottoni NEXT e PREV
	carousel.buttonNext.hover(function () {
	    clearTimeout(timeoutID);
	    stopAnimazione = true;
    }, function () {
        stopAnimazione = false;
        timeoutID = setTimeout(function () { scorriElemento(carousel); }, milliSecondiCambioElementoAttivo);
    });

   carousel.buttonPrev.hover(function () {
        clearTimeout(timeoutID);
        stopAnimazione = true;
    }, function () {
        stopAnimazione = false;
        timeoutID = setTimeout(function () { scorriElemento(carousel); }, milliSecondiCambioElementoAttivo);
    });

    carousel.buttonNext.click(function () { elementoGiu(carousel); });

    carousel.buttonPrev.click(function () { elementoSu(carousel); });


	// Interrompe scorrimento  se ci si posiziona su elemento centrale attivo
    // resume otherwise
	$('div#slideshow-main li').hover(function () {
	    clearTimeout(timeoutID);
	    stopAnimazione = true;
	}, function () {
	    stopAnimazione = false;
	    timeoutID = setTimeout(function () { scorriElemento(carousel); }, milliSecondiCambioElementoAttivo);
	});
}



//Funzione che si occupa di scorrere elemento attivo e mostrarlo in controllo centrale.
function scorriElemento(carousel) {
    if (!stopAnimazione) {

        
        var nextPosActive = 0;

        for (var i = carousel.first; i <= carousel.last; i++) {
            if ($('div#slideshow-main li.' + 'p' + i).hasClass('active')) {
                $('div#slideshow-main li.' + 'p' + i).removeClass('active')
                if (i == carousel.last)
                    nextPosActive = 1;
                else
                    nextPosActive = i + 1;
            }
        }
        carousel.scroll(nextPosActive);
        $('div#slideshow-main li.' + 'p' + nextPosActive).addClass('active');
        $('span.arrow').remove();
       
        $('div#slideshow-carousel li a[rel="p' + nextPosActive + '"]').append('<SPAN class=arrow></SPAN>');


        $('div#slideshow-carousel li a').each(function () {
            //found the span and reset the opacity back to full opacity
            if ($(this).has('span').length) $(this).children('img').css({ 'opacity': '1.0' });
            else $(this).children('img').css({ 'opacity': '0.5' });

        });

        //rimetto in coda lo scorrimento dell'elemento attivo
        timeoutID = setTimeout(function () { scorriElemento(carousel); }, milliSecondiCambioElementoAttivo);
        
    }
}



/**
* This is the callback function which receives notification
* about the state of the next button.
*/
//function mycarousel_buttonNextCallback(carousel, button, enabled) {

//    attivaElementoSu(carousel);
//};

/**
* This is the callback function which receives notification
* about the state of the prev button.
*/
//function mycarousel_buttonPrevCallback(carousel, button, enabled) {
//    elementoGiu(carousel);

//};




//Funzione che si occupa di scorrere elemento attivo e mostrarlo in controllo centrale.
function elementoGiu(carousel) {
    var nextPosActive = 0;

    for (var i = carousel.first; i <= carousel.options.size; i++) {
        if ($('div#slideshow-main li.' + 'p' + i).hasClass('active')) {
            $('div#slideshow-main li.' + 'p' + i).removeClass('active')
            if (i != carousel.options.size)
                nextPosActive = i + 1;
                //Se sono in fondo lo tengo li
            else nextPosActive = carousel.options.size;
        }
    }
    carousel.scroll(nextPosActive);
    $('div#slideshow-main li.' + 'p' + nextPosActive).addClass('active');
    $('span.arrow').remove();

    $('div#slideshow-carousel li a[rel="p' + nextPosActive + '"]').append('<SPAN class=arrow></SPAN>');


    $('div#slideshow-carousel li a').each(function () {
        //found the span and reset the opacity back to full opacity
        if ($(this).has('span').length) $(this).children('img').css({ 'opacity': '1.0' });
        else $(this).children('img').css({ 'opacity': '0.5' });

    });

}


//Funzione che si occupa di scorrere elemento attivo e mostrarlo in controllo centrale.
function elementoSu(carousel) {
    var nextPosActive = 0;

    for (var i = carousel.first; i <= carousel.options.size; i++) {
        if ($('div#slideshow-main li.' + 'p' + i).hasClass('active')) {
            $('div#slideshow-main li.' + 'p' + i).removeClass('active')
            if (i != 1)
                nextPosActive = i - 1;
                //Se sono in cima lo tengo li
            else nextPosActive = 1;
        }
    }


    carousel.scroll(nextPosActive);
    $('div#slideshow-main li.' + 'p' + nextPosActive).addClass('active');
    $('span.arrow').remove();

    $('div#slideshow-carousel li a[rel="p' + nextPosActive + '"]').append('<SPAN class=arrow></SPAN>');


    $('div#slideshow-carousel li a').each(function () {
        //found the span and reset the opacity back to full opacity
        if ($(this).has('span').length) $(this).children('img').css({ 'opacity': '1.0' });
        else $(this).children('img').css({ 'opacity': '0.5' });

    });


}