var mouseOnFloaterFlag = false;
var mouseOnItem = false;
var canShowFloater = true;

(function( $ ){
  $.fn.grid = function(options ) {
  
	var ico = 'page';
	var settings = {
      'cols' : ''
    };

    if ( options ) { 
      $.extend( settings, options );
    }
    var entityName = settings['entity'];
    var colNames = settings['colNames'];
    var colModel = settings['colModel'];
     
    var padding = settings['cellPadding'];
    var gridBodyHeight = settings['bodyHeight'];
    var _height = '';
    if(gridBodyHeight){
    	_height = 'height: '+gridBodyHeight+'px; ';
    }
    var dir = settings['direction'];
    var paintRows = false;
    if(settings['paintRows'])
    	paintRows = settings['paintRows'];
    
    if(settings['ico'])
    	ico = settings['ico'];
    
    var url = settings['url'];
    var gridWidth = 17;
    
    var colCount = colNames.length;
    
    for(var i=0; i<colCount; i++){
    	gridWidth += colModel[i].width+1 + padding*2;
    }
    			    
    $(this).css('width',gridWidth+'px');
    
    var html = '';
	html += '<table class="grid" style="width:'+gridWidth+'px" dir="ltr" cellpadding="0" cellspacing="0" border="0">';		      
	html += '<tr valign="top">';
	html += '<td style="border-top:none; border-right:none; border-left:none;" class="gridHead">';
	html += '<div id="frame1">';
	html += '<table align="left" cellspacing="0" cellpadding="0" dir="'+dir+'" border="0">';
	html += '<tr id="headTr" valign="top">';

	// head columns
	for(var i=0; i<colCount; i++){
		html += '<td class="col head" style="border-left:none; border-top:none; border-bottom:none; overflow:hidden; width:'+colModel[i].width+'px;">';
		html += '<div class="colInner" style="padding: '+padding+'px; overflow:hidden; width:'+colModel[i].width+'px;">'+buildHeadCellValueElement(colNames[i])+'</div>';
		html += '</td>';
	}
	html += '</tr>';
	html += '</table>';
	html += '</div>';
	html += '</td>';
	html += '</tr>';
	html += '<tr valign="top">';
	html += '<td>';
	html += '<div id="frame2" style="'+_height+'overflow-x: hidden; overflow-y:auto; ">';
	html += '<table align="left" id="mainTable" cellspacing="0" cellpadding="0" dir="'+dir+'" class="mainTable" border="0">';
	 
	var data = getGridData(url);
	var border = 'border-top:none;';
	var borderSide = 'border-left:none;';
	var rows = data.rows;
	var paintFlag = false;

	// data rows
	for(var i=0; i<rows.length; i++){
		var id = rows[i].id; 
		var cols = rows[i].row;
		if(i==rows.length-1){
			border = 'border-top:none; border-bottom:none; ';
		}
		html += '<tr onclick="if(typeof gridRowSelected == \'function\'){gridRowSelected('+id+');}" onmouseout="leaveRow(this);" onmouseover="enterRow(this,\''+entityName+'\','+id+');" class="gridRow" valign="top">';
		
		// data cols
		for(var j=0; j<colCount; j++){
			html += buildCell(paintRows && paintFlag, cols[j], colModel[j], padding, border, borderSide,j==0, ico);
		}
		html += '</tr>';
		paintFlag = !paintFlag;
	}
	
	html += '</table>';
	html += '</div>';
	html += '</td>';
	html += '</tr>';
	html += '</table>';
	 
	$(this).html(html);
	
  };
})( jQuery );

function buildCell(paintFlag, col, colModel, padding, border, borderSide, isDefaultCol,ico){
	
	var html='';
	var painted = ''; 
	if(paintFlag==true){
		painted = 'paintedRow ';
	}
	
	html += '<td class="'+painted+'col'+(isDefaultCol?" defaultCol":"")+'" style="'+border+borderSide+'overflow:hidden; width:'+colModel.width+'px;">';
	html += '<div class="colInner" style="padding: '+padding+'px; overflow:hidden; width:'+colModel.width+'px;">';
	if(isDefaultCol){
		html += '<img style="float:right;" width="24" height="24" src="res/media/'+ico+(painted?'g':'w')+'.jpg" alt="">';
		html += '<div style="width:'+(colModel.width-30)+'px; float:right;">';
		html += buildCellValueElement(col,painted);
		html += '</div>';
		html += '<br style="clear:both;"/>';
	}else{
		html += buildCellValueElement(col,painted);
	}
	html += '</div>';
	html += '</td>';
	return html;
}

function buildCellValueElement(val,painted){
	var html = '<div>';
	//html += '<input title="'+val+'" readonly="readonly" class="'+painted+'colInput" value="'+val+'">';
	html += '<div style="margin-right:5px;" class="'+painted+'">'+ val + '</div>';
	html += '</div>';
	return html;
}

function buildHeadCellValueElement(val){
	var html = '<div><a class="headText">'+val+'</a>';
	return html;
}

function getGridData(url){
	var data;
	$.ajax({
      url: url,
      global: false,
      type: 'POST',
      dataType: 'json',
      success: function(_data){
	    data = _data;
	  },
      error: function(XMLHttpRequest, textStatus, errorThrown){
	    alert(errorThrown);
	  },
      async: false
	});
   return data;
}

function enterRow(tr,entityName,entityId){
}

function leaveRow(tr){
}