//************************************************************************************* 
// File     :   nkid_functions.js
// Version  :   1.0
// Requires :   mf_domLibrary_0.1.js, prototype.js (1.6+), swfobject.js (for runClock())
// Author   :   Kyle Weems (ksw), runClock() by Marcus Steinback
// Origin   :   mindfly.com
// Created  :   September 11, 2008 (ksw)
// Modified :   September 11, 2008 (ksw)
// Purpose  :   Various site-specific solutions. Incorporates several earlier scripts
//              Started in July and December of 2007.
//*************************************************************************************

// Load these functions after the page loads.
addLoadEvent(activationSequence);


//=============================================================================================
// activationSequence()
//=============================================================================================
// Called on page load. Runs various functions.
function activationSequence() {
    runClock();
    formatPhotoDivsOnLoad();
    makeListEqual();
    setStickyClickObserver();
    artInYouCredit()
} // end of function activationSequence()


//=============================================================================================
// runClock()
//=============================================================================================
// Runs the clock.
function runClock() {
    if ($('brandingClock')) {
        var so = new SWFObject("/flash/clock/nkidClock.swf", "headerClock", "111", "111", "8", "#00FF00");
        so.addParam("wmode", "transparent");
        so.addVariable("timeXMLPath", "http://www.neighborhood-kids.com/flash/clock/BellinghamTime.ashx" + "?jsArtifact=" + new Date().getTime()); // "?jsArtifact=" + new Date().getTime() -> Prevent IE from caching the XML file upon refresh of page (resulting in the wrong time being displayed for 15 seconds until flash client syncs)
        so.write("brandingClock");
    }
}; // end of function runClock()


//=============================================================================================
// formatPhotoDivsOnLoad()
//=============================================================================================
// Formats the photoLeft and photoRight divs used in the article to the width of the
// image inside them (in the process forcing the cite to same width).
function formatPhotoDivsOnLoad() {
    var divList = document.getElementsByClassName('photoRight')
    if (divList.length) {
        for (i = 0; i < divList.length; i++) {
            var divImg = divList[i].getElementsBySelector('img');
            var divWidth = divImg[0].offsetWidth + 6;
            divList[i].style.width = divWidth + 'px';
        } 
    }
    var divList2 = document.getElementsByClassName('photoLeft')
    if (divList2.length) {
        for (i = 0; i < divList2.length; i++) {
            var divImg2 = divList2[i].getElementsBySelector('img');
            var divWidth2 = divImg2[0].offsetWidth + 6;
            divList2[i].style.width = divWidth2 + 'px';
        } // end for loop
    } // end if
    var divList3 = document.getElementsByClassName('photoCenter')
    if (divList3.length) {
        for (i = 0; i < divList3.length; i++) {
            var divImg3 = divList3[i].getElementsBySelector('img');
            var divWidth3 = divImg3[0].offsetWidth + 6;
            divList3[i].style.width = divWidth3 + 'px';
        } // end for loop
    } // end if
} // end of function formatPhotoDivsOnLoad()


//=============================================================================================
// makeListEqual()
//=============================================================================================
// Makes the list items inside the 'olSecondary' list equally tall in order to prevent visual distortions
// that can occur due to the floating involved.
function makeListEqual() {
    var list = document.getElementsByClassName('olSecondary');
    if (list.length) {
        var listItem = list[0].getElementsBySelector('li');
        if (listItem.length) {
            var i = 0;
            var tallestListItem = 0;
            for (i = 0; i < listItem.length; i++) {
                if (tallestListItem < listItem[i].offsetHeight) {
                    tallestListItem = listItem[i].offsetHeight;
                } // end if
            } // end for loop
            for (i = 0; i < listItem.length; i++) {
                listItem[i].style.height = tallestListItem + 'px';
            } // end for loop
        } // end if
    } // end if
} // end of function makeListEqual()


//=============================================================================================
// toggleSticky()
//=============================================================================================
// Open or close the menu indicated, depending on it's current display status.
function toggleSticky(clicked) {
    // If the clicked element has the displayBlock class...
    if (clicked.hasClassName('displayBlock')) {
        // Then remove that class name, as well as stickyOpen
        clicked.removeClassName('displayBlock');
        clicked.removeClassName('stickyOpen');
    }
    // Otherwise...
    else {
        // Add that class name and the stickyOpen class.
        clicked.addClassName('displayBlock');
        clicked.addClassName('stickyOpen');
    } // end if/else

} // end of function toggleSticky(menu)


//=============================================================================================
// setStickyClickObserver()
//=============================================================================================
// Creates an observer that detects when the user clicks on the page. If any element without the 
// stickyToggle class on it is clicked, then close any open sticky menus.
function setStickyClickObserver() {
    // Create an observer for a click event on the body
    Event.observe(document.body, 'click', function(event) {

        // capture the element clicked.
        var clickedElement = Event.element(event);
        // Extend it for additional functionality.
        Element.extend(clickedElement);
        // If the clicked item has the classname stickyToggle...
        if (clickedElement.hasClassName('stickyToggle')) {
            //Then go toggle that item's visibility state.
            toggleSticky(clickedElement);
        }
        // Otherwise...
        else {
            // Get an array of all items with the stickyOpen class on them on the page.
            stickyArray = document.getElementsByClassName('stickyOpen');
            // If at least one such item exists...
            if (stickyArray.length) {
                // Then loop through all such elements.
                for (i = 0; i < stickyArray.length; i++) {
                    // Remove all the stickyOpen and displayBlock classes from them.
                    stickyArray[i].removeClassName('stickyOpen');
                    stickyArray[i].removeClassName('displayBlock');
                } // end for loop

            } // end if
        } // end if/else
    }); // end of Event.observe function
} // end function setStickyClickObserver()


//=============================================================================================
// artInYouCredit()
//=============================================================================================
//
//
function artInYouCredit() {
    if ($$('.imgArtInYou').length) {
        var aiy = $$('.imgArtInYou')[0].src.split('/');
        var aiyAuthor = aiy[aiy.length - 1].split("_")[0];
        var aiyDetails = aiy[aiy.length - 1].split("_")[1];
        aiyCite = aiyAuthor.replace("-", " ") + "<br /> " + aiyDetails.replace("-", ": ")
        var citeSpan = new Element('span', { 'class': 'artCredit' });
        citeSpan.innerHTML = aiyCite;
        $$('.imgArtInYou')[0].insert({ after: $(citeSpan) });
    }
} // end of function artInYouCredit()