/* * * * * * * * * * * * * * * *
 *                             *
 * @author   Mike Cavaliere    *
 * @company  Atmosphere BBDO   *
 *                             *
 * * * * * * * * * * * * * * * */
var FL = {};
(function($){
    $.browser.ie6 = ($.browser.msie && $.browser.version == 6);
    $.browser.ie7 = ($.browser.msie && $.browser.version == 7);
    $.browser.firefox = /Firefox/.test(navigator.userAgent);
    $.browser.mac = /Mac/.test(navigator.platform);
    $.browser.ff2mac = ($.browser.firefox && $.browser.mac && /Firefox\/2/.test(navigator.userAgent));
    
    FL.Config = {
        debug: false,
        fadeDuration: 200,
        imagesToPreload: {
            not_IE: [
              '/assets/images/nav/planet.png',
              '/assets/images/nav/health.png',
              '/assets/images/nav/products.png',
              '/assets/images/nav/company.png',
              '/assets/images/nav/planet-bg.png',
              '/assets/images/nav/health-bg.png',
              '/assets/images/nav/products-bg.png',
              '/assets/images/nav/company-bg.png'
            ],
            IE6: [
              '/assets/images/nav/planet-bg.gif',
              '/assets/images/nav/health-bg.gif',
              '/assets/images/nav/products-bg.gif',
              '/assets/images/nav/company-bg.gif',
              '/assets/images/nav/planet.gif',
              '/assets/images/nav/health.gif',
              '/assets/images/nav/products.gif',
              '/assets/images/nav/company.gif'
            ]
        }
    };
    FL.TaskDispatcher = {
        // onload tasks for all browsers
        startup: function()
        {
            FL.TaskDispatcher.ieAll();
            FL.TaskDispatcher.ie6();
            FL.TaskDispatcher.ie7();
            FL.TaskDispatcher.nonIE();
            FL.TaskDispatcher.pageSpecific();
            FL.TaskDispatcher.all();
        },
        // Everything but IE
        nonIE: function()
        {
            if ($.browser.msie) {return;}
            FL.Util.log('FL.TaskDispatcher.nonIE()...');
            FL.Util.preloadImages(FL.Config.imagesToPreload.not_IE);
          //$('.foot-icons ul li').hoverColor({underline: true, wrapContent: true});
        },
        // All IE versions
        ieAll: function()
        {
            if (!$.browser.msie) {return;}
            FL.Util.log('FL.TaskDispatcher.ieAll()...');
            $('#top-nav li.section > a.title').pngShim();
            $('ul.x-list li h2').pngShim({classNames: 'shim-h2'});
            $('ul.x-list div.x-bullet-shim').pngShim({classNames: 'shim-x-bullet'});
        },
        // IE6 only
        ie6: function()
        {
            if (!$.browser.msie || $.browser.version != 6) {return;}
            FL.Util.log('FL.TaskDispatcher.ie6()...');
            FL.Util.preloadImages(FL.Config.imagesToPreload.IE6);
            $('div.side-nav li strong').pngShim();
            $('div#breadcrumb li a,div#breadcrumb li strong').pngShim();
          $('.foot-icons ul li a').pngShim();
        },
        // IE7 only
        ie7: function()
        {
            if (!$.browser.msie || $.browser.version != 7) {return;}
            FL.Util.log('FL.TaskDispatcher.ie7()...');
        },
        // Page-Dependent
        pageSpecific: function()
        {
            switch(document.body.id)
            {
                case 'home':
                    // Init homepage ticker
                    $('ul#home-ticker').ticker();
                    break;
                case 'brands':
                    // Brand list logo tooltips
                    var brands_tt_settings = {
                        bodyHandler: function()
                        {
                            var rel = $(this).find('> a').attr("rel").split('|'),                                
                                img = '<div class="inner"><img width="' + rel[0] + '" height="' + rel[1] + '" src="' + rel[2] + '"  alt="" title="'+$(this).text()+'" /></div>';

                            return img;
                        },
                        showURL: false,
                        extraClass: 'tt-logoimg',
                        top: -120,
                        left: 10,
                        fade: FL.Config.fadeDuration,
                        track: false,
                        delay: 0
                    };
                    $('#brands ul.x-list li h2:has(a[rel])').tooltip(brands_tt_settings);
                    $('#brands ul.x-list li ul li h3:has(a[rel])').tooltip(brands_tt_settings);
                    break;
                case 'brand-detail':
                    // Row rollovers
                    $('body#brand-detail table.prod-list').rowHighlighter();
                    // Brand detail product facts tooltips
                    $('#brand-detail table.prod-list ul.icons li').tooltip({
                        bodyHandler: function()
                        {
                            var html = '<span class="txt">' + $(this).text() + '</span>';
                            html += '<div class="shad-r"></div><div class="shad-btm"></div>';
                            return html;
                        },
                        showURL: false,
                        extraClass: 'tt-ingred',
                        top: -15,
                        left: 15,
                        fade: FL.Config.fadeDuration,
                        track: false,
                        delay: 0
                    });
                    break;
                case 'product-detail':
                    // Product Detail Lightbox
                    $('body#product-detail div.prod-img a').click( function()
                    {
                        this.href = "" + this.rel.split("|")[2];
                        
                        $(this).lightbox(
                        {
                            start:true,
                            events:false,
                            show_linkback:  false,
                            text: {
                                image:      'Photo'
                            },
                            opacity: 0.7,
                            auto_relify: false,
                            ie6_support: true,
                            ie6_upgrade: false,
                            show_info: false,
                            download_link: false                            
                        });
                        
                         return false;
                    });
                      
                    break;
                }
        },
        // All pages
        all: function()
        {
            // Topmost header nav/footer and left nav rollovers
            $('#branding .nav li a,#foot li a').hoverColor({underline: true});
            // Chip rollovers
            $('.hoverable').hoverable();
            // Buttons
            $('.btn-hov').button();
            // Email/Print icons
            $('.foot-icons li.print').click(function() { window.print(); });
        }
    };
    FL.Flash = {
        loadSwf: function()
        {
        
            if ($('#vid-planet').length) 
            {
                var params = {
                    allowScriptAccess: "sameDomain",
                    allowFullScreen: false,
                    loop: false,
                    menu: false,
                    quality: 'high',
                    bgcolor: '#FFFFFF',
                    wmode: 'transparent'
                };
                
                swfobject.embedSWF("/assets/images/flash/Our_Planet_Home2.swf", "vid-planet", "886", "325", "9.0.0", null, {}, params, {});
                return; // for performance
            }

            if ($('#vid-home').length)
            {
                var params = {
                    allowScriptAccess: "sameDomain",
                    allowFullScreen: false,
                    loop: true,
                    menu: false,
                    quality: 'high',
                    bgcolor: '#FFFFFF',
                    wmode: 'transparent'
                };
                swfobject.embedSWF("/assets/images/flash/stories_Apr20.swf", "vid-home", "664", "390", "9.0.0", null, {}, params, {});
                return; // for performance
            }
         
        }
    };
    FL.Util = {
        log: function()
        {
            if (!FL.Config.debug)
                return;
            if (!window.atmo)
            {
                window.atmo = {};
                window.atmo.log = [];
            }
            // Determine what to do based on params
            if (arguments[0])
            {
                switch (arguments[0].constructor)
                {
                    // Util.log(/pattern/) - filter log and output it
                    case RegExp:
                        dump(arguments[0]);
                        break;
                    // Util.log("some string") - add "some string" to the log
                    case String:
                        write(arguments[0]);
                        break;
                    default:
                        throw new Error("Util.log called with invalid argument.")
                        return;                 }
            }
            else
            {
                // Util.log() - no params, output the log
                dump();
            }
            function write(str)
            {
                try
                {
                    var d = new Date();
                    window.atmo.log.push('(' + d.getTime() + ') ' + d.toString() + ": " + str);
                }
                catch (err1)
                {
                }
            }
            function dump()
            {
                var log;
                if (arguments[0])
                {
                    var regexp = arguments[0];
                    log = window.atmo.log.filter(function(str)
                    {
                        return regexp.test(str);
                    });
                }
                else
                {
                    log = window.atmo.log;
                }
                try
                {
                    console.log(log.join("\n"));
                }
                catch (err)
                {
                    try
                    {
                        var logWindow = window.open("about:blank", "logWindow", "toolbar=no,width=500,height=500,resizable=yes,scrollbars=yes");
                        logWindow.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >' +
                        '<html xmlns="http://www.w3.org/1999/xhtml"><head><!-- PageID 140 - published by RedDot 9 - 9.0.0.27 - 27696 --></head><body><pre>' +
                        window.atmo.log.join('<br />') +
                        '</pre></body></html>');
                    }
                    catch (err2)
                    {
                        alert(window.atmo.log.join("\n"));
                    }
                }
            }
        },
        preloadImages: function(img)
        {
          var images = img;
          if (img.constructor === String)
          {
            images = [img];
          }
          for (var i=0, l=images.length; i<l; i++)
          {
            var head = document.getElementsByTagName('head')[0];
            var node = document.createElement('img');
            head.appendChild(node);
            node.setAttribute('src', images[i]);
          }
        },
        odump: function(object, depth, max){
            depth = depth || 0;
            max = max || 2;
            if (depth > max)
                return false;
            var indent = "";
            for (var i = 0; i < depth; i++)
                indent += "  ";
            var output = [];
            for (var key in object) {
                output.push("\n" + indent + key + ": ");
                switch (typeof object[key]) {
                    case "object":
                        output.push(FL.Util.odump(object[key], depth + 1, max));
                        break;
                    case "function":
                        output.push("function");
                        break;
                    default:
                        output.push(object[key]);
                        break;
                }
            }
            return output.sort().join("\n");
        },
        // Return "print" if header is hidden
        mediaType: function()
        {
            if ( $('#top-nav').css("display") === "none" )
            {
                return "print";
            }
            return "screen";
        }
    };
    // Constructors
    FL.Widgets = {
            toolTip: function(options)
            {
                this.init(options);
                return $;
            },
            xList: function(selector)
            {
                this.init(selector);
                return $;
            },
            hoverable: function(options)
            {
                this.init(options);
                return $;
            },
            button: function(options)
            {
                this.init(options);
                return $;
            },
            ticker: function(options)
            {
                this.init(options);
                return $;
            },
            rowHighlighter: function(selector)
            {
                this.init(selector);
                return $;
            }
    };
    // Rollovers for table rows
    FL.Widgets.rowHighlighter.prototype = {
        defaults: {},
        init: function(selector)
        {
            this.element = $(selector);
            this.offColor = $(this.element).css('background-color');
            this.onColor  = '#f6e8b7';
            var rh = this;
            this.element.find('tr').hover(function(){
                $(this).css({'background-color': rh.onColor});
            }, function() {
                $(this).css({'background-color': rh.offColor});
            });
        }
    };
    // Expandable lists
    FL.Widgets.xList.prototype = {
        init: function(selector)
        {
            this.element = $(selector);
            this.items   = this.element.find('ul');
            var xList = this;
            this.element
              .find('ul').hide().end()
              .find(' > li ')
                  .each(xList.bgShim).end()
              .find(' > li:last ').addClass('last');
            this.element.click(function(e)
            {
                return xList.click(e);
            });
            return this;
        },
        // Background div goes over background, under text
        bgShim: function()
        {
            $(this).append(
              $('<div class="x-bg-shim" style="display:none"></div>')
                .hide()
            )
            .prepend(
              $('<div class="x-bullet-shim" style="display:none"></div>')
                .hide()
            );
        },
        getTarget: function(e)
        {
            var $el = $(e.target), xList = this;
            if ($el.is('li')) { return $el; }
            return $el.parents('li:last');
            if ($el.is('h2')) {
                return $el.parent();
            }
            if ($el.is('a')) {
                return $el.parent().parent();
            }
            if ($el.is('LI')) {}
            return $el;
        },
        click: function(e)
        {
           var $el = this.getTarget(e);

            $el
              .toggleClass("on")
              .toggleA()
              .toggleShim()
              .find('ul').slideToggle().end();
        }
    };
    // Fade animation for text
    jQuery.fn.toggleA = function()
    {
        return this.each(function()
        {
          var $this = $(this);
          if ($this.hasClass("on"))
          {
              $this.find('h2 a')
              .animate({color: '#FFF'}, null, null, function() { $(this).css({
                'font-weight': 'bold',
                'text-decoration': 'none'
              }); } )
              .end()
          }
          else
          {
              $this.find('h2 a')
              .animate({color: '#666'}, null, null, function() { $(this).css({'font-weight': 'normal', 'text-decoration': 'underline'}); } )
              .end()
          }
        });
    };
    // Fade animation for arrow bullet
    jQuery.fn.toggleShim = function()
    {
        return this.each(function()
        {
            var $this = $(this);
            if ($this.hasClass("on"))
            {
                $this.find('div.x-bg-shim').fadeIn(FL.Config.fadeDuration).end()
                     .find('div.x-bullet-shim').fadeIn(FL.Config.fadeDuration).end();
            }
            else
            {
                $this.find('div.x-bg-shim').fadeOut(FL.Config.fadeDuration).end()
                     .find('div.x-bullet-shim').fadeOut(FL.Config.fadeDuration).end();
            }
        });
    };
    // Chip module rollovers
    FL.Widgets.hoverable.prototype = {
        defaults: {},
        init: function(selector)
        {
            this.element = $(selector);
            this.hoverEl = this.element.find('div.c-bg');
            // Add hover div if there isn't one
            if (!this.hoverEl.length)
            {
                this.element.append('<div class="c-bg"><div class="c-bg-in"></div></div>');
                this.hoverEl = this.element.find('div.c-bg');
            }
            // Hide it for now
            var h = this,
                hoverEl = this.hoverEl.hide(),
                button  = this.getButton();
            this.element
              // When clicked, follow the inner link
              .clickDelegator()
                // Show the hover div on mouseover
                .hover(function(e)
                {
                    e.stopPropagation();
                    if (hoverEl.queue().length < 2)
                    {
                        hoverEl.fadeIn(FL.Config.fadeDuration);
                        if (button) { button.over(); }
                    }
                }, function(e)
                {
                    e.stopPropagation();
                    hoverEl.fadeOut(FL.Config.fadeDuration);
                    if (button) { button.out(); }
                });
        },
      click: function(e)
      {
        location.href = this.href;
      },
        getButton: function()
        {
            var el = this.element.find('.btn-bg');
            // No markup for a button; exit
            if (!el.length) {return null;}
            // See if the element has a button object saved onto it
            if (el) {
                this.button = el.data('button');
            }
            // This is a FL.Widgets.hoverable(), so traverse and get the associated FL.Widgets.button object
            if (!this.button) {
              try {
                this.button = el.button(el).data('button');
              }
              catch (e)
              {
                // No button found
                return null;
              }
            }
            // Remove the hover event, we'll trigger this manually
            this.button.element.unbind();
            return this.button;
        }
    };
    // Homepage ticker animation
    FL.Widgets.ticker.prototype = {
        defaults: {},
        init: function(selector)
        {
          var t = this;
          this.options = {
            holdTime: 5000,    // How long to show text
            fadeSpeed: 1000,    // Duration of fadeout
            typeSpeed: 40,      // Time between letters
            delayBetween: 500         // How long to wait before showing next item
        };
          this.element = $(selector);
          this.items   = this.element.find('a');
          this.captions = []; // to store the text
          var height = this.items.eq(0).height();
          this.element
               .css({
                  // Set container height to height of first element
                  'height': height,
                  'position': 'relative'
               })
               .children().css({
                  'position': 'absolute',
                  'top': '0px',
                  'left': '0px',
                  'width': '100%'
               }).end()
               .find('a')
                  .css({
                    'width': '100%',
                    'height': height
                  })
               ;
          // Store anchor text in array
          this.items.each(function() {
            var $this = $(this);
            t.captions.push($this.text());
            $this.html('');
          });
          // Start the effect
          this.typeNext();
        },
        type: function()
        {
            var t = this, index = t.current.index;
            $(t.current.el).html(t.current.caption.substr(0, t.current.charNum++));
            if (t.current.charNum < t.current.caption.length + 1)
            {
                setTimeout(function()
                {
                    t.type();
                }, t.options.typeSpeed);
            }
            else // Completed
            {
                setTimeout(function() {t.fadeCurrent();}, t.options.holdTime);
            }
        },
        fadeCurrent: function()
        {
            var t = this;
            $(t.current.el).fadeOut(this.options.fadeSpeed, function()
            {
                setTimeout(function() { t.typeNext(); }, t.options.delayBetween);
            });
        },
        typeNext: function()
        {
            // First run
            if (!this.current)
            {
                this.current = {
                    el: this.items.eq(0),
                    index: -1,
                    caption: this.captions[0],
                    charNum: 0
                };
            }
            // Get index of next element
            if (++this.current.index >= this.items.length)
            {
                this.current.index = 0;
            }
            this.current.el = this.items[this.current.index];
            $(this.current.el).html('').show();
            this.current.caption = this.captions[this.current.index]
            this.current.charNum = 0;
            // Start the typeout
            this.type();
        }
    };
    // Button rollovers
    FL.Widgets.button.prototype = {
        defaults: {},
        init: function(selector)
        {
            var btn;
            this.element = $(selector);
            this.fadeDuration = FL.Config.fadeDuration;
            // Don't redeclare on same element
            if (btn = this.element.data('button')) {return btn;}
            // Save onto the element
            this.element.data('button', this);
            // Add an element for the hover arrow and hide it
            this.arrow   = $('<span class="arrow-on" style="display: none"></span>');
            // Make sure we can absolutely position the hover arrow
            this.element = $(selector).append(this.arrow).css('position', 'relative');
            // Text element will have a color fade
            this.txt     = this.element.find('span.in');
            // Add another span for IE; the outer span fades in/out with the filter property,
            //  but we need to use the filter property again on the inner for png transparency.
            if ($.browser.msie) { this.arrowShim = this.arrow.append('<span class="arrow-on-shim"></span>'); }
            var btn = this;
            this.element.hover(function(){
                btn.over();
            }, function(){
                btn.out();
            });
            return this;
        },
        over: function()
        {
            if (this.element.queue().length < 2)
            {
                this.txt.animate({color: '#666'}, this.fadeDuration);
                this.arrow.fadeIn(this.fadeDuration);
            }
        },
        out: function()
        {
            this.txt.animate({color: '#fff'}, this.fadeDuration);
            this.arrow.fadeOut(this.fadeDuration);
        }
    };
    // Top nav
    FL.Nav = (function() {
      var sections = ['our-planet', 'health', 'products', 'company'],
            elements = {},
            current;
        return {
            init: function()
            {
                var nav = this;
                this.element = $('#top-nav')
                     // Add one handler, use delegation for rollovers
                     .mouseover(nav.over).mouseout(nav.out);
                this.element
                     // Hide the dropdown menus
                     .find('div.subsection').hide().end();
                this.element
                     .find('li.section > a')
                     // Duplicate the main links and insert into top of subsection (for rollovers)
                     .each(function() {
                        var sub =
                        $(this).parent()
                            .find('div.subsection');
                                  sub.prepend(
                                        $('<div class="subsection-top"></div>')
                                        .append(
                                             $(this).clone()
                                        )
                                    );
                                  sub.append('<div class="subsection-bottom"></div><div class="subsection-shadow"></div>');
                     })
                     .end()
                     
                     // Save to the element
                     .data('nav', this)
                     ;
                //this.element.data('nav', this);
            },
            // Rollover events, bound to the <UL>
            over: function(event)
            {
                var nav = $('#top-nav').data('nav'),
                    $target = $(event.target), 
                    parents = $(event.target).parents('li.section'), 
                    el;
                if (parents.length > 0)
                {
                    // Get the div for this section
                    el = parents.eq(0).find('div.subsection');
                    
                    // Animate if there are no pending animations
                    if (el.queue().length < 2)
                    {
                        nav.show(el);
                    }
                }
            },
            out: function(event)
            {
                var nav = $('#top-nav').data('nav'),
                    $target = $(event.target),
                    $relatedTarget = $(event.relatedTarget),
                    targetParents = $target.parents('li.section'),
                    relatedParents = $relatedTarget.parents('li.section'),
                    el;
                // If it's not inside the section <LI>, do nothing
                if (!targetParents.length) { return;}
                // return if relatedParent is same as targetParent
                if (targetParents.eq(0)[0] == relatedParents.eq(0)[0]) {return;}
                el = targetParents.find('div.subsection');
                
                nav.hide(el);
            },
            
            // Activate dropdown
            show: function(el)
            {
                //if ($.browser.ff2mac) { el.show(); return; }
                
                el.fadeIn(FL.Config.fadeDuration);
            },
            
            // Deactivate dropdown
            hide: function(el)
            {
                //if ($.browser.ff2mac) { el.hide(); return; }
                
                el.fadeOut(FL.Config.fadeDuration);
            }
        };
    })();
    // jQuery Wrappers
    $.fn.xList = function()
    {
        return this.each(function()
        {
            new FL.Widgets.xList(this);
        });
    };
    $.fn.hoverable = function()
    {
        return this.each(function()
        {
            new FL.Widgets.hoverable(this);
        });
    };
    $.fn.button = function()
    {
        return this.each(function()
        {
            new FL.Widgets.button(this);
        });
    };
    $.fn.rowHighlighter = function()
    {
        return this.each(function()
        {
            new FL.Widgets.rowHighlighter(this);
        });
    };
    $.fn.ticker = function()
    {
        return this.each(function()
        {
            new FL.Widgets.ticker(this);
        });
    };
    // Inserts a span to display a background element on
    $.fn.pngShim = function()
    {
      var defaults = {tag: 'span', classNames: ''},
          params  = (arguments.length > 0  ? arguments[0] : {})
          options = $.extend({}, defaults, params),
          html = '<'+options.tag+' class="png-shim ' + options.classNames + '"><\/'+options.tag+'>';
      $(this).append(html);
    };
    // When element is clicked, follow the href of the first child anchor
    $.fn.clickDelegator = function()
    {
        return this.each(function()
        {
            var href = $(this).css({cursor: 'pointer'}).find('a').eq(0).attr('href');
            if (!href) return $;
            $(this).click(function()
            {
                location.href = href;
            });
            return $;
        });
    };
    // Fade in text color and optional underline
    $.fn.hoverColor = function(params)
    {
      return this.each(function()
      {
        var $this = $(this),
            defaults = {
                normal: '#666666',  // Default color
                hover: '#898989',   // Hover color
              wrapContent: false, // Whether to wrap content in a <span class="content-wrap">
                underline: false,   // Whether to fade in an underline
                underlineTarget: false // selector of a child element to pass to find() which span will be inserted into
            },
            options = $.extend({}, defaults, params),
            underline = $this.find('span.underline'),
            underlineTarget,
          contentEl;
            if (options.underline)
            {
                // Which element to apply underline to
                underlineTarget = (options.underlineTarget ? $this.find(options.underlineTarget) : $this);
                 if (!underline.length)
                 {
                    underlineTarget
                     .css({
                        position: 'relative'
                     })
                     .append('<span class="underline-shim"></span>');
                 }
/*
               if (options.wrapContent)
               {
                 contentEl = underlineTarget.contents().wrap('<span class="content-wrap">');
               }
*/
                 underline = underlineTarget.find('span.underline-shim')
                             .css({
                                'border-bottom': '1px solid '+options.hover,
                                display: 'block',
                                opacity: 0,
                                width:  underlineTarget.width() + 'px'
                             })
                 ;

                 // Peekaboo fix for ie6
                 if ($.browser.ie6)
                 {
                     underline.css({
                         height: '1%'
                     });
                 }
            }
        $(this).hover(function() {
          if ($(this).queue().length < 2)
          {
              $(this).animate({ color: options.hover }, 150 );
              if (options.underline)
              {
                  underline.animate({ opacity: 1.0, color: options.hover }, 150);
              }
          }
        }, function() {
            $(this).animate({ color: options.normal }  );
            if (options.underline)
            {
                underline.animate({ opacity: 0, color: options.normal });
            }
        });
        return $;
      });
    };
})(jQuery);
<!-- /AC_RunActiveContent.js -->
<!-- /assets/images/flash/our_planet.xml -->
<!-- /assets/images/flash/images/section_five.jpg -->
<!-- /assets/images/flash/images/section_five_sm.jpg -->
<!-- /assets/images/flash/images/section_four.jpg -->
<!-- /assets/images/flash/images/section_four_sm.jpg -->
<!-- /assets/images/flash/images/section_three.jpg -->
<!-- /assets/images/flash/images/section_three_sm.jpg -->
<!-- /assets/images/flash/images/section_two.jpg -->
<!-- /assets/images/flash/images/section_two_sm.jpg -->
<!-- /assets/images/flash/images/section_one.jpg -->
<!-- /assets/images/flash/images/section_one_sm.jpg -->