var currentList = null;
var listsList = null;
var MAX_RECORDS = 100;
var MAX_COLUMNS = 4;

function UIList(lister) {
   var self = this;
   this.list = lister;

   this.div = $('#table-content-template').clone(true);
   this.div.attr('id','table-content-'+this.list._id);
   $('.table-name td',this.div).attr('id','table-name-'+this.list._id);
   this.div.show();

   this.canvas_div = $('<div id="'+this.list._id+'" class="canvas" style="margin-top:100px;">');

    function buildTableHeader() {
	var tr = $('<tr>');
	tr.append('<td class="index-cell">&nbsp;</td>');
	for (var i = 0; i < MAX_COLUMNS; i++) {
	   tr.append('<td class="content-cell column-header">&nbsp;</td>');
	}
	return tr.html();
    }

    function buildTableRecord() {
	var tableRecord = $('<tr>');
	tableRecord.append('<td class="index-cell">&nbsp;</td>');
	for (var i = 0; i < MAX_COLUMNS; i++) {
	   tableRecord.append('<td class="content-cell"><div class="div-content-td"></div></td>');
	}
	return tableRecord.clone();
    }


    this.refresh = function() {
       log("refreshList");
       this.build();
    }
    this.build = function() {
        /*	
        $('.table-name td', self.div).empty();
        var r = Raphael("table-name-"+self.list._id, 600, 40),
                    fonts = [0, r.getFont("1"), r.getFont("2"), r.getFont("3"), r.getFont("whoa")],
                    custom = r.print(0, 10, self.list.name, fonts[4], 24).attr({fill: "#fff", stroke:"#000"});
        */
        $('.table-name td',self.div).html(self.list.name);
	$('.table-header', self.div).append(buildTableHeader());
	$('.table-header .column-header', self.div).each(function(i, colHeader) {
	    column = self.list.getContentType().columns[i];
	    if (column != null) {
		if (nam_auth() || column.name == 'title') {
		$(colHeader).html(column.name);
		}
	    }
	});
	setRows();       
    }
    function setRows() {
	var tbody = $(".table-body",self.div);
	tbody.empty();

	for (var i = 0; i < self.list.getRecordsLength(); i++) {
	    var recordRow = buildTableRecord();
	    recordRow.data('index',i);
	    tbody.append($(recordRow));
	    var record = self.list.getRecord(i);
	    if (record != undefined && record.fields != undefined) {
		recordRow.addClass("content-row");
		$('.index-cell',recordRow).html(i+1);
		
		$('.div-content-td',recordRow).each(function(j, diver) {
		     var fieldValue = "";
		     col = self.list.getContentType().columns[j];
		     if (col != undefined && (nam_auth() || col.name == 'title')) {
			 fieldValue = record.getFieldValue(col);
                         if (fieldValue.length > 25) {
                             fieldValue = fieldValue.substring(0,20)+"...";
                         } 
		     }
		     $(diver).html(fieldValue);
		     $(diver).parent().addClass('content-column');
		});
	    } 
	}
    }
    this.moveCell = function(x, y) {
	var prevCellY = self.list.y;
	var prevCellX = self.list.x;
	self.list.x = self.list.x+x;
	self.list.y = self.list.y+y;
	
	var max_recs = MAX_RECORDS < self.list.getRecordsLength() ? MAX_RECORDS : self.list.getRecordsLength();
	var max_cols = MAX_COLUMNS < self.list.getContentType().columns.length ? MAX_COLUMNS : self.list.getContentType().columns.length;

	if (self.list.x >= max_cols) {
	    self.list.x = 0;
	}
	else if (self.list.x < 0) {
	    self.list.x = max_cols-1;
	}
	if (self.list.y >= max_recs) {
	    self.list.y = 0;
	}
	else if (self.list.y < 0) {
	    self.list.y = max_recs-1;
	}
	var row = null; 
	var prevRow = null;
	if (nam_state != 'state-open-record') {
	   row = $('.table-body tr', self.div)[self.list.y];
	   prevRow = $('.table-body tr',self.div)[prevCellY];
	   $($('td',prevRow)[prevCellX+1]).removeClass('highlighted-cell');
	   $($('td',row)[self.list.x+1]).addClass('highlighted-cell');

	}
	else {
	   row = $('#open-record .edit-row-field')[self.list.x];
	   prevRow = $('#open-record .edit-row-field')[prevCellX];
	   $('span',prevRow).removeClass('highlighted-row');
	   $('span', row).addClass('highlighted-row');
	}
	
    }
    this.moveToCell = function(x, y) {
       row = $('.table-body tr',self.div)[self.list.y];
       $($('td',row)[self.list.x+1]).removeClass('highlighted-cell');
	self.list.x = 0;
	self.list.y = 0;
	self.moveCell(x,y);
    }
    this.editCell = function() {
      if (nam_auth()) {
	  var value = self.list.currentRecord().getFieldValue(self.list.currentColumn());
	  var cell = self.currentNamCell();
	  var back = $(".highlighted-cell").css("background-color");

	  var file_types = ['image','audio']; 
	  if (_.detect(file_types, function (type){return self.list.currentColumn().type == type} )) {
	      log($.address.baseURL());
              var inputElement = $('<input type="file" id="upload-file" onchange="handleFiles(this.files)" />'); 
	      cell.html(inputElement);
	      inputElement.focus();
	  }
	  else {
	      cell.html("<input type='text' id='text-edit' value='"+value+"' style='background:"+back+";'/>");
	      $('#text-edit').focus();
	  }

	  setState('state-edit-quick');
      }
    }
    this.currentNamCell = function() {
	var row = $('.table-body tr',self.div)[self.list.y];
	return $($('div',row)[self.list.x]);
    }

    
    
}