var imageLoader = Class.create({
	
	
	imageArray: [],
	imagePreload: [],

	initialize: function() {
		
		this.largeActive = false;
		this.thumbnailListener();
		
	}, // end initialize
	
	hideImage: function() {
		
		$('imgLoading').hide();
		$('geoRollOver').hide();
		
	},
	

	thumbnailListener: function() {
		
		var elements = $('siteWrap').select("a.dThumbnail");
		
		var imageCount = 0;
		
		
		elements.each((function(s) {
		
			// mouseover listener
			s.count = imageCount;
			s.observe('mouseover',(function(event) {
				
				
				if(!this.imagePreload[s.count]) {
					
					var imgSrc = s.href;
				} else {
					var imgSrc = this.imagePreload[s.count];
					
				}				
			
				//var posX = (s.positionedOffset()[0]-428)+'px';
				//var posY = (s.positionedOffset()[1]-455)+'px';
				
				Element.clonePosition($('geoRollOver'),s,{'setLeft':true,'setTop':true,'setWidth':false,'setHeight':false});
			
				var posX_ = $('geoRollOver').style.left.replace("px","");
				var posY_ = $('geoRollOver').style.top.replace("px","");
		
				var posX = (posX_-140)+'px';
				var posY = (posY_-310)+'px';
			
				$('geoRollOver').setStyle({	left: posX, top: posY});
			
		
				if (Prototype.Browser.IE) {
					$('geoRollOver').show();
				} else {				
					$('geoRollOver').appear({ duration: 0.5});
				}
				
				// show loading
				$('imgLoading').show();
							
				
				// show image
				this.loadImage(imgSrc,s.count);
				
				// verwijder href
				s.href = 'javascript:void(0);';
			
				event.stop();
				
			}).bind(this));
			
			
			
			// mouseout listener
			s.observe('mouseout',(function(event) {

				this.hideImage();
				
				
				//event.stop();
			}).bind(this));		
			
			s.observe('click',function(event) {
				
				// klikken mag niet
				return false;
			
			}); // end s.observe click
					
			imageCount++;
		}).bind(this)); // end elements.each
		
		
		// de vergorint
		
		
		
		
	}, // end thumbnailListener
	
	loadImage: function(imgSrc,iIndex) {
		
		
		// als die nog niet geladen is dan laden, anders uit cache weergeven
		if(this.imagePreload.indexOf(imgSrc) == -1) {
		
		
			
			$('largeImage').src = imgSrc;
			
			if (Prototype.Browser.IE) {
				// die ajax loader werkt niet in IE, meteen laten zien die image
				
				this.showImage(imgSrc);
			} else {
							
			
				$('largeImage').observe('load',(function() {
					//alert('done');
					// vul div met deze image
					this.showImage(imgSrc);
					
					$('largeImage').stopObserving('load');
				}).bind(this));
				
			}
			
		
			// voeg toe aan cache array
			this.imagePreload[iIndex] = imgSrc;
			
			
		} else {
			$('largeImage').src = imgSrc;
			// vul div met deze image
			this.showImage(imgSrc);
			
		}
		
	},
	
	showLoading:function() {
	
	
	},
	
	showImage:function (imgSrc) {
	
		if($('largeImage').src !== imgSrc) {
			$('largeImage').src = imgSrc;
			
		}
			
		$('imgLoading').hide();
	
	
		$('largeImage').setStyle({
			display: 'block',
			position: 'absolute'
		});
			
	},
	
	showImageWithMouse: function(imgSrc) {
		
		function subHandle(e){
		
			mouseX = Event.pointerX(e);
			mouseY = Event.pointerY(e);
		
			// positioneer de image precies bij de mouse
			$('largeImage').src = imgSrc;
			$('largeImage').setStyle({
				display: 'block',
				position: 'absolute',
				left: mouseX,
				top: mouseY
			});
			
		}
		
		$('largeImage').src = imgSrc;
			$('largeImage').setStyle({
				display: 'block',
				position: 'absolute',
				left: mouseX,
				top: mouseY
			});

		Event.observe(document, 'mousemove', subHandle);
	
	}
	

	
	
	
});