/**
 * Commonly used functions
 * based on jQuery
 *
 */

/**
 * Extends the jQuery element set to provide new methods (jQuery plugins)
 */
jQuery.fn.extend({

    /**
     * Sets the attribute 'value' of a passed Object to the maximum result of a
     * passed function applied to all jQuery-objects
     *
     * Arguments:
     *   - maxvar: object with attribute 'value' set to a start-value
     *   - func: string, jQuery-function
     *
     * Usage (e.g.):
     *   - this will set maxw.value to the maximum width of all div-elements:
     *     // create an object and set its attribute 'value' to 0
     *     var maxw = new valueObject(0);
     *     // set maxw.value
     *     $('div').maxVal(maxw,'width()');
     */
    maxVal: function ( maxvar, func ) {
        return this.each(function() {
            maxvar.value = Math.max(maxvar.value, eval('$(this).'+func));
        });
    }
});

/**
 * Creates an object and sets the attribute 'value' to a passed value
 * (to enable passing by pointer)
 *
 * Arguments:
 *   - val: value
 */
function valueObject ( val ) { this.value = val; }

/**
 * Sets the width of grouped HTML-elements to the maximum width of the elements
 *
 * Use this function e.g. to unify the width of labels in a form.
 *
 * Usage:
 *  - in the HTML code
 *    - group the elements to by unified by setting the class of a parent
 *      element to 'f_unify'
 *    - set the class of the elements to by unified to 'f_unify-width'
 *
 *    E.g.:
 *      <form class="f_unify">
 *        <label class="f_unify-width" for="name">Name</label>
 *        <input type="text" id="name" name="name" />
 *        <label class="f_unify-width" for="name">Address</label>
 *        <input type="text" id="name" name="name" />
 *      </form>
 *  - call adjust_unifyElements()
 */
function adjust_unifyElements () {
    var maxw = new valueObject(0);
    $('.f_unify .f_unify-width').maxVal(maxw,'width()').width(maxw.value);
}

/**
 * Initialise HTML elements to handle expansions
 *
 * Use this function if you want elements on the page to be shown/hidden
 * dynamically by the user on click.
 *
 * Usage:
 *  An expansion-object consists of
 *    - a container: encapsulating the object
 *    - an expander (= the element to click)
 *    - a body: the area to be hidden/shown
 *  Expansion-objects can be nested
 *
 *  - in the HTML code
 *    - define the expansion container by setting the class to 'f_expandContainer'
 *    - define the expander
 *      - define the expander buttons (to click for expansion and reduction):
 *        [ to maximise usability and accessibility, the contents for all expanders
 *        must be defined in a seperate element with the class 'f_expansionElements'
 *        and are inserted at the appropriate places at runtime (-> if javaScript is
 *        disabled, the expansion-functionalities are not displayed in the code);
 *        the element with the class 'f_expansionElements' will be removed from 
 *        the DOM at runtime ]
 *        - inside the element with the class 'f_expansionElements' create an
 *          element with the class 'SOME_CLASSNAME'; SOME_CLASSNAME should be 
 *          unique; the element will be referenced at runtime by SOME_CLASSNAME
 *          and inserted at the appropriate places
 *          - this element should have 2 div-childnodes with the classes set to
 *            - 'f_expand' for the expansion-button and
 *            - 'f_reduce' for the reduction-button respectively
 *          - within those child-nodes define your "buttons" (preferably using
 *            the a-tag)
 *          - you can define variables in the HTML code of the buttons, which
 *            will be replaced by some part of the content of the expansion
 *            container at runtime (this is usefull if e.g. the title-attribute
 *            has a value, dependant on the content; e.g. title="Open X" and X
 *            is the title, shown in the head):
 *            To insert an element:
 *            - define an element with the class 'f_expandVar_SOMETHING' within
 *              the button (this element will be replaced)
 *            - set the class of the replacement element to
 *              'f_expandVarSet_SOMETHING'
 *            To replace a value in the title or alt attribute:
 *            - insert 'f_expandVar_SOMETHING' in the value
 *            - set the class of the element, whos value should be used as #
 *              replacement to 'f_expandVarSet_SOMETHING'
 *      - define an expander placeholder: add an empty element with the classes
 *        'f_expander' and 'SOME_CLASSNAME' to your layout where the expander
 *        should be; 'SOME_CLASSNAME' must be the last set class; the element
 *        '.f_expansionElements SOME_CLASSNAME' will be inserted here at runtime
 *    - define the body by setting the class to 'f_expandBody'
 *      - if the body should be hidden on start, set its class to
 *        'f_expandStartClosed'
 *
 * E.g.
 *  <div class="f_expandContainer">
 *      <div>
 *          <h2 class="f_expandVarSet_Title">How to use this</h2>
 *          <div class="f_expander f_nodeExpand"></div>
 *      </div>
 *      <div class="f_expandBody f_expandStartClosed">
 *          <p>Some text</p>
 *      </div>
 *  </div>
 *  <div class="f_expansionElements">
 *      <div class="f_nodeExpand">
 *          <div class="f_expand"><a href="#" title="Show f_expandVar_Title">expand</a></div>
 *          <div class="f_reduce"><a href="#" title="Hide f_expandVar_Title">reduce</a></div>
 *      </div>
 *  </div>
 *
 */
function init_expansion () {
    btnName = '';

    // initialise all expansion-objects
    $('.f_expandContainer').each(function() {

        var container = $(this);
        // get the body of the current container
        var body = container.find('.f_expandBody')
                            .not(container.find('.f_expandContainer .f_expandBody'));

        // hide body
        $(this).find('.f_expandStartClosed').hide();

        // get the expander placeholder
        $(this).find('.f_expander')
            .not($(this).find('.f_expandContainer .f_expander'))
            .each(function() {

                /* set the expansion buttons */

                // get the last classname (defines, which expander buttons to use)
                btnName = $(this).attr('class').split(' ').slice(-1);
                // clone the expander buttons
                clone = $('.f_expansionElements .'+btnName).clone();

                // if the body is closed at start, show the expansion-button;
                // else show the reduction-button
                if (body.hasClass('.f_expandStartClosed')) clone.find('.f_reduce').hide();
                else clone.find('.f_expand').hide();

                // set the click functionalities
                clone.find('.f_reduce').click(function () {
                    body.hide('slow');
                });
                clone.find('.f_expand').click(function () {
                    body.show('slow');
                });
                clone.find('a').click(function (event) {
                    event.preventDefault();
                });

                // toggle the expansion buttons
                clone.click(function () {
                    $(this).find('div').toggle();
                });


                /* replace the content variables in the expansion buttons */

                // replace all elements with the class 'f_expandVar_SOMETHING'
                // by a copy of the element with the class 'f_expandVarSet_SOMETHING'
                clone.find('*[class*=f_expandVar_]').each(function() {
                    $(this).replaceWith(
                        container.find('.f_expandVarSet_'+$(this).attr('class').substr(12))
                            .not(container.find('.f_expandContainer *[class*=f_expandVarSet_]'))
                        .clone());
                });

                // replace 'f_expandVar_SOMETHING' in attribute-values by the
                // values of the element with the class 'f_expandVarSet_SOMETHING'

                // set the attributes to check
                var atbAr = new Array("title", "alt");
                for (var i = 0; i < atbAr.length; ++i) {

                    clone.find('*['+atbAr[i]+'*=f_expandVar_]').each(function() {
                        // get the variable name
                        var aval = $(this).attr(atbAr[i]);
                        var vars = aval.match(/f_expandVar_[a-zA-Z0-9_-]*/);

                        // get the value
                        var aval0 = container.find('.f_expandVarSet_'+vars[0].substr(12))
                                            .not(container.find('.f_expandContainer *[class*=f_expandVarSet_]'))
                                        .text();

                        // replace the variable by the value
                        var reg = new RegExp(vars[0],"g");
                        aval = aval.replace(reg, aval0);

                        $(this).attr(atbAr[i], aval);
                    });
                }


                // add the expansion buttons to the expander placeholder
                $(this).append(clone);
            });
    });

    $('.f_expansionElements').remove();
}

function init_popup () {
    var popupContent = $('#f_popupContent');
    if (popupContent) {
        $('#f_popupContainer')
            .append(popupContent)
            .click(function (event) {
                    event.stopPropagation() ;//return false;
                })
        $('#f_popupWrapper')
            .show('slow')
            .click(function () {
                    $(this).hide('slow');
                });
        $('#f_popupClose a').click(function () {
                    $('#f_popupWrapper').hide('slow');
                });
    }
}