// PopupMenu 클래스
var GlobalMenu = Class.create();

GlobalMenu.prototype = {
	
	initialize: function(hotspot, menu, overImageUrl) {
		this.hotspotElem = $(hotspot);
		this.menuElem = $(menu);
		this.imageCache = new Array();
		this.imageCache[0] = new Image();
		this.imageCache[1] = new Image();
		this.imageCache[0].src = this.hotspotElem.src;
		this.imageCache[1].src = overImageUrl;
		
		this.hideMenu();			
		
		// 핫스팟 엘리컨트에 onclick 이벤트 핸들러 지정
		Event.observe(this.hotspotElem, "mouseover", 
			this.onClickHotSpot.bindAsEventListener(this));
	},
	
	onClickHotSpot: function(event)
	{
		// 메뉴 토글
		this.showMenu();
	},
	
	onMouseMove: function(event)
	{
		if (this.menuShown())
		{
			// 커서가 메뉴리스트 영역을 벗어난 경우
			if (!Position.within(this.menuElem, Event.pointerX(event), Event.pointerY(event)) &&
					!Position.within(this.hotspotElem, Event.pointerX(event), Event.pointerY(event))
			)
			{
				this.hideMenu();
			}
		}
	},
	
	menuShown: function()
	{
		return this.menuElem.visible();
	},
	
	showMenu: function()
	{
		this.hotspotElem.src = this.imageCache[1].src;
		
		pos = Position.positionedOffset(this.hotspotElem);
		Element.setStyle(this.menuElem, 
			{
				"left": pos[0] + "px"
			}
		);

		this.menuElem.show();
		
		this.onMouseMoveHandler = this.onMouseMove.bindAsEventListener(this);
		Event.observe(document, "mousemove", this.onMouseMoveHandler);
	},
	
	hideMenu: function()
	{
		if (this.onMouseMoveHandler)
		{
			Event.stopObserving(document, "mousemove", this.onMouseMoveHandler);
		}
		
		this.menuElem.hide();
		this.hotspotElem.src = this.imageCache[0].src;
	}
};