//
// 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));
        this.createTracker();
    },

    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.imageSrc = trigger.href.replace(/#.*/, '');

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

    createTracker: function() {
        var trackerDelegate = {
            trackingNameForSection: function(tracker, name, section) {
                tracker.count++;
                if (name.match('thumb')) {
                    return false;
                }
                if (tracker.count > 1) {
                    return name;
                } else {
                    return false;
                }
            }
        };

        var tracker = new AC.ViewMaster.Tracker('click');
        tracker.setDelegate(trackerDelegate);
    },

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

        if (incoming) {
            if (incoming.content.imageSrc && !incoming.content.image) {
                incoming.content.image = new Element('img', { src:incoming.content.imageSrc });
                incoming.content.appendChild(incoming.content.image);
            }

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

});