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. 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) {
        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);
          }
        }
      }

      var months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');

      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) {
          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 pattern = null;
	var designer = null;
	if (project.pattern) {
          pattern = { tag: 'div', className: 'rav_pattern', children: [ 'Pattern: ', { tag: 'a', href: project.pattern.url, children: [ project.pattern.name ] } ] };
          designer = { tag: 'div', className: 'rav_designer', children: [ ' by ', { tag: 'a', href: project.pattern.designer.url, children: [ project.pattern.designer.name ] } ] };
        }
        else {
          pattern = { tag: 'div', className: 'rav_pattern', children: [ 'Pattern: ', 'Personal pattern' ] };
          designer = { tag: 'div', className: 'rav_designer', children: [ ' by ', '---' ] };
        }
        

        var yarnsarray = new Array(2*project.yarns.length);
        yarnsarray[0] = 'Yarn(s): ';
        for (var j=0; j < project.yarns.length; j++) {
          var yarn = project.yarns[j];
          yarnsarray[2*j+1] = { tag: 'a', href: yarn.url, children: [ yarn.brand + ' ' + yarn.name ] };
          if (j != (project.yarns.length - 1)) {
            yarnsarray[2*j+2] = ', ';
          }
        }
        var yarns = { tag: 'div', className: 'rav_yarns', children: yarnsarray };

        var started = null;
        if (project.started) {
          var year = project.started.substr(0, 4);
          var month = project.started.substr(5, 2);
          started = { tag: 'div', className: 'rav_date', children: [ 'Started: ' + months[month-1] + ', ' + year ] };
        }

        var progressbar = { 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 + '%' ]}
              ]}]};
        
        container.appendChild($E({
          tag: 'div',
          className: className,
          children: [ title,
            { tag: 'table', className: 'rav_table', children: [ { tag: 'tbody', children: [
              { tag: 'tr', children: [
                { tag: 'td', className: 'rav_td', children: [ { tag: 'div', className: 'rav_left_side', children: [ pattern, designer, yarns, started ] } ] },
                { tag: 'td', className: 'rav_td', children: [ { tag: 'div', className: 'rav_right_side', children: [ photo, progressbar ] } ] }
              ]}
            ]}]}
          ]
        }));

      }
    }

  }
}();