// ---
/*
	JaS is developed by Robert Nyman, http://www.robertnyman.com
	For more information, please see http://www.robertnyman.com/jas
		
	Insert link in legend using the following syntax: 				
	<a class=a1 target=_blank href='http://my link.dk'>Klik</a>				
	S.W. Rasmussen 22. November 2011
*/
 
var JaS = {
	// Customization parameters
	imagePath : "",
	images : [
["P1050182.jpg","Tømrerfirmate GFK-HUSE ApS fra Sakskøbing stod for udskiftningen af tagbelægningen på vore fire udbygninger. Hovedmanden bag det veludførte arbejde var tømreren Ole, bistået af 3. års lærlingen Kaspar.<br>.<br><font style='font-size:9px'><i>FileInfo: </i><b>P1050182.JPG</b><i>, 2009-09-30 13:08:30</i></font>", ""],
["P1050193.jpg","Muren mellem carport og oplagsrum blev forhøjet nogle skifter for at få plads til en forsvarlig inddækning på begge sider af muren.<br><font style='font-size:9px'><i>FileInfo: </i><b>P1050193.JPG</b><i>, 2009-09-30 13:07:33</i></font>", ""],
["P1050196.jpg","Der blev lagt nye lægter.<br><font style='font-size:9px'><i>FileInfo: </i><b>P1050196.JPG</b><i>, 2009-09-30 13:09:16</i></font>", ""],
["P1050197.jpg","Den smalle gang mellem selve huset og værkstedet fik nye spær og lægter og blev dækket med klare fast lock plader.<br><font style='font-size:9px'><i>FileInfo: </i><b>P1050197.JPG</b><i>, 2009-09-30 13:08:53</i></font>", ""],
["P1050199.jpg","Set mod døren til bryggers.<br><font style='font-size:9px'><i>FileInfo: </i><b>P1050199.JPG</b><i>, 2009-09-30 13:08:42</i></font>", ""],
["P1050201.jpg","Der blev monteret nye tagrender.<br><font style='font-size:9px'><i>FileInfo: </i><b>P1050201.JPG</b><i>, 2009-09-30 13:07:45</i></font>", ""],
["P1050205.jpg","Læg mærke til den mårsikre inddækning ved gavlen af huset. Der blev lavet tilsvarende meget omhyggeligt udførte afdækninger ved samtlige tag, så en eventuel indtrængende mus, rotter eller mår vil få store vanskeligheder med at komme ind i tagrummene.<br><font style='font-size:9px'><i>FileInfo: </i><b>P1050205.JPG</b><i>, 2009-09-30 13:09:06</i></font>", ""],
["P1050207.jpg","De nye tag set mod balkonen.<br><font style='font-size:9px'><i>FileInfo: </i><b>P1050207.JPG</b><i>, 2009-09-30 13:09:28</i></font>", ""],
["P1050209.jpg","Og lidt på afstand fra den modsatte bred af åen.<br><font style='font-size:9px'><i>FileInfo: </i><b>P1050209.JPG</b><i>, 2009-09-30 13:07:00</i></font>", ""],
["P1050213.jpg","Sternbrædderne på carporttaget.<br><font style='font-size:9px'><i>FileInfo: </i><b>P1050213.JPG</b><i>, 2009-09-30 13:07:21</i></font>", ""],
["P1050214.jpg","Jeg fjernede de gamle hylder mm. i carporten og satte to nye stolper op til at understøtte spærerne på carport taget. Den lange bjælke, der bærer spærerne blev hævet 3-4 cm og aflastet af den første stolpe.<br><font style='font-size:9px'><i>FileInfo: </i><b>P1050214.JPG</b><i>, 2009-09-30 13:08:08</i></font>", ""],
["P1050218.jpg","Konklusion: GFK-HUSE leverede et meget fint og professionelt stykke arbejde og jeg kan give firmaet min varmeste anbefaling - også hvis du vælger, at få din opgave udført på timebetaling i stedet for efter et fast tilbud. Der blev arbejdet effektivt og ALLE materialer til dagens arbejde var medbragt om morgenen: Ingen spildtid ved at køre efter glemte stumper.<br><font style='font-size:9px'><i>FileInfo: </i><b>P1050218.JPG</b><i>, 2009-09-30 13:08:20</i></font>", ""]
],
	fadewrapperId : "jas-wrapper",
	imagewrapperId : "jas-image",
	imageTextwrapperId : "jas-image-text",
	previousLinkId : "previous-image",
	nextLinkId : "next-image",
	imageCounterId : "image-counter",
	startSlideShowId : "start-slideshow",
	stopSlideShowId : "stop-slideshow",	
	dimBackgroundOverlayId : "jas-dim-overlay",
	dimBackgroundId : "dim-background",
	noDimBackgroundId : "no-dim-background",
	thumbnailwrapperId: "jas-thumbnails",
	tagswrapperId: "jas-tags",
	tagsSelectAllId: "jas-select-all-tags",
	useImageText : true,
	useThumbnails : true,
	allowDimmedBackground : true,
	automaticallyDimBackgroundWhenSlideShow : true,
	useTags : true,
	useKeyboardShortcuts : true,	
	useFadingIn : true,
	useFadingOut : true,
	useFadeWhenNotSlideshow : false,
	useFadeForSlideshow : true,
	useFadeAtInitialLoad : false,
	fadeIncrement : 0.1,	
	fadeInterval : 100, // Milliseconds	
	timeForSlideInSlideshow : 1500, // Milliseconds	
	
	// JaS function parameters
	allImages : null,
	currentImages : null,
	fadewrapper : null,
	imagewrapper : null,
	imageTextwrapper : null,
	previousLink : null,
	nextLink : null,
	dimBackgroundOverlay : null,
	dimBackgroundLink : null,
	noDimBackgroundLink : null,
	dimmingActivated : false,
	imageCounter : null,
	startSlideShowLink : null,
	stopSlideShowLink : null,
	thumbnailwrapper : null,
	thumbnailCollection : [],
	currentThumbnailSelected : null,
	tagswrapper : null,
	tagsSelectAll : null,
	tagsList : null,
	tags : [],
	tagsCheckboxes : [],
	selectAllTags : true,
	imageText : null,
	imageText : "",
	imageSource : "",
	imageIndex : 0,
	fadingIn : true,
	fadeLevel : 0,
	fadeEndLevel : 1,
	fadeTimer : null,
	hasOpacitySupport : false,
	useMSFilter : false,
	useMSCurrentStyle : false,
	slideshowIsSupported : false,
	slideshowIsPlaying : false,
	functionAfterFade : null,
	isInitialLoad : false,
	
	init : function (){
    	if($){
			this.fadewrapper = $(this.fadewrapperId);
			this.imagewrapper = $(this.imagewrapperId);
			this.slideshowIsSupported = this.fadewrapper && this.imagewrapper;
			if(this.slideshowIsSupported){
				this.allImages = this.images;
				this.currentImages = this.images;
				if(this.useImageText){
					this.imageTextwrapper = $(this.imageTextwrapperId);
					if(!this.imageTextwrapper){
						this.useImageText = false;
					}
				}
				this.hasOpacitySupport = typeof this.fadewrapper.style.filter != "undefined" || typeof this.fadewrapper.style.opacity != "undefined";
				this.useMSFilter = typeof this.fadewrapper.style.filter != "undefined";
				this.useMSCurrentStyle = typeof this.fadewrapper.currentStyle != "undefined";
				
				this.previousLink = $(this.previousLinkId);
				this.previousLink.onclick = JaS.previousLinkClick;
				this.nextLink = $(this.nextLinkId);
				this.nextLink.onclick = JaS.nextLinkClick;
				this.imageCounter = $(this.imageCounterId);
				this.startSlideShowLink = $(this.startSlideShowId);
				if(this.startSlideShowLink){
					this.startSlideShowLink.style.display = "inline";
				}
				this.startSlideShowLink.onclick = JaS.startSlideShowClick;
				this.stopSlideShowLink = $(this.stopSlideShowId);
				if(this.stopSlideShowLink){
					this.stopSlideShowLink.style.display = "none";
				}
				this.stopSlideShowLink.onclick = JaS.stopSlideshowClick;
				
				if(this.allowDimmedBackground){
					this.dimBackgroundOverlay = $(this.dimBackgroundOverlayId);
					this.dimBackgroundLink = $(this.dimBackgroundId);
					this.noDimBackgroundLink = $(this.noDimBackgroundId);
					if(this.dimBackgroundOverlay && this.dimBackgroundLink && this.noDimBackgroundLink){
						this.dimBackgroundLink.onclick = JaS.dimBackgroundClick;
						this.noDimBackgroundLink.onclick = JaS.noDimackgroundClick;
						this.noDimBackgroundLink.style.display = "none";
						this.dimmingActivated = true;
					}
				}
				
				if(this.useKeyboardShortcuts){
					document.onkeydown = JaS.documentKeyDown;
				}
				
				this.thumbnailwrapper = $(this.thumbnailwrapperId);
				if(this.useThumbnails && this.thumbnailwrapper){
					this.createThumbnails();
				}
				
				this.tagswrapper = $(this.tagswrapperId);
				if(this.useTags && this.tagswrapper){
					this.tagsSelectAll = $(this.tagsSelectAllId);
					if(this.tagsSelectAll){
						this.tagsSelectAll.onclick = JaS.tagsSelectAllClick;
						this.createTagList();
					}
				}
				
				this.isInitialLoad = true;
				this.setImage();
				this.isInitialLoad = false;
			}
		}
	},
	
	previousLinkClick : function(oEvent){
		var oEvent = (typeof oEvent != "undefined")? oEvent : event;
		JaS.preventDefaultEventBehavior(oEvent);
		JaS.previousImage();
	},
	
	nextLinkClick : function(oEvent){
		var oEvent = (typeof oEvent != "undefined")? oEvent : event;
		JaS.preventDefaultEventBehavior(oEvent);
		JaS.nextImage();
	},
	
	startSlideShowClick : function(oEvent){
		var oEvent = (typeof oEvent != "undefined")? oEvent : event;
		JaS.preventDefaultEventBehavior(oEvent);
		JaS.startSlideshow();
	},
	
	stopSlideshowClick : function(oEvent){
		var oEvent = (typeof oEvent != "undefined")? oEvent : event;
		JaS.preventDefaultEventBehavior(oEvent);
		JaS.stopSlideshow();
	},
	
	dimBackgroundClick : function(oEvent){
		var oEvent = (typeof oEvent != "undefined")? oEvent : event;
		JaS.preventDefaultEventBehavior(oEvent);
		JaS.dimBackground();
	},
	
	documentKeyDown : function(oEvent){
		var oEvent = (typeof oEvent != "undefined")? oEvent : event;
		JaS.applyKeyboardNavigation(oEvent);
	},
	
	tagsSelectAllClick : function (oEvent){
		JaS.tagsSelectAll = this.checked;
		JaS.markAllTags();
	},
	
	noDimackgroundClick : function(oEvent){
		var oEvent = (typeof oEvent != "undefined")? oEvent : event;
		JaS.preventDefaultEventBehavior(oEvent);
		JaS.noDimBackground();
	},
	
	setImage : function (){
		if(this.currentImages.length > 0){
			this.imagewrapper.style.visibility = "visible";
			this.imageSource = this.currentImages[this.imageIndex][0];
			this.imageText = this.currentImages[this.imageIndex][1];
			if(this.useFadingOut && (this.slideshowIsPlaying && this.useFadeForSlideshow) || (!this.slideshowIsPlaying && this.useFadeWhenNotSlideshow) && (this.useFadeAtInitialLoad && this.isInitialLoad || !this.isInitialLoad)){
				this.fadeOut();
			}
			else{
				this.displayImageCount();
				this.imagewrapper.setAttribute("src", (this.imagePath + this.imageSource));
				this.setImageText();
				this.previousLink.style.visibility = (this.imageIndex > 0)? "visible" : "hidden";
				this.nextLink.style.visibility = (this.imageIndex < (this.currentImages.length - 1))? "visible" : "hidden";
				if((this.useFadeAtInitialLoad && this.isInitialLoad || !this.isInitialLoad) && ((this.slideshowIsPlaying && this.useFadeForSlideshow) || (!this.slideshowIsPlaying && this.useFadeWhenNotSlideshow))){
					this.fadeIn();
				}
			}
			if(this.useThumbnails){
				this.markCurrentThumbnail();
			}
		}
		else{
			this.imageSource = "";
			this.imageText = "";
			this.displayImageCount();
			this.imagewrapper.style.visibility = "hidden";
			this.setImageText();
		}
	},
	
	displayImageCount : function (){
    	if(this.imageCounter){
			this.imageCounter.innerHTML = (((this.currentImages.length > 0)? this.imageIndex : -1) + 1) + " / " + this.currentImages.length;
		}
	},
	
	nextImage : function (){
		if(this.imageIndex < (this.currentImages.length - 1)){
			++this.imageIndex;
			this.setImage();
		}
		else if(this.slideshowIsPlaying){
			this.stopSlideshow();
			this.imageIndex = 0;
			this.setImage();
		}
	},
	
	previousImage : function (){
		if(this.imageIndex > 0){
			--this.imageIndex;
			this.setImage();
		}         
	},

	setImageText : function (){
		this.imageTextwrapper.setAttribute("alt", this.imageText);
    	if(this.useImageText && typeof this.imageText == "string"){
			this.imageTextwrapper.innerHTML = this.imageText;
		}
	},
	
	setDimBackgroundSize : function(){
         var oDimBackground = this.dimBackgroundOverlay.style;
         var intWidth = document.body.offsetWidth;
         var intXScroll = (typeof window.pageXOffset != "undefined")? window.pageXOffset : document.body.scrollLeft;
         var intHeight = (typeof window.innerHeight != "undefined")? window.innerHeight : (document.documentElement)? document.documentElement.clientHeight : document.body.clientHeight;
         var intYScroll = (typeof window.window.pageYOffset != "undefined")? window.window.pageYOffset : (document.documentElement)? document.documentElement.scrollTop : document.documentElement.scrollTop;
         oDimBackground.width = intWidth + intXScroll + "px";
         oDimBackground.height = intHeight + intYScroll + "px";
	},
	
	dimBackground : function (){
         this.setDimBackgroundSize();
         this.dimBackgroundOverlay.style.display = "block";
		 this.noDimBackgroundLink.style.display = "inline";		
	},
	
	noDimBackground : function (fromStopSlideshow){
		this.dimBackgroundOverlay.style.display = "none";
		this.noDimBackgroundLink.style.display = "none";
		if(!fromStopSlideshow){
			this.stopSlideshow();
		}
	},
		
	startSlideshow : function (){
		if(this.currentImages.length > 0){
			this.startSlideShowLink.style.display = "none";
			this.stopSlideShowLink.style.display = "inline";
			this.slideshowIsPlaying = true;
			this.fadeTimer = setTimeout("JaS.nextImage()", JaS.timeForSlideInSlideshow);
			if(this.dimmingActivated  && this.automaticallyDimBackgroundWhenSlideShow){
				this.dimBackground();
			}
		}
	},
	
	stopSlideshow : function (){
		if(this.currentImages.length > 0){
			this.startSlideShowLink.style.display = "inline";
			this.stopSlideShowLink.style.display = "none";
			this.slideshowIsPlaying = false;
			this.setFadeParams(false, 1, 0);
			this.setFade();
			clearTimeout(this.fadeTimer);
			if(this.dimmingActivated && this.automaticallyDimBackgroundWhenSlideShow){
				this.noDimBackground(true);
			}
		}
	},
	
	fadeIn : function (){
		this.setFadeParams(true, 0, 1);
		this.functionAfterFade = null;
		this.fade();
		if(this.slideshowIsPlaying){
			this.functionAfterFade = "this.startSlideshow()";
		}
	},
	
	fadeOut : function (){
		this.setFadeParams(false, 1, 0);
		this.functionAfterFade = "this.fadeOutDone()";
		this.fade();
	},
	
	fadeOutDone : function (){
        this.displayImageCount();
		this.imagewrapper.setAttribute("src", (this.imagePath + this.imageSource));
		this.setImageText();
		if(this.useFadingIn){
			this.fadeIn();
		}
		else{
			this.fadeLevel = 1;
			this.setFade();
		}
	},
	
	fade : function (){
		if((this.fadingIn && this.fadeLevel < this.fadeEndLevel) || !this.fadingIn && this.fadeLevel > this.fadeEndLevel){
			this.fadeLevel = (this.fadingIn)? this.fadeLevel + this.fadeIncrement : this.fadeLevel - this.fadeIncrement;
			// This line is b/c of a floating point bug in JavaScript
			this.fadeLevel = Math.round(this.fadeLevel * 10) / 10;
			this.setFade();
			this.fadeTimer = setTimeout("JaS.fade()", this.fadeInterval);
		}
		else{
			clearTimeout(this.fadeTimer);
			if(this.functionAfterFade){
				eval(this.functionAfterFade);
			}
		}
	},
	
	setFade : function (){
		if(this.useMSFilter){
			this.fadewrapper.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + (this.fadeLevel * 100) + ")";
		}
		else{
			this.fadewrapper.style.opacity = this.fadeLevel;
		}
	},
	
	setFadeParams : function (bFadingIn, intStartLevel, intEndLevel){
		this.fadingIn = bFadingIn;
		this.fadeLevel = intStartLevel;
		this.fadeEndLevel = intEndLevel;
	},
	
	createThumbnails : function (){
		this.thumbnailwrapper.innerHTML = "";
		this.thumbnailCollection = [];
    	var oThumbnailsList = document.createElement("ul");
		var oListItem;
		var oThumbnail;
		var oCurrentImage;
		for(var i=0; i<this.currentImages.length; i++){
        	oCurrentImage = this.currentImages[i];
			oListItem = document.createElement("li");
			oThumbnail = document.createElement("img");
			oThumbnail.setAttribute("id", ("jas-thumbnail-" + i));
			oThumbnail.setAttribute("src", (this.imagePath + oCurrentImage[0]));
			//oThumbnail.setAttribute("alt", oCurrentImage[1]);
			//oThumbnail.setAttribute("title", oCurrentImage[1]);
			oThumbnail.onclick = JaS.thumbnailClick;
			this.thumbnailCollection.push(oThumbnail);
			oListItem.appendChild(oThumbnail);
			oThumbnailsList.appendChild(oListItem);			
        }
		this.thumbnailwrapper.appendChild(oThumbnailsList);
		if(this.thumbnailCollection.length > 0){
			this.markCurrentThumbnail();
		}
		if(this.slideshowIsPlaying){
			this.stopSlideshow();
		}
	},
	
	thumbnailClick : function (oEvent){
		JaS.imageIndex = parseInt(this.getAttribute("id").replace(/\D*(\d+)$/, "$1"), 10);
		JaS.setImage();
	},
	
	markCurrentThumbnail : function (){
		if(this.currentThumbnailSelected){
	        this.currentThumbnailSelected.className = "";
			// Sometimes, in IE, the image loses its reference to its parent
			if(this.currentThumbnailSelected.parentNode){
				this.currentThumbnailSelected.parentNode.className = "";
			}
		}
		this.currentThumbnailSelected = this.thumbnailCollection[this.imageIndex];
		this.currentThumbnailSelected.className = "selected";
		this.currentThumbnailSelected.parentNode.className = "selected-parent";
	},
	
	createTagList : function (){
		var strCurrentTag;
		var arrCurrentTag;
		var oRegExp;
		for(var i=0; i<this.images.length; i++){
			arrCurrentTag = this.images[i][2].replace(/\s*(,)\s*/,  "$1").split(",");
			for(var j=0; j<arrCurrentTag.length; j++){
            	strCurrentTag = arrCurrentTag[j];
				oRegExp = new RegExp(strCurrentTag, "i");
				if(this.tags.toString().search(oRegExp) == -1){
					this.tags.push(strCurrentTag);
				}
            }
        }
		this.tagsList = document.createElement("ul");
		var oListItem;
		var oTagCheckbox;
		var oLabel;
		for(var k=0; k<this.tags.length; k++){
			oTag = this.tags[k];
			oListItem = document.createElement("li");
			oTagCheckbox = document.createElement("input");
			oTagCheckbox.setAttribute("type", "checkbox");
			oTagCheckbox.setAttribute("id", ("jas-" + oTag));
			oTagCheckbox.setAttribute("value", oTag);
			oTagCheckbox.checked = true;
			oTagCheckbox.onclick = JaS.tagCheckboxClick;
			oLabel = document.createElement("label");
			oLabel.setAttribute("for", ("jas-" + oTag));
			oLabel.innerHTML = oTag;
			this.tagsCheckboxes.push(oTagCheckbox);
			oListItem.appendChild(oTagCheckbox);
			oListItem.appendChild(oLabel);
			this.tagsList.appendChild(oListItem);
		}
		this.tagswrapper.appendChild(this.tagsList);
		// This loop is necessary since IE can only mark checkboxes as checked after they've been added to the document
		for(var l=0; l<this.tagsCheckboxes.length; l++){
			this.tagsCheckboxes[l].checked = true;		
		}
	},
	
	tagCheckboxClick : function (oEvent){
		JaS.applyTagFilter();
	},
	
	applyTagFilter : function (){
		this.currentImages = [];
		var arrCurrentTags = [];
		var oCheckbox;
		for(var i=0; i<this.tagsCheckboxes.length; i++){
        	oCheckbox = this.tagsCheckboxes[i];
			if(oCheckbox.checked){
				arrCurrentTags.push(oCheckbox.value);
			}
        }
		var oRegExp;
		var oImage;
		for(var j=0; j<this.images.length; j++){
        	oImage = this.images[j];
			for(var k=0; k<arrCurrentTags.length; k++){
				oRegExp = new RegExp(arrCurrentTags[k], "i");
				if(oImage[2].search(oRegExp) != -1){
					this.currentImages.push(oImage);
					break;
				}
			}
        }
		
		if(this.useThumbnails){
			this.createThumbnails();
		}
		this.imageIndex = 0;
		this.setImage();
	},
	
	markAllTags : function (){
		for(var i=0; i<this.tagsCheckboxes.length; i++){
			this.tagsCheckboxes[i].checked = this.tagsSelectAll;
        }
		this.applyTagFilter();
	},
	
	closeSession : function (oEvent){
		JaS = null;
		delete JaS;
	},
	
	applyKeyboardNavigation : function (oEvent){
    	var intKeyCode = oEvent.keyCode;
    	if(!oEvent.altKey){
			switch(intKeyCode){
				case 32:
					this.slideshowIsPlaying = (this.slideshowIsPlaying)? false : true;
					if(this.slideshowIsPlaying){
						this.startSlideshow();
					}
					else{
						this.stopSlideshow();
					}
					this.preventDefaultEventBehavior(oEvent);
					break;
				case 37:
				case 38:
					this.previousImage();
					this.preventDefaultEventBehavior(oEvent);
					break;
				case 39:
				case 40:
					this.nextImage();
					this.preventDefaultEventBehavior(oEvent);
					break;
			}
		}
	},
	
	preventDefaultEventBehavior : function (oEvent){
		if(oEvent){
			oEvent.returnValue = false;
			if(oEvent.preventDefault){
				oEvent.preventDefault();
			}
		}
	}
};
// ---
addEvent(window, "load", function(){JaS.init();}, false);
addEvent(window, "unload", function(){JaS.closeSession();}, false);
// ---
// Utility functions
function addEvent(oObject, strEvent, oFunction, bCapture){
	if(oObject){
		if(oObject.addEventListener){
			oObject.addEventListener(strEvent, oFunction, bCapture);
		}
		else if(window.attachEvent){
			oObject.attachEvent(("on" + strEvent), oFunction)
		}
	}
}
// ---
function $(strId){
	return document.getElementById(strId);
}
// ---
if(typeof Array.prototype.push != "function"){
	Array.prototype.push = ArrayPush;
	function ArrayPush(value){
		this[this.length] = value;
	}
}
// ---