var Grayout = Class.create({
    initialize: function(id,param){
        this.element = $(id);
        this.param = param || {};
        this.duration = this.param.duration || {};
        if(window.attachEvent){
            window.attachEvent('onresize',this.onresize.bind(this));
            window.attachEvent('onscroll',this.onscroll.bind(this));
        }else if(window.addEventListener){
            window.addEventListener('resize',this.onresize.bind(this),false);
            window.addEventListener('scroll',this.onscroll.bind(this),false);
        }else{
            (function(){
                var onresize = window.onresize;
                window.onresize = function(){this.onresize.bind(this),onresize};
                var onscroll = window.onscroll;
                window.onscroll = function(){this.onscroll.bind(this),onscroll};
            })();
        }
    },
    style_on: function(){
        var w = this.get_window_size();
        return {
            'position': (Prototype.Browser.IE) ? 'absolute' : 'fixed',
            'top': '0px',
            'left': '0px',
            'width': w.width+ 'px',
            'height': w.height+'px',
            'backgroundColor': '#ADD6D6',//'#222',
            'zIndex': 100
        };
    },
    style_off: function(){
        return {
            'position': (Prototype.Browser.IE) ? 'absolute' : 'fixed',
            'top': '0px',
            'left': '0px',
            'width': '0px',
            'height': '0px',
            'backgroundColor': 'transparent'
        };
    },
    phaseIn: function(){
        this.element.setStyle(this.style_on());
        this.element.phaseIn({
            duration: this.duration.phaseIn || 1,
            afterFinish: function(){
                this.notify('phaseIn');
            }.bind(this),
            max_opacity: 0.7
        });
    },
    phaseOut: function(){
        this.element.phaseOut({
            duration: this.duration.phaseOut || 1,
            afterFinish: function(){
                this.element.setStyle(this.style_off());
                this.notify('phaseOut');
            }.bind(this)
        });
    },
    onresize: function(){
        var w = this.get_window_size();
        this.element.style.width = w.width+ 'px';
        this.element.style.height = w.height+'px';
    },
    onscroll: function(){
        if(Prototype.Browser.IE){
            var s = this.get_scroll();
            var elem_height = parseInt(this.element.style.height);
            if(s.top - elem_height <= elem_height ){
                this.element.style.top = s.top+'px';
            }
        }
    }
})

Grayout.addMethods(ObservableInterface);
Grayout.addMethods(WindowPropertyInterface);