//================================================
// All code, logic, method, style
// Copyright Media Temple, Inc. 2002
//================================================
// mtnav.js
// serial#:20020204003
//================================================
// it expands and collapses the mt admin 
// navigation.
//================================================
// TODO:
// - for nav4, only set height of main layer as 
//   large as is necessary.
// - netscape hand (if possible)
// - do not allow selection of text. i hate that.
// - clean up and comment.
//================================================

var MTNAV_COMPAT = 0;

if ((document.layers || document.getElementById || document.all) && navigator.userAgent.indexOf("Opera") < 0) {

    var MTNAV_COMPAT = 1;

    var SECTION_BACK			= "images/spacer.gif";
    var SECTION_BACK_OVER		= "images/spacer.gif";
    var SECTION_BACK_ACTIVE		= "images/section_active.gif";
    var ITEM_BACK			    = "http://www.icbangeles.org/images/fondo-submenu.jpg";
    var ITEM_BACK_OVER			= "images/item_over.gif";

    var SECTION_HEIGHT			= 30
    var ITEM_HEIGHT			= 20
    var MENU_WIDTH			= 160

    var SECTION_PADDING_LEFT		= 10
    var SECTION_PADDING_TOP		= 5

    var ITEM_PADDING_LEFT		= 25
    var ITEM_PADDING_TOP		= 3

    var SLIDE_LENGTH			= 300;
    var SLIDE_ZIP			= .5;

    document.writeln('<style type="text/css">');
    document.writeln('#mtnav { visibility:hidden; }');
    document.writeln('#mtnav div { position:absolute; overflow:hidden; width:' + MENU_WIDTH + 'px; }');
    document.writeln('</style>');
    document.writeln('<link rel="stylesheet" type="text/css" href="mtnav_advanced.css">');

    var g_oMtNav, g_aSections = new Array();
    var g_images = [SECTION_BACK, SECTION_BACK_OVER, SECTION_BACK_ACTIVE, ITEM_BACK, ITEM_BACK_OVER];
    var g_activeSection = null;
	var g_sliding = false;

    for (var i = 0; i < g_images.length; i++) {
        var img = new Image();
        img.src = g_images[i];
        g_images[i] = img;
    }

    function initMTNav() {
        g_oMtNav = gE("mtnav");
        g_aSections = gK(g_oMtNav);

        for (var i = 0; i < g_aSections.length; i++) {
            initSection(g_aSections[i], i);
        }

        sW(g_oMtNav, MENU_WIDTH);
        sH(g_oMtNav, 160);
		sE(g_oMtNav);
    }

    function initSection(oSection, iSectionNum) {
        sX(oSection, 0);
        sY(oSection, iSectionNum * SECTION_HEIGHT);
        sH(oSection, SECTION_HEIGHT);
        sC(oSection, 0, MENU_WIDTH, SECTION_HEIGHT, 0);

        var k = gK(oSection);

        initSectionHead(k[0]);

        for (var i = 1; i < k.length; i++) {
            initItem(k[i], i-1);
        }

        oSection.k = k;
        oSection.n = iSectionNum;
    }

    function initSectionHead(oSectionHead) {
        sW(oSectionHead, MENU_WIDTH);
        sH(oSectionHead, SECTION_HEIGHT);
        sC(oSectionHead, 0, MENU_WIDTH, SECTION_HEIGHT, 0);
        sB(oSectionHead, SECTION_BACK);

        var k = gK(oSectionHead);

        sX(k[0], SECTION_PADDING_LEFT);
        sY(k[0], SECTION_PADDING_TOP);

        if (l) oSectionHead.captureEvents(Event.MOUSEDOWN);

        oSectionHead.onmouseover = sectionHeadMousedOver;
        oSectionHead.onmouseout  = sectionHeadMousedOut;
        oSectionHead.onmousedown = sectionHeadMousedDown;
    }

    function sectionHeadMousedOver() {
        if (gP(this) != g_activeSection) sB(this, g_images[1].src);
    }

    function sectionHeadMousedOut() {
        if (gP(this) != g_activeSection) sB(this, g_images[0].src);
    }

    function sectionHeadMousedDown() {
        toggle(gP(this));
	}

    function toggle(oSection) {
		if (!g_sliding) {
			// reset
			g_openingSection = null;
			g_closingSection = null;

			// if there's a section open, close it.
			if (g_activeSection != null) {
				g_closingSection = g_activeSection;
			}

			// if this section wasn't that same one, then open it.
			if (g_activeSection != oSection) {
				g_openingSection = oSection;
			}

			// fix up the layout.
			startSlide();

			// note changes.
			g_activeSection = oSection != g_activeSection ? oSection : null ;
		}
	}

	function startSlide() {
		g_sliding = true;
		g_slideStartTime = new Date().getTime();

		if (g_openingSection != null) {
			g_openingSection.xo = Number(gC(g_openingSection)[2]);
			g_openingSection.xf = (g_openingSection.k.length - 1) * ITEM_HEIGHT + SECTION_HEIGHT;
			g_openingSection.dx = g_openingSection.xf - g_openingSection.xo;
			g_openingSection.a = g_openingSection.dx / Math.pow(SLIDE_LENGTH, SLIDE_ZIP);
		}
		if (g_closingSection != null) {
			g_closingSection.xo = Number(gC(g_closingSection)[2]);
			g_closingSection.xf = SECTION_HEIGHT;
			g_closingSection.dx = g_closingSection.xf - g_closingSection.xo;
			g_closingSection.a = g_closingSection.dx / Math.pow(SLIDE_LENGTH, SLIDE_ZIP);
		}
		g_slideTimerID = window.setInterval("slide()", 10);
	}
	
	function slide() {
		var elapsed = new Date().getTime() - g_slideStartTime;

		if (elapsed >= SLIDE_LENGTH) {
			endSlide();
		}
		else {
			if (g_openingSection != null) {
				var h = g_openingSection.a * Math.pow(elapsed, SLIDE_ZIP) + g_openingSection.xo;
				sH(g_openingSection, h);
				sC(g_openingSection, 0, MENU_WIDTH, h, 0);
			}
			if (g_closingSection != null) {
				var h = g_closingSection.a * Math.pow(elapsed, SLIDE_ZIP) + g_closingSection.xo;
				sH(g_closingSection, h);
				sC(g_closingSection, 0, MENU_WIDTH, h, 0);
			}
			paint();
		}	
	}

	function endSlide() {
		window.clearInterval(g_slideTimerID);
		if (g_openingSection != null) {
			sH(g_openingSection, g_openingSection.xf);
			sC(g_openingSection, 0, MENU_WIDTH, g_openingSection.xf, 0);
		}
		if (g_closingSection != null) {
			sH(g_closingSection, g_closingSection.xf);
			sC(g_closingSection, 0, MENU_WIDTH, g_closingSection.xf, 0);
		}
		paint();
		g_sliding = false;
	}

	// well it doesn't actually do that, it re-lays things out based on
	// the current heights of the section divs. 
	// but I like having a function called "paint". It makes me feel cool. 
	// like a game programmer. yea...
	function paint() {
        var t = 0;

		for (var i = 0; i < g_aSections.length; i++) {
			sY(g_aSections[i], t);
			t += Number(gC(g_aSections[i])[2]);
		}
	}

    function initItem(oItem, iItemNum) {
        sX(oItem, 0);
        sY(oItem, iItemNum * ITEM_HEIGHT + SECTION_HEIGHT);
        sW(oItem, MENU_WIDTH);
        sH(oItem, ITEM_HEIGHT);
        sB(oItem, ITEM_BACK);

        var k = gK(oItem);
        sX(k[0], ITEM_PADDING_LEFT);
        sY(k[0], ITEM_PADDING_TOP);

        if (l) oItem.captureEvents(Event.CLICK);

		oItem.onmouseover = itemMousedOver;
        oItem.onmouseout  = itemMousedOut;
		oItem.onclick     = itemClicked;
    }

    function itemMousedOver() {
		this.className = "hover";
    		sB(this, g_images[4].src);
    }

    function itemMousedOut() {
		this.className = "";
		sB(this, g_images[3].src);
    }

	function itemClicked() {
		var l;
		
		if (document.layers) {
			l = this.layers[0].document.links[0];
		}
		else if (this.getElementsByTagName) {
			l = this.getElementsByTagName("A")[0];
		}
		else {
			l = this.all.tags("A")[0].click();
		}

		clickLink(l);
	}

	function clickLink(l) {
		var t = l.target;
		
		if (t == "" || t == null) {
			var w = window;
		}
		else if (t == "_self" || t == "_parent" || t == "_top") {
			var w = window[t.substring(1, t.length)];
		}
		else if (window.parent.frames[t]) {
			var w = window.parent.frames[t];
		}
		else {
			var w = window.open();
		}

		if(w) { w.location.href = l.href; }
	}

	function dbg(o) {
        var s = "";
        var i = 0;
        for (p in o) {
            s += p + ":"+ o[p] + "\n";
            if (++i % 15 == 0) {
                alert(s);
                s = "";
            }
        }
    }

}