1 /**
  2  * @author Gillis Haasnoot <gillis.haasnoot@gmail.com>
  3  * @package Banana.Controls
  4  * @summary Window control with collapsing functionality
  5  */
  6 
  7 goog.provide('Banana.Controls.Window');
  8 
  9 goog.require('Banana.Controls.Panel');
 10 goog.require('Banana.Controls.SwitchButton');
 11 
 12 /** @namespace Banana.Controls.Window */
 13 namespace('Banana.Controls').Window = Banana.Controls.Panel.extend(
 14 /** @lends Banana.Controls.Window.prototype */
 15 {
 16 	/**
 17 	 * Creates a basic window control. A window have a title and can be collapsed. 
 18 	 * @constructs
 19 	 * @extends Banana.Controls.Panel
 20 	 */
 21 	init : function()
 22 	{	
 23 		this._super();
 24 		this.addCssClass("BWindow");
 25 		
 26 		this.collapsed = false;
 27 		
 28 		var headerPanel = new Banana.Controls.Panel();
 29 		headerPanel.addCssClass('BWindowHeader');
 30 		this.addControl(headerPanel,true);
 31 		
 32 		this.switchButton = new Banana.Controls.SwitchButton();
 33 		this.switchButton.addCssClass('BWindowSwitch');
 34 		this.switchButton.on();
 35 		
 36 		this.switchButton.bind('switched',this.getProxy(this.switchCollapseState));
 37 		
 38 		headerPanel.addControl(this.switchButton);
 39 		
 40 		this.headerTitle = new Banana.Controls.Label();
 41 		this.headerTitle.addCssClass('BWindowTitle');
 42 		headerPanel.addControl(this.headerTitle);
 43 
 44 		this.content = new Banana.Controls.Panel();
 45 		this.content.addCssClass('BWindowContent');
 46 		this.addControl(this.content, true);
 47 		
 48 		this.addControl('<div style="clear:both;"></div>');
 49 	},
 50 
 51 	/**
 52 	 * Clears the window from all added controls
 53 	 * @return {this}
 54 	 */
 55 	clear : function()
 56 	{
 57 		this.content.clear();
 58 		return this;
 59 	},
 60 	
 61 	/**
 62 	 * Switches to an opened state or closed state
 63 	 * @ignore
 64 	 */
 65 	switchCollapseState : function(e,status)
 66 	{
 67 		this.setState('collapsed',status);
 68 
 69 		if (status)
 70 		{
 71 			this.setState('collapsed',true);
 72 			this.close();			
 73 		}
 74 		else
 75 		{
 76 			this.setState('collapsed',false);
 77 			this.open();
 78 		}
 79 	},
 80 	
 81 	/**
 82 	 * We override this method to make sure added controls are added not in the normal collection
 83 	 * But in another specially created control.
 84 	 * 
 85 	 * @param {mixed} Banana.Control or plaintext
 86 	 * @param {boolean} normal if we still want to add it to regular collection
 87 	 * @return {this}
 88 	 * @override
 89 	 */
 90 	addControl : function(control,normal)
 91 	{
 92 		if (normal)
 93 		{
 94 			this._super(control);
 95 		}
 96 		else
 97 		{
 98 			this.content.addControl(control);
 99 		}
100 		return this;
101 	},
102 	
103 	/**
104 	 * Sets the title of the window. Displayed on top.
105 	 * @param {String} title
106 	 */
107 	setTitle : function(title)
108 	{
109 		this.title = title;
110 		return this;
111 	},
112 	
113 	/**
114 	 * @return {String}
115 	 */
116 	getTitle : function()
117 	{
118 		return this.title;
119 	},
120 	
121 	/**
122 	 * @override
123 	 */
124 	createComponents : function()
125 	{
126 		this.headerTitle.setData(this.getTitle());	
127 		
128 		this.switchButton.setOnImage(Banana.Application.getSettings().imagedir + '/arrowclose.png');
129 		this.switchButton.setOffImage(Banana.Application.getSettings().imagedir + '/arrowopen.png');
130 
131 		var open = false;
132 		var collapseState = this.getState('collapsed');
133 		
134 		if (collapseState === null)
135 		{
136 			if (this.collapsed)
137 				open = false;
138 			else
139 				open = true;
140 		}
141 		else if (!collapseState)
142 		{
143 			open = true;
144 		}
145 		else
146 		{
147 			open = false;
148 		}
149 		if (open)
150 		{
151 			this.collapsed = true;
152 			this.switchButton.off();
153 		}
154 		else
155 		{
156 			this.content.setCss({'display': 'none'});
157 			this.collapsed = false;
158 			this.switchButton.on();
159 		}
160 
161 		this.addCssClass('BWindow');		
162 	},
163 	
164 	/**
165 	 * Opens the window
166 	 * @return {this}
167 	 */
168 	open : function()
169 	{
170 		this.collapsed = false;
171 		jQuery('#'+this.content.getClientId()).show();
172 		return this;
173 	},
174 	
175 	/**
176 	 * Closes the window
177 	 * @return {this}
178 	 */
179 	close : function()
180 	{
181 		this.collapsed = true;
182 		jQuery('#'+this.content.getClientId()).hide();
183 		return this;
184 	}
185 });
186