/**
* This file introduces some function which enable a form to change mode from disabled to enable
* and back without changing HTML code. It changes text inputs to text nodes, replaces
* radio buttons and checkboxes with pictures and combox with currently selected values
*
* For all of this to work some restrictions hold. All components must have ids, and they must
* introduce some additional attributes like changeMode="yes|no" and mode="enable|disabled".
*/
    /**
    * Changes mode of the given form from disabled to enable and the other way around
    *
    * @param class frm form whose mode is about to be changed
    */
	function changeMode(frm)
	{
	    if (!frm)
	    {
	        return false;
	    }
	    
        if (frm.getAttribute("mode"))
	    {
	        var enable = !("enabled" == frm.getAttribute("mode"));
            setMode(frm, enable);
	    }
	    else
	    {
	        alert("Form must define a 'mode' attribute with value 'enabled' or 'disabled'.");
	    }
	}
	
	/**
	* Sets the mode of the form to enable variable
	*
	* @param class frm form class to be changed
	* @param bool enable new mode for this form
	*/
	function setMode(frm, enable)
	{   
	    if (!frm)
	    {
	        return false;
	    }
	    	    
	    if (frm.getAttribute("mode"))
	    {
	        if (enable)
	        {
	            frm.setAttribute("mode", "enabled");
	        }
	        else
	        {
	            frm.setAttribute("mode", "disabled");    
	        }
	    }
	    else
	    {
	        alert("Form must define a 'mode' attribute with value 'enabled' or 'disabled'.");
	    }	
	    
	    //handle inputs
		var els = document.getElementsByTagName("input");		
		for (var i = 0; i < els.length; i++)
		{
		    if ("yes" == els[i].getAttribute("changeMode")) 		        
		    {
                switch (els[i].type)
    			{
    				case "file":
                    case "text":
                        changeModeText(els[i], enable);
                        break;
                    case "password":
    					changeModePassword(els[i], enable);
    					break;
    				case "radio":
                        changeModeRadio(els[i], enable);
    					break;
    				case "checkbox":
    					changeModeCheck(els[i], enable);
    					break;
    			    case "button":
    			    case "submit":
    			    case "image":
    			    case "reset":
    					changeModeButton(els[i], enable);
    					break;
    			}
            }
		}
		
		//listboxes and combos
		var els = document.getElementsByTagName("select");		
		for (var i = 0; i < els.length; i++)
		{
		    if ("yes" == els[i].getAttribute("changeMode"))		        
		    {
			    changeModeSelect(els[i], enable);
			}
		}
		
		//textarea
		
		var els = document.getElementsByTagName("textarea");		
		for (var i = 0; i < els.length; i++)
		{
		    if ("yes" == els[i].getAttribute("changeMode"))
		    {
			    changeModeTextArea(els[i], enable);
			}
		}    
		
		var submit = document.getElementById("okBtn");
		changeModeButton(submit, enable);
        var cancel = document.getElementById("cancelBtn");
		changeModeButton(cancel, enable);                
		var reset = document.getElementById("resetBtn");
		changeModeButton(reset, enable);
        
		var print = document.getElementById("printBtn");
		changeModeButton(print, !enable);
		var back = document.getElementById("backBtn");
		changeModeButton(back, !enable);
		
	}
	
	/**
	* Changes mode for a button, image or submit button
	* 
	* @param class el element whose type is about to change
	* @param bool enable mode to which it is switched
	*/
	function changeModeButton(el, enable)
	{
	    if(el)
		{
	        el.style.display = (enable) ? "inline" : "none";	    
		}
	}
	
	
	/**
	* Changes mode for a text are
	* 
	* @param class el element whose type is about to change
	* @param bool enable mode to which it is switched
	*/
	function changeModeTextArea(el, enable)
	{
	    if (!enable)
		{
			var dis = document.getElementById(el.name + "_disabled_val");
			
			if (!dis)
			{
				dis = document.createElement("span");				
				dis.name = el.name + "_disabled_val";
				dis.id = dis.name;
				el.parentNode.insertBefore(dis, el);
			}
			else
			{
				dis.style.display = "inline";
			}		
			
			dis.innerHTML  = el.value;
			
			el.style.display = "none";
		}
		else
		{
			var dis = document.getElementById(el.name + "_disabled_val");
			
			if (dis)	
			{
				dis.style.display = "none";
			}
			
			el.style.display = "inline";
		}	
	}
	
	/**
	* Changes mode for a select boxes ... including multiple choices
	* 
	* @param class el element whose type is about to change
	* @param bool enable mode to which it is switched
	*/
	function changeModeSelect(el, enable)
	{
		if (!enable)
		{
			var dis = document.getElementById(el.name + "_disabled_val");
			
			if (!dis)
			{
				dis = document.createElement("span");				
				dis.name = el.name + "_disabled_val";
				dis.id = dis.name;
				el.parentNode.insertBefore(dis, el);
			}
			else
			{
				dis.style.display = "inline";
			}
			
			if (dis.firstChild)
			{
				dis.removeChild(dis.firstChild);
			}
			
			var str = "";
			if (el.multiple)
			{
				for (var i = 0; i < el.options.length; i++)
				{
					if (el.options[i].selected)
					{
						str += el.options[i].innerHTML + ", ";
					}
				}
				
				if (str.length > 0)
				{
					str = str.substring(0, str.length - 2);
				}
			}
			else
			{
			    if(el.selectedIndex!=-1)
				{
				    str = el.options[el.selectedIndex].innerHTML;
				}
			}
			
			//transfer all html if it happens to be anything more than pure text
			dis.innerHTML = str;
			
			el.style.display = "none";
		}
		else
		{
			var dis = document.getElementById(el.name + "_disabled_val");
			
			if (dis)	
			{
				dis.style.display = "none";
			}
			
			el.style.display = "inline";
		}	
	}
	
	/**
	* Changes mode for a text input
	* 
	* @param class el element whose type is about to change
	* @param bool enable mode to which it is switched
	*/
	function changeModeText(el, enable)
	{
		if (!enable)
		{
			var dis = document.getElementById(el.name + "_disabled_val");
			
			if (!dis)
			{
				dis = document.createElement("span");
				dis.appendChild(document.createTextNode(el.value));
				dis.name = el.name + "_disabled_val";
				dis.id = dis.name;
				el.parentNode.insertBefore(dis, el);
			}
			else
			{
				dis.style.display = "inline";
			}
            
            dis.innerHTML = el.value;
			
			el.style.display = "none";
		}
		else
		{
			var dis = document.getElementById(el.name + "_disabled_val");
			
			if (dis)	
			{
				dis.style.display = "none";
			}
			
			el.style.display = "inline";
		}
	}
    
    /**
	* Changes mode for a password input
	* 
	* @param class el element whose type is about to change
	* @param bool enable mode to which it is switched
	*/
	function changeModePassword(el, enable)
	{
		if (!enable)
		{
			var dis = document.getElementById(el.name + "_disabled_val");
			
			if (!dis)
			{
				dis = document.createElement("span");
				dis.appendChild(document.createTextNode(el.value));
				dis.name = el.name + "_disabled_val";
				dis.id = dis.name;
				el.parentNode.insertBefore(dis, el);
			}
			else
			{
				dis.style.display = "inline";
			}
            
            var starValue = "";
            
            for (i = 0; i < el.value.length; i++)
            {
                starValue += "*";
            }
            
            dis.innerHTML = starValue;
			
			el.style.display = "none";
		}
		else
		{
			var dis = document.getElementById(el.name + "_disabled_val");
			
			if (dis)	
			{
				dis.style.display = "none";
			}
			
			el.style.display = "inline";
		}
	}
	
	/**
	* Changes mode for a radio button
	* 
	* @param class el element whose type is about to change
	* @param bool enable mode to which it is switched
	*/
	function changeModeRadio(el, enable)
	{
		if (!enable)
		{
			var dis = document.getElementById(el.name + "_" + el.value + "_disabled_val");
			
			if (!dis)
			{
				dis = document.createElement("img");				
				dis.name = el.name + "_" + el.value + "_disabled_val";
				dis.id = dis.name;				
				el.parentNode.insertBefore(dis, el);
			}
			else
			{
				dis.style.display = "inline";
			}
			
			if (el.checked)
			{
				dis.src = KModeChange_radioOn_Img;
			}
			else
			{
				dis.src = KModeChange_radioOff_Img;
			}
			el.style.display = "none";
		}
		else
		{
			var dis = document.getElementById(el.name + "_" + el.value + "_disabled_val");
			
			if (dis)	
			{
				dis.style.display = "none";
			}
			
			el.style.display = "inline";
		}
	}
	
	/**
	* Changes mode for a check box
	* 
	* @param class el element whose type is about to change
	* @param bool enable mode to which it is switched
	*/
	function changeModeCheck(el, enable)
	{
		if (!enable)
		{
			el.className="disabled";
			var dis = document.getElementById(el.name + "_" + el.value + "_disabled_val");
			
			if (!dis)
			{
				dis = document.createElement("img");				
				dis.name = el.name + "_" + el.value + "_disabled_val";
				dis.id = dis.name;				
				el.parentNode.insertBefore(dis, el);
			}
			else
			{
				dis.style.display = "inline";
			}
			
			if (el.checked)
			{
				dis.src = KModeChange_checkOn_Img;				
			}
			else
			{
				dis.src = KModeChange_checkOff_Img;			
			}
			el.style.display = "none";
		}
		else
		{
			var dis = document.getElementById(el.name + "_" + el.value + "_disabled_val");
			
			if (dis)	
			{
				dis.style.display = "none";
			}
			
			el.className="normal";
			el.style.display = "inline";
		}
	}