/**
* @fileoverview This file contains the item object.  The item object is loaded right after the floor that contains it is loaded.  It contains the position of the item and its label relative to the image map of the floor.
* @author Sara Lin
* @version 0.1
*/

/**
* The item object.
* @namespace Item
* @property {number} id The id of the item.
* @property {string} name The name of the item as it appears on the map and tab labels.
* @property {string} description A short sentence describing the use of this item.
* @property {array} hotspot The position of item label represented as an [top, left] coordinates
* @property {boolean} customhp Indicates whether or not the item hotspot was auto-generated or custom defined (needed for editing)
* @property {boolean} label Indicates whether or not to display the label on the map
* @property {boolean} edit Indicates whether the current item is being edited or not.
*/
var Item = Class.create();

Item.prototype = {

	/**
	* Initializing the item, setting the default values and event handlers of the item.
	* @constructor
	* @param {number} id The id of the item.
	* @param {string} name The name of the item as it appears on the map and tab labels.
	* @param {string} description A short sentence describing the use of this item.
	* @param {array} hotspot The position of item label represented as an [top, left] coordinates
	* @param {boolean} customhp Indicates whether or not the item hotspot was auto-generated or custom defined (needed for editing)
	* @param {boolean} label Indicates whether or not to display the label on the map
	*/
	initialize: function(id, name, description, hotspot, customhp, label) {
		this.id = id;
		this.name = name;
		this.desc = description;
		this.hotspot = hotspot;
		this.customhp = customhp;
		this.label = label;
		this.edit = false;
		this.force_highlight = false;

		this.click = this._click.bindAsEventListener(this);
		this.editCoords = this._editCoords.bindAsEventListener(this);
		this.showHighlight = this._showHighlight.bindAsEventListener(this);
		this.hideHighlight = this._hideHighlight.bindAsEventListener(this);
	},

	setName: function(newName) {
		this.name = newName;
	},
	
//EVENT ATTACHMENT FUNCTIONS//////////////////////////////////////////////////////////////////////////////////////
	/** attach mouse click events on the item area in the image map and on the label of the item to show item tab even handler */
	addEvents: function() {
		var element = $('item_'+this.id);
		var labelElem = $('item_label_'+this.id);
		if (element != null) {
			element.observe('mouseup', this.click);
			element.observe('mouseover', this.showHighlight);
			element.observe('mouseout', this.hideHighlight);
		}
		if (labelElem != null) {
			labelElem.observe('mouseup', this.click);
			labelElem.observe('mouseover', this.showHighlight);
			labelElem.observe('mouseout', this.hideHighlight);
		}
	},
	
	/** detach mouse click events on the item area in the image map and on the label of the item from show item tab even handler */
	delEvents: function() {
		var element = $('item_'+this.id);
		var labelElem = $('item_label_'+this.id);
		if (element != null) {
			element.stopObserving('mouseup', this.click);
			element.stopObserving('mouseover', this.showHighlight);
			element.stopObserving('mouseout', this.hideHighlight);
		}
		if (labelElem != null) {
			labelElem.stopObserving('mouseup', this.click);
			labelElem.stopObserving('mouseover', this.showHighlight);
			labelElem.stopObserving('mouseout', this.hideHighlight);
		}
	},
	
	/** attach mouse click events on the item area in the image map and on the label of the item to edit coordinates event handler*/
	addCoordEditEvent: function() {
		var element = $('item_'+this.id);
		var labelElem = $('item_label_'+this.id);
		if (element != null) {
			element.observe('click', this.editCoords);
		}
		if (labelElem != null) {
			labelElem.observe('click', this.editCoords);
		}
	},
	
	/** detach mouse click events on the item area in the image map and on the label of the item from edit coordinates event handler*/
	delCoordEditEvent: function() {
		var element = $('item_'+this.id);
		var labelElem = $('item_label_'+this.id);
		if (element != null) {
			element.stopObserving('click', this.editCoords);
		}
		if (labelElem != null) {
			labelElem.stopObserving('click', this.editCoords);
		}
	},

//EVENT ATTACHMENT FUNCTIONS ENDS//////////////////////////////////////////////////////////////////////////////////////
	/** invoked by a clicking event, loads the item tab
	* @event
	* @param {event} event
	*/
	_click: function(event) {
		if (isDragging(Main.draggables))
			return;

		Main.trackPage('/item/'+this.name+'.html');
		ItemTab.load(this);
		Main.curItemID = this.id;
	},
	
	_center: function() {
		var bottom_h = Element.getHeight($('footer'));
		var top_h = Element.getHeight($('header'));
		var h = Element.getHeight($('site_wrap'));
		var w = Element.getWidth($('site_wrap'));
		
		var center = {};
		center.top = (h-bottom_h-top_h)/2+top_h;
		center.left = w/2;
		
		var labelElem = $('item_label_'+this.id);
		var curPos;
		if (labelElem) {
			curPos = Element.viewportOffset(labelElem);
		} else {
			var absFloorPos = Element.viewportOffset($('floors'));
			curPos = {top: this.hotspot[0]+absFloorPos.top, left: this.hotspot[1]+absFloorPos.left};
		}
		var deltaPos = {
			top: center.top - curPos.top,
			left: center.left - curPos.left};
		
		new Effect.Move($('floors'), {x:deltaPos.left, y:deltaPos.top, duration:0.5});
	},
	
	/** invoked by a clicking event, loads edit item coordinates function in user object 
	* @event
	* @param {event} event
	*/
	_editCoords: function(event) {
		if (Main.user != null) {
			Main.user.editItemCoordsByID(this.id);
		}
	},
	
	/** invoked by a clicking event, highlights the item's label when user mouseover the item area
	* @event
	* @param {event} event
	*/
	_showHighlight: function(event) {
		this.highlight_show(false);
	},
	
	/** invoked by a clicking event, hide the highlighting of the item's label when user mouseout the item area
	* @event
	* @param {event} event
	*/
	_hideHighlight: function(event) {
		this.highlight_hide(false);
	},
	
	/**
	* highlight the item label after user clicks it.  Invoked when the itemtab is loading a new item.
	*/
	highlight_show: function(force) {
		var id = "item_label_"+this.id;
		if ($(id)) {
			$(id).setStyle({
				backgroundColor: '#fde200',
				padding: '2px',
				opacity: 0.75
			});
			
			if (force==true)
				this.force_highlight = true;
		}
	},
	
	/**
	* hide highlight the item label.  Invoked when the itemtab is loading a new item or unloading the item.
	* @param {object} olditem The previously highlighted item.
	*/
	highlight_hide: function(force) {
		if (force==false && this.force_highlight==true)
			return;
			
		var id = "item_label_"+this.id;
		if ($(id)) {
			$(id).setStyle({
				backgroundColor: 'transparent',
				opacity: 1
			});
			this.force_highlight = false;
		}
	}
}

/**
* @namespace The highlighting functionalities of the item.  
*/
Item.highlight = {
	/**
	* highlight the item label after user clicks it.  Invoked when the itemtab is loading a new item.
	*/
	show: function(item) {
		var id = "item_label_"+item.id;
		if ($(id)) {
			$(id).setStyle({
				backgroundColor: '#fde200',
				padding: '2px',
				opacity: 0.75
			});
		}
	},
	
	/**
	* hide highlight the item label.  Invoked when the itemtab is loading a new item or unloading the item.
	* @param {object} olditem The previously highlighted item.
	*/
	hide: function(olditem) {
		if (olditem!=null) {
			var id = "item_label_"+olditem.id;
			if ($(id)) {
				$(id).setStyle({
					backgroundColor: 'transparent',
					opacity: 1
				});
			}
		}
	}
}