(function(){
  ff.GridWrapper = function(farbfinder, options)
  {
    this._initialize(farbfinder, options);
  }
  ff.GridWrapper.prototype = jQuery.extend(ff.GridWrapper.prototype, {
    _initialize: function(farbfinder, options)
    {
      this._farbfinder = farbfinder;
      
      this._options = jQuery.extend({
        container: '#container_schritt_3',
        headline: '#container_schritt_3_headline',
        scrolling_container: '#scrolling',
        pager_container: '#pscrolling',
        back_button: '#step_3_back_button'
      }, options);
      this._url = null;
      this._grid = null;
      this._container = jQuery(this._options.container);
      this._scrollingContainer = jQuery(this._options.scrolling_container);
      this._pagerContainer = jQuery(this._options.pager_container);
      this._back_button = jQuery(this._options.back_button);
      
      this._headline = jQuery(this._options.headline);
      this._headlineHtml = this._headline[0].innerHTML;
    },
    startup: function()
    {
      var self = this;
      this._back_button.bind('click keypress', function(ev)
      {
        jQuery(self).trigger('stepBack');
      });

    },
    update: function(url, data)
    {
      this._url = url;
      if(this._grid === null)
      {
        this._createGrid();        
      }
      else
      {
        if(data)
        {
          this._grid.clearGridData();
          this._scrollingContainer[0].addJSONData(data);
          
        }
      }
    },
    _createGrid: function()
    {
      var self = this;
      this._grid = this._scrollingContainer.jqGrid({
        datatype: function(data)
        {
          jQuery.getJSON(self._url, data, function()
          {
            try
            {
              self._scrollingContainer[0].addJSONData(arguments[0]);
            }
            catch(e)
            {
              console.log(e);
            }
          });
        },
        height: 350,
        width: 547,
        jsonReader:
        {
          repeatitems: false/*,
          id: "0"*/
        },
        colModel: [
           { name: 'code', index: 'code', label: 'Code', width: 20 },
           { name: 'name', index: 'name', label: 'Farbname', width: 56 },
           { name: 'sc', index: 'sc', label: 'Einschicht', width: 40, formatter: function(cellvalue, options, rowObject) {
             return cellvalue===true ? '<span class="sc plus"><span class="plus">&times;</span></span>' : '<span class="sc minus"><span class="minus">&ndash;</span></span>';
           }},
           { name: 'bc', index: 'bc', label: 'Zweischicht', width: 40, formatter: function(cellvalue, options, rowObject) {
             return cellvalue===true ? '<span class="bc plus"><span class="plus">&times;</span></span>' : '<span class="bc minus"><span class="minus">&ndash;</span></span>';
           }},
           { name: 'hb', index: 'hb', label: 'Wasserlack', width: 40, formatter: function(cellvalue, options, rowObject) {
             return cellvalue===true ? '<span class="hb plus"><span class="plus">&times;</span></span>' : '<span class="hb minus"><span class="minus">&ndash;</span></span>';
           } },
           { name: 'id', index: 'id', label: '&nbsp;', width: 27, formatter: function(cellvalue, options, rowObject) {
             var str = '<a class="select-color" href="javascript:void(0)" onclick="jQuery(ff).trigger(\'rowClicked\', {id: ' + cellvalue + ', ev: window.event || arguments[0] });return false;">'
             str += "<span>ausw&auml;hlen</span>";
             str += '</a>'
             return str;
             
           }}
        ], 
        rowNum: 16,
        rowList: [16, 50, 100],
        scroll: true,
        //mtype: "GET",
        //rownumbers: true,
        //rownumWidth: 40,
        gridview: true,
        pager: this._pagerContainer,
        sortname: 'name', 
        sortorder: 'asc',
        viewrecords: false,
        //multiselect: true,
        caption: "Farbauswahl",
        gridComplete: function() {
            jQuery('table#scrolling tr:odd').addClass('odd');
            jQuery('tr td:last-child').addClass('noborder');
        }
        
      }); 
      
      

    },
    resetHeadline: function()
    {
      this._headline.html(this._headlineHtml);
    },
    setHeadline: function(headline)
    {
      this._headline.html(headline);
      
    }
  });
})();