/*
 * ########################################
 * #  AppStoreHQ 2010
 * ########################################
 * 
 * Formatting of the html should be as follows:
 *  .read_more_wrapper // This is the called element, it can be jquery element, see 'Usage'
 *   -> .read_more_base
 *   -> .read_more_togglable
 *   -> .read_more_button
 * 
 * Usage:
 *  $('.read_more_wrapper').read_more();
 */


( function($) {

      function default_options() {
          return {

              // css
              shown_css  : { 'display' : 'inline' },
              hidden_css : { 'display' : 'none' },
              
              // animations
	      speed          : 100,
              show_animation : 'slideDown', // Not implemented
              hide_animation : 'slideUp', // Not implemented
              
              // The elements
              base      : '.read_more_base',
              button    : '.read_more_button',
              togglable : '.read_more_togglable',
              
              
              hide_callback : function( button, togglable, base, wrapper ) {
                  button.html( " ...more");
              },
              
              show_callback : function( button, togglable, base, wrapper ) {
                  button.html( " ...less");
              }
          };
      };
      
      $.fn.read_more = function(options) {
          var o = $.extend( true, default_options(), options );
          this.each( function(i) { read_more( $(this), o ); } );
          return this;
      };

      function read_more( wrapper, o ) {

          var base       = wrapper.children(o.base);
          var button     = wrapper.children(o.button);
          var togglable  = wrapper.children(o.togglable);
          
          button.bind( "click", 
                       function() {
                           toggle( button, togglable, base, wrapper, o );
                           return false;
                       }
                     );
      }

      function toggle( button, togglable, base, wrapper, o ) {
          var visible = get_state( togglable );

          if ( visible ) {
              togglable.css("display", "block").slideUp( o.speed );
              togglable.css( o.hide_css );
              o.hide_callback( button, togglable, base, wrapper );
          } else {
              togglable.slideDown( o.speed );
              togglable.css( o.show_css );
              o.show_callback( button, togglable, base, wrapper );
          }
      }
      
      function get_state( togglable ) {
          var display = togglable.css('display');
          return display != "none";
      }
      
  })(jQuery);