// setup overlay 
$("div.overlay").overlay({  
         
    // 1. start expose effect when overlaying begins  
    onBeforeLoad: function() { 
        this.getBackgroundImage().expose({color: '#123448'}); 
    }, 
     
    // 2. when overlay is loaded we reposition  and resize the player on top of it 
    onLoad: function() { 
         
        // get handle to the embed element 
        var embed = $("#player :first");  
             
        /* and reposition / resize it. you propably have to tweak 
            these when placing this thing on your site */         
             
        var img = this.getBackgroundImage(); 
        var height = img.css("height"); 
        if (height == 'auto') height = 600;      
         
        embed.css({ 
            // size 
            width:parseInt(img.css("width")) -80, 
            height:parseInt(height) -80, 
             
            // position 
            left:  -240 , 
            top: -35 
        }); 
 
        // when overlay grows we were in paused state 
        $f().resume();             
    }, 
     
    // when overlay closes   
    onClose: function() { 
 
        // 1. put our player to the original size/position             
        $("#player :first").css({top: null, left: null, width: null, height: null}); 
 
        // 2. enable fullscreen button again             
        $f().getControls().enable({fullscreen:true}); 
         
        // 3. unexpose (remove the darkened browser canvas) 
        $.expose.close(); 
        document.getElementById("logo").style.display = 'block';
    },   
     
    // optional: make overlay animation start where the player is.  
    start: { 
        top: 0, 
        left: 0, 
        width: 350, 
        absolute: true 
    } ,
   
    finish: { 
        top: -75, 
        left: -280, 
        width: 350, 
        absolute: true 
    } 
    
     
});