var inductee_browser;
$(document).ready(function(){
  InducteeBrowser.init();
});

var InducteeBrowser = {
  inst: null,
  Browser: function(theEl) {
    var that = this;
    var el;
    var resultsEl;
    var yearFilterEl;
    var labelEl;
    var yearSlider;
    
    var activeYear;
    var searchUrl = '/inductees/search/';
    
    var preloader;
    var preloaderHtml = '<div class="preloader"><img width="32" height=32" src="/media/images/preloader.gif" /></div>';
    var errorHtml = '<div class="error">Error:<br />We were unable to retreive the requested inductees.</div>';
    
    var searchEl;
    var searchDefaultText = 'Inductee name';
    var searchTimeout;
    var request;
    
    function alertMargin(el, height) {
      if(height < $(resultsEl).height()) {
        height = $(resultsEl).height();
      }
      return (height / 2) - (el.outerHeight() / 2);
    }
    
    function showPreloader() {
      if($(resultsEl).find('.preloader').size() > 0) return;
      
      $(resultsEl).append(preloaderHtml);
      var preloader = $(resultsEl).find('.preloader');
      var toppos = alertMargin(preloader, resultsEl.height());
      var leftpos = ($(resultsEl).width() / 2) - (preloader.outerWidth()  / 2);
      preloader.css({'top': toppos, 'left': leftpos});
    }
    
    function showError() {
      $(resultsEl).html(errorHtml);
      var error = $(resultsEl).find('.error');
      var pos = alertMargin(error, 221);
      error.css({'top': pos});
    }
    
    function readYearNav(el) {
      return parseInt(el.id.replace('year_option_',''), 10)
    }
    
    function setupYear() {
      $(yearFilterEl).find('li').removeClass('selected');
      $(yearFilterEl).find('li#year_option_'+activeYear).addClass('selected');
    }
    
    function doRequest(data, successLabel) {
      showPreloader();
      
      if(request) {
        request.abort();
      }
      request = $.ajax({
        type: 'GET',
        url: searchUrl, 
        data: data, 
        success: function(data, textStatus) {
          populateResults(data, successLabel);
        },
        error: function(request,status,errorThrown){
          showError();
        }
      });
    }
    
    function populateResults(data, label) {
      $(labelEl).html(label);
      $(resultsEl).html(data);
      $(resultsEl).height('auto');
    }
    
    function getYearList() {
      clearSearch();
      setupYear();
      
      doRequest({year: activeYear}, activeYear+' ceremony');
    }
    
    function clearSearch() {
      searchEl.attr('value',searchDefaultText);
    }
    
    function doSearch(term) {
      var val = searchEl.attr('value');
      $(yearFilterEl).find('li').removeClass('selected');
      
      doRequest({term: val}, '');
    }
    
    function onSearchEvent() {
      var val = searchEl.attr('value');
      clearTimeout(searchTimeout);
      if(val.length > 1) {
        searchTimeout = setTimeout(doSearch,250);
      }
    }
    
    function init(theEl) {
      el = theEl;
      resultsEl = $(el).find('#inductee_list');
      yearFilterEl = $(el).find('#year_filter ul #filter_years ul').get(0);
      labelEl = $(el).find('#inductee_footer').get(0);
      searchEl = $(el).find('#inductee_search');
      
      //year browser
      var selectedEl = $(yearFilterEl).find('li.selected').eq(0);
      if( selectedEl.size() < 1 ) {
        selectedEl = $(yearFilterEl).find('li:first').addClass('selected');
      }
      
      var yearsEl = $(el).find('#filter_years');
      if(yearsEl.size() > 0) {
        yearSlider = new ItemSlider(yearsEl, {slideWidth: $(yearsEl).find('li').width() + 1 });
        $(el).find('#filter_back').click(function(){ yearSlider.prev(); return false; });
        $(el).find('#filter_fwd').click(function(){ yearSlider.next(); return false; });
        yearSlider.slideTo(-1 * selectedEl.prevAll('li').size());
      }
      
      yearsEl.find('li').each(function(){
        var year = readYearNav(this);
        $(this).children('a').click(function(){
          activeYear = year;
          getYearList();
          return false;
        });
      });
      
      if(selectedEl) {
        activeYear = readYearNav(selectedEl.get(0))
        getYearList();
      }
      
      //search
      searchEl.focus(function(){
        if(searchEl.attr('value') == searchDefaultText) {
          searchEl.attr('value','');
        }
      });
      searchEl.blur(function(){
        if(searchEl.attr('value') == '') {
          searchEl.attr('value',searchDefaultText);
        }
      });
      
      searchEl.keypress(onSearchEvent);
    }
    init(theEl);
  },
  init: function() {
    InducteeBrowser.inst = new InducteeBrowser.Browser($('#inductee_browser').get());
  }
}