/* 
Simple JQuery collapse panels.
HTML structure to use:

Notes:

<DIV class="collapsePanel">
    <H2><img src="images/16x16-plusicon.png" align="top" />test</H2>
    <DIV>
        <P>this is a test 1</P>
    </DIV>
    <H2><img src="images/16x16-plusicon.png" align="top" />test 2</H2>
    <DIV>
        <P>this is test 2</P>
    </DIV>
</DIV>


Copyright 2010 by Kelvin

*/
function initCollapse() {
jQuery("div.collapsePanel div").hide();
  
  //toggle the componenet with class msg_body
  jQuery('h2').hover(
    function() {
//            $(this).removeClass();
            jQuery(this).addClass('h2-hover');
            },
    function() {
            jQuery(this).removeClass('h2-hover');
    }
            );
  
  jQuery('h2').click(function()
  {
    var checkElement = jQuery(this).next('div');
    var parent = this.parentNode.id;
    if(checkElement.is(':hidden')) {				
			
			jQuery(this).removeClass();
			jQuery(this).addClass('expanded');
			jQuery(this).children('img').attr('src','jsplugins/collapsePanel/images/10x10-minusicon.png');
			jQuery(checkElement).slideDown(300);				
				return false;
			}
	 if(checkElement.is(':visible')) {				
			
			jQuery(this).removeClass();
			jQuery(this).addClass('collapsed');
			jQuery(this).children('img').attr('src','jsplugins/collapsePanel/images/10x10-plusicon.png');
			jQuery(checkElement).slideUp(300);				
				return false;
			}		
			
//    jQuery(this).next("div").slideToggle(300);
    
  });

}
jQuery(document).ready(function() { initCollapse();});