/**------------------------------------------------------------------------
 * Set of function and classes which deal with FilteringSelect with icon 
 *
 * Dependencies:
 *  dojo.js, version 1.1 
 *
 * Author: 
 *  Bartlomiej.Pawlowski@swx.com
 *
 * @version $Id: filtering_select_utils.js,v 1.1 2009/08/13 15:32:22 ssk Exp $
 *
 *-----------------------------------------------------------------------*/


/**
 * This is default configuration used by the FilteringSelectIconUpdater 
 */
var defaults = {
    // padding definitions used to build select option list
    option_list_padding : {
        CH          : "10px",
        no_icon     : "21px",
        _default    :  "5px"
    },

    // this class should be used by input type select when the field shou
    // have an icon
    className       : "select_with_icon"
}


/**
 * FilteringSelectIconUpdater class deals with filtering selects which
 * should have an icon the the option list and in the input field itself.
 *
 */
function FilteringSelectIconUpdater() {

    var _defaults = defaults;

    /**
     * Create read store with display names and icons
     * The displayNames map should have the same keys as icons map
     *
     * @param displayNames (map) example: { PL : "Poland" }
     * @param icons (map) - example: { PL : "pln.gif" }
     * @return (dojo.data.ItemFileReadStore) store used by filtering selects
     */
    this.createReadStore = function(displayNames, icons) {
            
        var padding = _defaults.option_list_padding;

        var nameWithIcon = function(code, label, imgPath) {
            if ( imgPath ) {
                return  "<img src=\""+ imgPath +"\"/><span style=\"padding-left: " + (padding[code] ? padding[code] : padding._default)+ ";\">" + label + "</span>"; 
            }
            else {
                return  "<span style=\"padding-left: " + padding.no_icon + ";\">" + label+ "</span>"; 
            }
        }

        var items = [];
        var code, iconPath;

        for ( code in displayNames ) {
            iconPath = icons[code] ? icons[code] : null;
            items.push({ 
                n: displayNames[code], v: code, 
                l: nameWithIcon(code, displayNames[code], iconPath)
            });
        }

        return new dojo.data.ItemFileReadStore({data:
            {   
                identifier : "v",
                items: items    
            }
        });

    }
    
    /**
     * Create read store with display names and icons
     * The displayNames map should have the same keys as icons map
     *
     * @param readStore (map) example: { n: "CHF: Swiss franc", v: "CHF"},
     * @param icons (map) - example: { PL : "pln.gif" }
     * @return (dojo.data.ItemFileReadStore) store used by filtering selects
     */
    this.createReadStoreFromStore = function(readStore, icons) {
            
        var padding = _defaults.option_list_padding;

        var nameWithIcon = function(code, label, imgPath) {
            if ( imgPath ) {
                return  "<img src=\""+ imgPath +"\"/><span style=\"padding-left: " + (padding[code] ? padding[code] : padding._default)+ ";\">" + label + "</span>"; 
            }
            else {
                return  "<span style=\"padding-left: " + padding.no_icon + ";\">" + label+ "</span>"; 
            }
        }

        var items = [];
        var code, iconPath;

        readStore.fetch({
          query: { v : "*" },
          onItem: function(item, request) {
             iconPath = icons[readStore.getValue(item, "v")] ? icons[readStore.getValue(item, "v")] : null;
             items.push({ 
               n: readStore.getValue(item, "n"), v: readStore.getValue(item, "v"), 
               l: nameWithIcon(readStore.getValue(item, "v"), readStore.getValue(item, "n"), iconPath)
            });
          }
        });

        return new dojo.data.ItemFileReadStore({data:
            {   
                identifier : "v",
                items: items    
            }
        });

    }

    /**
     * Go through all FilteringSelects on a page and set default icon
     *
     * @param icons (map) example: { CH : "/resource/images/icons/chf.gif" }
     */
    this.setIcons = function(icons) {
        dojo.query("." + _defaults.className + " .dijitInputField").forEach(function(item) {
            //
            // dojo makes two input fields for one select input field. 
            // first keeps label and the second keeps code
            //
            var inputs = dojo.query("input", item); 
            var input = inputs[1];
            
            if ( input ) {
                if ( icons[input.value] ) {
                    item.style.background = "transparent url(" + icons[input.value] + ") no-repeat scroll 2px center";
                }
                else {
                    item.style.background = "";
                    if ( inputs[0] )
                        inputs[0].style.paddingLeft = "2px";
                }
            }
        }); 
    }

    /**
     * Change icon when select value is changed
     *
     * @param filteringSelect (FilteringSelect dojo obj)
     * @param icons (map) example { CH: '/resources/images/chf.gif' }
     */
    this.changeIcon = function(filteringSelect, icons)  {
        
        var input   = dojo.byId(filteringSelect.id); 
        var code    = filteringSelect.getValue();
        var div     = input.parentNode;
        var imgPath = icons[code];

        if ( imgPath ) {
            div.style.background = "transparent url(" + imgPath + ") no-repeat scroll 2px center";
            input.style.paddingLeft = "20px";
        }
        else {
            div.style.background = ""; 
            input.style.paddingLeft = "2px";
        }
    }
}