﻿//Ermöglicht das einfache Erzeugen von Overlaydialogen.
//Verwendung:
//Einfach einen Beliebigen HTML Bereich mit einem Div umschließen und ihm die Klasse 'DivShadowBox' oder 'DivShadowBoxVisible' geben.
//Die DivShadowBoxVisible wird beim Laden der Seite bereits angezeigt, wärend die DivShadowBox standardmässig unsichtbar ist und erst mit
//ShowShadowBox(DivId) eingeblendet werden muss.
//Vorraussetzung ist, dass das DIV über eine eindeutige ID verfügt

var ShadowBoxImagePath = '../tools/images/shadowbox';

var initialized = false; 
function InitShadowBox() {

    if (!initialized) {
        initialized = true;
        var ShadowBoxDivs = GetByClass('DivShadowBox');
        for (var i = 0; i < ShadowBoxDivs.length; i++) {
            ReplaceDiv(ShadowBoxDivs[i], false, true);
        }

        var VisibleShadowBoxDivs = GetByClass('DivShadowBoxVisible');
        for (var i = 0; i < VisibleShadowBoxDivs.length; i++) {
            ReplaceDiv(VisibleShadowBoxDivs[i], true, true);
        }

        var ShadowBoxDivs = GetByClass('DivShadowBox_NoCloseBox');
        for (var i = 0; i < ShadowBoxDivs.length; i++) {
            ReplaceDiv(ShadowBoxDivs[i], false, false);
        }

        var VisibleShadowBoxDivs = GetByClass('DivShadowBoxVisible_NoCloseBox');
        for (var i = 0; i < VisibleShadowBoxDivs.length; i++) {
            ReplaceDiv(VisibleShadowBoxDivs[i], true, false);
        }
    }
}

function ReplaceDiv(boxDiv, isVisible, hasCloseBox) {

    var NewBox = CreateBoxHtml(boxDiv.cloneNode(true), hasCloseBox);
    try {
        var OldHtml = boxDiv.innerHTML;
        boxDiv.parentNode.appendChild(NewBox);
        boxDiv.parentNode.removeChild(boxDiv);

        if (!isVisible) {
            HideShadowBox(boxDiv.id);
        }
        else {
            ShowShadowBox(boxDiv.id);
        }
    }
    catch (er) {
        alert("ERROR :" + er.message + "\n\n" + NewBox.innerHTML);
    }

}

function CreateBoxHtml(contentToAppend, hasCloseBox)
{
	//OuterFrame
	var ShadowBoxOuterFrame = document.createElement('table');
	ShadowBoxOuterFrame.className = 'ShadowBoxOuterFrame';
	ShadowBoxOuterFrame.cellPadding = '0';
	ShadowBoxOuterFrame.cellSpacing = '0';	
	ShadowBoxOuterFrame.id = 'ShadowBox_'+contentToAppend.id;
	var SbRow = document.createElement('tr');
	ShadowBoxOuterFrame.appendChild(SbRow);	
	var SbTd = document.createElement('td');
	SbTd.vAlign = 'middle';
	SbTd.align = 'center';
	SbRow.appendChild(SbTd);		
	
	//Inner Table	
	var ShadowBoxInnerFrame = document.createElement('table');
	ShadowBoxInnerFrame .cellPadding = '0';
	ShadowBoxInnerFrame .cellSpacing = '0';	
	ShadowBoxInnerFrame.className = 'ShadowBoxInnerFrame';

	if (hasCloseBox) {
	    //Button Row
	    var SbInnerFrameRow1 = document.createElement('tr');
	    ShadowBoxInnerFrame.appendChild(SbInnerFrameRow1);
	    var SbButtonRowCell = document.createElement('td');
	    SbButtonRowCell.colSpan = '3';
	    SbButtonRowCell.className = 'ShadowBoxCloseButtonRow'
	    SbInnerFrameRow1.appendChild(SbButtonRowCell);

	    var CloseButtonImg = document.createElement('img');
	    CloseButtonImg.src = ShadowBoxImagePath + '/closebox.png';
	    CloseButtonImg.className = 'ShadowBoxCloseButton';
	    CloseButtonImg.onclick = function () { HideShadowBox(contentToAppend.id); }
	    SbButtonRowCell.appendChild(CloseButtonImg);
	}

	var SpacerImage = document.createElement('img');
	SpacerImage.src = ShadowBoxImagePath + '/spacer.gif';
	SpacerImage.width = '27px';
	SpacerImage.height = '25px';

	//HeadShaddowRow
	var SbInnerFrameRow2 = document.createElement('tr');
	ShadowBoxInnerFrame.appendChild(SbInnerFrameRow2 );	
	
	var SbTopLeft = document.createElement('td');
	SbTopLeft.className = 'ShadowBoxTopLeft'	
	SbInnerFrameRow2.appendChild(SbTopLeft);
	SbTopLeft.appendChild(SpacerImage.cloneNode(true));
	var SbTop = document.createElement('td');
	SbTop.className = 'ShadowBoxTop'	
	SbInnerFrameRow2.appendChild(SbTop );
	SbTop.appendChild(SpacerImage.cloneNode(true));
	var SbTopRight = document.createElement('td');
	SbTopRight.className = 'ShadowBoxTopRight'	
	SbInnerFrameRow2.appendChild(SbTopRight);
	SbTopRight.appendChild(SpacerImage.cloneNode(true));
	
	//ContentShaddowRow
	var SbInnerFrameRow3 = document.createElement('tr');
	ShadowBoxInnerFrame.appendChild(SbInnerFrameRow3 );	
	
	var SbLeft = document.createElement('td');
	SbLeft .className = 'ShadowBoxLeft'	
	SbInnerFrameRow3 .appendChild(SbLeft );
	SbLeft.appendChild(SpacerImage.cloneNode(true));
	var SbContent = document.createElement('td');
	SbContent.className = 'ShadowBoxContent'	
	SbInnerFrameRow3.appendChild(SbContent );
	SbContent.appendChild(contentToAppend);
	var SbRight = document.createElement('td');
	SbRight .className = 'ShadowBoxRight'	
	SbInnerFrameRow3 .appendChild(SbRight );
	SbRight.appendChild(SpacerImage.cloneNode(true));


	//BottomShaddowRow
	var SbInnerFrameRow4 = document.createElement('tr');
	ShadowBoxInnerFrame.appendChild(SbInnerFrameRow4 );	
	
	var SbBottomLeft = document.createElement('td');
	SbBottomLeft .className = 'ShadowBoxBottomLeft'	
	SbInnerFrameRow4 .appendChild(SbBottomLeft );
	SbBottomLeft .appendChild(SpacerImage.cloneNode(true));
	var SbBottom = document.createElement('td');
	SbBottom .className = 'ShadowBoxBottom'	
	SbInnerFrameRow4 .appendChild(SbBottom );
	SbBottom .appendChild(SpacerImage.cloneNode(true));
	var SbBottomRight = document.createElement('td');
	SbBottomRight .className = 'ShadowBoxBottomRight'	
	SbInnerFrameRow4 .appendChild(SbBottomRight);
	SbBottomRight .appendChild(SpacerImage.cloneNode(true));

	
	SbTd.appendChild(ShadowBoxInnerFrame);
	
	return ShadowBoxOuterFrame;
}

function ShowShadowBox(boxId)
{

	var Box = document.getElementById('ShadowBox_'+boxId);
	if(Box !=null)
	{
		Box.style.display = '';
	}
}

function HideShadowBox(boxId)
{
	var Box = document.getElementById('ShadowBox_'+boxId);
	if(Box!=null)
	{
		Box.style.display = 'none';
	}
}


function GetByClass(className)
{
	if (document.getElementsByClassName == undefined) 
	{
		document.getElementsByClassName = function(className)
		{
			var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
			var allElements = document.getElementsByTagName("*");
			var results = [];
	
			var element;
			for (var i = 0; (element = allElements[i]) != null; i++) {
				var elementClass = element.className;
				if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
					results.push(element);
			}
	
			return results;
		}
	}

	return document.getElementsByClassName(className);

}
