function GalleryImageItem(json) {
	this.fullImage = new Element('img', {src: json.src}).setStyle({opacity: 0, visibility: 'hidden'});
	this.thumbnail = new Element('img', {src: json.thumb, 'class': 'scrollingPosition'});
	this.caption = json.caption;
}

GalleryImageItem.prototype = Object.extend(GalleryImageItem.prototype, {
	show: function() {
		$(this.fullImage).setStyle({visibility: 'visible'}).transformStyleSet({opacity: '1'}, {duration: 200});
	},
	hide: function() {
		$(this.fullImage).transformStyleSet({opacity: '0'}, {duration: 200, onComplete: function() { this.setStyle({visibility: 'hidden'}); } });
	}
});


function DevelopmentGallery(aData) {
	var GALLERY = this;
	var GalleryItems = [];
	aData.each(function() {
		GalleryItems.push(new GalleryImageItem(this));
	});
	var CONTAINERS, BUTTONS;
	
	this.EventHandlers = {
		thumbnail: {
			onClick: function() {
				var GALLERYITEM_THUMB = this;
				GalleryItems.each(function() { 
					if (this.thumbnail !== GALLERYITEM_THUMB) {
						this.hide();
					} else {
						this.show();
					}
				});
			},
			
			onMouseOver: function() {
				this.appendClass('hover');
			},
			
			onMouseOut: function() {
				this.removeClass('hover');
			}
		},
		
		galleryContainer: {
			onMouseOver: function() {
				if (Browser.isIEBelow7) {
					return function() {
						clearTimeout(this.hideTimer);
						CONTAINERS.thumbnails.transformStyleSet({bottom: '0px', opacity: '0.8'}, {duration: 150, accelerate: -1});
						if (BUTTONS.scrollLeft.parentNode) BUTTONS.scrollLeft.transformStyleSet({bottom: '0px'}, {duration: 150, accelerate: -1});
						if (BUTTONS.scrollRight.parentNode) BUTTONS.scrollRight.transformStyleSet({bottom: '0px'}, {duration: 150, accelerate: -1});
					}
				} else {
					return function() {
						clearTimeout(this.hideTimer);
						CONTAINERS.buttons.transformStyleSet({bottom: '0px', opacity: '0.8'}, {duration: 150, accelerate: -1});
					}
				}
			}(),
			
			onMouseOut: function() {
				if (Browser.isIEBelow7) {
					return function() {
						var GALLERY_CONTAINER = this;
						GALLERY_CONTAINER.hideTimer = setTimeout(function() {
							if (BUTTONS.scrollLeft.parentNode) BUTTONS.scrollLeft.transformStyleSet({bottom: '-64px'}, {duration: 150, accelerate: -1});
							if (BUTTONS.scrollRight.parentNode) BUTTONS.scrollRight.transformStyleSet({bottom: '-64px'}, {duration: 150, accelerate: -1});
							CONTAINERS.thumbnails.transformStyleSet({bottom: '-64px', opacity: '0.3'}, {duration: 150, accelerate: -1});
						}, 400);
					}
				} else {
					return function() {
						var GALLERY_CONTAINER = this;
						GALLERY_CONTAINER.hideTimer = setTimeout(function() {
							CONTAINERS.buttons.transformStyleSet({bottom: '-64px', opacity: '0.3'}, {duration: 150, accelerate: -1});
						}, 400);
					}
				}
			}()
		}
	}
	
	this.init = function(containers, buttons) {
		CONTAINERS = {
			fullImages: $(containers.fullImages),
			thumbnails: $(containers.thumbnails),
			gallery: $(containers.gallery),
			buttons: $(containers.thumbnails)
		}
		BUTTONS = {
			scrollLeft: new Element('div', {id: buttons.scrollLeft, 'class': (Browser.isIEBelow7)? 'on' : 'off'}),
			scrollRight: new Element('div', {id: buttons.scrollRight, 'class': 'on'})
		}
		GalleryItems.each(function() {
			var GALLERYITEM = this;
			GALLERYITEM.thumbnail
			.addListener('click', GALLERY.EventHandlers.thumbnail.onClick)
			.addListener('mouseover', GALLERY.EventHandlers.thumbnail.onMouseOver)
			.addListener('mouseout', GALLERY.EventHandlers.thumbnail.onMouseOut);
			CONTAINERS.fullImages.addChild(GALLERYITEM.fullImage);
			CONTAINERS.thumbnails.addChild(GALLERYITEM.thumbnail);
		});
		CONTAINERS.gallery
		.addListener('mouseover', GALLERY.EventHandlers.galleryContainer.onMouseOver)
		.addListener('mouseout', GALLERY.EventHandlers.galleryContainer.onMouseOut);
		GalleryItems[0].show();
		CONTAINERS.gallery.hideTimer = setTimeout(function() {
			GALLERY.EventHandlers.galleryContainer.onMouseOut.call(CONTAINERS.gallery);
		}, 5000);
		
		/** setup scroller **/
		if (GalleryItems.length > 4) {
			var oScroller = new ScrollingPane(CONTAINERS.thumbnails, CONTAINERS.gallery);
			oScroller.setToggleOptions({ stopPoint: 'auto 10px', duration: 150, acceleration: -1});
			
			if (Browser.isIEBelow7) {
				CONTAINERS.buttons = CONTAINERS.gallery;
			} else {
				CONTAINERS.buttons = new Element('div').setStyle({
					width: CONTAINERS.gallery.getWidth() + 'px',
					height: CONTAINERS.thumbnails.getHeight() + 'px',
					overflow: 'hidden', position: 'absolute', bottom: '0', opacity: '0.8'
				}).addChild(CONTAINERS.thumbnails);
				CONTAINERS.gallery.addChild(CONTAINERS.buttons);
			}
					
			CONTAINERS.buttons.addChild(BUTTONS.scrollLeft).addChild(BUTTONS.scrollRight);
			
			BUTTONS.scrollLeft.addListener('click', function() { 
				BUTTONS.scrollRight.className = 'on';
				if (oScroller.previous() === 0) BUTTONS.scrollLeft.className = 'off';
			});
			BUTTONS.scrollRight.addListener('click', function() { 
				BUTTONS.scrollLeft.className = 'on';
				if (oScroller.getLength() - oScroller.getCurrentIndex() >= 5) { 
					if (oScroller.getLength() - oScroller.next() < 5) {
						BUTTONS.scrollRight.className = 'off';
					}
				}
			});
		}
	}
}