$(document).ready(function() {
    $(".RecommendedCarousel").hide();
    $('span.CarouselItemName').css('opacity', 0.8);
    $('.lifestyleDirectory a').css({ 'color': '#000' });
    $('.recommended a').css({ 'color': '#fff' });

    var enabled = 1; //this stops users clicking on next lots of times causeing the animations to stop working

    $('.imgnext').click(function() {//when the next image is clicked
        if (enabled == 1) {// if the button is enabled
            enabled = 0; //set to 0 so no other button can be clicked
            $('.CarouselView ul').animate({ right: "+=633" }, 800, function() {//do the scroll animataion
                //cycle the next 4 pictures across
                $('.CarouselView li:last').after($('.CarouselView li:first'))
                $('.CarouselView li:last').after($('.CarouselView li:first'))
                $('.CarouselView li:last').after($('.CarouselView li:first'))
                $('.CarouselView li:last').after($('.CarouselView li:first'))
                $('.CarouselView ul').css({ 'right': '633px' }); //set back to the correct position
                enabled = 1; //enabled other button click when the animation has finshed
            });
        }
    });


    $('.imgback').click(function() {
        if (enabled == 1) {
            enabled = 0;
            $('.CarouselView ul').animate({ right: "-=633" }, 800, function() {
                $('.CarouselView li:first').before($('.CarouselView li:last'));
                $('.CarouselView li:first').before($('.CarouselView li:last'));
                $('.CarouselView li:first').before($('.CarouselView li:last'));
                $('.CarouselView li:first').before($('.CarouselView li:last'));
                $('.CarouselView ul').css({ 'right': '633px' });
                enabled = 1;
            });
        }
    });



    //Recommended tabs
    $('.Recimgnext').click(function() {//when the next image is clicked
        if (enabled == 1) {// if the button is enabled
            enabled = 0; //set to 0 so no other button can be clicked
            $('.RecCarouselView ul').animate({ right: "+=633" }, 800, function() {//do the scroll animataion
                //cycle the next 4 pictures across
                $('.RecCarouselView li:last').after($('.RecCarouselView li:first'))
                $('.RecCarouselView li:last').after($('.RecCarouselView li:first'))
                $('.RecCarouselView li:last').after($('.RecCarouselView li:first'))
                $('.RecCarouselView li:last').after($('.RecCarouselView li:first'))
                $('.RecCarouselView ul').css({ 'right': '633px' }); //set back to the correct position
                enabled = 1; //enabled other button click when the animation has finshed
            });
        }
    });


    $('.Recimgback').click(function() {
        if (enabled == 1) {
            enabled = 0;
            $('.RecCarouselView ul').animate({ right: "-=633" }, 800, function() {
                $('.RecCarouselView li:first').before($('.RecCarouselView li:last'));
                $('.RecCarouselView li:first').before($('.RecCarouselView li:last'));
                $('.RecCarouselView li:first').before($('.RecCarouselView li:last'));
                $('.RecCarouselView li:first').before($('.RecCarouselView li:last'));
                $('.RecCarouselView ul').css({ 'right': '633px' });
                enabled = 1;
            });
        }
    });


    $(".LifeStyleContainer").hover(function() {//when a picture is hovered over
        $(this).stop().animate({ width: '150px', height: '90px' }, { duration: 'normal', easing: 'easeOutQuad' });
    },
        function() {
            $(this).stop().animate({ width: '146px', height: '86px' }, 100);
        });

    //tabs
    $('.hide').click(function() {
        $(".lifestyleCarousel").hide();
        $(".RecommendedCarousel").show();
        //$("#CarouselTabs").css("background-image", "url(/images/layout/global/LifeStyleTabs-second.png)");
        $("#CarouselTabs").attr("class", "CarouselSecond");
        $('.lifestyleDirectory a').css({ 'color': '#fff' });
        $('.recommended a').css({ 'color': '#000' });

    });

    $('.show').click(function() {
        $(".RecommendedCarousel").hide();
        $(".lifestyleCarousel").show();
        //$("#CarouselTabs").css("background-image", "url(/images/layout/global/LifeStyleTabs-normal.png)");
        $("#CarouselTabs").attr("class", "CarouselNormal");
        $('.lifestyleDirectory a').css({ 'color': '#000' });
        $('.recommended a').css({ 'color': '#fff' });

    });
});