$(document).ready(function()
{
    $("a[rel='lightbox']").colorbox();
    
    $('.vloerenHover').mouseover(function()
    {
        $(this).children('.vloerenLeft').css("background", "url('images/pijtleVloeren.png') no-repeat center left");
    });
    
      $('.vloerenHover').mouseout(function()
    {
        $(this).children('.vloerenLeft').css("background", "none");
    });

    $('.innerfade').innerfade({
		speed: 750,
		timeout: 5000,
		type: 'random'
	});
    
    $(".validateForm").validate({
        errorPlacement: function(error, element) {
			error.prependTo( element.parent().next() );
		},
		// set this class to error-labels to indicate valid fields
		success: function(label) {
			// set   as text for IE
			label.html(" ").addClass("checked");
		}
    });
    
    $('.headerHome').mouseover(function()
    {
        $(this).children('.headerOver').show();
        $(this).children('.afspraak').show();
    });
    
    $('.headerHome').mouseout(function()
    {
        $(this).children('.headerOver').hide();
        $(this).children('.afspraak').hide();
    });
    
    $("#mycarousel").jcarousel({
        scroll: 1,
        auto: 10,
        wrap: 'last',
        initCallback: mycarousel_initCallback,
        itemVisibleInCallback: {
            onAfterAnimation: mycarousel_move
        },
        // This tells jCarousel NOT to autobuild prev/next buttons
        buttonNextHTML: null,
        buttonPrevHTML: null,
        itemFallbackDimension: 1004
    });
});

function mycarousel_initCallback(carousel) {
    $('.jcarousel-control a').bind('click', function() {
        $(this).addClass('active');
        counter = $(this).attr('id').split('_');
        carousel.scroll($.jcarousel.intval(counter[1]));
        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_move(carousel, temp1, temp2, temp3)
{
    $('.jcarousel-control a').removeClass('active');
    $('#counter_'+temp2).addClass('active');
}