var tags = new Array();
var cX, cY;

document.onmousemove = function (e)
{
    cX = (window.Event) ? e.pageX : event.clientX;
    cY = (window.Event) ? e.pageY : event.clientY;
}

function slideDown(height, tagIndex)
{
    if (height < 300)
    {
        tags[tagIndex].container.style.height = height + 'px';
        var p = 'slideDown(' + (height + 40) + ',' + tagIndex + ')';
        tags[tagIndex].box_y2 = tags[tagIndex].box_y1 + tags[tagIndex].tag.offsetHeight + tags[tagIndex].dropdown.offsetHeight;
        setTimeout(p, 10);
    }    
    else
    {
        for (var i=0; i<tags.length; i++)
        {
            if (i!= tagIndex)
            {
                tags[i].hideSlidedown(null, true);
            }
        }
    }
}

function SlideDownMenu(idTag, idDropdown, idCont)
{   
    var counter = 0;
    this.allowHide = true;
    this.tag = document.getElementById(idTag);
    this.tag.p = this;
    this.container = document.getElementById(idCont);
    
    this.dropdown = document.getElementById(idDropdown);
    this.dropdown.p = this;
    
    this.box_x1 = this.tag.offsetLeft + this.tag.parentNode.offsetLeft + this.tag.parentNode.parentNode.offsetLeft;
    this.box_x2 = this.box_x1 + this.tag.offsetWidth;
    this.box_y1 = this.tag.offsetTop + this.tag.parentNode.offsetTop + this.tag.parentNode.parentNode.offsetTop;       
    this.box_y2 = this.box_y1 + this.tag.offsetHeight;
    
    this.tagIndex = tags.length;
    tags[this.tagIndex] = this;
    
    this.tag.onmouseover = function()
    {
        setTimeout('showSlidedown1(' + this.p.tagIndex + ');', 1);
    }
    
    this.tag.onmouseout = function(e)
    {
        this.p.hideSlidedown(e, false);
    }
    
    this.dropdown.onmouseout = function(e)
    {
        this.p.hideSlidedown(e, false);
    }
    
    this.dropdown.onmousemove = function(e)
    {
        this.p.hideSlidedown(e, false);
    }
}

SlideDownMenu.prototype.hideSlidedown = function(e, force)
{
    if (!force)
    {
        var x = (window.Event) ? e.pageX : event.clientX;
        var y = (window.Event) ? e.pageY : event.clientY;
           
        //alert(el. + ', ' + this.box_x1 + ', ' +  this.box_x2  + '; ' +  el.pageY + ', ' +  this.box_y1  + ', ' + this.box_y2);
        if (x >= this.box_x1 && x <= this.box_x2 && y >= this.box_y1 && y <= this.box_y2)
        {
            return;
        }
    }
    this.container.style.height = '0px';
}

SlideDownMenu.prototype.showSlidedown = function(x, y)
{
    //alert(x + ', ' + this.box_x1 + ', ' +  this.box_x2  + '; ' +  y + ', ' +  this.box_y1  + ', ' + this.box_y2);
    if (x >= this.box_x1 && x <= this.box_x2 && y >= this.box_y1 && y <= this.box_y2)
    {
        for (var i=0; i<tags.length; i++)
        {
            tags[i].hideSlidedown(null, true);
        }
       this.dropdown.className += ' active';
       slideDown(0, this.tagIndex);   
   }
}

function showSlidedown1(tagIndex)
{
    tags[tagIndex].showSlidedown(cX, cY);
}

var M = 4;
        
function reg(n)
{
    var t = document.getElementById('t' + n);
    var c = document.getElementById('c' + n);
    var p = document.getElementById('p' + n);
    
    t.onmouseover = function ()
    {
        eval('var p = document.getElementById(\'p\' + ' + n + ');');
        if (p.className.indexOf('active') >= 0)
        {
            eval('hide(' + n + ')');
        }
        else
        {
            for (var i=1; i<=M; i++)
            {
                if (i != n)
                {
                    hide (i);
                }
            }
            eval('show(' + n + ')');
        }
    }
    
    p.onmouseout = function ()
    {
        eval('hide(' + n + ')');
    }
    
    p.onmouseover = function ()
    {
        eval('show(' + n + ')');
    }
    
    c.onclick = function ()
    {
        eval('hide(' + n + ')');
    }
}

function hide(n)
{
    var p = document.getElementById('p' + n);
    p.className = 'step';
}

function show(n)
{
    var p = document.getElementById('p' + n);
    p.className = 'step active';
}