$.fn.inputBox = function(){
    return this.each(function(){
        var w = $(this).css('width');
        w = (/[0-9]*px/i.test(w)) ? parseInt(w) : 225;
		
		/*
		 * Valores por defecto
		 */
        var opt = {
            'height': 26,
            'width': w,
            'textAlign': 'left',
			
			'img': 'url(img/i2bforms/bg_input.gif)',
			'imgError': 'url(img/i2bforms/bg_input_error.gif)',
			'cornerRadius': 4
        }
        if ($(this).attr('opt')) {
            $.extend(opt, eval('(' + $(this).attr('opt') + ')'));
        }
        
        var input = $(this).css({
            border: 'none',
			background: 'transparent',
			textAlign: opt.textAlign,
            width: opt.width - (opt.cornerRadius * 2),
			display: 'block',
			margin: '-'+opt.cornerRadius+'px 0px'
        });
        var container = input.parent();
        	
		/*
		 * Estilos para las esquinas
		 */	
		var estilosEsquinas = {
			backgroundImage: opt.img,
			width: opt.cornerRadius+'px',
			height: opt.cornerRadius+'px',
			fontSize: '1px'
		};
		
		/*
		 * Construccion de tabla base
		 */
		var tabla = $('<table></table>').appendTo(container).css({
			borderCollapse: 'collapse',
			'float': 'left',
			position: 'relative',
			height: opt.height,
			width: opt.width
		});
		var tbody = $('<tbody></tbody>').appendTo(tabla);
		
		//Fila superior
		var trTop = $('<tr></tr>').appendTo(tbody);
		
		//Esquina superior izquierda
		var tdTopLeft = $('<td></td>').appendTo(trTop).css(estilosEsquinas).css({
			backgroundPosition: '0px 0px'
		});
		//Top
		var tdTop = $('<td></td>').appendTo(trTop).css({
			backgroundImage: opt.img,
			backgroundPosition: '-'+ opt.cornerRadius+'px 0px'
		});
		//Esquina superior derecha
		var tdTopRight = $('<td></td>').appendTo(trTop).css(estilosEsquinas).css({
			backgroundPosition: 'right 0px'
		});
		
		//Fila principal
		var trMain = $('<tr></tr>').appendTo(tbody);
		
		//Left
		var tdMainLeft = $('<td></td>').appendTo(trMain).css({
			backgroundImage: opt.img,
			backgroundPosition: '0px -'+opt.cornerRadius+'px'	
		});
		
		//Centro
		var tdMainCenter = $('<td></td>').appendTo(trMain).css({
			backgroundImage: opt.img,
			backgroundPosition: '-'+opt.cornerRadius+'px -'+opt.cornerRadius+'px'		
		});
		
		//Right
		var tdMainRight = $('<td></td>').appendTo(trMain).css({
			backgroundImage: opt.img,
			backgroundPosition: 'right -'+opt.cornerRadius+'px'
		});
		
		//Fila inferior
		var trBottom = $('<tr></tr>').appendTo(tbody);
		
		//Esquina inferior izquierda
		var tdBottomLeft = $('<td></td>').appendTo(trBottom).css(estilosEsquinas).css({
			backgroundPosition: 'bottom left'
		});
		
		//Bottom
		var tdBottom = $('<td></td>').appendTo(trBottom).css({
			backgroundImage: opt.img,
			backgroundPosition: '-'+opt.cornerRadius+'px bottom'
		});
		
		//Esquina inferior derecha
		var tdBottomRight = $('<td></td>').appendTo(trBottom).css(estilosEsquinas).css({
			backgroundPosition: 'bottom right'
		});
		      	  
		/*
		 * Se agrega el input a la tabla
		 */
        input.appendTo(tdMainCenter).val(this.value);
		
		
		/*
		 * -------
		 * Metodos
		 * -------
		 */
		this.enableError = function() {
			tdTopLeft.css('backgroundImage', opt.imgError);
			tdTop.css('backgroundImage', opt.imgError);
			tdTopRight.css('backgroundImage', opt.imgError);
			tdMainLeft.css('backgroundImage', opt.imgError);
			tdMainCenter.css('backgroundImage', opt.imgError);
			tdMainRight.css('backgroundImage', opt.imgError);
			tdBottomLeft.css('backgroundImage', opt.imgError);
			tdBottom.css('backgroundImage', opt.imgError);
			tdBottomRight.css('backgroundImage', opt.imgError);
		};
		
		this.disableError = function() {
			tdTopLeft.css('backgroundImage', opt.img);
			tdTop.css('backgroundImage', opt.img);
			tdTopRight.css('backgroundImage', opt.img);
			tdMainLeft.css('backgroundImage', opt.img);
			tdMainCenter.css('backgroundImage', opt.img);
			tdMainRight.css('backgroundImage', opt.img);
			tdBottomLeft.css('backgroundImage', opt.img);
			tdBottom.css('backgroundImage', opt.img);
			tdBottomRight.css('backgroundImage', opt.img);
		};
		
    });
};