var nyc = nyc || {};

/**
 * @desc Collapsible control
 * @public
 * @class
 * @extends {nyc.EventHandling}
 * @constructor
 * @param {nyc.Collapsible.Options} options Constructor options
 */
nyc.Collapsible = function(options){
	var heading = $('<h3></h3>');

	this.container = $(options.target).append(options.content);
	this.currentVal = $('<span class="current-value"></span>');

	heading.html(options.title || '')
		.append(this.currentVal);


	$(options.target).prepend(heading)
		.collapsible()
		.collapsible('option', {
			collapsed: !options.expanded,
			collapsedIcon: 'carat-d',
			expandedIcon: 'carat-u',
			expand: $.proxy(this.expanded, this)
		}).addClass('ctl-collapse');

};

nyc.Collapsible.prototype = {
	/**
	 * @desc A JQuery element representation of the container
	 * @public
	 * @member {JQuery}
	 */
	container: null,
	/**
	 * @desc A JQuery element used to display a readable representation of the current value
	 * @public
	 * @member {JQuery}
	 */
	currentVal: null,
	/**
	 * @desc Proxy the expand event
	 * @public
	 * @member {JQuery.Event}
	 */
	expanded: function(event){
		this.trigger('expand', event);
	}
};

nyc.inherits(nyc.Collapsible, nyc.EventHandling);

/**
 * @desc Constructor options for {@link nyc.Collapsible}
 * @public
 * @typedef {Object}
 * @property {Element|JQuery|string} target The target DOM node for creating the collapsible control
 * @property {string} title The title to display
 * @property {Element|JQuery|string=} content Content for the collapsible control
 * @property {boolean} [expanded=false] The intial state of the collapsible control
 */
nyc.Collapsible.Options;