/**

JavaScript that toggles content for articles in articlelist tile.
Initially only article headers are visible in list, but when clicking on
one article header the articles content is toggled.

Only one article is open at time.

Only some article listtemplates are affected by this functionality, and these 
listitems must have some specific div and a elements with predefined css classes.

Following listtemplates are using this:
- FAQ-articles, with listtemplate faq.php

Please add new templates/article types to this list if added.

@author: Marit Osbakk Sommer

*/

document.observe("dom:loaded", function() {
    // Make sure that this only affects articles that should be toggled (e.g. faq-articles)
    // in the articlelist. These articles has a div called .list-toggle-article printed in the
    // listtemplate
	$$('.full-articlelist div.list-toggle-item').each( function(element) {
        
	    // Add a click observer to each toggle link, used to trigger toggling.
        element.select('a.toggle').each (function(toggleLink) {
            
            toggleLink.observe('click', function(event) {
                
                // Stop the click event, as we don't want the UA to query the server
                event.stop();
                
                // Find the unique id to article list content div we want to show based on the id of 
                // the clicked link
		        var clickedLinkID = toggleLink.identify();
		        
		        // Get the div element that represents wanted article list content element
		        var toggleContentToOpenID = clickedLinkID.replace('toggle-link-','toggle-content-container');
		        
                
		        // It should only be possible to have on visble article list content element at each time.
		        // We have to marked all open links to not be open, and hide all article list content elements
		        // that may be open.
		        
		        // Go up in DOM to get all open toggle h3 links. Remove the css class that mark them open
		        // if it's not the toggle link element that is clicked on.
		        element.up().up().select('div.list-toggle-item h3.open').each( function(openLink) {
		            if(openLink.identify() != clickedLinkID) {
		                openLink.removeClassName('open');
		            }
				});
				
				// Go up in DOM to get all visible article list content elements. Make them not visible
				// if the element is not the element that represents the clicked link that should be open.
				element.up().up().select('div.toggle-content-container').each( function(contentContainer) {
				    if(contentContainer.visible() && contentContainer.identify() != toggleContentToOpenID) {
					    Effect.BlindUp(contentContainer.identify(), { duration: 0.4,transition: Effect.Transitions.linear  });
					}
				});

				// Here, we have cleaned up all contents that may have be open, and removed the open css class
				// to toggle links that perhaps had open content.
				
				// So, now we can make sure to open the content representing the clicked link element
				// We toggle the element so that we support setting the element no visible if we click
				// the same toggle link again for hiding.
				Effect.toggle(toggleContentToOpenID, 'blind', { duration: 0.4, transition: Effect.Transitions.linear });
				
				// The css class for the toggle h3 link should also be toggled , so that we can use different
				// style rules for each conditions.
				
				if($(toggleContentToOpenID).visible() == false) {
				    toggleLink.up().addClassName('open');
				}
		        
            });
        });
	    
	});
});