$(".splash-rotater-image").hover(function(){
    $(this).children(".splash-image-caption").show();
});

$(function(){
    // Get DOM references.
    var jPhotoArea = $(".splash-rotater-image");
    //var jPhoto = $(".splash-rotater-image");
    var jPhotoDetails = $(".splash-image-caption");
    
    // The timer for mouseing out of the site photo area.
    var objMouseOutTimeout = null;
    
    // Keep track of which direction we are animating in.
    var objIsAnimatingSitePhotoDetails = {
        Show: false,
        Hide: false
    };
    
    // Keep track of site photo XHR request.
    var objSitePhotoRequest = null;
    
    
    // I show the site photo details (if necesssary).
    function ShowSitePhotoDetails(){
        // We only want to animate the Show if we are:
        // 1. Not currently showing the photo details.
        // 2. Currently hiding the photo details.
        if (!objIsAnimatingSitePhotoDetails.Show ||
        objIsAnimatingSitePhotoDetails.Hide) {
        
            // Check to see if we need to stop any animation.
            if (objIsAnimatingSitePhotoDetails.Hide) {
                //jPhotoDetails.stop();
            }
            
            // Flag the animations.
            objIsAnimatingSitePhotoDetails.Show = true;
            objIsAnimatingSitePhotoDetails.Hide = false;
            
            // Stop any existing animation and show the details.
            jPhotoDetails.slideDown({
                duration: 300,
                
                // When complete, flag all animations as being done.
                complete: function(){
                    objIsAnimatingSitePhotoDetails.Show = false;
                    objIsAnimatingSitePhotoDetails.Hide = false;
                }
            });
        }
    }
    
    
    // I hide the site photo details.
    function HideSitePhotoDetails(){
        // When mousing down, set the animation flags.
        objIsAnimatingSitePhotoDetails.Show = false;
        objIsAnimatingSitePhotoDetails.Hide = true;
        
        // Slide details down.
        jPhotoDetails.slideUp({
            duration: 500,
            
            // When complete, flag all animations as being done.
            complete: function(){
                objIsAnimatingSitePhotoDetails.Show = false;
                objIsAnimatingSitePhotoDetails.Hide = false;
            }
        }).fadeTo(1, 1);
    }
    
    
    // I handle the mouse over functionality for both the photo and 
    // the photo details as they are going to act in the same fashion.
    function SitePhotoMouseOverHandler(){
        // Clear any mouse out time out so that our details don't disaapear.
        clearTimeout(objMouseOutTimeout);
        
        // Show the photo details.
        ShowSitePhotoDetails();
    }
    
    
    // I handle the mouse out functionality for both the photo and 
    // the photo details as they are going to act in the same fashion.
    function SitePhotoMouseOutHandler(){
        // Because of the way that events happen, set a timeout for this mouse
        // out action. This will give the mouse-over action a change to 
        // cancel the bubble.
        objMouseOutTimeout = setTimeout(function(){
            HideSitePhotoDetails();
        }, 100);
    }
    
    
    // I handle the mouse over of the photo area.
    $([]).add(jPhotoArea).add(jPhotoDetails).mouseover(function(){
        SitePhotoMouseOverHandler();
        return (false);
    });
    
    // I handle the mouse out of the photo area.
    $([]).add(jPhotoArea).add(jPhotoDetails).mouseout(function(){
        SitePhotoMouseOutHandler();
        return (false);
    });
});