var GalleryScroller = {
	increment: 300,
	snapSize: 100,
	
	init: function() {
		this.scroller = $('gallery-scroller');
		this.container = this.scroller.getElement('.gallery-scroller-inner');
		
		this.containerSize = this.container.getSize();
		this.minScroll = 0;
		this.maxScroll = (this.container.getScrollSize().y - this.containerSize.y);
		//TODO Fix
		if (Browser.Engine.webkit) {
			this.maxScroll = 10000;
		}
		
		this.fxScroll = new Fx.Scroll(this.container, { link: 'cancel' });
		
		this.container.getElements('.gallery-thumb').addEvent('click', this.click.bindWithEvent(this));

		['up', 'down'].each(function(direction){
			var button = this.scroller.getElement('.gallery-scroll-' + direction);
			if (button) {
				button.addEvent('click', this.scroll.bindWithEvent(this, [ (direction == 'down'), false ]));
				
				// The scroll buttons are hidden with CSS so we need to display them
				button.setStyle('display', 'block');
			}
  		}, this);
		
		
		var activeItem = this.container.getElement('.gallery-thumb-active');
		if (!activeItem) {
			activeItem = this.container.getElement('.gallery-thumb');
		}
		if (activeItem) {
			this.scrollTo(activeItem, true);
		}
		
	},
	
	click: function(event) {
		event = new Event(event);
		
		var target = event.target;
		while(target) {
			if (target.get('tag') == 'a') {
				break;
			}
			else {
				target = target.getParent();
			}
		}
		
		if (target) {
			this.scrollTo(target, false);
		}
	},

	snap: function(position) {
		// If we are within 'snapSize'px of the end we'll go ahead and move to it (so there isn't a small scroll left)
		if (position - this.minScroll < this.snapSize) {
			position = this.minScroll;
		}
		else if (this.maxScroll - position < this.snapSize) {
			position = this.maxScroll;
		}
		return position;
	},
	
	scroll: function(event, down, instant) {
		event = new Event(event).stop();
		
		var currentPos = this.container.getScroll();
		var newPos = (down ? Math.min(currentPos.y + this.increment, this.maxScroll) : Math.max(currentPos.y - this.increment, this.minScroll));
		
		this.fxScroll[instant ? 'set' : 'start'](0, this.snap(newPos));
	},

	scrollTo: function(element, instant) {
		var elementPos = element.getPosition();
		var elementSize = element.getSize();
		var containerPos = this.container.getPosition();
		var currentPos = this.container.getScroll();
		
		var currentScroll = (elementPos.y + currentPos.y) - containerPos.y - Math.round(this.containerSize.y / 2) + Math.round(elementSize.y / 2);
		
		currentScroll = Math.min(currentScroll, this.maxScroll);
		currentScroll = Math.max(currentScroll, this.minScroll);
		
		this.fxScroll[instant ? 'set' : 'start'](0, currentScroll);
		
		this.container.getElement('.gallery-thumb-active').removeClass('gallery-thumb-active');
		
		element.addClass('gallery-thumb-active');
	}
};
// Safari doesn't like scrolling to the active element before the page loading is complete
window.addEvent((Browser.Engine.webkit ? 'load' : 'domready'), GalleryScroller.init.bind(GalleryScroller));


var GalleryOverlay = {
	init: function() {
		this.box = $('gallery-overlay');
		if (!this.box) {
			return;
		}

		this.link = $(document.body).getElement('.gallery-image a');
		if (!this.link) {
			return;
		}

		this.overlay = new Element('div', { 
			'class': 'gallery-overlay-overlay',
			'z-index': 1000
		}).setOpacity(.75);
		this.box.setStyle('z-index', 1100);
		
		document.body.adopt(this.overlay);
		document.body.adopt(this.box);
		
		this.link.addEvent('click', function(event) {
			event = new Event(event).stop();
			this.open();
		}.bindWithEvent(this));
		
		this.overlay.addEvent('click', function(event) {
			event = new Event(event).stop();
			this.close();
		}.bindWithEvent(this));

		var closeButton = $(document.body).getElement('.gallery-overlay-close a');
		if (closeButton) {
			closeButton.addEvent('click', function(event) {
				event = new Event(event).stop();
				this.close();
			}.bindWithEvent(this));
		}
		
		var reposition = function(event) {
			(function() {
				this.reposition();
			}.bind(this)).delay(100);
		}.bindWithEvent(this);

		this.fx = {
			overlay: new Fx.Tween(this.overlay, { property: 'opacity', duration: 500, link: 'cancel' }).set(0),
			box: new Fx.Tween(this.box, { property: 'opacity', duration: 300, link: 'cancel' }).set(0)
		};
		
		document.body.addEvent('keypress', function(event) {
			event = new Event(event);
			
			if (event.key == 'esc') {
				this.close();
			}
		}.bindWithEvent(this));
		
		window.addEvent('resize', reposition);
		window.addEvent('scroll', reposition);
	},
	
	open: function() {
		if (Browser.Engine.trident) {
			this.overlay.setStyles({
				'display': 'block',
				'visibility': 'visible'
			}).setOpacity(.75);
			this.box.setStyles({
				'display': 'block',
				'visibility': 'visible'
			}).setOpacity(1);
		}
		else {
			this.fx.overlay.set(0);
			this.fx.box.set(0);
			this.overlay.setStyles({
				'display': 'block'
			});
			this.box.setStyles({
				'display': 'block'
			});
			this.fx.overlay.start(.75).chain(function() {
				this.fx.box[Browser.Engine.trident ? 'set' : 'start'](1);
			}.bind(this));
		}
		
		this.reposition();
	},
	
	close: function() {
		if (Browser.Engine.trident) {
			this.overlay.setStyles({
				'display': 'none'
			});
			this.box.setStyles({
				'display': 'none'
			});
		}
		else {
			this.fx.box.cancel().start(0).chain(function() {
				this.fx.overlay.start(0).chain(function() {
					this.overlay.setStyles({
						'display': 'none'
					});
					this.box.setStyles({
						'display': 'none'
					});
				}.bind(this));
			}.bind(this));
		}
	},
	
	reposition: function() {
		var windowSize = window.getSize(), windowScroll = window.getScroll(), contentSize = this.box.getSize();
		
		this.overlay.setStyles({
			top: windowScroll.y,
			left: windowScroll.x,
			width: '100%',//windowSize.x,
			height: windowSize.y
		});
		
		this.box.setStyles({
			marginTop: 0 - (contentSize.y / 2) + windowScroll.y,
			marginLeft: 0 - (contentSize.x / 2) + windowScroll.x
		});
	}
};
window.addEvent('domready', GalleryOverlay.init.bind(GalleryOverlay));