/**
*	Gallery
*	@author Alex Tse, FBX 07
*/
var Gallery = {
	Global: {
		loadingContainer: null,
		previewImage: null,
		closePreviewButton: null,
		nextPreviewButton: null,
		prevPreviewButton: null
	},
	
	Settings: {
		descriptionClassName: null,
		captionClassName: null,
		closeButtonClassName: null,
		GalleryContainer: null
	},
	
	EventHandler: {
		PreviewImage: {
			onLoad: function() {
				Gallery.Global.loadingContainer.remove();
				Gallery.Global.loadingContainer = null;
				// close preview button setup
				
				var closeButton = new Element('div', {'class' : Gallery.Settings.closeButtonClassName})
				.setStyle({opacity: 0})
				.addListener('click', Gallery.EventHandler.ClosePreviewButton.onClick);
				Gallery.Global.closePreviewButton = closeButton;
				document.body.appendChild(closeButton);
				// IE6 png hack
				if (Browser.isIE && Browser.IEScriptVersion <= 5.6) {
					var bgImgUrl = closeButton.getStyle('backgroundImage').match(/^url\(\"(.*)\"\)$/i)[1];
					closeButton.setStyle({
						background: "none",
						filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + bgImgUrl + "',sizingMethod='scale')",
						visibility: 'hidden'
					});
				}
				
				var el = this.__Original__;
				
				// next preview and previous preview button setup
				var galleryItemList = Gallery.Settings.galleryContainer.getElementsByAttribute('rel', 'galleryItem');
				var nextIndex = (galleryItemList.indexOf(el) + 1 < galleryItemList.length)? galleryItemList.indexOf(el) + 1 : null;
				var prevIndex = (galleryItemList.indexOf(el) - 1 > -1)? galleryItemList.indexOf(el) - 1 : null;
				
				
				
				var buttonStyleSet = {
					 position: 'absolute', opacity: 0, top: 0, left: 0, zIndex: 10, background: '#fff', padding: '5px', fontSize: '10px', fontWeight: 'bold', cursor: 'pointer'
				}
				var nextButton;
				var prevButton;
				
				if (nextIndex != null) {
					nextButton = new Element('div')
					.setStyle(buttonStyleSet)
					.setStyle({ borderRight: 'none'})
					.addListener('click', function() {
						Gallery.showPreview(galleryItemList[nextIndex]);
					})
					.addListener('mouseout', Gallery.EventHandler.NavButtons.onMouseOut)
					.addListener('mouseover', Gallery.EventHandler.NavButtons.onMouseOver);
					nextButton.appendChild(document.createTextNode('NEXT'));
					nextButton.callee = this;
					nextButton.__fadingIn__ = 0;
					Gallery.Global.nextPreviewButton = nextButton;
					document.body.appendChild(Gallery.Global.nextPreviewButton);
				} 
				
				if (prevIndex != null) {
					prevButton = new Element('div')
					.setStyle(buttonStyleSet)
					.setStyle({ borderLeft: 'none'})
					.addListener('click', function() {
						Gallery.showPreview(galleryItemList[prevIndex]);
					})
					.addListener('mouseout', Gallery.EventHandler.NavButtons.onMouseOut)
					.addListener('mouseover', Gallery.EventHandler.NavButtons.onMouseOver);
					prevButton.appendChild(document.createTextNode('PREV'));
					prevButton.callee = this;
					prevButton.__fadingIn__ = 0;
					Gallery.Global.prevPreviewButton = prevButton;
					document.body.appendChild(Gallery.Global.prevPreviewButton);
				}
				
				this.__nextButton__ = nextButton;
				this.__prevButton__ = prevButton;
				
				this.transformStyle({ 
					opacity: { end: 1, duration: 500, accelerate: -1},
					width: { start: el.getWidth(), end: this.getWidth(), unit: 'px', duration: 500, accelerate: -1},
					height: { start: el.getHeight(), end: this.getHeight(), unit: 'px', duration: 500, accelerate: -1},
					left: { start: el.getX(), end: Window.getScrollWidth() + (Window.getInnerWidth() - this.getWidth())/2, unit: 'px', duration: 500, accelerate: -1},
					top: { start: el.getY(), end: Window.getScrollHeight() + (Window.getInnerHeight() - this.getHeight())/2, unit: 'px', duration: 500, accelerate: -1}
				}, function() {
					var sideWidth = parseFloat(this.getStyle('padding'),10) + parseFloat(this.getStyle('borderWidth'),10);
					
					closeButton.setStyle({ left: this.getX() - 10 + 'px', top: this.getY() - 10 + 'px', visibility: 'visible' });
					if (!Browser.isIE) closeButton.applyEffect(Effect.fadeIn, {duration: 500});
					if (!!nextButton) nextButton.setStyle({ 
						left: this.getX() + this.getWidth() - nextButton.getWidth() - sideWidth + 'px', 
						top: this.getY() + (this.getHeight() - nextButton.getHeight())/2 + 'px' 
					});
					if (!!prevButton) prevButton.setStyle({ 
						left: this.getX() + sideWidth + 'px', 
						top: this.getY() + (this.getHeight() - prevButton.getHeight())/2 + 'px' 
					});
					this.addListener('mouseover', Gallery.EventHandler.PreviewImage.onMouseOver);
					this.addListener('mouseout', Gallery.EventHandler.PreviewImage.onMouseOut);
					this.addListener('mousemove', Gallery.EventHandler.PreviewImage.onMouseOver);

					if (el.getAttribute('caption') || el.getAttribute('captionRef')) {
						var descDivContainer = new Element('div')
						.setStyle({
							position: 'absolute',
							overflow: 'hidden',
							width: this.getWidth() - sideWidth*2 + 'px',
							height: 30 + 'px',
							left: this.getX() + sideWidth + 'px',
							top: this.getY() + this.getHeight() - 30 - sideWidth + 'px',
							zIndex: this.getStyle('zIndex') + 1
						});
						this.__descDivContainer__ = descDivContainer;
						document.body.appendChild(descDivContainer);
						
						var descScrollPane = new Element('div')
						.setStyle({
							position: 'absolute',
							width: '100%',
							height: '30px',
							top: '30px'
						});
						descDivContainer.appendChild(descScrollPane);
						
						var dimDiv = new Element('div')
						.setStyle({
							position: 'absolute',
							width: '100%',
							height: '30px',
							backgroundColor: '#000',
							opacity: 0.4
							});
						descScrollPane.appendChild(dimDiv);
						
						var txtDesc = (el.getAttribute('caption'))? el.getAttribute('caption') : eval(el.getAttribute('captionRef'));
						var txtDiv = new Element('div', {'class': Gallery.Settings.captionClassName})
						.setStyle({position: 'absolute', right: '10px'});
						txtDiv.innerHTML = txtDesc;
						descScrollPane.appendChild(txtDiv);
						
						descScrollPane.transformStyleSet({top: '0px'}, {duration: 200});
					}
				});
			},
			
			onMouseOver: function() {
				var nextButton = this.__nextButton__;
				var prevButton = this.__prevButton__;
				if (this.__fadingIn__ > 0) return;
				this.__fadingIn__ = 0;
				var onFadeInComplete = function() { this.__fadingIn__--;}
				if (!!nextButton) {
					this.__fadingIn__++;
					nextButton.setStyle({visibility: 'visible'}).applyEffect(Effect.fadeIn, {duration: 500, onComplete: onFadeInComplete});
				}
				if (!!prevButton) {
					this.__fadingIn__++;
					prevButton.setStyle({visibility: 'visible'}).applyEffect(Effect.fadeIn, {duration: 500, onComplete: onFadeInComplete});
				}
			},
			
			onMouseOut: function(e) {
				var nextButton = this.__nextButton__;
				var prevButton = this.__prevButton__;
				if (Event.getToTarget(e) === nextButton || Event.getToTarget(e) === prevButton) return;
				this.__fadingIn__ = 0;
				var onFadeOutComplete = function() { this.setStyle({visibility: 'hidden'}); }
				if (!!nextButton) {
					nextButton.applyEffect(Effect.fadeOut, {duration: 500, onComplete: onFadeOutComplete});
				}
				if (!!prevButton) {
					prevButton.applyEffect(Effect.fadeOut, {duration: 500, onComplete: onFadeOutComplete});
				}
			}
		},
		
		NavButtons: {
			onMouseOut: function(e) {
				if (Event.getToTarget(e) === this.callee) return;
				Gallery.EventHandler.PreviewImage.onMouseOut.call(this.callee, e);
			},
			onMouseOver: function(e) {
				if (Event.getFromTarget(e) === this.callee) return;
				Gallery.EventHandler.PreviewImage.onMouseOver.call(this.callee, e);
			}
		},
		
		ShowingElement: {
			onClick: function(e) {
				var el = Event.getTarget(e);
				var container = el;
				while (container && container !== Gallery.Settings.galleryContainer) container = container.parentNode; // matching container
				if (!container || $(el).getAttribute('rel') != 'galleryItem') return; // return if incorrect container or item is not a gallery item
				Gallery.showPreview(el);
			},
			
			onMouseOver: function(e) {
				var el = Event.getTarget(e);
				var container = el;
				while (container && container !== Gallery.Settings.galleryContainer) container = container.parentNode; // matching container
				if (!container || $(el).getAttribute('rel') != 'galleryItem') return; // return if incorrect container or item is not a gallery item
				if (!!el.__galleryItem_Description && el.__galleryItem_Description === Event.getFromTarget(e)) return;
				if (Gallery.Global.previewImage === Event.getFromTarget(e)) return;
				
				if (el.getAttribute('description') || el.getAttribute('descriptionRef')) {
					var div = new Element('div', {'class': Gallery.Settings.descriptionClassName});
					if (el.getAttribute('description')) {
						div.appendChild(document.createTextNode(el.getAttribute('description')));
					} else {
						div.innerHTML = eval(el.getAttribute('descriptionRef'));
					}
					div.setStyle({ top: el.getY() + el.getHeight()*.75 + 'px', opacity: 0});
					div.addListener('mouseout', Gallery.EventHandler.DescriptionContainer.onMouseOut);
					document.body.appendChild(div);
					el.__galleryItem_Description = div;
					var divLeft = (el.getX() + (el.getWidth() - div.getWidth())/2 < 0)? 0 : el.getX() + (el.getWidth() - div.getWidth())/2;
					div.setStyle({left: divLeft + 'px'}).transformStyleSet({ opacity: "1", top: el.getY() + el.getHeight() + 'px'}, {duration: 200});
				}
			},
			
			onMouseOut: function(e) {
				var el = Event.getTarget(e);
				var container = el;
				while (container && container !== Gallery.Settings.galleryContainer) container = container.parentNode; // matching container
				if (!container || $(el).getAttribute('rel') != 'galleryItem' || !el.__galleryItem_Description) return;
				if (Event.getToTarget(e) != el.__galleryItem_Description) {
					var styleSet = {opacity: "0.01", top: el.__galleryItem_Description.getY() + 20 + 'px'};
					var options = {duration: 500, onComplete: function() { 
						if (this.parentNode) this.remove();
					}};
					$(el.__galleryItem_Description).transformStyleSet(styleSet, options);
				}
			}
		},
		
		ClosePreviewButton: {
			onClick: function() {
				Gallery.removePreview();
			}
		},
		
		DescriptionContainer: {
			onMouseOut: function(e) {
				var el = Event.getToTarget(e);
				if (!!el.__galleryItem_Description && el.__galleryItem_Description === this) return;
				if (!!this.__fadingOut__) return;
				this.__fadingOut__ = true;
				this.transformStyle({
					opacity: {end: 0, duration: 500},
					top: {end: this.getY() + 20, unit: 'px', duration: 500}
				}, function() {
					if (this.parentNode) this.remove();
				});
			}
		},
		
		NextPreviewButton: {
			onClick: function() {
				var el = Gallery.Global.previewImage.__Original__;
				var galleryItemList = Gallery.Settings.galleryContainer.getElementsByAttribute('rel', 'galleryItem');
				var nextIndex = (galleryItemList.indexOf(el) + 1 < galleryItemList.length)? galleryItemList.indexOf(el) + 1 : null;
				if (nextIndex != null) Gallery.showPreview(galleryItemList[nextIndex]);
			}
		},
		
		PrevPreviewButton: {
			onClick: function() {
				var el = Gallery.Global.previewImage.__Original__;
				var galleryItemList = Gallery.Settings.galleryContainer.getElementsByAttribute('rel', 'galleryItem');
				var prevIndex = (galleryItemList.indexOf(el) - 1 > -1)? galleryItemList.indexOf(el) - 1 : null;
				if (prevIndex != null) Gallery.showPreview(galleryItemList[prevIndex]);
			}
		}
	},
	
	showPreview: function(el) {
		if (!!Gallery.Global.previewImage && el === Gallery.Global.previewImage.__Original__) return;
		Gallery.removePreview();
		
		var loadingDiv = new Element('img', {src: "resources/images/ajax-loader.gif"})
		.setStyle({
			position: 'absolute', 
			left: Window.getScrollWidth() + Window.getInnerWidth()/2 + 'px', 
			top: Window.getScrollHeight() + Window.getInnerHeight()/2 + 'px', 
			border: 'solid 5px #000', 
			opacity: 0.4 
		});
		Gallery.Global.loadingContainer = loadingDiv;
		document.body.appendChild(Gallery.Global.loadingContainer);
		
		var img = new Element('img').setStyle({ position: 'absolute', opacity: 0, zIndex: 9, padding: '5px', backgroundColor: '#fff', border: 'solid 1px #999', top: 0, left: 0});
		img.__Original__ = $(el);
		Gallery.Global.previewImage = img;
		document.body.appendChild(Gallery.Global.previewImage);
		img.addListener('load', Gallery.EventHandler.PreviewImage.onLoad).setAttribute('src', el.getAttribute('fullSrc'));
	},
	
	removePreview: function() {
		if (Gallery.Global.closePreviewButton) {
			Gallery.Global.closePreviewButton.remove();
			Gallery.Global.closePreviewButton = null;
		}
		if (Gallery.Global.nextPreviewButton) {
			Gallery.Global.nextPreviewButton.remove();
			Gallery.Global.nextPreviewButton = null;
		}
		if (Gallery.Global.prevPreviewButton) {
			Gallery.Global.prevPreviewButton.remove();
			Gallery.Global.prevPreviewButton = null;
		}
		if (Gallery.Global.previewImage) {
			var lastPreview = Gallery.Global.previewImage;
			if (lastPreview.__descDivContainer__) lastPreview.__descDivContainer__.remove();
			var el = lastPreview.__Original__;
			Gallery.Global.previewImage = null;
			var styleSet = { opacity: "0", width: el.getWidth() + 'px', height: el.getHeight() + 'px', left: el.getX() + 'px', top: el.getY() + 'px'};
			var options = { duration: 200, accelerate: 1, onComplete: function() { this.remove(); } };
			lastPreview.transformStyleSet(styleSet, options);
		}
	},
	
	startup: function(el) {
		$(el).getElementsByAttribute("rel", "galleryItem").each(function() {
			this.style.cursor = 'pointer';
		});
		Gallery.Settings.galleryContainer = el;
		if (el.__isGallery__) return;
		Gallery.Settings.galleryContainer.addListener('click', Gallery.EventHandler.ShowingElement.onClick);
		Gallery.Settings.galleryContainer.addListener('mouseover', Gallery.EventHandler.ShowingElement.onMouseOver);
		Gallery.Settings.galleryContainer.addListener('mouseout', Gallery.EventHandler.ShowingElement.onMouseOut);		
		el.__isGallery__ = true;
	}
}