(function($) {
    $.fn.extend({
        collapsiblePanel: function() {
            // Call the ConfigureCollapsiblePanel function for the selected element
            return $(this).each(ConfigureCollapsiblePanel);
        }
    });
    
})(jQuery);

function ConfigureCollapsiblePanel() {
    $(this).addClass("ui-widget");

   
    
    // Wrap the contents of the container within a new div.
    $(this).children().wrapAll("<div class='collapsibleContainerContent ui-widget-content'></div>");

    // Create a new div as the first item within the container.  Put the title of the panel in here.
    $("<div class='collapsibleContainerTitle ui-widget-header'><div>" + $(this).attr("title") + "</div></div>").prependTo($(this));

    // Assign a call to CollapsibleContainerTitleOnClick for the click event of the new title div.
    $(".collapsibleContainerTitle", this).click(CollapsibleContainerTitleOnClick);
   
    
    	if($(this).hasClass('opened')){
    		//console.log($(this).children('.collapsibleContainerTitle'));
    		$(this).children('.collapsibleContainerTitle').click();
    		
    	}
        //alert(index + ': ' + $(this).text());

    //console.log($().parent().hasClass('opened'));
    /*
	if($(".collapsibleContainerTitle").parent().hasClass('opened')){
		$(".collapsibleContainerTitle", $(this).parent()).removeClass('opened');	
    */
    
}

function CollapsibleContainerTitleOnClick() {
    // The item clicked is the title div... get this parent (the overall container) and toggle the content within it.
	

    $(".collapsibleContainerContent", $(this).parent()).slideToggle();
    // Animation complete.
	if($(".collapsibleContainerTitle", $(this).parent()).hasClass('opened')){
		$(".collapsibleContainerTitle", $(this).parent()).removeClass('opened');		
	} else {		
		$(".collapsibleContainerTitle", $(this).parent()).addClass('opened');			
	}
   
}