sample code for SPA module

example.js

    // Module /spa/
    // Provides chat slider capabilities
    var spa = (function($) {
      var 
        /* --- Constants --- */
        configMap = {
          extended_height: 434,
          extended_title: 'Click to retract',
          rectracted_height: 16,
          retracted_title: 'Click to extend',
          template_html: '<div class="spa-slider"><\/div>'
        },

        /* --- Module scope variables --- */
        $chatSlider,
        toggleSlider, onClickSlider, initModule;

        /* --- DOM methods --- */
        // alternates slider height
        toggleSlider = function() {
          var 
            slider_height = $chatSlider.height();

            // extend slider if fully retracted
            if(slider_height === configMap.rectracted_height) {
              $chatSlider
                .animate({ height : configMap.extended_height})
                .attr('title', configMap.extended_title);
              return true;

            // retract slider if fully extended
            } else if (slider_height === configMap.extended_height) {
              $chatSlider
                .animate({ height : configMap.rectracted_height})
                .attr('title', configMap.retracted_title)
              return true;
            }

          // do not take action if slider is in transition
          return false;
        };

        /* --- Event Handlers --- */
        // receives click event and calls toggleSlider
        onClickSlider = function(event) {
          toggleSlider();
          return false;
        };

        /* --- Public methods --- */

        // sets initial state and provides feature
        initModule = function($container) {
          // render HTML 
          $container.html(configMap.template_html);
          $chatSlider = $container.find('.spa-slider');
          $chatSlider
            .attr('title', configMap.retracted_title)
            .click(onClickSlider);
          return true;
        };

        return { initModule : initModule };

    })(jQuery);

    // Start SPA once DOM is ready
    jQuery(document).ready(
      // Passing some DOM object using jQuery selector
      function() { 
        spa.initModule( jQuery('#spa') );
      }
    );