billboard-slider.js

// (c) 2010 NY Times Co.
// (for work)

(function($){
  
  $.fn.billboardSlider = function( options ) {
    options = $.extend( {}, $.fn.billboardSlider.options, options );
    
    return this.each(function(){
      var that = $(this),
        top = that.children('.top'),
        bottom = that.children('.bottom'),
        
        // Get cookie name.
        cname = that.attr( 'data-cname' ),
        
        // Get widget state based on cookie.
        collapsed = checkCookie( cname ),
        
        // To cancel the timeout.
        timeout_id;
      
      // If already initialized, skip!
      if ( that.data( 'billboardSlider' ) ) { return; }
      
      // Set already-initialized flag.
      that.data( 'billboardSlider', true );
      
      // Initialize element state.
      toggle( collapsed );
      
      if ( !collapsed ) {
        // Close billboard after a delay (unless canceled).
        timeout_id = setTimeout( toggle, options.delay );
      }
      
      // Toggle the clicked element
      function toggle( state ) {
        var speed = options.speed;
        
        if ( state !== undefined ) {
          // Explicit state was passed (for initialization).
          elem = that.children( state ? '.slider-collapsed' : '.slider-expanded' );
          speed = 0;
        }
        
        elem
          .stop(true, true)
          .animate({
            height: 'toggle'
          }, speed )
          
          .siblings( 'div' )
            .stop(true, true)
            .animate({
              height: 'toggle'
            }, speed );
        
      };
      
      // Binding the toggle function to click.
      that.find('.slider-toggle').click(function(e){
        e.preventDefault();
        
        writeCookie( cname, 7 ); // TODO: change to bcom cookie code? check behavior w/ dana
        
        timeout_id && clearTimeout( timeout_id );
        toggle();
      });
      
    });
  };
  
  $.fn.billboardSlider.options = {
    delay: 10000,
    speed: 500
  };
  
}})(jQuery);

$(function(){
  $('.slider-billboard').billboardSlider();
});

/*
<div class="slider-billboard" data-cname="globe_reader">
  <div class="slider-collapsed">
    <img src="http://cache.boston.com/images/ads/globereader/GR_ad_collapsed_v3b.jpg" border=0 usemap="#grMapClosed"> 
  </div> 
  <div class="slider-expanded">
    <img src ="http://cache.boston.com/images/ads/globereader/globereader_ad_expandedb.jpg" border=0 usemap="#grMapOpen">
  </div>
  
  <map name="grMapClosed"> 
    <area id="grCLearnMore" shape="rect" href="http://www.boston.com/bostonglobe/reader/" target="_blank" coords="688,14,775,41" alt="Learn More"> 
    <area id="grCDownload" shape="rect" href="http://www.boston.com/bostonglobe/reader/select/" target="_blank" coords="599,14,678,42" alt="Try It Now"> 
    <area id="grCPlayDemo" shape="rect" href="javascript:winOpenDemo()" coords="781,13,868,40" alt="Play Demo"> 
    <area id="grShow" class="slider-toggle" shape="rect" href="#" coords="883,24,955,44" alt="Close"> 
  </map> 
  
  <map name="grMapOpen"> 
    <area id="grTryItNow" shape="rect" href="http://www.boston.com/bostonglobe/reader/select/" target="_blank" coords="464,176,598,226" alt="Try It Now"> 
    <area id="grLearnMore" shape="rect" href="http://www.boston.com/bostonglobe/reader/" target="_blank" coords="613,177,750,228" alt="Learn More"> 
    <area id="grPlayDemo" shape="rect" href="javascript:winOpenDemo()" coords="767,177,906,225" alt="Play Demo"> 
    <area id="grHide" class="slider-toggle" shape="rect" href="#" coords="889,1,958,27" alt="Expand"> 
  </map> 
</div>
<script>$('.slider-billboard').billboardSlider();</script>
*/