1 /* 	Name: UI Module
  2 	Date: April 2011
  3 	Description: UI functionality implementation.
  4 	Dependencies: <none>
  5 	Children: <none> */
  6 		
  7 /**
  8  * Creates an instance of the UI module
  9  *
 10  * @constructor
 11  * @this {UI}
 12  * @see ui.js
 13  */
 14  
 15 function UI (ctx) {
 16 	/**
 17 	* Canvas 2D rendering context.
 18 	*
 19 	* @type [object CanvasRenderingContext2D]
 20 	*/
 21 	this.ctx = ctx;
 22 	
 23 	/**
 24 	* UI elements array.
 25 	*
 26 	* @type Array
 27 	*/
 28 	this.elements = [];
 29 	
 30 	/**
 31 	* Reference to current UI.
 32 	*
 33 	* @type Object
 34 	*/
 35 	this.currentUI = null; // Function
 36 
 37 
 38 	/**
 39 	 * Setup UI touchpad.
 40 	 * 
 41 	 * @this {UI}
 42 	 */
 43 	this.touchpad = function(){
 44 		if (this.ctx){
 45 			var cwidth = this.ctx.canvas.width;
 46 			var cheight = this.ctx.canvas.height;
 47 		}
 48 	
 49 		// UI Objects for Touchpad
 50 		var up = new UIElement("up",'ui/up.png',64,cheight-160,48,48);
 51 		var down = new UIElement("down",'ui/down.png',64,cheight-64,48,48);
 52 		var right = new UIElement("right",'ui/right.png',112,cheight-112,48,48);
 53 		var left = new UIElement("left",'ui/left.png',16,cheight-112,48,48);
 54 
 55 		var abutton = new UIElement("abutton",'ui/a.png',cwidth-144,cheight-96,48,48);
 56 		var bbutton = new UIElement("bbutton",'ui/b.png',cwidth-80,cheight-96-22,48,48);
 57 		
 58 		// Draw
 59 		this.elements = [up,down,right,left,abutton,bbutton];
 60 	};
 61 	
 62 	/**
 63 	 * Set UI function (touchpad or custom).
 64 	 * 
 65 	 * @param {Object} uifunction Reference to UI function. e.g. "touchpad" or other.
 66 	 * @this {UI}
 67 	 */
 68 	this.setUI = function(uifunction){
 69 		if (uifunction === "touchpad"){
 70 			this.currentUI = this.touchpad;
 71 		} else {
 72 			this.currentUI = uifunction;
 73 		}
 74 	};
 75 	
 76 	/**
 77 	 * Setup the current UI.
 78 	 * 
 79 	 * @this {UI}
 80 	 */
 81 	this.setupUI = function() {
 82 		this.currentUI();
 83 	};
 84 	
 85 	/**
 86 	 * Draw the current UI.
 87 	 * 
 88 	 * @this {UI}
 89 	 */
 90 	this.drawUI = function() {
 91 		for (var i=0; i < this.elements.length; i++){
 92 			this.elements[i].draw(this.ctx);
 93 		}
 94 	};
 95 }
 96  
 97 /**
 98  * Creates an instance of a UIElement.
 99  *
100  * @constructor
101  * @this {UI}
102  * @param {String} id String ID for UIElement.
103  * @param {Image} img Image of UIElement.
104  * @param {Number} x x axis position to draw UIElement.
105  * @param {Number} y y axis position to draw UIElement.
106  * @param {Number} width Width of UIElement.
107  * @param {Number} height Height of UIElement.
108  * @see ui.js
109  */
110 function UIElement(id,img,x,y,width,height) {
111 	/**
112 	* UIElement id.
113 	*
114 	* @type String
115 	*/
116 	this.id = id;
117 	
118 	/**
119 	* UIElement image object.
120 	*
121 	* @type [Object Image]
122 	*/
123 	this.image = null;
124 	
125 	/**
126 	* UIElement x position.
127 	*
128 	* @type Number
129 	*/
130 	this.x = x;
131 	
132 	/**
133 	* UIElement y position.
134 	*
135 	* @type Number
136 	*/
137 	this.y = y;
138 	
139 	/**
140 	* UIElement width.
141 	*
142 	* @type Number
143 	*/
144 	this.width = width;
145 	
146 	/**
147 	* UIElement height.
148 	*
149 	* @type Number
150 	*/
151 	this.height = height;
152 	
153 	/**
154 	 * Load image UI element.
155 	 * 
156 	 * @param {Image} image UI element image.
157 	 * @param {Number} x x axis coordinate to draw UI element.
158 	 * @param {Number} y y axis coordinate to draw UI element.
159 	 * @param {Number} width Width to draw UI element.
160 	 * @param {Number} height Height to draw UI element.
161 	 * @this {UIElement}
162 	 */
163 	this.load = function(image,x,y,width,height){
164 		this.image = new Image();
165 		this.image.src = image;
166 		
167 		this.width = width;
168 		this.height = height;
169 		
170 		this.x = x;
171 		this.y = y;
172 	};
173 	
174 	// Load image on instantiation
175 	this.load(img,x,y,width,height);
176 	
177 	/**
178 	 * Draw the UI element.
179 	 *
180 	 * @param {[object CanvasRenderingContext2D]} ctx 2D Canvas context.
181 	 * @this {UIElement}
182 	 */
183 	this.draw = function(ctx) {
184 		if (ctx){
185 			if (ctx.drawImage){
186 				ctx.drawImage(this.image,this.x,this.y,this.width,this.height);
187 			}
188 		}
189 	};
190 	
191 	/**
192 	 * Check if a certain element has focus by checking it's X, Y, Width and Height.
193 	 *
194 	 * @param {Number} x x axis position to check.
195 	 * @param {Number} y y axis position to check.
196 	 * @return {String} String denoting ID of UIElement.
197 	 * @this {UIElement}
198 	 */
199 	this.elementFocus = function(x,y) {
200 		if (x >= this.x && x <= (this.x + this.width) &&
201 			y >= this.y && y <= (this.y + this.height)){
202 				return this.id;
203 		}
204 	};
205 }