$('.js_required').removeClass("js_required");
   
   

// This function creates a slideshow by fading out the lead element, then changing its
// background image before reintroducing it.
var create_css_slideshow = function(banner_data) {

   //alert(create_css_slideshow);
   
   if (!banner_data.slides || banner_data.slides.length == 0) {
      return false;
   }
   
   var sel = '#slides';
   
   //alert(sel); //#myslides
   
   if ($(sel).length === 0) {
      return false;
   }
   
   $(sel).html('<div id="curr"></div><div id="next"></div>');
   var $curr = $(sel + " #curr");
   var $next = $(sel + " #next");
   
   $curr.css("float", "left");
   $curr.css('background-image', 'url(' + banner_data.slides[0].image + ')');
   //$(sel).css("background-image", "");
   $(sel).css("background-color", "transparent");
   
   //set width and height of current and next images; values are coming from the arguments
   //defined when referencing the create_css_slideshow global in javascript theme page.
   $curr.css("width", "850px");
   $curr.css("height", "450px");
   $next.css("width", "850px");
   $next.css("height", "450px");
   
   var index = 1;
   
   var timer_action = function() {
      $.oktoplay = false; //this is for interaction with jplayer; jplayer breaks in transitions.
      var url = banner_data.slides[index].image;
      $next.css('background-image', 'url(' + url + ')');
      $curr.fadeOut(2000, on_complete);
   };
         
   var on_complete = function() {
      var url = banner_data.slides[index].image;
      $curr.css('background-image', 'url(' + url + ')');
      $curr.show();
      
      index = index + 1;
      
      if (index >= banner_data.slides.length) {
         index = 0;
      }
      do_timeout();
      $.oktoplay = true;
   };

   var do_timeout = function() {
      setTimeout(timer_action, 4500);
      //alert(setTimeout); 
   };    
      
   do_timeout();
};   
   

//The purpose of this is to create dynamic secondary navigation menues in the navigation2 div.
function create_dropdownmenu(nav_data) {
   //alert("create_dropdownmenu called");

   var default_nav2 = $("#navigation2-container").html(); //grabs nav2, the same throughout the session
   var pending_token = null; //Every invocation of 'setup' below will need its own token, due to 'threading'
   
   
   /* This function is used to turn off a pending cleanup or setup if the mouse reenters
      a 'rollover' element.  By reentering a 'rollover' element, the user indicates that 
      he or she wants to still use the menu. Also, it ensures that the any pending setup that 
      might have been invoked by a quick transition through a navigation1 menu item will
      be ignored if the mouse reenters the rollover area.
    */
   var turnoffpending = function() {
      if (pending_token) {
         pending_token.do_cleanup = false;
         pending_token.do_setup = false;
      }
   };
   
   
   /* The timer triggers setup on a delay, to ensure that if the mouse only passes 
      through a menu option very quickly that the setup will not be triggered.  This 
      is because the tracking_token bound to the event through closure will be turned 
      off by any other active menu element that the mouse enters.
    */
   var timedsetup = function(event) {
      //alert("timedsetup called");
      var tracking_token = { do_setup : true, do_cleanup : false };
      
      // For safety, in case the user moves the mouse very very quickly before the timer has caught, turn off setup
      $(this).bind('mouseleave.dropdownmenu', function() { tracking_token.do_setup = false; });
      
      /* This timer triggers the cleanup on a delay, to ensure that if the mouse reenters 
         rollover space that the menu does not disappear.  In other words, it gives the 
         user enough time to reenter the space.
      */
      var timedcleanup = function(event) {  
         var cleanup = function() {
            if (!$(event.relatedTarget).hasClass('rollover') && tracking_token.do_cleanup) {
               $(".rollover").unbind('mouseleave.dropdownmenu');
               $(".rollover").unbind('mouseenter.dropdownmenu');
               $(".rollover").removeClass('rollover');
               $("#navigation2-container").html(default_nav2);
            }                              
         };

         tracking_token.do_cleanup = true;
         setTimeout(cleanup, 240);
      };
      
      
      var $this = $(this);  // here, 'this' refers to the mouseenter element
      var setup = function() {
         //alert("tracking_token.do_setup: " + tracking_token.do_setup);

         if (!tracking_token.do_setup) {  // here, 'this' refers to the function 'setup' itself.
            return; //returning here will cause the setup to not happen.
         }
                  
         // rollover should be dismanteled before a new set of rollover is built.
         // To dismantle the rollover, you need to get rid of prevously added events. 
         $(".rollover").unbind('mouseleave.dropdownmenu');
         $(".rollover").unbind('mouseenter.dropdownmenu');
         $(".rollover").removeClass('rollover');
         // At this point, the safety is not needed, as the timer has run out and the mouse is still inside the menu.
         $this.unbind('mouseleave.dropdownmenu');

         var id_name = $this.parent().attr('id');  // $this is a jQuery selector containing the original mouseenter element.
                  
         if (nav_data[id_name]) {
            
            // BUILD NEW NAVIGATION 2
            var nav_content = ""
            
            if (nav_data[id_name].submenu) {
               nav_content += '<div id="navigation2" class="nav rollover"><ul id="sub-' + id_name + '" class="rollover">'; 
               var sub_id = ""; 
         
               // Loops through every member in the data and gives me the id names and labels of each links            
               for (sub_id in nav_data[id_name].submenu) { 
                  var value = nav_data[id_name].submenu[sub_id];
                  nav_content += '<li id="' + sub_id + '" class="rollover">' + 
                                    '<a href="' + value.addr + '" class="rollover">' + value.name + '</a>' +
                                 '</li>';
               }  
               nav_content += '</ul></div>';
            }
            
            $("#navigation2-container").html(nav_content);
            $this.parent().addClass("rollover");     


            // MOUSELEAVE EVENT
            $('.rollover').bind('mouseleave.dropdownmenu', timedcleanup);
            $('.rollover').bind('mouseenter.dropdownmenu', turnoffpending);
         }   
      };

      //Turn off the pending token, because any pending setups need to be turned off and not executed
      turnoffpending();
      
      //Now, this becomes the pending token, controling the setup and cleanup events.
      pending_token = tracking_token;
      setTimeout(setup, 250);
   };

   // MOUSEENTER EVENT 
   $('#navigation1 ul li a').mouseenter(timedsetup);
}