window.addEvent('load', function(){
	
	//@TODO Check for hover image and render that one fully visible + #fee004 colored, 2px wide border / DONE /
	//@TODO check for active image and do the above / DONE /
	//@TODO mouseover for the images (full visibility) / DONE /
	//@TODO stop overscrolling / DONE /
	//@TODO onclick event on images, use the target to determine where the fullsize image is and switch the current fullsize image with the new one / DONE /
	//@TODO change the image caption/title/alt / DONE /
	//@TODO implement the small arrows to cycle through images / DONE / 
	//@TODO show loading animation /DONE/
	//@TODO some touch-ups? Image fading after clicking etc... / DONE /
	//@TODO fade the images into each other / DONE /
	//@TODO make the above TODO less error prone (currently it bugs out when choosing another picture while the current one is fading / DONE /
	//@TODO (OPTIONAL) automate the usage of "active" buttons by assuming you append an -active at the end of the filename? Also fixes the "png" only active image
	
	var bigButtonLeft = $('scrollLeft');
	var bigButtonLeftSrc = bigButtonLeft.src;
	var bigButtonRight = $('scrollRight');
	var bigButtonRightSrc = bigButtonRight.src;
	var smallButtonLastImage = $('lastImage');
	var smallButtonLastImageSrc = smallButtonLastImage.src;
	var smallButtonNextImage = $('nextImage');
	var smallButtonNextImageSrc = smallButtonNextImage.src;
        //lenght of base href
	var baseLength = $$('base').getProperty('href').toString().length;
	
	var listing = $$('.gallery-listing .inside table');
	var images = $$('.gallery-listing a img');
	var linkedImages = $$('.gallery-listing a');
	var rightImage = $$('#right .image_container img.change');
	var rightCaption = $$('#right .image_container .caption');
	
	var tableSize = listing.getSize();
	var insideSize = $$('.gallery-listing .inside').getSize();
	var insidePadding = $$('.gallery-listing .inside').getStyle('padding-left')
	var marginLeft = 0;
	
	var slideTimer;
	
        $$('#right .image_container img.change').setProperty('src', encodeURI($$('#right .image_container img.change').getProperty('src')));
	listing.setStyle('margin-left', marginLeft);
	//run once to mark the active image
	activeImage();
	
	images.addEvents({
		'mouseover' : function() {
			this.setStyles({
				'opacity' : 1,
				'border' : '2px solid #fee004'
			});
		},
		'mouseout' : function() {
		    this.setStyles({
				'opacity' : 0.5,
				'border' : '2px solid #fff'
			});
			//run to prevent the style from dissapearing (if you hover over an active! image)
			activeImage();
		},
		'click' : function(e) {
			//stop the link from being followed
			var ev = new Event(e).stop();
			var image = this;
			changeImage(image);
		}}
	);
	
	bigButtonLeft.addEvents({
		'mouseover' : function() {
			this.setProperty('src', 'dateien/images/layout/gallery/gallery-largebutton-left-active.png');
		},
		'mouseout' : function() {
			this.setProperty('src', bigButtonLeftSrc);
		},
		'mousedown' : function() {
		    function slideLeft() {
				var currStyle = listing.getStyle('margin-left');
				marginLeft += 2;
				if ((currStyle[0].toInt() + marginLeft) > 0) {
					marginLeft = 0;
				}

				listing.setStyle('margin-left', marginLeft);
			}
			var currStyle = listing.getStyle('margin-left');
			if (currStyle[0].toInt() < 0) {
				slideTimer = slideLeft.periodical(10);
			}
		},
		'mouseup' : function() {
			$clear(slideTimer);
		}
	});
	
	bigButtonRight.addEvents({
		'mouseover' : function() {
			this.setProperty('src', 'dateien/images/layout/gallery/gallery-largebutton-right-active.png');
		},
		'mouseout' : function() {
			//does not work in IE 6?! (same for bigButtonLeft)
			this.setProperty('src', bigButtonRightSrc);
		},
		'mousedown' : function() {
			function slideLeft() {
				var currStyle = listing.getStyle('margin-left');
				marginLeft -= 2;
				if (((insideSize[0].size.x - insidePadding[0].toInt()) - currStyle[0].toInt()) > tableSize[0].size.x) {
					marginLeft = currStyle[0].toInt();
				}
				listing.setStyle('margin-left', marginLeft);
			}
			var currStyle = listing.getStyle('margin-left');
			if(((insideSize[0].size.x - insidePadding[0].toInt()) - currStyle[0].toInt()) < tableSize[0].size.x) {
				slideTimer = slideLeft.periodical(10);
			}
		},
		'mouseup' : function() {
			$clear(slideTimer);
		}
	});
	
	smallButtonLastImage.addEvents({
		'mouseover' : function() {
			if(!isFirstImageInArray(rightImage)) {
				this.setProperty('src', 'dateien/images/layout/gallery/gallery-smallbutton-left-active.png');
			}
		},
		'mouseout' : function() {
			this.setProperty('src', smallButtonLastImageSrc);
		},
		'click' : function() {
                        rightImage = $$('#right .image_container img.change');
			if(isFirstImageInArray(rightImage)) {
				return;
			}
			//get the image index position
			var currentImage = images.getParent().getProperty('href').indexOf(rightImage.getProperty('src').toString());
			changeImage(images[currentImage-1]);
		}
	});
	
	smallButtonNextImage.addEvents({
		'mouseover' : function() {
			if(!isLastImageInArray(rightImage)) {
				this.setProperty('src', 'dateien/images/layout/gallery/gallery-smallbutton-right-active.png');
			}
		},
		'mouseout' : function() {
			this.setProperty('src', smallButtonNextImageSrc);
		},
		'click' : function() {
                        rightImage = $$('#right .image_container img.change');
			if(isLastImageInArray(rightImage)) {
				return;
			}
			var currentImage = images.getParent().getProperty('href').indexOf(rightImage.getProperty('src').toString());
			changeImage(images[currentImage+1]);
		}
	});
	
	/*
	* Functions for use with the Gallery
	* All Mandatory for correct functionality
	*/
	
	//changes the current rightImage with the one given as Parameter
	function changeImage(image) {
        rightImage = $$('#right .image_container img.change');
        if(rightImage.length < 2) {
			//show the loading animation
			$('load').addClass('loading');
			//lenght of base href
			var baseLength = $$('base').getProperty('href').toString().length;
			//if base href is existing in a linked image, remove the base href
			if(image.getParent().href.contains($$('base').getProperty('href').toString())) {
				image.getParent().setProperty('href', image.getParent().href.substr(baseLength));
			}
			//ajax loading
                        new Asset.image(image.getParent().getProperty('href'), {'class': 'change', onload: function() {
					this.injectBefore(rightImage[0]).setOpacity(0.01);
					rightImage = $$('#right .image_container img.change');
					this.setProperty('alt', image.getProperty('alt'));
					this.setProperty('title', image.getProperty('alt'));
					rightCaption[0].setText(image.getProperty('alt'));
                                        (function(){
						new Fx.Style(rightImage[1], 'opacity', {duration:2000, 
							onStart:function(){
								//remove the loading animation and set the new image parameters
								$('load').removeClass('loading');
								new Fx.Style(rightImage[0], 'opacity', {duration:2000}).start(1);
							},
							onComplete:function(){
								//wait 1 second before removing the element
								(function() {
 									rightImage[1].remove();
								}).delay(1000);
							}
						}).start(0.01);				        
					}).delay(0);
					//mark the active image
					activeImage();
                        }
                        });

//didn't work in IE, seemed to cause a weird bug
			/*new Ajax(image.getParent().href, { 
				method: 'get',
				autoCancel: true,
                                encoding: 'utf-8',
                                urlEncoded: true,
				onComplete: function() {
					//if base href is existing in a linked image, remove the base href
					if(image.getParent().href.contains($$('base').getProperty('href').toString())) {
						image.getParent().setProperty('href', image.getParent().href.substr(baseLength));
					}
					rightImage[0].clone().injectBefore(rightImage[0]).setOpacity(0.01);
					rightImage = $$('#right .image_container img.change');
					rightImage[0].setProperty('src', image.getParent().getProperty('href'));
					rightImage[0].setProperty('alt', image.getProperty('alt'));
					rightImage[0].setProperty('title', image.getProperty('alt'));
					rightCaption[0].setText(image.getProperty('alt'));
					//better way to make sure the above actions are executed before fading the image in?
					(function(){
						new Fx.Style(rightImage[1], 'opacity', {duration:2000, 
							onStart:function(){
								//remove the loading animation and set the new image parameters
								$('load').removeClass('loading');
								new Fx.Style(rightImage[0], 'opacity', {duration:2000}).start(1);
							},
							onComplete:function(){
								rightImage[1].remove();
							}
						}).start(0.01);				        
					}).delay(2000);
					//mark the active image
					activeImage();
				}
			}).request();*/
		}
	}
	
	//determine the currently active image and fade all others out
	//doesnt work in ie6/7 when called after clicking/ switchting to an image?
	function activeImage() {
		linkedImages.each(function(item) {
			if (item.getProperty('href') == rightImage[0].getProperty('src')) {
				item.getFirst().setStyles({
					'opacity' : 1,
					'border' : '2px solid #fee004'
				});
			} else {
				item.getFirst().setStyles({
					'opacity' : 0.5,
					'border' : '2px solid #fff'
				});
			}
		});
	}
	
	//check if the current image is the last one
	function isLastImageInArray(el) {
		if(el.getProperty('src').toString() == images.getLast().getParent().getProperty('href')) {
			return true;
		} else {
			return false;
		}
	}
	
	//check if the current image is the first one
	function isFirstImageInArray(el) {
		if(el.getProperty('src').toString() == images[0].getParent().getProperty('href')) {
			return true;
		} else {
			return false;
		}
	}
});