// JavaScript Document

function mycarousel_initCallback(carousel)
{
	// external controls
	$('.jcarousel-control a').bind('click', function() {
        carousel.scroll($.jcarousel.intval($(this).text()));
        return false;
    });

    // Disable autoscrolling if the user clicks the prev or next button.
    carousel.buttonNext.bind('click', function() {
        carousel.startAuto(0);
    });

    carousel.buttonPrev.bind('click', function() {
        carousel.startAuto(0);
    });

    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });
};

function mycarousel_itemVisibleInCallback(carousel, item, idx, state) {
	var id = '#'+idx;
	$('.jcarousel-control').find(id).addClass('active-item');
}

function mycarousel_itemVisibleOutCallback(carousel, item, idx, state) {	
	var id = '#'+idx;
	$('.jcarousel-control').find(id).removeClass('active-item');
}


$(document).ready(function() {
    // add the external control dots to the featured carousel ** MUST BE BEFORE THE CAROUSEL INIT
    $size = $('#featured-projects li').size();
    for (count = 1; count <= $size; count++) {
        $('.jcarousel-control').append('<a id="' + count + '" href="#">' + count + '</a>');
    }
    $('.jcarousel-control').append('<div class="clear"></div>');

    // initialize the carousel
    $('#featured-projects').jcarousel({
        auto: 8,
        wrap: 'last',
        initCallback: mycarousel_initCallback,
        itemVisibleInCallback: mycarousel_itemVisibleInCallback,
        itemVisibleOutCallback: mycarousel_itemVisibleOutCallback
    });


    // timeline hovers
    $("#timeline li .dot").hover(
	    function() {
	        $(this).siblings(".bubble").show()
	    },
	    function() {
	        $(this).siblings(".bubble").hide();
	    }
	);
});