/// <reference path="jquery-1.3.1.min-vsdoc.js" />
/// <reference path="jquery.manglar-vsdoc.js" />

$(document).ready(function () {
    var form = new RegisterForm();
    $("#formulario").append(form.getElement());
});

function RegisterForm() {
    var form = new Element("form", { "class": "form", method: "POST", action: "http://www.manglar.com/email.aspx" });
    var nombre = new Element("input", { type: "text", name: "Nombre" });
    var apellido = new Element("input", { type: "text", name: "Apellido" });
    var id = new Element("input", { type: "text", name: "Identificacion" });
    var tipoIdentificacion = new Element("select", { name: "TipoIdentificacion" });
    $(tipoIdentificacion).append(new Element("option", { text: "Cedula" }));
    $(tipoIdentificacion).append(new Element("option", { text: "Tarjeta de Identidad" }));
    $(tipoIdentificacion).append(new Element("option", { text: "Pasaporte" }));
    $(tipoIdentificacion).append(new Element("option", { text: "Otro" }));
    var nacionalidad = new Element("input", { type: "text", name: "Nacionalidad" });
    var profesion = new Element("input", { type: "text", name: "Profesion" });
    var empresa = new Element("input", { type: "text", name: "Empresa" });
    var cargo = new Element("input", { type: "text", name: "Cargo" });
    var direccion = new Element("input", { type: "text", name: "Direccion" });
    var pais = new Element("input", { type: "text", name: "Pais" });
    var ciudad = new Element("input", { type: "text", name: "Ciudad" });
    var telefono = new Element("input", { type: "text", name: "Telefono" });
    var celular = new Element("input", { type: "text", name: "Celular" });
    var email = new Element("input", { type: "text", name: "Email" });
    var numeroConsignacion = new Element("input", { type: "text", name: "NumeroConsignacion" });
    var valorConsignacion = new Element("input", { type: "text", name: "ValorConsignacion" });
    var fechaConsignacion = new Element("input", { type: "text", name: "FechaConsignacion", val: "mm/dd/aaaa" });
    //$(fechaConsignacion).dateBox(function (e) { $(e).valid() });
    var cursos = new Element("select", { name: "Curso" });
    $(cursos).append(new Element("option", { text: "Ninguno" }));
    $(cursos).append(new Element("option", { text: "Taxonomía de tiburones y rayas del Pacífico colombiano (Curso teórico-práctico)" }));
    $(cursos).append(new Element("option", { text: "Introduccion a la biologia de las rayas de agua dulce (Curso teórico-práctico)" }));
    $(cursos).append(new Element("option", { text: "El marcaje satelital como herramienta en estudios ecologicos (Curso teórico)" }));
    $(cursos).append(new Element("option", { text: "Técnicas cuantitativas para el análisis de poblaciones de peces explotados comercialmente (Curso práctico)" }));
    var asistente = new Element("input", { type: "checkbox", name: "Rol", val: "Asistente" });
    var poster = new Element("input", { type: "checkbox", name: "Rol", val: "Poster" });
    var estudiante = new Element("input", { type: "checkbox", name: "Rol", val: "Estudiante" });
    var profesional = new Element("input", { type: "checkbox", name: "Rol", val: "Profesional" });
    var ponente = new Element("input", { type: "checkbox", name: "Rol", val: "Ponente" });
    var submit = new Element("div", { "class": "button", text: "Enviar" });

    var infoSection = new Element("div", { "class": "section" });
    var info = new Table();
    info.addRow([{ value: new Label("Datos Personales"), options: { colspan: 4, align: "center", "class": "title"}}]);
    info.addRow([{ value: new Label("Nombre") }, { value: nombre }, { value: new Label("Apellido") }, { value: apellido}]);
    info.addRow([{ value: new Label("Identificación") }, { value: id }, { value: new Label("Tipo de Identificación") }, { value: tipoIdentificacion}]);
    info.addRow([{ value: new Label("Nacionalidad") }, { value: nacionalidad }, { value: new Label("Profesión") }, { value: profesion}]);
    info.addRow([{ value: new Label("Insitución o Empresa") }, { value: empresa }, { value: new Label("Cargo") }, { value: cargo}]);
    info.addRow([{ value: new Label("Dirección Completa") }, { value: direccion }, { value: new Label("País") }, { value: pais}]);
    info.addRow([{ value: new Label("Ciudad") }, { value: ciudad }, { value: new Label("Teléfono") }, { value: telefono}]);
    info.addRow([{ value: new Label("Móvil") }, { value: celular }, { value: new Label("Correo Electrónico") }, { value: email}]);
    $(infoSection).append(info.getElement());

    var moneySection = new Element("div", { "class": "section" });
    var money = new Table();
    money.addRow([{ value: new Label("Datos de Inscripción"), options: { colspan: 4, align: "center", "class": "title"}}]);
    money.addRow([{ value: new Label("No. Consignación") }, { value: numeroConsignacion }, { value: new Label("Fecha de Consignación") }, { value: fechaConsignacion}]);
    money.addRow([{ value: new Label("Valor Consignado") }, { value: valorConsignacion }, { value: "" }, { value: ""}]);
    $(moneySection).append(money.getElement());

    var eventSection = new Element("div", { "class": "section" });
    var event = new Table();
    event.addRow([{ value: new Label("Tomaría curso PreEncuentro?"), options: { colspan: 4, align: "center", "class": "title"}}]);
    event.addRow([{ value: new Label("Curso"), options: { align: "right", colspan: 2} }, { value: cursos, options: { colspan: 2}}]);
    $(eventSection).append(event.getElement());

    var personSection = new Element("div", { "class": "section" });
    var person = new Table();
    person.addRow([{ value: new Label("Categoría de Participación"), options: { colspan: 10, align: "center", "class": "title"}}]);
    person.addRow([{ value: new Label("Asistente") }, { value: asistente }, { value: new Label("Estudiante") }, { value: estudiante }, { value: new Label("Ponente") }, { value: ponente }, { value: new Label("Poster") }, { value: poster }, { value: new Label("Profesional") }, { value: profesional}]);
    $(personSection).append(person.getElement());

    var buttonSection = new Element("div", { "class": "buttons" });
    $(buttonSection).append(submit);

    $(form).append(infoSection);
    $(form).append(moneySection);
    $(form).append(eventSection);
    $(form).append(personSection);
    $(form).append(buttonSection);
    $(form).append(new Element("input", {type: "hidden", name: "SendTo", val: "info@squalus.org"}));
    $(form).append(new Element("input", {type: "hidden", name: "FormName", val: "Inscripcion Congreso"}));
    $(form).append(new Element("input", {type: "hidden", name: "Redirect", val: "http://www.squalus.org/encuentro2010/confirmacion.html"}));

    $(submit).click(function () { $(form).submit(); });

    this.getElement = function () { return form; }
    var rules = {
        Nombre: { required: true },
        Apellido: { required: true },
        Identificacion: { required: true },
        Nacionalidad: { required: true },
        Profesion: { required: true },
        Empresa: { required: true },
        Cargo: { required: true },
        Direccion: { required: true },
        Pais: { required: true },
        Ciudad: { required: true },
        Telefono: { required: true },
        Celular: { required: true },
        Email: { required: true, email: true },
        NumeroConsignacion: { required: true },
        FechaConsignacion: { required: true }
        //ValorConsignacion: { required: true }
    };

    var messages = {
        Nombre: { required: "Este campo es obligatorio." },
        Apellido: { required: "Este campo es obligatorio." },
        Identificacion: { required: "Este campo es obligatorio." },
        Nacionalidad: { required: "Este campo es obligatorio." },
        Profesion: { required: "Este campo es obligatorio." },
        Empresa: { required: "Este campo es obligatorio." },
        Cargo: { required: "Este campo es obligatorio." },
        Direccion: { required: "Este campo es obligatorio." },
        Pais: { required: "Este campo es obligatorio." },
        Ciudad: { required: "Este campo es obligatorio." },
        Telefono: { required: "Este campo es obligatorio." },
        Celular: { required: "Este campo es obligatorio." },
        Email: { required: "Este campo es obligatorio.", email: "Debe ser un email valido." },
        NumeroConsignacion: { required: "Este campo es obligatorio." },
        FechaConsignacion: { required: "Este campo es obligatorio." }
        //ValorConsignacion: { required: "Este campo es obligatorio." }
    };

    $(form).validate({ rules: rules, messages: messages, submitHandler: function () {
        form.submit();
    }
    });
}