jQuery.noConflict();  // jQuery housekeeping

jQuery(document).ready(function() {


  // slider is a simple anonymous JS object to manage the transitions
  // the indx is the index of the current visible banner content
  window.slider = { indx: 0, timer: null, count: jQuery(".bannerTextContent").length };

    for (i = 0; i < slider.count; i++) {
        jQuery('#bannernav').append("<div class='nav' index='" + i + "'></div>");
    }

    //provide a click event handler using an anonymous javascript function
    jQuery('.nav').click(function() {
        // the user has clicked a nav button

        clearTimeout(slider.timer);
        // set the index to the item selected
        slider.indx = jQuery(this).attr('index');

        fadeaway();
        jQuery(this).css("background-color", "#009CEB");
    });

    //get things started                                  
    slider.timer = setTimeout(animatebanner, 500)
});

// make the old text fade out and fire the event to transition 
// to the new content
function fadeaway() {
    jQuery("#bannerFade").fadeIn();
    jQuery(".bannerTextContent:visible").fadeOut(function() { animatebanner(); });
    jQuery(".nav").removeAttr("style");
}

// highlight the navigation button
function selectNav() {
    jQuery(this).css("background-color", "#009CEB");
}

// transition the banner text to the next content
function animatebanner() {
    var nextImage = jQuery("#bannerText" + slider.indx).attr("bgimage");
    jQuery(".bannerImage").children().first().attr("src", nextImage);
    jQuery(".bannerImage").children().first().css("z-index", "98");

    // Make the Opaque curtain fade out (note: first time through, the 
    // curtain is already hidden, so the user sees no visual change)
    jQuery("#bannerFade").fadeOut("slow", function() {

        // Make the nav button highlight
        var nthChild = slider.indx + 1;
        jQuery(".nav:nth-child(" + nthChild + ")").effect("highlight", 200, selectNav);
        // slide in the new content.
        jQuery("#bannerText" + slider.indx).show("slide", 2000);
        // Now set up the timer to fade out in about 13 seconds.
        slider.timer = setTimeout(fadeaway, 13000)

        // reset the index
        if (++slider.indx >= slider.count) slider.indx = 0;
    });




}