created by http://livecoding.io

README.md

View this code at http://livecoding.io/9690914

options.json

{
    "libraries": [],
    "mode": "javascript",
    "layout": "fullscreen mode (vertical)",
    "resolution": "reset"
}

water.css

table{
  margin-left:auto;
  margin-right:auto;
  margin-top:105px;
}

table th{
  background-color:#ddd;
  border:1px solid #000;
}

table td{
  border:1px solid #000;
  padding:10px;
}

water.html

<div id="main"></div>

water.js

var table = $('<table></table>');
$('div#main').append(table);
var data = {
  items:[
    {name:'Gordon',value:'{"type":"email","content":"gordon@gordonchild.com"}'},
    {name:'Foo',value:'{"type":"arr","joinWith":"&nbsp;","content":["foo","bar"]}'},
    {name:'Foo',value:'{"type":"arr","content":["foo","bar"]}'},
    {name:'Foose',value:["foose",{type:'email',content:'gordolio'}]},
    {name:'Foose',value:'["foose","bar"]'},
    {name:'WAPA Location',value:{type:'map',style:'width:200px',content:'Western Area Power Authority'}},
    {name:'Bear',value:{type:'img',style:'width:200px;',content:'http://gordonchild.com/bear.jpg'}}
  ]
};

var maker = {};
maker = {
  make_email:function(email){
    return '<a href="mailto:'+email.content+'">'+email.content+'</a>';
  },
  make_map:function(map){
    map.content = encodeURIComponent(map.content);
    return this.make_img({
      content:'http://maps.googleapis.com/maps/api/staticmap?center='
        +map.content
        +'&zoom=16&size=300x300&maptype=roadmap&sensor=false',
      style:map.style
    });
  },
  make_img:function(img){
    return '<img src="'+img.content+'"'+(img.style?' style="'+img.style+'"':'')+'>';
  },
  make_arr:function(arr){
    var items = [];
    $.each(arr.type?arr.content:arr,function(v,i){
      items.push(maker.make(i));
    });
    return items.join(arr.joinWith?arr.joinWith:'<br/>');
  },
  make:function(obj){
    if(typeof(obj)==='string'){
      var json = null;
      try{
        json = $.parseJSON(obj);
      }catch(ex){}
      if(json===null){
        return obj;
      }else{
        return this.make(json);
      }
    }else if(typeof(obj)==='object'){
      if(this['make_'+obj.type] && typeof(this['make_'+obj.type])==='function'){
        return this['make_'+obj.type](obj);
      }else if(Object.prototype.toString.call(obj)==='[object Array]'){
        return this.make_arr(obj);
      }else{
        return 'undef type: '+obj.type;
      }
    }
    return 'undef type: '+typeof(obj);
  }
};

table.append(
  $('<tr><th>name</th><th>value</th></tr>')
);
$.each(data.items,function(v,i){
  table.append(
    $('<tr></tr>')
      .append($('<td></td>').html(i.name))
      .append($('<td></td>').html(maker.make(i.value)))
  );
});

water.json

{}