/*
===================================================================================================================================================================================== 
This script is used by calling the function createFotoLayer(startPic,endPic,selectedPic). It assumes the following is defined.

(i) An array imgArr, each element looking like:

		imgArr[.]=new Array(str1,i1,i2,i3,i4,str2)
		
, where:

> str1 is a string containing the basepath to the photos, the thumbnail should be located at basepath + "_thmb.jpg", the full photo at basepath + "_full.jpg",
> i1 (integer) is the width in pixels of the thumb
> i2 (integer) is the height in pixels for the thumb
> i3 (integer) is the width in pixels of the full version
> i4 (integer) is the height in pixels of the full version
> str2 is the comment (string) to go with the photo

(ii) A string dirGraph, where the graphical elements for the UI can be found

(iii) A string lang, defining the language (currently 'nl'/'en'/'de').

Furthermore, the variables startPic (integer) and endPic (integer) denote the lower and upper bound of the subset from imgArr of photos to be shown; selectedPic (integer) 
denotes the one from this subset which should initially be selected.   

Version 0.3, 20/04/2010, written by Kees van Schaik (keesvanschaik@gmail.com).
=====================================================================================================================================================================================
*/

var gl_currLoadedPhoto=0
var gl_displayWidth
var gl_borderWidthPhotosSlideShow
var gl_marginWidthPhotosSlideShow
var gl_showCounter

function createFotoLayer(startPic,endPic,selectedPic,showCounter) {
	var outWidth=700, outHeight=650, arrowWidth=45, slideShowHeight=50, slideShowPaddingBottom=10, slideShowPaddingTop=10, closeButtonHeight=20, arrowHeight=50	//arrowWidth=26
	var photoDivPaddingTop=20, photoDivPaddingBottom=20, photoDivPaddingLR=20, outerDivPaddingBottom=10, commentDivHeight=40
	gl_marginWidthPhotosSlideShow=10
	gl_borderWidthPhotosSlideShow=1
	gl_showCounter=showCounter
	
	if (startPic==endPic) {
		var singlePhotoMode=true
	} else {
		var singlePhotoMode=false
	}
	
	if (startPic==-1) {
		startPic=0
	}
	if (endPic==-1) {
		endPic=imgArr.length-1
	}
	if (selectedPic<startPic || selectedPic>endPic) {
		selectedPic=startPic
	}
	
	if (singlePhotoMode) {
		slideShowHeight=0
		closeButtonHeight=20
		outHeight=photoDivPaddingTop+imgArr[startPic][4]+photoDivPaddingBottom+closeButtonHeight+commentDivHeight
	} else {
		for (var i=startPic; i<=endPic; i++) {
			slideShowHeight=Math.max(slideShowHeight,imgArr[i][2])
		}	
		slideShowHeight+=slideShowPaddingBottom+slideShowPaddingTop

		var m=0
		for (var i=startPic; i<=endPic; i++) {
			m=Math.max(m,imgArr[i][4])
		}	
		outHeight=photoDivPaddingTop+m+photoDivPaddingBottom+closeButtonHeight+slideShowHeight+outerDivPaddingBottom+commentDivHeight
	}
	
	if (singlePhotoMode) {
		outWidth=2*photoDivPaddingLR+imgArr[startPic][3]
	} else {
		var w=0
		for (var i=startPic; i<=endPic; i++) {
			w=Math.max(w,imgArr[i][3])
		}	
		/* var w2=2*arrowWidth
		for (var i=startPic; i<=endPic; i++) {
			w2+=imgArr[i][1]+cellSpacSlideShow+2*gl_borderWidthPhotosSlideShow
		}
		w2+=cellSpacSlideShow
		outWidth=Math.max(w,w2)
		*/
		outWidth=w+2*photoDivPaddingLR
	}

	/* 1. Create div to mask page, id='div_masking': */
	var div1=document.createElement('div')  
	div1.setAttribute("id","div_masking")  
	document.body.appendChild(div1)  
	var divSty=document.getElementById("div_masking").style  
	divSty.top="0px" 
	divSty.left="0px"
	divSty.right="0px"
	/* origineel:
	divSty.position="absolute"
	divSty.bottom="0px"
	*/
	/* test: */
    divSty.position="fixed"   //seems not to work in older versions of IE...
    divSty.bottom="0px"
	/* einde test */
	divSty.zIndex="10" 
	divSty.opacity=".50"
	divSty.backgroundColor="#000"  
	divSty.filter="alpha(opacity=50)"

	/* 2. Create main div in which photo's will be shown, id='div_photoContainer': */
	var div2=document.createElement('div')
	div2.setAttribute("align","center")
	div2.style.margin = "0px auto"
	div2.setAttribute('id','div_photoContainer')
	document.body.appendChild(div2)
	var divSty=document.getElementById('div_photoContainer').style
	divSty.position="absolute"
	divSty.width=outWidth + 'px' //'600px'
	divSty.height=outHeight + 'px' //'400px'
	divSty.paddingBottom=outerDivPaddingBottom+'px'
	divSty.background='white'
	divSty.border='ridge 2px #3D0000'
	divSty.zIndex="11"
	var arrSize=getWindowSize()
	//alert("Width: " + arr[0] + ", Height: " + arr[1])
	divSty.left=(Math.max(20,Math.floor((arrSize[0]-parseInt(divSty.width))/2))).toString() + 'px'
	//alert((Math.max(20,Math.floor((arrSize[0]-parseInt(divSty.width))/2))).toString() + 'px')
	divSty.top='20px'
	
	/* 3. Fill main div: */
	//3a. Upper div containing the photo in focus:
	var div7=document.createElement('div')
	div7.setAttribute('id','div_photoMainDisplay')
	document.getElementById('div_photoContainer').appendChild(div7)
	var divSty=document.getElementById('div_photoMainDisplay').style
	//divSty.background='green'
	divSty.position="absolute"
	divSty.margin = "0px auto"
	divSty.paddingTop=photoDivPaddingTop+'px'
	divSty.paddingBottom='5px'
	divSty.width=outWidth + 'px'
	divSty.height=(outHeight-slideShowHeight-outerDivPaddingBottom-closeButtonHeight-commentDivHeight)+'px'
	divSty.left='0px'
	divSty.top='0px'
	
	//3b. Middle divs containing the comment & close button:
	var div11=document.createElement('div')
	div11.setAttribute('id','div_photoComment')
	document.getElementById('div_photoContainer').appendChild(div11)
	var divSty=document.getElementById('div_photoComment').style
	//divSty.background='yellow'
	divSty.position="absolute"
	//divSty.margin = "0px auto"
	divSty.width=(outWidth-40) + 'px'
	divSty.height=commentDivHeight+'px'
	divSty.float='left'
	divSty.left='0px'
	divSty.textAlign='center'
	divSty.top=(outHeight-slideShowHeight-outerDivPaddingBottom-closeButtonHeight-commentDivHeight)+'px'
	divSty.paddingLeft='20px'
	divSty.paddingRight='20px'
	//divSty.paddingBottom=photoDivPaddingBottom+'px'
	//document.getElementById('div_photoComment').innerHTML='Test'
	
	var div8=document.createElement('div')
	div8.setAttribute('id','div_photoCloseButton')
	document.getElementById('div_photoContainer').appendChild(div8)
	var divSty=document.getElementById('div_photoCloseButton').style
	//divSty.background='green'
	divSty.position="absolute"
	//divSty.margin = "0px auto"
	divSty.width='50px'
	divSty.height=closeButtonHeight+'px'
	divSty.right='0px'
	divSty.top=(outHeight-slideShowHeight-outerDivPaddingBottom-closeButtonHeight)+'px'
	divSty.paddingRight='20px'
	divSty.paddingBottom='5px'
	if (lang=='nl') {
	    msg='Sluiten'
	}
	if (lang=='en') {
	    msg='Close'
	}
	if (lang=='de') {
	    msg='Schlie&szlig;en'
	}
	if (lang=='pl') {
	    msg='Zamknij'
	}
	document.getElementById('div_photoCloseButton').innerHTML="<a href='javascript:delFotoLayer()' class='KImgViewer'><span style='font-family:verdana; font-size:10pt; font-weight:bolder'>"+msg+"</span></a>"
	
	//Exit here if singlePhotoMode==true:
	if (singlePhotoMode) {
		loadPhotos(startPic,endPic,selectedPic)
		return
	}
	
	//3c. Lower divs containing the slideshow with all loaded photo's:
	var div3=document.createElement('div')
	div3.setAttribute('id','div_slideShowMain')
	document.getElementById('div_photoContainer').appendChild(div3)
	var divSty=document.getElementById('div_slideShowMain').style
	divSty.position="absolute"
	divSty.width=outWidth + 'px'
	divSty.height=slideShowHeight+'px'
	divSty.overflow='hidden'
	divSty.left='0px'
	//divSty.bottom='0px'
	divSty.top=(outHeight-slideShowHeight-outerDivPaddingBottom)+'px'
	
	//Left arrow:
	var div4=document.createElement('div')
	div4.setAttribute('id','div_leftArrow')
	document.getElementById('div_slideShowMain').appendChild(div4)
	var divSty=document.getElementById('div_leftArrow').style
	divSty.position="absolute"
	divSty.width=arrowWidth+'px'
	divSty.height=slideShowHeight+'px'
	divSty.left='0px'
	divSty.top='0px'
	divSty.paddingTop=Math.max(0,Math.floor((slideShowHeight-arrowHeight)/2))+'px'
	var img=document.createElement('img')
	img.setAttribute('src',dirGraph + 'Arrow_left_brown.png')
	img.setAttribute('id','img_leftArrow')
	img.setAttribute('class','KImgViewer')
	img.className='KImgViewer'
	document.getElementById('div_leftArrow').appendChild(img)
	var imgEl=document.getElementById('img_leftArrow')
	//alert(imgEl)
	//imgEl.style='margin:0px auto'
	imgEl.onmouseover=function() {this.src=dirGraph + 'Arrow_left.png'}
	imgEl.onmouseout=function() {this.src=dirGraph + 'Arrow_left_brown.png'}
	imgEl.onclick=function() {prevPhoto(startPic,endPic)}
	/*
	var t1='this.src=\'Arrow_left.png\''
	var t2='this.src=\'Arrow_left_brown.png\''
	var inh='<a href="javascript:prevPhoto(' + startPic + ',' + endPic + ')"><img src="Arrow_left_brown.png" border=0 style="margin:0px auto" onMouseover="' + t1 + '" onMouseout="' + t2 + '"></a>'
	//var inh='<a href="javascript:prevPhoto()"><img src="Arrow_left_brown.png" border=0 style="margin:0px auto" onMouseover="alert(\'Dik\')"></a>'
	document.getElementById('div_leftArrow').innerHTML=inh
	*/
	
 	//Right arrow:
	var div5=document.createElement('div')
	div5.setAttribute('id','div_rightArrow')
	document.getElementById('div_slideShowMain').appendChild(div5)
	var divSty=document.getElementById('div_rightArrow').style
	divSty.position="absolute"
	divSty.width=arrowWidth+'px'
	divSty.height=slideShowHeight+'px'
	divSty.right='0px'
	divSty.top='0px'
	divSty.paddingTop=Math.max(0,Math.floor((slideShowHeight-arrowHeight)/2))+'px'
	var img=document.createElement('img')
	img.setAttribute('src',dirGraph + 'Arrow_right_brown.png')
	img.setAttribute('id','img_rightArrow')
	img.setAttribute('class','KImgViewer')
	img.className='KImgViewer'
	document.getElementById('div_rightArrow').appendChild(img)
	var imgEl=document.getElementById('img_rightArrow')
	//alert(imgEl)
	//imgEl.style='margin:0px auto'
	imgEl.onmouseover=function() {this.src=dirGraph + 'Arrow_right.png'}
	imgEl.onmouseout=function() {this.src=dirGraph + 'Arrow_right_brown.png'}
	imgEl.onclick=function() {nextPhoto(startPic,endPic)}
	
	/*
	var t1='this.src=\'Arrow_right.png\''
	var t2='this.src=\'Arrow_right_brown.png\''
	var inh='<a href="javascript:nextPhoto(' + startPic + ',' + endPic + ')"><img src="Arrow_right_brown.png" border=0 style="margin:0px auto" onMouseover="' + t1 + '" onMouseout="' + t2 + '"></a>'
	document.getElementById('div_rightArrow').innerHTML=inh
	*/
	
	//Slideshow:
		//containing div:
	var div6=document.createElement('div')
	div6.setAttribute('id','div_slideShowContents')
	document.getElementById('div_slideShowMain').appendChild(div6)
	var divSty=document.getElementById('div_slideShowContents').style
	divSty.position="absolute"
	gl_displayWidth=outWidth-2*arrowWidth
	divSty.width=(outWidth-2*arrowWidth)+'px'
	divSty.height=slideShowHeight+'px'
	divSty.left=arrowWidth+'px'
	//divSty.margin='0px auto'
	divSty.top='0px'
	divSty.overflow='hidden'
	divSty.paddingBottom=slideShowPaddingBottom+'px'
	divSty.paddingTop=slideShowPaddingTop+'px'
	divSty.background='#E2D9D9'
	
		//div with photos:
	var div9=document.createElement('div')
	div9.setAttribute('id','div_slideShowPhotos')
	document.getElementById('div_slideShowContents').appendChild(div9)
	var divSty=document.getElementById('div_slideShowPhotos').style
	divSty.position="absolute"
	var widthPhotoStrip=0
	for (var i=startPic; i<=endPic; i++) {
		widthPhotoStrip+=imgArr[i][1]+2*gl_borderWidthPhotosSlideShow+gl_marginWidthPhotosSlideShow
	}
	widthPhotoStrip-=gl_marginWidthPhotosSlideShow
	divSty.width=widthPhotoStrip+'px'
	for (var i=startPic; i<=endPic; i++) {
		var img=document.createElement('img')
		img.setAttribute('id','img_slideShow_' + i)
		img.setAttribute('src','' + imgArr[i][0] + '_thmb.jpg')
		//img.setAttribute('class','KImgViewer')
		img.className='KImgViewer'
		document.getElementById('div_slideShowPhotos').appendChild(img)
		var imgEl=document.getElementById('img_slideShow_' + i)
		imgEl.style.border='solid ' + gl_borderWidthPhotosSlideShow + 'px black'
		if (i>startPic) {
			imgEl.style.marginLeft=gl_marginWidthPhotosSlideShow+'px'
		}
		imgEl.style.float='left'
		imgEl.onclick=function() { loadPhotos(startPic,endPic,parseInt(this.id.substr(14))) }
	}
		//placing the strip with photos
	
	
	//4. Call function to load the main photo & set border around right thumbnail:
	loadPhotos(startPic,endPic,selectedPic)
}

function loadPhotos(startPic,endPic,selectedPic) {
	gl_currLoadedPhoto=selectedPic
	
	//place selected photo large:
	document.getElementById('div_photoMainDisplay').innerHTML='<img src="' + imgArr[selectedPic][0] + '_full.jpg" style="border-style:solid; border-width:1px; border-color:black">'
	
	//Set comment with the photo:
	if (lang=='nl') {
	    msg='Foto '
	}
	if (lang=='en') {
	    msg='Photo '
	}
	if (lang=='de') {
	    msg='Foto '
	}
	var ct=imgArr[selectedPic][5]
	if (gl_showCounter) {
		if (imgArr[selectedPic][5]=='') {
			ct+=msg
		} else {
			ct+=" ("
		}
		ct+=(selectedPic-startPic+1).toString() + "/" + (endPic-startPic+1).toString()
		if (imgArr[selectedPic][5]!='') {
			ct+=")"
		}		
	}
	document.getElementById('div_photoComment').innerHTML="<span style='font-family:verdana; font-size:8pt; font-style:italic'>"+ct+"</span>"
	
	//Single photo mode:
	if (startPic==endPic) {
		return
	}
	
	//Give selected thmb red border, others black:
	for (var i=startPic; i<=endPic; i++) {
		if (i==selectedPic) {
			document.getElementById('img_slideShow_' + i).style.borderColor='red'
		} else {
			document.getElementById('img_slideShow_' + i).style.borderColor='black'
		}
	}
	
	//Place the strip with photos:
	//alert(loadPhotos.caller.toString().substr(0,24)=='function createFotoLayer')
	var widthPhotoStrip=0
	for (var i=startPic; i<=endPic; i++) {
		widthPhotoStrip+=imgArr[i][1]+2*gl_borderWidthPhotosSlideShow+gl_marginWidthPhotosSlideShow
	}
	widthPhotoStrip-=gl_marginWidthPhotosSlideShow
	if (widthPhotoStrip<=gl_displayWidth) {
		//all thumbs fit in the display window
		if (loadPhotos.caller.toString().substr(0,24)=='function createFotoLayer') {
			//place thumbs centered:
			document.getElementById('div_slideShowPhotos').style.left=Math.floor((gl_displayWidth-widthPhotoStrip)/2)
		}
	} else {
		//not all thumbs fit in the display window, make sure selected photo is always centered
		var distToCenter=imgArr[selectedPic][1]/2+gl_borderWidthPhotosSlideShow
		for (var i=startPic; i<selectedPic; i++) {
			distToCenter+=imgArr[i][1]+2*gl_borderWidthPhotosSlideShow+gl_marginWidthPhotosSlideShow
		}
		document.getElementById('div_slideShowPhotos').style.left=Math.floor(gl_displayWidth/2-distToCenter)+'px'
	}
	//gl_displayWidth, gl_marginWidthPhotosSlideShow, gl_borderWidthPhotosSlideShow
}

function prevPhoto(startPic,endPic) {
	if (gl_currLoadedPhoto==startPic) {
		gl_currLoadedPhoto=endPic
	} else {
		gl_currLoadedPhoto-=1
	}
	loadPhotos(startPic,endPic,gl_currLoadedPhoto)
}

function nextPhoto(startPic,endPic) {
	if (gl_currLoadedPhoto<endPic) {
		gl_currLoadedPhoto+=1
	} else {
		gl_currLoadedPhoto=startPic
	}
	loadPhotos(startPic,endPic,gl_currLoadedPhoto)
}

function delFotoLayer() {
	var par=document.getElementById('div_masking').parentNode
	var ch=document.getElementById('div_masking')
	par.removeChild(ch)
	var par=document.getElementById('div_photoContainer').parentNode
	var ch=document.getElementById('div_photoContainer')
	par.removeChild(ch)
}

function getTotalWindowHeight() {
    if (window.opera) {
        //as Opera seems to returen strange values for scrollHeight
        return getWindowSize()[1]
    }
    return document.body.offsetHeight
}

function getWindowSize() {
	//Function to get the (inner) height & width of the document in the window
	var KWidth = 0, KHeight = 0
	if( typeof( window.innerWidth ) == 'number' ) {
		//Non-IE
		KWidth = window.innerWidth
		KHeight = window.innerHeight
	} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
		//IE 6+ in 'standards compliant mode'
		KWidth = document.documentElement.clientWidth
		KHeight = document.documentElement.clientHeight
	} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
	//IE 4 compatible
		KWidth = document.body.clientWidth
		KHeight = document.body.clientHeight
	}
	return new Array(KWidth,KHeight)
}