function codaSlider() {
    $(document).ready(function() {

        var $container = $('#slider .scrollContainer');
        var $panels = $('#slider .scrollContainer > div');

        var horizontal = true;

        if (horizontal) {   //float panels left if horizontal
            $panels.css({ 'float': 'left', 'text-align': 'left',
                'position': 'relative' // IE fix to ensure overflow is hidden 
            });

            $container.css('width', $panels[0].offsetWidth * $panels.length); // calculate new container width (so it holds all panels)
        }

        // collect the scroll object, at the same time apply the hidden overflow to remove the default scrollbars 
        var $scroll = $('#slider .scroll').css('overflow', 'hidden');
        //        $scroll                       // no scrollbuttons for now
        //          .after('<img class="scrollButtons right" src="../../App_Themes/Cytori/images/scroll_right.png" />')
        //          .after('<img class="scrollButtons left" src="../../App_Themes/Cytori/images/scroll_left.png" />');

        $('#slider .navigation').find('a').click(selectNav);  //pick up first nav tab
        
        //var navTab = $('#slider .navigation').find('a[class$="' + 'selected' + '"]');  //picks up selected navtab
        //navTab.click(selectNav());
        
        function selectNav() {     //handles nav selection
            //navTab = null ? $(this) : navTab;
            //console.log(navTab + " -- " + $(navTab).text());
            $(this)
            .parents('ul:first')
              .find('a')
              .removeClass('selected')
              .parent().css('background-color', '#526C89')
              .end()
            .end()
            .addClass('selected', setMap(this.text), $(this).parent().css('background-color', '#6AAC40'), hiliteCity(this.text));
        }
        
        function setMap(aLink) {
            if (aLink != null) {
                var $worldDivs = $('#worldmaps > div').each(
                   function() {
                       var cssCls = $(this).attr("class");
                       cssCls.substr(cssCls.length - 1, 1) == aLink.substr(0, 1) ? $(this).show() : $(this).hide();
                   })
            }
        }

        // this code sets a class (for hiliting) on 'map area selected' but map area doesn't recognize class...
        function hiliteCity(aLink) {
            if (aLink != null) {
                var id1 = aLink.substr(0, aLink.length).toLowerCase();
                id1 = id1.replace(/ /g, '');  // get rid of spaces
                var $panelDivs = $($panels).each(
                     function() {
                         var divID = $(this).attr("id");
                         if (divID == id1) {
                             var kids = $(this).children().each(
                                 function() {
                                     var tabID = $(this).attr("id").toLowerCase();
                                     if (tabID.substr(tabID.length - id1.length, id1.length) == id1) {
                                         $(this).children().each(
                                         function() {
                                             var cityId = $(this).find('div[id^="' + id1.substr(0, 1) + '"]').attr('id');
                                             var cityDiv = $(this).find('div[id$="' + 'city' + '"]').html();
                                             var xyzDiv = $(this).find('div[class$="' + 'xyz' + '"]').html();
                                             if (cityId != null) {
                                                 $('area').filter('#' + cityId).addClass('areaClick');  // highlight doesn't work
                                                 //console.log("cityId = " + cityId + " xyzDiv = " + xyzDiv + " cityDiv is " + cityDiv);  //top cityID when page is refreshed
                                             }
                                         });
                                     }
                                 });
                         }
                     });
            }
        }

        // go find the navigation link that has this target and select the nav
        function trigger(data) {
            var el = $('#slider .navigation').find('a[href$="' + data.id + '"]').get(0);
            selectNav.call(el);
        }

        //on refresh
        if (window.location.hash) {
            trigger({ id: window.location.hash.substr(1) });
        } else {
            $('ul.navigation a:first').click();
            // hiliteCity($('ul.navigation a:first').text);
        }

        // offset is used to move to *exactly* the right place, since the example is using padding,
        // psubtract the amount of padding to the offset.  
        var offset = parseInt((horizontal ?
          $container.css('paddingTop') : $container.css('paddingLeft')) || 0) * -1;

        var scrollOptions = {
            target: $scroll,      // the element that has the overflow
            items: $panels,      // can be a selector which will be relative to the target
            navigation: '.navigation a',
            prev: 'img.left',    // selectors are NOT relative to document, i.e. make sure they're unique
            next: 'img.right',
            axis: 'xy',        // scroll both directions
            onAfter: trigger,  // our final callback
            offset: offset,
            duration: 500,
            // easing - can be used with the easing plugin: http://gsgd.co.uk/sandbox/jquery/easing/
            easing: 'swing'
        };

        // apply serialScroll to the slider (supports indexed next/previous scroll along with hooking in to the navigation)
        $('#slider').serialScroll(scrollOptions);

        // now apply localScroll to hook any other arbitrary links to trigger the effect
        $.localScroll(scrollOptions);

        // finally, if the URL has a hash, move the slider in to position, 
        // setting the duration to 1 so it doesn't scroll in the very first page load.  
        // We don't always need this, but it ensures the positioning is absolutely spot on when the pages loads.
        scrollOptions.duration = 1;
        $.localScroll.hash(scrollOptions);

    });
}