Edit in JSFiddle

// Sample JSON Data
var sampleData = {
  quotes: [
    {
      "1": "Sun Tzu said: Raising a host of a hundred thousand men and marching them great distances entails heavy loss on the people and a drain on the resources of the State.The daily expenditure will amount to a thousand ounce of silver. There will be commotion at home and abroad, and men will drop down exhausted on the highways, As many as seven hundred thousand lies will be impededin their labor."
    },
    {
      "2": "Hostile armies may face each other for years, striving for the victory which is decided in a single day.This being so, to remain in ignorance of the enemy's condition simply because one grudges the outlay of a hundred ounces of silver in honors and emoluments, is the height of inhumanity."
    },
    {
      "3": "One who acts thus is no leader of men, no present help to his sovereign, no master of victory."
    },
    {
      "4": "Thus, what enables the wise sovereign and the good general to strike and conquer, and achieve things beyond the reach of ordinary men, is foreknowledge."
    },
    {
      "5": "Now this foreknowledge cannot be elicited from spirits; it cannot be obtained inductively from experience, nor by any deductive calculation."
    },
    {
      "6": "Knowledge of the enemy's dispositions can only be obtained from other men."
    },
    {
      "7": "Hence the use of spies, of whom there are five classes: (1) Local spies; (2) inward spies; (3) converted spies; (4) doomed spies; (5) surviving spies."
    },
    {
      "8": "When these five kinds of spy are all at work, none can discover the secret system.  This is called 'divine manipulation of the threads.'  It is the sovereign's most precious faculty."
    },
    {
      "9": "Having local spies means employing the services of the inhabitants of a district."
    },
    {
      "10": "Having inward spies, making use of officials of the enemy."
    }
]};

// The notification helper

var simpleNotification = (function () {
    var my = {};
     my.show = function (data) {
      if (window.webkitNotifications) {
        //check if there is a support for webkitNotifications
        if (window.webkitNotifications.checkPermission() == 0) {
          console.log("creating notification")
          var notification = webkitNotifications.createNotification(data.icon, data.title, data.body);
          notification.show();
          //set timeout to hide it
          setTimeout(function(){
              notification.cancel();
           }, data.timeout);
        } else {
          webkitNotifications.requestPermission(function () {
            //call the same function again
            my.show(data);
          });
        }
      }else if (window.Notification) {
    //Currenlty a fallback, but this should be the real implementation on all browsers
        if ("granted" === Notification.permissionLevel()) {
          var notification = new Notification(data.title, data);
          notification.show();
        } else if ("default" === Notification.permissionLevel() ) {
          Notification.requestPermission(function () {
            //call the same function again
            my.show(data);
          });
        }
      }else{
        //Notifications not supported,going with fallback
       data.errorCallback();
      }
    };
  return my;
}());

$(document).ready(function() {
    $("#show").click(function (){
      var data = {
        icon: "http://upload.wikimedia.org/wikipedia/commons/7/7e/Jacob_de_Gheyn_-_Wapenhandelinge_4.jpg",
        title: "The Art of War - The Use of Spies ",
        body: "text",
        timeout : 7000,
        errorCallback: function(){
          $("#fallback").text(this.body);
        }
      };
      var randomSampleId = Math.floor(Math.random()*sampleData.quotes.length)+1;
      var sample = sampleData.quotes[randomSampleId];
      console.log(randomSampleId)

      console.log(sample)
        for (var key in sample) {
            data.title += key;
            data.body = sample[key];
        }


      simpleNotification.show(data);
    });
});

 <body>
   <button id="show">Show quote</button>
   <div id="fallback"> my fallback notification</div>
 </body>

#fallback {
    display:none;
}