<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxform_dhx_skyblue.css">
    <script src="../../codebase/dhtmlxcommon.js"></script>
    <script src="../../codebase/dhtmlxform.js"></script>
    <style>
        div#simpleLog {
            width: 500px;
            height: 200px;
            font-family: Tahoma;
            font-size: 11px;
            overflow: auto;
        }
        /* custom css for validate */
        .validate_magenta .dhxform_label,
        .validate_magenta .dhxform_select {
            color: magenta !important;
        }
        .validate_orange .dhxform_label,
        .validate_orange .dhxform_select {
            color: orange !important;
        }
    </style>
    <script>
var myForm,
formData,
logObj;
var customCss = {
    video_bitrate: "validate_magenta",
    video_codec: "validate_orange"
};
function doOnLoad() {
    formData = [{
        type: "settings",
        position: "label-left",
        labelWidth: 120,
        inputWidth: 160
    }, {
        type: "label",
        label: "New project"
    }, {
        type: "input",
        name: "project_name",
        label: "Project Name",
        value: "New project",
        validate: "NotEmpty"
    }, {
        type: "label",
        label: "Audio settings"
    }, {
        type: "select",
        name: "audio_format",
        label: "Format",
        validate: "ValidTime",
        options: [{
            text: "AAC",
            value: "AAC"
        }, {
            text: "AC3",
            value: "AC3",
            selected: true
        }, {
            text: "MP3",
            value: "MP3"
        }, {
            text: "FLAC",
            value: "FLAC"
        }]
        }, {
        type: "select",
        name: "audio_bitrate",
        label: "Bitrate",
        validate: "ValidTime",
        options: [{
            text: "128 kbps",
            value: "128"
        }, {
            text: "160 kbps",
            value: "160"
        }, {
            text: "256 kbps",
            value: "256"
        }, {
            text: "320 kbps",
            value: "320",
            selected: true
        }, {
            text: "448 kbps",
            value: "448"
        }]
        }, {
        type: "select",
        name: "audio_channels",
        label: "Channels",
        validate: "ValidTime",
        options: [{
            text: "2.0 Stereo",
            value: "2_0"
        }, {
            text: "5.1 Dolby Digital",
            value: "5_1",
            selected: true
        }]
        }, {
        type: "label",
        label: "Video settings"
    }, {
        type: "select",
        name: "video_codec",
        label: "Codec",
        validate: "NotEmpty",
        options: [{
            text: "DivX",
            value: "DivX"
        }, {
            text: "XviD",
            value: "XviD",
            selected: true
        }]
        }, {
        type: "select",
        name: "video_bitrate",
        label: "Bitrate",
        validate: "ValidTime",
        options: [{
            text: "728 kbps",
            value: "728"
        }, {
            text: "1226 kbps",
            value: "1226",
            selected: true
        }, {
            text: "2412 kbps",
            value: "2412"
        }]
        }, {
        type: "label",
        label: "Advanced"
    }, {
        type: "input",
        label: "Command line options",
        rows: 2,
        value: "-vf crop=618:526:0:14,pp=lb"
    }, {
        type: "label",
        label: "Backup Control"
    }, {
        type: "checkbox",
        label: "Create local backup",
        position: "label-right",
        list: [{
            type: "input",
            label: "Path",
            value: "/home/nakamuro/backups/"
        }]
        }, {
        type: "checkbox",
        label: "Copy backup to server",
        position: "label-right",
        list: [{
            type: "input",
            label: "Login",
            value: "nakamuro"
        }, {
            type: "password",
            label: "Password",
            value: "123"
        }]
        }, {
        type: "block",
        inputWidth: "auto",
        list: [{
            type: "button",
            value: "Validate",
            name: "doFormValidate"
        }, {
            type: "newcolumn"
        }, {
            type: "button",
            value: "Clear",
            name: "resetValidateData"
        }]
        }];
    myForm = new dhtmlXForm("myForm", formData);
    myForm.attachEvent("onButtonClick", function(name) {
        window[name]();
    });
    myForm.attachEvent("onBeforeValidate", function() {
        logEvent("onBeforeValidate called<br>");
    });
    myForm.attachEvent("onAfterValidate", function(status) {
        logEvent("onAfterValidate called, status: " + (status ? "true": "false") + "<br>");
    });
    myForm.attachEvent("onValidateSuccess", doCustomCss);
    myForm.attachEvent("onValidateError", doCustomCss);
}
function doFormValidate() {
    myForm.validate();
}
function resetValidateData() {
    myForm.resetValidateCss();
}
function doCustomCss(name, value, res) {
    if (name == "video_codec" || name == "video_bitrate") {
        var css = customCss[name];
        myForm.setValidateCss(name, res, css);
        logEvent("onValidate" + (res ? "Success": "Error") + " called, item '" + name + "', applynig custom css '" + css + "'<br>");
        return false;
    } else {
        logEvent("onValidate" + (res ? "Success": "Error") + " called, item '" + name + "'<br>");
    }
}
function logEvent(t) {
    if (!logObj)
        logObj = document.getElementById("simpleLog");
    logObj.innerHTML += t;
}
function clearLog() {
    if (!logObj)
        logObj = document.getElementById("simpleLog");
    logObj.innerHTML = "";
}</script>
 
 
    <table>
        <tr><td><div id="myForm"></div></td></tr>
        <tr><td><b>Log (<a href="javascript:void(0);" onclick="clearLog();">clear</a>)</b></td></tr>
        <tr><td><div id="simpleLog"></div></td></tr>
    </table>