(function() {
  'use strict';

  // imports
  var $ = jQuery,
    TableRowIterator = core.TableRowIterator;


  var itemsTable = $('#bid_items').length > 0 ? $('#bid_items') : $('#bid_results'),
    appContainer = $('body'),
    originalTableViewContainer = $('#salvageMainContent'),
    scanViewElement = $('<div class="mod--scan-view"></div>').prependTo( appContainer );


  // Tabs
  function setActiveView(viewName) {
    if ( !viewName || viewName === '#scan' ) {
      originalTableViewContainer.hide();
      scanViewElement.show();
    } else {
      originalTableViewContainer.show();
      scanViewElement.hide();
    }
  }

  function wireupTabs() {
    var mainTabs = $('<ul class="mod--main-tabs"><li><a href="#scan">Scan</a></li><li><a href="#table">Table</a></li></ul>')
          .prependTo( appContainer );

    mainTabs.on('click', 'a', function() {
      setActiveView( $(this).attr('href') );
    });
  }


  // Scan View
  function createScanView() {
    var items = [],
      template = '\
        {{#items}}\
          <div class="scan-item">\
            <a href="{{detailUrl}}" title="Click for details" target="_blank">\
              <div class="scan-item--thumbnail"\
                style="background-image: url(/images/salvage_images/{{stockNumber}}/main/1.jpg)">\
              </div>\
            </a>\
            <div class="scan-item--highlight" title="Reserve price">{{reservePrice}}</div>\
            <div class="scan-item--summary">{{year}} {{model}}</div>\
          </div>\
        {{/items}}\
      ',
      tt = new TableRowIterator( itemsTable ),
      vm;

    vm = new Ractive({
      el: scanViewElement,
      template: template,
      data: { items: items }
    });

    setTimeout(processItems, 25);
    function processItems() {
      var start = Date.now();
      while ( tt.hasNext() && (Date.now() - start < 20) ) {
        items.push( tt.next() );
      }

      if ( tt.hasNext() ) {
        setTimeout( processItems, 25 );
      }
    }
  }




  // Initialization
  function init() {
    wireupTabs();
    createScanView();
  }


  // Crank it up!
  init();
}());
@@ -364,16 +364,33 @@
 tainer )
+,%0A    _items = %5B%5D
 ;%0A%0A%0A  //
@@ -951,109 +951,51 @@
 can 
-View%0A  function createScanView() %7B%0A  
+Item Component%0A
   var 
-items = %5B%5D,%0A      template = '%5C%0A        %7B%7B#items%7D%7D%5C%0A      
+scanItemTemplate = '%5C%0A
     
@@ -1015,30 +1015,24 @@
 can-item%22%3E%5C%0A
-      
       %3Ca hre
@@ -1097,30 +1097,24 @@
 %22%3E%5C%0A        
-      
 %3Cdiv class=%22
@@ -1146,22 +1146,16 @@
         
-      
 style=%22b
@@ -1233,30 +1233,24 @@
 %22%3E%5C%0A        
-      
 %3C/div%3E%5C%0A    
@@ -1255,26 +1255,14 @@
     
-      
 %3C/a%3E%5C%0A
-      
     
@@ -1349,22 +1349,16 @@
 %5C%0A      
-      
 %3Cdiv cla
@@ -1407,22 +1407,16 @@
 %3C/div%3E%5C%0A
-      
     %3C/di
@@ -1425,99 +1425,200 @@
 %5C%0A  
-      %7B%7B/items%7D%7D%5C%0A      ',%0A      tt = new TableRowIterator( itemsTable ),%0A      vm
+';%0A%0A  var ScanItem = Ractive.extend(%7B%0A    template: scanItemTemplate,%0A  %7D);%0A%0A%0A  // Scan View%0A  var scanViewTemplate = '%5C%0A    %7B%7B#items%7D%7D%5C%0A      %3Cscan-item%3E%5C%0A    %7B%7B/items%7D%7D%5C%0A  '
 ;%0A%0A
-  
   v
-m
+ar scanView
  = n
@@ -1630,18 +1630,16 @@
 ctive(%7B%0A
-  
     el: 
@@ -1659,18 +1659,16 @@
 nt,%0A    
-  
 template
@@ -1669,17 +1669,25 @@
 mplate: 
-t
+scanViewT
 emplate,
@@ -1687,18 +1687,16 @@
 mplate,%0A
-  
     data
@@ -1710,59 +1710,182 @@
 ms: 
+_
 items %7D
-%0A  
+,%0A    components: %7B%0A      'scan-item': ScanItem%0A    %7D%0A
   %7D);%0A%0A
+%0A%0A
   
-  setTimeout(processItems, 25
+// Initialization%0A  function init() %7B%0A    var tableDataSource = new TableRowIterator( itemsTable 
 );%0A
+%0A
     
@@ -1893,28 +1893,40 @@
 unction 
-processItems
+importItemsFromTableData
 () %7B%0A   
@@ -1963,25 +1963,38 @@
    while ( t
-t
+ableDataSource
 .hasNext() &
@@ -2033,16 +2033,17 @@
         
+_
 items.pu
@@ -2047,17 +2047,30 @@
 .push( t
-t
+ableDataSource
 .next() 
@@ -2093,17 +2093,30 @@
   if ( t
-t
+ableDataSource
 .hasNext
@@ -2146,127 +2146,116 @@
 ut( 
-processItems, 25 );%0A      %7D%0A    %7D%0A  %7D%0A%0A%0A%0A%0A  // Initialization%0A  function init() %7B%0A    wireupTabs();%0A    createScanView(
+importItemsFromTableData, 25 );%0A      %7D%0A    %7D%0A%0A    wireupTabs();%0A    setTimeout(importItemsFromTableData, 25
 );%0A 

Rework scan items as component