//** AnyLink JS Drop Down Menu v2.0- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com
//** Script Download/ instructions page: http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm
//** January 29th, 2009: Script Creation date

//**May 22nd, 09': v2.1
//1) Automatically adds a "selectedanchor" CSS class to the currrently selected anchor link
//2) For image anchor links, the custom HTML attributes "data-image" and "data-overimage" can be inserted to set the anchor's default and over images.

//**June 1st, 09': v2.2
//1) Script now runs automatically after DOM has loaded. anylinkmenu.init) can now be called in the HEAD section

if (typeof dd_domreadycheck == "undefined") //global variable to detect if DOM is ready
    var dd_domreadycheck = false

var anylinkmenu = {

    menusmap: {},
    preloadimages: [],
    effects: { delayhide: 200, shadow: { enabled: true, opacity: 0.3, depth: [5, 5] }, fade: { enabled: false, duration: 500} }, //customize menu effects

    dimensions: {},

    getoffset: function(what, offsettype) {
        return (what.offsetParent) ? what[offsettype] + this.getoffset(what.offsetParent, offsettype) : what[offsettype]
    },

    getoffsetof: function(el) {
        el._offsets = { left: this.getoffset(el, "offsetLeft"), top: this.getoffset(el, "offsetTop"), h: el.offsetHeight }
    },

    getdimensions: function(menu) {
        this.dimensions = { anchorw: menu.anchorobj.offsetWidth, anchorh: menu.anchorobj.offsetHeight,
            docwidth: (window.innerWidth || this.standardbody.clientWidth) - 20,
            docheight: (window.innerHeight || this.standardbody.clientHeight) - 15,
            docscrollx: window.pageXOffset || this.standardbody.scrollLeft,
            docscrolly: window.pageYOffset || this.standardbody.scrollTop
        }
        if (!this.dimensions.dropmenuw) {
            this.dimensions.dropmenuw = menu.dropmenu.offsetWidth
            this.dimensions.dropmenuh = menu.dropmenu.offsetHeight
        }
    },

    isContained: function(m, e) {
        var e = window.event || e
        var c = e.relatedTarget || ((e.type == "mouseover") ? e.fromElement : e.toElement)
        while (c && c != m) try { c = c.parentNode } catch (e) { c = m }
        if (c == m)
            return true
        else
            return false
    },

    setopacity: function(el, value) {
        el.style.opacity = value
        if (typeof el.style.opacity != "string") { //if it's not a string (ie: number instead), it means property not supported
            el.style.MozOpacity = value
            if (el.filters) {
                el.style.filter = "progid:DXImageTransform.Microsoft.alpha(opacity=" + value * 100 + ")"
            }
        }
    },

    showmenu: function(menuid) {
        var menu = anylinkmenu.menusmap[menuid]
        clearTimeout(menu.hidetimer)
        this.getoffsetof(menu.anchorobj)
        this.getdimensions(menu)
        var posx = menu.anchorobj._offsets.left + (menu.orientation == "lr" ? this.dimensions.anchorw : 0) //base x pos
        var posy = menu.anchorobj._offsets.top + this.dimensions.anchorh - (menu.orientation == "lr" ? this.dimensions.anchorh : 0)//base y pos
        if (posx + this.dimensions.dropmenuw + this.effects.shadow.depth[0] > this.dimensions.docscrollx + this.dimensions.docwidth) { //drop left instead?
            posx = posx - this.dimensions.dropmenuw + (menu.orientation == "lr" ? -this.dimensions.anchorw : this.dimensions.anchorw)
        }
        if (posy + this.dimensions.dropmenuh > this.dimensions.docscrolly + this.dimensions.docheight) {  //drop up instead?
            posy = Math.max(posy - this.dimensions.dropmenuh - (menu.orientation == "lr" ? -this.dimensions.anchorh : this.dimensions.anchorh), this.dimensions.docscrolly) //position above anchor or window's top edge
        }
        if (this.effects.fade.enabled) {
            this.setopacity(menu.dropmenu, 0) //set opacity to 0 so menu appears hidden initially
            if (this.effects.shadow.enabled)
                this.setopacity(menu.shadow, 0) //set opacity to 0 so shadow appears hidden initially
        }
        menu.dropmenu.setcss({ left: posx + 'px', top: posy + 'px', visibility: 'visible' })
        if (this.effects.shadow.enabled) {
            //menu.shadow.setcss({width: menu.dropmenu.offsetWidth+"px", height:menu.dropmenu.offsetHeight+"px"})
            menu.shadow.setcss({ left: posx + anylinkmenu.effects.shadow.depth[0] + 'px', top: posy + anylinkmenu.effects.shadow.depth[1] + 'px', visibility: 'visible' })
        }
        if (this.effects.fade.enabled) {
            clearInterval(menu.animatetimer)
            menu.curanimatedegree = 0
            menu.starttime = new Date().getTime() //get time just before animation is run
            menu.animatetimer = setInterval(function() { anylinkmenu.revealmenu(menuid) }, 20)
        }
    },

    revealmenu: function(menuid) {
        var menu = anylinkmenu.menusmap[menuid]
        var elapsed = new Date().getTime() - menu.starttime //get time animation has run
        if (elapsed < this.effects.fade.duration) {
            this.setopacity(menu.dropmenu, menu.curanimatedegree)
            if (this.effects.shadow.enabled)
                this.setopacity(menu.shadow, menu.curanimatedegree * this.effects.shadow.opacity)
        }
        else {
            clearInterval(menu.animatetimer)
            this.setopacity(menu.dropmenu, 1)
            menu.dropmenu.style.filter = ""
        }
        menu.curanimatedegree = (1 - Math.cos((elapsed / this.effects.fade.duration) * Math.PI)) / 2
    },

    setcss: function(param) {
        for (prop in param) {
            this.style[prop] = param[prop]
        }
    },

    setcssclass: function(el, targetclass, action) {
        var needle = new RegExp("(^|\\s+)" + targetclass + "($|\\s+)", "ig")
        if (action == "check")
            return needle.test(el.className)
        else if (action == "remove")
            el.className = el.className.replace(needle, "")
        else if (action == "add" && !needle.test(el.className))
            el.className += " " + targetclass
    },

    hidemenu: function(menuid) {
        var menu = anylinkmenu.menusmap[menuid]
        clearInterval(menu.animatetimer)
        menu.dropmenu.setcss({ visibility: 'hidden', left: 0, top: 0 })
        menu.shadow.setcss({ visibility: 'hidden', left: 0, top: 0 })
    },

    getElementsByClass: function(targetclass) {
        if (document.querySelectorAll)
            return document.querySelectorAll("." + targetclass)
        else {
            var classnameRE = new RegExp("(^|\\s+)" + targetclass + "($|\\s+)", "i") //regular expression to screen for classname
            var pieces = []
            var alltags = document.all ? document.all : document.getElementsByTagName("*")
            for (var i = 0; i < alltags.length; i++) {
                if (typeof alltags[i].className == "string" && alltags[i].className.search(classnameRE) != -1)
                    pieces[pieces.length] = alltags[i]
            }
            return pieces
        }
    },

    addDiv: function(divid, divclass, inlinestyle) {
        var el = document.createElement("div")
        if (divid)
            el.id = divid
        el.className = divclass
        if (inlinestyle != "" && typeof el.style.cssText == "string")
            el.style.cssText = inlinestyle
        else if (inlinestyle != "")
            el.setAttribute('style', inlinestyle)
        document.body.appendChild(el)
        return el
    },

    getmenuHTML: function(menuobj) {
        var menucontent = []
        var frag = ""
        for (var i = 0; i < menuobj.items.length; i++) {
            frag += '<li><a href="' + menuobj.items[i][1] + '" target="' + menuobj.linktarget + '">' + menuobj.items[i][0] + '</a></li>\n'
            if (menuobj.items[i][2] == "efc" || i == menuobj.items.length - 1) {
                menucontent.push(frag)
                frag = ""
            }
        }
        if (typeof menuobj.cols == "undefined")
            return '<ul>\n' + menucontent.join('') + '\n</ul>'
        else {
            frag = ""
            for (var i = 0; i < menucontent.length; i++) {
                frag += '<div class="' + menuobj.cols.divclass + '" style="' + menuobj.cols.inlinestyle + '">\n<ul>\n' + menucontent[i] + '</ul>\n</div>\n'
            }
            return frag
        }
    },

    addEvent: function(targetarr, functionref, tasktype) {
        if (targetarr.length > 0) {
            var target = targetarr.shift()
            if (target.addEventListener)
                target.addEventListener(tasktype, functionref, false)
            else if (target.attachEvent)
                target.attachEvent('on' + tasktype, function() { return functionref.call(target, window.event) })
            this.addEvent(targetarr, functionref, tasktype)
        }
    },

    domready: function(functionref) { //based on code from the jQuery library
        if (dd_domreadycheck) {
            functionref()
            return
        }
        // Mozilla, Opera and webkit nightlies currently support this event
        if (document.addEventListener) {
            // Use the handy event callback
            document.addEventListener("DOMContentLoaded", function() {
                document.removeEventListener("DOMContentLoaded", arguments.callee, false)
                functionref();
                dd_domreadycheck = true
            }, false)
        }
        else if (document.attachEvent) {
            // If IE and not an iframe
            // continually check to see if the document is ready
            if (document.documentElement.doScroll && window == window.top) (function() {
                if (dd_domreadycheck) return
                try {
                    // If IE is used, use the trick by Diego Perini
                    // http://javascript.nwbox.com/IEContentLoaded/
                    document.documentElement.doScroll("left")
                } catch (error) {
                    setTimeout(arguments.callee, 0)
                    return;
                }
                //and execute any waiting functions
                functionref();
                dd_domreadycheck = true
            })();
        }
        if (document.attachEvent && parent.length > 0) //account for page being in IFRAME, in which above doesn't fire in IE
            this.addEvent(window, function() { functionref() }, "load");
    },

    addState: function(anchorobj, state) {
        if (anchorobj.getAttribute('data-image')) {
            var imgobj = (anchorobj.tagName == "IMG") ? anchorobj : anchorobj.getElementsByTagName('img')[0]
            if (imgobj) {
                imgobj.src = (state == "add") ? anchorobj.getAttribute('data-overimage') : anchorobj.getAttribute('data-image')
            }
        }
        else
            anylinkmenu.setcssclass(anchorobj, "selectedanchor", state)
    },

    addState: function(anchorobj, state) {
        if (anchorobj.getAttribute('data-image')) {
            var imgobj = (anchorobj.tagName == "IMG") ? anchorobj : anchorobj.getElementsByTagName('img')[0]
            if (imgobj) {
                imgobj.src = (state == "add") ? anchorobj.getAttribute('data-overimage') : anchorobj.getAttribute('data-image')
            }
        }
        else
            anylinkmenu.setcssclass(anchorobj, "selectedanchor", state)
    },

    setupmenu: function(targetclass, anchorobj, pos) {
        this.standardbody = (document.compatMode == "CSS1Compat") ? document.documentElement : document.body
        var relattr = anchorobj.getAttribute("rel")
        dropmenuid = relattr.replace(/\[(\w+)\]/, '')
        var dropmenuvar = window[dropmenuid]
        var dropmenu = this.addDiv(null, dropmenuvar.divclass, dropmenuvar.inlinestyle) //create and add main sub menu DIV
        dropmenu.innerHTML = this.getmenuHTML(dropmenuvar)
        var menu = this.menusmap[targetclass + pos] = {
            id: targetclass + pos,
            anchorobj: anchorobj,
            dropmenu: dropmenu,
            revealtype: (relattr.length != dropmenuid.length && RegExp.$1 == "click") ? "click" : "mouseover",
            orientation: anchorobj.getAttribute("rev") == "lr" ? "lr" : "ud",
            shadow: this.addDiv(null, "anylinkshadow", null) //create and add corresponding shadow
        }
        menu.anchorobj._internalID = targetclass + pos
        menu.anchorobj._isanchor = true
        menu.dropmenu._internalID = targetclass + pos
        menu.shadow._internalID = targetclass + pos
        menu.dropmenu.setcss = this.setcss
        menu.shadow.setcss = this.setcss
        menu.shadow.setcss({ width: menu.dropmenu.offsetWidth + "px", height: menu.dropmenu.offsetHeight + "px" })
        this.setopacity(menu.shadow, this.effects.shadow.opacity)
        this.addEvent([menu.anchorobj, menu.dropmenu, menu.shadow], function(e) { //MOUSEOVER event for anchor, dropmenu, shadow
            var menu = anylinkmenu.menusmap[this._internalID]
            if (this._isanchor && menu.revealtype == "mouseover" && !anylinkmenu.isContained(this, e)) { //event for anchor
                anylinkmenu.showmenu(menu.id)
                anylinkmenu.addState(this, "add")
            }
            else if (typeof this._isanchor == "undefined") { //event for drop down menu and shadow
                clearTimeout(menu.hidetimer)
            }
        }, "mouseover")
        this.addEvent([menu.anchorobj, menu.dropmenu, menu.shadow], function(e) { //MOUSEOUT event for anchor, dropmenu, shadow
            if (!anylinkmenu.isContained(this, e)) {
                var menu = anylinkmenu.menusmap[this._internalID]
                menu.hidetimer = setTimeout(function() {
                    anylinkmenu.addState(menu.anchorobj, "remove")
                    anylinkmenu.hidemenu(menu.id)
                }, anylinkmenu.effects.delayhide)
            }
        }, "mouseout")
        this.addEvent([menu.anchorobj, menu.dropmenu], function(e) { //CLICK event for anchor, dropmenu
            var menu = anylinkmenu.menusmap[this._internalID]
            if (this._isanchor && menu.revealtype == "click") {
                if (menu.dropmenu.style.visibility == "visible")
                    anylinkmenu.hidemenu(menu.id)
                else {
                    anylinkmenu.addState(this, "add")
                    anylinkmenu.showmenu(menu.id)
                }
                if (e.preventDefault)
                    e.preventDefault()
                return false
            }
            else
                menu.hidetimer = setTimeout(function() { anylinkmenu.hidemenu(menu.id) }, anylinkmenu.effects.delayhide)
        }, "click")
    },

    init: function(targetclass) {
        this.domready(function() { anylinkmenu.trueinit(targetclass) })
    },

    trueinit: function(targetclass) {
        var anchors = this.getElementsByClass(targetclass)
        var preloadimages = this.preloadimages
        for (var i = 0; i < anchors.length; i++) {
            if (anchors[i].getAttribute('data-image')) { //preload anchor image?
                preloadimages[preloadimages.length] = new Image()
                preloadimages[preloadimages.length - 1].src = anchors[i].getAttribute('data-image')
            }
            if (anchors[i].getAttribute('data-overimage')) { //preload anchor image?
                preloadimages[preloadimages.length] = new Image()
                preloadimages[preloadimages.length - 1].src = anchors[i].getAttribute('data-overimage')
            }
            this.setupmenu(targetclass, anchors[i], i)
        }
    }

}