// JavaScript Document

//var Menu = Class.create();

function renderDark() {
	if(this.className.indexOf('darkItem') == -1) {
		this.className += ' darkItem';
	}
}

function removeDark() {
	if(this.className.indexOf('darkItem') != -1) {
		this.className = this.className.replace('darkItem', '');
	}
}


var Menu = Class.create({
	initialize: function(menuBar, menuBody, classItem, options) {
	
		this.handle		= $(menuBar);
		this.menu		= $(menuBody);
		this.itemClass	= classItem;
		this.classItems	= Element.select($(menuBody), '.'+classItem);
		this.orgLabel	= $(menuBar).innerHTML;
		this.openStatus	= false;
		
		this.menu.style.display = 'none';
		
		/*create overlay*/
		if(Menu.objMenuOverlay == 'undefined') {
			Menu.objMenuOverlay = document.createElement("div");
			Menu.objMenuOverlay.setAttribute('id','menuOverlay');			
			var objBody = document.body;
			objBody.appendChild(Menu.objMenuOverlay);
		}
		//var temp = ;
		/*event listener*/
		//this.handle.observe('click', this.toggleMenu.bindAsEventListener(this));
		this.handle.onclick = this.toggleMenu.bindAsEventListener(this);
		this.refreshItem();
		
		this.initialized = true;
	},
	
	toggleMenu: function() {
		if(!this.isOpen) {
			if(typeof Menu.objMenuOverlay.onclick == 'function') {
				Menu.objMenuOverlay.onclick();
			}
			this.openMenu();
		}
		else {
			this.closeMenu();
		}
		
		return false;
	},
	
	openMenu: function() {		
		if( !this.isOpen) {
			this.menu.show();
			Menu.openNum++;
			this.isOpen = true;
			var arrayPageSize = getPageSize();
			Menu.objMenuOverlay.style.width=(arrayPageSize[0])+"px";
			Menu.objMenuOverlay.style.height=(arrayPageSize[1])+"px";
			Element.show(Menu.objMenuOverlay);
			//this.menu.style.position = 'absolute';
			Menu.objMenuOverlay.onclick = this.closeMenu.bindAsEventListener(this);
		}
	},
	
	closeMenu: function() {
		if(this.isOpen) {
			this.menu.hide();
			Menu.openNum--;
			this.isOpen = false;
			if(Menu.openNum == 0) {
				Element.hide(Menu.objMenuOverlay);
			}
		}
	},
	
	selectMenu: function(oMenuItem) {
		this.handle.innerHTML = oMenuItem.innerHTML;
		this.closeMenu();

		return false;
	},
	
	resetLabel: function() {
		this.handle.innerHTML = this.orgLabel;
	},
	
	refreshItem: function(refreshOptions) {
		for (var i = this.classItems.length-1; i>=0; i-- ) {
			this.classItems[i].stopObserving('click', this.selectMenu.bind(this, this.classItems[i]));
		}
		this.classItems	= Element.select(this.menu, '.'+this.itemClass);
		for (var i = this.classItems.length-1; i>=0; i-- ) {
			//this.classItems[i].observe('click', this.selectMenu.bind(this, this.classItems[i]));
			this.classItems[i].onclick = this.selectMenu.bind(this, this.classItems[i]);
			this.classItems[i].observe('mouseover', renderDark.bindAsEventListener(this.classItems[i]));
			this.classItems[i].observe('mouseout', removeDark.bindAsEventListener(this.classItems[i]));
			if(refreshOptions && refreshOptions.events) {
				var arrEvents = refreshOptions.events;
				for(var eventName in arrEvents) {
					Event.observe(this.classItems[i], eventName, arrEvents[eventName].bind(this.classItems[i]));
				}
			}
		}
	}
});

Menu.objMenuOverlay = 'undefined';
Menu.openNum = 0;



var FilterItem = Class.create({
	initialize : function(arrHandler, arrItem, options) {
		this.handlers = new Array();
		this.targetItems = new Array();	
		this.options = options? options : {};	
		
		if(arrHandler.length != arrItem.length) {return null;}
		this.len = arrHandler.length;
		for(var i=0; i<=this.len-1; i++) {
			this.handlers.push( (typeof arrHandler[i] == 'string')? $(arrHandler[i]) : arrHandler[i]);
			this.targetItems.push( (typeof arrItem[i] == 'string')? $(arrItem[i]) : arrItem[i]);
			if(this.handlers[i]) {
				this.handlers[i].onclick = returnFalse;
				this.handlers[i].observe('click', this.filter.bind(this, i));
			}
		}
	},
	
	filter : function(curIndex) {
		for(var i = this.len-1; i>=0; i--) {
			this.targetItems[i].style.display = 'none';
		}
		this.targetItems[curIndex].style.display = 'block';
	}
})


var FilterItemTab = Class.create(FilterItem, {
	filter : function(curIndex) {
		for(var i = this.len-1; i>=0; i--) {
			this.targetItems[i].style.display = 'none';
			var thisLi = this.handlers[i].tagName == 'LI' ? this.handlers[i] : Element.up(this.handlers[i], 'li');
			Element.removeClassName(thisLi, 'tabon');
			Element.addClassName(thisLi, 'taboff');
		}
		this.targetItems[curIndex].style.display = 'block';
		var thisLi = this.handlers[curIndex].tagName == 'LI' ? this.handlers[curIndex] : Element.up(this.handlers[curIndex], 'li');
		Element.removeClassName(thisLi, 'taboff');
		Element.addClassName(thisLi, 'tabon');
	}
});