// ブラウザのサイズを取得せずにgrayoutするライブラリ

var Overlay = Class.create();
Object.extend(Overlay.prototype,{
        initialize: function(id){
                this.elem = $(id);
                this.body_overflow = Element.getStyle(document.body,'overflow');
                Element.setStyle(this.elem,{
                        'background-color': 'black',
                        'z-index': -3,
                        'display':'none',
                        'position': 'absolute',
                        'top': '0px',
                        'left': '0px'
                })
                Event.observe(this.elem,'click',this.off.bindAsEventListener(this),false);
//                 this.content = document.createElement('div');
//                 document.body.appendChild(this.content);
        },
        on: function(){
                // この時点でwidth や height を100%にしないとスクロールバーが出たりする
                //Element.setStyle(document.body,{'overflow': 'hidden'}); Firefox では正常に設定できない
                document.body.style.overflow = 'hidden';
                Element.setStyle(this.elem,{
                        'z-index': 3,
                        'width': '200%',
                        'height': '2000px'
                })
                Effect.Appear(this.elem,{duration:.3,from:0,to:.8,afterFinish: function(){
                        Element.setStyle(this.content,{'z-index': 4});
                        Effect.Appear(this.content,{duration:.3});
                }.bind(this) });
        },
        off: function(){
                var body_overflow = this.body_overflow;
                Effect.Fade(this.elem,{duration:.3,afterFinish:function(){
                        Effect.Fade(this.content,{duration:.3,afterFinish:function(){
                                Element.setStyle(document.body,{overflow: body_overflow});
                        }})
                }.bind(this)});
        },
        set_content: function(param){
                if(param.innerHTML){
                        this.content.innerHTML = param.innerHTML;
                }
                if(param.content_elem){
                        this.content = param.content_elem;
                }
                if(param.scrollbar && param.scrollbar == 'no'){
                        Element.setStyle(this.content,{overflow: 'hidden'});
                }else{
                        Element.setStyle(this.content,{overflow: 'auto'});
                }
                var content_width = (param.width) ? param.width + 2 : 202;
                var content_height = (param.height) ? param.height + 2 : 202;
                Element.setStyle(this.content,Object.extend({
                        'display':'none',
                        'position': 'absolute',
                        'z-index': -4,
                        'left': '50%',
                        //'top': '50%',
                        'top': '0px',
                        'width': '0px',
                        'height': '0px',
                        'width': content_width+'px',
                        'height': content_height+'px',
                        'margin-left': -content_width/2+'px',
                        //'margin-top': -content_height/2+'px',
                        'margin-top': '60px',
                        'background-color': 'transparent',
                        'color': '#777',
                        'padding': '0px',
                        'text-align': 'justify',
                        'line-height': '15px',
                        'font-size': '13px'
                },(param.style || {})));
        },
        clear_content: function(){
                this.content.innerHTML = '';
        }
});