/**
*
* @module HUD
* @submodule Widget
*
*/

module Kiwi.HUD.Widget {

	/**
	* Used to display a cell from a TextureAtlas in the HUD. This could be used for portraits of the character, e.t.c.
	* You can change the current cell that is being used in the TextureAtlas by modifing the cellIndex property.
	*
	* @class Icon
	* @extends Kiwi.HUD.HUDWidget
	* @namespace Kiwi.HUD.Widget
	* @constructor
	* @param game {Kiwi.Game} The game that this icon belongs to.
	* @param atlas {Kiwi.Textures.TextureAtlas} The image that you would like displayed.
	* @param x {Number} The coordinate of the icon on the x-axis.
	* @param y {Number} The coordinate of the icon on the y-axis.
	* @return {Kiwi.HUD.Widget.Icon}
	*/
	export class Icon extends Kiwi.HUD.HUDWidget {

		constructor(game:Kiwi.Game, atlas: Kiwi.Textures.TextureAtlas, x:number, y:number) {

			super(game, 'Icon', x, y);

			this.class = 'kiwi-icon-widget kiwi-widget';
			this.atlas = atlas;
			this.icon = this.container;
			this._applyCSS();
		}

		/**
		* Holds the texture atlas that is being used
		* @property atlas
		* @type Kiwi.Textures.TextureAtlas
		* @public
		*/
		public atlas: Kiwi.Textures.TextureAtlas;

		/**
		* The cell inside the texture atlas that this icon is using
		* @property _cellIndex
		* @type number
		* @default 0
		* @private
		*/
		private _cellIndex: number = 0;

		/**
		* Gets the cell index that is being used.
		* @property cellIndex
		* @type number
		* @default 0 
		* @public
		*/
		public get cellIndex(): number {
			return this._cellIndex;
		}
		public set cellIndex(value: number) {
			this._cellIndex = value;
			this.width = this.atlas.cells[this.cellIndex].w;
			this.height = this.atlas.cells[this.cellIndex].h;
			this._applyCSS();
		}

		/**
		* Returns the width of the cell that is being used.
		* @property width
		* @type number
		* @public
		*/
		public get width(): number {
			return this.atlas.cells[this.cellIndex].w;
		}

		/**
		* Returns the height of the cell that is being used.
		* @property height
		* @type number
		* @public
		*/
		public get height(): number {
			return this.atlas.cells[this.cellIndex].h;
		}

		/**
		* Is a reference to the element that the icon CSS is being applyed to.
		* @property icon
		* @type HTMLElement
		* @public
		*/
		public icon: HTMLElement;

		/**
		* Removes the CSS from the Icon.
		* This can happen when setting/removing a template and is public to allow for overriding from subclasses.
		* @method _removeCSS
		* @protected
		*/
		public _removeCSS() {
			this.icon.style.width = '';
			this.icon.style.height = '';
			this.icon.style.backgroundImage = '';
			this.icon.style.backgroundRepeat = '';
		}

		/**
		* Applys the css to the HTMLElement that is to be affected. 
		* @method _applyCSS
		* @protected
		*/
		public _applyCSS() {
			this.icon.style.width = this.width + "px";
			this.icon.style.height = this.height + "px";
			this.icon.style.backgroundPositionX = -this.atlas.cells[this.cellIndex].x + "px";
			this.icon.style.backgroundPositionY = -this.atlas.cells[this.cellIndex].y + "px";
			this.icon.style.backgroundRepeat = 'no-repeat';

			if ( Kiwi.Utils.Common.isUndefined( this.atlas.image.src) == false) {
				this.icon.style.backgroundImage = 'url("' + this.atlas.image.src + '")';
			} else {
				this.icon.style.backgroundImage = 'url("' + this.atlas.image.toDataURL("image/png") + '")';
			}

		}

		/**
		* This method is used to remove existing DOM elements and place them inside a HUDWidget's container element.
		* Useful so that when making HUD Widgets the developer can style HUDWidgets without having to create/write to much javascript.
		* Currently not supported.
		*
		* @method setTemplate
		* @param main {string} main - ID of an HTMLElement. This element should contain all of the elements you would like to place inside the HUDWidget. 
		* @param icon {string} icon - ID of an HTMLElement that resides inside of the main param. This is the element that the HUDWidget can use to populate with information. E.g. Your score, health remaining, the icon, e.t.c.
		* @public
		*/
		public setTemplate(main: string, icon?: string) {  
			if (this._device == Kiwi.TARGET_BROWSER) {
				this._removeCSS();

				super.setTemplate(main, icon);
				
				if (this.tempElement !== undefined) {
					this.icon = this.tempElement;
				}

				this._applyCSS();
			}
		}

		/**
		* Used to remove any the template HTML from this HUDWidget.
		* 
		* @method removeTemplate
		* @public
		*/
		public removeTemplate() {
			if (this._device == Kiwi.TARGET_BROWSER) {
				super.removeTemplate();

				this._removeCSS();
				this.icon = this.container;
				this._applyCSS();
			}
		}

	}

}