RavelryGallery = 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});
      */
      drawGallery: 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] };
          }
          
          var completed_dt = null;
          if (options.completed != false) {
            completed_dt = { tag: 'div', className: 'rav_completed', children: 'completed: '+[project.completed] };
          }
          
          var started = null;
          if (project.started) {
            started = { tag: 'div', className: 'rav_completed', children: 'started: '+[project.started] };
          }
          
          var favorited = null;
          if (options.favorited != false) {
            favorited = { tag: 'div', className: 'rav_completed', children: 'favorited: '+[project.favorited] };
          }
          
          var comments = null;
          if (options.comments != false) {
            comments = { tag: 'div', className: 'rav_completed', children: 'comments: '+[project.comments] };
          }
          
           var pattern = null;
          if (project.pattern) {
            pattern = { tag: 'a', className: 'rav_completed',href:project.pattern.designer.url, children: 'pattern: '+[project.pattern.designer.name] };
          }
          
          var yarn=null;
          if (project.yarns[0]) {
          	yarn = {tag:'a',className:'rav_yarn', href:project.yarns[0].url,children: 'yarn:'+[project.yarns[0].brand]+' '+[project.yarns[0].name]}; 
          }

          container.appendChild($E({
            tag: 'div',
            className: className,
            children: [ title, photo,started, completed_dt, favorited, comments, pattern, yarn
                         ]
          }));
        }
      }
    }
  }();