/* USE EXAMPLE

{* javascript *}
var ddMenu = new DerwiDropDownMenu({
	topMenuSelector: 'a',
	topMenuDivId: 'topMenu',
 	smenuSelector: '.submenu',
	jsHoverClass: 'jshover',
	delay: 300
});

	 

index.tpl
{* TOP MENU *}
<div id="topMenu">
 <ul>
	{foreach name="topMenu" item=menu from=$data.menu[1]}
		<li id="tm_{$menu.id}" class="menu_{$menu.id}{if $pages[0].id==$menu.id} selected{/if}{if $smarty.foreach.topMenu.last} last{/if}"><a href="/{$menu.address}.html" title="{$menu.name|escape:'quotes'}">
			&nbsp;
		</a></li>
	{/foreach}
 </ul>
</div>

{* SUBMENU NA DOLE STRONY *}
<div class="submenuBox">
{foreach name="topMenu" item=menu from=$data.menu[1]}
{if $menu.submenu|is_array}
 <div class="submenu" id="submenu_{$menu.id}">
  <ul>
 {foreach item="smenu" from=$menu.submenu}
	<li><a href="/{$menu.address}/{$smenu.address}.html" title="{$smenu.name|escape:'quotes'}">{$smenu.name}</a></li>
 {/foreach}
  </ul>
 </div>
{/if}
{/foreach}
</div>


main.css
.submenu{
	width: 195px;
	background: #401641;
	position: absolute;
	top: 206px;
	left: 600px;
	display: none;
	padding: 15px 0px;
	z-index: 100;
}

.submenu ul{
	margin: 0px;
	padding: 0px 0px 0px;
	list-style: none;
}

.submenu li a:link, .submenu li a:visited{
	display: block;
	height: 23px;
	text-decoration: none;
	background: #401641;
	padding: 3px 30px 0px;
	color: #ffffff;
	text-transform: lowercase;
}

.submenu li a:active, .submenu li a:hover{
	background: #c50481 url('/images/submenuBg.gif') repeat-x left top;
}


*/

var DerwiDropDownMenu = new Class({
	initialize: function(options){
		this.setOptions({
			smenuSelector: '.submenu',
			topMenuDivId: 'topMenu',
			topMenuSelector: 'a',
			topMenuPattern: /menu_(\d+)/i,
			jsHoverClass: 'jshover',
			delay: 300
		}, options);
		
		this.smenuSelector = this.options.smenuSelector;
		this.topMenuDivId = this.options.topMenuDivId;
		this.topMenuSelector = this.options.topMenuSelector;
		this.topMenuPattern = this.options.topMenuPattern;
		this.jsHoverClass = this.options.jsHoverClass;
		this.delay = this.options.delay;
		
		this.czasomierz = null;
 
		this.slideDiv = this.options.slideDiv;
		this.slideDivEl = $(this.slideDiv);
		
		var topMenuElements = $(this.topMenuDivId).getElements(this.topMenuSelector);
		
		this.topMenuElements = new Array();
		for(i=0; i<topMenuElements.length; i++){
			var a_menu = topMenuElements[i];
			var paramArray = this.topMenuPattern.exec(a_menu.getParent().getProperty('class'));
		 	var id = paramArray[1];
		 	
			if($('submenu_'+id)){
		 	 	var pos = a_menu.getPosition();
		 	 	$('submenu_'+id).setPosition({x: pos.x-16, y: pos.y+50});
		 	 	
		 	 	$('submenu_'+id).addEvent('mouseover', (function(id){
			 	 	clearTimeout(this.czasomierz);
			 	 	this.showSubmenu(id);
			 	}).bind(this, id));
			 	 
			 	$('submenu_'+id).addEvent('mouseout', (function(id){
			 	 	this.czasomierz = (function(id){
				 		this.hideSubmenu(id);
				 	}).bind(this, id).delay(this.delay);
			 	}).bind(this, id));
			 	
			 	a_menu.addEvent('mouseover', (function(id){
		 	 	 	clearTimeout(this.czasomierz);
			 	 	this.showSubmenu(id);
			 	}).bind(this, id));
			 	 
			 	a_menu.addEvent('mouseout', (function(id){
			 	 	this.czasomierz = (function(id){
				 		this.hideSubmenu(id);
				 	}).bind(this, id).delay(this.delay);
			 	}).bind(this, id));
		 	}
			this.topMenuElements[id] = a_menu;
		 
		}
	},
	
	
	hideSubmenu: function(id){
	 	this.topMenuElements[id].getParent().removeClass(this.jsHoverClass);
	 	if($('submenu_'+id)){
	 		$('submenu_'+id).setStyle('display', 'none');
	 	}
	},
 
 	showSubmenu: function(id){
	 	$(this.topMenuDivId).getElements(this.topMenuSelector).getParent().removeClass(this.jsHoverClass);
		this.topMenuElements[id].getParent().addClass(this.jsHoverClass);
		$$(this.smenuSelector).setStyle('display', 'none');
	 	if($('submenu_'+id)){
	 		//var pos = $$(this.topMenuDiv+' .border_'+id)[0].getPosition();
	 		//$('submenu_'+id).setPosition({x: pos.x+7, y: pos.y+37});
	 		$('submenu_'+id).setStyle('display', 'block');
	 	}
	}
});

DerwiDropDownMenu.implement(new Options);