gistfile1.txt

	 <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/custom/js/style.css" type="text/css" media="screen" />
     <script src="<?php bloginfo('template_directory'); ?>/custom/js/mustache.js"></script>
  <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/custom/js/jquery.leanModal.min.js"></script>

  <script>
    jQuery(function(){
		$ = jQuery;
		faceboxTemplate = "\
			<div id='school-info'>\
				School Name : {{name}}<br /\>\
				email : {{email}}\
			</div>\
		";
      schoolList = "\
        <ul id='schools'>\
          {{#schools}}\
            <li data-school-id='{{id}}'>{{name}}</li>\
          {{/schools}}\
        </ul>\
      ";

      $.getJSON(
        'http://test.gisaschools.org/api/schools.json?callback=?',
        { format: 'json' },
        function(data) {

          html = Mustache.to_html(schoolList, data);
          // document.write(html);
          $('#list-content').html(html);

          function findSchool(id) {
            return data.schools.filter(function(obj) {
              return +obj.id === +id;
            })[0];
          }

          $('ul#schools li').click(function(){
            self = $(this);
            school = findSchool(parseInt(self.attr('data-school-id')));
            $('#schools').html(school.name + "<br />" + school.email);
            $('#schools').leanModal();
          });


        } // Json Completed
      );

    });
  </script>

<div id="list-content">

</div>