/*
HTML:
<div id="collectie.w" style="repeat:w;">
	<img src="" alt="" class="imggroot" id="algrepimg.w" /> ***classname mag je NIET veranderen***
	<p></p> ***als deze p er staat betekent dat voor deze class dat het om een youtube filmpje gaat en zal de inhoud van de p gebruikt worden als youtubecode***
</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)
div.youTubeOverlay (voor de image over de image heen als het gaat om een youtube filmpje)

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.

YOUTUBE:
als het om een youtube popup gaat, dan MOET er een div om de image en de p staan waar de video van gemaakt wordt.
goed voorbeeld: BCE

*/

PT.Sites.General.ShowImgAlt = function (divrep, sluitknopsrc, ytoverlay){
	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;
	this.ytoverlay = ytoverlay?ytoverlay:"";

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

PT.Sites.General.ShowImgAlt.prototype.initShowImgAlt = function (){
	var me = this;
	var zt = document.createElement('div');

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

	this.grotediv = document.createElement('div');
	this.grotediv.className = "showImgPopup";
	this.sluitendiv = document.createElement('div');
	this.sluitendiv.className = "sluitdiv";
	this.sluitknop = document.createElement('img');
	this.sluitknop.alt = "Sluiten";
	this.sluitknop.className = "sluitknop png";
	this.sluitknop.src = this.sluitknopsrc;
	document.body.appendChild(this.grotediv);
	
	PT.Sites.General.RegisterEvent(this.sluitknop, "click", function() { me.toggleVergroting(me.grotediv);me.toggleVergroting(zt);return false;});
	
	var imgs = this.divrep[0].getElementsByTagName('img');
	if(imgs.length!=0){
		for(var i=0; i<imgs.length; i++){
			var ytcode = imgs[i].parentNode.getElementsByTagName('p');
			if(ytcode.length>0){
				ytcode = ytcode[0].innerHTML
			}
			if(typeof(ytcode)=="string"){
				var div = document.createElement('div');
				div.className = "youTubeOverlay";
				div.style.width = imgs[i].clientWidth + "px";
				div.style.height = imgs[i].clientHeight + "px";
				imgs[i].parentNode.appendChild(div);
				div.onclick = function(){me.clickYoutube(this);return false;};
			}
			else{
				imgs[i].onclick = function() {me.clickImg(this);return false;};
			}
		}
	}
}

PT.Sites.General.ShowImgAlt.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.General.ShowImgAlt.prototype.clickImg = function (obj){
	var bladerdiv = document.createElement('div');
	this.bladerdiv = bladerdiv;
	this.bladerdiv.style.display="none";
	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.grotediv.innerHTML = "";
	this.grotediv.appendChild(this.sluitendiv);
	this.sluitendiv.appendChild(this.sluitknop);
	this.grotediv.appendChild(this.bladerdiv);
	this.grotediv.appendChild(grotefoto);

	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 a=img[i].id.split(".");var b=parseInt(a[0].substring(a[0].length-1));if(isNaN(b)){b=1;}a=a[1].split(":");
			var c=obj.id.split(".");var d=parseInt(c[0].substring(c[0].length-1));if(isNaN(d)){d=1;}c=c[1].split(":");
			//als gelijk is, gaat plaatjemiddel in src zetten
			if (a[0] == c[0] && b==d) {
				if(this.watermark!=""){
					grotefoto.src = img[i].src;
					grotefoto.src = "/sites/_pub/asp/watermark.aspx?ori="+img[i].src.split("http://cmssites.paradesk.nl")[1]+"&wm="+this.watermark;
					grotefoto.alt = img[i].alt;
				}
				else{
					grotefoto.src = img[i].src;
					grotefoto.alt = 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.General.ShowImgAlt.prototype.clickYoutube = function(obj){
	var code = obj.parentNode.getElementsByTagName('p')[0].innerHTML || "";
	this.grotediv.innerHTML = "";
	this.grotediv.appendChild(this.sluitendiv);
	this.sluitendiv.appendChild(this.sluitknop);
	ytDiv = document.createElement('div');
	this.grotediv.appendChild(ytDiv);
	var me = this;	
	ytDiv.innerHTML = '<object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/'+code+'?fs=1&amp;hl=en_US&amp;rel=0&amp;hd=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/'+code+'?fs=1&amp;hl=en_US&amp;rel=0&amp;hd=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>';
	
	if(document.all){var scrollbar = document.documentElement.scrollTop;}
	else{var scrollbar = pageYOffset;}
	
	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.General.ShowImgAlt.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;
	}
	
	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";
}