/**
 * Centext menu constructor. Sets menu width and display.
 * @class Handles context menu operation.
 * @constructor
 */
Context = function(app) {
	this.display = false;
	this.width = 200;
	this.items = new Object();
	this.app = app;
};

Context.prototype =  {
	/** If menu is displayed. @type Boolean */
	display : null,
	
	/** @type int */
	width : null,
	
	/** @type Object */
	items : null,
	
	/** Application object where context menu is defined. @type Joms.App */
	app : null,
	
	/** Menu position in the map in units. @type Joms.Coord */
	mapPos : null,
	
	/** Main DOM Element for the menu. @type DOMElement */
	el : null,
	
	x : null,
	y : null,
	
	coordX : null,
	coordY : null,
	
	/**
	 * Initializes context menu. Creates div elements and menu items.
	 */
	init : function() {
		this.el = gid('contextmenu');
		this.el.style.width = this.width+'px';
		this.addItem('cm-out','Oddálit mapu',
			function() { xajax_mapZoomOut(mc); }
			);
        this.addItem('cm-in','Přiblížit mapu',
			function() { xajax_mapZoomIn(mc); }
			);
        this.addItem('cm-center','Vystředit',
			function() { xajax_mapCenter(mc, this.coordX, this.coordY); }
			);
        this.addLine();
		this.addItem('cm-maxin','Maximální přiblížení',
			function() { xajax_mapCenterAndZoomMax(mc, this.coordX, this.coordY); }
			);
        this.addItem('cm-maxout','Minimální přiblížení',
			function() { xajax_mapZoomOutMax(mc); }
			);

        this.addLine();
		this.addItem('cm-print','Vytisknout tuto mapu',
			function() { openPrintWindow(); }
			);
			
		
	},
	
	/**
	 * Changes displaying of the menu. If it's shown it will be closed and vice versa.
	 *
	 * @param {int} x Coordinates where menu should be shown.
	 * @param {int} y Coordinates where menu should be shown.
	 */
	changeDisplay : function(x, y) {
		this.x = x;
		this.y = y;
		this.coordX = getS42XFromScreen(x);
		this.coordY = getS42YFromScreen(y);
		// check if we are in view port in both direction, otherwise correct the coords
		/*tmp = x+this.width;
		if (tmp > this.app.map.viewWidth) {
			x -= this.width;
			x -= 1;
		}
		else
			x += 2;*/
		
		// get height of context. we have to display div first
		if (!this.height) {
			this.el.style.display = 'block';
			this.height = this.el.offsetHeight;
			this.el.style.display = 'none';
		}
		tmp = y+this.height;
		if (tmp > getPageSize().height-20) {
			y -= this.height;
			y -= 8;
		}
		else
			y -= 4;
			
		this.el.style.left = x+'px';
		this.el.style.top = y+'px';
		this.el.style.display = 'block';
		this.display = true;
	},
	
	/**
	 * Closes the menu.
	 */
	close : function() {
		this.el.style.display = 'none';
		this.display = false;
	},
	
	/**
	 * Adds new item into menu.
	 *
	 * @param {String} id Text id of the item used in dom element as id
	 * @param {String} text Text of the item
	 * @param {Function} command Function pointer to call when item is clicked
	 * @param {String} icon Filename of the menu icon
	 */
	addItem : function(id, text, command, icon) {
		// create new li element
		var item = cel('li');
		
		item.id = id;
		item.innerHTML = '<span>'+text+'</span>';
		
		// register event for changing background only in ie
		/*if (browser.client == 'ie') {
			//events.addEvent(item,'mouseover',this.changeBg.bindAsEventListener(this), true);
			events.addEvent(item,'mouseout',this.changeBg.bindAsEventListener(this), true);
		}*/
		
		// register callback function
		events.addEvent(item,'mouseup',this.itemMouseUp.bindAsEventListener(this), true);
		
		// add new element into menu
		this.el.firstChild.appendChild(item);
		this.items[id] = command;
	},
	
	/**
	 * Changes background of the menu when mouse is over.
	 *
	 * @param {Event} event Event object
	 */
	changeBg : function(event) {
		var item = events.getElement(event);
		if (item.nodeName.toLowerCase() == 'span' || item.nodeName.toLowerCase() == 'img')
			item = item.parentNode;
		//this.app.appMenuChangeBg(item);
	},
	
	/**
	 * Adds line into menu.
	 */
	addLine : function() {
		var item = cel('li');
		item.className = 'line';
		item.innerHTML = '<img src="../images/empty.gif" alt="dot" width="1" height="1" />';
		this.el.firstChild.appendChild(item);
	},
	
	/**
	 * Hides menu item.
	 *
	 * @param {String} id Id of item to hide
	 */
	hideItem : function(id) {
		var tmp;
		if (tmp = gid(id)) {
			tmp.style.display = 'none';
			this.height = '';
		}
	},
	
	/**
	 * Shows menu item.
	 *
	 * @param {String} id Id of item to show
	 */
	showItem : function(id) {
		var tmp;
		if (tmp = gid(id)) {
			tmp.style.display = 'block';
			this.height = '';
		}
	},
	
	/**
	 * Does a callback when item is clicked.
	 *
	 * @param {Event} event Event object
	 */
	itemMouseUp : function(event) {
		var item = events.findElement(event,'li');
		if (!item || !item.id) return;
		this.x = 0;
		this.y = 0;
		this.items[item.id].call(this);
		this.close();
		events.stopEvent(event);
	}
};