function createNavigation(container) {
  if (!$.fr.hasOwnProperty('navigationTemplate')) {
    $.fr.navigationTemplateSource = '<div>'+
      '<div class="label">{{locales/resultsPerPage}}</div>'+
      '<div class="select">'+
        '<select id="per_page" name="per_page">'+
          '{{#resultsPerPage}}'+
            '<option value="{{value}}">{{label}}</option>'+
          '{{/resultsPerPage}}'+
        '</select>'+
      '</div>'+
      '<div class="pagination">'+
        '<a style="cursor: pointer;" name="toFirstPage">'+
          '<img src="/images/flexirails/first.png">'+
        '</a>'+
        '<a style="cursor: pointer;" name="toPrevPage">'+
          '<img src="/images/flexirails/prev.png">'+
        '</a>'+
        '<span>'+
          '{{locales/page}}'+
          '<input class="js-fr-from-page" name="current_page_box" type="text">'+
          '{{locales/of}}'+
          '<span class="to">1</span>'+
        '</span>'+
        '<a style="cursor: pointer;" name="toNextPage">'+
          '<img src="/images/flexirails/next.png">'+
        '</a>'+
        '<a style="cursor: pointer;" name="toLastPage">'+
          '<img src="/images/flexirails/last.png">'+
        '</a>'+
      '</div>'+
      '<div class="results label">'+
        '<span class="total_results">1</span>'+
        'Results'+
      '</div>'+
    '</div>';
    $.fr.navigationTemplate = Handlebars.compile($.fr.navigationTemplateSource);
  }
  
  var resultsPerPage = new Array();
  for (var i = 0; i < $.fr.defaults.perPageOptions.length; i++) {
    resultsPerPage.push({ 
      value : $.fr.defaults.perPageOptions[i],
      label : ($.fr.defaults.perPageOptions[i] == -1 ? $.t('results.loadAll') : $.fr.defaults.perPageOptions[i])
    });
  };
  
  container.addClass('flexinavigation');
  var data = {
    "locales"             : {
      "resultsPerPage"    : $.t('results.perPage'),
      "page"              : $.t('results.page'),
      "of"                : $.t('results.of')
    },
    "resultsPerPage"      : resultsPerPage
  };
  var navigation = $.fr.navigationTemplate(data);
  
  container.append(navigation);
  $(":input[name=per_page]",container).change(changePerPageOption);
  $("a[name=toFirstPage]",container).click(paginateToFirstPage);
  $("a[name=toPrevPage]",container).click(paginateToPrevPage);
  $("a[name=toNextPage]",container).click(paginateToNextPage);
  $("a[name=toLastPage]",container).click(paginateToLastPage);
  $(":input[name=current_page_box]",container).change(paginateToAnyPage);
  
  invokeNavigationCreated(container);
}

function invokeNavigationCreated(container) {
  if ($.fr.navigationCreated != null) {
    for (var i=0; i < $.fr.navigationCreated.length; i++) {
      $.fr.navigationCreated[i].apply(this, [container]);
    }
  }
}

function paginateToAnyPage() {
  paginate($(this).val());
}
function paginateToFirstPage(){
  paginate($.fr.pagination.first);
  return false;
}
function paginateToPrevPage() {
  paginate(Math.max(parseInt($.fr.currentView.currentPage) - 1, $.fr.pagination.first));
  return false;
}
function paginateToNextPage() {
  paginate(Math.min(parseInt($.fr.currentView.currentPage) + 1, $.fr.pagination.last));
  return false;
}
function paginateToLastPage(){
  paginate($.fr.pagination.last);
  return false;
}

function paginate(to_page) {
  if (to_page > $.fr.pagination.last || to_page < 1) {
    $(".js-fr-from-page").val($.fr.currentView.currentPage);
  }
  if ($.fr.currentView.currentPage != to_page) {
    $.fr.currentView.currentPage = parseInt(to_page);
    
    invokeViewUpdated();
    reloadFlexidata();
  }
}

function changePerPageOption() {
  updatePerPage($(this).val());
}

function updatePerPage(new_per_page) {
  if (new_per_page == -1) {
    if (!confirm($.t('confirm.loadAll'))) {
      $(":input[name=per_page]").val($.fr.currentView.perPage);
      return;
    }
  }

  if (new_per_page != $.fr.currentView.perPage) {
    $.fr.currentView.currentPage = 1;
    $.fr.currentView.perPage = new_per_page;

    invokeViewUpdated();
    reloadFlexidata();
  }
}

@@ -483,245 +483,167 @@
 '%3Ca 
-style=%22cursor: pointer;%22 name=%22toFirstPage%22%3E'+%0A          '%3Cimg src=%22/images/flexirails/first.png%22%3E'+%0A        '%3C/a%3E'+%0A        '%3Ca style=%22cursor: pointer;%22 name=%22toPrevPage%22%3E'+%0A          '%3Cimg src=%22/images/flexirails/prev.png%22%3E'+%0A        '
+name=%22toFirstPage%22%3E%3Cspan style=%22cursor: pointer;%22 class=%22first%22%3E%3C/span%3E%3C/a%3E'+%0A        '%3Ca name=%22toPrevPage%22%3E%3Cspan style=%22cursor: pointer;%22 class=%22prev%22%3E%3C/span%3E
 %3C/a%3E
@@ -864,32 +864,56 @@
 %3E'+%0A        '%3Ca 
+name=%22toNextPage%22%3E%3Cspan 
 style=%22cursor: p
@@ -925,218 +925,116 @@
 r;%22 
-name=%22toNextPage%22%3E'+%0A          '%3Cimg src=%22/images/flexirails/next.png%22%3E'+%0A        '%3C/a%3E'+%0A        '%3Ca style=%22cursor: pointer;%22 name=%22toLastPage%22%3E'+%0A          '%3Cimg src=%22/images/flexirails/last.png%22%3E'+%0A        '
+class=%22next%22%3E%3C/span%3E%3C/a%3E'+%0A        '%3Ca name=%22toLastPage%22%3E%3Cspan style=%22cursor: pointer;%22 class=%22last%22%3E%3C/span%3E
 %3C/a%3E

change navigation html