drawer-slide.js

YUI.add('pjp-bottom-overlay', function(Y) {
//////////BEGIN
var bottomOverlay = false,
    xPosition = 150,
    yShowPosition = 200, 
    yHidePosition = 700,
    animOver = new Y.Anim({duration: 1});

var oConfig = {
    "width": "1000px",
    "height": "500px",
    'srcNode': "#remote-overlay",
    'visible': false,
    // "constrain": true,
    //Set inital position. Since app is NOT fluid, easy enough to center.
    'xy': [xPosition,yHidePosition]
};

Y.on("domready", function() { 
    
    var closeDrawer = false;

    // @todo move to lazy init
    bottomOverlay = new Y.Overlay(oConfig);
    bottomOverlay.get('contentBox').removeClass('util-hide');
    bottomOverlay.render().show();
    
    animOver.set('node', bottomOverlay.get('boundingBox'));

    bottomOverlay.get('contentBox').delegate('click', function(e) {
        e.halt();
        
        //For now, this will do
        // but the whole thing can use some refactoring
        if(bottomOverlay.get('boundingBox').getY() != yShowPosition) {
            animOver.set('to', {xy: [xPosition, yShowPosition]});
            animOver.once('end', function(e) {
                bottomOverlay.plug(Y.Plugin.OverlayModal);                
                if(closeDrawer) { closeDrawer.show();}
            });
            animOver.run();
        } 

        //Init the close drawer code
        //Can be an img/sprite, apply class to make it show up/down.
        if(false == closeDrawer) {
            closeDrawer = Y.one('#close-drawer');
            closeDrawer.on('click', function(e) {
                e.halt();
                bottomOverlay.unplug(Y.Plugin.OverlayModal);                
                animOver.set('to', {xy: [xPosition, yHidePosition]});
                animOver.run();  
                closeDrawer.hide();
            });
        }
        
        var link = e.currentTarget, 
            hash = link.get('href').split('#').pop();

        //Get the html with IO
        Y.io( 'http://example.com/content-stub/stub.php?action='+hash,{
            on: {
                "success": function(tid, response) {
                    bottomOverlay.set('bodyContent', Y.JSON.parse(response.responseText));
                    // console.log(response);
                }, 
                "failure": function(tid, response) {
                    console.log('fail');
                    console.log(response);
                }
            }
        }
        
        );


    }, 'div.yui3-widget-hd a');
    
    // bottomOverlay.show();
});
    
////////END    
}, '0.0.1', { 
    "requires": ['base', 'node', 'anim', 'transition', 'overlay', 'io', 'json', 
                'gallery-overlay-extras',
                'widget-anim'
                 ]  
});