/* === G A L L E R Y   ( J a v a S c r i p t) ============================== */

// CONFIG (some variables)

// // var GAL_MAX_PIC_WIDTH = 1000;  // max pic width + 32 (~ border width)
// // var GAL_MAX_PIC_HEIGHT = 850;  // max pic height + 42 (~ border height)

// // var GAL_PIC_FOLDER = 'gallery/';  // e.g. 'pics/' or '' or ...
// // var GAL_TN_FOLDER = 'gallery/';   // e.g. 'thumbnails/' or '' or ...

// // var GAL_PIC_PREFIX = 'fx';    // e.g. 'pic-'
// // var GAL_PIC_SUFFIX = '.png';  // e.g. '.jpg'

// // var GAL_TN_PREFIX = 'fx';       // e.g. 'pic-'
// // var GAL_TN_SUFFIX = '-tn.png';  // e.g. '-tn.jpg'

// REMARK:
//
// The above part can also be put into the individual HTML files
// (if different HTML files use different values for the above).

/* ========================================================================= */

// MORE VARIABLES

var GAL_MIN_PAGE_WIDTH = GAL_MAX_PIC_WIDTH;
var GAL_MIN_PAGE_HEIGHT = GAL_MAX_PIC_HEIGHT;

var GAL_OVERLAY_STATUS = 'off';
var GAL_ACTIVE_PIC_ID = '';
var GAL_ENABLE_PREV_NEXT = '';  // can be 'yes' or 'no'

var galPreSucc = new Array();  // pic order
var galTxt = new Array();  // pic text (e.g. 'title' or 'description')

/* ========================================================================= */

// ONKEYUP

document.onkeyup = function(e) {
    if (GAL_OVERLAY_STATUS == 'on') {
        key_id = (window.event) ? event.keyCode : e.keyCode;
        
        if (key_id == 39) {  // Arrow Right
            if (GAL_ENABLE_PREV_NEXT == 'yes') {
                if (galPreSucc[GAL_ACTIVE_PIC_ID][1] != '') {
                    galLoadNextPic();
                }
            }
        }
        else if (key_id == 37) {  // Arrow Left
            if (GAL_ENABLE_PREV_NEXT == 'yes') {
                if (galPreSucc[GAL_ACTIVE_PIC_ID][0] != '') {
                    galLoadPrevPic();
                }
            }
        }
        else if (key_id == 27) {  // Esc
            galClosePic();
        }
    }
}

/* ========================================================================= */

// ONRESIZE

window.onresize = function() {
    if (GAL_OVERLAY_STATUS == 'on') {
        galHideOverlay();
        galShowOverlay();
    }
}

/* ========================================================================= */

// INIT GALLERY   (i.e.: create overlay area)
//
// put <script>galleryInit();</script> after the body-tag in the HTML files!

function galInit() {
    document.write('<div id="gal-overlay" style="display:none;">');
    document.write('  <div id="gal-overlay-fullpage"><span></span></div>');

    document.write('  <div class="gal-viewport-container">');

    document.write('    <table id="gal-viewport">');
    document.write('      <tr>');
    document.write('        <td class="gal-viewport-data">');

    document.write('          <table style="border-collapse:collapse; margin:auto;">');
    document.write('            <tr>');
    document.write('              <td style="padding:0;">');

    document.write('                <div style="position:relative;">');

    document.write('                  <span id="gal-pic-txt"></span>');
    document.write('                  <span id="gal-pic-num"></span>');

    document.write('                  <a class="gal-btn" onclick="galClosePic();" href="javascript:void(0);">');
    document.write('                    <img class="gal-close-btn"');
    document.write('                         src="htaux/gallery-close-btn-up.png"');
    document.write('                         onmouseover="this.src=\'htaux/gallery-close-btn-down.png\';"');
    document.write('                         onmouseout="this.src=\'htaux/gallery-close-btn-up.png\';"');
    document.write('                         alt="close" title="Bild schließen" />');
    document.write('                  </a>');

    document.write('                  <span id="gal-prev-btn-active" style="display:none;">');
    document.write('                    <a class="gal-btn" onclick="galLoadPrevPic();" href="javascript:void(0);">');
    document.write('                      <img class="gal-prev-btn"');
    document.write('                           src="htaux/gallery-prev-btn-up.png"');
    document.write('                           onmouseover="this.src=\'htaux/gallery-prev-btn-down.png\';"');
    document.write('                           onmouseout="this.src=\'htaux/gallery-prev-btn-up.png\';"');
    document.write('                           alt="prev" title="vorheriges Bild" />');
    document.write('                    </a>');
    document.write('                  </span>');

    document.write('                  <span id="gal-prev-btn-inactive" style="display:none;">');
    document.write('                    <img class="gal-prev-btn"');
    document.write('                         src="htaux/gallery-prev-btn-inactive.png"');
    document.write('                         alt="prev (inactive)" title="" />');
    document.write('                  </span>');

    document.write('                  <span id="gal-next-btn-active" style="display:none;">');
    document.write('                    <a class="gal-btn" onclick="galLoadNextPic();" href="javascript:void(0);">');
    document.write('                      <img class="gal-next-btn"');
    document.write('                           src="htaux/gallery-next-btn-up.png"');
    document.write('                           onmouseover="this.src=\'htaux/gallery-next-btn-down.png\';"');
    document.write('                           onmouseout="this.src=\'htaux/gallery-next-btn-up.png\';"');
    document.write('                           alt="next" title="nächstes Bild" />');
    document.write('                    </a>');
    document.write('                  </span>');

    document.write('                  <span id="gal-next-btn-inactive" style="display:none;">');
    document.write('                    <img class="gal-next-btn"');
    document.write('                         src="htaux/gallery-next-btn-inactive.png"');
    document.write('                         alt="next (inactive)" title="" />');
    document.write('                  </span>');

    document.write('                  <img id="gal-pic" alt="picture" />');

    document.write('                </div>');

    document.write('              </td>');
    document.write('            </tr>');
    document.write('          </table>');

    document.write('        </td>');
    document.write('      </tr>');
    document.write('    </table>');

    document.write('  </div>');
    document.write('</div>');
}

/* ========================================================================= */

// OVERLAY

function galShowOverlay() {
    pwidth = Math.max(galPageWidth(), GAL_MIN_PAGE_WIDTH);
    pheight = Math.max(galPageHeight(), GAL_MIN_PAGE_HEIGHT);

    document.getElementById('gal-overlay-fullpage').style.width = 
        pwidth + 'px';
    document.getElementById('gal-overlay-fullpage').style.height = 
        pheight + 'px';

    document.getElementById('gal-viewport').style.top = 
        galYScrollOffset() + 'px';
    document.getElementById('gal-viewport').style.left = 
        galXScrollOffset() + 'px';
    document.getElementById('gal-viewport').style.width = 
        galViewportWidth() + 'px';
    document.getElementById('gal-viewport').style.height = 
        galViewportHeight() + 'px';

    document.getElementById('gal-overlay').style.display = 'block';

    GAL_OVERLAY_STATUS = 'on';
}


function galHideOverlay() {
    document.getElementById('gal-overlay').style.display = 'none';

    GAL_OVERLAY_STATUS = 'off';
}

/* ========================================================================= */

// PICTURES

function galPicPath(id) {
    return GAL_PIC_FOLDER + GAL_PIC_PREFIX + id + GAL_PIC_SUFFIX;
}


function galPic(id) {  // alias for galLoadPic; used in HTML files
    galLoadPic(id);
}


function galSinglePic(id) {  // alias for galLoadSinglePic; used in HTML files
    galLoadSinglePic(id);
}


function galLoadPic(id) {
    galShowOverlay();

    pic = galPicPath(id)
    document.getElementById('gal-pic').src = pic;
    if (galTxt[id] != undefined) {
        document.getElementById('gal-pic-txt').innerHTML = galTxt[id];
    }
    else {
        document.getElementById('gal-pic-txt').innerHTML = '';
    }
    document.getElementById('gal-pic-num').innerHTML = 'No. ' + id;

    GAL_ACTIVE_PIC_ID = id;
    GAL_ENABLE_PREV_NEXT = 'yes';
    galSetPrevNextButtons();

    // do not preload prev/next pics here
    // (slows down: click on thumnail/close image, click... /close..., ...)
}


function galLoadSinglePic(id) {  // loads only 1 pic without prev/next buttons
    galShowOverlay();

    pic = galPicPath(id)
    document.getElementById('gal-pic').src = pic;
    if (galTxt[id] != undefined) {
        document.getElementById('gal-pic-txt').innerHTML = galTxt[id];
    }
    else {
        document.getElementById('gal-pic-txt').innerHTML = '';
    }
    document.getElementById('gal-pic-num').innerHTML = 'No. ' + id;

    GAL_ACTIVE_PIC_ID = id;
    GAL_ENABLE_PREV_NEXT = 'no';
    galHidePrevNextButtons();
}


function galLoadPrevPic() {
    id = galPreSucc[GAL_ACTIVE_PIC_ID][0];
    pic = galPicPath(id);
    document.getElementById('gal-pic').src = pic;
    if (galTxt[id] != undefined) {
        document.getElementById('gal-pic-txt').innerHTML = galTxt[id];
    }
    else {
        document.getElementById('gal-pic-txt').innerHTML = '';
    }
    document.getElementById('gal-pic-num').innerHTML = 'No. ' + id;

    GAL_ACTIVE_PIC_ID = id;
    galSetPrevNextButtons();

    if (galPreSucc[GAL_ACTIVE_PIC_ID][0] != '') {  // preload prev pic
        preload = new Image();
        id =  galPreSucc[GAL_ACTIVE_PIC_ID][0];
        pic = galPicPath(id);
        preload.src = pic;
    }
}


function galLoadNextPic() {
    id = galPreSucc[GAL_ACTIVE_PIC_ID][1];
    pic = galPicPath(id);
    document.getElementById('gal-pic').src = pic;
    if (galTxt[id] != undefined) {
        document.getElementById('gal-pic-txt').innerHTML = galTxt[id];
    }
    else {
        document.getElementById('gal-pic-txt').innerHTML = '';
    }
    document.getElementById('gal-pic-num').innerHTML = 'No. ' + id;

    GAL_ACTIVE_PIC_ID = id;
    galSetPrevNextButtons();

    if (galPreSucc[GAL_ACTIVE_PIC_ID][1] != '') {  // preload next pic
        preload = new Image();
        id =  galPreSucc[GAL_ACTIVE_PIC_ID][1];
        pic = galPicPath(id);
        preload.src = pic;
    }
}


function galSetPrevNextButtons() {
    prev = galPreSucc[GAL_ACTIVE_PIC_ID][0];
    next = galPreSucc[GAL_ACTIVE_PIC_ID][1];

    // no prev/next buttons if both - prev & next image - do not exist
    // otherwise: use active/inactive prev/next buttons

    if ((prev == '') && (next == '')) {
        document.getElementById('gal-prev-btn-active').style.display =
            'none';
        document.getElementById('gal-prev-btn-inactive').style.display =
            'none';
        document.getElementById('gal-next-btn-active').style.display =
            'none';
        document.getElementById('gal-next-btn-inactive').style.display =
            'none';
    }
    else {
        if (prev != '') {
            document.getElementById('gal-prev-btn-active').style.display =
                'block';
            document.getElementById('gal-prev-btn-inactive').style.display =
                'none';
        }
        else {
            document.getElementById('gal-prev-btn-active').style.display =
                'none';
            document.getElementById('gal-prev-btn-inactive').style.display =
                'block';
        }

        if (next != '') {
            document.getElementById('gal-next-btn-active').style.display =
                'block';
            document.getElementById('gal-next-btn-inactive').style.display =
                'none';
        }
      else {
            document.getElementById('gal-next-btn-active').style.display =
                'none';
            document.getElementById('gal-next-btn-inactive').style.display =
                'block';
        }
    }
}


function galHidePrevNextButtons() {
    document.getElementById('gal-prev-btn-active').style.display = 'none';
    document.getElementById('gal-prev-btn-inactive').style.display = 'none';
    document.getElementById('gal-next-btn-active').style.display = 'none';
    document.getElementById('gal-next-btn-inactive').style.display = 'none';
}


function galClosePic() {
    document.getElementById('gal-pic').src = '';
    galHideOverlay();
}

/* ========================================================================= */

// AUXILIARY FUNCTIONS (and variables)

function galPageWidth() {
    return document.documentElement.scrollWidth;
}


function galPageHeight() {
    return document.documentElement.scrollHeight;
}


var GAL_MOZ_SCROLLBAR_WIDTH = 16;

function galViewportWidth() {
    if (typeof window.innerWidth != 'undefined') {
        return window.innerWidth - GAL_MOZ_SCROLLBAR_WIDTH;  // workaround
    }
    else {
        return document.documentElement.clientWidth;
    }
}


function galViewportHeight() {
    if (typeof window.innerHeight != 'undefined') {
        return window.innerHeight;
    }
    else {
        return document.documentElement.clientHeight;
    }
}


function galXScrollOffset() {
    if (typeof window.pageXOffset != 'undefined') {
        return window.pageXOffset;
    }
    else {
        return document.documentElement.scrollLeft;
    }
}


function galYScrollOffset() {
    if (typeof window.pageYOffset != 'undefined') {
        return window.pageYOffset;
    }
    else {
        return document.documentElement.scrollTop;
    }
}

/* ========================================================================= */

// THUMBNAILS (quick & easy way to create them; otherwise: use XHTML directly!)

function galTnPath(id) {
    return GAL_TN_FOLDER + GAL_TN_PREFIX + id + GAL_TN_SUFFIX;
}

function galTn(pre, id, succ, txt) {
    document.write('<span class="gal-tn">');
    // do not split the next long(!) line in multiple lines!!! (IE workaround!)
    document.write('  <a class="gal-tn" onclick="galPic(\'' + id +'\');" href="javascript:void(0);"><img src="' + galTnPath(id) + '" class="gal-tn" onmouseover="this.style.backgroundColor=\'#FFC000\';" onmouseout="this.style.backgroundColor=\'#FFFFFF\';" alt="thumbnail" title="No. ' + id + '" /></a>');
    document.write('</span>');

    document.write('<script>');
    document.write('  galPreSucc[\'' + id + '\'] = new Array(\'' + pre + '\', \'' + succ + '\');');
    document.write('  galTxt[\'' + id + '\'] = "' + txt + '";');
    document.write('</script>');
}

/* ========================================================================= */