﻿/////DECLARATIONS, DEFINITIONS/////
//global menu timer, every level has it's own show and hide timer
var popupTimer1; var popupTimer2; var popupTimer3; var popupTimer4; //timers for popup delay
var popoutTimer1; var popoutTimer2; var popoutTimer3; var popoutTimer4; //timers for popout delay

//global parameters, for saving client resources
var level1 = -1; var level2 = -1; var level3 = -1; var level4 = -1;

//popup delays
var popupDelay1 = 50; var popupDelay2 = 0; var popupDelay3 = 0; var popupDelay4 = 0;
var popoutDelay = 400;



/////BASIC LOGIC - POPUP AND POPOUT WITH DELAYS/////
//accepts level of the menu (level), id to be shown/hidden (id), is showing or hiding (on), is swappable (or clicking on/off)
function popupMenu(level, id, on, swap) {
    //swapping popup and popout on click
    if (swap == 1) {
        on = popupSwap(id);
    }

    //showing
    if (on == 1) {
        //do showing and hiding only if we are on a different level item than before
        if (eval('level' + level + ' != ' + id)) {
            //start showing
            eval('popupTimer' + level + ' = setTimeout("popupShow(' + level + ', ' + id + ');", popupDelay' + level + ')');
        }
        //clear timer for hiding
        clearTimeout(eval("popoutTimer" + level));

        //hiding
    } else {
        //start hiding
        eval('popoutTimer' + level + ' = setTimeout("popupDisplay(' + level + ', ' + id + ', \'none\', \'menuitem' + level + '\', 1);", ' + popoutDelay + ')');
        //clear timer for showing
        clearTimeout(eval("popupTimer" + level));

    }
}




/////START SHOWING/////
//accepts level to be hidden (level), item to be shown (id, id -1 works hide all)
function popupShow(level, id) {
    //set new global level
    eval('level' + level + ' = ' + id);

    //loop all menus
    var a = 1;
    while (document.getElementById('menuitem' + a) != null) {
        //skip if not same level
        if (document.getElementById('menuitem' + a).className.indexOf(level) != -1) {
            if (id != a) {
                //if not same item, hide
                popupDisplay(level, a, 'none', 'menuitem' + level, 0);
                //alert('');
            }
        }
        a++;
    }
    //show popup, if selected
    if (id != -1) {
        popupDisplay(level, id, 'block', 'menuitem' + level + '_on', 0);
        //alert('1');
    }

    //if we are on a new item, hide all higher level popups
    if (level < 3) {
        level++;
        popupShow(level, -1);
    }

}




/////SHOWING OR HIDING POPUP/////
//takes level of the menu (level), id of the item (id), visibility (visibility), className (for the item) and reset global settings
function popupDisplay(level, id, visibility, className, reset) {

    //reset global settings, if we are hiding
    if (reset == '1') {
        eval('level' + level + ' = -1');
    }

    //set popup and cover
    popup = document.getElementById('popup' + id);
    menuItem = document.getElementById('menuitem' + id);
    //show popup
    if (popup != null) {
        popup.style.display = visibility;
        //show iframe cover
        coverShow(id, visibility);
    }

    //set class for the menu item
    if (menuItem != null) {
        menuItem.className = className;
    }
}




/////SHOWING OR HIDING COVER/////
//expects level of the menu, id of the item and visibility
function coverShow(id, visibility) {
    //popup and cover
    popup = document.getElementById('popup' + id);
    popupCover = document.getElementById('popupCover' + id);
    //if cover exists, than make cover under it    
    if (popupCover != null) {

        //move cover to the right place, right size
        if (visibility == 'block') {
            popupCover.style.top = popup.offsetTop;
            popupCover.style.left = popup.offsetLeft;
            popupCover.style.height = popup.offsetHeight;
            popupCover.style.width = popup.offsetWidth;
            //remove cover off screen
        } else {
            popupCover.style.top = '-1000px';
            popupCover.style.left = '-1000px';
        }
    }
}



/////SWAPPING ONCLICK EVENTS (SHOW / HIDE) /////
//accepts level and menu id, returns true or false
function popupSwap(id) {
    return (document.getElementById('menuitem' + id).className.indexOf('on') == -1);
}

