// 
// Overlay Image Gallery with parentSectionId and event listeners
// 
// this is to make HTML developer's lives a bit easier, we don't want to have
// to create the rigorous HTML structure for each gallery, so we are doing
// it once for all galleries.
// 
// 
// Note:
// 
// optional title attributes to the image links will create captions
// 


OverlayImageGallery = Class.create();
Object.extend(OverlayImageGallery.prototype, Event.Listener);
Object.extend(OverlayImageGallery.prototype, {

	galleryOverlayShadowImageSrc: false,

	initialize: function(triggerClassNames, options) {
		this.listenForEvent(AC.ViewMaster, 'ViewMasterWillShowNotification', false, this.willShow);

		this.options = options || {};
		if (this.options.overlayShadowImageSrc) {
			this.galleryOverlayShadowImageSrc = this.options.overlayShadowImageSrc;
		}

		$A(triggerClassNames).each(this.createGallery.bind(this));
	},

	setOverlayShadowSrc: function(overlayPanel, incoming) {
		if (overlayPanel.overlay) {
			overlayPanel.setOverlayShadowImageSrc(this.options.overlayShadowImageSrc);
		}
	},

	createGallery: function(triggerClassName, index) {
		var parentSectionId = triggerClassName+'Gallery';
		var swapViewId = triggerClassName+'SwapView';

		var gallery = new Element('div', { id:parentSectionId, className:'overlaygallery', style:'display:none;' });
		document.body.appendChild(gallery);

		var swap = new Element('div', { id:swapViewId, className:'overlaygalleryswap' });
		gallery.appendChild(swap);

		var galleryThumbs = new Element('div', { className:'overlaygallerythumbs' });
		gallery.appendChild(galleryThumbs);

		var triggers = $$('.'+triggerClassName).sortBy(function(t) {
			if (gallerypos = t.className.match(/ gallerypos-(\d+)/)) {
				return gallerypos[1];
			}
		});
		triggers.each(this.createSection.bind(this, gallery, galleryThumbs));

		$$('.'+triggerClassName+'-trigger').each(function(trigger) {
			trigger.removeClassName(triggerClassName+'-trigger');
			trigger.addClassName(triggerClassName);
		});

		new AC.ViewMaster.Viewer(null, swapViewId, triggerClassName, { parentSectionId:parentSectionId, parentTriggerClassName:'OverlayPanel', silentTriggers:true });
	},

	createSection: function(gallery, galleryThumbs, trigger, index) {
		var id = trigger.href.replace(/.*#/, '') || trigger.name;

		var content = new Element('div', { id:id, className:'overlaygallerycontent' });
		gallery.appendChild(content);

		if (trigger.title) {
			var caption = new Element('p');
			caption.innerHTML = trigger.title;
			content.appendChild(caption);
		}

		content.image = trigger.href.replace(/#.*/, '');

		var image = new Element('img');
		content.appendChild(image);

		trigger.href = trigger.href.replace(/.*#/, '#');

		var thumb = trigger.cloneNode(true);
		if (this.options.thumbnailSrc) {
			thumb.down('img').src = this.options.thumbnailSrc(thumb.down('img').src);
		}
		galleryThumbs.appendChild(thumb);
	},

	willShow: function(evt) {
		var swapView = evt.event_data.data.sender;
		var incoming = evt.event_data.data.incomingView;

		if (incoming) {
			if (incoming.content.image) {
				var image = incoming.content.down('img');
				if (image && !image.src) {
					image.src = incoming.content.image;
				}
			}

			if (this.galleryOverlayShadowImageSrc && incoming.id.match('Gallery')) {
				this.setOverlayShadowSrc(swapView, incoming);
			}
		}
	}

});