﻿function PM_Register(containerName, element, nullMessage, regex, notMatchMessage){
    this.containerName = containerName;
    this.container = (this.containerName == null) ? document.body : document.getElementById(this.containerName);
    this.elem = document.getElementById(element);
    this.nullMessage = nullMessage;
    this.regex = regex;
    this.notMatchMessage = notMatchMessage;
    var pm = this;
    
    //setup message layer
    this.MsgDiv = document.getElementById('divPopMsg'+ this.containerName);
    if(this.MsgDiv == null){
        this.MsgDiv = document.createElement("div");
        this.MsgDiv.id = 'divPopMsg'+ this.containerName;
        this.MsgDiv.style.position = "absolute";
        this.MsgDiv.style.visibility = 'hidden';//visible
    }
    
    //append child
    var parent = this.elem.parentNode;
    parent.appendChild(this.MsgDiv);
    
    this.elem.onfocus = function(){
        pm.OnFocus();
    }
    
    this.elem.onkeyup = function(){
        pm.OnFocus();
    }
}
PM_Register.prototype.OnFocus = function(){
	this.Check();
}
PM_Register.prototype.LostFocus = function(){
	this.Check();
}
PM_Register.prototype.Check = function(){
	if(this.elem){
	    var val = this.elem.value;
	    if(val == ''){
	        this.elem.focus();
	        this.PopupMessageLayer(this.nullMessage);
	        return false;
	    }else if(this.regex != null){
	        var re = new RegExp(this.regex, 'ig');
	        if(!re.test(val)){
	            this.elem.focus();
	            this.PopupMessageLayer(this.notMatchMessage);
	            return false;
	        }
	    }
	}
	this.SetBackgroudColor('#FFFFFF');
	this.MsgDiv.style.visibility = 'hidden';
	return true;
}
PM_Register.prototype.SetBackgroudColor = function(color){
    this.elem.style.backgroundColor = color;
}
PM_Register.prototype.AbsPos = function (el){
	for (var lx=0,ly=0;el!=null;lx+=el.offsetLeft,ly+=el.offsetTop,el=el.offsetParent);
	return {x:lx,y:ly}
}
PM_Register.prototype.HtmlControlBody = function(){
    var html = '<table border="0" cellspacing="0" cellpadding="0"><tr>'+
    '<td valign="top" width="14"><img src="/base/images/pm.nav.gif" vspace="10" align="absmiddle" style="position:absolute;" /></td>'+
    '<td style="border:1px solid #333333;background-color:#FFFACD;">'+
        '<table border="0" cellspacing="0" cellpadding="4"><tr>'+
        '<td valign="top"><img src="/base/images/pm.alert.gif" align="absmiddle" /></td>'+
        '<td valign="top" style="line-height:18px;padding-top:15px;padding-bottom:15px;">{$Message}</td>'+
        '<td valign="top"><img src="/base/images/pm.close.gif" align="absmiddle" style="cursor:pointer" onclick="document.getElementById(\'divPopMsg'+ this.containerName +'\').style.visibility=\'hidden\'" /></td>'+
        '</tr></table>';
    '</td></tr></table>';
    
    return html;
}
PM_Register.prototype.PopupMessageLayer = function(msg){
    this.SetBackgroudColor('#FFFACD');
    
    var outstr = this.HtmlControlBody();
    outstr = outstr.replace(/\{\$Message\}/ig, msg);
    
    var pos_elem = this.AbsPos(this.elem);
    var pos_cntr = this.AbsPos(this.container);
    var width = this.elem.clientWidth;
    this.MsgDiv.style.left = pos_elem.x + width - pos_cntr.x;
    this.MsgDiv.style.top = pos_elem.y - 5 - pos_cntr.y;
    this.MsgDiv.style.visibility = 'visible';
    this.MsgDiv.innerHTML = outstr;
}