/*
* AccordionMenu - mootools accordion menu
*
* Usage: From "Joomla admin panel >> Module Manager >> under Module Advanced Parameters" assign a "Menu Tag ID" for your menu. Under "Module Parameters" set "Always show sub-menu Items" to "yes"
*
* Use the previous id as first argument for function accordionMenu()
*
* Example:
*
* insert following code in the head section of the template index.php
*
<script type="text/javascript">
window.addEvent('domready', function(){
accordionMenu(
   "mainmenu", // Menu Tag ID (this id is assigned to menu parent ul tag)
   "<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/images/expand.png", //path to image used to expand menu item
   "<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/images/collapse.png", //path to image used to collapse menu item
   {duration:400, transition:Fx.Transitions.Quart.easeOut}, // (optional argument) custom accordion options to override defaults, use null if you want to set next argument without changing this
   700 // (optional argument) hover delay in milliseconds over "parent menu item" to open its sublevels, default is 500
);
</script>

*
* Use CSS to style menu items for different levels
*
* v1.0 - by ah72, July 2008
*
*/

window.addEvent('domready', function()
{
	accordionMenu(
	    "accordion_left",
	    "templates/jp_shop/images/expand.gif", 
	    "templates/jp_shop/images/collapse.gif",
	    {duration:400, transition:Fx.Transitions.Quart.easeOut},
	    700);

	accordionMenu(
	    "accordion_right",
	    "templates/jp_shop/images/expand.gif", 
	    "templates/jp_shop/images/collapse.gif",
	    {duration:400, transition:Fx.Transitions.Quart.easeOut},
	    700);
});


function accordionMenu(menuId, srcExpandImage, srcCollapseImage, accOptions, accHoverDelay)
{
	if ($(menuId))
	{
	
	    // getting accordion parent items ("li" tags with class "parent")
	    $(menuId).accParentItems = [];
	
	    for(var i = 0; i < $(menuId).childNodes.length; i++) {
	
	        if($(menuId).childNodes[i].className.indexOf('parent') >= 0){
	            $(menuId).accParentItems.push($(menuId).childNodes[i]);
	        }
	    }
	
	
	    $(menuId).accTogglers = [];
	    $(menuId).accElements = [];
	    var startItem = -1;
	
	    for(var i = 0; i < $(menuId).accParentItems.length; i++) {
	
	        // creating accordion togglers
	        var accToggler = document.createElement("img");
	
	        accToggler.setAttribute("title","Expand");
	        accToggler.setAttribute("src",srcExpandImage);
	
	        $(menuId).accParentItems[i].insertBefore(accToggler, $(menuId).accParentItems[i].firstChild);
	
	
	        // accordion elements
	        $(menuId).accElements.push($(menuId).accParentItems[i].getElementsByTagName('ul')[0]);
	        $(menuId).accTogglers.push(accToggler);
	
	        // searching for active menu item to make the accordion show its sub-items when page loads
	        if ( $(menuId).accParentItems[i].className.indexOf('active') >= 0 ) {
	            startItem = i;
	        }
	   }
	
	    //create our Accordion instance
	    if ( $(menuId).accParentItems.length > 0 )
	    {
	        $(menuId).Accordion = new Accordion($(menuId).accTogglers, $(menuId).accElements, $merge({
	            opacity: false,
	            alwaysHide: true,
	            show: startItem,
	            duration: 600,
	            transition: Fx.Transitions.Bounce.easeOut,
	
	            onActive: function(toggler, element){
	                element.parentNode.parentNode.setStyle('height', 'auto');
	                toggler.setAttribute("src", srcCollapseImage);
	                toggler.setAttribute("title","Collapse");
	            },
	            onBackground: function(toggler, element){
	                element.parentNode.parentNode.setStyle('height', 'auto');
	                element.setStyle('height', element.offsetHeight+'px');
	                toggler.setAttribute("src", srcExpandImage);
	                toggler.setAttribute("title","Expand");
	            }
	
	            }, accOptions)
	
	        );
	    }
	
	    accTimer = null;
	    if (!accHoverDelay)
	    	var accHoverDelay = 500;
	
	    for (var i = 0; i < $(menuId).accParentItems.length; i++) {
	
	        eval("function accOnclickFunc(){return function(){ if( $('"+menuId+"').accElements["+i+"].style.height == '0px' ) { $('"+menuId+"').Accordion.display("+i+") }}}");
	        $(menuId).accParentItems[i].firstChild.nextSibling.onclick = accOnclickFunc();
	    }
	
	
	    for (var i = 0; i < $(menuId).accElements.length; i++)
	    {
	        $(menuId).accElements[i].setAttribute('id', menuId+'_'+i);
	        accordionMenu(menuId+'_'+i, srcExpandImage, srcCollapseImage, accOptions, accHoverDelay)
	    }
	
	}
}
