var codeToolbar;
var codeTooltext;
var codeToolPos;
var codeToolPos1 = '-688';
var codeToolPos2 = '-88';
var codeToolSteps = 10;
var codeToolDirection;

var codeImgbrowser;
var codeImgStepWidth = -78;
var codeImgPos = 0;
var codeButtonRight;
var codeButtonLeft;

var codeImgAct;
var codeOverlay;
var codeImgPopup;
var codeImgPopupContent;
var codeImgPopupOpac = 1.0;
var codeImgToolbar;

function InitToolbar () {
    codeToolPos = cookieManager.getCookie('toolPos') ? cookieManager.getCookie('toolPos') : codeToolPos1;
    toolHidden = (codeToolPos == codeToolPos1) ? true : false;
    codeToolbar = document.getElementById ('toolbar_content'); 
    codeTooltext = document.getElementById ('tooltext'); 
    codeToolbar.style.left = codeToolPos+'px';
    codeToolbar.style.backgroundImage = (toolHidden) ? 'url(/fileadmin/img/toolbar_hidden_bg.jpg)' : 'url(/fileadmin/img/toolbar_bg.jpg)';
    //codeTooltext.innerHTML = (toolHidden) ? 'Toolbar öffnen     ↗ ' : 'Toolbar schliessen   X ';
    codeTooltext.innerHTML = (toolHidden) ? 'Toolbar &ouml;ffnen&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="fileadmin/img/pfeil7x7.gif"/>&nbsp;' : 'Toolbar schliessen&nbsp;&nbsp;&nbsp;X&nbsp;';
    codeToolDirection = (toolHidden) ? 1 : -1;
}

function InitToolAndImg () {
    InitToolbar ();
    codeImgbrowser = document.getElementById ('imgBrowseList');   
    if (!(codeImgbrowser)) return;
    
    codeButtonRight = document.getElementById ('imgBrowseButtonRight'); 
    codeButtonLeft = document.getElementById ('imgBrowseButtonLeft'); 
    codeButtonLeft.firstChild.style.opacity = 0.5;
    codeButtonLeft.firstChild.style.filter = 'alpha(opacity=50)';
    codeButtonLeft.firstChild.style.cursor = 'default';
    
    codeOverlay = document.getElementById ('popup_overlay'); 
    codeImgPopup = document.getElementById ('popup_img'); 
    codeImgPopupContent = document.getElementById ('popup_imgdiv'); 
    codeImgToolbar = document.getElementById ('popup_imgtoolbar'); 
}

function MoveToolbar () {

    step = (codeToolPos1 - codeToolPos2) / codeToolSteps;
    
    if (codeToolDirection == 1) {
        if (codeToolPos <= (codeToolPos2 - (-step))) {
            if (codeToolPos == codeToolPos1) {
                codeToolbar.style.backgroundImage = 'url(/fileadmin/img/toolbar_bg.jpg)';
            }
            codeToolPos -= codeToolDirection * step;
            codeToolbar.style.left = codeToolPos +'px';

            window.setTimeout("MoveToolbar()", 5);
        } else {
            codeToolbar.style.left = codeToolPos2;
            cookieManager.setCookie("toolPos", codeToolPos2, 10, "minutes", "", "/");

            codeToolDirection = -codeToolDirection;
            codeTooltext.innerHTML = 'Toolbar schliessen&nbsp;&nbsp;&nbsp;X&nbsp;';
        }
    } else {
        if (codeToolPos >= codeToolPos1 - step) {
            codeToolPos -= codeToolDirection * step;
            codeToolbar.style.left = codeToolPos +'px';
            
            window.setTimeout("MoveToolbar()", 5);
        } else {
            codeToolbar.style.left = codeToolPos1;
            codeToolbar.style.backgroundImage = 'url(/fileadmin/img/toolbar_hidden_bg.jpg)';
            cookieManager.setCookie("toolPos", codeToolPos1, 10, "minutes", "", "/");
            codeToolDirection = -codeToolDirection;
            codeTooltext.innerHTML = 'Toolbar &ouml;ffnen&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="fileadmin/img/pfeil7x7.gif"/>&nbsp;';
        }    
    }
}

function MoveImgbrowser (dir, imgNo) {

    dir = Number (dir);
    imgNo = Number (imgNo);
    pos = codeImgbrowser.style.left;
    pos  = pos.replace(/px/g, "");
    pos = Number (pos);
    pos += dir * codeImgStepWidth;
    if (((codeImgPos > 0) && (dir == -1)) || ((codeImgPos < (imgNo-4)) && (dir == 1))) {
        codeImgPos += dir;
        //codeImgbrowser.style.left = pos+'px';
        window.setTimeout("StepImgbrowser("+dir+", "+pos+")", 5);
    }
    if (codeImgPos == 0) {
        codeButtonLeft.firstChild.style.opacity = 0.5;
        codeButtonLeft.firstChild.style.filter = 'alpha(opacity=50)';
        codeButtonLeft.firstChild.style.cursor = 'default';  
    } else {
        codeButtonLeft.firstChild.style.opacity = 1.0;
        codeButtonLeft.firstChild.style.filter = 'alpha(opacity=100)';
        codeButtonLeft.firstChild.style.cursor = 'pointer';  
    }
    if ((codeImgPos == (imgNo-4)) || (imgNo <= 4)) {
        codeButtonRight.firstChild.style.opacity = 0.5;
        codeButtonRight.firstChild.style.filter = 'alpha(opacity=50)';
        codeButtonRight.firstChild.style.cursor = 'default';  
    } else {
        codeButtonRight.firstChild.style.opacity = 1.0;
        codeButtonRight.firstChild.style.filter = 'alpha(opacity=100)';
        codeButtonRight.firstChild.style.cursor = 'pointer';  
    }
}

function StepImgbrowser (dir, endpos) {

    dir = Number (dir);
    pos = codeImgbrowser.style.left;
    pos = pos.replace(/px/g, "");
    pos = Number (pos);
    pos -= dir*8;
    if (((pos < endpos) && (dir == -1)) || ((pos > endpos) && (dir == 1))) {
        codeImgbrowser.style.left = pos+'px';
        window.setTimeout("StepImgbrowser("+dir+", "+endpos+")", 5);
    } else {
        codeImgbrowser.style.left = endpos+'px';
    }
}

function PopupImg (imgAct, width) {


    codeImgAct = Number(imgAct);
    width = Number(width) + 200;    // 2 *  border-width von #popup_imgdiv img (siehe myownStyles.css)
    
    codeOverlay.style.display = 'block';
    //codeOverlay.style.opacity = 0.3;
    //codeOverlay.style.filter = 'alpha(opacity=30)';
    codeImgPopup.style.display = 'block'
    codeImgPopupContent.style.width = width+'px';
    codeImgToolbar.style.width = width+'px';
    
    text = titleArr[imgAct] ? '<div>'+titleArr[imgAct]+'<br/>'+txtArr[imgAct]+'</div>' : '';
    codeImgPopupContent.innerHTML = '<img title="'+titleArr[imgAct]+'" alt="'+titleArr[imgAct]+'" src="'+imgArr[imgAct]+'" /><br/>'+text;

    
}


function PopupImgNext (step) {

    codeImgPopupOpac -= 0.2;
    if (codeImgPopupOpac >= -0.1) {
        codeImgPopup.style.opacity = codeImgPopupOpac;
        alpha_opac = Math.round (100.0*codeImgPopupOpac);
        codeImgPopup.style.filter = 'alpha(opacity='+alpha_opac+')';
        window.setTimeout("PopupImgNext("+step+")", 1);
    } else {
        codeImgAct += step;
        if (codeImgAct < 0) codeImgAct = imgArr.length-1;
        if (codeImgAct >= imgArr.length) codeImgAct = 0;
        width = Number(widthArr[codeImgAct]) + 200;    // 2 *  border-width von #popup_imgdiv img (siehe myownStyles.css)
        
        codeImgPopupContent.style.width = width+'px';
        codeImgToolbar.style.width = width+'px';
        
        text = titleArr[codeImgAct] ? '<div>'+titleArr[codeImgAct]+'<br/>'+txtArr[codeImgAct]+'</div>' : '';
        codeImgPopupContent.innerHTML = '<img src="'+imgArr[codeImgAct]+'" /><br/>'+text;
        
        PopupFadeIn ();
    }
}

function PopupFadeIn () {
    
    codeImgPopupOpac += 0.2;
    if (codeImgPopupOpac <= 1.1) {
        codeImgPopup.style.opacity = codeImgPopupOpac;
        alpha_opac = Math.round (100.0*codeImgPopupOpac);
        codeImgPopup.style.filter = 'alpha(opacity='+alpha_opac+')';
        window.setTimeout("PopupFadeIn()", 1);
    }
    
}


function PopupImgClose () {

    codeOverlay.style.display = 'none';
    //codeOverlay.style.opacity = 1.0;
    //codeOverlay.style.filter = 'alpha(opacity=100)';
    
    codeImgPopup.style.display='none'
}