$(document).ready(function() {

	makeManualGrid = function(obj){
		_id  = obj.id;
		_tab = obj.attr;
		cell2 = parseInt(obj.cell2);
		width = obj.width;
		height = obj.height;
		model = obj.model;

		_max = 1000;
		if(cell2 > 0){
			_max = cell2;
		}
				
		_nId = '#'+_id;
		_aClass = $(_nId).attr('class');
		$(_nId).removeAttr('class').addClass(_aClass+' manualGrid');
		_jCel = parseInt(_tab.length);

		width = parseInt(width);
		height = parseInt(height);
		
		if(width === 0){
			width = 500;
		}
		if(height === 0){
			height = 200;
		}
		
		_manWidth = 0;
		for(i = 0; i < _jCel; i++){
			_manWidth = _manWidth + (parseInt(_tab[i].size) + 24);
		}
		
		_manWidth2 = 0;
		if(cell2 > 0){
			for(ii = cell2; ii < _jCel; ii++){
				_manWidth2 = _manWidth2 +(parseInt(_tab[ii].size) + 24);
			}
			_float = '; float: left';
		}
		
		_manWidth = _manWidth - _manWidth2;
		width2 = width - _manWidth2;
		
		if(_manWidth < width2){
			_manWidth = width2;
		}
		
		_widthHead = width + 2;
		if(cell2 > 0){
			_widthHead = _widthHead + 2;
		}

		_headIcon = '<table id="_hedMan'+_id+'" class="_ManHeader" width="'+_widthHead+'px">';
		if(model !== 'view'){
			_headIcon+= '<tr><td><input type="button" class="_manTambahItem'+_id+' add" value="Tambah Item"></td></tr>';
		}
		_headIcon+= '</table>';
		$(_nId).before(_headIcon);
		$(_nId).remove();
		
		_createTab = '<table cellpadding="0" cellspacing="0"><tr><td>';
		_createTab+= '<div style="width: '+width2+'px; overflow: auto; min-height: '+height+'px; border: 1px solid #cfcfcf; background-color: #fff">';
		_createTab+= '<table id="'+_id+'" width="'+_manWidth+'px" class="manualGrid"><thead></thead><tbody></tbody></table>';
		_createTab+= '</div>';
		_createTab+= '</td>';
		if(cell2 > 0){
			_createTab+= '<td>';
			_createTab+= '<div style="width: '+_manWidth2+'px; overflow: auto;; min-height: '+height+'px; border: 1px solid #cfcfcf; background-color: #fff">';
			_createTab+= '<table id="'+_id+'_2" width="'+_manWidth2+'px" class="manualGrid"><thead></thead><tbody></tbody></table>';
			_createTab+= '</div>';
			_createTab+= '</td>';
		}
		_createTab+= '</tr>';
		_createTab+= '</table>';
		
		$('#_hedMan'+_id).after(_createTab);

		_tHead = '<tr>';
		if(cell2 > 0){
			_tHead2 = '<tr>';
		}
				
		for(i = 0; i < _jCel; i++){
			if(i < _max){
				_tHead+= '<th style="width: '+_tab[i].size+'px" >'+_tab[i].label+'</th>';
			}else{
				_tHead2+= '<th style="width: '+_tab[i].size+'px" >'+_tab[i].label+'</th>';
			}
		}

		_tHead+= '<th></th>';
		_tHead+= '</tr>';
		if(cell2 > 0){
			_tHead2+= '<th></th>';
			_tHead2+= '</tr>';
		}

		_trBody = _id+'_tr_body';
		if(cell2 > 0){
			_trBody2 = _id+'_tr_body_2';
		}
		
		$(_nId+' thead').html(_tHead);
		if(cell2 > 0){
			$(_nId+'_2 thead').html(_tHead2);
		}

		$(_nId+' tbody').html('<tr id="'+_trBody+'"></tr>');
		if(cell2 > 0){
			$(_nId+'_2 tbody').html('<tr id="'+_trBody2+'"></tr>');
		}
		
		_var_redonly = '';
		
		_no = 1;
		for(_aa = 0; _aa < obj.jum; _aa++){
				
			_dd = new Date;
			_idDef = _dd.setMilliseconds(192)+Math.floor((Math.random() * 9999) + 1000); ;
			_tDef = '<tr id="_td_'+_no+'" alt="true">';
			if(cell2 > 0){
				_tDef2 = '<tr id="_td_'+_no+'_2" alt="true">';
			}
			for(ii = 0; ii < _jCel; ii++){
				_celId = '_td_'+_no+'_'+parseInt(ii+1);
				_numVal = parseInt(ii);
				_Model = '';
				if(_tab[ii].read === true){
					_Model = 'readonly';
				}
				_DivSel = '';
				if(_tab[ii].sel === true){
					_DivSel = '<div id="sel_'+_celId+'" class="_sel_ManGrid _hide_manGrid" style="display: none"></div>';
				}
				if(ii < _max){
					_tDef+= '<td>';
					_tDef+= '<input '+_var_redonly+' type="'+_tab[ii].type+'" id="'+_celId+'" baris="'+_no+'" kolom="'+parseInt(ii+1)+'" class="inManGrid text inputGrid '+_tab[ii].cls+' '+_var_redonly+'" '+_Model+' model="'+_Model+'" name="'+_tab[ii].id+'['+_idDef+']" style="width: '+_tab[ii].size+'px" value="'+obj.data[_aa][_numVal]+'">'+_DivSel;
					_tDef+= '</td>';
				}else{
					_tDef2+= '<td>';
					_tDef2+= '<input '+_var_redonly+' type="'+_tab[ii].type+'" id="'+_celId+'" baris="'+_no+'" kolom="'+parseInt(ii+1)+'" class="inManGrid text inputGrid '+_tab[ii].cls+' '+_var_redonly+'" '+_Model+' model="'+_Model+'" name="'+_tab[ii].id+'['+_idDef+']" style="width: '+_tab[ii].size+'px" value="'+obj.data[_aa][_numVal]+'">'+_DivSel;
					_tDef2+= '</td>';
				}
			}
			_tDef+= '<td><input type="hidden" id="'+_idDef+'" value="'+_idDef+'"></td>';
			_tDef+= '<tr>';
			if(cell2 > 0){
				_tDef2+= '<td><input type="hidden" id="'+_idDef+'" value="'+_idDef+'"></td>';
				_tDef2+= '<tr>';
			}

			$('#'+_trBody).before(_tDef);
			if(cell2 > 0){
				$('#'+_trBody2).before(_tDef2);
			}
			$('#_td_'+_no+'_1').focus();

			for(i = 0; i < _jCel; i++){
				_celId = '_td_'+_no+'_'+parseInt(i+1);
				if(_tab[i].auto !== '' & _tab[i].auto !== false){
					$('#'+_celId).autoCompleteApank(
						{
							url : _tab[i].auto+_celId+'/',
							minCharacter: 1,
							size: _tab[i].size,
							width: 800,
							expSelect : true,
							model: 'manGrid',
						}
					);
				}
			}
			_no = _no + 1;
		}

		_trueMinBaris = function(_baris){
			if(_baris > 0){
				_baris = parseInt(_baris) - 1;
				_idBaris = '#_td_'+_baris;
				cek = $(_idBaris).attr('alt');
				if(cek === 'true'){
					return _idBaris;
				}else{
					return _trueMinBaris(_baris);
				}
			}else{
				return _truePlusBaris(_baris);
			}
		}
		
		_truePlusBaris = function(_baris){
			_baris = parseInt(_baris) + 1;
			_idBaris = '#_td_'+_baris;
			cek = $(_idBaris).attr('alt');
			if(cek === 'true'){
				return _idBaris;
			}else{
				return _truePlusBaris(_baris);
			}
		}
		
		if(obj.ins === 'true'){
			makeCreateTr = function(_no){
				if(model !== 'view'){
					_d = new Date;
					_idTbody = _d.setMilliseconds(192)+Math.floor((Math.random() * 9999) + 1000); ;

					_tBody = '<tr id="_td_'+_no+'" alt="true">';
					if(cell2 > 0){
						_tBody2 = '<tr id="_td_'+_no+'_2" alt="true">';
					}
					for(i = 0; i < _jCel; i++){
						_celId = '_td_'+_no+'_'+(parseInt(i) + 1);
						_Model = '';
						if(_tab[i].read === true){
							_Model = 'readonly';
						}
						_DivSel = '';
						if(_tab[i].sel === true){
							_DivSel = '<div id="sel_'+_celId+'" class="_sel_ManGrid _hide_manGrid" style="display: none"></div>';
						}
						if(i < _max){
							_tBody+= '<td>';
							_tBody+= '<input '+_var_redonly+' type="'+_tab[i].type+'" id="'+_celId+'" baris="'+_no+'" kolom="'+parseInt(i+1)+'" class="inManGrid text inputGrid '+_tab[i].cls+' '+_var_redonly+'" '+_Model+' model="'+_Model+'" name="'+_tab[i].id+'['+_idTbody+']" style="width: '+_tab[i].size+'px">'+_DivSel;
							_tBody+= '</td>';
						}else{
							_tBody2+= '<td>';
							_tBody2+= '<input '+_var_redonly+' type="'+_tab[i].type+'" id="'+_celId+'" baris="'+_no+'" kolom="'+parseInt(i+1)+'" class="inManGrid text inputGrid '+_tab[i].cls+' '+_var_redonly+'" '+_Model+' model="'+_Model+'" name="'+_tab[i].id+'['+_idTbody+']" style="width: '+_tab[i].size+'px">';
							_tBody2+= '</td>'+_DivSel;
						}
					}
					
					_tBody+= '<td><input type="hidden" id="'+_idTbody+'" value="'+_idTbody+'"></div></td>';
					_tBody+= '<tr>';
					if(cell2 > 0){
						_tBody2+= '<td><input type="hidden" id="'+_idTbody+'" value="'+_idTbody+'"></div></td>';
						_tBody2+= '<tr>';
					}

					$('#'+_trBody).before(_tBody);
					if(cell2 > 0){
						$('#'+_trBody2).before(_tBody2);
					}
					
					$('#_td_'+_no+'_1').focus();

					for(i = 0; i < _jCel; i++){
						_celId = '_td_'+_no+'_'+(parseInt(i) + 1);
						if(_tab[i].auto !== '' & _tab[i].auto !== false){
							$('#'+_celId).autoCompleteApank(
								{
									url : _tab[i].auto+_celId+'/',
									minCharacter: 1,
									size: _tab[i].size,
									width: 800,
									expSelect : true,
									model: 'manGrid',
								}
							);
						}
					}
					
					_year = _d.getFullYear();
					_year = parseInt(_year) + 5;
					$(".date").datepicker({
						changeMonth: true,
						changeYear: true,
						dateFormat: 'dd-M-yy', 
						yearRange: '1900:'+_year,
					});
					
					if(obj.funct === true){
						makeFuncApankGrid();
					}
				}
			}
			
			$('.contentDashboard').keyup(function(e){
				if(e.keyCode === 45){
					makeCreateTr(_no);
					_no = _no + 1;
				}
			})
			$('._manTambahItem'+_id).live('click', (function(e){
				makeCreateTr(_no);
				_no = _no + 1;
			}))
			makeFalse = function(id){
				// read  = $('#'+id).attr('readonly');
				// nClas = $('#'+id).attr('class');
				// nClas = nClas.replace('_active', 'readonly');
				// $('#'+id).attr('readonly', true);
				// $('#'+id).removeAttr('class').addClass(nClas);
				// $('#ui-datepicker-div').empty();
			}
			makeActive = function(id){
				// model = $('#'+id).attr('model');
				// if(model !== 'disabled'){
					// read  = $('#'+id).attr('readonly');
					// nClas = $('#'+id).attr('class');
					// if(read === 'readonly'){
						// nClas = nClas.replace('readonly', '_active');
						// $('#'+id).removeAttr('readonly');
					// }else{
						// nClas = nClas.replace('_active', 'readonly');
						// $('#'+id).attr('readonly', true);
					// }
					// $('#'+id).removeAttr('class').addClass(nClas);
				// }
			}
			setCursorToTextEnd = function(idFocus){
				$(idFocus).focus();
				var $thisVal = $(idFocus).val();
				$(idFocus).val('').val($thisVal);
				return this;
			}
			$('.inManGrid').live('keyup', (function(e){
				baris = $(this).attr('baris');
				kolom = $(this).attr('kolom');
				read  = $(this).attr('readonly');
				// if(read === 'readonly'){
					if(e.which === 37){	//left
						kolom = parseInt(kolom) - 1;
						idFocus = '#_td_'+baris+'_'+kolom;
						setCursorToTextEnd(idFocus);
						makeFalse(this.id);
					}
					if(e.which === 38){	//top
						idFocus = _trueMinBaris(baris)+'_'+kolom;
						setCursorToTextEnd(idFocus);
						makeFalse(this.id);
					}
					if(e.which === 39 || e.which === 13){	//right
						kolom = parseInt(kolom) + 1;
						idFocus = '#_td_'+baris+'_'+kolom;
						setCursorToTextEnd(idFocus);
						makeFalse(this.id);
					}
					if(e.which === 40){	//bottom
						idFocus = _truePlusBaris(baris)+'_'+kolom;
						setCursorToTextEnd(idFocus);
						makeFalse(this.id);
					}
				// }
				if(e.which === 13){	//true/false
					// makeActive(this.id);
					if(model !== 'view'){
						number_kol = parseInt(_jCel) + 1;
						inNo = parseInt(baris) + 1;
						if(number_kol === kolom & inNo === _no){
							makeCreateTr(_no);
							_no = _no + 1;
						}
					}
				}
				if(e.which === 46){	//delete
					cek = $('#_td_'+baris).attr('alt');
					if(cek === 'true'){
						var answer = confirm("Yakin Menghapus Data Ini?")
						if (answer){
							$('#_td_'+baris).remove();
							$('#_td_'+baris+'_2').remove();
							idFocus = _trueMinBaris(baris)+'_'+kolom;
						}else{
							idFocus = '#_td_'+baris+'_'+kolom;
						}
						setCursorToTextEnd(idFocus);
					}
				}
				if(e.which === 13){	//close
					$('.divApankAutocomplete').empty();
				}
			}))
		}
	}
})