﻿stuHover = function() {
    var cssRule
    var newSelector
    for (var i = 0; i < document.styleSheets.length; i++)
        for (var x = 0; x < document.styleSheets[i].rules.length; x++) {
        cssRule = document.styleSheets[i].rules[x]
        if (cssRule.selectorText.indexOf("LI:hover") != -1) {
            newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover")
            document.styleSheets[i].addRule(newSelector, cssRule.style.cssText)
        }
    }
    var getElm = document.getElementById("nav").getElementsByTagName("LI")
    for (var i = 0; i < getElm.length; i++) {
        getElm[i].onmouseover = function() {
            this.className += " iehover"
        }
        getElm[i].onmouseout = function() {
            this.className = this.className.replace(new RegExp(" iehover\\b"), "")
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", stuHover)
//slideshowtop
var fadeimages = new Array()
fadeimages[3] = ["Style/images/slideshow/mainbanner_poppy_lores.jpg", "", ""]
fadeimages[2] = ["Style/images/slideshow/mainbanner_comptonbikeway_lores.jpg", "", ""] 
fadeimages[1] = ["Style/images/slideshow/mainbanner_arundowhittier_lores.jpg", "", ""] 
fadeimages[0] = ["Style/images/slideshow/mainbanner_brooksidepark_lores.jpg", "", ""] 
var fadebgcolor = "white"
var fadearray = new Array()
var fadeclear = new Array()
var dom = (document.getElementById)
var iebrowser = document.all
function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder) {
    this.pausecheck = pause
    this.mouseovercheck = 0
    this.delay = delay
    this.degree = 10
    this.curimageindex = 0
    this.nextimageindex = 1
    fadearray[fadearray.length] = this
    this.slideshowid = fadearray.length - 1
    this.canvasbase = "canvas" + this.slideshowid
    this.curcanvas = this.canvasbase + "_0"
    if (typeof displayorder != "undefined")
        theimages.sort(function() { return 0.5 - Math.random(); })
    this.theimages = theimages
    this.imageborder = parseInt(borderwidth)
    this.postimages = new Array()
    for (p = 0; p < theimages.length; p++) {
        this.postimages[p] = new Image()
        this.postimages[p].src = theimages[p][0]
    }
    var fadewidth = fadewidth + this.imageborder * 2
    var fadeheight = fadeheight + this.imageborder * 2

    if (iebrowser && dom || dom)
        document.write('<div id="master' + this.slideshowid + '" style="position:relative;width:' + fadewidth + 'px;height:' + fadeheight + 'px;overflow:hidden;"><div id="' + this.canvasbase + '_0" style="position:absolute;width:' + fadewidth + 'px;height:' + fadeheight + 'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:' + fadebgcolor + '"></div><div id="' + this.canvasbase + '_1" style="position:absolute;width:' + fadewidth + 'px;height:' + fadeheight + 'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:' + fadebgcolor + '"></div></div>')
    else
        document.write('<div><img name="defaultslide' + this.slideshowid + '" src="' + this.postimages[0].src + '"></div>')

    if (iebrowser && dom || dom)
        this.startit()
    else {
        this.curimageindex++
        setInterval("fadearray[" + this.slideshowid + "].rotateimage()", this.delay)
    }
}
function fadepic(obj) {
    if (obj.degree < 100) {
        obj.degree += 10
        if (obj.tempobj.filters && obj.tempobj.filters[0]) {
            if (typeof obj.tempobj.filters[0].opacity == "number")
                obj.tempobj.filters[0].opacity = obj.degree
            else 
                obj.tempobj.style.filter = "alpha(opacity=" + obj.degree + ")"
        }
        else if (obj.tempobj.style.MozOpacity)
            obj.tempobj.style.MozOpacity = obj.degree / 101
        else if (obj.tempobj.style.KhtmlOpacity)
            obj.tempobj.style.KhtmlOpacity = obj.degree / 100
        else if (obj.tempobj.style.opacity && !obj.tempobj.filters)
            obj.tempobj.style.opacity = obj.degree / 101
    }
    else {
        clearInterval(fadeclear[obj.slideshowid])
        obj.nextcanvas = (obj.curcanvas == obj.canvasbase + "_0") ? obj.canvasbase + "_0" : obj.canvasbase + "_1"
        obj.tempobj = iebrowser ? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
        obj.populateslide(obj.tempobj, obj.nextimageindex)
        obj.nextimageindex = (obj.nextimageindex < obj.postimages.length - 1) ? obj.nextimageindex + 1 : 0
        setTimeout("fadearray[" + obj.slideshowid + "].rotateimage()", obj.delay)
    }
}

fadeshow.prototype.populateslide = function(picobj, picindex) {
    var slideHTML = ""
    if (this.theimages[picindex][1] != "")
        slideHTML = '<a href="' + this.theimages[picindex][1] + '" target="' + this.theimages[picindex][2] + '">'
    slideHTML += '<img src="' + this.postimages[picindex].src + '" border="' + this.imageborder + 'px">'
    if (this.theimages[picindex][1] != "")
        slideHTML += '</a>'
    picobj.innerHTML = slideHTML
}


fadeshow.prototype.rotateimage = function() {
    if (this.pausecheck == 1)
        var cacheobj = this
    if (this.mouseovercheck == 1)
        setTimeout(function() { cacheobj.rotateimage() }, 100)
    else if (iebrowser && dom || dom) {
        this.resetit()
        var crossobj = this.tempobj = iebrowser ? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
        crossobj.style.zIndex++
        fadeclear[this.slideshowid] = setInterval("fadepic(fadearray[" + this.slideshowid + "])", 50)
        this.curcanvas = (this.curcanvas == this.canvasbase + "_0") ? this.canvasbase + "_1" : this.canvasbase + "_0"
    }
    else {
        var ns4imgobj = document.images['defaultslide' + this.slideshowid]
        ns4imgobj.src = this.postimages[this.curimageindex].src
    }
    this.curimageindex = (this.curimageindex < this.postimages.length - 1) ? this.curimageindex + 1 : 0
}

fadeshow.prototype.resetit = function() {
    this.degree = 10
    var crossobj = iebrowser ? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
    if (crossobj.filters && crossobj.filters[0]) {
        if (typeof crossobj.filters[0].opacity == "number")
            crossobj.filters(0).opacity = this.degree
        else //else if IE5.5-
            crossobj.style.filter = "alpha(opacity=" + this.degree + ")"
    }
    else if (crossobj.style.MozOpacity)
        crossobj.style.MozOpacity = this.degree / 101
    else if (crossobj.style.KhtmlOpacity)
        crossobj.style.KhtmlOpacity = this.degree / 100
    else if (crossobj.style.opacity && !crossobj.filters)
        crossobj.style.opacity = this.degree / 101
}


fadeshow.prototype.startit = function() {
    var crossobj = iebrowser ? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
    this.populateslide(crossobj, this.curimageindex)
    if (this.pausecheck == 1) {
        var cacheobj = this
        var crossobjcontainer = iebrowser ? iebrowser["master" + this.slideshowid] : document.getElementById("master" + this.slideshowid)
        crossobjcontainer.onmouseover = function() { cacheobj.mouseovercheck = 1 }
        crossobjcontainer.onmouseout = function() { cacheobj.mouseovercheck = 0 }
    }
    this.rotateimage()
}
//** DD Drop Down Panel- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com
function ddpanel(setting) {
    setting.dir = "up"
    if (setting.stateconfig.persiststate && ddpanel.getCookie(setting.ids[0]) == "down") {
        setting.dir = "down"
    }
    if (setting.dir == "up") {
        document.write('<style type="text/css">\n')
        document.write('#' + setting.ids[1] + '{height:' + parseInt(setting.stateconfig.initial) + 'px; overflow:hidden}\n')
        document.write('</style>\n')
    }
    setting.stateconfig.initial = parseInt(setting.stateconfig.initial)
    this.setting = setting
    var thispanel = this
    if (window.addEventListener)
        ddpanel.addEvent(window, function(e) { thispanel.initpanel(setting) }, "load")
    else
        ddpanel.addEvent(window, function(e) { setTimeout(function() { thispanel.initpanel(setting) }, 100) }, "load")
    ddpanel.addEvent(window, function(e) { thispanel.uninit(setting) }, "unload")
}
ddpanel.events_array = []
ddpanel.addEvent = function(target, functionref, tasktype) {
    var evtmodel = target.addEventListener ? "w3c" : "ie"
    var evtaction = evtmodel == "w3c" ? "addEventListener" : "attachEvent"
    var i = this.events_array.push({
        target: target,
        tasktype: (evtmodel == "ie" ? "on" : "") + tasktype,
        listener: evtmodel == "ie" ? function() { return functionref.call(target, window.event) } : functionref
    }) - 1
    target[evtaction](this.events_array[i].tasktype, this.events_array[i].listener, evtmodel == "w3c" ? false : null)
}

ddpanel.removeEvent = function(target, functionref, tasktype) {
    var evtmodel = target.removeEventListener ? "w3c" : "ie"
    var evtaction = evtmodel == "w3c" ? "removeEventListener" : "detachEvent"
    target[evtaction](tasktype, functionref, evtmodel == "w3c" ? false : null)
}

ddpanel.getCookie = function(Name) {
    var re = new RegExp(Name + "=[^;]+", "i");
    if (document.cookie.match(re))
        return document.cookie.match(re)[0].split("=")[1]
    return null
}
ddpanel.setCookie = function(name, value) {
    document.cookie = name + "=" + value + ";path=/"
}
ddpanel.addpointer = function(target, className, imagesrc) {
    var pointer = document.createElement("img")
    pointer.src = imagesrc
    pointer.className = className
    pointer.style.borderWidth = 0
    target.appendChild(pointer)
    return pointer
}
ddpanel.prototype = {

    togglepanel: function(dir) { 
        var setting = this.setting
        setting.dir = dir || ((setting.dir == "up") ? "down" : "up")
        var pcontent = setting.pcontent, dir = setting.dir
        pcontent._currentheight = (dir == "down") ? pcontent._actualheight : setting.stateconfig.initial
        pcontent.style.height = pcontent._currentheight + "px"
        if (setting.pointerimage.enabled) {
            setting.arrow.src = setting.pointerimage.src[(setting.dir == "down") ? 1 : 0]
            setting.arrow.style.visibility = "visible"
        }
        ddpanel.setCookie(setting.ids[0], setting.dir)
    },

    togglepanelplus: function(dir) { 
        var setting = this.setting
        setting.dir = dir || ((setting.dir == "up") ? "down" : "up")
        if (setting.pointerimage.enabled)
            setting.arrow.style.visibility = "hidden"
        clearTimeout(setting.revealtimer)
        this.revealcontent()
    },

    revealcontent: function() {
        var setting = this.setting
        var pcontent = setting.pcontent, curH = pcontent._currentheight, maxH = pcontent._actualheight, minH = setting.stateconfig.initial, steps = setting.animate.steps, dir = setting.dir
        if (dir == "down" && curH < maxH || dir == "up" && curH > minH) {
            var newH = curH + (Math.round((maxH - curH) / steps) + 1) * (dir == "up" ? -1 : 1)
            newH = (dir == "down") ? Math.min(maxH, newH) : Math.max(minH, newH)
            pcontent.style.height = newH + "px"
            pcontent._currentheight = newH
        }
        else {
            if (setting.pointerimage.enabled) {
                setting.arrow.src = setting.pointerimage.src[(setting.dir == "down") ? 1 : 0]
                setting.arrow.style.visibility = "visible"
            }
            return
        }
        var thispanel = this
        setting.revealtimer = setTimeout(function() { thispanel.revealcontent() }, 10)
    },

    initpanel: function() {
        var setting = this.setting
        var pcontainer = setting.pcontainer = document.getElementById(setting.ids[0])
        var pcontent = setting.pcontent = document.getElementById(setting.ids[1])
        var tdiv = setting.tdiv = document.getElementById(setting.ids[2])
        pcontent.style.overflow = "scroll"
        pcontent._actualheight = pcontent.scrollHeight
        setTimeout(function() { pcontent._actualheight = pcontent.scrollHeight }, 100)
        pcontent.style.overflow = "hidden"
        pcontent._currentheight = (setting.dir == "down") ? pcontent._actualheight : setting.stateconfig.initial
        var thispanel = this
        ddpanel.addEvent(tdiv, function(e) { 
            if (setting.animate.enabled)
                thispanel.togglepanelplus()
            else
                thispanel.togglepanel()
            if (e.preventDefault) e.preventDefault()
            return false
        }, "click")
        if (setting.pointerimage.enabled) {
            var pointer1 = new Image(), pointer2 = new Image()
            pointer1.src = setting.pointerimage.src[0]
            pointer2.src = setting.pointerimage.src[1]
            setting.arrow = ddpanel.addpointer(tdiv.getElementsByTagName("span")[0], "pointerimage", setting.pointerimage.src[setting.dir == "down" ? 1 : 0])
        }
        if (setting.closepanelonclick.enabled) { 
            ddpanel.addEvent(pcontent, function(e) {
                var target = e.srcElement || e.target
                if (/(^|\s+)closepanel($|\s+)/.test(target.className) || target.tagName == "A" || (target.parentNode && target.parentNode.tagName == "A")) {
                    thispanel.togglepanel("up")
                }
            }, "click")
        }
    },
    uninit: function() {
        var setting = this.setting
        if (setting.stateconfig.persiststate) {
            ddpanel.setCookie(setting.ids[0], setting.dir)
        }
        for (prop in setting) {
            setting[prop] = null
        }
    }

} 
    var defaultpanel = new ddpanel({
        ids: ["mypanel", "mypanelcontent", "mypaneltab"], 
        stateconfig: { initial: "0px", persiststate: true },
        animate: { enabled: true, steps: 5 }, 
        pointerimage: { enabled: true, src: ["../../Style/Images/slideshow/arrow-down.gif", "../../Style/Images/slideshow/arrow-up.gif"] },
        closepanelonclick: { enabled: true}
    })


   