// 

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



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

            }

        }

    }



});