// Launch init() as soon ad  DOM loads
Event.observe(document, 'dom:loaded', init);

// init() either contains or calls all JS needed throughout the site
function init() {
// 1 - Necessary layout adjustment for zoo templates {{{1
   /* if($$('BODY>DIV.zoo').length > 0) {
        var h = [ 
            $$('.sidebar')[0].getHeight(), 
            $$('.mainbar')[0].getHeight()
        ].max();

        $$('.content-wrap')[0].setStyle({height: h + 40 + 'px' }); 
    };*/

// 2 - Bio expand/collapse functionality on CZS leadership page {{{1
    if($$('.leadership').length > 0) {
        Bio = new Object();
        Bio.toggle = function(ev) {
            ev.stop();
            var biobox = Event.findElement(ev, 'LI');
            if (biobox.hasClassName('no-description')) return true;
            if (!biobox.hasClassName('bio')) throw new Error('Not a Bio box')
            if (biobox.hasClassName('expanded')) Bio.collapse(biobox);
            else if (biobox.hasClassName('collapsed')) Bio.expand(biobox);
        }
        Bio.expand = function(biobox) {
            biobox.removeClassName('collapsed');
            biobox.addClassName('expanded');
			P7_equalCols2(0,'mainbar','p','sidebar','p');
            return true;
        }
        Bio.collapse = function(biobox) {
            biobox.removeClassName('expanded');
            biobox.addClassName('collapsed');
			P7_equalCols2(0,'mainbar','p','sidebar','p');
            return true;
        }
        var biolinks = $$('.bio .title');
        biolinks.each( function(biolink) {
            Event.observe(biolink, 'click', Bio.toggle);
        });
    }

// 3 - Tooltips {{{1

   Tooltip = new Object();

    Tooltip.registerTooltips = function(arr) {
        arr.each(function(t) {
            t.elem.observe( 'mouseover', 
                Tooltip.handleEvent.bindAsEventListener(this, t) ); 
            t.elem.observe( 'mouseout', 
                Tooltip.handleEvent.bindAsEventListener(this, t) ); 
        });
    }
    Tooltip.handleEvent = function(ev, data) {
        ev.stop();
        var t = data.tooltip;
        if (ev.type == 'mouseover') {
            if (t.hasClassName('visible')) return false;
            if (data.type == 'term') 
                Tooltip.setContent(data);
            Tooltip.setPosition(data);
            t.addClassName('visible');
        }
        else if (ev.type == 'mouseout') {
            t.removeClassName('visible');
        }
    }
    Tooltip.setPosition = function(obj) {} // need to be defined for each use
                                            //of the tooltip

    // 3.1 Toolip code specific to animal exhibit thumbnails 
    if($$('.animal-exhibit-list').length > 0) {

        // Define tooltip positioning for animal exhibit thumbnails
        Tooltip.setPosition = function(obj) {
            var elem_coords = obj.elem.positionedOffset();
            var elem_width = obj.elem.getWidth();
            var tooltip_height = obj.tooltip.getHeight();
            obj.tooltip.setStyle({ 
                left: elem_coords[0] + 'px',
                top: elem_coords[1] - tooltip_height + 'px'
            });
        }

        // Populate tooltips object
        var tooltips = new Array();
        $$('.animal-exhibit-list LI').each( function(el) {
            var tooltip = $$('.tooltip.' + el.className)[0];
            tooltips.push( { elem: el, type: 'exhibit', tooltip: tooltip } ); 
        });
        // Add event listeners
        Tooltip.registerTooltips(tooltips);
    };
    // 3.1 Toolip code specific to definition terms 
    if($$('.term').length > 0) {

        // add a blank tooltip
        $$('.main-content')[0].insert(
            '<div class="tooltip tooltip-term">'
            +'<div class="tooltip-top"></div>'
            +'<div class="tooltip-bottom"></div></div>'
        );
        // populate tooltips object
        var tooltips = new Array();
        $$('SPAN.term').each( function(el) {
            var tooltip = $$('.tooltip-term')[0];
            tooltips.push( { elem: el, type: 'term', tooltip: tooltip } ); 
        });
        // Define tooltip set content function 
        Tooltip.setContent = function(obj) {
            var defn = obj.elem.select('.definition')[0].firstChild.nodeValue;
            obj.tooltip.down().update( "<p>" + defn + "</p>");
        }
        // Define tooltip positioning for definition tooltips
        Tooltip.setPosition = function(obj) {
            var elem_coords = obj.elem.positionedOffset();
            var elem_width = obj.elem.getWidth();
            var tooltip_height = obj.tooltip.getHeight();
            obj.tooltip.setStyle({ 
                left: elem_coords[0] + 'px', 
                top: elem_coords[1] - tooltip_height + 'px'
            });
        }
        // Add event listeners
        Tooltip.registerTooltips(tooltips);
        
        
        

    };

    
//{{{1

// 4 - Hiding menu text {{{1
    var cmsMenu = $$('.mainCMSListMenuUL')[0];
    
    var arrMenuLinks = cmsMenu.getElementsByTagName("a");
    var x = 0;
    var temp;
    for (x=0;x<arrMenuLinks.length;x++)
    {
        /*temp = arrMenuLinks[x].innerHTML */
        arrMenuLinks[x].innerHTML = "<span class='nocss'>" + arrMenuLinks[x].innerHTML + "</span>";
    }
    
    
// 5 - Setting up the flash slider menu  
    if ($$('.selectArea').length > 0)
    {
        var selectButton = $$('.selectArea')[0];
        //selectButton.onmouseover = function(){setSliderMenu()};
    }
    
    if ($$('.zoo').length > 0)
    {
        var zoopage = $$('.zoo')[0];
        var logo = $$('h2')[0];
        
        var logoStyles = new Array("penguins","chameleon","kangaroo","monkey","meerkats","bird","baboon","frog");
        
        var i;
        i = Math.round(Math.random()*(logoStyles.length-1));
        
        logo.addClassName(logoStyles[i]);
        
    }
  
}

// vim:fdm=marker


function setSliderMenu()
{
    var selectButton = $$('.selectArea')[0];
    var clickRegion = $$('.clickRegion')[0];
    
    selectButton.toggleClassName('selectAreaOn');
    
    Effect.toggle('sliderMenu','blind',{duration:0.8});
    //We'd like to use 'slide' effect here but
    //Causes layout problems in Safari 2 (only)
    //Effect.toggle('sliderMenu','slide');

    
    if (selectButton.hasClassName('selectAreaOn'))
    {
        clickRegion.style.display = 'block';
        clickRegion.onmouseover = function(){setSliderMenu()};
        clickRegion.onclick = function(){setSliderMenu()};
    }
    else{
        clickRegion.style.display = 'none';
    }
       
    return false;
}

/* 6 - Set up graphic callout hovers                              *
 * These are done via JS because though the elements are anchors  *
 * IE will only see mouseover on non-transparent pixels. We want  *
 * mouseover on the entire container area and some of anchors     *
 * have transparent bkgd due to bkgd being PNG with transparency  */ 

Event.observe(window, 'load', graphicRollovers, false);

function graphicRollovers() {
    containers = $A($$('.graphicCall','.ctas li'));
    containers.each( function(container){
    swapEls = container.descendants();
        var swap = '';
        $A(swapEls).each( function(swap){
            if(swap.tagName == "A") {
                Event.observe(container, 'mouseover', function(){ return function(){ /*alert('received mouseover on element tagName "'+this.tagName+'"');*/ swap.addClassName('hover'); }(swap); }, false);
                Event.observe(container, 'mouseout', function(){ return function(){ /*alert('received mouseout on element tagName "'+this.tagName+'"');*/ swap.removeClassName('hover'); }(swap); }, false);
                Event.observe(container, 'click', function(){ return function(){ window.location = swap.href; }(swap); }, false);
            }
        });
    });
}

/* 7 - Brookfield sidebar Zoo Banner links                    *
 * These were written as image replacement on the <li>        *
 * elements for each link item, with background position on   *
 * hover adjusted via CSS. Since IE6 doesn't support          *
 * CSS hover on <li> we add a hover class to the element      */
ZooBannerHovers = new Object();

ZooBannerHovers.init = function() {
    hoverEls = $A($$('.zoo-banner li'));
    hoverEls.each( function(el){
        Event.observe(el, 'mouseover', function(){ return function(){ ZooBannerHovers.doHover(el); }(el); }, false);
        Event.observe(el, 'mouseout', function(){ return function(){ ZooBannerHovers.doHover(el); }(el); }, false);
    });
}

ZooBannerHovers.doHover = function(element) {
    var hoverClassNames = element.className;
    //alert('element.className: '+hoverClassNames);
    hoverClasses = hoverClassNames.split(/ /);
    className = hoverClasses.first();
    $A(hoverClasses).each( function(cls){
        if (cls.match(/Hover/)) {
            className = cls;
        }
    });
    //alert('className as: '+className);
    if (className.match(/Hover/)){
        newClass = className.replace(/Hover/,'');
        element.removeClassName(className);
    } else {
        newClass = className+'Hover';
    }
    element.addClassName(newClass);
}

Event.observe(window, 'load', ZooBannerHovers.init, false);

/* 8 - input submit hovers                                    *
 * Front end form submits are created by Kentico code. To     *
 * avoid customizing it we are not using the <button> element *
 * and relying on <input> src property for image replacement. *
 * This src property does not allow 'hover' via changing CSS  *
 * background-position since it scales the whole image to the *
 * input's layout dims. So we swap the src on mouseover/out.  *
 * Assume hover image is image name with '-hover' as suffix   *
 * before the file extension, e.g.                            *
 *      image filename: 'bg_input_green.gif'                  *
 *      hover filename: 'bg_input_green-hover.gif'            */

/* setup object */
InputSubmitHovers = new Object();

InputSubmitHovers.init = function() {
    inputEls = $A($$('input.submit'));
    inputEls.each( function(input){
        /* since this script relies on the src property, *
         * avoid any setup if input src is not set */
        if ((input.src) && (input.src != '')) {
            /* pre-load hover images */
            InputSubmitHovers.preloadSwapImage(input);
            Event.observe(input, 'mouseover', function(){ return function(){ /*alert('received mouseover on element tagName "'+input.tagName+'"');*/ InputSubmitHovers.swapImage(input); }(input); }, false);
            Event.observe(input, 'mouseout', function(){ return function(){ /*alert('received mouseout on element tagName "'+input.tagName+'"');*/ InputSubmitHovers.swapImage(input); }(input); }, false);
        }
    });
}

InputSubmitHovers.swapImage = function(element) {
    /* retrieve new element src  */
    newFile = InputSubmitHovers.buildFilePath(element);
    element.src = newFile;
}

InputSubmitHovers.preloadSwapImage = function(element) {
    newFile = InputSubmitHovers.buildFilePath(element);
    var hoverImage = new Image();
    hoverImage.src = newFile;
}

InputSubmitHovers.buildFilePath = function(element) {
     /* retrieve element src in parts */
    var ElFileParts = InputSubmitHovers.getSrcFileParts(element);
    var newFile;
    if (ElFileParts.file.match(/-hover/)) { // are we already at hover state?
        /* remove -hover from from file name so */
        /* as to match name of default image */
        ElFileParts.file = ElFileParts.file.replace(/-hover/,"");
        /* reconstruct file name for default image */
        newFile = ElFileParts.fileDirs.join('/') + '/' + ElFileParts.file;
    } else { // default state
        /* reconstruct file name for -hover image */
        newFile = ElFileParts.fileDirs.join('/') + '/' + ElFileParts.fileNameParts.join('.') + '-hover.' + ElFileParts.fileExtension;
    }   
    return newFile;
}

/* @return Object                                           *
 *  FileParts.fileDirs: array, the URL components           *
 *  FileParts.file: string, the filename                    *
 *  FileParts.fileNameParts: array, the filename components *
 *  FileParts.fileExtension: string, the filename extension */
InputSubmitHovers.getSrcFileParts = function(element) {
    /* setup return object */
    var FileParts = new Object();
    FileParts.fileDirs = new Array();
    FileParts.file = '';
    FileParts.fileNameParts = new Array();
    FileParts.fileExtension = '';
    var src = '';

    /* get the URL of the preview image */
    src = element.src;
    /* break the file URL into parts */
    /* pop out file name as string after last forward slash */
    FileParts.fileDirs = src.split('/');
    FileParts.file = FileParts.fileDirs.pop();
    /* break the file name into parts */
    /* pop out the extension as string after last '.' */
    FileParts.fileNameParts = FileParts.file.split('.');
    FileParts.fileExtension = FileParts.fileNameParts.pop();

    return FileParts;
}

Event.observe(window, 'load', InputSubmitHovers.init, false);