<script type='text/javascript' src='/static/jquery.cycle.all.latest.js'></script>
<script type='text/javascript'>
  jQuery(function( $ ){     

      $('#slideshow-<%= @ad_banner.title.dehumanize %>').cycle({
        delay: -1000,
        fx: "<%= @ad_banner.ad_fx.nil? ? 'fade': @ad_banner.ad_fx %>",
        timeoutFn: getTimeout,
        pager: '.banner_nav-<%= @ad_banner.title.dehumanize %>',
        pagerAnchorBuilder: function(idx, slide) {
          return "<li><a href='#'></a></li>";
        }
      });
  });
</script>

<div style='position:relative'>
  <ul id='banner_nav' class='clear banner_nav-<%= @ad_banner.title.dehumanize %>'></ul>
  <div id='slideshow-<%= @ad_banner.title.dehumanize %>' class='slideshow'>
    <% (images = @ad_banner.ad_images).shuffle.each do |ad_image| %>
      <% if ad_image.display? %>
        <img src='<%= ad_image.file %>' alt='<%= ad_image.title || ' ' %>' time_to_next='<%= @ad_banner.transition_msec %>' link_open='<%= ad_image.link_open %>' link_url='<%= (ad_image.direct_to_after_click? ? ad_image.out_link : ad_image.context) || ' ' %>' link_url='<%= (ad_image.out_link) %>' style=' <%= 'cursor:pointer;' if !ad_image.out_link.blank? %>'/>  
      <% end %>
    <% end %>
  </div>
</div>