/* 
   Eric Robitaille
   Javascript class to create readmore expand/collapse list based upon the position of <p> tags within html body 
   denoted by div.tip ( element / class ). Future enhancement - create a jquery module for this where you can pass in
   the jquery selector
*/

function more(i)
{
        $('#readmore_'+i).hide();
        $('#readless_'+i).show();
        $('#split-content_'+i).show();
}
function less(i)
{
        $('#readmore_'+i).show();
        $('#readless_'+i).hide();
        $('#split-content_'+i).hide();
}

$(document).ready(function() {

     $('div.tip').each(function(index) {
     	var html = $(this).html();
        var slices = $.browser.msie?html.split('</P>'):html.split('</p>');

        var cutoff = 2;

        var above = '';
        var readMore = '<span id="readmore_'+index+'" class="more">... <a href="#" onclick="more(' + index + ');return false;">[read more]</a></span>';
        var below = '<span id="split-content_'+index+'" style="display:none">';
                               
        for(var i=0; i< slices.length; i++)
        {
             if( i < cutoff )
                 above += slices[i] + '</p>';
             else
                 below += slices[i] + '</p>';
        }
        below += '</span>';
        var readLess = '<div id="readless_' + index + '" style="display:none"><a href="#specialist_'+index+'" onclick="less(' + index + ');">[read less]</a></div>';

        $(this).html(above + readMore + below + readLess);
     });

 });