$(window).load(function() {
$.fn.carousel = function(){
        
        var rotatorLi = $(this).find("ul.rotator li").width();
        var rotatorSum = $(this).find("ul.rotator li").size();
        var carousel = $(".carousel").width();
    
        var rotatorMaxLi = Math.floor(carousel / rotatorLi); //See how many lists can fit in the carousel viewport
        var rotatorSlideSum =  Math.ceil(rotatorSum / rotatorMaxLi); //See how many slides (sections viewable in carousel viewport) we will need
    
        var adjustLi = (carousel / rotatorMaxLi); //Perfect width that would fit in carousel viewport
        var adjustRotator = (adjustLi * rotatorSum); //Get width of adjusted rotator
        
        var lastSlideSum = Math.floor(adjustRotator / carousel); //Get the whole number of slides that can fit in carousel (for remainder of slides)
        var lastSlide = (carousel * lastSlideSum) - adjustRotator; //Get the distance of the remaining slides
    
        //Get tallest list item in carousel (prevents truncation)
        var tallest = 0;
        $(this).find("ul.rotator li").each(function() {                                    
            var rotatorLiHeight = $(this).height();
            if (rotatorLiHeight > tallest) {
                tallest = rotatorLiHeight + 20; //20 takes in consideration of padding 10px 0;
            }
        });
        $(this).find(".carousel").css({ 'padding-bottom' : '10px'}); //Adjust Height of Carousel
    
        $(this).find("ul.rotator li").css({ 'width' : adjustLi}); //Adjust width
        $(this).find("ul.rotator").css({ 'width' : adjustRotator}); //Adjust width
    
            
        var sum = 0; //Set Count for clicks
                
        if (carousel < adjustRotator) { //If the list is bigger than the carousel viewport
            $(this).find("a.right-scroll").click(function() {
                if(sum < (rotatorSlideSum-1)) {    
                    sum++;
                    $(this).parent().find("a.left-scroll").removeClass("deactive");
                    switch(sum){
                        case rotatorSlideSum: //on the last slide...
                            $(this).addClass("deactive");
                            break;
                        case rotatorSlideSum-1: //second to last slide...
                            $(this).addClass("deactive");
                            if (lastSlide < -1) {
                                $(this).parent().find("ul.rotator").animate({ marginLeft: "+=" + lastSlide }, 250);
                            }
                            else {
                                $(this).parent().find("ul.rotator").animate({ marginLeft: "-=" + carousel }, 250);
                            }
                            break;
                        default: //on click else
                            $(this).parent().find("ul.rotator").animate({ marginLeft: "-=" + carousel }, 250);
                            break;
                    }
                }
                return false;
            }); //end switch case
        
            $(this).find("a.left-scroll").addClass("deactive");
            $(this).find("a.left-scroll").click(function() {
                if(sum > 0) {    
                    sum--;
                    $(this).parent().find("a.right-scroll").removeClass("deactive");
                    switch(sum){
                        case 0: //if back to original slide...
                            if (lastSlide < -1 && rotatorSlideSum == 2 ) {
                                $(this).parent().find("ul.rotator").animate({ marginLeft: "-=" + lastSlide }, 250);
                            }
                            else {
                                $(this).parent().find("ul.rotator").animate({ marginLeft: "+=" + carousel }, 250);
                            }
                            $(this).addClass("deactive");
                            break;
                        case rotatorSlideSum-2: //1st click back from the last slide...
                            if (lastSlide < -1) {
                                $(this).parent().find("ul.rotator").animate({ marginLeft: "-=" + lastSlide }, 250);
                            }
                            else {
                                $(this).parent().find("ul.rotator").animate({ marginLeft: "+=" + carousel }, 250);
                            }
                            break;
                        default:
                            $(this).parent().find("ul.rotator").animate({ marginLeft: "+=" + carousel }, 250);
                            break;
                    }
                    
                }
                return false;
                
            }); //end switch case
        } else { //if there is only one slide...
            $(this).find("a.right-scroll, a.left-scroll").addClass("deactive");
        }//end if carasouel statement
    
    
};//end function


    ////Trigger Carousel + Component Functions
    $('.carousel_placement').each(function() { //for each carousel run the following code...
         tabID = $(this).attr('id'); //get the ID of the tab content
        $('#' + tabID).find("div[class^='carousel']").carousel();    //run the carousel function on that ID
    });

$(document).ready(function () {

    //Append video caption to rotator li's
    $('ul.rotator li img').each(function() {
    var imgAlt = $(this).attr('alt');
    $(this).parent().append('<p>'+imgAlt+'</p>');
    
    });
    
    //Show first video and make active
    $("#carousel-content div:first").show();
    $("ul.rotator li:first").addClass('active');

    //Match corresponding content to li and make active on click
    $('ul.rotator li').click(function() {
        var theID = $(this).attr('id');
        $('ul.rotator li').removeClass('active');
        $(this).addClass('active');
        $('#carousel-content div').hide();
        $("." + theID ).show();
    });

});
});