var menu_fade_timer;
var menu_fade_speed = 200;
var all_new_objects = [];

/*Class definition of menu*/
function new_object(ul_object, true_opacity)
{
    this.ul_object = ul_object;
    this.true_opacity = true_opacity;
}

/*Class definition of menuobj*/
function menuobj(instring)
{
    //Properties
    this.true_opacity = [];
    this.ul_ids = [];

    //Methods
    this.init = initialize_menu;
}

function initialize_menu()
{
    //Find and store all child <ul> tags under the element with id='menutop'.
    // Each of these <ul> tags is a new submenu.
    this.ul_ids = document.getElementById('menutop').getElementsByTagName('ul');

    //For each <ul> tag, initialize true_opacity to 0.0.
    var num_ul_ids = this.ul_ids.length;
    var myobj = [];
    for (var i=0; i<num_ul_ids; ++i)
    {
        this.true_opacity[i] = 0.0;
        this.ul_ids[i].style.left = this.ul_ids[i].parentNode.parentNode.offsetWidth+'px';
        this.ul_ids[i].parentNode.onmouseover =
            (
                function(n){
                    return function(){expand_menu(n, this);}
                }
            )( this );
        this.ul_ids[i].parentNode.onmouseout =
            (
                function(n){
                    return function()
                    {
                        var e = window.event;
                        e.cancelBubble = true;
                        if (e.stopPropagation) e.stopPropagation();
                        retract_menu(n, this);
                     }
                }
            )( this );
        this.ul_ids[i].parentNode.

        all_new_objects[i] = new new_object(this.ul_ids[i], 0.0);
    }
}
//End class definition of menuobj

function expand_menu(obj, li_obj)
{

    //Expand the first ul child element of the li_obj. The assumption is that
    // only a single ul child element exists.
    var the_ul_to_expand = li_obj.getElementsByTagName('ul')[0];
    the_ul_to_expand.style.visibility="visible";

    var index = -1;
    for (var i=0; i<all_new_objects.length; ++i)
    {
        if (all_new_objects[i].ul_object == the_ul_to_expand)
        {
            index = i;
        }
    }
document.getElementById('output').innerHTML = 'expand menu: '+index;
/*
    //Reality-check opacity with true_opacity.
    if (all_new_objects[index].true_opacity != all_new_objects[index].ul_object.style.opacity)
    {
        all_new_objects[index].true_opacity = all_new_objects[index].ul_object.style.opacity;
    }
    //If completely transparent, then start fade-in timer.
    if (all_new_objects[index].true_opacity <= 0.0)
    {
        menu_fade_timer = setInterval('fade('+index+',1)', menu_fade_speed);
    }
    //Else the menu is either transparent, or in transition (either fading in
    // or fading out), so we cancel the existing timer.
    else
    {
*/        //Combine with above (i.e. always clear then fade in?)
        clearInterval(menu_fade_timer);
        menu_fade_timer = setInterval('fade('+index+',1)', menu_fade_speed);
/*    }
*/
}

function retract_menu(obj, li_obj)
{
    //Expand the first ul child element of the li_obj. The assumption is that
    // only a single ul child element exists.
    var the_ul_to_retract = li_obj.getElementsByTagName('ul')[0];
//    the_ul_to_retract.style.visibility="hidden";

    var index = -1;
    for (var i=0; i<all_new_objects.length; ++i)
    {
        if (all_new_objects[i].ul_object == the_ul_to_retract)
        {
            index = i;
        }
    }
//    alert('out');
document.getElementById('output').innerHTML = 'retract menu: '+index;
the_ul_to_retract.style.visibility="hidden";
clearInterval(menu_fade_timer);
    the_ul_to_retract.style.opacity = '0.0'; //For CSS3
    the_ul_to_retract.filter = 'alpha(opacity=0)'; //For IE
    all_new_objects[index].true_opacity = 0.0;

/*
    //Reality-check opacity with true_opacity.
    if (all_new_objects[index].true_opacity != all_new_objects[index].ul_object.style.opacity)
    {
        all_new_objects[index].true_opacity = all_new_objects[index].ul_object.style.opacity;
    }

    //If completely transparent, then start fade-out timer.
    if (all_new_objects[index].true_opacity >= 1.0)
    {
        menu_fade_timer = setInterval('fade('+index+',-1)', menu_fade_speed);
    }
    //Else the menu is either transparent, or in transition (either fading in
    // or fading out), so we cancel the existing timer.
    else
    {
        //Combine with above (i.e. always clear then fade out?)
        clearInterval(menu_fade_timer);
        menu_fade_timer = setInterval('fade('+index+',-1)', menu_fade_speed);
    }
*/
}


/*This function fades the specified object by manipulating its opacity.*/
/* A direction of 1 indicates a fade-in (i.e. opacity 0.0 -> 1.0)      */
/* A direction of 0 indicates a fade-out (i.e. opacity 1.0 -> 0.0)     */

function fade(index, direction)
{
    var obj = all_new_objects[index];
    var delta = (direction==1) ? 0.1 : -0.1;
    obj.true_opacity += delta;
    if (obj.true_opacity >= 1.0 && direction == 1)
    {
        obj.true_opacity = 1.0;
        clearInterval(menu_fade_timer);
        document.getElementById('output').innerHTML = 'Done fading in';
    }
    else if (obj.true_opacity <= 0.0 && direction == -1)
    {
        obj.true_opacity = 0.0;
        clearInterval(menu_fade_timer);
        obj.ul_object.style.visibility = 'hidden';
        document.getElementById('output').innerHTML = 'Done fading out';
    }
    else
    {
        if (delta == 0.1)
        {
            document.getElementById('output').innerHTML = 'Fading in';
        }
        else
        {
            document.getElementById('output').innerHTML = 'Fading out';
        }
    }
    obj.ul_object.style.opacity = ''+obj.true_opacity; //For CSS3
    obj.ul_object.filter = 'alpha(opacity='+(obj.true_opacity*100)+')'; //For IE

}

var menu=function()
{
        //Time (in milliseconds) between callbacks to update submenu expansion/contraction. Smaller value = faster.
	var submenu_expansion_delay = 10;

        //Controls non-linear step size of submenu expansion/contraction. Larger value = slower.
        var submenu_expansion_factor = 6;

	var z_index         = 50;
	var a;
	    
	function dd(n)
	{
		this.n = n;
		this.submenu_li_ids = [];
		this.ul_ids = [];
	}
	dd.prototype.init=function(menu_id, c)
	{
		a=c;
		var main_menu_id = document.getElementById(menu_id);
		var ul_ids = main_menu_id.getElementsByTagName('ul');
		var num_uls = ul_ids.length;
		var i = 0;
		for(i; i < num_uls; i++)
		{
			var submenu_li_id = ul_ids[i].parentNode;
			this.submenu_li_ids[i] = submenu_li_id;
			this.ul_ids[i] = ul_ids[i];
			submenu_li_id.onmouseover = new Function(this.n+'.st('+i+',true)');
			submenu_li_id.onmouseout = new Function(this.n+'.st('+i+')');
                        this.ul_ids[i].style.left = submenu_li_id.parentNode.offsetWidth+'px';
			this.ul_ids[i].style.top = submenu_li_id.offsetTop+'px';
			this.ul_ids[i].style.width = this.ul_ids[i].offsetWidth+'px';
                        this.ul_ids[i].style.visibility = "hidden";
		}
	}
	dd.prototype.st = function(index, expand)
	{
		var ul_id = this.ul_ids[index];
		var submenu_li_id = this.submenu_li_ids[index];
		var submenu_li_first_anchor = submenu_li_id.getElementsByTagName('a')[0];
		clearInterval(ul_id.timer);
		ul_id.style.overflow = 'hidden';
		
		if(expand)
		{
			submenu_li_first_anchor.className += ' ' + a;
			if(!ul_id.max_height)
			{
				//ul_id.style.display = 'block';
                                ul_id.style.visibility = 'visible';
				ul_id.style.height = '';
				ul_id.max_height = ul_id.offsetHeight;
				ul_id.style.height = 0
			}
			if(ul_id.max_height == ul_id.offsetHeight)
			{
				ul_id.style.overflow = 'visible';
			}
			else
			{
				ul_id.style.zIndex = z_index;
				z_index++;
				ul_id.timer = setInterval(function(){sl(ul_id, 1)}, submenu_expansion_delay);
			}
		}
		else{
			submenu_li_first_anchor.className = submenu_li_first_anchor.className.replace(a,'');
			ul_id.timer = setInterval(function(){sl(ul_id, -1)}, submenu_expansion_delay);
		}
	}
	
	function sl(ul, expansion_direction)
	{
		var height = ul.offsetHeight;
		if((height <= 0 && expansion_direction != 1) || (height >= ul.max_height && expansion_direction == 1))
		{
			if(expansion_direction == 1)
			{
				ul.style.filter = '';
				ul.style.opacity = 1;
				ul.style.overflow = 'visible';
			}
			clearInterval(ul.timer);
			return;
		}
		var height_change = (expansion_direction == 1) ? Math.ceil((ul.max_height - height) / submenu_expansion_factor)
					   : Math.ceil(height / submenu_expansion_factor);
		var opacity = height/ul.max_height;
		ul.style.opacity = opacity;
		ul.style.filter = 'alpha(opacity=' + (opacity * 100) + ')';
		ul.style.height = height + (height_change * expansion_direction) + 'px';
	}
	return{dd:dd}
}();