/*
HTML:
<div id="collectie.w" style="repeat:w;">
<img src="" alt="" class="imggroot" id="algrepimg.w" /> ***classname mag je niet veranderen***
</div>

<div class="divrep"> ***classname mag je veranderen***
<div id="divrep.q" style="repeat:q;">
<img src="" alt="" id="algrepimg.q"/>
</div>
</div>

GEBRUIKTE CLASSNAMES:
div.showImgPopup (popupdiv)
div.sluidiv (div met kruisje erin)
img.sluitknop (kruisje)
img.popupimg (vergroting van foto)
div.zwart_transparant (voor zwarte achtergrond)

AANROEPEN:
PT.Instances.ShowImg1 = new PT.Sites.General.ShowImgAlt("divrep","/sites/257/images/sluiten.gif");
parameter 1: className van omringende div kleine images
parameter 2: src van image voor sluitenknopje

Het is ook mogelijk om meerdere images toe te voegen in je repetition. Het is dan van belang dat het laatste karakter voor de . een getal is.
De eerste hoeft niet perse een cijfer te bevatten, maar mag wel. Het is NIET toegestaan om de eerste image geen cijfer mee te geven en dan de tweede image het cijfer 1 mee te geven.
Voorbeeld:
<div class="divrep">
<div id="divrep.q" style="repeat:q;">
<img src="" alt="" id="algrepimg.q"/>
<img src="" alt="" id="algrepimg2.q"/>
<img src="" alt="" id="algrepimg3.q"/>
</div>
</div>

INDIEN GEEN REPETITION MAAR HARD AANTAL AANGEGEVEN IMAGES:
Geef de images de id's .1, .2 enz mee. dus bij image.1, image2.2 e.d
De grote images geef je dan een : mee b.v. image.1: voor door de validatie door te komen.

*/

PT.Sites.ST11.ShowImgTitel = function(homeimg, sluitknopsrc) {
	var me = this;
	this.thumbClass = homeimg || "homeimg"; // classname of thumbnail image
	this.largeClass = "imggroot"; // classname of large image
	this.grotefoto = null;
	this.grotediv = null;
	this.zt = null;
	this.sluitknopsrc = sluitknopsrc;
	this.blader = false;
	this.watermark = "";
	this.bladerdiv = null;
	this.huidigimg = null;
	this.index = null;

	// collect all images

	//<div id="images_nest_rep.1.3">
	//<img src="/sites/193/images/93404.jpg" alt="Tasjes - Uw winkelnaam" id="alg_img.1.3" class="homeimg"></img>
	//<img src="/sites/193/images/93404_1.jpg" alt="Tasjes - Uw winkelnaam" id="alg_img.1.3:50" class="imggroot"></img>
	//</div>
	this.imgArray = [];

	//var imgObjs = document.getElementsByClassName(this.thumbClass);
	var imgObjs = PT.Sites.General.GetElementsByClass(document, this.thumbClass);
	for (var i = 0; i < imgObjs.length; i++) {
		this.imgArray.push(
			{
				id: imgObjs[i].id,
				alt: imgObjs[i].alt,
				small: imgObjs[i].src,
				//				large: imgObjs[i].parentNode.getElementsByClassName(this.largeClass)[0].src
				large: PT.Sites.General.GetElementsByClass(imgObjs[i].parentNode, this.largeClass)[0].src
			}
		);
	}

	this.initShowImgTitel();
}

PT.Sites.ST11.ShowImgTitel.prototype.initShowImgTitel = function() {
	var me = this;
	var zt = document.createElement('div');

	zt.className = "zwart_transparant";
	document.body.appendChild(zt);
	this.zt = zt;

	var grotediv = document.createElement('div');
	grotediv.className = "showImgPopup";
	this.grotediv = grotediv;
	var sluitendiv = document.createElement('div');
	sluitendiv.className = "sluitdiv";
	var sluitknop = document.createElement('img');
	sluitknop.alt = "Sluiten";
	sluitknop.className = "sluitknop";
	sluitknop.src = this.sluitknopsrc;

	PT.Sites.General.RegisterEvent(sluitknop, "click", function() { me.toggleVergroting(grotediv); me.toggleVergroting(zt); return false; });

	var bladerdiv = document.createElement('div');
	this.bladerdiv = bladerdiv;
	this.bladerdiv.style.display = "block";
	this.bladerdiv.className = "bladerdiv";
	this.bladerdiv.innerHTML = "<a class='prev' href=\"#\"><img src='/sites/_sitetemplate/11/images/prev.gif'/></a><a class='next' href=\"#\"><img src='/sites/_sitetemplate/11/images/next.gif'/></a>";

	PT.Sites.General.RegisterEvent(this.bladerdiv.getElementsByTagName('a')[0], "click", function() { me.bladerimg('-1'); return false; });
	PT.Sites.General.RegisterEvent(this.bladerdiv.getElementsByTagName('a')[1], "click", function() { me.bladerimg('+1'); return false; });

	var fototitel = document.createElement('p');
	fototitel.className = "popuptitel";
	this.fototitel = fototitel;
	var grotefoto = document.createElement('img');
	grotefoto.className = "popupimg";
	this.grotefoto = grotefoto;

	document.body.appendChild(grotediv);
	grotediv.appendChild(sluitendiv);
	sluitendiv.appendChild(sluitknop);
	grotediv.appendChild(bladerdiv);
	grotediv.appendChild(fototitel);
	grotediv.appendChild(grotefoto);

	// add onclick function to each thumbnail
	for (var i = 0; i < this.imgArray.length; i++) {
		var e = document.getElementById(this.imgArray[i].id);
		e.onclick = function() { me.clickImg(this); return false; };
	}
}

PT.Sites.ST11.ShowImgTitel.prototype.toggleVergroting = function (el) {
	var me = this;
	if (PT.Sites.General.GetStyle(el, 'display') == 'none') {
		el.style.display = 'block';
	}
	else {
		el.style.display = 'none';
	}
}

PT.Sites.ST11.ShowImgTitel.prototype.clickImg = function(obj) {
	var me = this;

	// find the selected image
	var selectedIndex = 0;
	for (var i = 0; i < this.imgArray.length; i++) {
		if (obj.id == this.imgArray[i].id) {
			selectedIndex = i;
			break;
		}
	}

	var selImg = this.imgArray[selectedIndex];

	if (this.watermark != "") {
		this.grotefoto.src = selImg.large;
		this.grotefoto.src = "/sites/_pub/asp/watermark.aspx?ori=" + selImg.large.split("http://cmssites.paradesk.nl")[1] + "&wm=" + this.watermark;
		this.grotefoto.alt = selImg.alt;
	}
	else {
		this.grotefoto.src = selImg.large;
		this.grotefoto.alt = selImg.alt;
		this.fototitel.innerHTML = selImg.alt;
	}
	if (selImg.alt == '') {
		this.fototitel.style.display = 'none';
		this.fototitel.innerHTML = '';
	}
	else {
		this.fototitel.style.display = 'block';
		this.fototitel.innerHTML = selImg.alt;
	}
	this.huidigimg = selImg;

	if (document.all) {
		var scrollbar = document.documentElement.scrollTop;
	}
	else {
		var scrollbar = pageYOffset;
	}

	if (this.blader == true && PT.Sites.General.GetElementsByClass(document, 'imggroot').length > 1) { // bladeren is toegestaan
		this.bladerdiv.style.display = "block";
	}

	var hoogtescherm = document.body.offsetHeight;
	var breedtescherm = document.body.offsetWidth;
	var scrollhoogte = document.documentElement.scrollHeight;
	me.toggleVergroting(this.grotediv);
	if (PT.Browser.isIE7 || PT.Browser.isIE8) {
		this.grotediv.style.marginTop = ((hoogtescherm - this.grotediv.clientHeight) / 2) + scrollbar + "px";
	}
	else {
		this.grotediv.style.marginTop = (window.screen.height - this.grotediv.clientHeight) / 2 - 70 + "px";
		setTimeout(function() { window.scrollTo(0, 0); }, 1);
	}
	this.grotediv.style.marginLeft = (breedtescherm - this.grotediv.clientWidth) / 2 + "px";

	this.zt.style.width = document.documentElement.scrollWidth + "px";
	this.zt.style.height = document.documentElement.scrollHeight + "px";
	me.toggleVergroting(this.zt);

	return
}

PT.Sites.ST11.ShowImgTitel.prototype.bladerimg = function(richting) {
	// find the selected image
	var selectedIndex = 0;
	for (var i = 0; i < this.imgArray.length; i++) {
		if (this.huidigimg.id == this.imgArray[i].id) {
			selectedIndex = i;
			break;
		}
	}

	var selImg = this.imgArray[selectedIndex];

	if (selectedIndex == null) { selectedIndex = 0; }

	var newIndex = 0;
	if (richting == '+1') {
		if (selectedIndex + 1 >= this.imgArray.length) { newIndex = 0; }
		else { newIndex = selectedIndex + 1; }
	}
	else if (richting == '-1') {
		if (selectedIndex - 1 < 0) { newIndex = this.imgArray.length - 1; }
		else { newIndex = selectedIndex - 1; }
	}

	this.huidigimg = this.imgArray[newIndex];
	if (this.watermark != "") {
		this.grotefoto.src = this.imgArray[newIndex].large;
		this.grotefoto.src = "/sites/_pub/asp/watermark.aspx?ori=" + this.imgArray[newIndex].large.split("http://cmssites.paradesk.nl")[1] + "&wm=" + this.watermark;
		this.grotefoto.alt = this.imgArray[newIndex].alt;
	}
	else {
		this.grotefoto.src = this.imgArray[newIndex].large;
		this.grotefoto.alt = this.imgArray[newIndex].alt;
	}
	this.fototitel.innerHTML = this.grotefoto.alt;

	if (document.all) {
		var scrollbar = document.documentElement.scrollTop;
	}
	else {
		var scrollbar = pageYOffset;
	}

	var breedtescherm = document.body.offsetWidth;
	var hoogtescherm = document.body.offsetHeight;
	var scrollhoogte = document.documentElement.scrollHeight;
	this.grotediv.style.marginTop = (hoogtescherm - this.grotediv.clientHeight) / 2 + scrollbar + "px";
	this.grotediv.style.marginLeft = (breedtescherm - this.grotediv.clientWidth) / 2 + "px";

}