var iFrameBox = {
    options : {
        bodyScrollSize : 0,
        bodySize : 0,
        bodyScroll : 0,
        ifrmov : 0,
        ifrmCont : 0,
        ifrmview : 0,
        ifrmclck : 0
    },
    initialize : function(){
        var doc = $(document.body);
        iFrameBox.options.ifrmov = new Element('div', {
            'id'    : 'frmOverlay',
            'events': {
                'click': iFrameBox.endEm
            }
        });
        iFrameBox.options.ifrmCont = new Element('div', {
            'id'    : 'frmViewerContainer'
        });
        iFrameBox.options.ifrmview = new Element('iframe', {
            'id'    : 'frmViewer',
            'allowTransparency' : 'true',
            'frameborder' : '0'
        });
        iFrameBox.options.ifrmclck = new Element('img', {
            'id'    : 'frmClicker',
            'src'   : '/extension/toennissen/design/toennissen_design/images/iframe_layout/closebtn.png',
            'styles': {
                'width' : '57px',
                'height': '57px',
                'position' : 'absolute',
                'top' : '-15px',
                'right' : '-15px',
                'cursor' : 'pointer'
            },
            'events': {
                'click': iFrameBox.endEm
            }
        });
        $(iFrameBox.options.ifrmCont).adopt(iFrameBox.options.ifrmview,iFrameBox.options.ifrmclck);
        doc.adopt(iFrameBox.options.ifrmov,iFrameBox.options.ifrmCont);
    },
    getDimensions : function(){
        var doc = $(document.body);
        iFrameBox.options.bodyScrollSize = doc.getScrollSize();
        iFrameBox.options.bodySize = doc.getSize();
        iFrameBox.options.bodyScroll = doc.getScroll();
    },
    setPosition : function(){
        iFrameBox.getDimensions();
        $(iFrameBox.options.ifrmov).setStyles({
            'width'   : iFrameBox.options.bodyScrollSize.x,
            'height'  : iFrameBox.options.bodyScrollSize.y,
            'opacity' : 0,
            'display' : 'block'
        });
        $(iFrameBox.options.ifrmCont).setStyles({
            'width'   : "30px",
            'min-height'  : "0px",
            'height'  : "30px",
            'opacity' : 0,
            'overflow': 'hidden',
            'display' : 'block',
            'left'    : (iFrameBox.options.bodyScrollSize.x-680)/2+"px",
            'top'     : iFrameBox.options.bodyScroll.y+60+"px"
        });
    },
    startEm : function(src){
        var hrefsrc = src?src:false;
        if( !hrefsrc ){
            return true;
        }
        $(iFrameBox.options.ifrmview).src=src;
        iFrameBox.setPosition();
 
        var OverlayfadeIn = new Fx.Morph(iFrameBox.options.ifrmov,{
                duration: 700
                });
        var ContainerfadeIn = new Fx.Morph(iFrameBox.options.ifrmCont,{
                duration: 400
                });        
        OverlayfadeIn.start({ opacity : 0.7 }).chain(
            function(){ 
                        ContainerfadeIn.start({ opacity : 1 }).chain(
                        function(){ this.start({ width : iFrameBox.options.ifrmview.getSize().x } ) },
                        function(){ this.start({ height: iFrameBox.options.ifrmview.getSize().y }) },
                        function(){ this.start({ overflow: "visible" }) }                    
                        )
                      } 
        );
        return false;
    },
    endEm : function(){
        var OverlayfadeOut = new Fx.Morph(iFrameBox.options.ifrmov,{
                duration: 150
                });
        var ContainerfadeOut = new Fx.Morph(iFrameBox.options.ifrmCont,{
                duration: 500
                });        
        ContainerfadeOut.start({ overflow : "hidden" }).chain(
            function(){ this.start({ width: 30 }) },
            function(){ 
                        this.start({ height : 30 }).chain(
                        function(){ this.start({ opacity : 0 }) },
                        function(){ OverlayfadeOut.start({ opacity : 0 }) }
                        )
                      }
        );                
    },
    endEmReload : function(){
        var OverlayfadeOut = new Fx.Morph(iFrameBox.options.ifrmov,{
                duration: 150
                });
        var ContainerfadeOut = new Fx.Morph(iFrameBox.options.ifrmCont,{
                duration: 500
                });        
        ContainerfadeOut.start({ overflow : "hidden" }).chain(
            function(){ this.start({ width: 30 }) },
            function(){ 
                        this.start({ height : 30 }).chain(
                        function(){ this.start({ opacity : 0 }) },
                        function(){ OverlayfadeOut.start({ opacity : 0 });
                        window.location.href = window.location.href }
                        )
                      }
        );                
    }    
};
window.addEvent("domready", iFrameBox.initialize);