/*
UvumiTools Dropdown Menu v1.1.2 http://uvumi.com/tools/dropdown.html

Copyright (c) 2009 Uvumi LLC
*/
var UvumiDropdown = new Class({ Implements: Options, options: { clickToOpen: false, openDelay: 150, closeDelay: 500, duration: 250, link: 'cancel', transition: Fx.Transitions.linear, mode: 'horizontal' }, initialize: function(menu, options) { this.menu = menu; this.setOptions(options); if (this.options.mode != 'horizontal' && this.options.mode != 'vertical') { this.options.mode = 'horizontal' } window.addEvent('domready', this.domReady.bind(this)) }, domReady: function() { this.menu = $(this.menu); if (!$defined(this.menu)) { return false } if (this.menu.get('tag') != 'ul') { this.menu = this.menu.getElement('ul'); if (!$defined(this.menu)) { return false } } if (this.menu.getStyle('direction') == 'rtl' || $(document.body).getStyle('direction') == 'rtl') { this.rtl = true; if (Browser.Engine.trident && $(document.body).getStyle('direction') == 'rtl') { this.menu.getParent().setStyle('direction', 'ltr'); this.menu.setStyle('direction', 'rtl') } } this.menu.setStyles({ visibility: 'hidden', display: 'block', overflow: 'hidden', height: 0 }); this.createSubmenu(this.menu); if (this.options.mode == 'horizontal') { this.menu.getChildren('li').setStyles({ 'float': (this.rtl ? 'right' : 'left'), display: 'block', top: 0 }); var clear = new Element('li', { html: " ", styles: { clear: (this.rtl ? 'right' : 'left'), display: (Browser.Engine.trident ? 'inline' : 'block'), position: 'relative', top: 0, height: 0, width: 0, fontSize: 0, lineHeight: 0, margin: 0, padding: 0} }).inject(this.menu) } else { this.menu.getChildren('li').setStyles({ display: 'block', top: 0 }) } this.menu.setStyles({ height: 'auto', overflow: 'visible', visibility: 'visible' }); this.menu.getElements('a').setStyle('display', (Browser.Engine.trident ? 'inline-block' : 'block')) }, createSubmenu: function(ul) { var LIs = ul.getChildren('li'); var offset = 0; LIs.each(function(li) { li.setStyles({ position: 'relative', display: 'block', top: -offset, zIndex: 1 }); offset += li.getSize().y; var innerUl = li.getFirst('ul'); if ($defined(innerUl)) { ul.getElements('ul').setStyle('display', 'none'); if (ul == this.menu && this.options.mode == 'horizontal') { li.addClass('submenu-down'); var x = 0; var y = li.getSize().y; this.options.link = 'cancel'; li.store('animation', new Fx.Elements($$(innerUl, innerUl.getChildren('li')).setStyle('opacity', 0), this.options)) } else { li.addClass('submenu-left'); var x = li.getSize().x - (this.rtl && !Browser.Engine.trident ? 2 : 1) * li.getStyle('border-left-width').toInt(); var y = -li.getStyle('border-bottom-width').toInt(); this.options.link = 'chain'; li.store('animation', new Fx.Elements($$(innerUl, innerUl.getChildren('li')).setStyle('opacity', 0), this.options)); offset = li.getSize().y + li.getPosition(this.menu).y } innerUl.setStyles({ position: 'absolute', top: y, opacity: 0 }); ul.getElements('ul').setStyle('display', 'block'); if (this.rtl) { innerUl.setStyles({ right: x, marginRight: -x }) } else { innerUl.setStyles({ left: x, marginLeft: -x }) } this.createSubmenu(innerUl); if (this.options.clickToOpen) { li.addEvent('mouseenter', function() { $clear(li.retrieve('closeDelay')) } .bind(this)); li.getFirst('a').addEvent('click', function(e) { e.stop(); $clear(li.retrieve('closeDelay')); this.showChildList(li) } .bind(this)) } else { li.addEvent('mouseenter', function() { $clear(li.retrieve('closeDelay')); li.store('openDelay', this.showChildList.delay(this.options.openDelay, this, li)) } .bind(this)) } li.addEvent('mouseleave', function() { $clear(li.retrieve('openDelay')); li.store('closeDelay', this.hideChildList.delay(this.options.closeDelay, this, li)) } .bind(this)) } }, this) }, showChildList: function(li) { var ul = li.getFirst('ul'); var LIs = $$(ul.getChildren('li')); var animation = li.retrieve('animation'); if (li.getParent('ul') != this.menu || this.options.mode == 'vertical') { animation.cancel(); var anim = { 0: { opacity: 1 }, 1: { opacity: 1} }; if (this.rtl) { anim[0]['marginRight'] = 0 } else { anim[0]['marginLeft'] = 0 } animation.start(anim); var animobject = {} } else { var animobject = { 0: { opacity: 1}} } LIs.each(function(innerli, i) { animobject[i + 1] = { top: 0, opacity: 1} }); li.setStyle('z-index', 99); animation.start(animobject) }, hideChildList: function(li) { var animation = li.retrieve('animation'); var ul = li.getFirst('ul'); var LIs = $$(ul.getChildren('li')); var offset = 0; var animobject = {}; LIs.each(function(innerli, i) { animobject[i + 1] = { top: -offset, opacity: 0 }; offset += innerli.getSize().y }); li.setStyle('z-index', 1); if (li.getParent('ul') != this.menu || this.options.mode == 'vertical') { animobject[1] = null; animation.cancel(); animation.start(animobject); var anim = { 0: { opacity: 0 }, 1: { opacity: 0} }; if (this.rtl) { anim[0]['marginRight'] = -ul.getSize().x } else { anim[0]['marginLeft'] = -ul.getSize().x } animation.start(anim) } else { animobject[0] = { opacity: 0 }; animation.start(animobject) } } });