@model GODATA.Models.Inventory.ManageOwner
<script type="text/javascript">
    $(document).ready(function () {
        //$(document).tooltip();
        //$("#product").kendoTooltip({
        //    filter: "img",
        //    content: kendo.template($("#template").html()),
        //    width: 160,
        //    height: 70,
        //    position: "top"
        //});

        //$("#product").find("img").click(false);
        // Tooltip only Text
        $('.masterTooltip').hover(function () {
            // Hover over code
            var title = $(this).attr('title');
            $(this).data('tipText', title).removeAttr('title');
            $('<p class="tooltip"></p>')
            .text(title)
            .appendTo('body')
            .fadeIn('slow');
        }, function () {
            // Hover out code
            $(this).attr('title', $(this).data('tipText'));
            $('.tooltip').remove();
        }).mousemove(function (e) {
            var mousex = e.pageX + 20; //Get X coordinates
            var mousey = e.pageY + 10; //Get Y coordinates
            $('.tooltip')
            .css({ top: mousey, left: mousex })
        });
        var custom_options = {
            dataMask: true,
            watchDataMask: false,
            watchInputs: false,
            clearIfNotMatch: true,
            placeholder: "RJ-14-PA-01234",
            translation: {
                A: { pattern: /[0-9]/ },
                B: { pattern: /[A-Za-z0-9]/, optional: true },
                C: { pattern: /[A-Za-z]/, optional: true },
                D: { pattern: /[0-9]/, optional: true },
                E: { pattern: /[A-Za-z]/ }
            }, onKeyPress: function (cep, event, currentField, options) {
                var letters = /^[A-Za-z]+$/;
                if (currentField.cleanVal().length >= 2) {
                    var currentVal = currentField.cleanVal()[4];
                    if ((isAlphaOrParen(currentField.cleanVal()[2])) == true || (isAlphaOrParen(currentVal) == true)) {
                        $('.placeholder').mask("EE-BB-CC-AAAAD", custom_options);
                    }
                    else if (isAlphaOrParen(currentVal) == false && currentField.cleanVal().length <= 7) {
                        $('.placeholder').mask("EE-AAAAD", custom_options);
                    }
                    else {
                        $('.placeholder').mask("EE-BB-CC-AAAAD", custom_options);
                    }
                }
            },
            onChange: function (cep) {
               // console.log('cep changed! ', cep);
            },
            onBlur: function (val) {

            },
            onInvalid: function (val, e, f, invalid, options) {
                var error = invalid[0];
            }
        };

        $('.placeholder').mask("CC-BB-CC-AAAAD", custom_options);
        if ($('.placeholder').cleanVal().length == 6 || $('.placeholder').cleanVal().length == 7) {
            $('.placeholder').mask("CC-AAAAD", custom_options);
        }
        else {
            $('.placeholder').mask("CC-BB-CC-AAAAD", custom_options);
        }

        function GetUnmaskedValue() {
            return $('.placeholder').cleanVal();
        }
        function isAlphaOrParen(str) {
            return /^[a-zA-Z()]+$/.test(str);
        }





    });
</script>
<div class="tooltip" >
     @Html.TextBox(Convert.ToString(ViewData["name"]), ViewData["RegNo"], new { @class = "placeholder", @id = @ViewData["id"], @onblur = @ViewData["BlurFunction"], @name = @ViewData["name"], @style = "text-transform: uppercase;" })    
</div>
<div class="tooltip" id="mozilatip" style="position:relative">
   <img id="img_help" src="~/Content/css/images/help_favicon.png" height="20" width="20"  alt="help" />
    <span id="spanRegistrationToolTip" style="text-align:left !important;">
        Ex:RJ-07-SA-12345,<br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;RJ-07-SA-1234,<br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;RJ-0123,<br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;RJ-01234
    </span>
</div>

<style type="text/css">
    div.tooltip span {
    border-radius: 4px;
    box-shadow: 5px 5px 8px #ccc;
    margin-left: -2px;
    margin-top: -10px; 
    width: 122px;
    position: absolute;
    z-index:99999;
}
</style>
@*</div>*@
@*<p><a href="#" class="showTip L4"><img src="~/Content/css/images/help_favicon.ico" alt="help" ></a></p>*@