/******** BEGIN /static/ph-client/polymer-elements/default.html ********/


<polymer-element name="p-base-element"
                 attributes="mode data-params data-key data-namespace value name data-scope data-controller data-link dataValue nullable tooltip hidden mandatory"
                 xmlns="http://www.w3.org/1999/html">
<script>
Polymer('p-base-element', {
    //applyAuthorStyles: true,
    elementClass: 'element-default',
    clickable: false,
    template: "{{value}}",
    "publish": {
        "value": {
            reflect: true
        },
        "hidden": {
            reflect: true
        },
        "mode": {
            reflect: true
        }
    },

    preInitialize: function () {
        if (!_.isUndefined(this["data-params"])) {
            this.params = this.objectify(this["data-params"]);

            if (this.params) {

                if (this.params.template) {
                    this.template = this.params.template;
                }

                if (this.params.placeholder) {
                    this.placeholder = this.params.placeholder;
                }

                if (!_.isUndefined( this.params.disabled )) {
                    this.disabled = this.params.disabled;
                }

                if (!_.isUndefined( this.params.tooltip )) {
                    this.tooltip = this.params.tooltip;
                }

                if (!_.isUndefined( this.params.mandatory )) {
                    this.mandatory = this.params.mandatory;
                }

            }

        }

        if (this["data-link"]) {
            if (!this.params || !this.params.noStyle) {   //temp until figure out how to override polymer style from global scope
                this.elementLink = "element-link"
            }
            this.clickable = true;
        }

        if (!_.isUndefined(this["dataValue"]) && this["dataValue"] !== "") {
            this.setValue(this.objectify(this["dataValue"]));
        } else if (this.params && this.params.value) {
            //this.value = this.params.value;
            this.setValue(this.params.value);
        }

        this.mode = this.mode || 'input'; // default to "input" //=> to review
    },

    ready: function () {

        this.preInitialize()

        if (this.initialize) {
            this.initialize();
        }

        if (this.afterInitialized) {
            this.afterInitialized();
        }

        /*
         if (this.params && this.params.deleted) {
         this.async(function () {
         var element = this.shadowRoot.querySelector('#element');

         if (element) {
         $(element).prop('disabled', true);
         $(element).addClass('deleted');
         }
         });
         }*/

    },

    domReady: function () {
        if (this.afterRender) {
            //this.super(); //is useful? => super slow
            //this.async(this.afterRender, null, 100);

            this.afterRender();
        }
    },

    onClicked: function (event, index, el, params, delay) {

        var self = this;

        var execute = function () {

            if (!self.clickable) { return true; }

            self.css({ cursor: 'progress' });

            if (self.handler) {
                self.handler();
            } else {
                self.clickable = false;

                if (self.value && _.isString( self.value.url )) {
                    window.location = self.value.url;
                } else {
                    self.request("click", function () {
                        setTimeout(function () {
                            self.clickable = true; //avoid multi click on same element (100ms delay)
                        }, delay)
                    }, self, params);
                }
            }
        };

        if (delay) {
            setTimeout(execute, delay);
        } else {
            execute();
        }

        //execute();

    },

    onKeyDown: function(e) {
        switch (e.keyCode) {

            case CONST.KeyCode.Enter:

                this.request("enter", null, null, {
                    value: this.getValue()
                });

                e.preventDefault();
                e.stopPropagation();
                break;

            default:
                break;
        }

    },

    objectify: function (data) {
        if (_.isString(data)) {
            //decode {{ and }}
            data = data.replace(/@%/g,"{{").replace(/%@/g,"}}");

            data = Helper.objectify(data.replace(/'/g, '"'));
        }
        return data;
    },

    modeChanged: function () {
        this.input = this.isInputMode();
        this.output = this.isOutputMode();
    },

    isInputMode: function () {
        return (this.mode === 'input');
    },

    isOutputMode: function () {
        return (this.mode === 'output');
    },

    toggleMode: function () {
        this.mode = this.isInputMode() ? 'output' : 'input';
        this.setTransformedValue(this.value);  //ie re-execute transformations
    },

    getValue: function () {
        return this.reverseTransform(this.transformedValue);
    },

    setValue: function (value, options) {
        this.previousValue = this.value;
        this.value = value; //fire valueChanged as well
    },

    valueChanged: function () {

        if (this.isHTML) {
            this.super(); //why???
            if (!ph.isNullOrUndefined(this.value)) {
                this.async(this.updateInnerHTML, [this.value], 100);
            } else {
                return;
            }

        } else {
            this.setTransformedValue(this.value);
        }

        if (this.notifyChanges) {
            if (this.trackChanges && !_.isEqual( this.previousValue, this.value )) {
                this.notifyChanges();
            }
        }

        //forced to set the previous value in an async way due to notifyChanges being async
        var self = this;
        var previousValue = self.value;

        this.async(function () {
            self.previousValue = previousValue;
        }, null, 100);

    },

    setTransformedValue: function (value) {
        var transformedValue = this.transform(value);

        if (transformedValue !== this.transformedValue) {

            if (!this.isHTML) {
                this.transformedValue = transformedValue;
            }

        }
    },

    updateInnerHTML: function (value) {

        if (!ph.isNullOrUndefined(value)) {

            var elt = this.shadowRoot.querySelector('#element');
            if (elt) {
                elt.innerHTML = this.transform(value);
            }
        }
    },

    //user changed the input value, update value based on input
    inputChanged: function () {
        this.setValue(this.reverseTransform(this.transformedValue))
    },

    transform: function (value) {
        if (this.isInputMode() && this.transformInput) {
            return this.transformInput(value);
        } else if (this.isOutputMode() && this.transformOutput) {
            return this.transformOutput(value);
        }

        return value;
    },

    reverseTransform: function (value) {
        if (this.isInputMode() && this.reverseTransformInput) {
            return this.reverseTransformInput(value);
        } else if (this.isOutputMode() && this.reverseTransformOutput) {
            return this.reverseTransformOutput(value);
        }

        return value;
    },

    isDirty: function () {
        return this.getValue() !== this.initialValue;
    },

    /*
     requestObserve: function (callback, scope, params) {
     this.request('observe', callback, scope, params);
     },*/

    request: function (requestType, callback, scope, params) {

        params = params || {};

        //add the index info
        var eventName = this["data-namespace"] + "." + this["data-key"];

        if (this.params && this.params.target) {
            params.target = this.params.target;
        }

        if (_.isUndefined(params.index) && eventName != this.name) {
            params.index = Helper.extractLastIndex(this.name); //should not be last index but checking the scope of the key
        }

        //force to delay otherwise component no yet rendered
        var self = this;
        this.async(function () {
            self.fireEvent('controllerRequest', {
                controllerName: self["data-controller"],
                requestType: requestType,
                caller: $(self)[0],
                params: params,
                callback: callback,
                scope: scope
            });

        })

    },

    afterRender: function () {
        //once rendered, activate trackChanges
        var self = this;

        //once done
        this.async(function () {
            self.trackChanges = true;
        }, null, 100);

    },




    notifyChanges: function (callback, scope, params) {


        params = params || {};
        params.value = this.getValue();

        this.async(this.request, ["change", callback, scope, params], 10);
        /*

         //must fire async due to element that may be async, for instance when hidden is specified
         this.asyncFire(
         eventName + "_changed",
         {
         controllerName: this["data-controller"] ,
         requestType: 'change',
         caller: $(this)[0],
         params: params,
         callback: callback,
         scope: scope
         }
         );*/

    },

    fireEvent: function (eventName, context) {
        $(document).trigger(this.getEventName(eventName), context);
    },

    getEventName: function (name) {
        // brackets not allowed
        return name.replace("[", "").replace("]", "")
    },

    parseTemplate: function (data) {

        if (this.template === "{{value}}") { //for perf
            return data && data.value;
        } else {
            return Helper.compileTemplate(this.template)(data);
        }
    },

    css: function (options) {
        $(this).css(options);
    },

    resetCss: function (delay) {
        this.css({ cursor: 'pointer' }); //should be based on config
    },

    setDisabled: function (isDisabled) {
        this.disabled = isDisabled;
    },

    focus: function () {
        var element = this.shadowRoot.querySelector('#element');
        $(element).focus()
    }


});
</script>
</polymer-element>

<polymer-element name="p-element" extends="p-base-element">
<template><style>
    :host {
        display:block;
    }
    .element-input {
        width: inherit;
        height: 28px;
        box-sizing: border-box;
        border: 1px solid #ABABAB;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        padding: 3px 0px 3px 5px;
        background-color: white;
    }
    [disabled] {
        background-color: #eeeeee;
    }
    [hidden] {
        display: none !important;
    }
    .element-link {
        /*color: blue;*/
        text-decoration: underline;
    }
    .element-link:hover, .ui-button-text:hover {
        /*cursor: pointer;*/
    }
    label:hover {
        cursor: pointer !important;
    }
</style><template bind if="{{input}}"><input id="element" class="element-input {{elementClass}}" disabled?="{{disabled}}" style="width: inherit;" type="text" value="{{transformedValue}}" on-keydown="{{onKeyDown}}" on-click="{{onClicked}}" on-change="{{inputChanged}}" on-focusin="{{onFocus}}" on-focusout="{{onBlur}}" placeholder="{{placeholder}}" ><sup hidden?="!{{mandatory}}">*</sup></template><template bind if="{{output}}"><span id="element" class="element-output {{elementClass}} {{elementLink}}" style="width: inherit;" on-click="{{onClicked}}">{{transformedValue}}</span></template></template>
<script>
    Polymer('p-element')
</script>
</polymer-element>

<polymer-element name="p-element-password" extends="p-base-element">
    <template><style>
        :host {
            display:block;
        }
        .element-input {
            width: inherit;
            height: 28px;
            box-sizing: border-box;
            border: 1px solid #ABABAB;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            padding: 3px 0px 3px 5px;
            background-color: white;
        }
        [disabled] {
            background-color: #eeeeee;
        }
        [hidden] {
            display: none !important;
        }
        .element-link {
            /*color: blue;*/
            text-decoration: underline;
        }
        .element-link:hover, .ui-button-text:hover {
            /*cursor: pointer;*/
        }
        label:hover {
            cursor: pointer !important;
        }
    </style><template bind if="{{input}}"><input id="element" type="password" class="element-input {{elementClass}}" style="width: inherit;" type="text" value="{{transformedValue}}" on-keydown="{{onKeyDown}}" on-click="{{onClicked}}" on-change="{{inputChanged}}" on-focusin="{{onFocus}}" on-focusout="{{onBlur}}" placeholder="{{placeholder}}" ></template><template bind if="{{output}}"><span id="element" class="element-output {{elementClass}} {{elementLink}}" style="width: inherit;" on-click="{{onClicked}}">{{transformedValue}}</span></template></template>
    <script>
        Polymer('p-element-password', {
            elementClass: 'element-password',

            transformOutput: function (value) {
                return "******";
            }
        });
    </script>
</polymer-element>

<polymer-element name="p-element-integer" extends="p-element">
    <script>
        Polymer('p-element-integer', {
            elementClass: 'element-integer',

            transformOutput: function (value) {

                return this.nullable ?
                        (ph.isNullOrUndefined(value) ? "" : value) :
                        (value || 0);        //nicer to see 0 as output if no value provided

            },

            reverseTransform: function (value) {
                return this.nullable ?
                        ((_.isEmpty(value) || ph.isNullOrUndefined(value)) ? null : parseInt(value)) :
                        (parseInt(value) || 0);
            },

            afterRender: function () {
                if (!this.value && this["data-link"]) {
                    this.setValue(0);  //make sure users can click on a link if not defined
                }

                this.super();
            }

        });
    </script>
</polymer-element>

<polymer-element name="p-element-float" extends="p-element">
    <script>
        Polymer('p-element-float', {
            elementClass: 'element-float',

            transformOutput: function (value) {

                return this.nullable ?
                        (ph.isNullOrUndefined(value) ? "" : value) :
                        (value || 0);  //nicer to see 0 as output if no value provided
            },

            reverseTransform: function (value) {
                return this.nullable ?
                        ((_.isEmpty(value) || ph.isNullOrUndefined(value)) ? null : parseFloat(value)) :
                        (parseFloat(value) || 0);
            },

            afterRender: function () {
                if (ph.isNullOrUndefined(this.value) && this["data-link"]) {
                    this.setValue(0);  //make sure users can click on a link if not defined
                }
                this.super();
            }

        });
    </script>
</polymer-element>

<polymer-element name="p-element-money" extends="p-element">
    <script>
        Polymer('p-element-money', {
            elementClass: 'element-money',

            transformOutput: function (value) {

                if (this.nullable) {
                    return this.parseTemplate({ value: Convert.toMoney(value) });
                } else if (!_.isUndefined(value)) {
                    return this.parseTemplate({ value: Convert.toMoney(value) });
                }

            },

            reverseTransformOutput: function (value) {
                return this.nullable?
                        this.value :
                        (this.value ? this.value : 0);
            },

            transformInput: function (value) {
                return this.nullable ?
                        value :
                        (_.isUndefined(value) ? "0" : value);
            },

            reverseTransformInput: function (value) {

                if (this.nullable) {
                    return (ph.isNullOrUndefined(value) || value==="") ? null : Convert.fromMoney(value);
                } else {
                    return Convert.fromMoney(value);
                }

            },

            afterRender: function () {
                if (!this.value && this["data-link"]) {
                    this.setValue(0);  //make sure users can click on a link if not defined
                }

                this.super();
            },

            reset: function () {
                this.setValue(null)
            }

        });
    </script>
</polymer-element>

<polymer-element name="p-element-phone" extends="p-base-element" attributes="value">
    <template>
        <style>
            :host {
                display:block;
            }
            .element-input {
                width: inherit;
                height: 20px;
            }
            [hidden] {
                display: none !important;
            }
            [disabled] {
                background-color: #eeeeee;
            }
            input {
                border: 1px solid #ABABAB;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                border-radius: 5px;
                padding: 3px 0px 3px 5px;
                background-color: white;
            }
            .element-link {
                /*color: blue;*/
                text-decoration: underline;
            }
        </style>
        <template bind if="{{input}}">
            <span id="element" class="element-input {{elementClass}}" style="width: inherit;">
                <input id="areaCode" style="width: 30px;" type="text" value="{{areaCode}}" on-change="{{areaCodeChanged}}" >
                <input id="prefixCode" style="width: 30px;" type="text" value="{{prefixCode}}" on-change="{{prefixChanged}}" >
                <input id="number" style="width: 40px;" type="text" value="{{number}}" on-change="{{numberChanged}}" >
                &nbsp;Ext.
                <input id="extension" style="width: 30px;" type="text" value="{{extension}}" on-change="{{extensionChanged}}" >
            </span>
        </template>
        <template bind if="{{output}}">
            <span id="element" class="element-output {{elementClass}} {{elementLink}}" style="width: inherit;" on-click="{{onClicked}}">{{transformedValue}}</span>
        </template>
    </template>
    <script>
        Polymer('p-element-phone', {
            elementClass: 'element-phone',

            transformOutput: function (value) {
                if (!_.isUndefined(value)) {
                    return this.parseTemplate({ value: Convert.toFriendlyPhone(value) });
                }
                return "";
            },

            reverseTransformOutput: function (value) {
                return this.value ? this.value : null;
            },

            transformInput: function (value) {

                if (_.isObject(this.value)) {
                    this.areaCode = this.value.areaCode || "";
                    this.prefixCode = this.value.prefix || "";     //weirdly polymer, cannot name it "prefix"
                    this.number = this.value.number || "";
                    this.extension = this.value.extension || "";
                }

            },

            reverseTransformInput: function (value) {
                return this.value || null;
            },

            areaCodeChanged: function () {
                this.onChange("areaCode", this.areaCode);
            },

            prefixChanged: function () {
                this.onChange("prefix", this.prefixCode);
            },

            numberChanged: function () {
                this.onChange("number", this.number);
            },

            extensionChanged: function () {
                this.onChange("extension", this.extension);
            },

            onChange: function (name, value) {

                var v = _.isObject(this.value) ? Helper.deepCopy(this.value) : {};
                v[name] = value;

                this.previousValue = null;

                this.setValue(v);

            },

            getValue: function () {
                var value = this.reverseTransform(this.transformedValue);
                /*
                if (value && value.id) {
                    if (value.areaCode === "" && value.extension === "" && value.number === "" && value.prefix === "") {
                        value = null; //otherwise phone not deleted
                    }
                }*/

                if (value) {

                    if (_.every(["areaCode", "extension", "number", "prefix"], function (field) {
                        return ph.isNullOrUndefined(value[field]) || value[field] === "";
                    })) {
                        value = null; //otherwise phone not deleted
                    }

                }

                return value;

            }


        });
    </script>
</polymer-element>

<polymer-element name="p-element-percentage" extends="p-element">
    <script>
        Polymer('p-element-percentage', {
            elementClass: 'element-percentage',

            transformOutput: function () {
                if (this.nullable) {
                    return Convert.toNullablePercent(this.value, true);
                } else {
                    return Convert.toPercent(this.value, true);
                }
            },

            reverseTransformOutput: function (value) {

                return this.nullable?
                        Convert.fromNullablePercent(value) :
                        Convert.fromPercent(value);

            },

            transformInput: function () {
                return this.nullable ?
                        Convert.toNullablePercent(this.value):
                        Convert.toPercent(this.value);
            },

            reverseTransformInput: function (value) {

                return this.nullable ?
                        Convert.fromNullablePercent(value):
                        Convert.fromPercent(value);
            },

            reset: function () {
                this.setValue(null)
            }

        });
    </script>
</polymer-element>

<polymer-element name="p-element-postal-code" extends="p-element">
    <script>
        Polymer('p-element-postal-code', {
            elementClass: 'element-postal-code',

            transformOutput: function (value) {
                return Convert.toPostalCode(value);
            },

            reverseTransformOutput: function (value) {
                return Convert.fromPostalCode(value);
            },

            transformInput: function (value) {
                return value;

                //return Convert.toPostalCode(value);
            },

            reverseTransformInput: function (value) {
                return Convert.fromPostalCode(value);
            }

        });
    </script>
</polymer-element>

<polymer-element name="p-element-auto-generated" extends="p-base-element">
    <template>
        <template bind if="{{input}}">
            <span class="element-input {{elementClass}}">{{transformedValue}}</span>
        </template>
        <template bind if="{{output}}">
            <span class="element-output {{elementClass}}">{{transformedValue}}</span>
        </template>
    </template>
    <script>
        Polymer('p-element-auto-generated', {
            elementClass: 'element-auto-generated',

            transformOutput: function (value) {
                return value + " (auto-generated)";
            },

            reverseTransformOutput: function (value) {
                return value.replace(" (auto-generated)", "");
            },

            transformInput: function (value) {
                return this.transformOutput(value);
            },

            reverseTransformInput: function (value) {
                return this.reverseTransformOutput(value);
            }
        });
    </script>
</polymer-element>

<polymer-element name="p-element-address" extends="p-base-element">

    <template>
        <style>
            :host {
                display:block;
            }
            #container {
                border: 1px solid #ABABAB;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                border-radius: 5px;
                padding: 10px;
                background-color: #e8e8e8;
                margin: 10px 0px;

            }
            [disabled] {
                background-color: #eeeeee;
            }
            [hidden] {
                display: none !important;
            }
            .element-link {
                /*color: blue;*/
                text-decoration: underline;
            }
            .element-target-blank {
                text-decoration: none;
                border-bottom: 1px dashed;
            }
            .element-link:hover, .ui-button-text:hover {
                /*cursor: pointer;*/
            }
            label:hover {
                cursor: pointer !important;
            }
            td:first-child {
                white-space: nowrap;
                padding-right: 10px;
            }
            td:nth-child(2) {
                width: 100%;
            }
        </style>
        <template bind if="{{input}}"><div id="container">
            <table class="address">
                <tr>
                    <td><span class="mandatory">Street:</span></td>
                    <td><p-element id="line1" style="width: 100%;height: inherit;" mode="input" name="line1" data-key="line1" data-namespace="address" data-scope="address.line1" data-controller="Default" data-params="{&quot;placeholder&quot;:&quot;Line 1&quot;}" ></p-element></td>
                </tr>
                <tr>
                    <td></td>
                    <td><p-element id="line2" style="width: 100%;height: inherit;" mode="input" name="line1" data-key="line2" data-namespace="address" data-scope="address.line2" data-controller="Default" data-params="{&quot;placeholder&quot;:&quot;Line 2&quot;}"></p-element></td>
                </tr>
                <tr>
                    <td><span class="mandatory">City:</span></td>
                    <td><p-element-typeahead id="city" style="width: 100%;height: inherit;" mode="input" name="address.cityId" data-key="city" data-namespace="address" data-scope="address.cityId" data-controller="Default" data-params="{&quot;fieldLabel&quot;:&quot;(Select a City)&quot;, &quot;actions&quot;: [{&quot;label&quot;: &quot;Add New City&quot;, &quot;value&quot;: &quot;addNew&quot;}]}" adjustPosition="false"></p-element-typeahead></td>
                </tr>
                <tr>
                    <td><span class="mandatory">Province:</span></td>
                    <td><p-element-typeahead id="province" style="width: 100%;height: inherit;" mode="input" name="address.provinceId" data-key="province" data-namespace="address" data-scope="address.provinceId" data-controller="Default" data-params="{&quot;fieldLabel&quot;:&quot;(Select a Province)&quot;, &quot;actions&quot;: [{&quot;label&quot;: &quot;Add New Province&quot;, &quot;value&quot;: &quot;addNew&quot;}]}" adjustPosition="false"></p-element-typeahead></td>
                </tr>
                <tr>
                    <td>Postal Code:</td>
                    <td><p-element-postal-code id="postalCode" style="width: 100%;height: inherit;" mode="input" name="postalCode" data-key="postalCode" data-namespace="address" data-scope="address.postalCode" data-controller="Default" data-params="{&quot;placeholder&quot;:&quot;Postal Code&quot;}"></p-element-postal-code></td>
                </tr>
            </table>
            </div></template>
        <template bind if="{{output}}">
            <span id="element" class="element-output {{elementClass}}" on-click="{{onClicked}}">{{transformedValue}}</span>
        </template>
    </template>
    <script>
        Polymer('p-element-address', {
            elementClass: 'element-address',
            isHTML: true,

            afterInitialized: function () {

                if (this.isOutputMode()) {
                    if (this["data-link"]) {
                        if (this.params && this.params.target && this.params.target == "_blank") {
                            this.elementClass += " element-target-blank"; //to review
                        } else {
                            this.elementClass += " element-link"; //to review
                        }
                    }
                }

            },

            updateInnerHTML: function (value) {

                if (!ph.isNullOrUndefined(value)) {

                    if (this.isInputMode()) {

                        if (_.isUndefined(value)) {
                            value = {};
                        }

                        _.each(["line1", "line2", "city", "province", "postalCode"], function (name) {
                            //if (!_.isUndefined(value[name])) {
                            this.async(function () {
                                var el = this.shadowRoot.getElementById(name);
                                if (el) {
                                    if (_.isFunction(el.selectItem)) {
                                        el.setValue(value[name].id, { trackChanges: true, selectItem: true });
                                    } else {
                                        el.setValue(value[name])
                                    }
                                }
                            }, this)

                        }, this);

                    } else {
                        this.async(function () {
                            var html = this.parseTemplate({ value: Convert.toAddress(value) });
                            this.shadowRoot.getElementById("element").innerHTML = html;
                        }, this)

                    }
                }
            },

            transformInput: function () {
                return "";
            },

            reverseTransformInput: function () {

                var value = {};

                _.each(["line1", "line2", "postalCode", "cityId", "provinceId"], function (name) {
                    var el = this.shadowRoot.getElementById(_.endsWith(name, "Id") ? _.rtrim(name, "Id") : name);
                    value[name] = el.getValue();
                }, this);

                //if all null or undefined => return null
                return _.compact(value).length ? value : null;
            }
        });
    </script>
</polymer-element>

<polymer-element name="p-element-primary-key" extends="p-element-integer">
    <template>
        <template bind if="{{input}}">
            <span id="element" class="element-input {{elementClass}}" >{{transformedValue}}</span>
        </template>
        <template bind if="{{output}}">
            <span id="element" class="element-output {{elementClass}}" >{{transformedValue}}</span>
        </template>
    </template>
    <script>
        Polymer('p-element-primary-key', {
            elementClass: 'element-primary-key'
        });
    </script>
</polymer-element>

<polymer-element name="p-element-read-only" extends="p-base-element">
    <template>
        <template bind if="{{input}}">
            <span class="element-input {{elementClass}}">{{transformedValue}}</span>
        </template>
        <template bind if="{{output}}">
            <span class="element-output {{elementClass}}">{{transformedValue}}</span>
        </template>
    </template>
    <script>
        Polymer('p-element-read-only', {
            elementClass: 'element-read-only'
        });
    </script>
</polymer-element>

<polymer-element name="p-element-spinner" extends="p-element-float">

    <template>
        <!-- perf issue to include this link here -->
        <link rel="stylesheet" href="/static/css/jquery-spinner.css" >
        <style>
            :host {
                display:block;
            }
            #element {
                width: inherit;
                height: inherit;
            }
            .element-link {
                /*color: blue;*/
                text-decoration: underline;
            }
            .element-link:hover, .ui-button-text:hover {
                cursor: pointer;
            }
        </style>
        <template bind if="{{input}}">
            <input id="element" class="element-input {{elementClass}}" type="text" value="{{transformedValue}}" on-change="{{inputChanged}}" on-focusin="{{onFocus}}" on-focusout="{{onBlur}}" >
        </template>
        <template bind if="{{output}}">
            <span id="element" class="element-output {{elementClass}} {{elementLink}}" on-click="{{onClicked}}">{{transformedValue}}</span>
        </template>
    </template>
    <script>
        Polymer('p-element-spinner', {
            elementClass: 'element-spinner',

            afterRender: function () {
                if (this.isInputMode()) {
                    var self = this;
                    var jQueryElement = jQuery((self.shadowRoot || self.webKitShadowRoot).getElementById('element'));

                    jQueryElement.spinner({
                        step: (this.params && this.params.step) || 1,
                        min: (this.params && this.params.min) || 0,
                        max: (this.params && this.params.max) || undefined,
                        spin: function (event, ui) {
                            self.value = '' + ui.value;
                        }
                    });
                }

                this.super(); //==> super is slow, to review
            }

        });

    </script>
</polymer-element>

<polymer-element name="p-element-email" extends="p-base-element">

    <template>
        <!-- perf issue to include this link here -->
        <link rel="stylesheet" href="/static/ph-client/library/awesomplete/awesomplete.css" >

        <style>
            :host {
                display:block;
            }

            #element {
                width: inherit;
                height: inherit;
            }
            .element-input {
                width: inherit;
                height: 28px !important;
                box-sizing: border-box;
                border: 1px solid #ABABAB;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                border-radius: 5px;
                padding: 3px 0px 3px 5px !important;
                background-color: white;
            }
            .element-link {
                /*color: blue;*/
                text-decoration: underline;
            }
            .element-link:hover, .ui-button-text:hover {
                cursor: pointer;
            }
            div.awesomplete {
                width:inherit;
            }
        </style>
        <template bind if="{{input}}">
            <input id="element" class="awesomplete element-input {{elementClass}}" type="text" value="{{transformedValue}}" >
        </template>
        <template bind if="{{output}}">
            <span id="element" class="awesomplete element-output {{elementClass}} {{elementLink}}" on-click="{{onClicked}}">{{transformedValue}}</span>
        </template>
    </template>
    <script>
        Polymer('p-element-email', {
            elementClass: 'element-email',

            //isHTML: true,
            afterRender: function () {

                if (this.isInputMode()) {

                    var self = this;
                    var input = (self.shadowRoot || self.webKitShadowRoot).getElementById('element');
                    self.awesomplete = new Awesomplete(input, {
                        minChars: 0,
                        maxItems: 15,

                        sort: undefined, //remove default sorting

                        filter: function(text, input) {
                            return Awesomplete.FILTER_CONTAINS(text, input.match(/[^,]*$/)[0]);
                        },

                        replace: function(text) {
                            var before = this.input.value.match(/^.+,\s*|/)[0];
                            //this.input.value = before + text + ", ";

                            this.input.value = before + text.replace(/\"[^"]*\"/g, "") + ", ";
                            //remove description, keep the email(s)

                            self.setValue(this.input.value); //update component value
                        }
                    });
                    var params = {};
                    params.search = "";


                    this.request("load", function (data, selectedOption) {
                        this.awesomplete.list = data;

                    }, this)


                }

                this.super(); //==> super is slow, to review
            }

        });

    </script>
</polymer-element>


<polymer-element name="p-element-html" extends="p-element">
    <script>
        Polymer('p-element-html', {
            elementClass: 'element-html',
            isHTML: true,
            "publish": {
                "value": {
                    "reflect": true
                }
            },
            reverseTransform: function () {
                return $(this.$.element).html()
            }
        });
    </script>
</polymer-element>

<polymer-element name="p-element-code" extends="p-base-element">

    <template>

        <style>

            pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
            .string { color: green; }
            .number { color: darkorange; }
            .boolean { color: blue; }
            .null { color: magenta; }
            .key { color: #c03614; }
            .match { background-color:#FFFF00; }

            :host {
                display:block;
            }
            [hidden] {
                display: none !important;
            }
            #element {
                width: inherit;
                height: inherit;
            }
            .element-link {
                /*color: blue;*/
                text-decoration: underline;
            }
            .element-link:hover, .ui-button-text:hover {
                /*cursor: pointer;*/
            }
        </style>
        <template bind>
            <pre><span id="element" class="element-output {{elementClass}} {{elementLink}}" on-click="{{onClicked}}">{{transformedValue}}</span></pre>
        </template>
    </template>
    <script>
        Polymer('p-element-code', {
            elementClass: 'element-code',
            isHTML: true,
            transform: function (value) {
                return Helper.prettify(value.code ? value.code : value, _.isUndefined( value.highlight ) ? true : value.highlight );
            },
            reverseTransform: function () {
                return $(this.$.element).html()
            }

        });
    </script>
</polymer-element>

<polymer-element name="p-element-ssd" extends="p-base-element">
    <template>
        <!-- perf issue to include this link here -->
        <link rel="stylesheet" href="/static/css/scss/default.css" >
        <style>
            :host {
                display:block;
            }
            [hidden] {
                display: none !important;
            }
            #element {
                width: inherit;
                height: inherit;
            }
            .element-link {
                /*color: blue;*/
                text-decoration: underline;
            }
            .element-link:hover, .ui-button-text:hover {
                cursor: pointer;
            }
        </style><span id="element" class="element-output {{elementClass}} {{elementLink}}" on-click="{{onClicked}}">{{transformedValue}}</span></template>
    <script>
        Polymer('p-element-ssd', {
            elementClass: 'element-ssd',
            isHTML: true,

            transform: function (ssd) {

                if (!ssd) { return; }

                var controllerName;

                if (App.Controllers[this["data-controller"]]) {
                    controllerName = App.Controllers[this["data-controller"]].getControllerName()
                } else {
                    controllerName = "";
                    throw new Error("SSD: controller name undefined or controller does not exist for '" + this["data-controller"] + "'");
                }

                return Helper.executeSSD(controllerName, ssd);
            },

            getHtml: function() {
                return $(this.$.element).html()
            },

            getValue: function () {
                return this.value;
            }

        });
    </script>
</polymer-element>

<polymer-element name="p-element-sidemenu" extends="p-element-ssd">
    <script>
        Polymer('p-element-sidemenu', {
            elementClass: 'element-sidemenu',

            selectItem: function (index) {
                index = index || 0;
                $(this.$.element).find(".selected").removeClass("selected");
                $($(this.$.element).find(".menuitem ").get(index)).addClass("selected")
            }

        });
    </script>
</polymer-element>

<polymer-element name="p-element-time" extends="p-base-element">

    <template>
        <link rel="stylesheet" href="/static/ph-client/library/jquery-timepicker/jquery.timepicker.css" >
        <style>
            :host {
                display:block;
                clear: both;
            }
            [hidden] {
                display: none !important;
            }
            #element {
                width: inherit;
                height: 28px;

            }
            .element-link {
                /*color: blue;*/
                text-decoration: underline;
            }
            .element-link:hover, .ui-button-text:hover {
                /*cursor: pointer;*/
            }

            .element-input.element-time {
                border: 1px solid #ABABAB;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                border-radius: 5px;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                padding: 3px 0px 3px 5px;
                font-family: monaco, consolas, monospace;
                background-color: white;
                display:inline-block;
                clear: both;
            }
            .element-input.element-time:hover {
                cursor: pointer;
            }
            [disabled] {
                background-color: #eeeeee;
            }
            #placeholder {
                color: #a1a1a1;
                text-align: left;
                padding-left: 5px;
            }


        </style>
        <template bind if="{{input}}">
            <input id="element" class="element-input {{elementClass}}" type="text" value="{{transformedValue}}" on-change="{{inputChanged}}" on-focusin="{{onFocus}}" on-focusout="{{onBlur}}" >
        </template>
        <template bind if="{{output}}">
            <span id="element" class="element-output {{elementClass}} {{elementLink}}" on-click="{{onClicked}}">{{transformedValue}}</span>
        </template>
    </template>
    <script>
        Polymer('p-element-time', {
            elementClass: 'element-time',

            afterRender: function () {
                if (this.isInputMode()) {
                    var self = this;
                    var jQueryElement = jQuery((self.shadowRoot || self.webKitShadowRoot).getElementById('element'));
                    jQueryElement.timepicker('setTime',new Date())
                }

                this.super(); //==> super is slow, to review
            }

        });

    </script>
</polymer-element>

<polymer-element name="p-element-date" extends="p-base-element" attributes="format">
    <template>
        <style>
            :host {
                display:block;
                clear: both;
            }
            #element {
                width: inherit;
                height: 28px;

            }
            .element-link {
                /*color: blue;*/
                text-decoration: underline;
            }
            .element-link:hover, .ui-button-text:hover {
                /*cursor: pointer;*/
            }

            .element-input.element-date {
                border: 1px solid #ABABAB;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                border-radius: 5px;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                padding: 3px 0px 3px 5px;
                font-family: monaco, consolas, monospace;
                background-color: white;
                display:inline-block;
                clear: both;
            }
            .element-input.element-date:hover {
                cursor: pointer;
            }
            [disabled] {
                background-color: #eeeeee;
            }
            [hidden] {
                display: none !important;
            }
            #placeholder {
                color: #a1a1a1;
                text-align: left;
                padding-left: 5px;
            }


        </style>
        <template bind if="{{input}}">
            <span id="element" class="element-input {{elementClass}}" type="text" on-click="{{onClicked}}" on-change="{{inputChanged}}" on-focusin="{{onFocus}}" on-focusout="{{onBlur}}" tabindex="0">{{transformedValue}}<span id="placeholder" hidden?="{{placeholderHidden}}">{{placeholder}}</span></span>
        </template>
        <template bind if="{{output}}">
            <span id="element" class="element-output {{elementClass}} {{elementLink}}" on-click="{{onClicked}}">{{transformedValue}}</span>
        </template>
    </template>
    <script>
        Polymer('p-element-date', {
            elementClass: 'element-date',
            placeholder: "...",

            initialize: function () {
                this.template = "{{value}}"
                this.placeholderHidden = !ph.isNullOrUndefined(this.value);
            },

            transform: function (val) {
                if (moment(val).isValid()) {
                    val = moment(val).toDate();
                } else if (_.isString(val)) {
                    val = JSON.parse(val);
                } else {
                    val = null;
                }

                return this.parseTemplate({ value: this.formatDate(val) });
            },

            formatDate: function (date) {
                return Convert.toFriendlyDate(date, this.params && this.params.format);
            },

            reverseTransform: function (value) {
                //todo: review
                return this.value;
            },

            afterRender: function () {
                if (this.isInputMode()) {
                    this.async(this.datePicker, $((this.shadowRoot || this.webKitShadowRoot).querySelector('#element')));
                }

                this.super();

            },

            parseDate: function (date) {
                try {
                    return JSON.parse(date);
                }
                catch (e) {
                    // statements to handle any exceptions
                    return null;
                }
            },

            stringifyDate: function (date) {
                try {
                    return JSON.stringify(date);
                }
                catch (e) {
                    return null;
                }
            },

            valueChanged: function () {

                if (this.isInputMode()) {
                    this.placeholderHidden = this.value ? true : false;
                }

                this.super();
            },

            setValue: function (date, options) {  //as a stringified string
                this.previousValue = this.value;
                //this.trackChanges = (this.options && this.options.stopPropagation) ? false : true;

                if (moment(date).isValid()) {
                    this.value = this.stringifyDate(date);
                } else if (_.isString(date) && !_.isEmpty(date)) { // crappy
                    this.value = date;
                } else {
                    this.value = null;
                }
            },

            getValue: function () {  //return as Date
                if (moment(this.value).isValid()) {
                    return moment(this.value).toDate();
                } else if (_.isString(this.value) && !_.isEmpty(this.value)) {
                    var parsedDate = this.parseDate(this.value);
                    return parsedDate ? moment(parsedDate).toDate() : null;
                }
                return null;
            },

            datePicker: function (element) {
                var self = this;

                var currentDate = self.getValue() || new Date();

                this.datepickr = new datepickr(this,
                        {
                            dateFormat: 'd-m-Y',
                            elementInput: element,
                            currentDate: currentDate,
                            onChange: function (value) {
                                //from datepicker, value is a string such as "01-10-2010" (d-m-Y)
                                var d = moment(value, 'DD-MM-YYYY').toDate();

                                //not necessary but faster than waiting for self.valueChanged
                                $(element).val(self.transform(self.stringifyDate(d)) );

                                //2) update the value
                                self.setValue(d);

                                //make sure to keep the focus (somehow removed on mouse click)
                                $(element).focus()
                            }
                        }
                );
            },

            reset: function () {
                this.setValue(null)
            }




        });
    </script>
</polymer-element>

<polymer-element name="p-element-link" extends="p-base-element">

    <template>
        <style>
            :host {
                display:block;
            }
            .element-link {
                /*color: blue;*/
                text-decoration: underline;
            }
            .element-link:hover {
                /*cursor: pointer;*/
            }
            [hidden] {
                display: none !important;
            }
        </style>
        <span id="element" class="element-output {{elementClass}}" style="width: inherit;" on-click="{{onClicked}}"><p-html html="{{transformedValue}}"></p-html></span>
    </template>
    <script>
        Polymer('p-element-link', {
            elementClass: 'element-link',
            clickable: true,

            /*initialize: function () {
                //this.template = "{{value}}";
            },*/

            transform: function () {

                var data;

                if (_.isString(this.value) || _.isNumber(this.value)) {
                    //data = { value : this.value};
                    return this.value; //issue called twice to review (invalid template in such case)
                } else if (this.value) {
                    data = this.value;
                } else if (this.params && this.params.value) {
                    data = this.params;
                }

                return this.parseTemplate(data);
            }
        });
    </script>

</polymer-element>

<polymer-element name="p-element-list-navigation" extends="p-base-element">

    <template>
        <style>
            :host {
                display:block;
            }
            #element span{
                /*color: blue;*/
                text-decoration: underline;
                padding-left:3px;
                padding-right:3px;
                padding-top:2px;
                padding-bottom:2px;
            }

            #element span:first-of-type {
                padding-left:0px;
                padding-right:0px;
            }
            #element span:last-of-type {
                padding-right:0px;
            }
            #element span:hover {
                cursor: pointer;
            }
            [hidden] {
                display: none !important;
            }
            .highlight {
                background-color: yellow;
                /*border-radius: 10px;*/
                border-radius: 50%;
                box-shadow:
                    inset 0 0 0 16px rgba(255,255,255,0.6),
                    0 1px 2px rgba(0,0,0,0.1);
                transition: all 0.4s ease-in-out;
            }
            .title {
                text-decoration: none !important;
            }
        </style>
        <div id="element" style="white-space: nowrap">
            <span class="title">{{title}}</span>
            <template bind repeat="{{list}}" >
                <span class="element-output {{elementClass}}" style="width: inherit;" value="{{value}}" on-click="{{onClicked}}" title="{{label}}">{{label}}</span>
            </template>
        </div>
    </template>
    <script>
        Polymer('p-element-list-navigation', {
            elementClass: 'element-list-navigation',
            clickable: true,
            title: "",
            afterRender: function () {

                if (this.params && this.params.list) {
                    this.list = this.params.list;
                } else {
                    var type = this.type || (this.params && this.params.type) || "";

                    switch (type) {

                        case "location":
                            this.list = _.map([
                                "0", "1", "2", "3", "4", "5",
                                "6", "7", "8", "9", "#",
                                { value: Helper.stringify(["A", "B", "C"]), label: "A-B-C" },
                                { value: Helper.stringify(["D", "E", "F"]), label: "D-E-F" },
                                { value: Helper.stringify(["G", "H", "I"]), label: "G-H-I" },
                                { value: Helper.stringify(["J", "K", "L"]), label: "J-K-L" },
                                { value: Helper.stringify(["M", "N", "O"]), label: "M-N-O" },
                                { value: Helper.stringify(["P", "Q", "R"]), label: "P-Q-R" },
                                { value: Helper.stringify(["S", "T", "U"]), label: "S-T-U" },
                                { value: Helper.stringify(["V", "W", "X"]), label: "V-W-X" },
                                { value: Helper.stringify(["Y", "Z"]), label: "Y-Z" },
                                { value: Helper.stringify([""]), label: "All" }
                            ], function (item) {
                                return _.isString(item) ? {
                                    value: Helper.stringify([item]), label: item
                                }: item;
                            });

                            break;

                        default:
                            this.list = _.map([
                                "A", "B", "C", "D", "E",
                                "F", "G", "H", "I", "J",
                                "K", "L", "M", "N", "O",
                                "P", "Q", "R", "S", "T",
                                "U", "V", "W", "X", "Y", "Z"
                            ], function (item) {
                                return {
                                    value: Helper.stringify([item]), label: item
                                }
                            });

                            this.list.push({ value: Helper.stringify(["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]), label: "0-9" })
                            this.list.push({ value: Helper.stringify([""]), label: "All" })
                    }
                }



                if (this.params && this.params.title) {
                    this.title = this.params.title;
                }

                this.super();
            },

            onClicked: function (event, idx, element, params) {

                var value = Helper.objectify($(element).attr("value"));
                this.setValue(value);

                params = params || {};
                params.value = value;

                this.super([event, idx, element, params])
            },


            highlight: function (value) {

                var element = $(this.$.element);

                var item = element.find("span[value='" + (value || Helper.stringify([""])) + "']")[0];

                element.select("span").removeClass("highlight");

                if (item) {
                    $(item).addClass("highlight");
                }


            }

        });
    </script>

</polymer-element>

<polymer-element name="p-element-button" extends="p-base-element" attributes="data-params color shortcut">
<template>
    <style>

        #element {
            padding: 4px 20px 4px 20px;
            line-height: 30px;
            vertical-align: middle;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            display: inline-block;
            white-space: nowrap;
            overflow:visible;
            /*min-width:100px;*/
            min-height:40px;
        }
        .label {
            line-height: 30px;
            display:inline-block;
        }
        .shortcut:first-letter {
            border-bottom: 1px solid;
        }
        #arrow {
            display: inline-block;
            position:relative;
            top:5px;
            left: 10px;
        }

        #icon {
            display: inline-block;
            position: relative;
            top:5px;
            left: -7px;
        }

        #menu {
            border: 1px solid #d1d1d1;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            position:absolute;
            z-index: 90;
            max-height: 380px;
            overflow-x: hidden;
            overflow-y: auto;
            margin-top: 1px;
        }
        .menuitem {
            background-color: white;
            width: 100%;
            line-height: 30px;
            vertical-align: middle;
            padding: 0 20px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            text-align: left;
            z-index: 90;
            white-space: nowrap;
        }

        .menuitem:hover {
            background-color: #eeeeee;
        }

        #container {
            display:inline-block;
            padding: 0;
            margin: 0;
        }
        [hidden] {
            display: none !important;
        }

    </style>

    <template bind if="{{withIcon}}">
        <div on-focusout="{{onFocusOut}}" id="container">
            <div id="element" class="element-output {{elementClass}} withIcon " type="button" on-mousedown="{{onClicked}}" on-keyup="{{onKeyUp}}" on-keydown="{{onKeyDown}}" value="" tabindex="0">
                <p-element-image id="icon" value="{{iconValue}}" width="20" height="20" mode="output" bgColor="{{bgColor}}" isBg="true"></p-element-image><span class="label {{shortcutClass}}">{{transformedValue}}</span><p-element-image id="arrow" value="{{arrowValue}}"  width="20" height="20" mode="output" bgColor="{{bgColor}}" hidden?="{{!buttonMenu}}" isBg="true"></p-element-image>
            </div>
            <div id="menu" hidden?="{{!ddMenu}}">
            <template bind repeat="{{menu}}" >
                <div on-click="{{onMenuItemClicked}}" value="{{value}}" class="menuitem">{{label}}</div>
            </template>
        </div>
        </div>
    </template>
    <template bind if="{{withoutIcon}}">
        <div id="element" class="element-output {{elementClass}} withoutIcon" type="button" on-click="{{onClicked}}" on-keyup="{{onKeyUp}}" value="" tabindex="0">{{transformedValue}}</div>
    </template>
</template>
<script>
Polymer('p-element-button', {
    elementClass: 'element-button',
    clickable: true,

    buttonMenu: false,
    shortcut: false,
    publish: {
        withIcon: {
            value: true,
            reflect: true
        },
        withoutIcon: {
            value: false,
            reflect: true
        }
    },

    shortcutChanged: function () {
        this.shortcutClass = this.shortcut ? "shortcut" : "";
    },

    onFocusOut: function () {
        //add a delay otherwise hidding the menu will prevent the click on menu item

        var self = this;

        setTimeout(function () {
            self.showMenu(false);
        }, 200);
    },

    onMenuItemClicked: function (event, idx, element) {

        var items = $((this.shadowRoot || this.webKitShadowRoot).querySelectorAll('#menu .menuitem'));
        var menuIndex = items.index(element);
        var value = $(element).attr("value");

        if (!_.isNaN(parseInt(value)) && parseInt(value) == value) {
            value = parseInt(value);
        }

        this.onClicked(event, idx, element, { index: menuIndex, value: value });

    },

    showMenu: function (show) {
        this.ddMenu = show;

        /* solution to think about if issue with dropdown on click
         if (show) {
         this.contentOverflowX = this.contentOverflowX || $("#main").css("overflowX");
         this.contentOverflowY = this.contentOverflowY || $("#main").css("overflowY");

         $("#main").css({"overflowY": "initial", "overflowX": "initial"});
         } else {
         $("#main").css({"overflowY": this.contentOverflowY || "initial", "overflowX": this.contentOverflowX || "initial"});
         } */

    },

    toggleDD: function () {
        this.showMenu(!this.ddMenu)
    },


    //on click :
    // if buttonMenu available, then
    //    if params provided (ie call from a menu item)
    //       execute click with params then hide the ddmenu

    //    if params not provided
    //       if ddmenu not built, build an display
    //       if ddmenu built but hidden, display ddmenu
    //       if ddmenu built but shown, hide it

    // if buttonMenu not available, execute click (base method)
    onClicked: function (event, idx, element, params) {

        if (this.buttonMenu) {
            if (params) {
                this.super([event, idx, element, params]);
                this.showMenu(false);
            } else {
                if (!this.menu) {
                    this.renderMenuItems();
                    this.showMenu(true);
                } else {
                    this.toggleDD();
                }
            }

        } else {

            //add a delay to let other elements (change) fire controllers first
            this.super([event, idx, element, params, (this.params && !_.isUndefined(this.params.delay)) ? this.params.delay : 150]);

        }

    },

    //simulate click from user
    click: function () {
        this.onClicked();
    },

    renderMenuItems: function () {
        if (_.isString(this.menuItems)) {
            this.params.menu = [this.menuItems];
        }

        this.menu = _.map(this.menuItems, function (menuItem, index) {
            return {
                "label": _.isObject(menuItem) ? menuItem.label || menuItem.name || menuItem.key || menuItem.displayString : menuItem,
                "value": _.isObject(menuItem) ? menuItem.value : index
            }
        });

        this.async(this.adjustMenuItemWidth, null, 10);
    },

    adjustMenuItemWidth: function () {

        var element = $((this.shadowRoot || this.webKitShadowRoot).querySelector('#element'));
        var elementWidth = parseInt(element.css( "width").replace("px",""));
        var self = this;

        //somehow forced. Issue with actions been [] if not delayed for instance.
        this.async(function () {

            var width = 0;
            _.each($((self.shadowRoot || self.webKitShadowRoot).querySelectorAll('.menuitem')), function (item) {
                var itemWidth = parseInt($(item).css( "width").replace("px",""));
                if (itemWidth > width) {
                    width = itemWidth;
                }
            });

            width = width > elementWidth ? width : elementWidth;

            var items = $((self.shadowRoot || self.webKitShadowRoot).querySelectorAll('.menuitem'));
            items.css({ width: (width) + "px" });
        });

    },

    afterRender: function () {

        if (!this.params) {
            this.params = {};
        }

        if (this.params.image) {
            this.withIcon = true;
            this.withoutIcon = false;
            this.iconValue = this.params.image;
            this.$.icon.width = 20;
            this.$.icon.height = 20;

            // trick:
            // As element-image style doesn't cross the polymer boundaries
            // the background color of the image icon is sent through the css property "content" of the button
            // I know really crazy...
            this.bgColor = getComputedStyle(this).content;
        }

        //display label of button
        var value;

        if (_.isObject(this.value) && this.value.value) {
            value = this.value.value;
        } else if (!_.isObject(this.value) && !ph.isNullOrUndefined(this.value)) {
            value = this.value;
        } else if (this.params && this.params.value) {
            value = this.params.value;
        } else {
            //by laziness, if no value provided, use the key as label
            value = Helper.toCapitalize( Helper.toLabelCase( this["data-key"] ) );
        }

        this.transformedValue = this.parseTemplate({ value: value });

        //finally set the menu items
        if (_.isObject(this.value) && this.value.menu) {
            this.menuItems = this.value.menu;
        } else if (this.params && this.params.menu) {
            this.menuItems = this.params.menu;
        }

        if (this.menuItems) {
            this.arrowValue = "down";
            this.buttonMenu = true;
        }

        this.super();
    },

    onKeyUp: function (e) {
        //if enter, simulate click

        switch (e.keyCode) {
            case 13: // enter
                e.preventDefault();
                e.stopPropagation();
                this.onClicked();
                break;

            default:
                break;
        }

    },

    onKeyDown: function (e) {

        switch (e.keyCode) {
            case CONST.KeyCode.Down:
            case CONST.KeyCode.Up:
                e.preventDefault();
                e.stopPropagation();

                //todo : select item up/down

                break;
            default:
                break;
        }

    }

});
</script>
</polymer-element>

<polymer-element name="p-element-search" extends="p-element-button" attributes="data-params color">
    <template>
        <style>

            #element {
                padding: 0px 20px 1px 20px;
                margin-bottom: 0px;;
                line-height: 20px;
                vertical-align: middle;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                display: inline-block;
                white-space: nowrap;
                overflow:visible;
            }
            .label {
                line-height: 20px;
                display:inline-block;
                position: relative;
                top: -2px;
            }

            #icon {
                display:inline-block;
                position: relative;
                top:3px;
                left: -2px;
            }

            #container {
                display:inline-block;
                padding: 0;
                margin: 0;
            }

            [hidden] {
                display: none !important;
            }
        </style>

        <template bind if="{{withIcon}}">
            <div on-focusout="{{onFocusOut}}" id="container">
                <div id="element" class="element-output {{elementClass}} withIcon " type="button" on-mousedown="{{onClicked}}" on-keyup="{{onKeyUp}}" on-keydown="{{onKeyDown}}" value="" tabindex="0">
                    <p-element-image id="icon" value="{{iconValue}}" width="20" height="20" mode="output" bgColor="{{bgColor}}" isBg="true"></p-element-image>
                    <span class="label">{{transformedValue}}</span>
                </div>
            </div>
            </div>
        </template>
        <template bind if="{{withoutIcon}}">
            <div id="element" class="element-output {{elementClass}} withoutIcon" type="button" on-click="{{onClicked}}" on-keyup="{{onKeyUp}}" value="" tabindex="0">{{transformedValue}}</div>
        </template>
    </template>
    <script>
        Polymer('p-element-search')
    </script>
</polymer-element>

<polymer-element name="p-element-textarea" extends="p-base-element" attributes="rows cols">

    <template>
        <style>
            :host {
                display:block;
            }
            .element-input {
                width: inherit;
                box-sizing: border-box;
                border: 1px solid #ABABAB;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                border-radius: 5px;
                padding: 3px 0px 3px 5px;
                background-color: white;
            }
            [disabled] {
                background-color: #eeeeee;
            }
            [hidden] {
                display: none !important;
            }
            .element-link {
                /*color: blue;*/
                text-decoration: underline;
            }
            .element-link:hover, .ui-button-text:hover {
                /*cursor: pointer;*/
            }

            .element-output {
                width: inherit;
            }


        </style>
        <template bind if="{{input}}">
            <textarea disabled?="{{disabled}}" id="element" class="element-input {{elementClass}}" rows="{{rows}}" cols="{{cols}}" on-change="{{textareaChanged}}" placeholder="{{placeholder}}">{{transformedValue}}</textarea>
        </template>
        <template bind if="{{output}}">
            <pre id="element" class="element-output">{{transformedValue}}</pre>
        </template>
    </template>
    <script>
        Polymer('p-element-textarea', {
            rows: 3,
            cols: 30,
            elementClass: 'element-textarea',
            modeOutput: false,
            modeInput: false,

            textareaChanged: function (event, o, element) {
                this.setValue($(element).val());
                //this.fire("change", this.value);
            },

            initValue: function (value) {
                //var element = $((this.shadowRoot || this.webKitShadowRoot).querySelector('#element'))[0];
                //$(element).val(value || "");
                this.setValue(value);
            },

            setValue: function (value, options) {
                var element = $((this.shadowRoot || this.webKitShadowRoot).querySelector('#element'))[0];
                if (element) {
                    $(element).val(value || "")
                }

                this.value = value;
                this.fire("change", value);
            },

            afterInitialized: function () {

                if (this.params) {
                    this.rows = this.params.rows || this.rows;
                    this.cols = this.params.cols || this.cols;
                }

            },

            transform: function () {
                return this.value;
            },

            reset: function () {
                this.setValue(null)
            }

        });
    </script>
</polymer-element>

<polymer-element name="p-element-color-picker" extends="p-base-element">

    <template>
        <link rel="stylesheet" href="/static/ph-client/library/jquery-color-picker/colorPicker.css" >
    </template>
    <script>
        Polymer('p-element-color-picker', {
            elementClass: 'element-color-picker',
            defaultColors: ["#e74c3d", "#e77e23", "#f1c410", "#9b59b5","#3598dc","#28ae61","#2d3e51","#000000", "#ffffff"],

            afterRender: function () {

                this.initialColor = this.value || "#ffffff";

                var self = this;
                $.fn.colorPicker.defaults.colors = this.defaultColors;

                $(this).colorPicker({
                    pickerDefault: self.initialColor,
                    showHexField: false,
                    readOnly: this.isOutputMode(),
                    onColorChange: function (a, color) {
                        self.async(self.request, ["change", null, null, { value: color}], 10);
                        self.setValue(color);
                    }
                });

            },
            reset: function () {
                this.setValue(null)
            }

        });
    </script>
</polymer-element>

<polymer-element name="p-html" attributes="html">
    <script>
        Polymer('p-html', {
            htmlChanged: function() {
                // WARNING: potential XSS vulnerability if `html` comes from an untrusted source
                this.innerHTML = this.html;
            }
        });
    </script>
</polymer-element>

<polymer-element name="p-element-list" extends="p-base-element">
    <template>
        <ul style="margin: 0; padding-left: 20px;">
        <template bind repeat="{{item in transformedValue}}">
            <li><p-html html="{{item}}"></p-html></li>
        </template>
        </ul>
    </template>
    <script>
    Polymer('p-element-list', {
        transform: function () {

            var items = [];

            if (_.isArray(this.value)) {
                _.each(this.value, function (item) {
                    items.push(this.parseTemplate(item));
                }, this);
            }

            return this.transformedValue || items;
        },
        reverseTransform: function () {
            return $(this.$.element).html()
        },

        getHtml: function() {
            return $(this.$.element).html()
        },

        getValue: function () {
            return this.value;
        }
    })
    </script>
</polymer-element>

<polymer-element name="p-element-notes" extends="p-base-element" attributes="rows cols value">
    <template>
        <style>
            :host {
                display:block;
                cursor: default;
            }
            .element-input {
                width: inherit;
                height: inherit;
            }
            [disabled] {
                background-color: #eeeeee;
            }
            [hidden] {
                display: none !important;
            }

            #show, #remove {
                position: relative;
                top:4px
            }
            .element-link {
                /*color: blue;*/
                text-decoration: underline;
            }
            p-element-image {
                cursor: pointer;
            }

            p-element-image:hover {
                padding-top:1px;
            }


        </style>
        <span id="element" class="element-input" style="display:inline-block">
            <p-element-image id="show" on-click="{{displayNotes}}" clickable="false" bgColor="{{bgColor}}" width="20" height="20"></p-element-image>
            <table cellspacing="0" cellpadding="0"><tr>
                <td>
                    <p-element-textarea id="notes" class="element-textarea"  rows="{{rows}}" cols="{{cols}}" hidden="true" on-change="{{textareaChanged}}"></p-element-textarea>
                </td>
                <td style="display:inline-block;" >
                    <p-element-image id="remove"  on-click="{{removeNote}}" style="display:inline-block;padding-left:5px" clickable="false" bgColor="transparent"></p-element-image>
                </td>
            </tr></table>
        </span>

    </template>
    <script>
        Polymer('p-element-notes', {
            rows: 3,
            cols: 20,
            elementClass: 'element-notes',
            clickable: true,

            afterInitialized: function () {

                if ( this.params && this.params.value || this.value ) {
                    this.$.notes.initValue(this.params && this.params.value || this.value);
                }

                this.$.show.value = this.params && this.params.imageShow || "note"
                this.$.remove.value = this.params && this.params.imageRemove || "closelabel.png"
                this.displayNotes(this.params && this.params.value || this.value);

                //todo: review

                if (this.afterRender) {
                    this.bgColor = getComputedStyle(this).content;
                    this.async(this.afterRender, null, 100);
                }
            },

            displayNotes: function (showNote) {
                this.$.show.hidden = showNote ? true : false;
                this.$.notes.hidden = showNote ? false : true;
                this.$.remove.hidden = showNote ? false : true;
            },

            textareaChanged: function (old, value) {
                this.setValue(value);
            },

            removeNote: function () {
                this.$.notes.initValue("");
                this.setValue("");
                this.dataValue = "";
                this.displayNotes(false);
            }


        });
    </script>
</polymer-element>

<polymer-element name="p-element-image" extends="p-base-element" attributes="value clickable width height tabindex bgColor">
    <template>
        <link rel="stylesheet" type="text/css" href="/static/css/scss/default.css">
        <template bind if="{{ isImage }}">
            <img id="element" class="element-output {{elementClass}}" src="{{transformedValue}}" title="{{tooltip}}"  on-click="{{onClicked}}" tabindex="{{tabindex}}" width="{{width}}" height="{{height}}">
        </template>
        <template bind if="{{ isBg }}">
            <div id="element" style="display: inline-block;width: inherit;height: inherit;white-space: nowrap" class="element-output {{elementClass}} {{transformedValue}}" title="{{tooltip}}" tabindex="{{tabindex}}" on-click="{{onClicked}}"><span style='position:relative;left: 24px;height: inherit;display: inline-table'>{{label}}</span></div>
        </template>
    </template>
    <script>
        Polymer('p-element-image', {
            elementClass: 'element-image',
            clickable: false,
            publish: {
                isImage: {
                    value: false,
                    reflect: true
                },
                isBg: {
                    value: false,
                    reflect: true
                },
                value: {
                    reflect: true
                }
            },

            //alwaysPrepare: true,

            initialize: function () {

                /*
                 var link = document.createElement('link');
                 link.rel = 'stylesheet';
                 link.href = '/static/css/scss/default.css';
                 document.head.appendChild(link);*/

                if (this.params && this.params.bgColor) {
                    this.bgColor = this.params.bgColor;
                }

                if (this.params && this.params.label) {
                    this.label = this.params.label;
                }

                this.template = "{{value}}";

                this.clickable = this.clickable || (this.params && this.params.clickable);

                if (_.isNull(this.tabindex) && this.clickable) {
                    this.tabindex = 0;
                }

                if (!this.value && (this.params && this.params.image)) {
                    this.setValue(this.params.image); //mandatory otherwise transform not called
                }

            },

            onClicked: function () {

                //annoying polymer, not propagating event
                var parent = $(this).parents("a");

                if (parent.length) {

                    this.handler = function () {
                        window.location = parent.attr("href");
                    };

                    this.clickable = true;

                    this.super();

                } else if (this.clickable) {

                    this.super();
                }

            },

            transform: function () {

                if (this.params && this.params.tooltip) {
                    this.tooltip = this.params.tooltip;
                }

                if ((this.params && this.params.image) || this.value) {

                    var image = (this.value || (this.params && this.params.image)).replace(/#/g, encodeURIComponent("#"));

                    this.isImage = Helper.hasImageExtension(image);

                    this.isBg = !this.isImage;

                    if (this.isImage) {
                        var value;

                        if (image.indexOf("http") != 0) {
                            var path = (this.params && this.params.path) ||
                                    (this.params && this.params.local && (config.rootUrl + config.localPath + CONST.Path.Image)) ||
                                    (config.rootUrl + config.globalPath + CONST.Path.Image);

                            value = (image.indexOf(path) != -1) ? image : (path + image);
                        } else {
                            value = image;
                        }

                        return this.parseTemplate({ value:  value });

                    } else {

                        var prefix = this.params && this.params.prefix || "img-";
                        return (image.indexOf(prefix) != -1) ? image : (prefix + image);

                    }

                }
            },

            afterRender: function () {
                var styles = {
                    width: (this.width || (this.params && this.params.width)),
                    height: (this.height || (this.params && this.params.height))
                };

                if (this.bgColor) {
                    styles.backgroundColor = this.bgColor;
                }

                $((this.shadowRoot || this.webKitShadowRoot).querySelector('#element')).css(styles);

                this.super();
            }
        });
    </script>
</polymer-element>

<polymer-element name="p-element-file" extends="p-base-element" attributes="multiple">
    <template>
        <template if="{{multiple}}">
            <form id="form" enctype='multipart/form-data'>
                <input id="element" style="position: relative;top:-2px;" name="files[]" type="file" multiple>
            </form>
            <div style="height: 20px;padding-top:10px">
                <progress id="progress" hidden="true"></progress>
            </div>
        </template>
        <template if="{{!multiple}}">
            <input id="element" name="file" type="file">
            <div style="height: 20px;padding-top:10px">
                <progress id="progress" hidden="true"></progress>
            </div>
        </template>
    </template>
    <script>
        Polymer('p-element-file', {
            multiple: false,
            maxFileSize: 0, //set to 0 to allow any size by default
            initialize: function () {
                if (this.params && !_.isUndefined(this.params.multiple)) {
                    this.multiple = this.params.multiple;
                }
                if (this.params && !_.isUndefined(this.params.size)) {
                    this.maxFileSize = this.params.size;
                }
                if (this.params && !_.isUndefined(this.params.maxFileSize)) {
                    this.maxFileSize = this.params.maxFileSize;
                }
            },
            reverseTransformInput: function () {
                //return a Form Data
                var element = $((this.shadowRoot || this.webKitShadowRoot).querySelector('#element'))[0];

                if (element.files.length) {
                    if (this.multiple) {
                        var form = $((this.shadowRoot || this.webKitShadowRoot).querySelector('#form'))[0];
                        return new FormData(form);
                    } else {
                        var data = new FormData();
                        data.append('file', element.files[0]);  //name it "file"
                        return data;
                    }
                }

            },
            isValidFileSize: function (maxFileSize) {
                maxFileSize = maxFileSize || this.maxFileSize || 0;
                var element = $((this.shadowRoot || this.webKitShadowRoot).querySelector('#element'))[0];

                var isValid = true;

                if (maxFileSize && element.files.length) {
                    if (this.multiple) {

                        isValid = _.every(element.files, function (file) {
                            return file.size <= maxFileSize;
                        }, this)

                    } else {

                        isValid = element.files[0].size <= maxFileSize;

                    }
                }

                return isValid;
            },
            showProgress: function () {
                var element = $((this.shadowRoot || this.webKitShadowRoot).querySelector('#progress'));
                element.show();
            },
            hideProgress: function () {
                var element = $((this.shadowRoot || this.webKitShadowRoot).querySelector('#progress'));
                element.hide();
            },
            updateProgress: function (e) {
                if (e && e.lengthComputable) {
                    var element = $((this.shadowRoot || this.webKitShadowRoot).querySelector('#progress'));
                    element.attr({ value: e.loaded, max: e.total });
                }
            }

        });
    </script>
</polymer-element>

<polymer-element name="p-element-radiobox-group" extends="p-base-element" attributes="">

    <template>
        <template bind if="{{input}}">
            <template bind if="{{vertical}}">
                <span id="element" class="element-input {{elementClass}}" >
                    <template bind repeat="{{choice in choices}}" >
                        <p-element-radiobox dataValue="{{choice.value}}" selected="{{choice.selected}}" label={{choice.label}} group={{choice.group}} on-change="{{elementChanged}}"></p-element-radiobox>
                        <br />
                    </template>
                </span>
            </template>
            <template bind if="{{!vertical}}">
                <span id="element" class="element-input {{elementClass}}"style="display:flex">
                    <template bind repeat="{{choice in choices}}" >
                        <p-element-radiobox dataValue="{{choice.value}}" selected="{{choice.selected}}" label={{choice.label}} group={{choice.group}} on-change="{{elementChanged}}"></p-element-radiobox>
                    </template>
                </span>
            </template>
        </template>
    </template>
    <script>
        Polymer('p-element-radiobox-group', {
            elementClass: 'element-radiobox-group',
            vertical: false,

            elementChanged: function (a, b, element) {

                this.setValue(element.getValue());
            },

            afterRender: function () {

                var items = this.params && (this.params.choices || this.params.items);

                if (items) {

                    var choices = items.map(function (choice, index) {

                        if (_.isObject(choice)) {

                            if (!choice.group) {
                                choice.group = this["data-key"];
                            }

                            if (_.isUndefined(choice.value)) {
                                choice.value = index;
                            }

                            if (_.isUndefined(choice.selected)) {
                                choice.selected = false;
                            }

                            return choice;

                        } else {
                            return {
                                "label": choice,
                                "group": this["data-key"],
                                "value": index,
                                "selected": false
                            };
                        }



                    }, this);

                    if (!_.isUndefined(this.params.vertical)) {
                        this.vertical = this.params.vertical
                    }

                    choices = _.map(choices, function (choice) {
                        choice.vertical = this.vertical;
                        return choice;
                    }, this);

                    //set initial value based on selected one or value
                    var selectedChoices = _.filter(choices, function(choice) {

                        if (!ph.isNullOrUndefined(this.value)) {  //when a value is provided, overwrite default selection
                            choice.selected = (choice.value == this.value);
                        }

                        return choice.selected;

                    }, this);

                    // due to possible wrong config, get the last one or set to null
                    this.setValue(selectedChoices.length ?
                            selectedChoices[selectedChoices.length-1].value :
                            null);

                    this.choices = choices;

                }

                this.super();

            },

            getValue: function () {
                return _.isUndefined( this.value ) ? null : this.value ;
            },

            reset: function () {

                this.setValue(null);

                _.each(this.shadowRoot.querySelectorAll('p-element-radiobox'), function (el) {
                    el.reset()
                });

            }

        });
    </script>
</polymer-element>

<polymer-element name="p-element-radiobox" extends="p-base-element" attributes="selected label group">
    <template>
        <style>
            input {
                position:relative;
                top:3px;
            }
            label {
                font-size: 11px;
                line-height: 18px;
                vertical-align: middle;
                height: 20px;

            }
            label:hover {
                cursor: pointer !important;
            }
            [hidden] {
                display: none !important;
            }
        </style>
        <template bind if="{{input}}">
            <label style="white-space: nowrap"><input id="element" class="element-input {{elementClass}}" type="radio" checked="{{ transformedValue }}" name={{group}} on-change="{{elementChanged}}">{{label}}</label>
        </template>
        <template bind if="{{output}}">
            <label style="white-space: nowrap"><input id="element" class="element-input {{elementClass}}" type="radio" checked="{{ transformedValue }}" name={{group}} disabled>{{label}}</label>
        </template>
    </template>
    <script>
        Polymer('p-element-radiobox', {
            elementClass: 'element-radiobox',

            elementChanged: function (old, value, element) {
                this.selected = $(element).is(":checked");

                this.fire("change", this.getValue());
            },

            afterRender: function () {
                if (this.params && this.params.label) {
                    this.label = decodeURIComponent(this.params.label);
                }
                this.super();
            },

            getValue: function () {
                return this.selected ? this.value : null;
            },

            transform: function (value) {
                return this.selected ? true : false;
            },

            reverseTransform: function () {
                return this.value;
            },

            reset: function () {
                this.selected = false;
                this.shadowRoot.querySelector('#element').checked = false;
            }

        });
    </script>
</polymer-element>

<polymer-element name="p-element-boolean" extends="p-base-element">
    <template>
        <template bind if="{{input}}">
            <input id="element" class="element-input {{elementClass}}" type="checkbox" checked="{{ transformedValue }}" on-change="{{elementChanged}}">
        </template>
        <template bind if="{{output}}">
            <span id="element" class="element-output {{elementClass}} {{elementLink}}" on-click="{{onClicked}}">{{transformedValue}}</span>
        </template>
    </template>
    <script>
        Polymer('p-element-boolean', {
            elementClass: 'element-boolean',

            elementChanged: function (event, o, element) {
                this.checked = $(element).is(":checked");
                this.setValue(this.checked);
            },

            transformOutput: function (value) {
                return this.value ? "true" : "false"
            },

            reverseTransformInput: function (value) {
                return this.checked || false;
            },

            reverseTransformOutput: function (value) {
                return (this.value === "true");
            }
        });
    </script>
</polymer-element>

<polymer-element name="p-element-checkbox" extends="p-base-element" attributes="checked label disabled">
    <template>
        <style>
            label {
                white-space: nowrap;
            }
            label:hover {
                cursor: pointer !important;
            }
            [hidden] {
                display: none !important;
            }
        </style>
        <template bind if="{{input}}">
            <label for="element" style="width:inherit;height:inherit;vertical-align: top;display:inline-block;"><input id="element" style="width:inherit;height:inherit;" class="element-input {{elementClass}}" title="{{tooltip}}" type="checkbox" disabled?="{{disabled}}" checked="{{ transformedValue }}" on-change="{{elementChanged}}">{{label}}</label>
        </template>
        <template bind if="{{output}}" style="vertical-align: top">
            <label for="element"><input id="element" class="element-input {{elementClass}}" title="{{tooltip}}" type="checkbox"  checked="{{ transformedValue }}" disabled>{{label}}</label>
        </template>
    </template>
    <script>
        Polymer('p-element-checkbox', {
            elementClass: 'element-checkbox',
            label: "",  //make sure label is a string by default otherwise "null" will be displayed

            elementChanged: function (event, o, element) {
                this.setValue($(element).is(":checked"));
            },

            afterRender: function () {
                if (this.params && this.params.label) {
                    this.label = decodeURIComponent(this.params.label);
                }

                this.super();
            },

            setValue: function (value) {
                this.value = value;
            },

            transform: function (value) {
                return (value || value == "true") ? true : false;
            },

            reverseTransform: function () {
                return this.value || false;
            }
        });
    </script>
</polymer-element>

<polymer-element name="p-element-select" extends="p-base-element" attributes="multiple name disabled options">
<script>
Polymer('p-element-select', {
    elementClass: 'element-select',

    initialize: function () {

        // default configuration:
        this.template = "{{displayString}}";
        this.primaryKey = "id";
        this.store = [];
        this.storeLoaded = false;
        this.selectedOption = null;
        this.fieldLabel = "Select an item";
        this.disabled = this.isOutputMode();
        this.preLoad = true;
        this.loadingImage = "loading_dropdown_white.gif";
        //this.$.loadingImage.hidden = true;

        // custom configuration
        if (!_.isUndefined(this["data-params"])) {
            this.params = this.objectify(this["data-params"]);

            if (this.params) {
                this.primaryKey = this.params.primaryKey || this.primaryKey;

                //providing a store will mark it as loaded as well
                if (_.isArray(this.params.store)) {
                    this.store = this.params.store;
                    this.storeLoaded = true;
                }

                this.template = this.params.template || this.template;
                this.fieldLabel = _.isUndefined(this.params.fieldLabel) ? this.fieldLabel  : this.params.fieldLabel;
            }
        }


        // dataValue simulate a selected option
        // instead of loading a store, which can be a time-consuming process, the component can render the option directly
        // The user will see a combo box with the selected option even if the store behind is not yet loaded
        // the store will be loaded on click event like it does by default
        // this feature adds complexity but the performances gained are essential
        // Issue fixed: when dataValue provided doesn't bring a "displayString", the store must be loaded otherwise the selected option displayed
        // will be empty.
        this.presetValue(this["dataValue"], this.getValue());

    },

    //todo: find a better name
    presetValue: function (dataValue, value) {

        if (_.isUndefined(dataValue) || _.isNull(dataValue) || dataValue == "") { return; }

        var records = _.isObject(dataValue) ? dataValue : this.objectify(dataValue);

        if (!ph.isNullOrUndefined(records)) {
            var record = _.isArray(records) ? records[0] : records;

            this.selectedOption = {
                value: _.isObject(record) ? (record.id || record.value) : record,              //sometimes record is the id itself
                label: _.isObject(record) ? this.getLabel(record) : ""
            };

            if (this.selectedOption.label === "") {
                //must load the store when no label provided
                this.loadStore({ render: true }, function() {
                    if (this.selectedOption && !_.isUndefined(this.selectedOption.value)) {
                        this.setValue(this.selectedOption.value);
                        this.selectItem(this.selectedOption.value);
                    }
                }, this, { query: { id: this.selectedOption.value } });
            } else {
                //fake the store, ie using the record as if the store was loaded
                this.store = [record];
                if (this.selectedOption && !_.isUndefined(this.selectedOption.value)) {
                    this.setValue(this.selectedOption.value);
                }
            }


        }
    },

    ready: function () {
        var self = this;

        this.initialize();

        if (_.isFunction(this.afterInitialized)) {
            this.afterInitialized();
        }

        this.render();

        //this.afterRender();  //no longer needed with domReady
    },

    //render the dropdown list
    render: function (selectedOption) {

        var options = [];

        //first item optional if no fieldLabel defined (i.e. empty string will create a first option)
        if (!_.isUndefined( this.fieldLabel )) {
            options.push({
                "value": "",
                "label": this.fieldLabel
            });
        }

        //automatically select first one if unique
        if (this.store.length === 1 && false) {   //disable for now

            //this.trackChanges = true;
            //this.previousValue = null; //trick. Todo: fix issue here where setValue called twice and notifyChanges no longer fired
            this.setValue(this.store[0][this.primaryKey]);

            this.selectedOption = {
                value: this.store[0][this.primaryKey],
                label: this.getLabel(this.store[0])
            };

        }

        //the list of options is either:
        // based on the store if store exists
        // based on the selectedOption if selectedOption exists
        var records = this.store.length ?
                this.store :
                ( this.selectedOption ? [this.selectedOption] : [] );

        if (records.length) {
            _.each(records, function (record) {
                options.push({
                    value: record[this.primaryKey],
                    label: this.getLabel(record)
                });
            }, this);
        }

        //mark selected option as "selected" otherwise "notselected" (shitty polymer way)

        var selectedValue = (selectedOption && selectedOption.value) || (this.selectedOption && this.selectedOption.value) || "";

        _.each(options, function (option) {
            if (option.value == selectedValue) {
                option.selected = true;
            } else {
                option.notselected = true;
            }
        });

        //render within polymer template
        this.options = options;
    },


    //temp until moved to loadStore
    selectItemIfUnique: function () {
        var _selectIfUnique = function () {
            if (this.store.length === 1) {
                this.setValue(this.store[0].id, { trackChanges: true, selectItem: true });
            }
        };

        if (this.storeLoaded) {
            _selectIfUnique.call(this);
        } else {
            this.loadStore({ render: false, show: false }, function() {
                _selectIfUnique.call(this);
            }, this);
        }
    },

    selectFirstItem: function () {
        var _selectFirstItem = function () {
            if (this.store.length >= 1) {
                this.setValue(this.store[0].id, { trackChanges: true, selectItem: true });
            }
        };

        if (this.storeLoaded) {
            _selectFirstItem.call(this);
        } else {
            this.loadStore({ render: false, show: false }, function() {
                _selectFirstItem.call(this);
            }, this);
        }
    },

    // return the label based on the template
    getLabel: function (record) {
        return Helper.unescape( Helper.compileTemplate(this.template)(record) );
    },

    getSelectedText: function () {
        return $(this.$.element).find("option:selected").text()
    },



    // load the store by request the data to the controller
    // which is returned through a call back
    // loadStore will not execute if the store has already been loaded
    // loadStore also provides a callback
    // a loading image will appear and be removed with callback
    loadStore: function (options, callback, scope, params) {
        options = options || {};
        params = params || {};

        var self = this;

        var _render = function (selectedOption) {

            if (options) {

                if (options.render) {
                    self.render(selectedOption);
                }

                if (options.show) {
                    self.displayDropdownList(true);
                }

            }

            if (selectedOption) {
                self.selectOption(selectedOption.value)
            }

        };

        if (options.reset) {
            this.resetStore();
        }

        if (!this.storeLoaded) {

            //as it may last for a while, display the small loading image
            //this.$.loadingImage.hidden = false;

            //added to make sure to load the current value if we partially load the data
            //we will still have an issue if we have a low limit and too many result with this input text
            //todo: search by id
            var inputText = this.getInputText()
            if (inputText) {
                params.search = inputText;
            }

            this.request("load", function (data, selectedOption) {

                this.storeLoaded = true;
                //this.$.loadingImage.hidden = true;
                this.store = data || [];

                _render(selectedOption);

                Helper.callback(callback, scope);

            }, this, params)


            /*
            _.delay(function () {

                if (self.$.loadingImage) {
                    self.$.loadingImage.hidden = true;  //in case no callback after x seconds
                }
            }, 3000);*/

        } else {
            _render();
            Helper.callback(callback, scope);
        }


    },

    //make sure storeLoaded is set to false prior to calling loadStore
    reloadStore: function (defaultValue) {

        if (defaultValue) {
            this.storeLoaded = false;
            this.setValue(defaultValue);
        } else {
            this.loadStore({ reset: true, render: true});
        }

    },

    resetStore: function () {
        this.setValue("");
        this.dataValue = "";
        this.store = [];
        this.storeLoaded = false;
        this.previousValue = null;
        this.selectedOption = null;
        //this.render();
    },



    // deal with tricky events

    // when clicking on the dropdown:
    //   - if the store isn't loaded
    //     => hide the dropdownlist (empty one with label field only)
    //     => load the store
    //     => render the options
    //     => show the dropdownlist

    //   - if the store is loaded
    //     => do nothing
    onMouseDown: function (e) {

        if (!this.storeLoaded) {
            e.preventDefault();
            e.stopPropagation();
            this.clickDropdown();
        }

    },

    clickDropdown: function () {
        this.displayDropdownList(false); //hide dd
        var value = this.value;

        this.loadStore({ render: true, show: true, selectedValue: this.value }, function() {
            this.selectItem(value);
        }, this);
    },
    /*
     onFocus: function (e) {
     if (!this.mousedown) {

     //if no selection yet, display the dropdown
     if (!this.value) {
     this.showDropdownList();
     }

     }

     this.mousedown = false;
     },
     onFocusOut: function () {
     this.mousedown = false;
     },*/

    //experimental feature as will probably create an issue with certain browsers
    displayDropdownList: function (show) {

        if (!show) return; //temp testing

        var self = this;
        var eventName = show ? 'mousedown' : 'mouseup';

        this.async(function () {
            //Platform.flush(); //not sure this does accelerate

            //Platform.performMicrotaskCheckpoint();

            _.delay(function () {
                var element = $((self.shadowRoot || self.webKitShadowRoot).querySelector('#element'));
                show ? $(element).mousedown() : $(element).mouseup();

                var event = document.createEvent('MouseEvents');
                event.initMouseEvent(eventName, true, true, window);
                $(element)[0].dispatchEvent(event);
            }, 1)
        });

    },

    keydownHandler: function (e) {
        switch (e.keyCode) {
            case 13: // enter
                e.preventDefault();
                e.stopPropagation();
                this.clickDropdown();
                break;
            default:
                break;
        }
    },

    /*
     onFocus: function (e) {
     if (!this.mousedown) {

     //if no value yet, display the dropdown
     if (!this.value) {
     this.async(this.showDropdown, $((this.shadowRoot || this.webKitShadowRoot).querySelector('#element')));
     }

     }

     this.mousedown = false;
     },
     onFocusOut: function () {
     this.mousedown = false;
     },
     */



    disabledChanged: function (value) {

        if (this.$ && this.$.element) {
            this.$.element.disabled = this.disabled;
        }

    },


    isSelectedRecord: function (record) {
        return _.find(this.selectedRecords, function (selectedRecord) {
            return selectedRecord[this.primaryKey] == record[this.primaryKey];
        }, this) ? true : false;
    },



    // when the selected value changed
    // - update the selectedOption property
    // - update the value
    // - update dataValue?
    onChange: function () {
          /*
        var value = this.$.element.value;

        this.setValue(value);

        this.selectedOption = _.findWhere(this.options, { value: this.value });
        */

    },

    // change the value, set it to empty string if not valid (should be an integer)
    setValue: function (value, options) {

        var parsedValue = (_.isObject(value) && parseInt(value.id) ) ? parseInt(value.id) : ( _.isNaN(parseInt(value)) ? "" : parseInt(value) );

        this.previousValue = this.value;
        this.value = parsedValue;

        if (!_.isNaN(parseInt(this.previousValue))) {
            this.selectItem(this.value);
        }

    },

    selectItem: function (value) {

        var element = $(this.$.element);

        if (this.storeLoaded) {

            /*
             if (element.val() != value) {
             element.val(value);
             } */
            setTimeout(function () {
                if (element.val() != value) {
                    element.val(value);
                }
            }, 100)

        } else {

            this.loadStore({render: true}, function () {
                setTimeout(function () {
                    if (element.val() != value) {
                        element.val(value);
                    }
                }, 100)

            }, this)
        }

    },

    // select one of the available option by value
    selectOption: function (value) {
        this.async(function () {
            this.setValue(value);
            this.$.element.value = value;
        }, this);
    },

    reverseTransformInput: function (value) {
        return parseInt(this.value) || null;
    },

    reverseTransformOutput: function (value) {
        return parseInt(value) || null;
    },

    reset: function () {
        this.setValue(null);

        _.each(this.shadowRoot.querySelectorAll('#element'), function (el) {
            $(el).val("");
        });

    }

    /*,

     afterRender: function () {

     //$(this.$.element).selectbox()
     var self = this;

     this.async(function () {
     //, $((this.shadowRoot || this.webKitShadowRoot).querySelector('#element')))
     console.log("$(self.$.element)", $(self.$.element))
     console.log("$((this.shadowRoot || this.webKitShadowRoot).querySelector('#element')))", $((this.shadowRoot || this.webKitShadowRoot).querySelector('#element')) )
     //var element = (self.shadowRoot || self.webKitShadowRoot).querySelector('#element')
     var element = (self.shadowRoot || self.webKitShadowRoot).getElementById('element');



     jQuery(element).selectbox({
     onOpen: function () {
     console.log("onOpen")
     }
     })
     self.super()
     //console.log($((this.shadowRoot || this.webKitShadowRoot).querySelector('#element')))
     });


     }*/

});

</script>
</polymer-element>

<polymer-element name="p-element-typeahead" extends="p-element-select" attributes="adjustPosition">
<template>
    <style>
        :host {
            display:block;
        }
        [hidden] {
            display: none !important;
        }
        .element-input {
            width: 100%;
            height: 28px !important;
            box-sizing: border-box;
            border: 1px solid #ABABAB;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            padding: 3px 10px 3px 5px;
            background-color: white;
            padding-left: 10px;
        }

        .element-input:hover {
            cursor: pointer;
        }


        #list {

            /*background-clip: content-box;*/
            z-index: 10090;
            overflow-y: auto;
            overflow-x: hidden;
            border: 1px solid #d1d1d1;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            position:absolute;
            white-space: nowrap;
        }

        .menuitems {
            max-height: 250px;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 5px 0px 5px 0px;
            background: #ffffff;
            white-space: nowrap;
        }

        .noRecords {
            z-index: 10090;
            overflow-y: hidden;
            overflow-x: hidden;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            top:0px;
            position: relative;
        }

        .noRecords:hover {
            cursor: default;
        }

        .noRecord {

            line-height: 30px;
            vertical-align: middle;
            padding: 0 20px 0 20px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            z-index: 90;
            position: relative;
            top: 0px;
            border-top: 1px solid #bbbdc2;
            text-decoration: none;
            color: red;
            opacity: 1 !important;
            background: white;
            text-align: center;
        }

        .noRecord:hover {
            cursor: default;

        }

        .actions {
            border-top: 1px solid #777777 !important;
            z-index: 90;
            overflow-x: hidden;
            overflow-x: hidden;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            top:0px;
            position: relative;
        }

        .action {

            line-height: 30px;
            vertical-align: middle;
            padding: 0 10px 0 10px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            z-index: 90;
            position: relative;
            top: 0px;
            border-top: 1px solid #bbbdc2;
            text-decoration: none;
            color: #494949;
            opacity: 1 !important;
            background: #f1f1f1;
            text-align: center;
        }

        .action:hover {
            opacity: 1;
            text-decoration:none;
            color: #ffffff;
            background-color: #b1b1b1 !important;

        }

        .item .label{
            line-height: 18px;
            vertical-align: middle;
            padding: 2px 10px 2px 10px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            z-index: 90;
            position: relative;
            top: 0px;
            margin:2px 6px 2px 6px;
            border-radius: 5px;
        }

        .item .label:hover{
            background-color: #f1f1f1;
        }

        .item.selected .label{
            background-color: #b6dbf2;
        }

        .item {
            background-color: white;
        }

        .item:nth-child(odd) {
            background-color: white;
        }

    </style>

    <span id="container" class="{{elementClass}}">
        <div style="position:relative;width:inherit;box-sizing: border-box">
            <input id="element" class="element-input" type="text" on-mousedown="{{onMouseClickTextField}}" on-keyup="{{onKeyUp}}" on-keydown="{{onKeyDown}}" on-change="{{onChange}}" value="{{inputValue}}" tabindex="0" placeholder="{{fieldLabel}}">
        </div>
        <div id="list" hidden?="{{!ddMenu}}">
            <div class="menuitems" hidden?="{{!menu}}"><template bind repeat="{{menu}}" ><div on-click="{{onMenuItemClicked}}" class="item" value="{{value}}" ><div class="label"><p-html html="{{label}}"></p-html></div></div></template></div>
            <div class="noRecords" hidden?="{{!noRecords}}"><div class="noRecord">No Record Found</div></div>
            <div class="actions" hidden?="{{!actions}}"><template bind repeat="{{actions}}" ><div on-click="{{onActionClicked}}" class="action" value="{{value}}"><p-html html="{{label}}"></p-html></div></template></div>
        </div>
    </span>
</template>
<script>
Polymer('p-element-typeahead', {
    ddMenu: false,
    allowCreate: false,
    onlyCreate: false,
    elementClass: "element-typeahead",
    focused: false, //issue with polymer focus and jquery focus. To be reviewed.
    publish: {
        value: {
            reflect: true
        }
    },
    adjustPosition: true,
    autoHideDelay: 1000000,  //figure out why autoHide was build (long delay for now)

    // EVENTS
    // on click the text field
    //   -> focus the text field, cursor to last position
    //   -> display the drop down (not filtered, full store with formatting of the text field content
    // Notes:
    // if the text field was already focused, just display drop down if not already displayed

    // on enter text
    //   -> display the drop down if not already displayed
    //   -> filter the results with the the text field and also format
    // Notes:
    // [Enter] should fire enter text so that if user click the full combo is displayed and the text field selected
    // and enter will then reduce the results.
    // [Escape] will hide the dropdown
    // [ArrowUp] will select the previous item or last one
    // [ArrowDown] will select the next item or first one
    // [ArrowLeft] and [ArrowRight] should be ignored

    onChange: function () {
		if (this.onlyCreate) {
        	var value = this.$.element.value;

    	    this.setValue(value);

	        this.selectedOption = _.findWhere(this.options, { value: this.value });
		} else {
	        this.reset()
		}
    },

    onMouseClickTextField: function () {

        // on click the text field
        //   -> focus the text field, cursor to last position
        //   -> then display the drop down (not filtered, full store with formatting of the text field content
        // Notes:
        // if the text field was already focused, just display drop down if not already displayed

        this.focusTextField(function () {
            if (!this.isDropDownDisplayed()) {
                this.getRecords(function (records) {
                    this.renderDropDown(records, this.getInputText(), true);
                }, this);
            } else {
                this.displayDropDown(false);
            }

        }, this);


    },

    onKeyUp: function (e) {

        switch (e.keyCode) {
            case CONST.KeyCode.Down:
            case CONST.KeyCode.Up:
            case CONST.KeyCode.Escape:
            case CONST.KeyCode.Enter:
            case CONST.KeyCode.Tab:
            case CONST.KeyCode.Shift:
            case CONST.KeyCode.PageDown:
            case CONST.KeyCode.PageUp:
            //case CONST.KeyCode.Delete:
            //case CONST.KeyCode.BackSpace:
                return;
        }

        var value = this.getInputText();
        var queries = _.compact(value.toLowerCase().split(' '));

        var callback = function (records) {
            var filteredStore = this.filterRecords(records, queries);

            this.renderDropDown(filteredStore, this.getInputText());

            var item = _.filter(records, function (item) {
                return this.getLabel(item).toLowerCase() === value.toLowerCase();
            }, this);


            if (item && item.length) {
                value = item[0].id;
                this.setValue(value);
            }
        };

        this.getRecords(callback, this);
        /*
         if (this.focused) {
         callback.call(this, this.store);
         } else {
         this.getRecords(callback, this);
         } */

    },

    onKeyDown: function (e) {

        var self = this;

        switch (e.keyCode) {

            case CONST.KeyCode.Delete:
            //case CONST.KeyCode.BackSpace:
                this.async(function () {
                    self.resetSelectedItem();
                });
                break;

            case CONST.KeyCode.PageDown:
                this.selectMenuItemByIncrement(10);
                e.preventDefault();
                e.stopPropagation();
                break;

            case CONST.KeyCode.Down:
                this.selectMenuItemByIncrement(1);
                e.preventDefault();
                e.stopPropagation();
                break;

            case CONST.KeyCode.Up:
                this.selectMenuItemByIncrement(-1);
                e.preventDefault();
                e.stopPropagation();
                break;

            case CONST.KeyCode.PageUp:
                this.selectMenuItemByIncrement(-10);
                e.preventDefault();
                e.stopPropagation();
                break;

            case CONST.KeyCode.Escape:
                this.displayDropDown(false);

                e.preventDefault();
                e.stopPropagation();
                break;

            case CONST.KeyCode.Enter:

                if (this.isDropDownDisplayed()) {
                    //tab and input, select first one
                    if (self.getInputText() && ph.isNullOrUndefined(self.selectedMenuItem)) {
                        self.resetSelectedItem();
                        self.selectMenuItem(1); //select first in list if no selection
                    }

                    this.displayDropDown(false);
                } else {
                    this.getRecords(function (records) {
                        this.renderDropDown(records, this.getInputText(), true);
                    }, this);
                }

                e.preventDefault();
                e.stopPropagation();
                break;

            case CONST.KeyCode.Tab:
                if (this.isDropDownDisplayed()) {

                    //tab and input, select first one
                    if (self.getInputText() && ph.isNullOrUndefined(self.selectedMenuItem)) {
                        self.resetSelectedItem();
                        self.selectMenuItem(1); //select first in list if no selection
                    }

                    self.displayDropDown(false);
                }

                break;

            default:
                break;
        }

    },

    onMenuItemClicked: function (event, idx, element) {

        var value = $(element).attr("value");
        var text = $(element).text();

        //set the element value
        this.setValue( this.onlyCreate ? text : value );

        //update the input value
        this.inputValue = text;

        //hide the menu
        this.displayDropDown(false);

        this.focusTextField(function () {
            this.setSelectedMenuItem(element);
        }, this);

    },

    onActionClicked: function (event, idx, element) {

        //hide the menu
        this.displayDropDown(false);

        var params = {
            value: $(element).attr("value"),
            actionIndex: this.getActionItemIndex(element),
            label: this.getInputText()
        };

        //fire event click
        this.request("click", function () {}, this, params);
    },

    // ********************** API ***************************

    setSelectedMenuItem: function (element) {
        this.selectedMenuItem = this.findSelectedMenuItem(element);
    },

    findSelectedMenuItem: function (element) {
        var items = $(this.getMenuItems());
        return element && items && items.index && items.index(element) || null;
    },

    displayDropDown: function (show) {

        //show/hide feature
        //before being displayed, readjust the size of the menu items to fit the container

        show = _.isUndefined(show) ? true : show;

        //if no items, or no actions, hide
        if (!this.onlyCreate && !this.allowCreate) {
            this.noRecords = (show && (!this.menu || !this.menu.length));
        } else {
            show = show && ((this.menu && this.menu.length) || (this.actions && this.actions.length));
        }

        if (show) {
            /*
             var self = this;

             self.async(function () {
             self.adjustMenuWidth();
             self.ddMenu = true;
             }, null, 1);*/
            this.adjustMenuWidth();
            this.ddMenu = true;

        } else {
            this.ddMenu = false;
            }

    },

    ddMenuChanged: function () {

        /*
        var self = this;


        if (this.ddMenu) {  //list shown

            var list = $((this.shadowRoot || this.webKitShadowRoot).querySelector('#list'));


            list.unbind("mouseenter");
            list.unbind("mouseleave");

            list.mouseenter(function () {
                self.mouseInList = true;
            });

            list.mouseleave(function () {
                self.mouseInList = false;
            });

        } else {
            self.mouseInList = false;
        }*/

        //$("someelement").mouseenter(function(){
        //clearTimeout($(this).data('timeoutId'));
        //$(this).find(".tooltip").fadeIn("slow");
        //})
    },

    isDropDownDisplayed: function () {
        //return true if the drop down is displayed
        return this.ddMenu;
    },

    focusTextField: function (callback, scope) {
        //focus the text field (if not already focused)
        this.focused = true;

        var textField = $((this.shadowRoot || this.webKitShadowRoot).querySelector('#element'));

        if (textField && !textField.is(":focus")) {
            textField.focus();

            Helper.callback(callback, scope); //doesn't work within callback of focus (coz unfocus), so moved outside
        } else {
            Helper.callback(callback, scope);
        }

    },

    resetSelectedItem: function () {
        this.removeSelectedItem();
        this.selectedMenuItem = null;
    },

    removeSelectedItem: function () {
        $((this.shadowRoot || this.webKitShadowRoot).querySelector('.selected')).removeClass("selected");
    },

    selectMenuItemByIncrement: function (inc) {
        if (this.isDropDownDisplayed()) {
            this.selectMenuItem(inc);
        } else {
            this.getRecords(function (records) {
                this.renderDropDown(records, this.getInputText(), true);
            }, this);
        }
    },

    selectMenuItem: function (inc) {

        this.selectNextMenuItem(inc);

        var selectedItem = $(this.getSelectedMenuItem());
        //set the element value

        var value = selectedItem.attr("value");
        var text = selectedItem.text();

        this.setValue(this.onlyCreate ? text : value, { selectItem: true, trackChanges: true });

        //set input value
        this.inputValue = text;

    },

    selectNextMenuItem: function (increment) {

        if (ph.isNullOrUndefined(this.selectedMenuItem)) {
            this.selectedMenuItem = 0;
        } else {
            this.selectedMenuItem += increment;
        }

        if (this.selectedMenuItem < 0) {
            //this.selectedMenuItem = this.getMenuItems().length - 1;
            this.selectedMenuItem = 0;
        } else if (this.selectedMenuItem > this.getMenuItems().length - 1) {
            this.selectedMenuItem = this.getMenuItems().length - 1;
        }

        this.selectMenuItemByIndex(this.selectedMenuItem, increment);

    },

    scrollTo: function (item, increment) {

        var container = $((this.shadowRoot || this.webKitShadowRoot).querySelector('.menuitems'));

        if (!item || !item.offset() || !container || !container.offset()) {
            return;
        }

        var isInView = function () {
            var pos = item.offset().top + item.outerHeight() - container.offset().top ;
            return (pos > 30 && pos < container.height()); //todo: review
        };

        if (!isInView()) {

            var topPos = item.get(0).offsetTop;

            var margin = 10;
            var height = container.height();

            var h = ((increment > 0) ? - height  + margin + 10 : - margin);
            container.get(0).scrollTop = topPos + h;
        }
    },

    selectMenuItemByIndex: function (index, increment) {
        this.removeSelectedItem();
        var item = $(this.getMenuItemByIndex(index));
        item.addClass("selected");
        this.scrollTo(item, increment);

        if (this.selectedMenuItem !== index) {
            this.selectedMenuItem = index;
        }
    },

    getSelectedMenuItem: function () {
        if (ph.isNullOrUndefined( this.selectedMenuItem )) {
            return;
        }
        var items = this.getMenuItems();
        return items[this.selectedMenuItem];
    },

    getMenuItems: function() {
        return this.shadowRoot.querySelectorAll('.item');
    },

    getActionItems: function() {
        return this.shadowRoot.querySelectorAll('.action');
    },

    getMenuItemByIndex: function(index) {
        return this.getMenuItems()[index];
    },

    getActionItemByIndex: function(index) {
        return this.getActionItems()[index];
    },

    getActionItemIndex: function(item) {
        return $(this.getActionItems()).index(item);
    },

    getInputText: function () {
        return this.$.element.value;
    },

    setInputText: function (value) {
        this.$.element.value = value;
    },


    getRecords: function(callback, scope) {

        this.storeLoaded = false; //from now on, store never loaded (to be fully refactored)

        if (this.storeLoaded) {
            Helper.callback(callback, scope || this, this.store);
        } else {
            var queryText = this.getInputText();

            this.loadStore(null, function () {
                Helper.callback(callback, scope || this, this.store);
            }, this, { search: queryText });
        }

    },

    filterRecords: function (records, queries) {

        if (ph.isNullOrUndefined(queries) || queries.length == 0) {
            return records;
        }

        if (records && queries) {

            if (_.isString(queries)) {
                queries = [queries];
            }

            var records =  _.filter(records, function (item) {
                if (this.getLabel(item)) {
                    return _.every(queries, function (query) {
                        return this.getLabel(item).toLowerCase().indexOf(query) != -1;
                    }, this)
                }
            }, this);

            //temp for now, filter also does reordering based on first word queried
            var firstQuery = queries[0];

            return _.sortBy(records, function (item) {
                var idx = -1;
                var label = this.getLabel(item);
                if (label) {
                    idx = label.toLowerCase().indexOf(firstQuery);
                }

                return idx === -1 ? 1000000 : idx;

            }, this)
        }

    },

    renderDropDown: function (records, queryText) {

        var menu = _.map(records, function (item) {
            return {
                "label": this.getLabel(item),
                "value": item.id
            }
        }, this);

        if (this.params && this.params.actions) {
            this.actions = this.params.actions;
        }



        if (!_.isEqual(this.menu, menu) || !_.isEqual(this.currentQuery, queryText)) {

            this.currentQuery = queryText;

            this.resetSelectedItem();

            this.menu = menu;
            var self = this;

            this.async(function () {
                self.emphasizeSearchedText(queryText);
                self.displayDropDown(true);
            }, null, 10);

            /*
             if ((this.menu && this.menu.length) || (this.actions && this.actions.length)) {    //mandatory to avoid little ui issue as this.menu automatically fires even if empty


             } else {
             self.displayDropDown(false);
             } */

        } else {

            if (!this.isDropDownDisplayed()) {
                this.displayDropDown(true);
            }

        }

    },

    emphasizeSearchedText: function (queries) {

        if (!queries) return;

        if (_.isString(queries)) {
            queries = [queries];
        }

        var items = $(this.getMenuItems());

        _.each(items, function (item) {

            var str = $(item).text();

            RegExp.quote = function(str) {
                return str.replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1");
            };

            _.each(queries, function (query) {
                str = str.replace(new RegExp(RegExp.quote(query), "gi"), function (match) { return "{{" + match + "}}" });
            });

            $(item).html('<div class="label">' + str.replace(new RegExp('{{', 'g'), '<b><u>').replace(new RegExp('}}', 'g'), '</u></b>') + '</span>');
        });

    },

    setValue: function (value, options) {

        options = options || {};

        if (options.trackChanges) {
            this.trackChanges = true;
        }

        var parsedValue = (this.allowCreate || this.onlyCreate) ?
                value :
                (_.isNaN(parseInt(value)) ? null : parseInt(value));

        this.previousValue = this.value;

        this.value = parsedValue;

        if (!this.onlyCreate && (!_.isNaN(parseInt(this.previousValue)) || options.selectItem)) {
            this.selectItem(this.value);
        }

        //set input value
        //this.inputValue = selectedItem.text();
    },

    selectItem: function (value) {

        //var element = $(this.$.element);
        var setInputValue = function (value) {
            if ( this.onlyCreate ) {
                this.inputValue = value;
            } else {
                var item = _.findWhere(this.store, { id: value });

                if  (item) {
                    this.inputValue = this.getLabel(item);
                } else {
                    if (!this.onlyCreate && !this.allowCreate) {
                        this.inputValue = "";
                    }
                }
            }
        }

        if (this.storeLoaded && this.store.length) {
            setInputValue.call(this, value);
        } else {

            this.storeLoaded = false;
            var self = this;

            setTimeout(function () {
                self.loadStore(null, function () {
                    setInputValue.call(self, value);
                }, self, { primaryKey: this.onlyCreate ? null: value })
            }, 100)
        }

    },

    reverseTransformInput: function (value) {

        return ( this.allowCreate || this.onlyCreate ) ?
                value :
                (_.isNaN(parseInt(value)) ? null : parseInt(value));
    },

    afterRender: function () {

        var wrapper = $(this.shadowRoot.querySelector("#container"));
        var self = this;

        wrapper.unbind();
        wrapper.on("mouseenter", function () {
            self.mouseIn = true;
        });
        wrapper.on("mouseleave", function () {
            self.mouseIn = false;

            setTimeout(function () {
                if (!self.mouseIn) {
                    self.displayDropDown(false);
                }
            }, self.autoHideDelay);

        });

        var clickOutsideWrapper = function (e)
        {
            if (!self.mouseIn && !wrapper.is(e.target) // if the target of the click isn't the container...
                    && wrapper.has(e.target).length === 0) // ... nor a descendant of the container
            {
                self.displayDropDown(false);
            }
        };

        $(document).unbind("mouesup", clickOutsideWrapper);
        $(document).mouseup(clickOutsideWrapper);

        if (!this.params) {
            this.params = {};
        }

        if (!_.isUndefined( this.params.allowCreate )) {
            this.allowCreate = this.params.allowCreate;
        }

        if (!_.isUndefined( this.params.onlyCreate )) {
            this.onlyCreate = this.params.onlyCreate;
        }

        if (!ph.isNullOrUndefined(this.value)) {
            if (this.onlyCreate) {
                this.$.element.value = this.value;
            } else {

                //set the input text based on the store
                if (this.store) {

                    var item = _.filter(this.store, function (item) {
                        return item.id === this.value;
                    }, this);

                    if (item && item.length) {
                        this.$.element.value = this.getLabel(item[0]);
                    }
                }
            }

        } else if (!ph.isNullOrUndefined(this.dataValue)) {

            if (this.onlyCreate) {
                this.dataValue = this.objectify(this.dataValue);
                this.$.element.value = this.dataValue;
            } else {
                if (!_.isObject(this.dataValue)) {
                    this.dataValue = this.objectify(this.dataValue);
                }

                this.$.element.value = _.isString(this.dataValue) ?
                        this.dataValue :
                        this.getLabel(this.dataValue);

            }

        }

        var imageUrl = config.rootUrl + config.globalPath + CONST.Path.Image + 'typeahead_arrow.png';

        var styles = {
            'background-image': 'url(' + imageUrl + ')',
            'background-repeat': 'no-repeat',
            'background-position': 'center right 7px',
            'background-size': '10px 16px',
            'text-overflow': 'ellipsis',
            'padding-right': '20px'
        };

        $((this.shadowRoot || this.webKitShadowRoot).querySelector('#element')).css(styles);

        this.super();  //important for trackchanges

    },

    adjustMenuWidth: function () {
        var element = $((this.shadowRoot || this.webKitShadowRoot).querySelector('#element'));

        var elementWidth = parseInt(element.css( "width").replace("px",""));
        var elementHeight = parseInt(element.css( "height").replace("px",""));
        var self = this;

        //1) default min width to elementWidth (if width used instead of min-width, issue with calculation due to delay)
        this.setItemMinWidth(elementWidth, true);

        //2) Increase width if necessary (delay necessary)
        this.async(function () {

            var width = 0;

            _.each([".item", ".noRecord", ".action"], function (selector) {
                _.each($((self.shadowRoot || self.webKitShadowRoot).querySelectorAll(selector)), function (item) {
                    var itemWidth = parseInt($(item).css( "width").replace("px",""));
                    if (itemWidth > width) {
                        width = itemWidth;
                    }
                });
            });

            if (width > elementWidth) {
                self.setItemMinWidth(width);
            }

        }, null, 200);

        //3) Review position (dd is floating and it will not consider the scroll)
        // get the position of the element first
        if (this.adjustPosition === true) {

            this.async(function () {
                var list = $((this.shadowRoot || this.webKitShadowRoot).querySelector('#list'));

                list.css({
                    position: "absolute",
                    top: $(self).position().top + elementHeight
                });
            }, null, 0);
        }

    },

    setItemMinWidth: function (width) {
        _.each([".item", ".noRecord", ".action"], function (selector) {
            var items = $((this.shadowRoot || this.webKitShadowRoot).querySelectorAll(selector));
            items.css({ minWidth: (width + "px") });
        }, this);
    },

    reloadStore: function () {
        this.loadStore({ reset: true, render: true }, function() {
            //make sure to reset the input too
            this.inputValue = "";
        }, this);
    }


});
</script>
</polymer-element>

<polymer-element name="p-element-template" extends="p-base-element">
    <template>
        <style>
            :host {
                display:block;
            }
            #element {
                width: inherit;
                height: inherit;
            }
            [hidden] {
                display: none !important;
            }
        </style>

        <span id="element" class="element-output {{elementClass}}">{{transformedValue}}</span>
    </template>
    <script>
        Polymer('p-element-template', {
            elementClass: 'element-template',
            isHTML: true,

            loadTemplate: function (name, data) {
                var self = this;
                var url = Helper.buildUrl(config.serverUrl + "File/findTemplate", { name: name });

                Helper.getData("", url, function (response) {
                    var template = response.template || "<div style='font-size: 2em;border: 1px dashed black;padding: 10px;width: 90%;height:400px;display: block;'>Template not available</div>";
                    self.compiledTemplate = Helper.compileTemplate(template, name);
                    self.setValue(self.compiledTemplate(data));
                });

                           /*
                Helper.load("Template", name, function (html) {

                    self.compiledTemplate = Helper.compileTemplate(html, name);
                    self.setValue(self.compiledTemplate(data));

                }, true);*/
            },

            transform: function (data) {

                if (_.isObject(data)) {

                    var name = data.name;
                    data = data.value || data.data;
                    this.loadTemplate(name, data);

                }

                return this.compiledTemplate ? data : "";
            },

            reverseTransform: function () {
                return $(this.$.element).html()
            },

            getHtml: function() {
                return $(this.$.element).html()
            },

            getValue: function () {
                return this.value;
            }

        });
    </script>
</polymer-element>

<polymer-element name="s-breadcrumbs" attributes="crumbs selected selectedCrumb">
    <template>
        <style>
            :host {
                display: inline-block;
                z-index:1000;
            }

            .label {
                display: inline-block;
                vertical-align: middle;
                font-size: 14px;
                font-weight: bold;
                cursor: pointer;
            }

            .label > a {
                text-decoration: underline;
                color: #575757;
                margin-right: 15px;
            }

            .label:nth-last-child(2) > a {
                /*color: #80b239;*/
                color: inherit;
                text-decoration: none;
            }

            a[disabled] {
                pointer-events: none;
            }
            [hidden] {
                display: none !important;
            }

        </style>
        <div id="crumbs">

            <template bind repeat="{{crumbs}}">
                <li class="label"><a href="{{href}}" hidden?="{{!href}}">{{label}}</a></li>
            </template>
            <li class="label"></li>
        </div>

    </template>
    <script>
        Polymer('s-breadcrumbs', {
            crumbsChanged: function () {
                if (this.crumbs.length != _.compact(this.crumbs).length) {
                    this.crumbs = _.compact(this.crumbs);
                }
            }
        });
    </script>
</polymer-element>





/******** END /static/ph-client/polymer-elements/default.html ********/