window.addEvent('domready', function() {


	/* Tworzenie struktury */
	var mainContainer = new Element('div');
	mainContainer.set('id', 'gvContainer');
	mainContainer.inject('columnRight');
	
	var background = new Element('div');
	background.set('id', 'gvBackground');
	background.setStyles({
		height: '100%',
		opacity: 0.9,
		width: '100%'
	});
	background.inject(mainContainer);
	
	var closeContainer = new Element('div');
	closeContainer.set('id', 'gvCloseContainer');
	closeContainer.inject(mainContainer);
	
	var closeButton = new Element('img');
	closeButton.set({
		'id': 'gvCloseButton',
		'src': 'img/gv_close.gif',
		'alt': 'Zamknij'
	});
	closeButton.addEvent('click', function() {
		background.setStyle('opacity', 1);
		var tweenContainer = new Fx.Tween(mainContainer, {property: 'opacity', duration: 200});
		tweenContainer.start(0).chain(function() {
			mainContainer.setStyles({
				'display': 'none',
				'opacity': 1
			});
			background.setStyle('opacity', 0.9);
			image = $('gvImage');
			if (image) {
				image.destroy();
			}
			thumbsContainer.setStyle('display', 'none');
		});
	});
	closeButton.inject(closeContainer);
	
	var thumbsContainer = new Element('div');
	thumbsContainer.set('id', 'gvThumbsContainer');
	thumbsContainer.setStyle('display', 'none');
	thumbsContainer.inject(mainContainer);
	
	var thumbScroll = new Element('div');
	thumbScroll.set('id', 'gvThumbsScroll');
	thumbScroll.inject(thumbsContainer);
	
	var scrollPosition = 0;
	
	var arrowLeft = new Element('img');
	arrowLeft.set({
		id: 'gvArrowLeft',
		src: 'img/gv_arrow_left.gif',
		alt: '<'
	});
	arrowLeft.addEvent('click', function() {
		if (scrollPosition > 0) {
			var fxScroll = new Fx.Scroll(thumbScroll, {duration: 200});
			
			scrollPosition -= 130;
			if (scrollPosition < 0) {
				scrollPosition = 0;
			}
			
			fxScroll.start(scrollPosition, 0);
		}
	});
	arrowLeft.inject(thumbsContainer);
	
	var arrowRight = new Element('img');
	arrowRight.set({
		id: 'gvArrowRight',
		src: 'img/gv_arrow_right.gif',
		alt: '<'
	});
	arrowRight.addEvent('click', function() {
		var maxWidth = thumbsListWidth - 602;
		
		if (scrollPosition < maxWidth) {
			var fxScroll = new Fx.Scroll(thumbScroll, {duration: 200});
			
			scrollPosition += 130;
			if (scrollPosition > maxWidth) {
				scrollPosition = maxWidth;
			}
			
			fxScroll.start(scrollPosition, 0);
		}
	});
	arrowRight.inject(thumbsContainer);
	
	var thumbsList = new Element('div');
	thumbsList.set('id', 'gvThumbsList');
	thumbsList.inject(thumbScroll);
	var thumbsListWidth = 0;
	
	/* Reakcja na kliknięcie */
	var galleryLinks = $$('.gallery a');
	var lastHighlighted;
	
	galleryLinks.each(function(element) {
		var thumbContainer = new Element('div');
		thumbContainer.set('class', 'gvThumbContainer');
		thumbContainer.inject(thumbsList);
		
		var thumb = element.clone();
		thumb.addEvent('click', function(event) {
			event = new Event(event).stop();
			
			var image = new Asset.image(element.get('href'), {
				id: 'gvImage',
				alt: '',
				onload: function() {
					if (lastHighlighted) {
						lastHighlighted.tween('opacity', 1);
					}
					thumb.tween('opacity', 0.2);
					lastHighlighted = thumb;
					
					var maxWidth = thumbsListWidth - 602;
					
					var fxScroll = new Fx.Scroll(thumbScroll, {duration: 200});
					
					scrollPosition = thumb.getPosition(thumbsList).x - 260;
					if (scrollPosition > maxWidth) {
						scrollPosition = maxWidth;
					}
					if (scrollPosition < 0) {
						scrollPosition = 0;
					}
					
					fxScroll.start(scrollPosition, 0);
				
					var oldImage = $('gvImage');
					var oldImageTween = new Fx.Tween(oldImage, {property: 'opacity', duration: 200});
					
					var screenPosition = document.getScroll();
					var screenSize = window.getSize();
					var parent = mainContainer.getParent();
					var parentPosition = parent.getPosition();
					var parentSize = parent.getSize();
					
					oldImageTween.start(0).chain(function(){
						
						oldImage.destroy();
						
						image.setStyle('opacity', 0);
						image.inject(mainContainer);
						
						var imageSize = image.getSize();
						var containerWidth = imageSize.x + 100;
						if (containerWidth < 690) {
							containerWidth = 690;
						}
						
						containerHeight = 149 + imageSize.y;
						containerTop = (screenSize.y - containerHeight) / 2;
						if (containerTop < 0) {
							containerTop = 0;
						}
						containerTop = screenPosition.y + containerTop;
						containerLeft = parentPosition.x + (parentSize.x - containerWidth) / 2;
						
						var morph = new Fx.Morph(mainContainer);
						thumbsContainer.morph({
							top: containerHeight - 103,
							left: (containerWidth - 658) / 2
						});
						
						morph.start({
							left: containerLeft,
							height: containerHeight,
							top: containerTop,
							width: containerWidth
							
						}).chain(function() {
							image.setStyle('left', (containerWidth - imageSize.x) / 2);
							image.tween('opacity', 1);
						});
					
					});
				}
			});
		});
		thumb.inject(thumbContainer);
		var thumbSize = element.getSize();
		var thumbTop = (103 - thumbSize.y) / 2;
		if (thumbTop < 0) {
			thumbTop = 0;
		}
		var thumbLeft = (120 - thumbSize.x) / 2;
		if (thumbLeft < 0) {
			thumbLeft = 0;
		}
		var thumbContWidth = 120 - thumbLeft;
		var thumbContHeight = 103 - thumbTop;
		
		thumbContainer.setStyles({
			'height': thumbContHeight,
			'padding-top': thumbTop,
			'padding-left': thumbLeft,
			'width': thumbContWidth
		});
		
		thumbsListWidth += 130;
		thumbsList.setStyle('width', thumbsListWidth);
		
		element.addEvent('click', function(event) {
			event = new Event(event).stop();
			
			var containerHeight = 149;
			
			/* Pozycjonowanie */
			var screenPosition = document.getScroll();
			var screenSize = window.getSize();
			var parent = mainContainer.getParent();
			var parentPosition = parent.getPosition();
			var parentSize = parent.getSize();
			
			var containerLeft = parentPosition.x + (parentSize.x - 690) / 2;
			var containerTop = (screenSize.y - containerHeight) / 2;
			if (containerTop < 0) {
				containerTop = 0;
			}
			containerTop = screenPosition.y + containerTop;
			
			
			mainContainer.setStyles({
				display: 'block',
				left: containerLeft,
				height: containerHeight,
				top: containerTop,
				width: 690
			});
			
			var image = new Asset.image(element.get('href'), {
				id: 'gvImage',
				alt: '',
				onload: function() {
					if (lastHighlighted) {
						lastHighlighted.tween('opacity', 1);
					}
					thumb.tween('opacity', 0.2);
					lastHighlighted = thumb;
					
					image.setStyle('opacity', 0);
					image.inject(mainContainer);
					
					var imageSize = image.getSize();
					var containerWidth = imageSize.x + 100;
					if (containerWidth < 690) {
						containerWidth = 690;
					}
					
					containerHeight = 149 + imageSize.y;
					containerTop = (screenSize.y - containerHeight) / 2;
					if (containerTop < 0) {
						containerTop = 0;
					}
					containerTop = screenPosition.y + containerTop;
					containerLeft = parentPosition.x + (parentSize.x - containerWidth) / 2;
					
					var morph = new Fx.Morph(mainContainer);
					
					morph.start({
						left: containerLeft,
						height: containerHeight,
						top: containerTop,
						width: containerWidth
						
					}).chain(function() {
						image.setStyle('left', (containerWidth - imageSize.x) / 2);
						image.tween('opacity', 1);
						
						thumbsContainer.setStyles({
							display: 'block',
							top: containerHeight - 103,
							left: (containerWidth - 658) / 2,
							opacity: 0
						});
						
						thumbsContainer.tween('opacity', 1);
						
						var maxWidth = thumbsListWidth - 602;
						var fxScroll = new Fx.Scroll(thumbScroll, {duration: 200});
						
						scrollPosition = thumb.getPosition(thumbsList).x - 260;
						if (scrollPosition > maxWidth) {
							scrollPosition = maxWidth;
						}
						if (scrollPosition < 0) {
							scrollPosition = 0;
						}
						
						fxScroll.start(scrollPosition, 0);
					});
				}
			});
			
		});
	});
});