ngn4.io/www-root/js/page.js

var set = new NameGeneratorSet();
var categories = {};
var backgrounds = {};
var previous = null;
var generator = null;
var big = true;
var gender = null;
var format = null;

function selectGenerator(id) {
  var gen = set.getGenerator(id);

  var element = $('div.item:hover');
  var index = element.index();
  var parent = element.parent();

  element.detach();
  element = element.clone();

  if(index > 0) {
    element.insertAfter(parent.children().eq(index - 1));
  } else {
    parent.prepend(element);
  }

  if(gen != null) {
    setGenerator(id, gen);
  } else {
    setMode(0);

    $.get('/d/' + id, {}, function(data) {
      var fullId = data.catId + '/' + data.id;
      setGenerator(fullId, set.addGenerator(fullId, data, true));
    });
  }
}

function setMode(mode) {
  $('#loading-screen').hide();
  $('#generator-screen').hide();

  switch(mode) {
    case 0: $('#loading-screen').show(); break;
    case 1: $('#generator-screen').show(); break;
  }
}

function setGenerator(id, gen) {
  setCookie('last_generator', id, 14);
  $('#gi-header').html(gen.name);

  $('#gi-genders').html('');
  $('#gi-formats').html('');

  if(gen.genders.length > 1) {
    for(var i = 0; i < gen.genders.length; ++i) {
      var className = '';
      if(i == 0) {
        className = "selected";
      }

      $('#gi-genders').append($('<a class="'+className+'" onclick="selectGender(this);">'+gen.genders[i]+'</a>'));
    }
  }

  var prev = null;
  var keys = Object.keys(gen.formats);
  if(keys.length > 1) {
    for(var i = 0; i < keys.length; ++i) {
      var className = '';
      if(i == 0) {
        className = "selected";
      }

      $('#gi-formats').append($('<a class="'+className+'" onclick="selectFormat(this);" data-id="'+keys[i]+'">'+gen.formats[keys[i]].name+'</a>'));
    }
  }

  setMode(1);
  selectBackground(id);

  gender = gen.genders[0];
  format = keys[i];
  generator = gen;

  $('#gi-button').focus();
  if(previous != id) {
    generate();
  }
  previous = id;
}

function selectBackground(id) {
  if(backgrounds.hasOwnProperty(id)) {
    setBackground(backgrounds[id]);
  } else {
    $.get('/b/' + id, {}, function(data) {
      backgrounds[id] = data;
      setBackground(backgrounds[id]);
    });
  }
}

function setBackground(fileName) {
  $('#generator-style').html('body { background-image: url(' + fileName + '); }');
}

function hideFooter() {
  $('.ngn4-footer').hide();
  setCookie('hide_footer', 'yes', 60);
}

function generate() {
  if(generator != null) {
    $('#gi-name').html(generator.generate(format, gender));
  }
}

function updateLists() {
  $('#menu-items').html("Loading...");

  $.get('/l/generators', function(data, err) {
    if(!err) {
      setList(data);
    }
  });
}

function setList(data) {
  // 1. Categories
  var keys = Object.keys(data.categories);
  var items = {};
  $('#menu-items').html('');
  for(var i = 0; i < keys.length; ++i) {
    var key = keys[i];
    var item = $('<div class="item" data-id="'+key+'"><span>'+data.categories[key]+'</span><div class="ngn4-panel"></div></div>');

    items[key] = item;
    $('#menu-items').append(item);

    categories[key] = data.categories[key];
  }

  // 2. Sub menus
  keys = Object.keys(data.generators);
  for(var i = 0; i < keys.length; ++i) {
    var key = keys[i];
    var item = $('<a href="javascript:selectGenerator(\''+key+'\')">'+data.generators[key]+'</a>');

    $('div', items[key.split('/')[0]]).append(item);
  }

  applyMediaQueries(true);
}

function applyMediaQueries(force) {
  var mq = window.matchMedia("(max-width: 980px)");

  if(typeof(force) !== 'boolean') {
    force = false;
  }

  if (mq.matches && (!big || force)) {
    $('#menu-items .item').each(function(index) {
      $('span', this).html($(this).data('id').toUpperCase());
    });

    big = true;
  }

  if (!mq.matches && (big || force)) {
    $('#menu-items .item').each(function(index) {
      $('span', this).html(categories[$(this).data('id')]);
    });

    big = false;
  }
}

function selectGender(elem) {
  gender = $(elem).text();

  $('#gi-genders a.selected').attr('class', '');
  $(elem).attr('class', 'selected');
}

function selectFormat(elem) {
  format = $(elem).data('id');

  $('#gi-formats a.selected').attr('class', '');
  $(elem).attr('class', 'selected');
}

$(document).ready(function() {
  if(getCookie('hide_footer') === 'yes') {
    $('.ngn4-footer').hide();
  }

  if(inited !== true) {
    var lastGenerator = getCookie('last_generator');
    if(lastGenerator.length > 0) {
      selectGenerator(lastGenerator);
    } else {
      selectGenerator('default');
    }

    updateLists();
  } else {
    var fullId = initData.catId + '/' + initData.id;
    setGenerator(fullId, set.addGenerator(fullId, initData, true));

    setList(genList);
  }
});

$(window).resize(applyMediaQueries);

// http://www.w3schools.com/js/js_cookies.asp
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
    }
    return "";
}
function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}