jQuery.fn.panel = function(options)
{
    var settings = jQuery.extend({
		header: ":header:first-child"
	}, options);
	
	// set up the panel
	var header = this.children(settings.header);
	header.attr("panel", "header");
	this.attr("panel", "panel");
	this.children(".content").attr("panel", "content");
	
	// create min, max and close buttons
	var buttons = header.append(" \
	    <span action='max' class='" + settings.maxClass + "'></span> \
	    <span action='min' class='" + settings.minClass + "'></span> \
	    <span action='closed' class='" + settings.closeClass + "'></span> \
	").children("[action]");
	
	// wire up the click event
	buttons.click(function()
	{
		var parent = $(this).parents("[panel=panel]");
		parent.panelState($(this).attr("action"));
		if(settings.stateChanged)
			settings.stateChanged(parent, settings);
	});
	
	// return the panel elements for chaining
	return this;
};
jQuery.fn.panelState = function(state) {
    // if there's no param, return the current state
    if (typeof (state) == "undefined")
        return $(this).attr("state");

    return this.each(function() {
        // passing "refresh" in updates the panel 
        // with whatever it's state attribute says it should display
        if (state == "refresh") {
            $(this).panelState($(this).attr("state"));
            return;
        }

        var panel = $(this);
        if (state == "closed") {
            panel.hide();
            panel.attr("state", "closed");
        }
        else if (state == "min") {
            panel.attr("state", "min");
            panel.css("overflow", "hidden");
            panel.height(panel.children("[panel=header]").height() - 1);
        }
        else {
            panel.removeAttr("state");
            panel.show();
            panel.css("overflow", "");
            panel.css("height", "");
        }
    });
};
jQuery.fn.panelTitle = function() {
    return this.children("[panel=header]").children(":not([action])").text();
};
jQuery.fn.panelSettings = function(position, options) {
    var settings = jQuery.extend({
        save: function() { }
    }, options);
    var panels = this;
    var customize = null;

    // create the customize button
    var button = $(position).after("<a class='customise'>Customize your page</a>").next();
    button.click(function() {
        if (!customize) {
            customize = $(button).after(" \
                <div class='customise'>\
                    Select the topics you wish to include in your page \
                    <ul></ul> \
                    <div class='centre_btns'> \
                        <input type='button' value='Save' /> \
                        <input type='button' value='Cancel' /> \
                        <!--<input type='button' value='Reset panels' /> -->\
                    </div> \
                 </div>").next();
            customize.btnClass();

            // checkboxes
            var list = $("ul", customize);
            panels.each(function(index) {
                list.append(" \
                <li> \
                    <input id='" + this.id + "_checkbox' panel='" + this.id + "' type='checkbox'  /> \
                    <label for='" + this.id + "_checkbox'>" + $(this).panelTitle() + "</label> \
                </li>");
            });
            list.splitList(4);

            $("input[type=button]", customize).click(function() { customize.hide(); });
            $("input[value=Save]", customize).click(function() {
                panels.each(function() {
                    var checkboxId = "#" + this.id + "_checkbox";
                    var display = $(checkboxId).attr("checked") ? "" : "closed";
                    $(this).panelState(display);
                });
                settings.save();
            });
            $("input[value='Reset panels']", customize).click(function() {
                
            });
        }

        customize.show();
        panels.each(function() {
            var checkboxId = "#" + this.id + "_checkbox";
            $(checkboxId).attr("checked", $(this).panelState() != "closed");
        });
    });

    return this;
};