BAREFOOT.casestudy = function(id, attachTo) {
   this.select = function(link) {
      var thumbNav = YAHOO.util.Dom.getElementsByClassName('imgNav', 'div', this.imgContainer);
      if(thumbNav.length > 0)
         this.imgContainer.removeChild( thumbNav[0] );

      if( this.data[link.ref].images.length > 1 ) {
         this.selectImage(this.data[link.ref].firstImage);
         this.imgContainer.appendChild(this.data[link.ref].imgNav);
      }

      this.img.src = this.data[link.ref].images[0];
      this.ttl.innerHTML = this.data[link.ref].title;
      this.txt.innerHTML = this.data[link.ref].text;
      this.txt.scrollTop = 0;  // scroll position isn't reset when moving around in panels

      if( this.lastActive != undefined )
         this.lastActive.className = 'nav';

      link.className = 'nav_on';

      this.lastActive = link;
      this.activeProject = link.ref;
   };

   this.selectImage = function(link) {
      this.img.src = this.data[this.activeProject].images[link.ref];

      if( this.lastActiveImage != undefined )
         this.lastActiveImage.className = 'nav';

      link.className = 'nav_on';

      this.lastActiveImage = link;
   };

   var dataElement = document.getElementById(id);
   dataElement.style.display = 'none';


   var projects = YAHOO.util.Dom.getElementsByClassName('bf-project', 'div', dataElement);
   var data = new Array( projects.length );

   for( i=0; i < projects.length; i++ ) {
      var title  = YAHOO.util.Dom.getElementsByClassName('bf-project-title', 'div', projects[i]);
      var text   = YAHOO.util.Dom.getElementsByClassName('bf-project-text', 'div', projects[i]);

      var imageContainer = YAHOO.util.Dom.getElementsByClassName('bf-project-images', 'div', projects[i]);
      var images = YAHOO.util.Dom.getElementsByClassName('bf-project-image', 'img', projects[i]);

      YAHOO.util.Dom.addClass(imageContainer, 'nav');

      data[i] = new Object();
      data[i].text = (text.length > 0) ? text[0].innerHTML : '';
      data[i].title = (title.length > 0) ? title[0].innerHTML : 'Unknown';
      data[i].images = new Array(images.length);

      data[i].imgNav = document.createElement('div');
      data[i].imgNav.className = 'imgNav';

      var firstImage;
      for(j=0; j < images.length; j++ ) {
         data[i].images[j] = images[j].src;
         images[j].style.display = 'none';

         var link = document.createElement('a');
         link.className = 'nav';
         link.ref = j;
         link.imgsrc = images[j].src;
         link.outerid = id;
         link.element = this;
         link.title = data[i].title;
         link.onclick = function() { this.element.selectImage(this); 
         pageTracker._trackPageview("/casestudy/"+this.outerid+"/sample/"+this.imgsrc); }

         data[i].imgNav.appendChild(link);

         if( j == 0 )
            data[i].firstImage = link;
      }
   }

   this.data = data;
   this.activeProject = 0;

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

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

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

   this.nav.appendChild(this.ttl);

   var firstProject;
   for( i = 0; i < data.length; i++ ) {
      var link = document.createElement('a');
      link.className = 'nav';
      link.ref = i;
      link.outerid = id;
      link.element = this;
      link.title = data[i].title;
      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);
   baseElement.appendChild(this.nav);
   baseElement.appendChild(this.imgContainer);

   if( this.data.length > 0 ) {
      this.select(firstProject);
   }
}

/*
   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>

 */