/** 
 * menubar-1.0.js
 * Componente para manejo de menus.
 * Creado en Julio de 2010.
 * @author Fernando Martinez Valdovinos.
 * @author fernando.martinez@esmas.net
 * @author Esmas, todos los derechos reservados.
 * @version 1.0
 */

var MenuBar = new Class({
	initialize: function(id,options) {
		this.id = id;
		this.menus = new Array();
		this.classStyle = null;
		if($defined(options)) {
			this.menus = (options.menus) ? options.menus : new Array();
			this.classStyle = (options.classStyle) ? options.classStyle : null;
		}
	},
	addMenuItem: function(menuItem) {
		this.menus.include(menuItem);
	},
	deleteMenuItem: function(idMenuItem) {
		var menuItem = this.getMenuItem(idMenuItem);
		if($chk(menuItem)) {
			this.menu.erase(menuItem);
			return true;
		}
		return false;
	},
	getMenuItem: function(idMenuItem) {
		this.menu.each(function(menuItem) {
			if(menuItem.id == idMenuItem)
				return menuItem;
		},this);
		return null;
	},
	getMenuBar: function() {
		var menuBar = new Element('div',{id: this.id});
		
		this.menus.each(function(menu) {
			var menuItem = new Element('div',{id: menu.submenuId,styles: {height: 0}});
			if(menu.isCloseButton()) {
				menuItem.adopt(new Element('div',{
								styles: {position: "absolute", "text-align": "right", left: "1007px",top: "1px"}
							   }).adopt(menu.getCloseButton()));
			}
			menuItem.adopt(menu.getMenu());
			menuBar.adopt(menuItem);
			if($chk(menu.getClass())) {
				menuItem.addClass(menu.getClass());
			}
			
			menu.setFX(new Fx.Tween(menuItem,{
				property: 'height',
				transition: Fx.Transitions.Bounce.easeOut,
				link: 'chain',
				unit: 'px'
			}));
			
		},this);
		
		if($chk(this.classStyle))
			menuBar.addClass(this.classStyle);
		
		return menuBar;
	},
	doTween: function(menuItem) {
		var firstItem = true;
		this.menus.each(function(menu) {
			if(menu.id != menuItem.id && menu.getStatus() == 1) {
				menu.items.each(function(item) {
					$(item.id).setStyle("display","none");
					$(item.id).getParent().setStyle("border-left", "none");
				});
				if(menu.isCloseButton()) {
					menu.hiddeButton();
				}
				menu.getFX().start(menu.getMaxHeight(),0);
				menu.setStatus(0);
			}
			else if(menu.id == menuItem.id) {
				if(menu.getStatus() == 0) {
					firstItem = true;
					menu.items.each(function(item) {
						$(item.id).setStyle("display","");
						if(!firstItem)
							$(item.id).getParent().setStyle("border-left", "3px solid #FFFFFF");
						if(firstItem == true)
							firstItem = false;
					});
					if(menu.isCloseButton()) {
						menu.showButton();
					}
					menu.getFX().start(0,menu.getMaxHeight());
					menu.setStatus(1);
				}
				else {
					menu.items.each(function(item) {
						$(item.id).setStyle("display","none");
						$(item.id).getParent().setStyle("border-left", "none");
					});
					if(menu.isCloseButton()) {
						menu.hiddeButton();
					}
					menu.getFX().start(menu.getMaxHeight(),0);
					menu.setStatus(0);
				}
			}
		});
	}
});

var Menu = new Class({
	initialize: function(id,menuBar,options) {
		this.id = id;
		this.menuBar = menuBar;
		this.submenuId = "sbmnu_" + this.id;
		this.status = 0;
		this.items = new Array();
		this.fxObject = null;
		this.heightLine = 100;
		this.itemsLine = 10;
		this.closeButton = false;
		this.closeButtonImg = null;
		var menu = this;
		if($defined(options)) {
			this.items = (options.items) ? options.items : new Array();
			this.link = (options.link) ? options.link : null;
			this.classStyle = (options.classStyle) ? options.classStyle : null;
			this.style = (options.style) ? options.style : null;
			this.heightLine = (options.heightLine) ? options.heightLine : 100;
			this.itemsLine = (options.itemsLine) ? options.itemsLine : 10;
			this.closeButton = (options.closeButton) ? options.closeButton : false;
			if(this.closeButton == true) {
				this.closeButtonImg = new Element('img',{
											id: menu.submenuId + "_closeBtn",
											src: "http://i2.esmas.com/tvolucion/coke20/js/menubar-1.0/img/close_icon.png",
											border: "0",
											height: "14px",
											styles: {cursor: "pointer"}
										});
				$(this.closeButtonImg).addEvent("click",function() {
					menu.doTween();
				});
			}
		}
		$(this.id).addEvent("click",function() {
			menu.doTween();
		});
	},
	setStatus: function(status) {
		this.status = status;
	},
	getStatus: function() {
		return this.status;
	},
	setHeightLine: function(heightLine) {
		this.heightLine = heightLine;
	},
	getHeightLine: function() {
		return this.heightLine;
	},
	setItemsLine: function(itemsLine) {
		this.itemsLine = itemsLine;
	},
	getItemsLine: function() {
		return 	this.itemsLine;
	},
	getMaxHeight: function() {
		return this.getLines()*this.getHeightLine();	
	},
	doTween: function() {
		this.menuBar.doTween(this);
	},
	setLink: function(link) {
		this.link = link;
	},
	getLink: function() {
		return this.link;
	},
	setCloseButton: function(closeButton) {
		this.closeButton = closeButton;
	},
	isCloseButton: function() {
		return this.closeButton;
	},
	getCloseButton: function() {
		return this.closeButtonImg;
	},
	addItem: function(item) {
		this.items.include(item);
	},
	deleteItem: function(itemId) {
		var item = this.getMenuItem(itemId);
		if($chk(item)) {
			this.items.erase(item);
			return true;
		}
		return false;
	},
	getItem: function(itemId) {
		this.items.each(function(item) {
			if(item.id == itemId)
				return item;
		},this);
		return null;
	},
	setClass: function(classStyle) {
		this.classStyle = classStyle;
	},
	getClass: function() {
		return this.classStyle;
	},
	setStyle: function(style) {
		this.style = style;
	},
	getStyle: function() {
		return this.style;
	},
	setFX: function(fxObject) {
		this.fxObject = fxObject;
	},
	getFX: function() {
		return this.fxObject;
	},
	getLines: function() {
		if((this.items.length % this.itemsLine) > 0)
			return (parseInt(this.items.length / this.itemsLine) + 1);
		return parseInt(this.items.length / this.itemsLine);
	},
	hiddeButton: function() {
		$(this.submenuId + "_closeBtn").setStyle('display','none');
	},
	showButton: function() {
		$(this.submenuId + "_closeBtn").setStyle('display','');
	},
	getMenu: function() {
		
		var menu = new Element('ul');
		
		var menuItem = new Element('li');
		var submenuLine = new Element('ul');
		
		var count = 0;
		
		this.items.each(function(item) {
			if(count==0)
				submenuLine.adopt(new Element('li',{styles:{"margin-right": "5px"}}).adopt(item.getMenuItem()));
			else
				submenuLine.adopt(new Element('li',{styles: {"border-left": "3px solid #FFFFFF", "padding-left": "5px", "padding-right": "5px"}}).adopt(item.getMenuItem()));
			count++;
			if(count == this.itemsLine) {
				menuItem.adopt(submenuLine);
				menu.adopt(menuItem);
				count = 0;
				menuItem = new Element('li',{styles: {"margin-top": "10px"}});
				submenuLine = new Element('ul');
			}
		},this);
		
		if((this.items.length % this.itemsLine) > 0) {
			menuItem.adopt(submenuLine);
			menu.adopt(menuItem);
		}
		
		return menu;
	}
});

var MenuItem = new Class({
	initialize: function(id,label,link,options) {
		this.id = id;
		this.label = label;
		this.link = link;
		this.url = this.link.url;
		this.target = (this.link.target) ? this.link.target : "_self";
	},
	setLabel: function(label) {
		this.label = label;
	},
	getLabel: function() {
		return this.label;
	},
	setLink: function(link) {
		this.link = link;
	},
	getLink: function() {
		return this.link;
	},
	setClass: function(classStyle) {
		this.classStyle = classStyle;
	},
	getClass: function() {
		return this.classStyle;
	},
	setStyle: function(style) {
		this.style = style;
	},
	getStyle: function() {
		return this.style;
	},
	getMenuItem: function() {
		var item = new Element('a',{
			id: this.id,
			href: this.url,
			target: this.target,
			//html: '  ' + this.label + '  ',
			html: this.label,
			styles: {display: 'none'},
			onmouseover:'rollSubTexto(\''+this.id+'\')',
			onmouseout: 'outSubTexto(\''+this.id+'\')'
		});
		
		return item;
	}
});

var FxMenu = new Class({
	Extends: Fx,
	initialize: function(menuItem,menuBar) {
		this.parent($(menuItem.id),{
						property: 'height',
						transition: Fx.Transitions.Bounce.easeOut,
						link: 'chain',
						unit: 'px'
					});
	},
	onChainComplete: function() {
		//console.log(menuItem.id);
	}
});

function rollSubTexto(obj){
	//obj.style.color = '#333';
	//obj.style.textDecoration = 'underline';
	//obj.style.fontWeight = 'bold';
	document.getElementById(obj).style.textDecoration = 'underline';	
	document.getElementById(obj).style.fontWeight = 'bold';
}

function outSubTexto(obj){
	//obj.style.color = '#fff';
	//obj.style.textDecoration = 'none';
	//obj.style.fontWeight = 'normal';
	document.getElementById(obj).style.textDecoration = 'none';	
	document.getElementById(obj).style.fontWeight = 'normal';
}