var Popup = new Class({
    Implements: [Options, Events],
    initialize: function( id, options )
    {
        this.setOptions( options );

        this.loadingImagePath = '/images/loading.gif';
        this.loadingImageSize = { width: 208 , height: 13 };

        //this.loadingImage = new Asset.image( this.loadingImagePath );
        //this.loadingImage.setStyles( { 'height': this.loadingImageSize.height, 'width': this.loadingImageSize.width } );

        this.maskStyles = new Asset.css( "/css/mask.css" );
        this.popupStyles = new Asset.css( "/css/popup.css" );

        this.mask = new Mask( document.body, { 'maskMargins': false } );

        this.id = id?id:'popup';
        if ( $type(this.id) == 'string' )
        {
            if ( $(this.id) )
                this.popup = $(this.id);
        }
        else
        {
            this.popup = this.id;
            this.id = this.popup.get('id');
        }
        if ( !this.popup )
        {
            this.popup = new Element( 'div', { 'id': this.id, 'class': 'popup', 'styles': { 'display': 'none' } } );
            if ( this.options.title || this.options.buttons )
            {
                var popupHeader = new Element( 'div', { 'class': 'popupHeader' } );
                if ( this.options.title )
                {
                    var popupTitle = new Element( 'div', { 'class': 'popupTitle', 'text': this.options.title } );
                    popupHeader.grab( popupTitle );
                }
                if ( this.options.buttons )
                {
                    var popupToolbar = new Element( 'div', { 'class': 'popupToolbar' } );
                    this.options.buttons.each(
                        function( button )
                        {
                            var popupButton = new Element( 'button', { 'text': button.text } );
                            if ( button.id )
                                popupButton.setProperty( 'id', button.id );
                            if ( button.events )
                                popupButton.set( 'events', events );
                            popupToolbar.grab( popupButton );
                        }
                    );
                    popupHeader.grab( popupTitle );
                }
                this.popup.grab( popupHeader );
                var popupBody = new Element( 'div', { 'class': 'popupBody' } );
                var popupContent = new Element( 'div', { 'class': 'popupContent' } );
                popupContent.grab( this.options.content );
                popupBody.grab( popupContent );
                this.popup.grab( popupBody );
            }
            this.target = document.id(this.options.target) || document.id(document.body);
            this.popup.inject( this.target );
        }
    },
    show: function()
    {
        this.mask.show();
        $(window).addEvent( 'resize', this.update.bind(this) );
        $(window).addEvent( 'scroll', this.update.bind(this) );
        this.popup.tween( 'opacity', [0, 1.0] );
        this.popup.show();
        this.popup.position();
        this.mask.position();
    },
    hideComplete: function()
    {
        $(window).removeEvent( 'resize', this.update.bind(this) );
        $(window).removeEvent( 'scroll', this.update.bind(this) );
        this.popup.hide();
        this.mask.hide();
    },
    hide: function()
    {
        new Fx.Tween( this.popup, { duration: 400, transition: Fx.Transitions.Sine, onComplete: this.hideComplete.bind(this) } ).start( 'opacity', 1.0, 0 );
    },
    update: function()
    {
        this.popup.position();
        this.mask.position();
    },
    showAnimation:function()
    {
        showOverlay();
        
        //console.log( "Showing overlay loading" );
        if ( !this.loading )
        {
            this.loading = new Element( 'div', { 'id': 'loading'+this.key, 'styles': { 'display':'none' } } );
            this.loading.grab( this.loadingImage );
            document.body.grab( this.loading );
        }
        updateOverlayLoading();
        this.loading.setStyle( 'display', 'block' );
        $(window).addEvent( 'resize', this.update.bind(this) );
        $(window).addEvent( 'scroll', this.update.bind(this) );
    },
    hideAnimation:function()
    {
        $(window).removeEvent( 'resize', this.update.bind(this) );
        $(window).removeEvent( 'scroll', this.update.bind(this) );
        if ( this.loading )
            this.loading.setStyle( 'display', 'none' );
    }
});

function setupPopups()
{
    try {
    $$('.popup').each(
        function( element )
        {
            element.popup = new Popup( element.get('id') );
            element.getElements('.popupCloser').each(
                function( closer )
                {
                    closer.addEvent( 'click', function() { element.popup.hide(); } )   
                }
            );
            element.popupShow = function() { element.popup.show(); };
            element.popupHide = function() { element.popup.hide(); };
        }
    );
    }
    catch ( e )
    {
        alert( e );
    }
}

window.addEvent( 'domready', setupPopups );