// JavaScript Document
var OverlayIframe = new Class({
    Implements: [Options, Events],
    options: {
        url: '',
        id: 'launcher',
        background: '#333333',
        opacity: 0.7,
        speed: 500,
        size: {
            width: 100,
            height: 100
        }
    },
    initialize: function (options) {
        this.setOptions(options);
        this.options.id.each(function (item) {
            $(item).addEvent('click', this.launch.bind(this))
        },
        this);
        this.fadeDiv = new Element('div', {
            'styles': {
                'display': 'block',
                'position': 'absolute',
                'top': 0,
                'left': 0,
                'width': this.getgreyoutsize().width,
                'height': this.getgreyoutsize().height,
                'background': this.options.background,
                'opacity': 0,
				'z-index':100
               
            }
        });
        this.iframeDiv = new Element('div', {
            'styles': {
                'display': 'block',
                'position': 'absolute',
                'width': this.options.size.width,
                'height': this.options.size.height,
                'opacity': 1,
                'top': this.getMidDivPosition().top,
                'left': this.getMidDivPosition().left,
				'z-index':100
            }
        });
        this.closeDiv = new Element('div', {
            'styles': {
                'width': '85px',
                'height': '70px',
                'display': 'block',
                'float': 'right',
                'background': '#0052C2',
                'position': 'absolute',
                'top': 0,
                'right': 0,
                'cursor': 'pointer',
				'z-index':101
            },
            events: {
                'click': this.remove.bind(this)
            }
        }).adopt(new Element('p', {
            html: 'close',
            styles: {
                'font-weight': 'bold',
                'color': '#ffffff',
                'margin': '20px 0 0 25px'
            }
        }));
        this.iframeDiv.adopt(new IFrame({
            src: this.options.url,
            name: 'overlayIframe',
            styles: {
                width: this.options.size.width,
                height: this.options.size.height,
                border: '0px none'
            }
        }));
        this.iframeDiv.adopt(this.closeDiv);

    },
    getMidDivPosition: function () {

        var t = ((window.getSize().y - this.options.size.height) / 2 < 0) ? 0 : (window.getSize().y - this.options.size.height) / 2;

        var l = ((window.getSize().x - this.options.size.width) / 2 < 0) ? 0 : (window.getSize().x - this.options.size.width) / 2;
        return {
            'left': l,
            'top': t
        }
    },
    getgreyoutsize: function () {

        var h = ($(document.body).getScrollSize().y > window.getSize().y) ? $(document.body).getScrollSize().y + 25 : window.getSize().y + 25;
        var w = ($(document.body).getScrollSize().x > window.getSize().x) ? $(document.body).getScrollSize().x : window.getSize().x;
        return {
            'width': w,
            'height': h
        }
    },

    launch: function () {
        $(document.body).adopt(this.fadeDiv);
        $(document.body).adopt(this.iframeDiv);
        this.resize_overlay();
        window.addEvent('resize', this.resize_overlay.bind(this));
        myEffect = new Fx.Morph(this.fadeDiv, {
            duration: this.options.speed,
            transition: Fx.Transitions.Sine.easeOut,
            onComplete: function () {
                this.fadeDiv.addEvent('click', this.remove.bind(this))
            }.bind(this)
        });
        myEffect.start({
            'opacity': [this.options.opacity]
        });
        return false;
    },


    remove: function () {
        this.iframeDiv.dispose();
        myEffect = new Fx.Morph(this.fadeDiv, {
            duration: this.options.speed,
            transition: Fx.Transitions.Sine.easeIn,
            onComplete: function () {
                this.fadeDiv.dispose();
            }.bind(this)
        });
        myEffect.start({
            'opacity': [0]
        });
        window.removeEvent('resize', this.resize_overlay.bind(this));
    },
    resize_overlay: function () {
        this.fadeDiv.setStyles({
            'width': this.getgreyoutsize().width,
            'height': this.getgreyoutsize().height
        });
        this.iframeDiv.setStyles({
            'top': this.getMidDivPosition().top,
            'left': this.getMidDivPosition().left
        });

    }
});