/*---------------------------------------------------------------
       Purpose : Toggle Element's visibilty -> Show/Hide
    -----------------------------------------------------------------*/    
    function showHideElement(argElement){                
        argElement.style.display = (argElement.style.display =='none')?'block':'none';
    }
    
    /*--------------------------------------------------------------------
     Purpose : This function will move the div box directly under the
               reference element
    ---------------------------------------------------------------------*/   
    function moveDiv(argRef, argTarget, argSameWidth){
            
        var pos         = getPosition(argRef);
        var targetWidth = 0;

        argTarget.style.left = pos.x + argRef.offsetLeft + argRef.clientLeft  + 'px';
        argTarget.style.top  = pos.y + argRef.offsetHeight + 'px';
        if (argSameWidth == 'Y'){
            targetWidth = argRef.offsetWidth - argRef.offsetLeft - argRef.clientLeft;
            argTarget.style.width = (targetWidth <0)?0:targetWidth + 'px';    
        } 
    }
    
    /*--------------------------------------------------------------------
     Purpose : These two functions are used to retrieve the 
               <option> value/text respectively
    ---------------------------------------------------------------------*/
    function getSelectedOptionValue(argField, argText){
    
       for (var i=0; i<argField.length; i++){            
            if (argField.options[i].text == argText)               
               return argField.options[i].value;
       }
       return "";
    }
 
    function getSelectedOptionText(argField, argValue){
       
       for (var i=0; i<argField.length; i++){            
            if (argField.options[i].value == argValue)   {     
               return argField.options[i].text;}
       }
       return "";
    }
    
    function getSelectedOptionIndex(argField, argValue){
       
       for (var i=0; i<argField.length; i++){            
            if (argField.options[i].value == argValue)   {     
               return i;}
       }
       return "";
    }
       
    /*------------------------------------------------------------------------
     Purpose : Check if given form element is empty
     Input   : aTextField = Form Element
    ------------------------------------------------------------------------*/ 
    function isEmpty(aTextField) {
       var textVal = getValue(aTextField);
       return ((aTextField.value==undefined) || (textVal.length==0) );                                            
    }

    /*------------------------------------------------------------------------
     Purpose : Check for valid date field
     Input   : dateField = Form Element               
    ------------------------------------------------------------------------*/  
    function isDate(dateField)
    {        
        var dPart   = dateField.value.split("/");

        if(dPart.length==3){
            var myDate = new Date(dPart[2],dPart[1]-1,dPart[0]);

            if(!isNaN(myDate) && myDate.getDate()==dPart[0] &&
                myDate.getMonth()==dPart[1]-1 && myDate.getFullYear()== dPart[2]){
                return true;
            }
        }
        return false;
    }

    /*------------------------------------------------------------------------
     Purpose : Compare two different date fields
     Input   : dateField = Form Elements
     Output  :  1 - A greater B
               -1 - A smaller B
                0 - A equals B
    ------------------------------------------------------------------------*/ 
    function compareDate(dateFieldA, dateFieldB)
    {
        var dPartA = dateFieldA.value.split("/");
        var dPartB = dateFieldB.value.split("/");

        var dateA= new Date(dPartA[2], dPartA[1] -1, dPartA[0]);
        var dateB= new Date(dPartB[2], dPartB[1] -1, dPartB[0]);
        
        if (dateA > dateB){                
            return 1;
        }
        else if (dateA < dateB) {
            return -1;
        }    
        else {
            return 0;
        }
    }
    
    //----------------------------------------------------------------------
    //  Trim whitespace
    //-----------------------------------------------------------------------
    function trim(argText){
        return argText.replace(/^\s+|\s+$/g, '');  
    }

    /*------------------------------------------------------------------------
     Purpose : To show the selected Panel (for saving/updating of record)
     Input   : argTarget  - Panel to be opened, default "ifAction"
               argRef     - Content to be loaded, default "tblContent"
               argCover   - tblCover to 'block' background content, default "tblCover"               
               argZIndex  - zIndex for the 'tblCover' object
    ------------------------------------------------------------------------*/  
    function showPanel(argTarget, argRef, argCover, argZindex){       
        var target               = (argTarget == undefined)?parent.document.getElementById('ifAction'):argTarget;
        var ref                  = (argRef == undefined)?document.getElementById('tblContent'):argRef;
        var tblCover             = (argCover == undefined)?parent.document.getElementById('tblCover'):argCover;   
        tblCover.style.zIndex    = (argZindex == undefined)?tblCover.style.zIndex:argZindex;
        
        tblCover.height          = parent.document.body.offsetHeight;
        tblCover.width           = parent.document.body.offsetWidth;// + parent.document.body.offsetLeft;             
        tblCover.style.display   = 'block'; 
        
        if (document.getElementById('divMsgPanel'))
           document.getElementById('divMsgPanel').style.display    = 'none';        
        else if (parent.document.getElementById('divMsgPanel'))
           parent.document.getElementById('divMsgPanel').style.display    = 'none'; 
        else if (parent.parent.document.getElementById('divMsgPanel'))
           parent.parent.document.getElementById('divMsgPanel').style.display    = 'none';
         
        target.style.display        = 'block';                      
        resizeWindow(target, ref);           
    }
    
    /*------------------------------------------------------------------------
     Purpose : To hide the Selected Panel (for saving/updating of record)
     Input   : argTarget  - Panel to be opened, default "ifAction"
               argRef     - Content to be loaded, default "tblContent"
               argCover   - tblCover to 'block' background content, default "tblCover"               
               argZIndex  - zIndex for the 'tblCover' object
    ------------------------------------------------------------------------*/
    function hidePanel(argTarget, argRef, argCover, argZindex){  
        var target               = (argTarget == undefined)?parent.document.getElementById('ifAction'):argTarget;
        var ref                  = (argRef == undefined)?document.getElementById('tblContent'):argRef;
        var tblCover             = (argCover == undefined)?parent.document.getElementById('tblCover'):argCover;   

        tblCover.style.zIndex    = (argZindex == undefined)?tblCover.style.zIndex:argZindex; 
        tblCover.style.display   ='none'; 
        target.style.display     ='none';          
    }

    /*--------------------------------------------------------------------
     Purpose : To display the feedback message such as loading, saving
               at the upper right corner of the screen
    ---------------------------------------------------------------------*/
    function showMsgBox(argMsg){ 
        var msgBox     = null;

        if (document.getElementById('divMsgPanel')){
            msgBox     = document.getElementById('divMsgPanel');        
        }
        else if (parent.document.getElementById('divMsgPanel')){ //might called from child window - iframe
            msgBox     = parent.document.getElementById('divMsgPanel');            
        }
     
        if (msgBox) {
            msgBox.style.right     = '0px';
            msgBox.style.display   = 'block'; 
            msgBox.innerHTML       = '<strong>' + argMsg + '</strong>';
        }        
    }

    /*--------------------------------------------------------------------
     Purpose : To resize a window wrt to another reference obj size
    ---------------------------------------------------------------------*/   
    function resizeWindow(winObj, refObj){                
        winObj.height     = refObj.offsetHeight + 'px'; 
        winObj.width      = (refObj.offsetWidth + 0) + 'px';                          
 
        winObj.style.top  = parent.document.body.scrollTop + ((parent.document.body.offsetHeight  - refObj.offsetHeight ) * 0.25) + 'px'; 
        winObj.style.left = ((parent.document.body.offsetWidth  - refObj.offsetWidth ) * 0.5) + 'px'; 
  
    }

    /*--------------------------------------------------------------------
     Purpose : To hide the feedback message which appear  
               at the upper right corner of the screen
    ---------------------------------------------------------------------*/
    function hideMsgBox(){  
        if (document.getElementById('divMsgPanel'))      
            document.getElementById('divMsgPanel').style.display          = 'none';   
        else if (parent.document.getElementById('divMsgPanel'))
            parent.document.getElementById('divMsgPanel').style.display   = 'none';  
    }

    /*----------------------------------------------------------------------
     Purpose : This function convert and trim the value of given element 
               to uppercase
    -----------------------------------------------------------------------*/   
    function makeUpperCase(argElement){
        argElement.value = argElement.value.replace(/^\s+|\s+$/g, '').toUpperCase();   
    }
   
    /*------------------------------------------------------------------------
     Purpose : To find the absolute position of an element within the body
    ------------------------------------------------------------------------*/   
 
    function getPosition(e){
        var left = 0;
        var top  = 0;

        while (e.offsetParent){
                left += e.offsetLeft;
                top  += e.offsetTop;
                e     = e.offsetParent;
        }

        left += e.offsetLeft;
        top  += e.offsetTop;

        return {x:left, y:top};
    }

    function addFunctions(argFn1, argFn2){
        argFn1();argFn2();
    }

    /*-------------------------------------------------------------------------------
     Purpose : To initialize the given form's elements with specified events/attrib               
    ---------------------------------------------------------------------------------*/

    function initForm(argForm){

        var val        = "";
        var className  = "";
        var format     = "";
        var upperCase  = "";
        
        var allInputs  = argForm.getElementsByTagName('input');
        var allSelects = argForm.getElementsByTagName('select');
      
        for (var i=0; i < allSelects.length;i++){
            if (allSelects[i].className == 'cEditSel'){
                allSelects[i].onblur= function(){makeReadOnlySel(this);};                    
            }
        }//-- end for : allSelects
     
        for (var i=0; i < allInputs.length;i++){
        
            className = allInputs[i].className; 
            format    = allInputs[i].getAttribute('format');
            upperCase = allInputs[i].getAttribute('uppercase');
           
            switch (className){
                case 'cView':{
                    allInputs[i].readOnly = true;
                    allInputs[i].ondblclick=function(){makeEdit(this,'Y');};
                    allInputs[i].onblur= (upperCase=='yes')?function(){makeUpperCase(this);makeReadOnly(this);}:function(){makeReadOnly(this);};                   
                    break;                        
                }
                case 'cViewSel':{
                    allInputs[i].readOnly = true;
                    allInputs[i].ondblclick=function(){makeEditSel(this,'Y');};                    
                    break;
                }   
                case 'cViewOnly':{
                    allInputs[i].readOnly = true;
                    break;
                }   
            }
   
            if (format == 'currency' || format == 'percent' || format == 'integer' || format == 'double' || format == 'decimal' || format == 'positiveInt'){
                allInputs[i].style.textAlign = 'right';  
                
                if (!isEmpty(allInputs[i])){

                    val = getValue(allInputs[i]);

                    switch (format){
                        case 'currency':{                   
                            allInputs[i].onchange = function(){this.value = formatCurrency(this.value);};                            
                            allInputs[i].value    = formatCurrency(allInputs[i].value);
                            break;
                        }
                        case 'percent':{
                            allInputs[i].onchange = function(){this.value = formatPercent(this.value);};
                            allInputs[i].value    = formatPercent(allInputs[i].value);
                            break;
                        } 
                        case 'positiveInt':{
                            allInputs[i].onchange  = function(){this.value = formatNumber(this.value,0);};
                            allInputs[i].value     = formatNumber(allInputs[i].value);
                        }
                    }//-end switch
                }//-end Not empty
            }//-end if format
       
        }//-end for : allInputs
    }

    /*--------------------------------------------------------------------
     Purpose : To initialize the event handler for designated element               
    ---------------------------------------------------------------------*/

    function initTab(argTab){

        var tabHeaders = document.getElementById('tabHeaders').getElementsByTagName('div');    
        
        for(var i=0; i<tabHeaders.length; i++){
            if (tabHeaders[i].className == 'tabs')
                tabHeaders[i].onclick=function (){showTabContent(this);};
        }

        if (argTab.length > 0){
            showTabContent(document.getElementById(argTab));                        
        }
        
        document.getElementById('tabBorder').style.display = 'block';
    }

    /*--------------------------------------------------------------------
    Purpose : To display the selected tab content               
    ---------------------------------------------------------------------*/
            
    function showTabContent(argElement){    
     
        var tabHeaders  = document.getElementById('tabHeaders').getElementsByTagName('div');    
        var tabContents = document.getElementById('tabContents').getElementsByTagName('div');
        
        for(var i=0; i<tabHeaders.length; i++){
            if (tabHeaders[i].className =='tabs'){ 
                tabHeaders[i].className = "inactive_tab";
            }else if (tabHeaders[i].className =='tab_left'){
                tabHeaders[i].className = "inactive_tab_left";
            }else if (tabHeaders[i].className =='tab_right'){
                tabHeaders[i].className = "inactive_tab_right";       
            }
        }

        for(var i=0; i<tabContents.length; i++){
           if (tabContents[i].className =='content') 
                tabContents[i].style.display = 'none';
        }    
        
        var oContent                = document.getElementById(argElement.id + "Content");
        oContent.style.display      = 'block';
        argElement.className        = "tabs";
        document.getElementById(argElement.id + '_left').className   = "tab_left";
        document.getElementById(argElement.id + '_right').className  = "tab_right";
 
        //tblCover the bottom border of the selected tab
        var pos               = getPosition(argElement);         
        var tabBorder         = document.getElementById('tabBorder'); 
       
        tabBorder.style.width = argElement.offsetWidth + 10;  
        tabBorder.style.left  = pos.x - 4;
        tabBorder.style.top   = pos.y + argElement.offsetHeight ;               
    }

    /*--------------------------------------------------------------------
     Purpose : This two functions are used to achieve inline edit feature
               Applies to normal Text Box input field only
    ---------------------------------------------------------------------*/

    function makeEdit(argField, argFocus){                    
        argField.readOnly     = false;	
        argField.style.border = "1px dashed #7f9db9";			
        if (argFocus == 'Y')
            argField.select();		        
    }
	 
    function makeReadOnly(argField){	        
        argField.readOnly     = true;
        argField.style.border = "1px solid #7f9db9";
    }

    /*--------------------------------------------------------------------
     Purpose : This two functions are used to achieve inline edit feature
               Applies to normal <select> drop down box only
    ---------------------------------------------------------------------*/   

    function makeEditSel(argField, argFocus){  

        var fView   = argField;     
        var fEdit   = document.getElementById(fView.id.replace(/^txt/,'sel'));     
        var fHidden = document.getElementById(fView.id.replace(/^txt/,'hd'));
        
        fView.style.display ="none"; 
        fEdit.style.display ="block";        
        fEdit.selectedIndex    = getSelectedOptionIndex(fEdit,fHidden.value);
      
        if (argFocus =='Y')
            fEdit.focus();
    }
           
     function makeReadOnlySel(argField){  

        var fEdit   = argField;    
        var fView   = document.getElementById(fEdit.id.replace(/^sel/,'txt'));     
        var fHidden = document.getElementById(fEdit.id.replace(/^sel/,'hd'));
        
        fEdit.style.display="none"; 
        fView.style.display="block";
      
        fHidden.value = fEdit.value;
        fView.value   = getSelectedOptionText(fEdit, fEdit.value);

    }

    /*--------------------------------------------------------------------
     Purpose : This function makes the whole form to be [Read Only] 
               based on the subfunctions declared above.
    ---------------------------------------------------------------------*/

    function viewAll(argForm){

        var allInputs   = argForm.getElementsByTagName('input');
        var allSelects  = argForm.getElementsByTagName('select');

        for(var i = 0;i < allInputs.length; i++) {                          
            className   = allInputs[i].className;            
           
            if ( /^cView/.test(className)){               
                makeReadOnly(allInputs[i]);
            }
        }//-for   

        for(var i = 0;i < allSelects.length; i++) {                          
            className   = allSelects[i].className;            
            
            if (/^cEditSel/.test(className)){             
                makeReadOnlySel(allSelects[i]);
            }
        }//-for   
    }

    /*--------------------------------------------------------------------
     Purpose : This function makes the whole form to be [Editable] 
               based on the subfunctions declared above.
    ---------------------------------------------------------------------*/
            
    function editAll(argForm){           
      
        var className   = ""; 
        var allInputs   = argForm.getElementsByTagName('input');       
    
        for(var i = 0;i < allInputs.length; i++) {
            className   = allInputs[i].className;
            switch(className){
                case 'cView': {
                     makeEdit(allInputs[i],'N');      
                     break;
                 }
                 case 'cViewSel': {
                    makeEditSel(allInputs[i],'N');
                    break;
                 }
            }//-end switch            
        }
    }

    /*--------------------------------------------------------------------
     Purpose : To set the display value for all the drop down list box
               for a given form. Element with class 'cEditSel'
    ---------------------------------------------------------------------*/
    
    function loadSelectList(argForm){   
         
       var regX     = /^sel/;
       var oField   = "";
       var fView    = "";
       var fEdit    = "";
       var fHidden  = "";

       var allSelects = argForm.getElementsByTagName('select');     

       for (var i=0; i < allSelects.length; i++){   
            oField = allSelects[i];
            
            if ((/cEditSel/.test(oField.className)) && (oField.options.length >0)){                 
                fEdit   = oField;   
                fView   = argForm.parentNode.document.getElementById(fEdit.id.replace(/^sel/,'txt'));     
                fHidden = argForm.parentNode.document.getElementById(fEdit.id.replace(/^sel/,'hd'));                                                        
      
                if (fHidden.value){
                    fEdit.value     = fHidden.value;
                    fView.value     = getSelectedOptionText(fEdit, fHidden.value);
                }
                else{
                    fHidden.value   = fEdit.options[0].value;
                    fView.value     = fEdit.options[0].text;                     
                }
                //alert(fHidden.id + ' ' + fHidden.value + ' ' + fView.id + ' ' + fView.value);                
             }
        }
    }

    /*--------------------------------------------------------------------
     Purpose : This function clear all the validation message for the 
               whole form
    ---------------------------------------------------------------------*/            
     function clearAllMsg(){
            
        var oField      = "";
        var className   = "";
        var regXMsg     = /\_msg$/;        
                
        for(var i = 0;i < document.all.length; i++) {
            oField    = document.all[i];                
            className = document.all[i].className;

            if (regXMsg.test(oField.id)){
                oField.innerHTML = "&nbsp;";
            }

            if (className=="cView" || className=="cViewSel"){
                oField.style.backgroundColor = "#ffffff";
            }

        }//-for                         
     }