// OLC behaviour. 
//  Starting this as an alternative to all the inline script being emmited by user controls.
//  The idea is to define CSS classes that should get certain behaviour attached when the page loads
//
//      Required: Prototype 1.6

OLC = this.OLC || {};
OLC.load = function() {
    Event.observe(window, 'load', OLC.addBehaviours);
};
    
OLC.addBehaviours = function() {
    OLC.addExpandCollapseEvents();
};
    
OLC.addExpandCollapseEvents = function() {
    $$(".expandCollapse").each(
        function (element) {
            Event.observe(element, 'click', OLC.Behaviours.expandCollapse);
        }
    )
};
    
OLC.Behaviours = {

    // Will toggle the visibility of an element with the same id as the event source plus "_target". 
    //    e.g.  <h2 id="programme123" class="expandCollapse">some programme titles</h2>
    //          <p id="programme123_target" class="collapsed">expanded content....</p>
    
    // To account for the <h2 class="collapsed"><a href="#">title</a></h2> construction that is in use already accross OLC
    //   the source element for toggling the expanded/collapsed class will be taken to be the parent if the source element 
    //   does not have either class
    expandCollapse : function(event) {
        var source = Event.element(event);
        var target = $(source.id + "_target");
        if (target) Element.toggle(target);
        
        if (!Element.hasClassName(source, "collapsed") && !Element.hasClassName(source, "expanded")) {
            source = source.parentNode;
        }                
        Element.toggleClassName(source,"expanded");
        Element.toggleClassName(source,"collapsed");        
        event.stop();
    }
};

OLC.load();