/**
 * @author Peter Goulborn
 *
 * Date: 26/11/08
 * 
 * Class: Astun.iSharemaps.UI
 * Container for UI classes and functions.  
 */
if (!Prototype || !Fx) throw new Error('Dependent library not found');  // Needs to be nicer, possibly iSharemaps-wide library error?

if (!Astun) var Astun = {};
if (!Astun.iSharemaps) Astun.iSharemaps = {};
if (!Astun.iSharemaps.UI) Astun.iSharemaps.UI = {};

Astun.iSharemaps.UI.Panel = Class.create(
{
/**
     * Constructor: Astun.iSharemaps.UI.Panel
     * Create a new iShareMaps panel with header-content-footer structure.
     * Example: 
     *		<div class="atPanel">
	 *			<div class="atPanelHeader">
	 *				<h3>Panel header</h3>
	 *			</div>
	 *			<div class="atPanelContent"></div>
	 *			<div class="atPanelFooter"></div>
	 *		</div>
     * Parameters:
     * options - {object} container for:
     *		title - {string} header text for panel
     *		relative - {string | HTMLElement} element relative to this panel 
     *			will be inserted.
     *		position - {string} position relative to parent (if specified)
     *			allowed: 'top', 'bottom', 'before' or 'after'.
	 *			See: http://www.prototypejs.org/api/element/insert
     *		names - {object} classes and IDs of various elements in the panel.
     *				If absent no additional classes or ids will be added.
     *		names.panel.classes - {array}
     *		names.panel.id - {string}
     *		names.header.classes - {array}
     *		names.header.id - {string}
     *		names.content.classes - {array}
     *		names.content.id - {string}
     *		names.footer.classes - {array}
     *		names.footer.id - {string}
     * 
     * Returns:
     * { HTMLElement | boolean } - Returns the inserted element or false if 
     * creation failed.
     */
	initialize: function ( options ) {
		var childElements = ['header', 'content', 'footer'] ;
		var addNames = function (element, id, classes) {
			if (!!classes) {
				if (classes instanceof Array)
				{
					while (classes) {
						element.addClassNam(classes.shift());
					}
				}
			}
			if (!!id) {
				if (typeof(id) === 'string') {
					element.id = id;
				}
			}
			
		}
		this.elements = $A();
		this.elements.main = new Element ('div', {'class': 'atPanel'});
		if (!!options && !!options.names && !!options.names.panel) {
			addNames(this.elements.main, options.names.panel.id, options.names.panel.classes);
		}
					
		for (var i = 0; i < childElements.length; i++) {
			var type = childElements[i];
			var newElement = new Element ('div', {'class': ('at-panel-' + type).camelize()});
			if (!!options && !!options.names && !!options.names[type]) {
				addNames(newElement, options.names[type].id, options.names[type].classes);
			}
			this.elements[type]  = newElement;
			this.elements.main.insert(newElement);
		}
		
		this.elements.title = new Element('h3');
		this.elements.header.insert(this.elements.title);
		
		if (!!options) {
			if (!!options.title) {
				this.elements.title.update(options.title);
			}
			if (!!options.relative) {
				var position = {};
				position[options.position || 'bottom'] = this.elements.main;
				$(options.relative).insert(position);
			}
		}
	},
	'hide': function(){
		this.elements.main.hide();
	},
	'show': function(){
		this.elements.main.show();
	}
}
);