/*
    Javascript to support morphing of elements when marked with csswbxmorphtag whose morphing is defined
    through CSS elements.

    To use, mark element with class csswbxmorphtag (i.e. class="csswbxmorphtag")
    Declare a CSS class for the element in the form
    .(element_id)_cssmorphtagafter {
        property: aftervalue,
        property: aftervalue, ...
    }

    Example: the lodge banner will morph by moving across the header of the lodge page and change color from
        blue to white.

        The element is tagged with a <span class="csswbxmorphtag>.
        In bluehilllodgecafe.css, the following class is defined:
        .lodge_banner_title_csswbxmorphtagafter {
            opacity:1;
            color: #ffffff;
            margin-left: 0;
        }
*/
var wbxMorphTags;

/*
    Morph all elements on the page marked with the csswbxmorphtag class to new propeties as defined by the css class
    .element_id_csswbxmorphtagafter
*/
wbxRunMorphTags =
    function()
    {

        // get all elements marked with csswbxmorphtag
        wbxMorphTags = $$('.'+WBXFCSSEXT+'morphtag');

        // loop through each
        wbxMorphTags.each
        (
            function(morphTag)
            {
                var morphTagId;

                // get the id of the element
                morphTagId = morphTag.get('id');

                // set the morphing instance for the element
                $(morphTagId).set('morph',
                    {
                        duration: 3000,
                        transition: 'cubic:in:out'
                    });

                // morph the element according to values defined in a CSS class
                $(morphTagId).morph('.' + morphTagId + '_' + WBXFCSSEXT + 'morphtagafter');
            }
        );
    }

// morph all elements after page load
window.addEvent
('domready',
    function()
    {
        wbxRunMorphTags();
    }
);