(function ($) {

    $.fn.fondoCompleto = function (options) {

        //Devuelvo la instancia del contexto.
        return $(this).each(function (i, e) {

            //Referencias
            var _this = $(this),
            //Otras variables
                getImgTag = function (src) {
                    return $("<img />").attr("src", src);
                },
                getCotenedorImagen = function (direccion) {
                    var contenedor = $("<div></div>").addClass("contenedorFondoCompleto");
                    if (direccion == "x")
                        contenedor.css("display", "inline");
                    return contenedor;
                };

            //Opciones por defecto.
            options = $.extend({
                direccion: "x", //Puede ser "x" o "y" segun si es vertical o horizontal
                fin: "", //Imagen para la derecha o abajo
                medio: "", //Imagen que se repite entre principio y fin
                principio: "" //Imagen para la izquierda o arriba
            }, options);

            //Si nunca se le hizo este plugin
            if (_this.data("optionsFondoCompleto") == undefined) {
                //Creo el contenedor para la imagen de principio
                var principio = getCotenedorImagen(options.direccion);
                //Agrego la imagen de principio
                principio.append(getImgTag(options.principio)).addClass("principio");
                _this.before(principio);
                //Guardo el elemento contenedor
                _this.data("optionsFondoCompleto", {
                    principio: principio
                });

                //Creo el contenedor para la imagen de fin
                var fin = getCotenedorImagen(options.direccion);
                //Agrego la imagen de principio
                fin.append(getImgTag(options.fin)).addClass("fin");
                _this.after(fin);
                //Guardo el elemento contenedor
                _this.data("optionsFondoCompleto")["fin"] = fin;
            }
            else { //Si ya paso por este plugin y ahora se quieren cambiar las imagenes.
                _this.data("optionsFondoCompleto").principio.find("img").attr("src", options.principio);
                _this.data("optionsFondoCompleto").fin.find("img").attr("src", options.fin);
            }

            //Le pongo la imagen de fondo al elemento principal
            _this.css({
                "backgroundImage": "url(" + options.medio + ")",
                "backgroundRepeat": "repeat-" + options.direccion
            });


        });

    };

})(jQuery);