Ext.ns('S100');

S100.People = function() {};

// S100.People.prototype = {};

S100.People.prototype.drawKeywordsNav = function() {
    // Get elements
    this.keywords = Ext.fly('keywords').select('li');
    this.people = Ext.select('article.people ol li');
    
    // Events
    this.setupKeywordsHover();
    this.keywords.down('a').on('click', this.onKeywordClick, this);
    
    // Look for keyword in hash and hilight
    var locationHash = location.hash.split('#')[1];
    var keyword = (locationHash) ? locationHash.substr(3) : '';
    if (keyword) {
        this.hilightKeywordAndPeople(
            Ext.select('nav#keywords li a[data-keyword=' + keyword +']')
            .item(0));
    }
    
    // If we can we transform, then draw people list
    // Ext.isWebKit
    // if (true || Modernizr.csstransitions) {
    //     this.setupKeywordsAnimation();
    // }
};

S100.People.prototype.onKeywordClick = function(evt, wordEl) {
    // Hilight keyword and people
    this.hilightKeywordAndPeople(wordEl);
};

S100.People.prototype.hilightKeywordAndPeople = function(word) {
    if (!word) { return; }
    
    Ext.fly(word).findParent('li', 15, true).radioClass('active');
    // Hilight people
    var keywordName = word.getAttribute('data-keyword');
    this.people.each(function(item) {
        if (item.hasClass('active')) item.removeClass('active');
        if (item.hasClass(keywordName)) item.addClass('active');
    });
};

S100.People.prototype.setupKeywordsAnimation = function() {
    var cnt = 1,
        step = 20;
    this.keywords.each(function(keywordEl) {
        // set keyframe animation and step the delays for waterfall effect
        // keywordEl.addClass('draw-in');
        keywordEl.setStyle({
          // opacity: 0,
          // webkitTransitionDelay: step*cnt+"ms"
          // webkitAnimationDelay: step*cnt+"ms"
        });

        // FIXME for some reason this event appears to fire at the end of all the transitions
        // Time when to draw the people columns
        // if (cnt == keywords.getCount()-6) {
        //   keywordEl.on('webkitAnimationEnd', function(evt, el) { 
        //     S100.drawPeople(); 
        //   }, this, {single: true});
        // }

      cnt++;
    });
};

S100.People.prototype.drawPeople = function() {
  // Transform the people columns
  var cnt = 1,
      step = 5;
  Ext.select('article.people ol').each(function(el) {
    var thisStep = step*cnt+"ms";
    el.setStyle({
      webkitTransitionDelay: thisStep
    });
    el.addClass('drawn');
    el.select('li').each(function(el) {
      el.setStyle({
        // color: '#ccd1d5',
        webkitTransitionDelay: thisStep
      });
      el.addClass('drawn');
      cnt++;
    });
    
    cnt++;
  });
};

S100.People.prototype.setupKeywordsHover = function() {
    var setActivePeople = function(evt, word) {
        var keywordName = word.getAttribute('data-keyword');
        this.people.each(function(item) {
            if (item.hasClass(keywordName)) {
                'mouseover' == evt.type 
                    ? item.addClass('active-preview')
                    : item.removeClass('active-preview');
            }
        });
    };
    this.keywords.hover(setActivePeople, setActivePeople, this);
    
    var setActiveKeywords = function(evt, person) {
        var keywords = Ext.fly(person).findParent('li').className.split(/\s/);
        this.keywords.each(function(item) {
            if (keywords.indexOf(item.down('a').getAttribute('data-keyword')) > -1) {
                'mouseover' == evt.type 
                    ? item.addClass('active-preview') 
                    : item.removeClass('active-preview');
            }
        });
    };
    this.people.hover(setActiveKeywords, setActiveKeywords, this);
};



S100.PersonToolTip = function(el) {
    var me = this,
        yPos = 0,
        tooltip = Ext.get(el),
        hidden = true,
        hiding = false,
        hideTask = new Ext.util.DelayedTask(null, this),
        showTask = new Ext.util.DelayedTask(null, this);
    
    Ext.get(document).on('mousemove', function(evt) {
        var pos = evt.getXY();
        tooltip.moveTo(pos[0] - 110, pos[1] - 190, true);
    });
    
    me.draw = function() {
        tooltip.setStyle({
            zIndex: 25,
            position: 'absolute',
            top: 0,
            width: '145px',
            height: '170px',
            background: 'url(/images/headshots_sprite.jpg) no-repeat'
        });
        // me.show();
    };
    
    me.hide = function(force, time) {
        tooltip.hide(true);
    };
    
    me.show = function() {
        showTask.delay(450, function() {
            tooltip.setStyle('background-position', '0 -' + this.yPos +'px');
            tooltip.show(true);
        });
    };
    
    me.setLocation = function(idx, pos) {
        this.yPos = idx*170;
    };
};