/*
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.Standaardwinkelcentrum.ShowImgTitel = function (divrep, sluitknopsrc){
	var me = this;
	this.divrep = PT.Sites.General.GetElementsByClass(document.body,divrep);
	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;

	if(this.divrep.length!=0){
		this.initShowImgTitel();
	}
}

PT.Sites.Standaardwinkelcentrum.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 png";
	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 href=\"#\">Vorige</a>&#160;|&#160;<a href=\"#\">Volgende</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 grotefoto = document.createElement('img');
	grotefoto.className = "popupimg";
	this.grotefoto = grotefoto;
	var fototitel = document.createElement('p');
	fototitel.className = "popuptitel";
	this.fototitel = fototitel;
	
	document.body.appendChild(grotediv);
	grotediv.appendChild(sluitendiv);
	sluitendiv.appendChild(sluitknop);
	grotediv.appendChild(bladerdiv);
	grotediv.appendChild(grotefoto);
	grotediv.appendChild(fototitel);
	
	var imgs = this.divrep[0].getElementsByTagName('img');
	if(imgs.length!=0){
		for(var i=0; i<imgs.length; i++){
			imgs[i].onclick = function() {me.clickImg(this);return false;};
		}
	}
}

PT.Sites.Standaardwinkelcentrum.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.Standaardwinkelcentrum.ShowImgTitel.prototype.clickImg = function(obj) {
	var me = this;
	var img = document.getElementsByTagName("img");
	for (var i = 0; i < img.length; i++) {
		//als class = plaatjemiddel, dan neem gedeelte na . en voor : Van imgklein en img met class
		if (img[i].className == 'imggroot') {
			var nr = img[i].id.split(".");
			var nrt = parseInt(nr[0].substring(nr[0].length - 1));
			if (isNaN(nrt)) { nrt = 1; }
			nr = nr[1].split(":");

			var nr2 = obj.id.split(".");
			var nrt2 = parseInt(nr2[0].substring(nr2[0].length - 1));
			if (isNaN(nrt2)) { nrt2 = 1; }
			nr2 = nr2[1].split(":");
			//als gelijk is, gaat plaatjemiddel in src zetten
			if (nr[0] == nr2[0] && nrt == nrt2) {
				if (this.watermark != "") {
					this.grotefoto.src = img[i].src;
					this.grotefoto.src = "/sites/_pub/asp/watermark.aspx?ori=" + img[i].src.split("http://cmssites.paradesk.nl")[1] + "&wm=" + this.watermark;
					this.grotefoto.alt = img[i].alt;
				}
				else {
					this.grotefoto.src = img[i].src;
					this.grotefoto.alt = img[i].alt;
					this.fototitel.innerHTML = img[i].alt;
				}
				if (img[i].alt == '') {
					this.fototitel.style.display = 'none';
					this.fototitel.innerHTML = '';
				}
				else {
					this.fototitel.style.display = 'block';
					this.fototitel.innerHTML = img[i].alt;
				}
				this.huidigimg = img[i];

				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);
			}
		}
	}
}

PT.Sites.Standaardwinkelcentrum.ShowImgTitel.prototype.bladerimg = function(richting) {
	var imgs = this.divrep[0].getElementsByTagName('img');
	for (var i = 0; i < imgs.length; i++) {
		if (imgs[i] == this.huidigimg) {
			this.index = i;
			break;
		}
	}
	if (this.index==null) {
		this.index = 0;
	}

	if (richting == '+1') {
		if (this.index + 1 >= imgs.length) {
			this.index = 0;
		}
		else {
			this.index++;
		}
	}
	else if (richting == '-1') {
		if (this.index - 1 < 0) {
			this.index = imgs.length - 1;
		}
		else {
			this.index--;
		}
	}
	var img = PT.Sites.General.GetElementsByClass(document, 'imggroot');
	this.huidigimg = img[this.index];
	if(this.watermark!=""){
		this.grotefoto.src = img[this.index].src;
		this.grotefoto.src = "/sites/_pub/asp/watermark.aspx?ori="+img[this.index].src.split("http://cmssites.paradesk.nl")[1]+"&wm="+this.watermark;
		this.grotefoto.alt = img[this.index].alt;
	}
	else{
		this.grotefoto.src = img[this.index].src;
		this.grotefoto.alt = img[this.index].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";
}