jQuery(document).ready(function() {
    // grab the elements we will need
    var carouselItems = jQuery('#carousel-items').find('li');
    var carouselFrame = jQuery('#carousel-frame');
   
    // when an li element is hovered
    carouselItems.hover(function() {
       
        // loop through the items and remove the active class
        carouselItems.each(function() {
            jQuery(this).removeClass('active');
        });
       
        // re-assign "this" to use jquery and store in a local variable
        $this = jQuery(this);
       
        // add the active class to the hovered element
        $this.addClass('active');
       
        // change the image source in the carousel frame to match the one in the hovered element
        carouselFrame.find('img').attr('src', $this.find('img').attr('src'));
       
        // change the carousel frame content to use the hovered elements content
        carouselFrame.find('.content-box').html($this.find('textarea').text());
       
        // change the learn more link to use the same link as the list item
        carouselFrame.find('.learn-more').attr('href', $this.find('a').attr('href'));
    });
   
});