var ImageScrollCollection = Class.create(
{
		initialize: function() //speed, step, type, direction
		{
			this.collection   = new Array();
		},
		addImageScroll: function(elm, direction, targetid, autoscroll, animation, carrousel,centerthumb)
		{
			// elm must be a HTML Element, it is not allowed whitin the Navigator Object to use an id or something 
			var elm     = (Object.isElement(elm)) ? elm : $(elm);
				
			// does this key already exists in our collection, sorry we have to throw an exception...
			this.collection.each(function(item){
				  if (item.elm.id == elm.id ) { throw "Key already in use whitin the ImageScrollCollection::collection"; }
			});
			
			// key is available, so we just add a new Imagescroll object
			this.collection.push(new ImageScroll(elm, direction, targetid, autoscroll, animation, carrousel,centerthumb));	
		  
		},
		getImageScroll: function()
		{
			// elm must be a HTML Element, it is not allowed whitin the Navigator Object to use an id or something 
			var elm     = (Object.isElement(elm)) ? elm : $(elm);
				
			// does this key already exists in our collection, sorry we have to throw an exception...
			this.collection.each(function(item){
				  if (item.elm.id == elm.id ) { return item; }
			});
		},
		scroll: function(elm, direction)
		{
		var elm     = (Object.isElement(elm)) ? elm : $(elm);
            
            // find the Imagescroll object in the collection
            this.collection.each(function(item){
                  if (item.elm.id == elm.id ) { item.scroll(direction); }
            });

		}
});

var ImageScroll = Class.create
(
    {
        initialize: function(elm, direction, targetid,autoscroll, animation, carrousel,centerthumb)
        {
			//	stoppen wanneer de containrdiv niet bestaat
			if(!$(elm))
			{
				return false;
			}
			this.btn_up 		= $('button_up');
			this.btn_down 		= $('button_down');			
			
            this.direction 		= direction;   //  richting axis //	LR, RL, TB, BT
            //this.stepX	    	= 0;           	//  breedte van de thumbs	
            //this.stepY	    	= 63;           //  hoogte van de te nemen stappen
            //this.speed	    	= 5;	        //  scroll-snelheid
            this.autoscroll  	= autoscroll;        //  plaatjes automatisch laten scrollen?
            this.elm 			= elm;  //	id van de container div
			this.targetId		= targetid;
			this.animation		= animation;
			this.arrayKey		= 0;			// 	bijhouden welk plaatje er wordt verplaatst
			this.parentHeight	= $(this.elm.parentNode).getHeight();	//	hoogte van de wrapper 
			this.height			= $(this.elm).getHeight();				//	hoogte van de containerdiv
			this.parentWidth	= $(this.elm.parentNode).getWidth();	//	hoogte van de wrapper 
			this.width			= $(this.elm).getWidth();				//	hoogte van de containerdiv
			this.carrousel 		= carrousel;
			this.centerthumb	= centerthumb;	//	true, wanneer de thumbs richting het midden moeten als je er op klikt
			this.index			= 0;	//	bijhouden op welke scrollpositie de gallery staat
			this.isSliding		= false;	//	bijhouden of de slide nog actief is
            this.imgWrapper     = 'img_wrapper';
            this.navButtons     = 'project_buttons';
            
            Event.observe(this.imgWrapper, 'mouseover', function()
                {
                       // var_dump($('project_buttons'));
                        $(this.navButtons).show();
                }.bind(this));
             Event.observe(this.imgWrapper, 'mouseout', function()
                {
                       // var_dump($('project_buttons'));
                        $(this.navButtons).hide();
                }.bind(this));
			
			//	alle divs bekijken binnen de container
			images = this.elm.getElementsByTagName('div');
			
			this.imgWidth 	= $(images[0]).offsetWidth;
			this.imgHeight 	= $(images[0]).offsetHeight;
			
			//	aantal items dat zichtbaar is
			if(this.direction == 'lr' || this.direction == 'rl')	//	horizontaal
			{
				this.galleryItems 	= Math.round(this.parentWidth / this.imgWidth);
			}
			else	//	verticaal
			{
				this.galleryItems 	= Math.round(this.parentHeight / this.imgHeight);
			}
			
			// alle plaatjes uit de gallery (ook de onzichtbare)
			this.totalItems		= images.length;
			
			//	aantal items dat onzichtbaar, maar wel aanwezig is
			this.extraItems		= this.totalItems - this.galleryItems;
			
            //  er zijn geen plaatjes buiten het zichtbare gebied
            if(this.extraItems < 1) 
            {
                // niet scrollen na een klik op de thumb
                this.centerthumb = false;
                this.carrousel = false;
            }
			//	alle thumbs bij langs
			for (i=0;i<images.length;i++)
			{
				//	in de gaten houden of er op de thumbs geklikt wordt.
				
				//var_dump(this);	// $(images[i]).offsetWidth
				this.addBehaviour($(images[i]));
				this.addOnClick($(images[i]))
			}
			
			if(this.autoscroll)
			{
				//	uit te voeren wanneer autoscroll aan staat
			}
			
			if(!this.carrousel)
			{
				this.btn_up.addClassName('disabled_up');
				if(this.totalItems - this.galleryItems <= 0)
				{
					this.btn_down.addClassName('disabled_down');
				}
			}
        },
		addBehaviour: function(image)
		{
			//	klikbaar maken van de div die rondom het plaatje zit + cursorveranderingen
			Event.observe(image, 'click', this.swap.bindAsEventListener(this));
			
			Event.observe(image, 'mouseover', function() {
				document.body.style.cursor = 'pointer';
			});	
			Event.observe(image, 'mouseout', function() {
				document.body.style.cursor = 'default';
			});			
		},
		addOnClick: function(image)
		{
			
			Event.observe(image, 'click', this.swap.bindAsEventListener(this));
		},
		swap: function(element, id, src)
		{
        
			//	als de slide nog bezig is, niet swappen
			if(this.isSliding == true)
			{
				return;
			
			}
			//	lezen wat het nieuwe plaatje wordt
			newImgSrc	= element.target.longDesc;
			if(!newImgSrc)
            {
                return;
            }
			//	kijken welk plaatje (binnen de container) de active class heeft
			activeImg 	= $(this.elm).getElementsByClassName('active');
			
			//	als de geklikte thumbnail niet de "active" is 
			if(activeImg[0].id != element.target.id || 1 == 1)
			{
				//	nieuw plaatje toewijzen
				$(this.targetId).src = newImgSrc;
				
				//	de huidige active class verwijderen
				$(activeImg[0].id).removeClassName('active');
				
				//	nieuw element de class toewijzen
				$(element.target.id).addClassName('active');
				//alert($(element.target.id).parentNode.previousSiblings().length + 1);
				
				//	als de thumb richting het midden moet
				if(this.centerthumb)
				{
					//var_dump($(element.target.id));
					if(($(element.target.id).parentNode.previousSiblings().length +1 ) != Math.round(this.galleryItems /2))
					{
						if( $(element.target.id).parentNode.previousSiblings().length < (this.galleryItems /2))
						{
							//	bij een horizontale 
							if(this.direction == 'lr' || this.direction == 'rl')
							{
								this.scroll('lr');
							}
							else
							{
								this.scroll('tb');
							}
						}						
						else
						{
							if(this.direction == 'lr' || this.direction == 'rl')
							{
								this.scroll('rl');
							}
							else
							{
								this.scroll('bt');
							}
						}
					}
				}
				//if($(element.target.id).parentNode.previousSiblings().length);
				//this.scroll('rl');
			}
		},
        scroll: function(direction)
        {
			
			//	wanneer geen carrousel actief is, mag er bij bepaalde momenten niet meer gescrolled worden
			if(!this.carrousel)
			{
				//	kijken of het de uiteindes zijn bereikt, voor alle directions
				if((this.index == 0 && direction == 'lr') || (((this.index + this.galleryItems) ==  this.totalItems) && direction == 'rl')||
				   (this.index == 0 && direction == 'tb') || (((this.index + this.galleryItems + 1) >  this.totalItems) && direction == 'bt'))
				{
					//	leave before scrolling
					return;
				}
			}
            //  als er geen items zijn om naar te scrollen
            if(this.extraItems < 1)
            {   
                return false;
            }
			
			if(!this.isScrolling == true)
			{
				
				this.isScrolling = true;
				
				//	get all images from container
				images 		= this.elm.getElementsByTagName('div');
				amount 		= images.length;					
				firstImg	= images[0];
				lastImg 	= images[amount-1];			
				
				switch(direction)
				{
					case 'lr':
						
						imgclone = lastImg.cloneNode(true);
						this.imgclone = lastImg.cloneNode(true);
						this.addBehaviour(imgclone);
						
						if(this.animation)
						{
							if(firstImg.id != imgclone.id)
							{
								$(imgclone).hide();
								new Insertion.Before(firstImg.id, imgclone);	
								
								new Effect.SlideRightIn(imgclone.id,{queue: {position:'end', scope: 'lr',limit: 1},
										
									afterFinish: function()
									{
										lastImg.remove();										
										this.isSliding = false;
									}.bind(this),
									
									beforeStart: function()
									{
										this.isSliding = true;
									}.bind(this)
									
								});
							}							
						}
						else	//	geen animatie
						{									
							new Insertion.Before(firstImg.id, imgclone);							
							this.elm.removeChild(lastImg);							
						}
						//this.addOnClick(this.elm.firstDescendant());

						if(this.index == 0)
						{
							this.index = this.totalItems;
						}
						else
						{
							this.index = this.index - 1;	
						}
					break;
					case 'rl':
						
						imgclone = firstImg.cloneNode(true);
						this.addBehaviour(imgclone);
						
						if(this.animation)
						{
							
							if(lastImg.id != imgclone.id)
							{
								Effect.SlideLeftOut(firstImg,
									{queue: {position:'end', scope: 'rl',limit: 1},
									afterFinish: function()
									{
										firstImg.remove();
										
										this.isSliding = false;										
									}.bind(this),
									
									beforeStart: function()
									{
										
										this.elm.appendChild(imgclone);
										this.isSliding = true;
										
									}.bind(this)
								});
							}
							//new Effect.Move(this.elm, { x: -this.stepX, y: -this.stepY });
							//this.elm.removeChild(firstImg);
							/*new Effect.Move(this.elm, {
								x: this.stepX, y: this.stepY,
								transition: Effect.Transitions.full
							});*/
						}
						else
						{
							this.elm.appendChild(imgclone);
							
							this.elm.removeChild(images[0]);
							
						}
						if(this.index == this.totalItems - 1)
						{
							this.index = 0;
						}
						else
						{
							this.index++;
						}
					break;
					case 'tb':
						
						imgclone = lastImg.cloneNode(true);
						this.addBehaviour(imgclone);						
						
						if(this.animation)
						{	//	animation
							
							if(firstImg.id != imgclone.id)
							{
								$(imgclone).hide();
								
								new Insertion.Before(firstImg.id, imgclone);	
								
								Effect.SlideDown(imgclone,{queue: {position:'end', scope: 'tb',limit: 1},
									
									afterFinish: function()
									{
										lastImg.remove();
										this.isSliding = false;
									}.bind(this),
									beforeStart: function()
									{
										this.isSliding = true;
									}.bind(this)
								});
							}
							//new Effect.Move(this.elm, { x: this.stepX, y: this.stepY });	//,duration:0.5 
												
						}
						else	//	geen animatie
						{									
							new Insertion.Before(firstImg.id, imgclone);
							this.elm.removeChild(lastImg);							
						}				
						if(this.index == 0)
						{
							this.index = this.totalItems;
						}
						else
						{
							this.index = this.index - 1;	
						}
					break;
					case 'bt':						
						imgclone = firstImg.cloneNode(true);
						
						//	nieuwe plaatje klikgedrag geven
						this.addBehaviour(imgclone);
						
						if(this.animation)
						{						
							if(lastImg.id != imgclone.id)
							{
								Effect.SlideUp(firstImg,
									{queue: {position:'end', scope: 'bt',limit: 1},
									afterFinish: function()
									{
										firstImg.remove();
										this.isSliding = false;
									}.bind(this),
									beforeStart: function()
									{
										//var_dump(this);
										this.elm.appendChild(imgclone);
										this.isSliding = true;
									}.bind(this)
								});
							}							
						}
						else
						{
							this.elm.appendChild(imgclone);
							
							this.elm.removeChild(images[0]);
							
						}
						
						if(this.index == this.totalItems - 1)
						{
							this.index = 0;
						}
						else
						{
							this.index++;
						}
					break;					
				}
					
					
				this.isScrolling = false;				
				imgclone = '';
				
				//	buttons disabled class geven wanneer carrousel aanstaat en het uiteinde van de gallery is bereikt
				if(this.carrousel == false && this.index == 0)
				{
					this.btn_up.addClassName('disabled_up'); //alert('begin');
				}
				else
				{
					this.btn_up.removeClassName('disabled_up');	
				}
				if(this.carrousel == false && this.index == (this.totalItems - this.extraItems)-1)
				{
					this.btn_down.addClassName('disabled_down'); //alert('begin');
				}
				else
				{
					this.btn_down.removeClassName('disabled_down');	
				}
				
				
				
				/*if(this.elm.firstDescendant().firstChild.hasClassName('active'))
				{
					this.scroll(direction);
					//alert('ja')
				}*/
			}
			//imgclone = lastImg.cloneNode(true);
        }		
        
        /* Einde class imagescroll*/	
    }
);

/* from SlideUp */
Effect.SlideLeftOut = function(element) {
	//var_dump(element)
/*
	SlideLeftOut needs to have the content of the element wrapped in a container element with fixed width
	otherwise any text or images begin to wrap in strange ways!
*/
	element = $(element).cleanWhitespace();
	return new Effect.Scale(element, window.opera ? 0 : 1,
		Object.extend({ 
			scaleContent: false, 
			scaleY: false, 
			scaleMode: 'box',
			scaleFrom: 100,
			restoreAfterFinish: true,
			beforeStartInternal: function(effect) {
				effect.element.makePositioned();
				effect.element.down().makePositioned();
				if(window.opera) effect.element.setStyle({left: ''});
				effect.element.makeClipping().show();
			},  
			afterUpdateInternal: function(effect) {
				effect.element.down().setStyle(
					{right: (effect.dims[1] - effect.element.clientWidth) + 'px' }
				);
			},
			afterFinishInternal: function(effect) {
				effect.element.hide().undoClipping().undoPositioned();
				effect.element.down().undoPositioned();
			}
		}, arguments[1] || {})
	);
}

/* from SlideDown */
Effect.SlideRightIn = function(element) {
/*
	SlideRightIn needs to have the content of the element wrapped in a container element with fixed width!
*/
	element = $(element).cleanWhitespace();
	var elementDimensions = element.getDimensions();
	return new Effect.Scale(element, 100, 
		Object.extend({ 
			scaleContent: false, 
			scaleY: false, 
			scaleFrom: window.opera ? 0 : 1,
			scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
			restoreAfterFinish: true,
			afterSetup: function(effect) {
				effect.element.makePositioned();
				effect.element.down().makePositioned();
				if(window.opera) effect.element.setStyle({left: ''});
				effect.element.makeClipping().setStyle({width: '0px'}).show(); 
			},
			afterUpdateInternal: function(effect) {
				effect.element.down().setStyle({right: (effect.dims[1] - effect.element.clientWidth) + 'px' }); 
			},
			afterFinishInternal: function(effect) {
				effect.element.undoClipping().undoPositioned();
				effect.element.down().undoPositioned();
			}
		}, arguments[1] || {})
	);
}