var WidgetSimplePpt = new Class({

    options: {

        v: '1.0',

        margin:20

    },

    initialize: function(o,options ){

        this.setOptions( options );

        this.mask = new WidgetSimpleMask({left:0, bottom:0, bg:"#000", opacity:0.4});

        this.div = new WidgetSimpleCenterDiv({});

        //alert(this.div);

        //this.mask.hidden();

        //this.test1();

    },

    test:function(_src){

        this.mask.show();

        this.createStage(_src);

        

    },

    showMask:function(){

        this.mask.show();

    },

    createStage:function(url){

        this.showLoading()

        var self = this;

        new Ajax(url, {

            method: 'get',

            //evalResponse:true,

            evalScripts:true,

            onSuccess:function(req){

                //self.div.setSize({width:self.stage.width+self.options.margin, height:self.stage.height+self.options.margin});

                self.div.setSize({width:1000, height:540});

                //alert(window.getScrollTop()+'--'+window.getHeight());

                self.div.setPos({top:((window.getScrollTop()+window.getHeight()/2)).toInt(), left:(window.getWidth()/2).toInt()});

                self.div.show();

                self.div.content = req;

                self.hiddenLoading();

            }

        }).request();

    },

    hidden:function(){

       this.div.hidden();

       this.mask.hidden();

    },

    showLoading:function(){

       

    },

    hiddenLoading:function(){

    

    }

});

WidgetSimplePpt.implement( new Options );



var WidgetSimpleCenterDiv = new Class({

    options: {

        v: '1.0',

        opacity:0,

        classname:"simple_center_div",

        bottom:0,

        margin:10,

        left:0

    },

    initialize: function( options ){

        this.setOptions( options );

        this.createDiv();

        this.addTheListener();

    },

    addTheListener:function(){

        var self = this;

        window.addEvents({

            "resize":function(){

                self.rePos();

            }

        })

    },

    rePos:function(){

        var self = this;

        var pos = this.div.getCoordinates();

        var fs = this.div.effects({duration:500, wait:false, transition:Fx.Transitions.Sine.easeInOut});

        var top = ((window.getScrollTop()+window.getHeight())/2-self.size.height/2).toInt();

        if(top<=0){

            top = this.options.margin;

        }

        var left =(window.getWidth()/2- self.size.width/2).toInt();

        fs.start({

            //window.getScrollTop()+window.getHeight())/2).toInt(), left:(window.getWidth()/2).toInt()}

            top:[self.pos.top, top],

            left:[self.pos.left, left]

        }),

        this.setPos({top:((window.getScrollTop()+window.getHeight())/2).toInt(), left:(window.getWidth()/2).toInt()});

    },

    setPos:function(pos){

        //var top = ((window.getScrollTop()+window.getHeight())/2).toInt();

        //var left = (window.getWidth()/2).toInt()

        this.pos = pos;

    },

    setSize:function(size){

        this.size = size;

    },

    hidden:function(){

       var fs = this.div.effects({duration:500, wait:false, transition:Fx.Transitions.Sine.easeInOut});

       fs.start({'opacity': [1,0]});

    },

    setHTML:function(){

       this.div.setHTML(this.content)

    },

    show:function(){

        var self = this;

        var fs = self.div.effects({duration:500, wait:false, transition:Fx.Transitions.Sine.easeInOut});

        //alert((self.pos.top - self.size.height/2).toInt());

        var top = (self.pos.top - self.size.height/2).toInt();

        var left = (self.pos.left - self.size.width/2).toInt();

        if(top<=this.options.margin){

            top = this.options.margin;

        }

        fs.start({'opacity': [0,1],

            //top: //((window.getScrollTop()+window.getHeight())/2).toInt() +'px',

            //left://(window.getWidth()/2).toInt()+'px',

            top:[self.pos.top, top],

            left:[self.pos.left , left],

            width:[self.size.width],

            height: [self.size.height]

        }).chain(function(){

          self.setHTML()

        });

    },

    createDiv:function(){

        var self = this;

        //alert(self.options.margin);

        var top = ((window.getScrollTop()+window.getHeight())/2).toInt() +'px';

        var left = (window.getWidth()/2).toInt()+'px';

        this.div = new Element( 'div', {

            'class':self.options.classname,

            styles:{opacity:self.options.opacity,

                    display:"block",

                    'z-index': 2000,

                    position:"absolute",

                    top: top,

                    left: left,

                    height:10+"px",

                    width:10+'px'//(window.getWidth()/2 - self.options.left)

            }

        }).setHTML().inject(document.body);

        //this.top = new Element( 'div', {}).setHTML();

        //this.center = new Element( 'div', {}).setHTML(2);

        //this.bottom = new Element( 'div', {}).setHTML(3);

        //this.top.injectInside(this.div);

        //this.center.injectInside(this.div);

        //this.bottom.injectInside(this.div);

    }

    

});

WidgetSimpleCenterDiv.implement( new Options );





var WidgetSimpleMask = new Class({

    options: {

        v: '1.0',

        bg:"#808080",

        opacity:0.8,

        show:false

    },

    initialize: function(options ){

        this.setOptions( options );

        this.createMask();

        this.addTheListener();

    },

    addTheListener:function(){

        var self = this;

        window.addEvents({

            "resize":function(){

                self.resize();

            },

            "scroll":function(){

                self.resize();

            }

        })

    },

    resize:function(){

        var self = this;

        if(this.options.show){

            this.div.setStyles({

                height:(window.getScrollHeight().toInt() - this.options.bottom )+"px",

                width:(window.getWidth() - this.options.left)

                

            });

            //this.show()

        }

    },

    show:function(){

        var self = this;

        var fs = self.div.effects({duration: 700, wait:false, transition:Fx.Transitions.Sine.easeInOut});

        fs.start({'opacity': [0,self.options.opacity]})

        this.options.show = true;

        $$('select').each(function(item, i){

            item.setStyles({'display':'none'});

        });

        $$('iframe').each(function(item, i){

            item.setStyles({'display':'none'});

        });

    },

    hidden:function(){

        var self = this;

        var fs = self.div.effects({duration: 700, wait:false, transition:Fx.Transitions.Sine.easeInOut});

        fs.start({'opacity': [self.options.opacity,0]});

        this.options.show = false;

        $$('select').each(function(item, i){

            item.setStyles({'display':''});

        });

        $$('iframe').each(function(item, i){

            item.setStyles({'display':''});

        });

    },

    createStyle:function(){

        return {background:this.options.bg,

                opacity:0,

                display:"block",

                'z-index': 1000,

                top:'0px',

                left:'0px',

                position:"absolute",

                height:(window.getScrollHeight().toInt() - this.options.bottom )+"px",

                width:(window.getWidth() - this.options.left)

        }

    },

    createMask:function(){

        var self = this;

        this.div = new Element( 'div', {

            styles:self.createStyle()

        }).inject(document.body);

    }

});

WidgetSimpleMask.implement( new Options );