var Popup = {
    init: function(append) {            
        // init overlay und popup 
        var overlay = Builder.node('div', { id: 'bgPopup', style: 'display: none'});          
        $(append).appendChild(overlay);
            
        var popup = Builder.node('div', { id: 'popup', style: 'display: none' });  
        $(append).appendChild(popup);
    },
    open: function() {                  
        // init viewport
        vpw = document.viewport.getWidth();
        vph = document.viewport.getHeight();
        // init measurements
        w = 350;
        h = 350;
        l = (vpw-w)/2;
        t = (vph-h)/2;
        // set measurements
        $('bgPopup').setStyle({
            width: vpw + 'px',
            height: vph + 'px'        
        });
        
        $('popup').setStyle({
            width: w + 'px',
            height: h + 'px',
            left: l + 'px',
            top: t + 'px'
        });
        
        // display
        $('bgPopup').show();
        Effect.Grow('popup');
    },
    openInContent: function() {
         // init viewport
         vpw = document.viewport.getWidth();
         // init measurements             
         pageHeight = $('page').getHeight();
         pageWidth = $('page').getWidth()+2;
         headerHeight = $('header').getHeight();
         teaserHeight = $('teaser').getHeight();  
         mainHeight = $('main').getHeight();  
         footerHeight = $('footer').getHeight();  
         
         l = (vpw-pageWidth)/2;         
         h = pageHeight - headerHeight;
         t = 120;
         
         $('bgPopup').setStyle({
            position: 'absolute',
            display: 'block',      
            width: pageWidth + 'px',
            height: h + 'px',  
            left: l + 'px',
            top: t + 'px',
            zIndex: 99
        });
        
        w = 350;
        h = 350;
        t = ((mainHeight+teaserHeight+footerHeight-h)/2)+t;
        l = (vpw-w)/2;   
        
        $('popup').setStyle({
            position: 'absolute',
            //display: 'block',      
            width: w + 'px',
            height: h + 'px',  
            left: l + 'px',
            top: t + 'px',
            zIndex: 100
        });
        
        Effect.Grow('popup');        
    },
    close: function() {
        Effect.Shrink('popup'); 
        Effect.Shrink('bgPopup');
        
        $('popup').remove();
        $('bgPopup').remove();
    }
}