created by http://livecoding.io

README.md

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

options.json

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

water.css

/* css goes here */
h3{
  margin-top:14px;
  margin-left:39px;
}
th{
  border:1px solid #000;
  background-color:#aaa;
}
td{
  border:1px solid #777;
}
img{
  width:200px;
}

water.html

<h3>result</h3>

water.js

var getMap = function(location){
  location=encodeURIComponent(location);
  //http://maps.googleapis.com/maps/api/staticmap?center=Western+Area+Power+Authority&zoom=16&size=300x300&maptype=roadmap&sensor=false
  return 'http://maps.googleapis.com/maps/api/staticmap?center='+location+'&zoom=16&size=300x300&maptype=roadmap&sensor=false';
};

var maker = {};

maker.make_img = function(location){
  return '<img src="'+location+'"></img>';
};
maker.make_map = function(location){
  return maker.make_img(getMap(location));
};

var data = {
  contacts:[
    {person:'Gordon Child',contact:{type:'email',content:'[email protected]'}},
    {person:'Bear With Boombox',contact:{type:'img',content:'http://gordonchild.com/bear.jpg'}},
    {person:'Wapa Location',contact:{type:'map',content:'Western Area Power Authority'}},
    {person:'Greenwich',contact:{type:'map',content:'Greenwich'}},
    {person:'OC Tanner',contact:{type:'map',content:'OC Tanner Salt Lake City, UT'}}
  ]
};

maker.make_email = function(email){
  return '<a href="mailto:'+email+'">'+email+'</a>';
};

var createContent = function(obj){
  if(typeof(obj)==='string'){
    return obj;
  }else if(typeof(obj)==='object'){
    if(maker['make_'+obj.type] && typeof(maker['make_'+obj.type])==='function'){
      return maker['make_'+obj.type](obj.content);
    }else{
      return obj.content;
    }
  }
};

var head = $('h3');
head.html('Data goes here...');

var table = $('<table></table>');
var header = $('<tr><th>Person</th><th>Contact</th></tr>');
table.append(header);
$.each(data.contacts,function(v,i){
  table.append(
    $('<tr></tr>').append(
      $('<td></td>').html(i.person)
    ).append(
      $('<td></td>').html(createContent(i.contact))
    )
  );
});
head.append(table);

water.json

{}