/*************************************************************************************

  ECubeInterfaceLibrary : a set of functions for creating dynamic interfaces
  
  It requires Utilities.js and EventHandlers.js
  
  
  functions:
  
  FUNCTION: ClearInputIfDefaultValue 
  ==================================
  
  clear the contents of input fields which have an attribute "defaultvalue" if the input is
  clicked and the value is identical to the defaultvalue. If you want you can also
  change the type of the input. For this you supply an attribute changeto with
  the required type
  
  FUNCTION: OpenTabSheet
  ======================
  
  image elements that have an attribute istabfor attempt to open the corresponding tabsheet
  (an element with id tabsheet_something where something is the value of istabfor for the 
  corresponding tab). if the tab has a ChangeImageSourceMouseOver behavior, set its source
  to _on as well (and the source of other tabs to "nothing")
  to figure out which other sheets are in the same group, get all html elements that have
  the same parent as the current element. if there's a behavior  (see below)
  ChangeImageSourceMouseOver , mouse over images are taken care of as well
  
  
  ================================================================================
  =                                                                              =
  =                             BEHAVIOR FUNCTIONS                               =      
  =                                                                              =
  =  These attach to specific tags and act based on an attribute "behaviors".    =
  =  This attribute contains a white space separated list of possible            =
  =  behaviors.                                                                  =
  =                                                                              =
  =                                                                              =
  ================================================================================
  
  FUNCTION: Behavior_ChangeImageSourceMouseOver
  =============================================
  
  change the source of an image to which the ChangeImageSourceMouseOver behavior
  is attached, but only if the source image name doesn't end in _on
  
*************************************************************************************/


// clear the contents of input fields which have an attribute "valuedefault" if the input is
// clicked and the value is identical to the valuedefault. If you want you can also
// change the type of the input. For this you supply an attribute changeto with
// the required type
function ClearInputIfDefaultValue(eventObject) {
    if(! this.getAttribute('valuedefault')) {
        return true;
    }
    var currentValue = this.value;
    if(! currentValue) {
        return true;
    };
    var defaultValue = this.getAttribute('valuedefault');
    if(! defaultValue) {
        return true;
    };
    if(currentValue == defaultValue) {
        this.value = '';
    };
    this.style.color = '#666666';
    return true;
}
tagListeners.addListenerForTag('input', 'onclick', ClearInputIfDefaultValue);


// image elements that have an attribute istabfor attempt to open the corresponding tabsheet (an
// element with id tabsheet_something where something is the value of istabfor for the 
// corresponding tab). if the tab has a ChangeImageSourceMouseOver behavior, set its source
// to _on as well (and the source of other tabs to "nothing")
// to figure out which other sheets are in the same group, get all html elements that have
// the same parent as the current element
function OpenTabSheet(eventObject) {
    if(! this.getAttribute('istabfor')) {
        return true;
    };
    var tabsheetWantedID = this.getAttribute('istabfor');
    tabsheetWantedID = 'tabsheet_' + tabsheetWantedID;
    var tabsheetWanted = document.getElementById(tabsheetWantedID);
    if(! tabsheetWanted) {
        return true;
    };
    // unfortunately we can't be sure how the display property of the
    // tabsheets are set. so set them to 'none' first
    var allTabs = this.parentNode.childNodes;
    for(var i = 0; i < allTabs.length ; i++) {
        var currentElement = allTabs[i];
        if(currentElement.tagName == 'IMG') {
            if(currentElement.getAttribute('istabfor')) {
                var tabsheet = document.getElementById('tabsheet_' + currentElement.getAttribute('istabfor'));
                tabsheet.style.display = 'none';
                // remove _on and _over from the source of the tab image
                // if necessary
                if(currentElement.getAttribute('behaviors')) {
                    if(currentElement.getAttribute('behaviors').match(/ChangeImageSourceMouseOver/)) {
                        var currentSource = currentElement.getAttribute('src');
                        if(currentSource.match(/_over\.[a-zA-Z]+$/)) {
                            currentSource = currentSource.replace(/_over\.([a-zA-Z]+)$/, '.$1');
                        };
                        if (currentSource.match(/_on\.[a-zA-Z]+$/)) {
                            currentSource = currentSource.replace(/_on\.([a-zA-Z]+)$/, '.$1');
                        };
                        currentElement.src=currentSource;
                    }
                }
            }
        };
    };
    // now open the requested tabsheet
    tabsheetWanted.style.display = 'block';
    // and set the source of the tab to _on if necessary
    if(this.getAttribute('behaviors')) {
        if(this.getAttribute('behaviors').match(/ChangeImageSourceMouseOver/)) {
            var imgSource = this.src;
            if(! imgSource) {
                return true;
            }
            if(imgSource.match(/_over\.[a-zA-Z]+$/)) {
                imgSource = newSource.replace(/_over\.([a-zA-Z]+)$/, '.$1');
            };
            if (! imgSource.match(/_on\.[a-zA-Z]+$/)) {
                    imgSource = imgSource.replace(/\.([a-zA-Z]+)$/, '_on.$1');
            };
            this.src=imgSource;
        }
    }
    return true;
     
}
tagListeners.addListenerForTag('img', 'onclick', OpenTabSheet);



/*************************************************************************************

    Behavior functions

*************************************************************************************/




// change the source of an image to which the ChangeImageSourceMouseOver behavior
// is attached, but only if the source image name doesn't end in _on
function Behavior_ChangeImageSourceMouseOver(eventObject) {
    if(! this.getAttribute('behaviors')) {
        return true;
    };
        
    if(! this.getAttribute('behaviors').match(/ChangeImageSourceMouseOver/)) {
        return true;
    };
    var newSource = this.src;
    if(! newSource) {
        return true;
    }
    if(newSource.match(/_over\.[a-zA-Z]+$/)) {
        newSource = newSource.replace(/_over\.([a-zA-Z]+)$/, '.$1');
    } else {
        if (! newSource.match(/_on\.[a-zA-Z]+$/)) {
            newSource = newSource.replace(/\.([a-zA-Z]+)$/, '_over.$1');
        };
    };
    this.src=newSource;
    return true;
}
tagListeners.addListenerForTag('img', 'onmouseover', Behavior_ChangeImageSourceMouseOver);
tagListeners.addListenerForTag('img', 'onmouseout', Behavior_ChangeImageSourceMouseOver);