/***************************************************************************************/
/* filename: DV.js */
/* version: 1.5 */
/* last modified: 22.04.2007 */
/* author: Axel Schneider */
/* mail: mail@axelschneider.info */
/* www: http://javascript.axelschneider.info */
/* */
/* description: This JavaScript is showing a picture in a */
/* division-container. This procedure substitutes */
/* the ordinary way to open a new window. The Pic */
/* is shown in the middle of the current window. If the */
/* screen-resolution is smaller than the width */
/* and/or height it is resized to the largest */
/* possible size. */
/* */
/* advantages: - there occure no problems with pop-up-blockers. */
/* - picture is shown independently of the screen-resolution as one item*/
/* - customizable settings */
/* */
/* customization: you may vary some settings */
/* - closingSign: the sign which is shown in the upper right corner to*/
/* close/hide the picture. you could use text or an */
/* image. */
/* - loadingSign: the sign which is shown at the bottom in the left */
/* corner. it is visible as long as the picture is */
/* loading. you could use text or an image. */
/* - borderDV: the width of the border around the picture in pixel.*/
/* - spaceDV: the minimal space which should be between the shown */
/* image and the (inner) browser-border. */
/* - borderColorDV: color of the border which is around the picture. */
/* - bgColorDV: background-color for the closing-sign. if it is set */
/* to empty the background is transparent. */
/* - bgOpacity: degree of transparancy (0-100) */
/* - baseZIndex: minimum z-index -> used to bring the DivViewer to */
/* the front */
/* */
/* usage: append the function "dv.showDV('')" */
/* to a certain event. */
/* the image-tag needs to consist of the width */
/* and height-attribute. to avoid the problem of */
/* multi-nested single and double apostrophe use */
/* a javascript variable for the image-tag. eg.: */
/* var myPic = ''; */
/* */
/* to use the before-next-functionality you have to provide an array */
/* which consists of all img-tags to the dv-instance. eg.: */
/* var myPic = new Array(); */
/* myPic[0] = ''; */
/* dv.setAllImagesArray(myPicArray); */
/* */
/* example: click here */
/* */
/* history: 22.09.2006 - added functionality of alt (title) */
/* 11.02.2007 - added opacity for loading, closing and before-next-signs*/
/* - added functionality to navigate to the last and next */
/* image */
/* 20.04.2007 - added the option to vary z-index of the DivViewer */
/* 22.04.2007 - fixed bug with not cleared error-message */
/* */
/***************************************************************************************/


//attributes you may vary
var closingSign = "x"; //the sign in the upper right corner which signs to close the viewer
var loadingSign = "L.O.A.D.I.N.G"; //the sign in the loading-div
var beforeSign = "<"; //the sign to show the last image
var nextSign = ">"; //the sign to show the next image
var borderDV = 2; //border-width arround the viewer
var spaceDV = 20; //space between the viewer and the inner-window
var borderColorDV = "#ffffff"; //border color and the color of the closing-sign-text
var bgColorDV = "#A7A8C7"; //background color for the closing sign
var bgOpacity = 40; //opacity in percent
var baseZIndex = 1000; //z-Index -> show the DivViewer at the front


//DO NOT CHANGE ANYTHING IF YOU ARE NOT FAMILIAR WITH JAVASCRIPT NOW

/**********************************************************************/
/* DivViewer */
/**********************************************************************/

//create DV-Object
var dv = new DVObject();

function initDV() {
//write html code to the document
dv.writeHtmlCode();

//initialize the dhtml-library
DHTML_init();

//set attributes
dv.setAttributes();
}

function DVObject() {
//attributes
this.htmlCode;
this.parentDV;
this.childDVCont;
this.childDVClose;
this.childDVLoad;
this.childDVBeforeAndNext;
this.childDVTblBeforeAndNext;
this.childDVBefore;
this.childDVNext;
this.errorMessage;
this.img = new DVImg();
this.swapImg;
this.allImages;
this.currentDisplayedImage;

//general functions for the div-viewer
// # writeHtmlCode()
// # setAttributes()
// # showDV()
// # hideDV()
// # showLoadDV()
// # checkImgParameter()
// # checkLoad()
// # regSearch()
// # regSearchNumber()
// # getMiddlePosition()
// # getScreenSize()
// # decodeHtml()
// # setOpacityStyle()
// # getOpacityValue()

//functions for a before-next-functionality
// # setAllImagesArray()
// # checkBeforeAndNextImages()
// # showLastImage()
// # showNextImage()
// # getPositionOfImage()
}
function DVImg() {
this.src;
this.width;
this.height;
this.border;
this.alt;
}
// # writeHtmlCode()
DVObject.prototype.writeHtmlCode = function() {
//the DV-Object consists of two inner divs
// # content-div
// # close-div

//build the html code
dv.htmlCode = '<div id="parentDV">\n' +
'<div id="childDVCont"></div>\n' +
'<div id="childDVLoad">'+loadingSign+'</div>' +
'<div id="childDVClose" onClick="dv.hideDV();" title="Schliessen!">'+closingSign+'</div>' +
'<div id="childDVBeforeAndNext">' +
' ' +
' ' +
' ' +
' ' +
' ' +
'

<div id="childDVBefore" onClick="dv.showLastImage();" title="Vorheriges Bild">'+beforeSign+'</div>

<div id="childDVNext" onClick="dv.showNextImage();" title="Nächstes Bild">'+nextSign+'</div>

' +
'</div>' +
'</div>';
//write the code to the document
window.document.writeln(dv.htmlCode);
};
// # setAttributes()
DVObject.prototype.setAttributes = function() {
//get the html-object of the divs to change their attributes
dv.parentDV = getElem("id", "parentDV", null);
dv.childDVCont = getElem("id", "childDVCont", null);
dv.childDVClose = getElem("id", "childDVClose", null);
dv.childDVLoad = getElem("id", "childDVLoad", null);
dv.childDVBeforeAndNext = getElem("id", "childDVBeforeAndNext", null);
dv.childDVTblBeforeAndNext = getElem("id", "childDVTblBeforeAndNext", null);
dv.childDVBefore = getElem("id", "childDVBefore", null);
dv.childDVNext = getElem("id", "childDVNext", null);

//set the style attributes to the divs
with(dv.parentDV.style) {
position = "absolute";
zIndex = baseZIndex+100;
border = borderDV+"px solid "+borderColorDV;
visibility = "hidden";
}
with(dv.childDVCont.style) {
position = "relative";
zIndex = baseZIndex+1;
visibility = "hidden";
}
with(dv.childDVClose.style) {
position = "absolute";
zIndex = baseZIndex+2;
cursor = "pointer";
right = borderDV;
top = borderDV;
width = 25;
height = 20;
textAlign = "center";
verticalAlign = "middle";
border = borderDV+"px solid "+borderColorDV;
padding = 2;
color = borderColorDV;
backgroundColor = bgColorDV;
visibility = "hidden";
}
dv.setOpacityStyle(dv.childDVClose.style);

with(dv.childDVLoad.style) {
position = "absolute";
zIndex = baseZIndex+2;
left = borderDV;
bottom = borderDV;
height = 20;
textAlign = "center";
verticalAlign = "middle";
border = borderDV+"px solid "+borderColorDV;
padding = 2;
color = borderColorDV;
backgroundColor = bgColorDV;
visibility = "hidden";
}
dv.setOpacityStyle(dv.childDVLoad.style);

with(dv.childDVBeforeAndNext.style) {
position = "absolute";
zIndex = baseZIndex+2;
textAlign = "center";
verticalAlign = "middle";
top = borderDV;
left = borderDV;
height = 20;
border = borderDV+"px solid "+borderColorDV;
padding = 2;
color = borderColorDV;
backgroundColor = bgColorDV;
visibility = "hidden";
}
dv.setOpacityStyle(dv.childDVBeforeAndNext.style);

with(dv.childDVTblBeforeAndNext.style) {
border = "none";
height = 20;
borderSpacing = 0;
borderCollapse = "collapse";
emptyCells = "show";
padding = 0;
margin = 0;
textAlign = "center";
verticalAlign = "middle";
}

with(dv.childDVBefore.style) {
position = "relative";
zIndex = baseZIndex+1;
cursor = "pointer";
textAlign = "center";
verticalAlign = "middle";
height = 20;
padding = 2;
}

with(dv.childDVNext.style) {
position = "relative";
zIndex = baseZIndex+1;
cursor = "pointer";
textAlign = "center";
verticalAlign = "middle";
height = 20;
padding = 2;
}

//set swap-image-object
this.swapImg = document.images["picDV"];

//set error message
dv.errorMessage = "";
};
// # showDV()
DVObject.prototype.showDV = function(imgString) {
//first of all clear the error-message
dv.errorMessage="";

//hide the old image
dv.hideDV();

//does the parameter consist of the correct values
dv.checkImgParameter(imgString);
if(dv.errorMessage=="") {
//calculate the dimension of parentDV and childDVContent
var width = dv.img.width + 2*borderDV + 2*spaceDV;
var height = dv.img.height + 2*borderDV + 2*spaceDV;
var mid = dv.getMiddlePosition(width, height);

//swap the default-image
with(dv.swapImg) {
src = dv.img.src;
title = dv.img.alt;
alt = dv.img.title;
width = mid["width"] - (2*borderDV + 2*spaceDV);
height = mid["height"] - (2*borderDV + 2*spaceDV);
}
with(dv.parentDV.style) {
width = mid["width"] - (2*borderDV + 2*spaceDV);
height = mid["height"] - (2*borderDV + 2*spaceDV);
top = mid["top"] + borderDV + spaceDV;
left = mid["left"] + borderDV + spaceDV;
visibility = "visible";
}
with(dv.childDVCont.style) {
visibility = "visible";
}
with(dv.childDVClose.style) {
visibility = "visible";
}
with(dv.childDVBeforeAndNext.style) {
visibility = "visible";
}
dv.showLoadDV();
dv.checkBeforeAndNextImages(imgString);
} else alert(dv.errorMessage);
};
// # hideDV()
DVObject.prototype.hideDV = function() {
with(dv.parentDV.style) {
visibility = "hidden";
}
with(dv.childDVCont.style) {
visibility = "hidden";
}
with(dv.childDVClose.style) {
visibility = "hidden";
}
with(dv.childDVLoad.style) {
visibility = "hidden";
}
with(dv.childDVBeforeAndNext.style) {
visibility = "hidden";
}
with(dv.childDVBefore.style) {
visibility = "hidden";
}
with(dv.childDVNext.style) {
visibility = "hidden";
}
with(dv.swapImg) {
src = "";
width = 10;
height = 10;
}
};
// # showLoadDV()
DVObject.prototype.showLoadDV = function() {
with(dv.childDVLoad.style) {
visibility = "visible";
}
dv.checkLoad();
};
// # checkLoad
DVObject.prototype.checkLoad = function() {
if(document.images["picDV"].complete==false || dv.img.src=="") {
window.setTimeout("dv.checkLoad()", 200);
} else {
with(dv.childDVLoad.style) {
visibility = "hidden";
}
}
};
// # checkImgParameter
DVObject.prototype.checkImgParameter = function(imgString) {
if(imgString) {
var regSearchSrc = /src=["]?[a-zA-Z0-9.:_\-\/]+["]?/;
var regSearchWidth = /width=["]?\d+["]?/;
var regSearchHeight = /height=["]?\d+["]?/;
var regSearchAlt = /alt=["]?[a-zA-Z0-9._\/&; ]*["]?/;
var regSearchString = /[a-zA-Z0-9._\/]+/;

//check if the principle values are given
// # src
if(dv.regSearch(imgString, regSearchSrc, "test")) {
dv.img.src = dv.regSearch(imgString, regSearchSrc, "exec")+"";
dv.img.src = dv.img.src.substring(5, dv.img.src.length-1);
} else dv.errorMessage += "# The given Parameter within the dv.showDV-call does not consist of an src='...'!\n";
// # width
if(dv.regSearch(imgString, regSearchWidth, "test")) {
dv.img.width = parseInt(dv.regSearchNumber(dv.regSearch(imgString, regSearchWidth, "exec")));
} else dv.errorMessage += "# The given Parameter within the dv.showDV-call does not consist of an width='...'!\n";
// # height
if(dv.regSearch(imgString, regSearchHeight, "test")) {
dv.img.height = parseInt(dv.regSearchNumber(dv.regSearch(imgString, regSearchHeight, "exec")));
} else dv.errorMessage += "# The given Parameter within the dv.showDV-call does not consist of an hidth='...'!\n";
//check optional values
// # alt | title
if(dv.regSearch(imgString, regSearchAlt, "test")) {
dv.img.alt = dv.regSearch(imgString, regSearchAlt, "exec")+"";
dv.img.alt = dv.img.alt.substring(5, dv.img.alt.length-1);
dv.img.alt = dv.decodeHtml(dv.img.alt);
dv.img.title = dv.img.alt;
}
} else dv.errorMessage += "# The Parameter within the dv.showDV-call is null!\n";
};
// # decodeHtml()
DVObject.prototype.decodeHtml = function(encodedString) {
//exchanges some html-decoded signs
encodedString = encodedString.replace(/&auml;/, "ä");
encodedString = encodedString.replace(/&Auml;/, "Ä");
encodedString = encodedString.replace(/&uuml;/, "ü");
encodedString = encodedString.replace(/&Uuml;/, "Ü");
encodedString = encodedString.replace(/&ouml;/, "ö");
encodedString = encodedString.replace(/&Ouml;/, "Ö");
encodedString = encodedString.replace(/&szlig;/, "ß");

return encodedString;
};
// # regSearch()
DVObject.prototype.regSearch = function(regString, regSearch, fct) {
if(fct=="exec") return regSearch.exec(regString);
else if(fct=="test") return regSearch.test(regString);
else dv.errorMessage += "There is no fct-parameter given in the regSearch-call!";
};
// # regSearchNumber()
DVObject.prototype.regSearchNumber = function(paramString) {
if(!isFinite(paramString)) {
return dv.regSearch(paramString, /[-]?\d+([,.]\d+)?/, "exec");
} else dv.errorMessage += "The given string ("+paramString+") does not consist of a number!\n";
};
// # getMiddlePosition()
DVObject.prototype.getMiddlePosition = function(ow, oh) {
var sw = dv.getScreenSize("width", "inner");
var sh = dv.getScreenSize("height", "inner");
var mid = new Array(4);

//look if the picture is bigger than the screen resolution
if(sw<ow || sh<oh) {
//which dimension is relatively bigger in comparison to the screen resolution
if(sw/ow > sh/oh) { //height is bigger
var tmp = oh;
oh = sh;
ow = oh*ow/tmp;
} else { //width is bigger (or both)
var tmp = ow;
ow = sw;
oh = ow*oh/tmp;
}
}

mid["width"] = Math.round(ow);
mid["height"] = Math.round(oh);
if(sw/ow < sh/oh) mid["top"] = Math.round((sh-oh)/2); else mid["top"] = Math.round((sh-oh)/2);
if(sw/ow > sh/oh) mid["left"] = Math.round((sw-ow)/2); else mid["left"] = Math.round((sw-ow)/2);

//if you have scrollbars, you have to add the scrolled-pixel
if(MS) {
mid["top"] += document.body.scrollTop;
mid["left"] += document.body.scrollLeft;
} else {
mid["top"] += window.pageYOffset;
mid["left"] += window.pageXOffset;
}

return mid;
};
// # getScreenSize()
DVObject.prototype.getScreenSize = function(whichSize, whichWindow) {
var agt = navigator.userAgent.toLowerCase();
var isIE = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
var isW3C = (window.document.getElementById) ? true : false;

var size;
if(whichWindow=="inner") {
if(isIE) {
if(whichSize=='width') size = document.body.offsetWidth;
else size = document.body.offsetHeight;
} else if(isW3C) {
if(whichSize=='width') size = window.innerWidth;
else size = window.innerHeight;
} else BrowserFailure();
} else if(whichWindow=="outer") {
if(whichSize=='width') size = screen.availWidth;
if(whichSize=='height') size = screen.availHeight;
} else if(whichWindow=="max") {
if(whichSize=='width') size = screen.width;
if(whichSize=='height') size = screen.height;
} else ParameterFailure();
return size;
};
// # setAllImagesArray()
DVObject.prototype.setAllImagesArray = function(allImagesArray) {
dv.allImages = allImagesArray;
};
// # checkBeforeAndNextImages()
DVObject.prototype.checkBeforeAndNextImages = function(imgString) {
//is an image-array provided by the page and are there more than 1 images in it
if(!dv.allImages || !dv.allImages.length || dv.allImages.length<2)
{
with(dv.childDVBeforeAndNext.style) {
visibility = "hidden";
}
return;
}

//check position of the current-displayed image
dv.currentDisplayedImage = dv.getPositionOfImage(imgString);

//show before-sign
if(parseInt(dv.currentDisplayedImage)==0)
dv.childDVBefore.style.visibility = "hidden";
else
dv.childDVBefore.style.visibility = "visible";

//show next-sign
if(parseInt(dv.currentDisplayedImage)==parseInt(dv.allImages.length)-1)
dv.childDVNext.style.visibility = "hidden";
else
dv.childDVNext.style.visibility = "visible";

};
// # showLastImage()
DVObject.prototype.showLastImage = function() {
var tmp = dv.allImages[parseInt(dv.currentDisplayedImage)-1];
dv.showDV(tmp);
};
// # showNextImage()
DVObject.prototype.showNextImage = function() {
var tmp = dv.allImages[parseInt(dv.currentDisplayedImage)+1];
dv.showDV(tmp);
};
// # setOpacityStyle()
DVObject.prototype.setOpacityStyle = function(styleObject) {
with(styleObject)
{
opacity = dv.getOpacityValue("opacity"); //".50";
filter = dv.getOpacityValue("filter"); //"alpha(opacity=50)"
mozOpacity = dv.getOpacityValue("mozOpacity"); //"0.5";
}
};
// # getOpacityValue()
DVObject.prototype.getOpacityValue = function(opacityStyle) {
if(opacityStyle=="opacity")
return "."+bgOpacity;
else if(opacityStyle=="filter")
return "alpha(opacity="+bgOpacity+")";
else if(opacityStyle=="mozOpacity")
{
var v = bgOpacity/100;
return ""+v;
}
else
{
alert("Unknown kind of opacityStyle! Could not set opacity.");
return bgOpacity;
}
};
// # getPositionOfImage()
DVObject.prototype.getPositionOfImage = function(imgString) {
for(var index in dv.allImages)
{
if(dv.allImages[index]==imgString)
return index;
}
};


/**********************************************************************/
/* DHTML-Bibliothek (www.teamone.de/selfhtml) */
/**********************************************************************/

var DHTML = 0, DOM = 0, MS = 0, NS = 0, OP = 0;

function DHTML_init() {

if (window.opera) {
OP = 1;
}
if(document.getElementById) {
DHTML = 1;
DOM = 1;
}
if(document.all && !OP) {
DHTML = 1;
MS = 1;
}
if(document.layers && !OP) {
DHTML = 1;
NS = 1;
}
}

function getElem(p1,p2,p3) {
var Elem;
if(DOM) {
if(p1.toLowerCase()=="id") {
if (typeof document.getElementById(p2) == "object")
Elem = document.getElementById(p2);
else Elem = void(0);
return(Elem);
}
else if(p1.toLowerCase()=="name") {
if (typeof document.getElementsByName(p2) == "object")
Elem = document.getElementsByName(p2)[p3];
else Elem = void(0);
return(Elem);
}
else if(p1.toLowerCase()=="tagname") {
if (typeof document.getElementsByTagName(p2) == "object" ||
(OP && typeof document.getElementsByTagName(p2) == "function"))
Elem = document.getElementsByTagName(p2)[p3];
else Elem = void(0);
return(Elem);
}
else return void(0);
}
else if(MS) {
if(p1.toLowerCase()=="id") {
if (typeof document.all[p2] == "object")
Elem = document.all[p2];
else Elem = void(0);
return(Elem);
}
else if(p1.toLowerCase()=="tagname") {
if (typeof document.all.tags(p2) == "object")
Elem = document.all.tags(p2)[p3];
else Elem = void(0);
return(Elem);
}
else if(p1.toLowerCase()=="name") {
if (typeof document[p2] == "object")
Elem = document[p2];
else Elem = void(0);
return(Elem);
}
else return void(0);
}
else if(NS) {
if(p1.toLowerCase()=="id" || p1.toLowerCase()=="name") {
if (typeof document[p2] == "object")
Elem = document[p2];
else Elem = void(0);
return(Elem);
}
else if(p1.toLowerCase()=="index") {
if (typeof document.layers[p2] == "object")
Elem = document.layers[p2];
else Elem = void(0);
return(Elem);
}
else return void(0);
}
}

//the code for the view-div is written above the body-tag.. hope this does not matter
initDV();

function checkLoad() {
//do nothing
}