BAREFOOT.blogPanel = function(id, attachTo) {
   var dataElement = document.getElementById(id);
   dataElement.style.display = 'none';

   var project = $("div#" + id + " div.bf-project");
   /*var data = new Array( projects.length );

   for( i=0; i < projects.length; i++ ) {*/
   var text = $("div#" + id + " div.bf-project-text");
/*
      data[i] = new Object();
      data[i].text = (text.length > 0) ? text[0].innerHTML : '';
      data[i].title = (title.length > 0) ? title[0].innerHTML : 'Unknown';

	}

   this.data = data;*/

   this.nav = document.createElement('div');
   this.txt = document.createElement('div');
   this.ttl = document.createElement('div');

   var baseElement = document.getElementById(attachTo);
   baseElement.className = 'blogpanel';

   this.nav.className = 'nav';
   this.ttl.className = 'ttl';
   this.txt.className = 'txt';

   this.txt.innerHTML = $(text).html();

   this.nav.appendChild(this.ttl);

   var firstProject;
   //for( i = 0; i < data.length; i++ ) {
      var link = document.createElement('a');
      link.className = 'nav';
      link.outerid = id;
      link.element = this;
      link.onclick = function() { this.element.select(this);
      pageTracker._trackPageview("/casestudy/"+this.outerid+"/"+this.title); 
      };

      this.nav.appendChild(link);

      //if( i == 0 )
         firstProject = link;
   //}

   baseElement.appendChild(this.txt);

}

/*
   Using:
   ------

   <div class="bf-project">
      <div class="bf-project-title"></div>
      <div class="bf-project-images">
         <img class="bf-project-image" src="**thumbnail path**" />
      </div>
      <div class="bf-project-text">
         <html stuff here>
      </div>
   </div>


   Translates to: 
   ------------------------

   <baseElement class="portfolio">
      <div class="txt"></div>
      <div class="nav">
         <div class="ttl"></div>
      </div>
      <div class="imgContainer">
         <img />

         <div class="imgNav"></div>
      </div>
   </baseElement>

 */

