$('.js_required').removeClass("js_required");
   
   /* The arguments width and height represent the 
   image dimensions used in the create_css_slideshow global */
   

// 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", "579px");
   $curr.css("height", "140px");
   $next.css("width", "579px");
   $next.css("height", "140px");
   
   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();
};