var ImageGallery = (function() {
	
	var runInterval = false;
	var gallery;
	var galleryWidth;
	var galleryHeight;
	var effObj = false;
	var images = [];
	var imgWidth;
	var imgHeight;
	var numImages = null;
	var counter = 0;
	var curIndex;
	var prevIndex;
	var nextIndex;
	var curImg;
	var prevImg;
	var nextImg;
	var hasThumbs;
	var thumbsWrapper;
	var thumbsContainer;
	var thumbsContent;
	var thumbs;
	var thumbsContainerWidth;
	var config;
	var galleries = [];
	var numGalleries;
	var curGallery;
    var buttons;
    var numButtons;
    var numThumbs;
    var curImageText;
    var curImageTextStartPos = null;
    var curImageTextPos;
    var curImageTextHeight;
    var t;
    var t2;
    var tShow;
    var tHide;
    var scrollWidth;
    var step = 1;
    
    //tijd die foto blijft staan
    var textDelay = 5000;
    
    //snelheid van tonen/verbergen tekst
    var textSpeed = 10;
    
	//initialisatie
	var init = function() {
            
		//argumenten in config plaatsen
		config = arguments;
		
		//aantal gallerie�n
		numGalleries = arguments.length;
		
		//configuratie
		for(g=0;g<numGalleries;g++) {
			
			if('gallery' in config[g]) galleries[g] = document.getElementById(config[g].gallery);
			if('effect' in config[g]) effObj = config[g].effect;
			if('textdelay' in config[g]) textDelay = config[g].textdelay;
						
			//huidige galerie
			curGallery = galleries[g];
			
			//index van curGallery
			curGallery.index = g;
			
			//array voor beelden van galerie
			curGallery.images = [];
			
			//aantal beelden
			curGallery.numImages = curGallery.getElementsByTagName('div')[0].getElementsByTagName('img').length;
			
			//bijschrift foto tonen bij mouseover
			curGallery.onmouseover = showTextProxy;
			
			//knoppen voor selectie van foto's
			if('controls' in config[g]) curGallery.controls = document.getElementById(config[g].controls);
			
			//initialisatie wanneer er een thumbrow is
			if('thumbs' in config[g] && config[g].thumbs) {
				
				curGallery.hasThumbs = true;
				
				//containers voor thumbrow
				thumbsWrapper = document.getElementById('thumbs-wrapper');
				thumbsContainer = document.getElementById('thumbs-container');
				thumbsContent = document.getElementById('thumbs-content');
				thumbs = thumbsContent.getElementsByTagName('img');
				curGallery.thumbs = thumbs;
				
				//eventhandlers
				thumbsContainer.onclick = setImage;
				thumbsWrapper.onclick = changeImage;
				
				//ingestelde breedte thumbsContainer
				thumbsContainerWidth = thumbsContainer.offsetWidth;

				//thumbsContainer breedte zo instellen dat laatst zichtbare beeld helemaal getoond wordt
				var w = 0;
				curGallery.containerWidthSet = false;
				numThumbs = thumbs.length;
				
				//door thumbs loopen en breedte en rechter marge bij 'w' optellen
				for(j=0;j<numThumbs;j++) {
					
					//huidige breedte (waarde van 'w')
					w = w + thumbs[j].offsetWidth + getStyle(thumbs[j],'marginRight');
					if(!curGallery.containerWidthSet) {
						//huidige breedte groter dan container thumbs, breedte aanpassen 
						if(w > thumbsContainerWidth) {
							thumbsContainer.style.width = w - getStyle(thumbs[j],'marginRight') + 'px';
							//containerWidthSet op true zetten zodat de breedte niet verder aangepast wordt
							curGallery.containerWidthSet = true;
						}
					}
				}
				
				//margin van laatst zichtbare beeld halen zodat beelden exact in container passen
				thumbs[numThumbs-1].style.marginRight = 0;
						
				//breedte thumbsContent instellen adhv aantal beelden
				thumbsContent.style.width = (w - getStyle(thumbs[0],'marginRight') + 2) +'px';
				
				//thumbs breder dan container, slider en knoppen zichtbaar maken
				//de eventuele rechter marge 1x eraf halen zodat deze marge er niet voor zorgt dat de slider wordt weergegeven
				//terwijl de beelden gewoon passen
				if(curGallery.containerWidthSet && (thumbsContent.offsetWidth - getStyle(thumbs[0],'marginRight')) > thumbsContainer.offsetWidth) {
					document.getElementById('slider').style.visibility = 'visible';
					document.getElementById('prev-button').style.visibility = 'visible';
					document.getElementById('next-button').style.visibility = 'visible';
					thumbsContainer.style.overflow = 'hidden';
				}
				//thumbs niet breder dan container, centreren
				else {
					thumbsContent.style.marginLeft = 'auto';
					thumbsContent.style.marginRight = 'auto';
				}
				
				//eerste thumb highlighten
				thumbs[0].className = 'highlight';
			}

			//afmetingen beelden of van div die om het beeld staat
            //dit is dan een div die b.v. dient als fotoframe
            var img = curGallery.getElementsByTagName('div')[0].getElementsByTagName('img')[0];
            if(img.parentNode.tagName == 'DIV' && img.parentNode.className != 'content') var elem = img.parentNode;
            else var elem = img;
            
			curGallery.imgWidth = elem.offsetWidth + getStyle(elem,'marginLeft') + getStyle(elem,'marginRight'); // + getStyle(elem,'paddingLeft') + getStyle(elem,'paddingRight'); //+ getStyle(elem,'borderLeftWidth') + getStyle(elem,'borderRightWidth');
			curGallery.imgHeight = elem.offsetHeight + getStyle(elem,'marginTop') + getStyle(elem,'marginBottom'); // + getStyle(elem,'paddingTop') + getStyle(elem,'paddingBottom'); //+ getStyle(elem,'borderTopWidth') + getStyle(elem,'borderBottomWidth');
			
			//als scrollWidth in config is aangegeven met 'full' dan dienen er per klik zoveel elementen gescrolled te worden 
			//als de breedte van de gallery toelaat
			if('scrollWidth' in config[g] && config[g].scrollWidth == 'full') {
				scrollWidth = config[g].scrollWidth;
				step = Math.round(curGallery.offsetWidth/curGallery.imgWidth);
			}
            
            //beelden in array images plaatsen
			for(n=0;n<curGallery.numImages;n++) {
				var image = curGallery.getElementsByTagName('div')[0].getElementsByTagName('img')[n];
                if(image.parentNode.tagName == 'DIV' && image.parentNode.className != 'content') var image = image.parentNode;
				curGallery.images.push(image);
			}
			
			//counter op 0 zetten
			curGallery.counter = 0;
						
            //settings object voor effObj
            var settingsObj = {
				gallery: curGallery,
				images: curGallery.images,
				imgWidth: curGallery.imgWidth,
				imgHeight: curGallery.imgHeight,
				step: step
			};
                        
            //als er controls zijn dan deze meegeven
            if(curGallery.controls)  {
            	settingsObj.controls = curGallery.controls;
            }
            
            //tekst buidig beeld
            if(document.getElementById('curimage-text')) curImageText = document.getElementById('curimage-text');
            
			//effect-object initialisatie
			curGallery.effObj = effObj().init(settingsObj);
		}
		
		showText();
	};

	//beeld tonen d.m.v. klik op vorige of volgende knop
	var changeImage = function(e) {
		
		var evt = e || window.event;
		var targ = evt.target || evt.srcElement;
		var button = targ.id;
		
		while(targ.id != 'thumbs-wrapper') targ = targ.parentNode;
	
		var n = targ.getAttribute('rel');
		curGallery = galleries[n];
		
		if(button == 'prev-button') prev();
		else if(button == 'next-button') next();
	};
	
	//beeld tonen d.m.v. klik op thumbrow
	var setImage = function(e) {
	
		if(curGallery.effObj.isRunning()) return false;
		var evt = e || window.event;
		var targ = evt.target || evt.srcElement;
		
		//niet op thumb geklikt
		if(typeof targ.src == 'undefined') return false;
		
		//aangeklikte thumb wordt al weergegeven
		if(targ.src.replace('thumb/','') == curGallery.effObj.getCurImg().src) return false;
		
		for(i=0;i<curGallery.numImages;i++) {
			
			if(targ.src.replace('thumb/','') == curGallery.effObj.images[i].src) {
				curGallery.effObj.nextImg = images[i];
				curGallery.effObj.curIndex = i;
				curGallery.effObj.toImage(i);
				hideText();
				break;
			}
		}
	};
	
	//controle of er een vorig beeld is
	var hasPrev = function() {
		return curGallery.effObj.getCurIndex() > 0;
	};
	
	//controle of er een volgend beeld is
	var hasNext = function() {
		return curGallery.effObj.getCurIndex() < curGallery.numImages - 1;
	};
	
	//proxy vorige beeld
	var prev = function() {
		if(curGallery.effObj.isRunning()) return false;
		getPrev();
	};
	
	//proxy volgende beeld
	var next = function(i) {
		if(curGallery.effObj.isRunning()) return false;
		getNext();
	};
	
	//vorige beeld
	var getPrev = function() {
		if(curGallery.effObj.isRunning()) return false;
		if(hasPrev(i)) {
				
			//thumb in zicht scrollen indien niet zichtbaar
			if(curGallery.hasThumbs && thumbsContainer.scrollLeft > thumbs[curGallery.effObj.getPrevIndex()].offsetLeft) {
				thumbsContainer.scrollLeft = thumbs[curGallery.effObj.getPrevIndex()].offsetLeft;
			}
			
			curGallery.counter -= step;
			counter = curGallery.counter;
			curGallery.effObj.setCounter(counter);
			
			hideText();
			curGallery.effObj.t = setInterval(curGallery.effObj.prev, curGallery.effObj.delay);  	
		}
	};
	
	//volgende beeld	
	var getNext = function() {
		if(hasNext()) {
			
			//thumb in zicht scrollen indien niet zichtbaar
			if(curGallery.hasThumbs 
					&& (thumbsContainer.scrollLeft + thumbsContainer.offsetWidth) < thumbs[curGallery.effObj.getNextIndex()].offsetLeft) {
				thumbsContainer.scrollLeft = thumbs[curGallery.effObj.getCurIndex()].offsetLeft; 
			}
			
			curGallery.counter += step;
			counter = curGallery.counter;
			curGallery.effObj.setCounter(counter);
			
			hideText();
			curGallery.effObj.t = setInterval(curGallery.effObj.next, curGallery.effObj.delay);
		}
	};
	
	//alle beelden in slide show tonen
	var run = function() {
		if(effObj) {
			effObj.isRunning = true;
			runInterval = setInterval(getNext, effObj.interval);
		}
	};
	
	var end = function () {
		if(runInterval) {
			clearInterval(runInterval);
		}
	};
	
	//huidige stijl element uitlezen
	var getStyle = function(el, prop) {
		if(document.all) return parseInt(el.currentStyle[prop]);
		else return parseInt(window.getComputedStyle(el,null)[prop]);
	};
	
	var getImage = function(i) {
		return images[i];
	};
	
	var setSpeed = function (speed) {
		effObj.setSpeed(speed);
	};

	var setDelay = function (d) {
		effObj.interval = d;
	};
	
	//transitie stoppen (einde cyclus)
	var stop = function() {
		clearInterval(curGallery.effObj.t);
		
		if(curGallery.hasThumbs) highlight();
		if(curGallery.containerWidthSet) Slider.update();
		showText();
		
		//controls bijwerken
		if('controls' in curGallery) {
			
			//buttons van controls
			var buttons = curGallery.controls.getElementsByTagName('a');
			var numButtons = buttons.length;
			
			//alle buttons op inactive zetten
			for(var b=0;b<numButtons;b++) {
				buttons[b].className = 'inactive';	
			}
			
			//counter van effObj uitlezen, dit omdat deze door het effObj gewijzigd kan zijn, bv wanneer er meerdere beelden
			//bij een klik geslide worden
			curGallery.counter = curGallery.effObj.getCounter();
			
			//aangeklikte button op active zetten
			buttons[curGallery.counter/step].className = 'active';
		}
	};
	
	//eerst controle of tekst al zichtbaar is bij mouseover
	var showTextProxy = function() {
		if(curImageTextPos <= curImageTextStartPos) showText();
	};
	
	//bijschrift foto tonen
	var showText = function() {
		if(!curImageText) return false;
		
		//id huidige beeld ophalen
		var curId = (curGallery.effObj.getCurImg().id).replace('img','');
		
		//bijschrift huidige foto in div laden
		curImageText.innerHTML = document.getElementById('image-text-'+curId).innerHTML;
		
		//hoogte van div met tekst uitlezen
		curImageTextHeight = curImageText.offsetHeight;
		
		//div met tekst uit beeld schuiven
		curImageTextStartPos = -curImageTextHeight;
		curImageTextPos = curImageTextStartPos;
		
		//div positioneren
		curImageText.style.bottom = curImageTextStartPos+'px';
		
		//div met bijschrift omhoog schuiven
		function shiftText() {
			
			curImageText.style.bottom = curImageTextPos+'px';
			curImageTextPos+=2;
			
			if(curImageTextPos >= 0) {
				curImageTextPos = 0;
				curImageText.style.bottom = curImageTextPos+'px';
				clearInterval(tShow);
			}
		}
		
		//als foto een bijschrift heeft dan deze tonen
		if(curImageText.innerHTML != '') tShow = setInterval(shiftText, textSpeed);
		
		//na [textDelay] ms het bijschrift weer verbergen
		tHide = setTimeout(hideText, textDelay);
	};
	
	//bijschrift foto verbergen
	var hideText = function() {
		if(!curImageText) return false;
		
		//als timeout vanuit showText is ingesteld en hideText ook vanuit prev, next of setImage wordt aangeroepen dan de eerste wissen
		if(tHide) {
			clearTimeout(tHide);
			clearInterval(t2);
		}
		
		//div met bijschrift omlaag schuiven
		function shiftText2() {
			
			curImageText.style.bottom = curImageTextPos+'px';
			curImageTextPos-=2;
			
			if(curImageTextPos <= curImageTextStartPos) {
				curImageTextPos = curImageTextStartPos;
				curImageText.style.bottom = curImageTextPos+'px';
				clearInterval(t2);
			}
		}
		
		t2 = setInterval(shiftText2, textSpeed);
	};
	
	//thumb van huidige foto highlighten
	var highlight = function () {
		
		var numThumbs = curGallery.thumbs.length;
		
		for(i=0;i<numThumbs;i++) {
			curGallery.thumbs[i].className = '';
		}
		
		curGallery.thumbs[counter].className = 'highlight';
	};
        
    //controls instellen
    var setControls = function(config) {
    
        var gallery = config.gallery;
        
        //aantal knoppen
        numButtons = Math.ceil(gallery.numImages/step);
        
        var imageNum = 0;
        
        //numButtons = config.numControls;
        
        //knoppen toevoegen
        for(var b=0;b<numButtons;b++) {
            
            //knop aanmaken
            var link = document.createElement('a');
            
            //knop op (in)actief instellen
            if(b == 0) link.className = 'active';
            else link.className = 'inactive';
            
            //knop toevoegen
            var button = gallery.controls.appendChild(link);
            
            //eventhandler op knop plaatsen
            button.onclick = function(gallery,imageNum) {
                return function() {
                    ImageGallery.toImage(gallery,imageNum);
                };
            }(gallery,imageNum);
            
            imageNum += step;
        }
    };
    
    //naar beeld gaan
	var toImage = function(gallery, i) {
		
		//vooruit
		if(i > gallery.counter) {
			gallery.counter = i;
			gallery.effObj.setCounter(i);
			curGallery = gallery;
			gallery.effObj.t = setInterval(gallery.effObj.next, gallery.effObj.delay);
		}
		//achteruit
		else if(i < gallery.counter) {
			gallery.counter = i;
			gallery.effObj.setCounter(i);
			curGallery = gallery;
			gallery.effObj.t = setInterval(gallery.effObj.prev, gallery.effObj.delay);
		}
	};

	return {
	
		prev: prev,
		next: next,
		run: run,
		end: end,
		init: init,
        setControls: setControls,
        toImage: toImage,
		getImage: getImage,
		setSpeed: setSpeed,
		setDelay: setDelay,
		stop: stop
	}
}());