(function($) {
  var Hero = function() {};
  
  Hero.prototype = {
    type: null,
    url: null,
    xml: null,
    heroes: null,
    popups: null,
    
    carousel: function() {
      if(this.url && this.type) {
        var scope = this;
        $.get(this.url, function(data) {
          scope.xml = data;
          scope.heroes = $(data);
          
          var items = scope.heroes.find('hero').get();
          var len = items.length;
          var list = [];
          var i = 0;
          while(list.length < 24) {
            var item = items[Math.floor(Math.random()*len)];
            if(item && list.indexOf(item) == -1) {
              list.push(item);
            }
          }
          
          $(list).each(scope._renderHero);
          scope._initialize();
        });
      }
    },
    
    filter: function(key, value) {
      var scope = this;
      
      $('div.hero-box ul.hero-list li').remove();
      $('#popup-gallery div.slider ul.heroes li').remove();
      
      var items = this.heroes.find('hero');
      items.each(function(idx, val) {
        if ($(val).find(key).text() == value) {
          scope._renderHero(idx, val)
        }
      });
        
      this._initialize();
      
      // This is where the carousel isn't working correctly.
      // It does not resize
    },
    
    _initialize: function() {
      window.initPopups();
      
      this.popups = $('.popup-gallery').scrollGallery( {sliderHolder: '.slider', duration:650 });
      var carousel = this.popups[0]; 

    	$('a.open-popup').click(function() {
    	  var idx = Number($(this).attr('data-index'));
    	  
    	  if (idx != carousel.slideIndex()) {
          carousel.setSlide(idx);
    	  }
    	});
    	
    	$('#popup-gallery div.slider li.vcard').swipe({
        threshold: {x: 30, y: 30 },
        swipeLeft: function() {
          carousel.nextSlide();
        },
        swipeRight: function() { 
          carousel.prevSlide();      
        }
      });
      
      $('div.select-box ul li').click(function() {
        // not working as expected
        // console.log('click')
      });
    },
     
    _renderHero: function(idx, val) {
      var s = window.Hero;
      
      var h = $(val);
      var monomyth = {
        image_path:     h.find('image_path').text(),
        thumbnail_path: h.find('thumbnail_path').text(),
        name:          [h.find('first_name').text(), h.find('last_name').text()].join(' '),
        screen_name:    h.find('screen_name').text(),
        city:           h.find('city').text(),
        state:          h.find('state').text(),
        country:        h.find('country').text(),
        office:         h.find('office').text(),
        quotes:         h.find('quotes').text(),
        title:          h.find('title').text(),
        industry:       h.find('industry').text(), 
        quotes:         h.find('quotes').text(),
        community_since:h.find('community_since').text(),
        member_since:   h.find('member_since').text()
      }
      
      // images
      $('div.hero-box ul.hero-list').append( s._openerImage(monomyth, idx) )
      
      // carousel
      var ch = s._openerCarousel(monomyth);
      $('#popup-gallery div.slider ul.heroes').append( ch );
    },
    
    _openerImage: function(o, index) {
      // var a = $('<a>').addClass('open-popup').attr('href', '#popup-gallery').attr('data-index', index).attr('data-office', o.office);
      var a = $('<a>').addClass('open-popup').attr('data-index', index).attr('data-office', o.office);
      var thmb = $('<img>').addClass('photo').attr('src', o.thumbnail_path).attr('alt', name).attr('title', o.name).width(88).height(118)
      a.prepend(thmb);
      return $('<li>').prepend(a);
    },
    
    _openerCarousel: function(o) {
      var li = $('<li>').addClass('vcard');
      var img = $('<img>').addClass('image photo').attr('src', o.image_path).attr('alt', o.name).attr('title', o.name).width(289).height(378)
      li.append(img);
      
      switch(this.type) {
        case 'company':
          var box = $('<div>').addClass('text-box');
          var fn = $('<h4>').addClass('fn').text(o.name)
          box.append(fn)
          
          var adr = $('<strong>').addClass('adr');
          if(o.city != '') {
            adr.append($('<span>').addClass('locality').text(o.city));
            adr.append('<span>, </span>');
          }
          if(o.state != '') {
            adr.append($('<span>').addClass('region').text(o.state));
          }
          box.append(adr);

          var note = $('<p>').addClass('note').text('"'+$.trim(o.quotes)+'"');
          box.append(note);

          li.append(box);
          li.append($('<a href="#" class="btn-close-add">Close</a>'));
          
          break;
          
        case 'community':
          var holder = $('<div>').addClass('holder');
          var fn = $('<h4>').addClass('fn').text(o.screen_name);
          var title = $('<h5>').addClass('title').text(o.title);
          
          var dl = $('<dl>').addClass('adr');
          dl.append('<dt>Industry:</dt>');
          dl.append('<dd>'+o.industry+'</dd>');
	if(o.city != '')	{
	  dl.append('<dt>City:</dt>');
          dl.append('<dd>'+o.city+'</dd>');
	  }
	  if(o.state != '')	{
          dl.append('<dt>State:</dt>');
          dl.append('<dd>'+o.state+'</dd>');
	  }
          dl.append('<dt>Country:</dt>');
          dl.append('<dd>'+o.country+'</dd>');
          dl.append('<dt>Member Since:</dt>');
          dl.append('<dd>'+o.member_since+'</dd>');
          
          holder.append(fn);
          holder.append(title);
          holder.append(dl);
          
          li.append(holder);
          li.append('<a href="#" class="btn-close">Close</a>');
          break;
          
        default:
          break;
      }
      
      return li;
    }
  }
  
  window.Hero = new Hero();
})(jQuery);

if(!Array.indexOf){
  Array.prototype.indexOf = function(obj){
      for(var i=0; i<this.length; i++){
          if(this[i]==obj){
              return i;
          }
      }
      return -1;
  }
}