function SystemMessage(){
    
	/*
	 * public methods
	 */
	var activeElement;
	var errorClassName ='system-box error-box';
	var infoClassName = 'system-box info-box';
	var noteClassName = 'system-box note-box';

    this.setMessageContainer = function(newID){
        activeElement = document.getElementById(newID);
    }

    this.displayErrorMessage = function(msg){//display error message
        activeElement = this.replaceHtml(activeElement, '<div class="system-box-head"><h4></h4></div><div class="system-box-body"><img src="/assets/icons/silk/exclamation.png" width="16" height="16" alt="" />' + msg, errorClassName);
		window.scrollTo(0,document.body.scrollTop);
    }
	
	this.displayInfoMessage = function(msg){//display error message
		activeElement = this.replaceHtml(activeElement, '<div class="system-box-head"><h4></h4></div><div class="system-box-body"><img src="/assets/icons/silk/accept.png" width="16" height="16" alt="" />' + msg, infoClassName);
		//window.scrollTo(0,document.body.scrollTop);
    }

	this.displayNoteMessage = function(msg){//display error message
        activeElement = this.replaceHtml(activeElement, '<div class="system-box-head"><h4></h4></div><div class="system-box-body"><img width="16" height="16" alt="" src="/assets/icons/silk/information.png"/>' + msg, noteClassName);
		//window.scrollTo(0,document.body.scrollTop);
    }

	this.clearMessage = function(){//remove error message
		activeElement = this.replaceHtml(activeElement, '');
    }

    /* This is much faster than using (el.innerHTML = str) when there are many
     existing descendants, because in some browsers, innerHTML spends much longer
     removing existing elements than it does creating new ones. */
    this.replaceHtml = function(el, html,classname){
        var oldEl = (typeof el === "string" ? document.getElementById(el) : el);
        var newEl = document.createElement(oldEl.nodeName);
        // Preserve the element's id and class (other properties are lost)
        newEl.id = oldEl.id;
        //newEl.className = oldEl.className;
		newEl.className = classname;
        // Replace the old with the new
        newEl.innerHTML = html;
        oldEl.parentNode.replaceChild(newEl, oldEl);
        /* Since we just removed the old element from the DOM, return a reference
         to the new element, which can be used to restore variable references. */
		
		return newEl;
    }
}

function setupMandatoryFields(array){
	for (var i = 0; i < array.length; i++) {
		if(array[i].id != undefined) {
			array[i].on('invalid', function(){
				showSpecificMandatoryFieldError(this.id);
			});
			array[i].on('valid', function(){
				hideMandatoryFieldError(this.id);
			});
		}
	}
}

function hideMandatoryFieldError(fieldId){
	if (Ext.get(fieldId + '-div').dom.className == "row error") {
		Ext.get(fieldId + '-div').dom.className = "row";
		Ext.get(fieldId + '-label').dom.innerHTML = Ext.getCmp(fieldId).fieldLabel + ':';
	}
}

function showSpecificMandatoryFieldError(fieldId){
	Ext.get(fieldId + '-error').dom.innerHTML = Ext.get(fieldId + '-error').dom.innerHTML.replace(/This field/, 'The field ' + Ext.getCmp(fieldId).fieldLabel);
	if(Ext.get(fieldId + '-div').dom.className != "row error"){
		Ext.get(fieldId + '-div').dom.className = "row error";
		Ext.get(fieldId + '-label').dom.innerHTML = '<span><img src="/icons/exclamation.png" width="16" height="16" alt="" class="error-icon" />' + Ext.get(fieldId + '-label').dom.innerHTML + '</span></label>';
	}
}