function knoppen_openPanel_start(pnl, btn, direction, alignRight) {
    var oBgn = document.getElementById(btn);
    var oPnl = document.getElementById(pnl);
    var iHeight;
    
    var browser = navigator.userAgent.toLowerCase();
    if ((browser.indexOf('firefox') == -1 || browser.indexOf('mozilla') == -1 || browser.indexOf('gecko') == -1) == false) {
        oBgn = oBgn.parentNode;
    }
        
    if (direction == 'left' || direction == 'right') {
        iHeight = oPnl.offsetWidth;
    } else {
        iHeight = oPnl.offsetHeight;
    }
    var bOpen = (iHeight == 0);
    
    var sTmpClass = oPnl.className.replace('slidePanelClose', '').replace('slidePanelOpen', '');
    if(bOpen){
        //gesloten -> open
        oPnl.style.clip = 'rect(auto auto ' + 0 + 'px auto)';
        oPnl.className = sTmpClass + ' slidePanelOpen';
    }else{
        //open -> gesloten
        oPnl.className = sTmpClass + ' slidePanelClose';
    }    

    var aBgn = main_elementPositions(oBgn);
    
    switch(direction) {
        case 'left': oPnl.style.left = aBgn[2] - oBgn.offsetWidth - oPnl.offsetWidth + 1 + 'px'; 
            if (alignRight) {
                oPnl.style.top = aBgn[3] - oPnl.offsetHeight + 'px'
            } else {
                oPnl.style.top = aBgn[0] + 'px';
            }
            break;
        case 'right': oPnl.style.left = aBgn[2] + 'px';
            if (alignRight) {
                oPnl.style.top = aBgn[3] - oPnl.offsetHeight + 'px';
            } else {
                oPnl.style.top = aBgn[0] + 'px';
            }
            break;
        case 'top': oPnl.style.top = aBgn[3] - oBgn.offsetHeight - oPnl.offsetHeight + 'px';
            if (alignRight) {
                oPnl.style.left = aBgn[2] - oPnl.offsetWidth + 'px';
            } else {
                oPnl.style.left = aBgn[1] + 'px';
            }
            break;
        default: oPnl.style.top = aBgn[3] + 'px';
            if (alignRight) {
                oPnl.style.left = aBgn[2] - oPnl.offsetWidth + 'px';
            } else {
                oPnl.style.left = aBgn[1] + 'px';
            }
    }
    oPnl.style.clip = 'rect(auto auto auto auto)';
}

function knoppen_slidePanel_start(pnl, btn, time, direction, forcedOpen, alignRight){
    var oBgn = document.getElementById(btn);
    var oPnl = document.getElementById(pnl);
    var iHeight;
    
    var browser = navigator.userAgent.toLowerCase();
    if ((browser.indexOf('firefox') == -1 || browser.indexOf('mozilla') == -1 || browser.indexOf('gecko') == -1) == false) {
        oBgn = oBgn.parentNode;
    }
    
    if (direction == 'left' || direction == 'right') {
        iHeight = oPnl.offsetWidth;
    } else {
        iHeight = oPnl.offsetHeight;
    }
    var bOpen = (iHeight == 0);
    if (forcedOpen != null) {
        if (bOpen != forcedOpen) {
            return false;
        }
    }
    
    var sTmpClass = oPnl.className.replace('slidePanelClose', '').replace('slidePanelOpen', '');
    if(bOpen){
        //gesloten -> open
        oPnl.style.clip = 'rect(auto auto ' + 0 + 'px auto)';
        oPnl.className = sTmpClass + ' slidePanelOpen';
        if (direction == 'left' || direction == 'right') {
            iHeight = oPnl.offsetWidth;
        } else {
            iHeight = oPnl.offsetHeight;
        }
    }else{
        //open -> gesloten
        iHeight = iHeight;
    }
    
    var aBgn = main_elementPositions(oBgn);
    var iTop;
    
    switch(direction) {
        case 'left': iTop = aBgn[2] - oBgn.offsetWidth + 1;
            if (alignRight) {
                oPnl.style.top = aBgn[3] - oPnl.offsetHeight + 'px';
            } else {
                oPnl.style.top = aBgn[0] + 'px';
            }
            break;
        case 'right': iTop = aBgn[2];
            if (alignRight) {
                oPnl.style.top = aBgn[3] - oPnl.offsetHeight + 'px';
            } else {
                oPnl.style.top = aBgn[0] + 'px';
            }
            break;
        case 'top': iTop = aBgn[3] - oBgn.offsetHeight + 1;
            if (alignRight) {
                oPnl.style.left = aBgn[2] - oPnl.offsetWidth + 'px';
            } else {
                oPnl.style.left = aBgn[1] + 'px';
            }
            break;
        default: iTop = aBgn[3];
            if (alignRight) {
                oPnl.style.left = aBgn[2] - oPnl.offsetWidth + 'px';
            } else {
                oPnl.style.left = aBgn[1] + 'px';
            }
    }

    var sCmd = 'knoppen_slidePanel_step(\'' + oPnl.id + '\', ' + bOpen + ', ' + iHeight + ', ' + iTop + ', \'' + direction + '\');';
    
    if(bOpen){
      timer_add('pnlOpen_' + pnl, sCmd, time);
    }else{
      timer_add('pnlClose_' + pnl, sCmd, time);
    }
}

function knoppen_slidePanel_step(pnl, open, maxHeight, top, direction){
    var oPnl = document.getElementById(pnl);
    var aArr;
    if(open){
      aArr = timer_item('pnlOpen_' + pnl);
    }else{
      aArr = timer_item('pnlClose_' + pnl);
    }

    var iTimBgn, iTimEnd, iTspTot, iTspNow
    //new Array(naam, command, startTijd, eindTijd, teller))
    iTimBgn = aArr[2];
    iTimEnd = aArr[3];
    iTspTot = iTimEnd - iTimBgn;
    iTspNow = new Date().getTime() - iTimBgn;

    var iTmp = (iTspNow / iTspTot);
    if(open){
      iTmp = (iTspNow / iTspTot);
    }else{
      iTmp = 1 -(iTspNow / iTspTot);
    }
    if(iTmp >= 1){
      iTmp = 1
    }else if(iTmp <=0){
      iTmp = 0
    }

    var iPix = Math.ceil(maxHeight * (iTmp));

    switch(direction) {
        case 'left':
            oPnl.style.clip = 'rect(auto ' + (iPix) + 'px auto auto)';
            oPnl.style.left = (top - (iPix)) + 'px';
            break;    
        case 'right':
            oPnl.style.clip = 'rect(auto auto auto ' + (maxHeight - iPix) + 'px)';
            oPnl.style.left = (top - (maxHeight - iPix)) + 'px';
            break;    
        case 'top': 
            oPnl.style.clip = 'rect(auto auto ' + (iPix) + 'px auto)';
            oPnl.style.top = (top - (iPix)) + 'px';
            break;
        default:
            oPnl.style.clip = 'rect(' + (maxHeight - iPix) + 'px auto auto auto)';
            oPnl.style.top = (top - (maxHeight - iPix)) + 'px';     
    }
    
    if(iTmp >= 1){
      //einde van openen
      iTmp = iTmp;
      
    }else if(iTmp <= 0){
      //einde van sluiten
      var sTmpClass = oPnl.className.replace('slidePanelClose', '').replace('slidePanelOpen', '');
      var sCmd = 'document.getElementById(\'' + pnl + '\').className = \'' + sTmpClass + ' slidePanelClose\';'
      timer_add('tmp', sCmd, 1);
    }
}

/*****/

function mousehover() {
    var _pnl = new Array();
    var _fOver;
    var _fOut;
    var bListener = false;
    
    this.addPanel = function(pnl) {              
        _pnl[_pnl.length] = pnl;
    }
    
    this.fOver = function(fOver) {
        _fOver = fOver;
    }
    
    this.fOut = function(fOut) {
        _fOut = fOut;
    }
    
    this.activate = function() {
        for ( var i = 0; i < _pnl.length; i++ ) {
            if (_pnl[i] != null) {
                    _pnl[i].onmouseover = function () {checkOver(this);}
                    _pnl[i].onmouseout = function () {checkOut(this);}                            
            }
        }
    }
 
    function checkOver(pnl) {
        pnl.className = pnl.className + ' mouseHover';
        if (!bListener) {
            bListener = true;
            startListener();
            // EVENT OVER
            eval(_fOver);
        }
    }
    
    function checkOut(pnl) {
        pnl.className = pnl.className.replace(/mouseHover/g, '');
    }
    
    function startListener() {
        var bIsOver = false;
        for ( var i = 0; i < _pnl.length; i++ ) {
            if ( _pnl[i].className.indexOf('mouseHover') != -1 ) {
                bIsOver = true;
            }
        }
        if (bIsOver) {
            setTimeout(startListener, 1);
        } else {
            bListener = false;
            // EVENT OUT
            eval(_fOut);
        }
    }
}