/*
---

requires:
    - Core/Class
    - Core/Element

provides: ModalView

---
*/

/**
 * Modal:
 * Encapsulates a modal window object
 */
var Modal = new Class({

    /**
     * Constructor:
     * @param content - The DOM Element for the modal window
     */
    initialize: function(content, className) {
        // Start by creating the overlay
        var container = this.container = new Element('div', {
            'class': 'modal-container ' + (className || '')
        });
        
        this.overlay = new Element('div', {
            'class': 'overlay',
            'styles': {
                height: document.body.scrollHeight
            },
            'events': {
                click: function(anEvent){
                    if (anEvent.target === this.overlay) {
                        anEvent.preventDefault();
                        this.close(anEvent);
                    }
                }.bind(this)
            }
        });
        
        $(document).addEvent('keydown', this.escHandler.bind(this))

        if (content)
            this.contentElement = content;

        this.closeButton = new Element('a', {
            'html': '×',
            'class': 'close-button',
            'events': {
                click: function(event){
                    event.preventDefault();
                    this.close();
                }.bind(this)
            }
        });

        container.adopt(this.closeButton, this.contentElement);

        // Finally, append the new DOM elements to the DOM.
        this.overlay.adopt(container);
        $(document.body).adopt(this.overlay);
    },

    setContentElement: function(element){
        // Remove the current content element first, if it exists.
        if (this.contentElement)
            this.contentElement.dispose();

        this.contentElement = element;
        element.addClass('content');

        this.container.adopt(this.contentElement, this.closeButton);
    },
    
    escHandler: function(event){
        if (event.key === 'esc')
            this.close(event);
    },

    close: function(event) {
        $(document).removeEvent('keydown', this.escHandler.bind(this))
        $(this.overlay).dispose();
        $(this.container).dispose();
        
        if (this.delegate && this.delegate.cleanUp)
            this.delegate.cleanUp();
    }
});

(function(){

$('modal-demo-video').addEvent('click', function(){
    new Modal(new Element('div', {
        html: document.getElementById('video-embed-code').innerHTML
    }), 'dark');
});

//Show popover after a couple seconds over the store button
setTimeout(function(){
	document.getElement('.header .nav ul li#nav-store a').addClass('show-popover');
},3500)

})();