
    <script type="text/javascript">
    //<![CDATA[
        
        // Symbole fuer die Navigation (Bilder oder Zeichen)
        var naviLeftSymbol{INSTANCE} = '&lt;';
        var naviRightSymbol{INSTANCE} = '&gt;';
        
        // Ab hier keine Aenderungen !!!
        var numImages{INSTANCE} = {NUM_IMAGES};
        var aImages{INSTANCE} = new Array({IMAGES_ARRAY});
        var aThumbs{INSTANCE} = new Array();
            {THUMBS_ARRAY}
        var iThumbs{INSTANCE} = {THUMBS_PER_ARRAY};
        var iArrays{INSTANCE} = {THUMB_ARRAYS};
        var aPopups{INSTANCE} = new Array({POPUPS_ARRAY});
        var aDescr{INSTANCE} = new Array({DESCR_ARRAY});
        
        {PRELOAD_IMAGES}
        function simpleGallery{INSTANCE}ShowImage(No) {
            if ({USE_POPUP}) {
                document.getElementById('SimpleGallery{INSTANCE}Image').innerHTML = '<' + 'a href="javascript:simpleGallery{INSTANCE}ShowImagePopup(' + No + ')"' + '>' + '<' + 'img src="' + aImages{INSTANCE}[(No - 1)] + '" alt="" /' + '>' + '<' + '/a' + '>';
                document.getElementById('SimpleGallery{INSTANCE}PopupLink').setAttribute('onclick', 'simpleGallery{INSTANCE}ShowImagePopup(' + No + ')');
            } else {
                document.getElementById('SimpleGallery{INSTANCE}Image').innerHTML = '<' + 'img src="' + aImages{INSTANCE}[(No - 1)] + '" alt="" /' + '>';
            }
            document.getElementById('SimpleGallery{INSTANCE}ImageInfo').innerHTML = No + '/' + numImages{INSTANCE};
            document.getElementById('SimpleGallery{INSTANCE}ImageDescription').innerHTML = aDescr{INSTANCE}[(No - 1)];
            document.getElementById('SimpleGallery{INSTANCE}Navigation').innerHTML = '<' + 'a href="javascript:simpleGallery{INSTANCE}ShowImage(' + ((No == 1) ? numImages{INSTANCE} : (No - 1)) + ');"' + '>' + naviLeftSymbol{INSTANCE} + '<' + '/a' + '>' + '&nbsp;' + '<' + 'a href="javascript:simpleGallery{INSTANCE}ShowImage(' + ((No == numImages{INSTANCE}) ? 1 : (No + 1)) + ');"' + '>' + naviRightSymbol{INSTANCE} + '<' + '/a' + '>';
                var ImgL = new Image(); ImgL.src = aPopups{INSTANCE}[(No - 1)];
        }
        
        var iCurrent = -1;
        var iBlock = 0;
        function simpleGallery{INSTANCE}ShowImagePopup(No) {
            if (iCurrent == -1) {
                setTimeout('simpleGallery{INSTANCE}PreloadLargeImages()', 2000);
            }
            if (iCurrent != No) {
                iCurrent = No;
                simpleGallery{INSTANCE}ShowThumbs(No);
                document.getElementById('SimpleGallery{INSTANCE}ImageArea').innerHTML = '<'+'img src="' + aPopups{INSTANCE}[(No - 1)] + '" alt="" /' + '>';
                document.getElementById('SimpleGallery{INSTANCE}DescriptionArea').innerHTML = aDescr{INSTANCE}[(No - 1)];
                document.getElementById('SimpleGallery{INSTANCE}DarkBackground').style.display = 'block';
                document.getElementById('SimpleGallery{INSTANCE}ImageWindow').style.display = 'block';
                document.getElementById('SimpleGallery{INSTANCE}PopupImageNaviLeft').setAttribute('onclick', 'simpleGallery{INSTANCE}ShowImagePopup(' + ((No == 1) ? numImages{INSTANCE} : (No - 1)) + ')');
                document.getElementById('SimpleGallery{INSTANCE}PopupImageNaviRight').setAttribute('onclick', 'simpleGallery{INSTANCE}ShowImagePopup(' + ((No == numImages{INSTANCE}) ? 1 : (No + 1)) + ')');
                var ImgL0 = new Image(); ImgL0.src = aPopups{INSTANCE}[((No == 1) ? (numImages{INSTANCE} - 1) : (No - 2))];
                var ImgL1 = new Image(); ImgL1.src = aPopups{INSTANCE}[((No == numImages{INSTANCE}) ? 1 : No)];
            }
        }
        function simpleGallery{INSTANCE}CloseImagePopup() {
            document.getElementById('SimpleGallery{INSTANCE}ImageWindow').style.display = 'none';
            document.getElementById('SimpleGallery{INSTANCE}DarkBackground').style.display = 'none';
            iCurrent = 0;
            iBlock = 0;
        }
        function simpleGallery{INSTANCE}ShowThumbs(No) {
            var iThumbsArrayNo = Math.ceil(No / iThumbs{INSTANCE});
            var sThumbs = '';
            iBlock = iThumbsArrayNo;
            for (var i = 0; i < iThumbs{INSTANCE}; i ++) {
                if (i < aThumbs{INSTANCE}[iThumbsArrayNo].length) {
                    sThumbs += '<' + 'div style="float: left; margin: 0px 1px; padding: 2px 2px 0px 2px; width: {THUMB_BLOCK_WIDTH}px; height: {THUMB_BLOCK_HEIGHT}px; text-align: center; border: 1px solid #' + (((i + ((iThumbsArrayNo - 1) * iThumbs{INSTANCE}) + 1) == No) ? '000' : 'FFF') + ';"' + '>' + '<' + 'a href="javascript:simpleGallery{INSTANCE}ShowImagePopup(' + (i + ((iThumbsArrayNo - 1) * iThumbs{INSTANCE}) + 1) + ')"' + '>' + '<' + 'img src="' + aThumbs{INSTANCE}[iThumbsArrayNo][i] + '" alt="" onmousemove="simpleGallery{INSTANCE}ShowImagePopup(' + (i + ((iThumbsArrayNo - 1) * iThumbs{INSTANCE}) + 1) + ')" style="width: 100px; height: 75px;" /' + '>' + '<' + '/a' + '>' + '<' + 'br /' + '>' + (((i + ((iThumbsArrayNo - 1) * iThumbs{INSTANCE}) + 1) == No) ? '<' + 'span style="line-height: 20px; background-color: #FFF;"' + '>' + '&nbsp;' + No + '/' + numImages{INSTANCE} : '') + '&nbsp;' + '<' + '/span' + '>' + '<' + '/div' + '>';
                }
            }
            document.getElementById('SimpleGallery{INSTANCE}ThumbsAreaThumbs').innerHTML = sThumbs;
            if (iThumbsArrayNo > 1) {
                document.getElementById('SimpleGallery{INSTANCE}ThumbsAreaNaviLeft').innerHTML = '<' + 'a href="javascript:simpleGallery{INSTANCE}ShowImagePopup(' + ((iThumbs{INSTANCE} * iThumbsArrayNo) - iThumbs{INSTANCE}) + ')"' + '>' + '<' + 'img src="images/SimpleGallery/NaviLeft.png" alt="" /' + '>' + '<' + '/a' + '>';
            } else {
                document.getElementById('SimpleGallery{INSTANCE}ThumbsAreaNaviLeft').innerHTML = '<' + 'img src="images/SimpleGallery/NaviLeftDisabled.png" alt="" /' + '>';
            }
            if (iThumbsArrayNo < iArrays{INSTANCE}) {
                document.getElementById('SimpleGallery{INSTANCE}ThumbsAreaNaviRight').innerHTML = '<' + 'a href="javascript:simpleGallery{INSTANCE}ShowImagePopup(' + ((iThumbs{INSTANCE} * iThumbsArrayNo) + 1) + ')"' + '>' + '<' + 'img src="images/SimpleGallery/NaviRight.png" alt="" /' + '>' + '<' + '/a' + '>';
            } else {
                document.getElementById('SimpleGallery{INSTANCE}ThumbsAreaNaviRight').innerHTML = '<' + 'img src="images/SimpleGallery/NaviRightDisabled.png" alt="" /' + '>';
            }
        }
        function simpleGallery{INSTANCE}PreloadLargeImages() {
            {PRELOAD_THUMB_IMAGES}
        }
    //]]>
    </script>
    <div id="SimpleGallery{INSTANCE}" class="SimpleGallery" style="width: {WIDTH}px;">
        <div style="position: relative; margin: 0px 50px 10px 50px;">
            <div id="SimpleGallery{INSTANCE}PopupLink" style="position: absolute;{SHOW_POPUP} width: {IMAGE_WIDTH}px; height: {IMAGE_HEIGHT}px; background: url('images/SimpleGallery/ZoomOverlay.png') center center no-repeat; opacity: 0; filter: alpha(opacity=0); transition: opacity 0.3s ease 0s; cursor: pointer;" onmouseover="this.style.opacity=1; this.style.filter='alpha(opacity=70)'; this.style.transition='opacity 0.5s ease 0s';" onmouseout="this.style.opacity=0; this.style.filter='alpha(opacity=0)'; this.style.transition='opacity 0.3s ease 0s';"></div>
            <div id="SimpleGallery{INSTANCE}Image" class="SimpleGalleryImage"></div>
        </div>
        <div id="SimpleGallery{INSTANCE}ImageInfo" class="SimpleGalleryImageInfo" style="float: left;"></div>
        <div id="SimpleGallery{INSTANCE}Navigation" class="SimpleGalleryNavigation" style="float: right;"></div>
        <div id="SimpleGallery{INSTANCE}ImageDescription" class="SimpleGalleryImageDescription" style="margin: 0px 50px; padding-left: 4px; border-left: 1px solid #999;"></div>
        <div style="clear: both;"></div>
    </div>
    <script type="text/javascript">
    //<![CDATA[
        simpleGallery{INSTANCE}ShowImage(1);
    //]]>
    </script>
    <div id="SimpleGallery{INSTANCE}DarkBackground" onclick="simpleGallery{INSTANCE}CloseImagePopup();" style="position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 200; display: none; background-color: #000; opacity: 0.6;"></div>
    <div id="SimpleGallery{INSTANCE}ImageWindow" style="position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 210; display: none; font-family: Arial, Verdana, sans-serif;">
        <table border="0" cellspacing="0" cellpadding="0" style="width: 100%; height: 100%;">
            <tr><td onclick="simpleGallery{INSTANCE}CloseImagePopup();"></td></tr>
            <tr valign="middle" style="height: 1%;">
                <td onclick="simpleGallery{INSTANCE}CloseImagePopup();"></td>
                <td align="center" style="width: 1%; background-color: transparent;">
                    <div style="display: inline-block; position: relative; width: {POPUP_WIDTH}px; text-align: left; color: #000; background-color: #FFF; border: 8px solid #FFF;">
                        <div style="position: absolute; top: -24px; right: -24px;">
                            <img src="images/SimpleGallery/ClosePopup.png" alt="Schlie&szlig;en" onclick="simpleGallery{INSTANCE}CloseImagePopup();" style="cursor: pointer;" />
                        </div>
                        <div style="float: left;">
                            <div>
                                <div style="position: relative; margin-bottom: 8px; width: {POPUP_IMAGE_WIDTH}px; height: {POPUP_IMAGE_HEIGHT}px; background: url('images/SimpleGallery/Loading.gif') center center no-repeat;">
                                    <div style="position: absolute; width: {POPUP_IMAGE_WIDTH}px; height: {POPUP_IMAGE_HEIGHT}px; opacity: 0.5; filter: alpha(opacity=50); transition: opacity 0.3s ease 0s; cursor: pointer;" onmouseover="this.style.opacity=1; this.style.filter='alpha(opacity=70)'; this.style.transition='opacity 0.5s ease 0s';" onmouseout="this.style.opacity=0; this.style.filter='alpha(opacity=0)'; this.style.transition='opacity 0.3s ease 0s';">
                                        <div id="SimpleGallery{INSTANCE}PopupImageNaviLeft" style="position: absolute; left: 0px; width: 50%; height: {POPUP_IMAGE_HEIGHT}px; background: url('images/SimpleGallery/PopupImageNaviLeft.png') center left no-repeat;"></div>
                                        <div id="SimpleGallery{INSTANCE}PopupImageNaviRight" style="position: absolute; right: 0px; width: 50%; height: {POPUP_IMAGE_HEIGHT}px; background: url('images/SimpleGallery/PopupImageNaviRight.png') center right no-repeat;"></div>
                                    </div>
                                    <div id="SimpleGallery{INSTANCE}ImageArea"></div>
                                </div>
                                <div id="SimpleGallery{INSTANCE}ThumbsArea" style="width: {POPUP_IMAGE_WIDTH}px; height: 101px; overflow: hidden;">
                                    <div id="SimpleGallery{INSTANCE}ThumbsAreaNaviLeft" style="float: left; padding: 39px 1px; width: 10px; height: 21px; border: 1px solid #CCC;"><img src="images/SimpleGallery/NaviLeftDisabled.png" alt="" /></div>
                                    <div id="SimpleGallery{INSTANCE}ThumbsAreaNaviRight" style="float: right; padding: 39px 1px; width: 10px; height: 21px; border: 1px solid #CCC;"><img src="images/SimpleGallery/NaviRightDisabled.png" alt="" /></div>
                                    <div id="SimpleGallery{INSTANCE}ThumbsAreaThumbs" style="padding: 2px 0px; height: 95px; font-size: 14px; border: 0px solid #CCC; border-width: 1px 0px;"></div>
                                    <div style="clear: both;"></div>
                                </div>
                            </div>
                        </div>
                        <div style="float: right; margin-left: 8px; width: 220px;">
                            <div id="SimpleGallery{INSTANCE}DescriptionArea" class="SimpleGalleryDescriptionArea"></div>
                        </div>
                        <div style="clear: both;"></div>
                    </div>
                </td>
                <td onclick="simpleGallery{INSTANCE}CloseImagePopup();"></td>
            </tr>
            <tr><td onclick="simpleGallery{INSTANCE}CloseImagePopup();"></td></tr>
        </table>
    </div>