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

})(jQuery);

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

    // Check if there are any child elements, if not then wrap the inner text within a new div.
    if ($(this).children().length == 0) {
        $(this).wrapInner("<div></div>");
    }

    // 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 "+ $(this).attr('bg') +"'><div>" + $(this).attr("title") + "</div></div>").prependTo($(this));

    if(parseInt($(this).attr('show'),10) == 0)
    {
    	$("<img class='puller' src='/img/pluspull.png' style=''>").appendTo($(this));
    	$(".collapsibleContainerContent", $(this)).slideUp(0);
    }
    else
    {
    	$("<img class='puller' src='/img/minuspull.png' style=''>").appendTo($(this));
    }
    
    // Assign a call to CollapsibleContainerTitleOnClick for the click event of the new title div.
    //$(".collapsibleContainerTitle", this).click(CollapsibleContainerTitleOnClick);
    $(".puller", this).click(CollapsibleContainerTitleOnClick);
    
}

function CollapsibleContainerTitleOnClick() {
    // The item clicked is the title div... get this parent (the overall container) and toggle the content within it.
	var container = $(this);
	var id = $(this).parent().attr('id');
    $(".collapsibleContainerContent", $(this).parent()).slideToggle('normal',function(){
    	
    	if($(this).is(':hidden'))
    	{
    		//container.html(container.html().replace(/\-/,"+"));
    		container.attr('src', '/img/pluspull.png');
    		var url = '/kids-clothes/index.php/Toggle/'+id+'/0'; // /'+sid;
    	    ajaxSend(url,donothing);
    	}
    	else
    	{
    		//container.html(container.html().replace(/\+/,"-"));
    		container.attr('src', '/img/minuspull.png');
    		var url = '/kids-clothes/index.php/Toggle/'+id+'/1'; // /'+sid;
    		ajaxSend(url,donothing);
    	}
      }
    );
}