function create_tag(obj) {
  var tag = document.createElement(obj['tag'] ? obj.tag : 'div');
  
  for (var attr in obj ){ 
    if (!/tag|text|content|className|append/.test(attr))
        tag.setAttribute(attr, obj[attr]); 

    if(attr === 'text')      tag.appendChild(document.createTextNode(obj[attr]));
    if(attr === 'className') tag[attr] = obj[attr];
    if(attr === 'append')    tag.appendChild(obj[attr]); 
  }

  if (obj.hasOwnProperty('content')) {
      for(var elem = 0, len = obj['content'].length; elem < len; elem++) {
          tag.appendChild(create_tag(obj['content'][elem])); 
     }
  } 

  return tag; 
}

function HTML(obj) {
  return $(create_tag(obj));
}

$(document).ready(function($) {
  /*
  <div class="mosaic-block bar2">
    <a href="http://www.nonsensesociety.com/2010/12/i-am-not-human-portraits/" class="mosaic-overlay" style="display: inline; left: 0px; bottom: -50px;"></a>
    <div class="details">
      <h4>
        I Am Not Human - Unique Self Portraits
      </h4><br>
      <p>
        Description here
      </p>
    </div>
    <div class="mosaic-backdrop" style="display: block;">
      <img src="http://buildinternet.s3.amazonaws.com/projects/mosaic/desroches.jpg">
    </div>
  </div>
  */
  
  $(".imageGallery").replaceWith(function() { return HTML(
    {className: 'pro-gallery', content: $("div > div > div > a", this).map(function(index, e) {
//      console.log('Mapping element (' + index + '): ' + e);
      
      var content = $(e).attr("title").split(',');
      var name = content.shift();

      var image = $('img', e).attr("src");
      var link = $(e).attr("href");
      var caption = (!content.size() ? '' : content.join('<br />'));

      return {className: 'mosaic-block bar2', content: [
        {tag: 'a', href: link, className: 'mosaic-overlay', target: '_blank', style: 'text-decoration: none;', content: [
          {className: 'details', content: [
            {tag: 'h4', text: name},
            {tag: 'br'},
            {tag: 'p', text: caption}
          ]}
        ]},
        {className: 'mosaic-backdrop', style: 'display: block;', content: [ 
          {tag: 'img', src: image}
        ]}
      ]};
    })}
  )});
  
  $('.bar2').mosaic({animation: 'slide'});
});