var sollikFramework = {
	gallery: {
		
		
		IE: false,
		IE6: false,
		
		
		init: function() {
			sollikFramework.gallery.IE = (document.all && !window.opera);
			sollikFramework.gallery.IE6 = (navigator.appName=="Microsoft Internet Explorer" && navigator.appVersion.search(/MSIE (?:5|6)/) >= 0);
			
			var galleryDescriptor = {
				canvas: null,
				container: null,
				content: null,
				scrollPos: 0,
				scrollInterval: 50,
				scrollBy: 10,
				fadeWidth: 30,
				imgSpace: 30,
				popupCancelNextClick: false,
				popupCurrImageIndex: 0,
				images: {
					thumbnail: {
						width: 225,
						height: 126
					},
					full: {
						width: 800,
						height: 448
					},
					list: []
				}
			};
			
			galleryDescriptor.self = $('flashContainer');
			
			if (sollikFramework.gallery.IE) {
				galleryDescriptor.canvas = $('flashContainerImages').appendChild(new Element('div'));
				galleryDescriptor.canvas.style.position = 'absolute';
				galleryDescriptor.canvas.style.left = '0px';
				galleryDescriptor.canvas.style.top = '12px';
				galleryDescriptor.canvas.style.width = galleryDescriptor.canvas.parentNode.offsetWidth+'px';
				galleryDescriptor.canvas.style.height = (galleryDescriptor.canvas.parentNode.offsetHeight-24)+'px';
			} else {
				galleryDescriptor.canvas = new Element('canvas', {});
				$('flashContainerImages').appendChild(galleryDescriptor.canvas);
				galleryDescriptor.canvas.style.position = 'absolute';
				galleryDescriptor.canvas.style.left = '0px';
				galleryDescriptor.canvas.style.top = '12px';
				galleryDescriptor.canvas.width = galleryDescriptor.canvas.parentNode.offsetWidth;
				galleryDescriptor.canvas.height = galleryDescriptor.canvas.parentNode.offsetHeight - 24;
			}
			
			galleryDescriptor.container = $('flashContainerImages').appendChild(new Element('div'));
			galleryDescriptor.container.style.position = 'absolute';
			galleryDescriptor.container.style.left = '0px';
			galleryDescriptor.container.style.top = '0px';
			galleryDescriptor.container.style.overflow = 'hidden';
			galleryDescriptor.container.style.width = galleryDescriptor.container.parentNode.offsetWidth+'px';
			galleryDescriptor.container.style.height = galleryDescriptor.container.parentNode.offsetHeight+'px';
			
			galleryDescriptor.content = galleryDescriptor.container.appendChild(new Element('div'));
			galleryDescriptor.content.style.height = (galleryDescriptor.content.parentNode.offsetHeight-24)+'px';
			
			if (sollikFramework.gallery.IE) {
				galleryDescriptor.content.parentNode
					.appendChild(new Element('div', { id: 'flashContainerGradientLeft'}))
						.appendChild(new Element('div', { id: 'flashContainerGradientRight' }))
							.appendChild(galleryDescriptor.content);
				galleryDescriptor.content.style.marginTop = '12px';
			} else {
				galleryDescriptor.content.style.position = 'absolute';
				galleryDescriptor.content.style.left = '0px';
				galleryDescriptor.content.style.top = '12px';
			}
		
			new Ajax.Request('data/gallery.xml', {
				method: 'get',
				onSuccess: function(transport) {
					try {
					var root = transport.responseXML.documentElement;
					for (var child = root.firstChild; child != null; child = child.nextSibling) {
						if (child.nodeType != 1 || child.nodeName != 'image') continue;
						var obj = {
							image: new Image(),
							link: galleryDescriptor.content.appendChild(new Element('div'))
						};
						var source = child.getElementsByTagName('source')[0];
						if (source && source.firstChild) obj.source = source.firstChild.data;
						var title = child.getElementsByTagName('title')[0];
						if (title && title.firstChild) obj.title = title.firstChild.data;
						var description = child.getElementsByTagName('description')[0];
						if (description && description.firstChild) obj.description = description.firstChild.data;
						galleryDescriptor.images.list.push(obj);
					}
					
					$('flashNavigationPrev').onmouseover = function(event) {
						if ('scrollIntervalObj' in this) clearInterval(this['scrollIntervalObj']);
						this['scrollIntervalObj'] = setInterval(function() { this.scrollPos -= this.scrollBy; this.draw(); }.bind(this), this.scrollInterval);
					}.bind(galleryDescriptor);
					$('flashNavigationPrev').onmouseout = function(event) {
						if ('scrollIntervalObj' in this) clearInterval(this['scrollIntervalObj']);
					}.bind(galleryDescriptor);
					
					$('flashNavigationNext').onmouseover = function(event) {
						if ('scrollIntervalObj' in this) clearInterval(this['scrollIntervalObj']);
						this['scrollIntervalObj'] = setInterval(function() { this.scrollPos += this.scrollBy; this.draw(); }.bind(this), this.scrollInterval);
					}.bind(galleryDescriptor);
					$('flashNavigationNext').onmouseout = function(event) {
						if ('scrollIntervalObj' in this) clearInterval(this['scrollIntervalObj']);
					}.bind(galleryDescriptor);
					
					if (sollikFramework.gallery.IE) {
						
						galleryDescriptor.content.className = 'clearfix';
						//var offset = 0;
						galleryDescriptor.images.list.each(function(image) {
							image.image.src = image.source;
							image.image.style.width = galleryDescriptor.images.thumbnail.width+'px';
							image.image.style.height = galleryDescriptor.images.thumbnail.height+'px';
							image.link.style.cursor = 'pointer';
							//image.link.style.position = 'absolute';
							//image.link.style.left = offset+'px';
							//image.link.style.top = '0px';
							image.link.className = 'floatLeft';
							image.link.style.marginLeft = galleryDescriptor.imgSpace+'px';
							image.link.onclick = function(image) {
								return function() {
									sollikFramework.gallery.popup.bind(galleryDescriptor)(image);
								}
							}(image);
							var borderModel = sollikFramework.createBorderModel();
							image.link.appendChild(borderModel.container);
							borderModel.content.appendChild(image.image);
							//offset += (galleryDescriptor.images.thumbnail.width+10+galleryDescriptor.imgSpace);
						});
						galleryDescriptor.content.appendChild(new Element('div', { className: 'clear' }));
						if (galleryDescriptor.images.list.length > 0) galleryDescriptor.images.list[0].link.style.marginLeft = '0px';
						galleryDescriptor.content.style.width = (galleryDescriptor.images.list.length*(10+galleryDescriptor.images.thumbnail.width)+Math.max(0, (galleryDescriptor.images.list.length-1)*galleryDescriptor.imgSpace))+'px';
						
						galleryDescriptor.draw = function() {
							this.scrollPos = Math.max(0, Math.min( galleryDescriptor.content.offsetWidth-galleryDescriptor.container.offsetWidth+galleryDescriptor.fadeWidth*2, this.scrollPos ));
							this.content.style.width = ( (galleryDescriptor.images.list.length*(10+galleryDescriptor.images.thumbnail.width)+Math.max(0, (galleryDescriptor.images.list.length-1)*galleryDescriptor.imgSpace)))+'px';
							//alert( (galleryDescriptor.content.offsetWidth-galleryDescriptor.container.offsetWidth+galleryDescriptor.fadeWidth) + (this.fadeWidth-this.scrollPos) );
							//this.content.parentNode.style.width = (825)+'px';
							//this.content.parentNode.style.backgroundColor = '#f00';
							this.content.style.marginLeft = '0px';
							this.content.style.marginLeft = (this.fadeWidth-this.scrollPos)+'px';
						}.bind(galleryDescriptor);

						galleryDescriptor.draw();
						
					} else {
						
						galleryDescriptor.images.list.each(function(image) {
							image.image.onload = function() {
								this.draw();
							}.bind(galleryDescriptor);
							image.image.src = image.source;
							image.link.style.position = 'absolute';
							image.link.style.zIndex = 1;
							image.link.style.cursor = 'pointer';
							image.link.onclick = function(image) {
								return function() {
									sollikFramework.gallery.popup.bind(galleryDescriptor)(image);
								}
							}(image);
						});
						
						galleryDescriptor.draw = function() {
							this.scrollPos = Math.max(0, Math.min( (5+this.images.thumbnail.width+5)*this.images.list.length + this.fadeWidth*2 + (this.images.list.length-1)*this.imgSpace - this.canvas.width, this.scrollPos ));
							
							var currentOffset = 0;
							var ctx = this.canvas.getContext('2d');
							ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
							ctx.save();
							ctx.translate(this.fadeWidth-this.scrollPos, 0);
							this.content.style.left = (this.fadeWidth-this.scrollPos)+'px';
							ctx.save();
							for(var imgIndex = 0, imgTotal = this.images.list.length; imgIndex < imgTotal; imgIndex++) {
								var img = this.images.list[imgIndex];

								ctx.fillStyle = '#fff';
								ctx.fillRect(0, 0, this.images.thumbnail.width+10, this.images.thumbnail.height+10);
								
								if (img.image.complete) ctx.drawImage(img.image, 5, 5, this.images.thumbnail.width, this.images.thumbnail.height);
								img.link.style.width = ((5+this.images.thumbnail.width+5)+'px');
								img.link.style.height = ((5+this.images.thumbnail.height+5)+'px');
								img.link.style.top = '0px';
								img.link.style.left = currentOffset+'px';
							
								currentOffset += 5+this.images.thumbnail.width+5+this.imgSpace;
								ctx.translate(5+this.images.thumbnail.width+5+this.imgSpace, 0);
								
							}
							ctx.restore();
							ctx.restore();


							// Left Gradient
							ctx.save();
							ctx.translate(0, 0);
							ctx.globalCompositeOperation = "destination-out";
							var gradient = ctx.createLinearGradient(0, 0, this.fadeWidth, 0);
							
							gradient.addColorStop(0, "rgba(0, 0, 0, 1.0)");
							gradient.addColorStop(1, "rgba(0, 0, 0, 0.0)");
							
							ctx.fillStyle = gradient;
							if (navigator.appVersion.indexOf('WebKit') != -1) {
								ctx.fill();
							} else {
								ctx.fillRect(0, 0, this.fadeWidth, this.canvas.height);
							}
							ctx.restore();

							// Right Gradient
							ctx.save();
							ctx.translate(this.canvas.width-this.fadeWidth, 0);
							ctx.globalCompositeOperation = "destination-out";
							var gradient = ctx.createLinearGradient(0, 0, this.fadeWidth, 0);
							
							gradient.addColorStop(1, "rgba(0, 0, 0, 1.0)");
							gradient.addColorStop(0, "rgba(0, 0, 0, 0.0)");
							
							ctx.fillStyle = gradient;
							if (navigator.appVersion.indexOf('WebKit') != -1) {
								ctx.fill();
							} else {
								ctx.fillRect(0, 0, this.fadeWidth, this.canvas.height);
							}
							ctx.restore();

						}.bind(galleryDescriptor);

						galleryDescriptor.draw();
					}
					} catch(e) { alert(e.message) }
					
					
				}
			});
		},
		
		
		popup: function(image) {
			if (image) {
				var borderModel = sollikFramework.createBorderModel();
				borderModel.container.title = 'Schliessen';
				borderModel.container.setStyle({ position: 'absolute', cursor: 'pointer', opacity: 0.0, zIndex: 1002 });
				borderModel.content.setStyle({ position: 'relative' });
				document.body.appendChild(borderModel.container);
				
				var cParent = image.link;
				cOffsetX = 0;
				cOffsetY = 0;
				do {
					cOffsetX += cParent.offsetLeft;
					cOffsetY += cParent.offsetTop;
				} while (this.self != (cParent = cParent.offsetParent));
				
				var gObject = $('globalContainer');
				var gParent = this.self;
				gOffsetX = 0;
				gOffsetY = 0;
				do {
					gOffsetX += gParent.offsetLeft;
					gOffsetY += gParent.offsetTop;
				} while (gObject != (gParent = gParent.offsetParent));
				
				borderModel.container.setStyle({ left: (gOffsetX+cOffsetX)+'px', top: (gOffsetY+cOffsetY)+'px' });
				borderModel.content.setStyle({ padding: '0px 35px' });
				var contentContainer = borderModel.content.appendChild(new Element('div'));
				contentContainer.setStyle({ position: 'relative' });
				
				var textContainer = contentContainer.appendChild(new Element('div'));
				textContainer.setStyle({ opacity: 0.0, visibility: 'hidden', backgroundColor: '#000', position: 'absolute', width: this.images.full.width + 'px', left: '0px', bottom: '0px' });
				var text = textContainer.appendChild(new Element('div'));
				text.setStyle({ position: 'relative', color: '#fff', padding: '10px' });
				text.appendChild(new Element('h3')).update(image.title).setStyle({ margin: '0px 0px 3px 0px' });
				text.appendChild(new Element('div')).update(image.description).setStyle({ margin: '0px' });
				
				var img = contentContainer.appendChild(new Element('img'));
				img.src = image.source;
				img.style.display = 'block';
				img.style.width = this.images.thumbnail.width+'px';
				img.style.height = this.images.thumbnail.height+'px';
				
				
				var buttonFunc = function(event) {
					//var newIndex = this.descriptor.images.list.indexOf(this.currImage);
					//alert(event);
					//newIndex += event;
					//var newIndex = 0;
					
					//alert(newIndex);
					/*alert(this.currImageIndex);
					var newIndex = this.currImageIndex += this.offset;
					alert(newIndex);*/
					
					var newIndex = this.descriptor.popupCurrImageIndex;
					newIndex += this.offset;
					
					if (newIndex < this.descriptor.images.list.length && newIndex >= 0) {
						this.descriptor.popupCurrImageIndex = newIndex;
						try {
							var currImage = this.descriptor.images.list[newIndex];
							this.img.src = currImage.source;
							
							//this.text.select('h3')[0].update(currImage.title); ---> does not work in IE oO
							//this.text.select('div')[0].update(currImage.description);
							this.textContainer.update();
							var text = this.textContainer.appendChild(new Element('div'));
							text.setStyle({ position: 'relative', color: '#fff', padding: '10px' });
							text.appendChild(new Element('h3')).update(currImage.title).setStyle({ margin: '0px 0px 3px 0px' });
							text.appendChild(new Element('div')).update(currImage.description).setStyle({ margin: '0px' });
						} catch(e) {
						}
					}

					if (newIndex < this.descriptor.images.list.length-1) {
						this.buttonNext.show();
					} else {
						this.buttonNext.hide();
					}
					
					if (newIndex > 0) {
						this.buttonPrev.show();
					} else {
						this.buttonPrev.hide();
					}
					
					this.descriptor.popupCancelNextClick = true;
					//event.cancelBubble = true;
					//event.returnValue = false;
					//return false;
				};
				
				var buttonNext = contentContainer.appendChild(new Element('img'));
				buttonNext.src = 'images/galleryNext.jpg';
				buttonNext.style.display = 'block';
				buttonNext.setStyle({ position: 'absolute', right: '-35px', top: '50%', marginTop: '-15px' });
				buttonNext.title = 'Nächstes Bild';
				if (!(this.images.list.indexOf(image) < this.images.list.length-1)) buttonNext.hide();
				var buttonPrev = contentContainer.appendChild(new Element('img'));
				buttonPrev.src = 'images/galleryPrev.jpg';
				buttonPrev.style.display = 'block';
				buttonPrev.setStyle({ position: 'absolute', left: '-35px', top: '50%', marginTop: '-15px' });
				buttonPrev.title = 'Vorheriges Bild';
				if (!(this.images.list.indexOf(image) > 0)) buttonPrev.hide();
				
				this.popupCurrImageIndex = this.images.list.indexOf(image);
				buttonPrev.onclick = buttonFunc.bind({ img: img, text: text, textContainer: textContainer, descriptor: this, buttonPrev: buttonPrev, buttonNext: buttonNext, offset: -1 });
				buttonNext.onclick = buttonFunc.bind({ img: img, text: text, textContainer: textContainer, descriptor: this, buttonPrev: buttonPrev, buttonNext: buttonNext, offset: +1 });
				
				
				var moveByX = this.self.offsetWidth/2 - (this.images.full.width/2+45) - cOffsetX;
				var moveByY = this.self.offsetHeight/2 - (this.images.full.height/2+5) - cOffsetY;
				
				var background = new Element('div');
				if (sollikFramework.gallery.IE6) {
					background.setStyle({ position: 'absolute', width: document.body.offsetWidth+'px', height: document.body.offsetHeight+'px', backgroundColor: '#333', left: '0px', top: '0px', opacity: 0.0, zIndex: 1001 });
				} else {
					background.setStyle({ position: 'fixed', backgroundColor: '#333', left: '0px', top: '0px', right: '0px', bottom: '0px', opacity: 0.0, zIndex: 1001 });
				}
				document.body.appendChild(background);
				
				borderModel.container.onclick = background.onclick = function(box, background, textContainer, descriptor) {
					return function(event) {
						if (descriptor.popupCancelNextClick) {
							descriptor.popupCancelNextClick = false;
							//event.cancelBubble = true;
							//event.returnValue = false;
							return false;
						}
						new Effect.Opacity(textContainer, { to: 0.0, duration: 0.2, delay: 0.0, afterFinish: function(effect) { effect.element.setStyle({ visibility: 'hidden' }); } });
						new Effect.Opacity(box, { to: 0.0, duration: 0.5, delay: 0.3, afterFinish: function(effect) { effect.element.remove(); } });
						new Effect.Opacity(background, { to: 0.0, duration: 0.5, delay: 0.3, afterFinish: function(effect) { effect.element.remove(); } });
					}
				}(borderModel.container, background, textContainer, this);
				
				new Effect.Opacity(background, { from: 0.0, to: 0.6, duration: 0.5, delay: 0.2 });
				
				new Effect.Parallel([
						new Effect.Scale(img, 355.56, { sync: true, beforeUpdate: function(effect) { var bw = 10+Math.round((800-img.offsetWidth)*-5/(800-225)); borderModel.container.setStyle({ padding: bw+'px' }); } }),
						new Effect.Opacity(borderModel.container, { sync: true, from: 0.0, to: 1.0 }),
						new Effect.Move(borderModel.container, { sync: true, x: moveByX, y: moveByY })
					], { duration: 0.5, delay: 0.1 }
				);
				
				var self = this;
				new Effect.Opacity(textContainer, { from: 0, to: 0.7, delay: 1, duration: 0.5, beforeUpdate: function(effect) {
					contentContainer.setStyle({ width: self.images.full.width + 'px', height: self.images.full.height + 'px' });
					effect.element.setStyle({ visibility: 'visible' })
				} });
			}
		}
		
				
	},
	
	
	createBorderModel: function() {
		var container = new Element('div');
		container.style.backgroundColor = '#fff';
		container.style.paddingTop = '5px';
		container.style.paddingRight = '5px';
		container.style.paddingBottom = '5px';
		container.style.paddingLeft = '5px';
		var content = container.appendChild(new Element('div'));
		
		return { container: container, content: content };
	}
	
	
}

window.onload = function() {
	sollikFramework.gallery.init();
}