/*
Dr. Steven Ericsson-Zenith
Institute for Advanced Science & Engineering
Sunnyvale, California, USA
March 20th, 2008

Version 0.2.5.2.m.0.2.0
(Version number reflects YUI Version used)

memeio/structured text project
memeio document client side scripting

This is a Structured Text client side Reader script for the memeio project.

Copyright (c) 2008, Steven Ericsson-Zenith
Institute for Advanced Science & Engineering
All rights reserved. The memeio/structured text project.

*/

/* Abbreviation */
var $ = YAHOO.util.Dom.get

/* the memeio global object */
var memeio = new Object()
memeio.dock = new Array()
memeio.panel = new Array()
memeio.panels = new YAHOO.widget.OverlayManager()

/* memeio client-side methods */
memeio.fade = function (element, seconds) {
    /*
    fade for peripheral items
    may want to add a fade up feature to show faded items periodically
    */
    
    var fout = new YAHOO.util.Anim(element, {
        opacity: {
            to: 0
        }
        /*,
        height: {
        to: 0
        }*/
    },
    1, YAHOO.util.Easing.easeIn);
    
    var fin = new YAHOO.util.Anim(element, {
        opacity: {
            to: 1
        }
        /*,
        height: {
        to: 100, unit: '%'
        }*/
    },
    1, YAHOO.util.Easing.easeOut);
    
    var itimer = setTimeout(function () {
        fout.animate()
    },
    seconds * 1000)
    
    YAHOO.util.Event.addListener(element, 'mouseover',
    function () {
        // bring back
        clearTimeout(itimer)
        fin.animate()
    });
    
    YAHOO.util.Event.addListener(element, 'mouseout',
    function () {
        // fade out
        clearTimeout(itimer)
        itimer = setTimeout(function () {
            fout.animate()
        },
        seconds * 1000)
    });
    
    YAHOO.util.Event.addListener(window, 'scroll',
    function () {
        clearTimeout(itimer)
        fin.animate()
        itimer = setTimeout(function () {
            fout.animate()
        },
        seconds * 1000)
    });
}

/* subliminal glow */
memeio.glowtoggle = true
memeio.glow = function () {
    /* subliminal revelation of concepts */
    var clarification = YAHOO.util.Dom.getElementsByClassName('clarify')
    if (memeio .glowtoggle) {
        // glow clarifications
        if (memeio.toggle) {
            YAHOO.util.Dom.addClass(clarification, 'glow')
        }
    } else {
        // noglow clarifications
        if (memeio.toggle) {
            YAHOO.util.Dom.removeClass(clarification, 'glow')
        }
    }
    memeio.glowtoggle = ! memeio.glowtoggle
}

memeio.effects = function () {
    /*
    in fact want to have fade css class instead of defining the fade items here
    so that the fades can be defined in XSL
    */
    memeio.fade('immediacy', 10)
    memeio.fade('memeio-data', 8)
    memeio.fade('immediacy-data', 8)
    // now the fades for the sidebar
    // memeio.fade('sidebar', 16)
    
    /* subliminal "glow": make concepts briefly prominent in text when page opens and when scrolling */
    memeio .gtimer1 = setTimeout(memeio .glow, 2000) // in 2 seconds
    memeio .gtimer2 = setTimeout(memeio .glow, 2300) // in +300ms
    
    var timer = setTimeout(function () {
        
        YAHOO.util.Event.addListener(window, 'scroll',
        function () {
            clearTimeout(memeio .gtimer1)
            clearTimeout(memeio .gtimer2)
            // turn off the glow if it is on
            if (! memeio .glowtoggle) {
                memeio .glow()
            }
            
            /* a few seconds after we stop scrolling we will glow concepts */
            memeio .gtimer1 = setTimeout(memeio .glow, 2000) // in 2 seconds
            memeio .gtimer2 = setTimeout(memeio .glow, 2300) // in +300ms
        });
    },
    5000) // after 5 seconds we are going to glow on scroll events
}

memeio.immediacy = function () {
    // in seconds
    var here = new Date(document.lastModified)
    var there = new Date() // the local time
    var age = (there - here) /1000
    var days = Math.floor(age / 86400)
    var dayminutes = Math.floor((age / 86400 - days) * 86400 / 60)
    var hours = Math.floor(dayminutes / 60)
    var minutes = dayminutes < 60 ? Math.floor((dayminutes / 60) * 60) : Math.floor(dayminutes)
    var immediacy = ""
    
    if (days > 0) {
        if (days > 1) {
            immediacy = 'Updated ' + days + ' days ago.'
        } else {
            immediacy = 'This page updated yesterday.'
        }
    } else if (hours > 0 && days != - 1) {
        // days = -1 indicates the client/server clock is out of sync
        if (hours == 1) {
            immediacy = 'Updated an hour ago.'
        } else {
            immediacy = 'Updated ' + hours + ' hours ago.'
        }
    } else if (minutes <= 5 || days == - 1) {
        immediacy = 'This page updated moments ago!'
    } else {
        immediacy = 'Updated just ' + minutes + ' minutes ago.'
    }
    return immediacy
}

/* highlight clarifications */
memeio.toggle = true
memeio.clarify = function () {
    /* reveal clarifications */
    var clarification = YAHOO.util.Dom.getElementsByClassName('clarify')
    var paragraphs = YAHOO.util.Dom.getElementsByClassName('paragraph')
    if (memeio.toggle) {
        // highlight clarifications
        YAHOO.util.Dom.addClass(clarification, 'highlight')
        YAHOO.util.Dom.setStyle(paragraphs, 'display', 'inline')
    } else {
        // nohighlight clarifications
        YAHOO.util.Dom.removeClass(clarification, 'highlight')
        YAHOO.util.Dom.setStyle(paragraphs, 'display', 'none')
    }
    memeio.toggle = ! memeio.toggle
}

// selection methods
memeio.selection = new Object()
memeio.selection.clear = function () {
    
    if (document.selection && document.selection.empty) {
        document.selection.empty();
    } else if (window.getSelection) {
        var s = window.getSelection();
        if (s && s.removeAllRanges)
        s.removeAllRanges();
    }
}

// publisher = a global constant defined in the head of the calling document
memeio.initialize = function () {
    
    /* post local immediacy information to the page */
    $('immediacy') .innerHTML = "{ " + memeio.immediacy() + " }"
    /* and update it periodically - we only need to do this if minutes are relevant really */
    setInterval(function () {
        $('immediacy') .innerHTML = "{ " + memeio.immediacy() + " }"
    },
    180)
    
    /* make the topbar hot */
    YAHOO.util.Event.addListener('topbar', 'click', function () {
        document.location = publisher
    })
    YAHOO.util.Event.addListener('topbar', 'mouseover', function () {
        $("topbar") .className = "topbar light"
    })
    YAHOO.util.Event.addListener('topbar', 'mouseout', function () {
        $("topbar") .className = "topbar dark"
    })
    
    /* activate tabs, if present */
    var tab = YAHOO.util.Dom.getElementsByClassName('tab')
    if (tab.length > 0) {
        /* if this page is tabulated let's activate it */
        var section = YAHOO.util.Dom.getElementsByClassName('section')
        
        for (var i = 0; i < tab.length; i++) {
            
            /* give the tab a unique id */
            id = YAHOO.util.Dom.generateId(tab[i], 'memeio')
            
            /* add functions to the tabs */
            YAHOO.util.Event.addListener(id, 'mouseover', function () {
                this .className = 'tab highlight'
            },
            $(id), true)
            YAHOO.util.Event.addListener(id, 'mouseout', function () {
                this .className = 'tab nohighlight'
            },
            $(id), true)
            
            /* sections */
            YAHOO.util.Event.addListener(id, 'click', function () {
                
                var section = YAHOO.util.Dom.getElementsByClassName('section')
                
                // sectionOut.animate()
                
                /* close all the tabs (we might want a transition here) */
                for (var i = 0; i < section.length; i++) {
                    YAHOO.util.Dom.setStyle(section[i], 'display', 'none')
                }
                /* and show only this one */
                YAHOO.util.Dom.setStyle(this, 'display', 'inline')
                
                // sectionIn.animate()
                
                var tab = YAHOO.util.Dom.getElementsByClassName('tab')
                for (var i = 0; i < tab.length; i++) {
                    /* take care of the tabs  */
                    if (this === section[i]) {
                        YAHOO.util.Dom.setStyle(tab[i], 'font-size', '20pt')
                        YAHOO.util.Dom.setStyle(tab[i], 'color', 'navy')
                        tab[i] .className = 'tab'
                    } else {
                        YAHOO.util.Dom.setStyle(tab[i], 'font-size', '16pt')
                        YAHOO.util.Dom.setStyle(tab[i], 'color', '#FC0')
                        tab[i] .className = 'tab nohighlight'
                    }
                }
            },
            section[i], true)
        }
        
        /* initialize the first tab view - we are not going to highlight the selected tab */
        YAHOO.util.Dom.setStyle(tab[0], 'font-size', '20pt')
        YAHOO.util.Dom.setStyle(section[0], 'display', 'inline')
    }
    /* end tabs */
    
    /*
    activate buttons that disclose clarifications
    */
    var cbuttons = YAHOO.util.Dom.getElementsByClassName('clarify-button')
    for (var i = 0; i < cbuttons.length; i++) {
        YAHOO.util.Event.addListener(cbuttons[i], 'mouseover', function () {
            YAHOO.util.Dom.setStyle(YAHOO.util.Dom.getElementsByClassName('clarify-button'), 'background-color', 'maroon');
        })
        YAHOO.util.Event.addListener(cbuttons[i], 'mouseout', function () {
            YAHOO.util.Dom.setStyle(YAHOO.util.Dom.getElementsByClassName('clarify-button'), 'background-color', 'pink');
        })
        YAHOO.util.Event.addListener(cbuttons[i], 'click', memeio.clarify)
    }
    
    /* concepts in the document */
    var clarification = YAHOO.util.Dom.getElementsByClassName('clarify')
    var definition = YAHOO.util.Dom.getElementsByClassName('definition')
    
    for (var i = 0; i < clarification.length; i++) {
        
        // give the clarification a unique id
        id = YAHOO.util.Dom.generateId(clarification[i], 'memeio')
        
        /* mouse events over concepts */
        YAHOO.util.Event.addListener(id, 'mouseover', function () {
            YAHOO.util.Dom.addClass(this, 'highlight')
        },
        $(id), true)
        YAHOO.util.Event.addListener(id, 'mouseout', function () {
            YAHOO.util.Dom.removeClass(this, 'highlight')
        },
        $(id), true)
        
        /* definition panel */
        memeio .panel[id] = new YAHOO.widget.Panel("p" + id, {
            width: "320px",
            x:20,
            visible: false,
            draggable: true,
            dragOnly: true,
            close: true,
            underlay: "shadow",
            constraintoviewport: true,
            effect: {
                effect:YAHOO.widget.ContainerEffect.FADE,
                duration: 0.7
            }
        })
        memeio .panel[id].setHeader("Clarification")
        memeio .panel[id].setBody(definition[i].innerHTML)
        memeio .panel[id].render(id)
        
        YAHOO.util.Event.addListener(id, 'click', function () {
            this .bringToTop()
            this .show()
        },
        memeio .panel[id], true)
        
        YAHOO.util.Event.addListener(id, 'dblclick', function (e) {
            this .hide()
            memeio.selection.clear()
        },
        memeio .panel[id], true)
        
        memeio .panels .register(memeio .panel[id])
    }
    
    /* abbreviations in the document */
    var abbreviation = YAHOO.util.Dom.getElementsByClassName('abbreviation')
    var specification = YAHOO.util.Dom.getElementsByClassName('specification')
    
    for (var i = 0; i < abbreviation.length; i++) {
        
        // give the clarification a unique id
        id = YAHOO.util.Dom.generateId(abbreviation[i], 'memeio')
        
        /* mouse events over concepts */
        YAHOO.util.Event.addListener(id, 'mouseover', function () {
            YAHOO.util.Dom.addClass(this, 'highlight')
        },
        $(id), true)
        YAHOO.util.Event.addListener(id, 'mouseout', function () {
            YAHOO.util.Dom.removeClass(this, 'highlight')
        },
        $(id), true)
        
        /* specification panel */
        memeio .panel[id] = new YAHOO.widget.Panel("p" + id, {
            width: "320px",
            x:30,
            visible: false,
            draggable: true,
            dragOnly: true,
            close: true,
            underlay: "shadow",
            constraintoviewport: true,
            effect: {
                effect:YAHOO.widget.ContainerEffect.FADE,
                duration: 0.7
            }
        })
        memeio .panel[id].setHeader("Abbreviation")
        memeio .panel[id].setBody(specification[i].innerHTML)
        memeio .panel[id].render(id)
        
        YAHOO.util.Event.addListener(id, 'click', function () {
            this .bringToTop()
            this .show()
        },
        memeio .panel[id], true)
        
        YAHOO.util.Event.addListener(id, 'dblclick', function (e) {
            this .hide()
            memeio.selection.clear()
        },
        memeio .panel[id], true)
        
        memeio .panels .register(memeio .panel[id])
    }
    
    /* people in the document */
    var person = YAHOO.util.Dom.getElementsByClassName('person')
    var biography = YAHOO.util.Dom.getElementsByClassName('biography')
    
    for (var i = 0; i < person.length; i++) {
        
        // give the clarification a unique id
        id = YAHOO.util.Dom.generateId(person[i], 'memeio')
        
        YAHOO.util.Event.addListener(id, 'mouseover', function () {
            this .className = 'person highlight'
        },
        $(id), true)
        YAHOO.util.Event.addListener(id, 'mouseout', function () {
            this .className = 'person nohighlight'
        },
        $(id), true)
        
        memeio .panel[id] = new YAHOO.widget.Panel("p" + id, {
            width: "320px",
            x: 70,
            visible: false,
            draggable: true,
            dragOnly: true,
            close: true,
            underlay: "shadow",
            constraintoviewport: true,
            effect: {
                effect:YAHOO.widget.ContainerEffect.FADE,
                duration: 0.7
            }
        })
        memeio .panel[id].setHeader("Person")
        memeio .panel[id].setBody(biography[i].innerHTML)
        
        memeio .panel[id].render(id)
        
        YAHOO.util.Event.addListener(id, 'click', function () {
            this .bringToTop()
            this .show()
        },
        memeio .panel[id], true)
        
        YAHOO.util.Event.addListener(id, 'dblclick', function (e) {
            this .hide()
            memeio.selection.clear()
        },
        memeio .panel[id], true)
        
        memeio .panels .register(memeio .panel[id])
    }
    
    /* author's notes in the document */
    var note = YAHOO.util.Dom.getElementsByClassName('annotation')
    var annote = YAHOO.util.Dom.getElementsByClassName('annote')
    
    for (var i = 0; i < note.length; i++) {
        
        // give the clarification a unique id
        id = YAHOO.util.Dom.generateId(note[i], 'memeio')
        
        YAHOO.util.Event.addListener(id, 'mouseover', function () {
            this .className = 'annotation highlight'
        },
        $(id), true)
        YAHOO.util.Event.addListener(id, 'mouseout', function () {
            this .className = 'annotation nohighlight'
        },
        $(id), true)
        
        memeio .panel[id] = new YAHOO.widget.Panel("p" + id, {
            width: "380px",
            x: 120,
            visible: false,
            draggable: true,
            dragOnly: true,
            close: true,
            underlay: "shadow",
            constraintoviewport: true,
            effect: {
                effect:YAHOO.widget.ContainerEffect.FADE,
                duration: 0.7
            }
        })
        memeio .panel[id].setHeader("Note")
        memeio .panel[id].setBody(annote[i].innerHTML)
        
        memeio .panel[id].render(id)
        
        YAHOO.util.Event.addListener(id, 'click', function () {
            this .bringToTop()
            this .show()
        },
        memeio .panel[id], true)
        
        YAHOO.util.Event.addListener(id, 'dblclick', function (e) {
            this .hide()
            memeio.selection.clear()
        },
        memeio .panel[id], true)
        
        memeio .panels .register(memeio .panel[id])
    }
    
    /* references in the document */
    var refer = YAHOO.util.Dom.getElementsByClassName('refer')
    var reference = YAHOO.util.Dom.getElementsByClassName('reference')
    
    for (var i = 0; i < refer.length; i++) {
        
        // give the clarification a unique id
        id = YAHOO.util.Dom.generateId(refer[i], 'memeio')
        
        YAHOO.util.Event.addListener(id, 'mouseover', function () {
            this .className = 'refer highlight'
        },
        $(id), true)
        YAHOO.util.Event.addListener(id, 'mouseout', function () {
            this .className = 'refer nohighlight'
        },
        $(id), true)
        
        memeio .panel[id] = new YAHOO.widget.Panel("p" + id, {
            width: "320px",
            x: 70,
            visible: false,
            draggable: true,
            dragOnly: true,
            close: true,
            underlay: "shadow",
            constraintoviewport: true,
            effect: {
                effect:YAHOO.widget.ContainerEffect.FADE,
                duration: 0.7
            }
        })
        memeio .panel[id].setHeader("Reference")
        memeio .panel[id].setBody(reference[i].innerHTML)
        
        memeio .panel[id].render(id)
        
        YAHOO.util.Event.addListener(id, 'click', function () {
            this .bringToTop()
            this .show()
        },
        memeio .panel[id], true)
        
        YAHOO.util.Event.addListener(id, 'dblclick', function (e) {
            this .hide()
            memeio.selection.clear()
        },
        memeio .panel[id], true)
        
        memeio .panels .register(memeio .panel[id])
    }
    
    /*     Table of Contents
    If there is a table of contents button, then add a ToC panel.
    
    */
    if ( $('toc') ) {
        var ToCwidth = 300
        var ToCheight = 700
        
        var toc = new YAHOO.widget.Panel("ptoc", {
            width: ToCwidth + "px",
            height: ToCheight + "px",
            x: 70,
            y: 20,
            modal: true,
            fixedcenter: false,
            visible: false,
            draggable: true,
            close: true,
            underlay: "matte",
            constraintoviewport: false,
            effect: {
                effect:YAHOO.widget.ContainerEffect.FADE,
                duration: 0.7
            }
        })
        toc.setHeader("Table of Contents")
        
        // highlights
        YAHOO.util.Event.addListener('toc', 'mouseover', function () {
            this .style.backgroundColor = "navy"
        },
        $('toc'), true)
        YAHOO.util.Event.addListener('toc', 'mouseout', function () {
            this .style.backgroundColor = "lightgrey"
        },
        $('toc'), true)
        // actions
        YAHOO.util.Event.addListener('toc', 'click', function () {
            toc.setBody($('toc-body'))
            toc.render(document.body)
            this .show()
        },
        toc, true)
    }

    /* add conditional inclusion of code to support memeio xsl:template name=share" */ 

    /* turn on the page effects */
    memeio .effects()
}

YAHOO.util.Event.onDOMReady(memeio.initialize)