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

Created January 20th, 2008 

version 0.0.1

memeio project
memeio document client side scripting

This is a client side script for the memeio project.

Copyright (c) 2010, Steven Ericsson-Zenith
Institute for Advanced Science & Engineering
All rights reserved. The memeio 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
        }
    },
    1, YAHOO.util.Easing.easeOut);
    
    var fin = new YAHOO.util.Anim(element, {
        opacity: {
            to: 1
        }
    },
    1, YAHOO.util.Easing.easeIn);
    
    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)
    });
}

/* 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
}

/* 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
}

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])
    }
    
    /*    share on external services
    **temporary code**
    
    This functionality really needs to point to a global share page
    that allows memeio documents to be shared on external services.
    
    The reason for this is that many of these services will be short lived and
    we really do not want to have to change all published memeio pages
    when this happens. sez.
    */
    // the external panels
    var pwidth = 800
    var pheight = 450
    
    var facebook = new YAHOO.widget.Panel("pfacebook", {
        width: pwidth + "px",
        height: pheight + "px",
        modal: true,
        fixedcenter: true,
        visible: false,
        draggable: false,
        close: true,
        underlay: "matte",
        constraintoviewport: true,
        effect: {
            effect: YAHOO.widget.ContainerEffect.FADE,
            duration: 0.7
        }
    })
    facebook.setHeader("Share this document on Facebook")
    fburl = "http://www.facebook.com/share.php?u=" + document.location + "&t=" + document.title
    
    var digg = new YAHOO.widget.Panel("pdigg", {
        width: pwidth + "px",
        height: pheight + "px",
        modal: true,
        fixedcenter: true,
        visible: false,
        draggable: false,
        close: true,
        underlay: "matte",
        constraintoviewport: true,
        effect: {
            effect: YAHOO.widget.ContainerEffect.FADE,
            duration: 0.7
        }
    })
    digg.setHeader("Share this document on Digg!")
    diggurl = "http://digg.com/submit?url=" + document.location
    
    var delicious = new YAHOO.widget.Panel("pdelicious", {
        width: pwidth + "px",
        height: pheight + "px",
        modal: true,
        fixedcenter: true,
        visible: false,
        draggable: false,
        close: true,
        underlay: "matte",
        constraintoviewport: true,
        effect: {
            effect: YAHOO.widget.ContainerEffect.FADE,
            duration: 0.7
        }
    })
    delicious.setHeader("Bookmark this document on del.icio.us")
    delurl = "http://del.icio.us/post?v=4&amp;noui&amp;jump=close&amp;url=" + document.location
    
    // highlights
    YAHOO.util.Event.addListener('facebook', 'mouseover', function () {
        this .style.backgroundColor = "navy"
    },
    $('facebook'), true)
    YAHOO.util.Event.addListener('facebook', 'mouseout', function () {
        this .style.backgroundColor = "lightgrey"
    },
    $('facebook'), true)
    YAHOO.util.Event.addListener('digg', 'mouseover', function () {
        this .style.backgroundColor = "navy"
    },
    $('digg'), true)
    YAHOO.util.Event.addListener('digg', 'mouseout', function () {
        this .style.backgroundColor = "lightgrey"
    },
    $('digg'), true)
    YAHOO.util.Event.addListener('delicious', 'mouseover', function () {
        this .style.backgroundColor = "navy"
    },
    $('delicious'), true)
    YAHOO.util.Event.addListener('delicious', 'mouseout', function () {
        this .style.backgroundColor = "lightgrey"
    },
    $('delicious'), true)
    // actions
    YAHOO.util.Event.addListener('facebook', 'click', function () {
        facebook.setBody("<object style='overflow-x:hidden;overflow-y:auto;border:none;' standby='Loading ...' data='" + fburl +
        "' width='100%' height='1" + (pheight - 30) + "'/>")
        facebook.render(document.body)
        this .show()
    },
    facebook, true)
    YAHOO.util.Event.addListener('digg', 'click', function () {
        digg.setBody("<object style='overflow-x:hidden;overflow-y:auto;border:none;' standby='Loading ...' data='" + diggurl +
        "' width='100%' height='" + (pheight - 30) + "'/>")
        digg.render(document.body)
        this .show()
    },
    digg, true)
    YAHOO.util.Event.addListener('delicious', 'click', function () {
        delicious.setBody("<object style='overflow-x:hidden;overflow-y:auto;border:none;' standby='Loading ...' data='" + delurl +
        "' width='100%' height='" + (pheight - 30) + "'/>")
        delicious.render(document.body)
        this .show()
    },
    delicious, true)
    
    /* turn on the page effects */
    memeio.effects()
}

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