(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();
}());
(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 ),
    _items = [];


  // 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 Item Component
  var scanItemTemplate = '\
    <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>\
  ';

  var ScanItem = Ractive.extend({
    template: scanItemTemplate,
  });


  // Scan View
  var scanViewTemplate = '\
    {{#items}}\
      <scan-item>\
    {{/items}}\
  ';

  var scanView = new Ractive({
    el: scanViewElement,
    template: scanViewTemplate,
    data: { items: _items },
    components: {
      'scan-item': ScanItem
    }
  });



  // Initialization
  function init() {
    var tableDataSource = new TableRowIterator( itemsTable );

    function importItemsFromTableData() {
      var start = Date.now();
      while ( tableDataSource.hasNext() && (Date.now() - start < 20) ) {
        _items.push( tableDataSource.next() );
      }

      if ( tableDataSource.hasNext() ) {
        setTimeout( importItemsFromTableData, 25 );
      }
    }

    wireupTabs();
    setTimeout(importItemsFromTableData, 25);
  }


  // Crank it up!
  init();
}());
Rework scan items as component