// 
// 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);
        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);
            }
        }
    }

});