Ext.ns('S100');

S100.ProfilePane = function(paneId) {
    this.profilePane = Ext.get(paneId).hide();

    this.init();
    this.setupEvents();
};

S100.ProfilePane.prototype.init = function() {
    this.communityProfiles = S100.data.communityProfiles;

    // Save the original open graph values for this page
    this.openGraphOriginals = {
        'og:title': '',
        'og:url': '',
        'og:type': '',
        'og:image': '',
        'og:description': '',
    };
    Ext.iterate(this.openGraphOriginals, function(key, val) {
        this.openGraphOriginals[key] = Ext.select('meta[property=' + key +']').item(0).getAttribute('content');
    }, this);
    
    // The show class will use css transforms to show the photos at random interval speeds
    Ext.fly('profile-list').select('li .photo').addClass('show');
    
    // Show a permlink panel
    if (!Ext.isEmpty(location.hash)) {
        var slug = location.hash.substr(1);
        if (Ext.isString(slug) && !Ext.isEmpty(slug)) { this.show(slug); }
    }
};

S100.ProfilePane.prototype.setupEvents = function() {
    this.profilePane.on('click', this.onPanelClose, this, {delegate: 'img.close'});

    // Escape hides profile window
    Ext.get(document).on('keydown', function(evt, t) {
        switch(evt.getKey()){
            case 27:  this.hide();  break;
        }
    }, this);
    
    // Render profile pane from XTemplate
    Ext.fly('profile-list').select('a').on('click', this.onProfileClick, this);
};

S100.ProfilePane.prototype.onPanelClose = function(evt, t) {
    this.hide();
};

S100.ProfilePane.prototype.onProfileClick = function(evt, t) {
    var slug = Ext.fly(t).findParent('a').getAttribute('data-slug');
    this.show(slug);
};

S100.ProfilePane.prototype.hide = function() {
    this.profilePane.hide();
    this.profilePane.removeClass('show');
    location.hash = '';
    
    // Modify open graph meta tags
    this.setOpenGraphTags();
    // FB.XFBML.parse(Ext.getDom(this.profilePane));
};

S100.ProfilePane.prototype.show = function(slug) {
    if (Ext.isEmpty(slug)) { throw('You must pass in a slug.'); }
    
    var profile = this.getProfileData(slug);
    if (!Ext.isObject(profile)) { return false; }
    
    this.profilePane.show()
      .update(Ext.XTemplate.from('profile-tpl').apply(profile))
      .addClass('show');
      
    // Modify open graph meta tags
    this.setOpenGraphTags(profile);
    // this.profilePane.child('.like').createChild({ 'tag': 'fb:like', 'layout': 'button_count' });
    FB.XFBML.parse(Ext.getDom(this.profilePane));
};

S100.ProfilePane.prototype.setOpenGraphTags = function(data) {
    if (Ext.isObject(data)) {
        Ext.select('meta[property=og:title]').set({content: data.name + ' - Community 100'});
        Ext.select('meta[property=og:url]').set({content: location.href.split('#')[0] + '/' + data.slug});
        // Ext.select('meta[property=og:url]').set({content: location.href});
        Ext.select('meta[property=og:type]').set({content: 'article'});
        Ext.select('meta[property=og:image]').set({content: data.photo.url});
        Ext.select('meta[property=og:description]').set({content: data.name + ' was nominated for the Community 100 on the Seattle 100 website.'});
    } else {
        Ext.iterate(this.openGraphOriginals, function(key, val) {
            Ext.select('meta[property=' + key + ']').set({content: val});
        });
    }
};

S100.ProfilePane.prototype.getProfileData = function(slug) {
    var profile;
    Ext.each(this.communityProfiles, function(p) {
        if (slug == p.slug) {
            profile = p;
            return false;
        }
    });
    return profile;
};