$(function() {
 
// This will set the featured content section so that it scrolls.
 
    $("#controller").jFlow({
        slides: "#slides",
        width: "641px",
        height: "165px",
        duration: 600
    });
    
    // This next section sets up the fading images for the Sponsors section on the sidebar. 
    // SPEED: In milliseconds - how long the transition should take.
    // TYPE: Type of slideshow: 'sequence', 'random' or 'random_start'
    // CONTAINERHEIGHT: The height of the div that is calling the innerfade method. 
    
    $('div#box1').innerfade({
        speed: 1000,
        timeout: 10000,
        type: 'random',
        containerheight: '203px'
    });
 
 
    // Here, I'm setting up the fadein box when the user clicks "Contact". I'm loading
    // the contents of the "secondaryContent3" div and then animating so that it scrolls
    // to the center of the page.
    
    $("li#contact a").click(function() {
 
        $('#wrap').append('<div id="contactMe" />')
        $("#contactMe").hide().load("index.html div#secondaryContent3", function() {
            $(this).prepend('<span id="close">X</span>').animate({
                width: "600px",
                left: "157px",
                opacity: "show"
            }, 1500);
 
            // Now, I'm going to add an event listener for when the close button is clicked. 
            // This will completely remove the popup contact box.
 
            $("#close").click(function() {
                $(this).parent("#contactMe").fadeOut("normal").remove();
            });
 
        });
 
        // Lastly, I'm disabling the anchor tags action. If the user does not have Javascript enabled,
        // They will be directed to the contact div instead.
        
        return false;
    });
});