Ext.onReady( function(){
    
    var tn = Ext.DomQuery.selectNode('.try-now');
    if( tn ){
        Ext.fly(tn).on('click', function(e){
            e.stopEvent();
            Card.create();
        });
    }
    
    // create the "Create Card..." Button
    var create = Ext.get('create-card');
    var text = create.dom.innerHTML;
    text = text.replace(/<[^>]+>/,'');
    create.update('');
    
    var createBtn = new Ext.Button({
        renderTo: create,
        text: text,
        scale: 'medium',
        handler: create.onclick,
        iconCls: 'add22 bigBtn'
    });
    /*
    var shareBtn = new Ext.Button({
        renderTo: 'share-card',
        text: 
            '<a href="http://www.addthis.com/bookmark.php?v=250&amp;username=owlwatch" class="addthis_button_compact">Share</a>'
        ,
        scale: 'medium',
        handler: create.onclick,
        iconCls: 'add22 bigBtn'
    });
    */
    var user = Ext.get('user');
    var signout = Ext.get('signout');
    
    if( user ){
        // create the user panel
        FB_RequireFeatures(["Api","Connect"], function(){
            (function(){
                FB.Connect.ifUserConnected(
                    function(loggedIn){
                        
                        FB.Facebook.apiClient.users_getInfo(FB.Connect.get_loggedInUser(), ['username', 'name', 'uid', 'pic'], function(users){
                            Card.setCurrentUserData(users[0]);
                        });
                        
                        if( Card.inst && parseInt(Card.inst.state.uid) == parseInt(loggedIn) ){
                            var editBtn = new Ext.Button({
                                renderTo: 'edit',
                                text: 'Edit Card',
                                scale: 'medium',
                                iconCls: 'bigBtn edit-card22',
                                handler: function(){
                                    Card.open(Card.inst.state);
                                }
                            });
                        }
                        
                        user.update('<div class="loading-cards"><img src="./image/ajax-loader.gif" alt="Loading Cards..." /></div>');
                        
                        // get old cards...
                        Ext.Ajax.request({
                            url             :'./card.php',
                            params          :{
                                'action'        :'list',
                                'uid'           :loggedIn
                            },
                            success         :function(response){
                                var result = (function(){
                                    try{ return Ext.decode(response.responseText); }
                                    catch(e){ return {}; }
                                })();
                                if( result && result.success && result.list && result.list.length > 0 ){
                                    user.update('');
                                    
                                    Ext.each( result.list, function(item){
                                        item.data = Ext.decode(item.data);
                                        var data = item.data;
                                        item.text = item.data.name;
                                        item.iconCls = 'edit-card';
                                        item.handler = function(){
                                            Card.open(data);
                                        };
                                        item.menu = [{
                                            text            :'View',
                                            iconCls         :'view-card',
                                            handler         :function(){
                                                window.open(Card.getUrl(data));
                                            }
                                        },{
                                            text            :'Edit',
                                            iconCls         :'edit-card',
                                            handler         :function(){
                                                Card.open(data);
                                            }
                                        }];
                                    });
                                    
                                    var btn = new Ext.Button({
                                        renderTo: user,
                                        text: 'Your Cards',
                                        scale: 'medium',
                                        iconCls: 'cards22 bigBtn',
                                        menu: result.list
                                    });
                                    
                                    var signoutBtn = new Ext.Button({
                                        renderTo: 'signout',
                                        text: 'Sign Out',
                                        scale: 'medium',
                                        iconCls: 'logout22 bigBtn',
                                        handler: function(){
                                            FB.Connect.logout();
                                        }
                                    });
                                    
                                    Card.MessageBus.on('save', function(state){
                                        // add the button
                                        var item = btn.menu.findBy(function(item){
                                            if(item.data && item.data.card_id == state.card_id ){
                                                return true;
                                            }
                                            return false;
                                        });
                                        if( !item || item.length == 0 ){
                                            btn.menu.add({
                                                text            :state.name,
                                                data            :state,
                                                iconCls         :'edit-card',
                                                handler         :function(){Card.open(state);},
                                                menu            :[{
                                                    text            :'View',
                                                    iconCls         :'view-card',
                                                    handler         :function(){window.open(Card.getUrl(state),'Facebook Card');}
                                                },{
                                                    text            :'Edit',
                                                    iconCls         :'edit-card',
                                                    handler         :function(){Card.open(state);}
                                                }]
                                            });
                                        }
                                    });
                                    window.yourCards = btn;
                                    
                                    Card.MessageBus.on('delete', function(id){
                                        // find the button
                                        var item = btn.menu.findBy(function(item){
                                            if(item.data && item.data.card_id == id ){
                                                return true;
                                            }
                                            return false;
                                        });
                                        if(item){ btn.menu.remove(item[0]); }
                                    });
                                    
                                    // createBtn.setText("Create a New Card");
                                    FB.XFBML.Host.parseDomTree(user.dom);
                                }
                                else{
                                    user.update('');
                                }
                            }
                        })
                    
                    },
                    function notLoggedIn(){
                        Ext.get('edit').update('');
                        user.update('');
                        signout.update('');
                        user.createChild({
                            tag             :'div',
                            children        :[{
                                tag			    :'fb:login-button'
                            }]
                        });
                        FB.XFBML.Host.parseDomTree(user.dom);
                    }
                );
            }).defer(200);
        });
    }
});