////////////////////////////
// http://adipalaz.awardspace.com/experiments/jquery/expand.html
///////////////////////////
(function($) {
$.fn.orphans = function(){
    var txt = [];
    this.each(function(){$.each(this.childNodes, function() {
        if (this.nodeType == 3 && $.trim(this.nodeValue)) txt.push(this)
    })}); 
    return $(txt);
};
$.fn.addTrigger = function(options) {
    var defaults = {
         expand : '[Expand All]',
         collapse : '[Collapse All]',
         a : '<p id="switch"><span><a href="#expand-all">',
         b : '</a></span><span class="hidden"><a href="#collapse-all">',
         c : '</a></span></p>',
         ref : 'div:first',
         el : '#' + this.attr("id") + ' '
    };
    var options = $.extend(defaults, options);   
    return $addTrigg = $(options.a + options.expand + options.b + options.collapse + options.c).insertBefore(options.el + options.ref).css('cursor','pointer');
};
//http://www.learningjquery.com/2008/02/simple-effects-plugins:
$.fn.fadeToggle = function(speed, easing, callback) {
  return this.animate({opacity: 'toggle'}, speed, easing, callback);
};
$.fn.slideFadeToggle = function(speed, easing, callback) {
  return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
};
})(jQuery);
////////////////////////////
$(function() {
    $('.expand').css('cursor','pointer').orphans().wrap('<a href="#expand/collapse" title="expand/collapse"></a>');
    $('.collapse').hide(); 
        /* ---  If you want to have your DIVs expanded by default when the page loads:
            remove: $('.collapse').hide();
            or add: $('.collapse.show').show(); and apply a class 'show' to the element to be shown by default
            Accordingly, change the code below and in the CSS, concerning the images (arrow-up and arrow-down)  --- */

    /// Expand All/Collapse All ///        
    $('#outer').addTrigger();
    $('#switch').click(function () {
        $(this).find('span').toggleClass('hidden');
        
        var cllps = $(this).parent().parent().find('.collapse');
        var exp = $(this).parent().parent().find('div .expand');
        var sp = $(this).find('span:first');
        (sp.hasClass('hidden')) ? exp.addClass('open') : exp.removeClass('open');
        (sp.hasClass('hidden')) ? cllps.show() : cllps.hide();
    });
    //////////////////////////////

    $('#show .expand').click(function() {
        $(this).toggleClass('open');
        //($(this).hasClass('open')) ? $(this).removeClass('open') : $(this).addClass('open');
        $(this).next('.normal').toggle();
        $(this).next('.slow').toggle('slow');
    });

    $('#slide .expand').click(function() {
        $(this).toggleClass('open');
        //($(this).hasClass('open')) ? $(this).removeClass('open') : $(this).addClass('open');
        $(this).next('.normal').slideToggle();
        $(this).next('.slow').slideToggle('slow','linear');
    });

    $('#fade .expand').click(function() {
        $(this).toggleClass('open');
        //($(this).hasClass('open')) ? $(this).removeClass('open') : $(this).addClass('open');
        $(this).next('.normal').fadeToggle('slow','linear');
        $(this).next('.slow').slideFadeToggle('slow','linear');
    });
});