Javascript Coding and a night of sleep

Sometimes you write code and it feels really bad though the code is functioning.

An instance of this I came across recently helping somebody out
getting his website running.

I wanted to write a small javascript code that takes a json object and displays it on the screen. Each json object represents a fact about the world that has 1 to n pieces of text attached to it called illustrations.
On the page the first illustration text snippet is displayed and right next to it an arrow button lets you display the next illustration, i.e. piece of text and well at the left of the illustration you can go back through a button.

How do you implement this? The following is my first shot:

In the page you call in your jquery ready event:

$(document).ready(function() {
  factGUI.generate(factfood)
});

where factfood is a json object and factGUI.generate a function that creates the
necessary html and hooks up all the event handlers for the buttons:

   factfood =      // This is the json object factfood
      { name: "Food wasted",
        spec: { numberPoint: 716000000, 
                unit: "food wasted",
                area: "globally",
                time: "this year" },
        notes:  "This number" ,
        source: [ {link: "http://www.wrap.org.uk/retail/food_waste/index.html", 
                   title: "WRAP"},
                  {link: "http://www.siwi.org/documents/Resources/Policy_Briefs/PB_From_Filed_to_Fork_2008.pdf", 
                   title: "Saving water: from field to fork"},
                  {link: "http://www.grida.no/publications/rr/food-crisis/page/3565.aspx", 
                   title: "UN"}
                ],
        // Here are the pieces of text 
        // they have a title and a text body "text"
        illustrations: [ 
         { title: "Half of all food is lost",
           text:"A lot of the massive food loss"},
         { title: "Wasted food puts pressure on water resources too",
           text:"The loss of food is even more"}
        ]
   };

The code for factGUI was as follows:

factGUI = { 
// This array has some functions 
// that do the real work of displaying
transformToDanishHTML: function(foodfact) { 
  // generate factfood as a serious of li elements
  outHTML = '
';  
  // each one holds an illustration text snippet 
  for( key in factfood.illustrations ) {   
    // as a title-li and a text-li element 
    outHTML += '
';

    outHTML += factfood.illustrations[key].title + '
'; 
    outHTML +='
';

    outHTML += factfood.illustrations[key].text;

    outHTML += '
'; 
  } 
  outHTML += '
';
  return outHTML;
},       

generate: function(factfood) { 
  // And here the horror starts....
  outHTML = this.transformToDanishHTML(factfood);
  // insert the html at the div of factillustration-navigator
  $("#factillustration-navigator").before(outHTML);
  // hide all lis i.e. illustrations at first
  $("#factillustration").find("li").hide();
  myShowIndex = 0;
  itemNum = $("#factillustration").find("li").size() / 2;
  // show the first illustration with title and text body
  // necessary to address the title-li and text-li of the first illustration
  // text snippet
  $("#factillustration").find("li").eq(myShowIndex*2).show();
  $("#factillustration").find("li").eq(myShowIndex*2+1).show();
  that = this;
  $("#factillustration-right").click(function() {
    if(myShowIndex == itemNum-1) {
      return false;
    }
    if(myShowIndex != itemNum-1) {
      // hide the current illustration
      $("#factillustration").find("li").eq(myShowIndex*2).hide();
      $("#factillustration").find("li").eq(myShowIndex*2+1).hide();
      myShowIndex++;
      // show the next one
      $("#factillustration").find("li").eq(myShowIndex*2).show();
      $("#factillustration").find("li").eq(myShowIndex*2+1).show();
      return false;
    }
  });
  $("#factillustration-left").click(function() {
    if(myShowIndex == 0) {
      return false;
    }
    if(myShowIndex > 0) {
      $("#factillustration").find("li").eq(myShowIndex*2).hide();
      $("#factillustration").find("li").eq(myShowIndex*2+1).hide();
      myShowIndex--;
      $("#factillustration").find("li").eq(myShowIndex*2).show();
      $("#factillustration").find("li").eq(myShowIndex*2+1).show();           
      return false;
    }
  });
}
};

Feeling bad about this coding I slept a night and thought, why not
have only one li pair (title,text) and update the content from the
factfood data structure not spreading the list of illustrations over
the li-elements like before. This yielded the following:

factGUI = {

handleGUI: function(factfood) {
  showIndex = 0;
  that = this;
  itemNum = factfood.illustrations.length;

  setGUIItems = function(showIndex) {
    illustration = factfood.illustrations[showIndex];
    $("#factillustration-title").text(illustration.title);
    $("#factillustration-text").text(illustration.text);
  };

  $("#factillustration-right").click(function() {
    if(showIndex != itemNum-1) {
      showIndex++;
      setGUIItems(showIndex);
    }
    return false;
  });
  $("#factillustration-left").click(function() {
    if(showIndex > 0) {
      showIndex--;
      setGUIItems(showIndex);
    }
    return false;
  });   
}
};

Much better.