if (typeof(AC) == 'undefined') { AC = {}; }



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

    initialize: function(overlay) {
        this.listenForEvent(AC.ViewMaster, 'ViewMasterWillShowNotification', false, this.willShow);
        this.listenForEvent(overlay, 'beforeClose', false, this.willClose);
    },

    screen: function(overlayPanel) {
        var body = $(document.documentElement);
        var dimensions = body.getDimensions();

        var width = dimensions.width;
        if (document.body.clientWidth>width) width = document.body.clientWidth;

        var height = dimensions.height;
        if (document.body.clientHeight>height) height = document.body.clientHeight;

        this._screen = new Element('div', { id:'OverlayPanelScreen', className:'overlaypanelscreen',
            style: 'position:absolute; display:none; top:0; left:0; width:'+width+'px; height:'+height+'px;'
        });
        document.body.appendChild(this._screen);

        this._screen.observe('click', overlayPanel.close.bindAsEventListener(overlayPanel));
    },

    escape: function(overlayPanel) {
        this._escape = Event.observe(window, 'keyup', function(evt) {
            if (evt.keyCode == Event.KEY_ESC) {
                if (overlayPanel.currentSection) {
                    overlayPanel.close();
                }
            }
        }.bind(overlayPanel));
    },

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

        if (overlayPanel.overlay) {
            if (!this._escape) this.escape(overlayPanel);

            if (incoming) {
                if (!this._screen) this.screen(overlayPanel);
                new Effect.Appear(this._screen, { duration:1, from:0, to:.85 });
            }
        }
    },

    willClose: function(evt, outgoing, incoming) {
        var overlayPanel = evt.event_data.data;

        if (overlayPanel.overlay) {
            new Effect.Fade(this._screen, { duration:.3,
                afterFinish: function(effect) {
                    effect.element.setOpacity(0);
                }
            });
        }
    }
});




Event.onDOMReady(function() {
    AC.OverlayPanel.overlayScreen = new AC.OverlayScreen(AC.OverlayPanel.overlay);
});




// 
// 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: 'http://images.apple.com/la/mobileme/features/images/overlay_shadow20080609.png',

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

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

});





Event.onDOMReady(function() {
	Object.extend(AC.OverlayPanel.overlay, {
		willShow: function(view, outgoing, incoming) {
			this.setOverlayShadowImageSrc('http://images.apple.com/la/mobileme/images/overlay_videobg20080609.png');
			return this.superWillShow(view, outgoing, incoming);
		}
	});
});