RavelryThing = function() {
    var progressData = null;
    
    // Dollar and Dollar E convenience
    var $ = function(id) { return document.getElementById(id); };

    var $E = function(data) {
        var el;
        if ('string' == typeof data) {
          el = document.createTextNode(data);
        } else {
          el = document.createElement(data.tag);
          delete(data.tag);
          if ('undefined' != typeof data.children) {
            for (var i=0, child=null; 'undefined' != typeof (child=data.children[i]); i++) { if (child) { el.appendChild($E(child)); } }
            delete(data.children);
          }
          for (attr in data) { 
            if (attr == 'style') {
              for (s in data[attr]) {
                el.style[s] =  data[attr][s];
              } 
            } else if (data[attr]) {
              el[attr]=data[attr]; 
            }
          }
        }
        return el;
    };
    
    return {
      progressReceived: function(data) {
        progressData = data;
      },

      /*
        Allowed options are: color, width, height, photos (true/false), 
        projects (list of permalinks for specific projects). For example:
        drawProgressBars({color: 'red', width: 200, height: 20});
      */
      drawProgressBars: function(options) {
        if (!progressData) return;
        
        if (!options) options = {};
        if ('number' == typeof options.height) options.height += 'px';
        if (!options.height) options.height = '1.3em';
        if (!options.width) options.width = 100;
        if (!options.color) options.color = 'lightgreen';
        if (!options.container) options.container = 'rav_progress_bars';
        
        var container = $(options.container);
        if (!container) {
          // using unicode so that Blogger doesn't get cranky 
          document.write("\u003cdiv id='" + options.container + "'\u003e\u003c/div\u003e");
          container = $(options.container);
        }
        
        var selectedProjects = progressData.projects;
        if (options.projects) {
          // user has selected individual projects
          var projectsById = new Object();
          for (var i=0; i < selectedProjects.length; i++) {
            projectsById[selectedProjects[i].permalink] = selectedProjects[i];
          }
          selectedProjects = new Array();
          for (var i=0; i < options.projects.length; i++) {
            var project = projectsById[options.projects[i]];
            if (project) {
              selectedProjects.push(project);
            }
          }
        }
        
        for (var i=0; i < selectedProjects.length; i++) {
          var project = selectedProjects[i];
          var filledStyle = { width: Math.round((project.progress/100) * options.width) + 'px', height: options.height, backgroundColor: options.color};
          var barStyle = { width: (options.width) + 'px', height: options.height};
          var className = 'rav_project'
          
          var photo = null;
          if (options.photos && project.thumbnail) {
            className += ' rav_project_with_photos';
            photo = { tag: 'a', className: 'rav_photo_link', href: project.thumbnail.flickrUrl, children: [
                {tag: 'img', src: project.thumbnail.src }
              ]
            };
          }
          
          var title = null;
          if (options.title != false) {
            title = { tag: 'a', className: 'rav_title', href: project.url, children: [project.name] };
          }
          
          container.appendChild($E({
            tag: 'div',
            className: className,
            children: [ title, photo,
              { tag: 'div', className: 'rav_progress_bar_wrapper', style: barStyle, children: [
                { tag: 'div', className: 'rav_progress_bar', style: barStyle, children: [
                  {tag: 'div', className: 'rav_progress_filled', style: filledStyle},
                  {tag: 'div', className: 'rav_progress_text', style: barStyle, 
                    children: [ project.progress + '%' ]}
                ]}
              ]}
            ]
          }));
        }
      }
    }
  }();