<div hidden="" by-polymer-bundler=""><link rel="import" href="../lib/polymer/polymer.html"><link rel="import" href="../lib/iron-flex-layout/iron-flex-layout.html"><link href="../lib/jsgrid/jsgrid-theme.min.css" rel="stylesheet">
<link href="../lib/jsgrid/jsgrid.min.css" rel="stylesheet">
<script src="../lib/jsgrid/jsgrid.min.js"></script>

<dom-module id="input-column" assetpath="bulk-input/">
    <template>
        <style>
             :host {
                display: block;
            }
        </style>

        <content id="displayTemplate" select="template.display">

        </content>

        <content id="editTemplate" select="template.edit">

        </content>
        <div id="view"></div>


    </template>

    <script>
        Polymer({

            is: 'input-column',
            behaviors: [
                Polymer.Templatizer
            ],
            properties: {
                field: {
                    type: String,
                    value: ''
                },
                title: {
                    type: String,
                    value: ''
                },
                type: {
                    type: String,
                    value: ''
                },
                width: {
                    type: Number,
                    value: null,
                },
                items: {
                    type: Object,
                    value: [],
                    observer: '_itemsChange'
                },
                item: {
                    type: Object,
                    value: null
                },
                valueField: {
                    type: String,
                    value: 'id'
                },
                textField: {
                    type: String,
                    value: 'value'
                },
                updateFunction: {
                    type: Object,
                    value: function () { }
                },
                edit: {
                    type: Boolean,
                    value: false
                },
            },
            attached: function () {
                // this.editHtml = $(this).find('.edit');
                // this.dispHtml = $(this).find('.display');
                this.async(function () {
                    if (this.type == "custom") {

                    }
                });
            },
            setData: function (row) {
                var def = $.Deferred();
                var model = this;
                this.async(function () {
                    var ret = this.updateFunction(row);
                    if (ret) {
                        if (ret.done) {
                            ret.done(function (aret) {
                                def.resolve(aret);

                            });
                        }
                        else {
                            def.resolve(ret);
                        }
                    }
                }, 400);
                return def.promise();
            },

            setDisplay: function () {
                this.edit = false;
            },
            setEdit: function () {
                this.edit = true;
            },
fireClick : function(row){
this.fire('click', row);
},

            setRow: function (row) {
                this.item = row;
                this.notifyPath("item", row);

                var templateNode = Polymer.dom(this.$.displayTemplate).getDistributedNodes()[0];
                var template = this.templatize(templateNode);
                var clone = this.stamp({ item: null });


                Polymer.dom(this).appendChild(clone.root);
                clone.item = row;
            },
            _itemsChange: function () {
                this.fire('items-change', this);
            },
            _onValueChange : function(value, event){
                this.fire('value-change', {value, event});
            }

        });
    </script>
</dom-module><dom-module id="total-column" assetpath="bulk-input/">
    <template>
        <style>
             :host {
                display: block;
            }
        </style>
        <span id="renderArea"></span>
    </template>

    <script>
        Polymer({

            is: 'total-column',

            properties: {
                updateFunction: {
                    type: Object,
                    value: function () { }
                },
                align: {
                    type: String,
                    value: 'left',
                }
            },
            attached: function () {

            },


            setHtml: function (html) {
                $(this.$.renderArea).html(html);
            },

            calc: function (rows) {

                var model = this;
                this.async(function () {
                    if (this.updateFunction) {
                        var ret = this.updateFunction(rows);

                        if (ret.done) {
                            ret.done(function (aret) {
                                $(model.$.renderArea).html(aret);

                            });
                        }
                        else {
                            $(model.$.renderArea).html(ret);
                        }
                    }
                    this.fire("update", { sender: this, rows: rows })

                }, 400);

            }


        });
    </script>
</dom-module><script>
    var LinkField = function(config) {
        jsGrid.Field.call(this, config);
    };

    LinkField.prototype = new jsGrid.Field({

        css: "link-field", // redefine general property 'css'
        align: "left", // redefine general property 'align'

        colEle: null,



        itemTemplate: function(value, row) {
            var model = this;
            var ele = $('<a href="#" style="width: 100%;display: block;">' + value + '</a>');
            $(ele).on('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                if (model.colEle) {
                    model.colEle.fireClick(row);
                }
            })

            return ele;
        },


        // editTemplate: function (value, row) {


        //   this.colEle.setEdit();

        //   this.colEle.setRow(row);

        //   return this.colEle;
        // },

    });

    jsGrid.fields.link = LinkField;
</script><script>
    var CurrencyEdit = function(config) {
        jsGrid.TextField.call(this, config);
    };

    CurrencyEdit.prototype = new jsGrid.TextField({

        css: "currency-field", // redefine general property 'css'
        align: "right", // redefine general property 'align'
        readOnly: false,





        filterValue: function() {
            return this.filterControl.val() ?
                parseFloat(this.filterControl.val() || 0, 10) :
                undefined;
        },

        insertValue: function() {
            return this.insertControl.val() ?
                parseFloat(this.insertControl.val() || 0, 10) :
                undefined;
        },

        editValue: function() {
            return this.editControl.val() ?
                parseFloat(this.editControl.val() || 0, 10) :
                undefined;
        },

        _createTextBox: function() {
            return $("<input>").attr("type", "number").attr("min", "0").attr("pattern", "/^\d+([.,]\d{0,2})?$/")
                .prop("readonly", !!this.readOnly).keypress(this._isNumberKey);
        },


        itemTemplate: function(value, row) {
            if (!value || value == "") {
                value = 0;
                return "-";
            }
            value = parseFloat(value);
            var num = '$' + value.toFixed(2).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
            return num;
        },


        _isNumberKey: function(evt)
            {
                var charCode = (evt.which) ? evt.which : evt.keyCode;
                if (charCode != 46 && charCode > 31 
                  && (charCode < 48 || charCode > 57))
                    return false;

                return true;
            },

    });

    jsGrid.fields.currencyedit = CurrencyEdit;
</script><script>
    var FloatEdit = function(config) {
        jsGrid.TextField.call(this, config);
    };

    FloatEdit.prototype = new jsGrid.TextField({

        css: "float-field", // redefine general property 'css'
        align: "right", // redefine general property 'align'
        readOnly: false,





        filterValue: function() {
            return this.filterControl.val() ?
                parseFloat(this.filterControl.val() || 0, 10) :
                undefined;
        },

        insertValue: function() {
            return this.insertControl.val() ?
                parseFloat(this.insertControl.val() || 0, 10) :
                undefined;
        },

        editValue: function() {
            return this.editControl.val() ?
                parseFloat(this.editControl.val() || 0, 10) :
                undefined;
        },

        _createTextBox: function() {
            return $("<input>").attr("type", "text")
                .prop("readonly", !!this.readOnly);
        },


        itemTemplate: function(value, row) {
            if (!value || value == "") {
                value = 0;
                return "-";
            }
            value = parseFloat(value);
    
            return value;
        },




    });

    jsGrid.fields.floatedit = FloatEdit;
</script>﻿<script>
    var PercentInput = function(config) {
        jsGrid.Field.call(this, config);
    };

    PercentInput.prototype = new jsGrid.Field({

        css: "percent-input", // redefine general property 'css'
        align: "left", // redefine general property 'align'
        readOnly: false,

        colEle: null,

        itemTemplate: function (value,row) {
            return value;
        },

        filterValue: function () {
            return this.filterControl.val() ?
                parseFloat(this.filterControl.val() || 0, 10) :
                undefined;
        },

        insertValue: function () {
            return this._insertPercent.val() ?
                parseFloat(this._insertPercent.val() || 0, 10) :
                undefined;
        },

        editValue: function () {
            return this._editPercent.val() ?
                parseFloat(this._editPercent.val() || 0, 10) :
                undefined;
        },
        insertTemplate: function (value) {
            return this._insertPercent = $("<input step='.001'>").attr("pattern", "^\d + (?:\.\d{1,3}) ? $").attr("type","number").attr("min", "0").attr("max","100").val(value);
        },

        editTemplate: function (value) {
            return this._editPercent = $("<input>").attr("type", "number").attr("min", "0").attr("max", "100").attr("step", ".001").val(value);
        },


    });

    jsGrid.fields.percent = PercentInput;
</script>
<script>
    (function (jsGrid, $, undefined) {

        var Field = jsGrid.Field;

        function CopyControlField(config) {
            Field.call(this, config);
            this._configInitialized = false;
        }

        CopyControlField.prototype = new Field({
            css: "jsgrid-control-field",
            align: "center",
            width: 100,
            filtering: false,
            inserting: false,
            editing: false,
            sorting: false,

            buttonClass: "jsgrid-button",
            modeButtonClass: "jsgrid-mode-button",

            modeOnButtonClass: "jsgrid-mode-on-button",
            searchModeButtonClass: "jsgrid-search-mode-button",
            insertModeButtonClass: "jsgrid-insert-mode-button",
            editButtonClass: "jsgrid-edit-button",
            copyButtonClass: "jsgrid-copy-button",
            deleteButtonClass: "jsgrid-delete-button",
            searchButtonClass: "jsgrid-search-button",
            clearFilterButtonClass: "jsgrid-clear-filter-button",
            insertButtonClass: "jsgrid-insert-button",
            updateButtonClass: "jsgrid-update-button",
            cancelEditButtonClass: "jsgrid-cancel-edit-button",

            searchModeButtonTooltip: "Switch to searching",
            insertModeButtonTooltip: "Switch to inserting",
            editButtonTooltip: "Edit",
            copyButtonTooltip: "Copy",
            deleteButtonTooltip: "Delete",
            searchButtonTooltip: "Search",
            clearFilterButtonTooltip: "Clear filter",
            insertButtonTooltip: "Insert",
            updateButtonTooltip: "Update",
            cancelEditButtonTooltip: "Cancel edit",

            editButton: true,
            deleteButton: true,
            copyButton: true,
            clearFilterButton: true,
            modeSwitchButton: true,

            _initConfig: function () {
                this._hasFiltering = this._grid.filtering;
                this._hasInserting = this._grid.inserting;

                if (this._hasInserting && this.modeSwitchButton) {
                    this._grid.inserting = false;
                }

                this._configInitialized = true;
            },

            headerTemplate: function () {
                if (!this._configInitialized) {
                    this._initConfig();
                }

                var hasFiltering = this._hasFiltering;
                var hasInserting = this._hasInserting;

                if (!this.modeSwitchButton || (!hasFiltering && !hasInserting))
                    return "";

                if (hasFiltering && !hasInserting)
                    return this._createFilterSwitchButton();

                if (hasInserting && !hasFiltering)
                    return this._createInsertSwitchButton();

                return this._createModeSwitchButton();
            },

            itemTemplate: function (value, item) {
                var $result = $([]);

                if (this.editButton) {
                    $result = $result.add(this._createEditButton(item));
                }

                if (this.deleteButton) {
                    $result = $result.add(this._createDeleteButton(item));
                }

                if (this.copyButton) {
                    $result = $result.add(this._createCopyButton(item));
                }

                return $result;
            },

            filterTemplate: function () {
                var $result = this._createSearchButton();
                return this.clearFilterButton ? $result.add(this._createClearFilterButton()) : $result;
            },

            insertTemplate: function () {
                return this._createInsertButton();
            },

            editTemplate: function () {
                return this._createUpdateButton().add(this._createCancelEditButton());
            },

            _createFilterSwitchButton: function () {
                return this._createOnOffSwitchButton("filtering", this.searchModeButtonClass, true);
            },

            _createInsertSwitchButton: function () {
                return this._createOnOffSwitchButton("inserting", this.insertModeButtonClass, false);
            },

            _createOnOffSwitchButton: function (option, cssClass, isOnInitially) {
                var isOn = isOnInitially;

                var updateButtonState = $.proxy(function () {
                    $button.toggleClass(this.modeOnButtonClass, isOn);
                }, this);

                var $button = this._createGridButton(this.modeButtonClass + " " + cssClass, "", function (grid) {
                    isOn = !isOn;
                    grid.option(option, isOn);
                    updateButtonState();
                });

                updateButtonState();

                return $button;
            },

            _createModeSwitchButton: function () {
                var isInserting = false;

                var updateButtonState = $.proxy(function () {
                    $button.attr("title", isInserting ? this.searchModeButtonTooltip : this.insertModeButtonTooltip)
                        .toggleClass(this.insertModeButtonClass, !isInserting)
                        .toggleClass(this.searchModeButtonClass, isInserting);
                }, this);

                var $button = this._createGridButton(this.modeButtonClass, "", function (grid) {
                    isInserting = !isInserting;
                    grid.option("inserting", isInserting);
                    grid.option("filtering", !isInserting);
                    updateButtonState();
                });

                updateButtonState();

                return $button;
            },


            _createCopyButton: function (item) {
                return this._createGridButton(this.copyButtonClass, this.copyButtonTooltip, function (grid, e) {
                    if (grid.copyItem) {
                        grid.copyItem(item);
                    }
                    e.stopPropagation();
                });
            },

            _createEditButton: function (item) {
                return this._createGridButton(this.editButtonClass, this.editButtonTooltip, function (grid, e) {
                    grid.editItem(item);
                    var event = new CustomEvent("grid-item-edited", { "detail": item });
                    document.dispatchEvent(event);
                   
                });
            },

            _createDeleteButton: function (item) {
                return this._createGridButton(this.deleteButtonClass, this.deleteButtonTooltip, function (grid, e) {
                    grid.deleteItem(item);
                    var event = new CustomEvent("grid-item-deleted", { "detail": item });
                    document.dispatchEvent(event);
                });
            },

            _createSearchButton: function () {
                return this._createGridButton(this.searchButtonClass, this.searchButtonTooltip, function (grid) {
                    grid.search();
                });
            },

            _createClearFilterButton: function () {
                return this._createGridButton(this.clearFilterButtonClass, this.clearFilterButtonTooltip, function (grid) {
                    grid.clearFilter();
                });
            },

            _createInsertButton: function () {
                return this._createGridButton(this.insertButtonClass, this.insertButtonTooltip, function (grid) {
                    grid.insertItem().done(function () {
                        grid.clearInsert();
                    });
                });
            },

            _createUpdateButton: function () {
                return this._createGridButton(this.updateButtonClass, this.updateButtonTooltip, function (grid, e) {
                    grid.updateItem();
                    e.stopPropagation();
                });
            },

            _createCancelEditButton: function () {
                return this._createGridButton(this.cancelEditButtonClass, this.cancelEditButtonTooltip, function (grid, e) {
                    grid.cancelEdit();
                    e.stopPropagation();
                });
            },

            _createGridButton: function (cls, tooltip, clickHandler) {
                var grid = this._grid;

                return $("<input>").addClass(this.buttonClass)
                    .addClass(cls)
                    .attr({
                        type: "button",
                        title: tooltip
                    })
                    .on("click", function (e) {
                        clickHandler(grid, e);
                    });
            },

            editValue: function () {
                return "";
            }

        });

        jsGrid.fields.copycontrol = jsGrid.CopyControlField = CopyControlField;

    }(jsGrid, jQuery));
</script><script>
    var DateInput = function(config) {
        jsGrid.Field.call(this, config);
    };

    DateInput.prototype = new jsGrid.Field({

        css: "date-input", // redefine general property 'css'
        align: "left", // redefine general property 'align'
        readOnly: false,

        colEle: null,

        itemTemplate: function (value,row) {
            if (value) {
                var dateVal = moment(value).format('YYYY-MM-DD');
                return this._insertDate = $("<input>").attr("type", "date").attr("value", dateVal);
            }
            else {
                return "";
            }
        },

        insertValue: function () {
            return this._insertDate.val();
        },

        editValue: function () {
            return this._editDate.val();
        },
        insertTemplate: function (value) {
            return this._insertDate = $("<input>").attr("type","date");
        },

        editTemplate: function (value) {
            //return this._editDate = $("<input>").attr("type","date");
             //Full date time breaks the input in edit mode
            if (value && value.indexOf("T") > 0) {
                var newValue = value.substr(0, 10);
                return this._editDate = $("<input>").attr("type", "date").val(newValue);
            }
            else {
                return this._editDate = $("<input>").attr("type", "date").val(value);
            }            
        },


    });

    jsGrid.fields.date = DateInput;
</script>﻿<script>
    var LeadZeroInput = function(config) {
        jsGrid.Field.call(this, config);
    };

    LeadZeroInput.prototype = new jsGrid.Field({

        css: "zero-input", // redefine general property 'css'
        align: "left", // redefine general property 'align'
        readOnly: false,

        colEle: null,

        itemTemplate: function (value, row) {
            if (value != undefined) {
                var pad = "000"
                var val = pad.substring(0, pad.length - value.length) + value
                return val;
            }
        },
        insertValue: function (value) {
            var pad = "000"
            var val = pad.substring(0, pad.length - value.length) + value
            
            return this._insertLead.val(val) 
        },

        editValue: function () {
            return this._editLead.val();
        },
        insertTemplate: function (value) {
           
            //value = value.padStart(3, '0');
            return this._insertLead = $("<input>").val(value);
        },

        editTemplate: function (value) {
            //value = value.padStart(3, '0');
            return this._editLead = $("<input>").val(value);
        },


    });

    jsGrid.fields.leadzero = LeadZeroInput;
</script><script>
    (function (jsGrid, $, undefined) {

        var Field = jsGrid.Field;

        function HideDeleteField(config) {
            Field.call(this, config);
            this._configInitialized = false;
        }

        HideDeleteField.prototype = new Field({
            css: "jsgrid-control-field",
            align: "center",
            width: 100,
            filtering: false,
            inserting: false,
            editing: false,
            sorting: false,

            buttonClass: "jsgrid-button",
            modeButtonClass: "jsgrid-mode-button",

            modeOnButtonClass: "jsgrid-mode-on-button",
            searchModeButtonClass: "jsgrid-search-mode-button",
            insertModeButtonClass: "jsgrid-insert-mode-button",
            editButtonClass: "jsgrid-edit-button",
            copyButtonClass: "jsgrid-copy-button",
            deleteButtonClass: "jsgrid-delete-button",
            searchButtonClass: "jsgrid-search-button",
            clearFilterButtonClass: "jsgrid-clear-filter-button",
            insertButtonClass: "jsgrid-insert-button",
            updateButtonClass: "jsgrid-update-button",
            cancelEditButtonClass: "jsgrid-cancel-edit-button",

            searchModeButtonTooltip: "Switch to searching",
            insertModeButtonTooltip: "Switch to inserting",
            editButtonTooltip: "Edit",
            copyButtonTooltip: "Copy",
            deleteButtonTooltip: "Delete",
            searchButtonTooltip: "Search",
            clearFilterButtonTooltip: "Clear filter",
            insertButtonTooltip: "Insert",
            updateButtonTooltip: "Update",
            cancelEditButtonTooltip: "Cancel edit",

            editButton: true,
            deleteButton: false,
            copyButton: true,
            clearFilterButton: true,
            modeSwitchButton: true,

            _initConfig: function () {
                this._hasFiltering = this._grid.filtering;
                this._hasInserting = this._grid.inserting;

                if (this._hasInserting && this.modeSwitchButton) {
                    this._grid.inserting = false;
                }

                this._configInitialized = true;
            },

            headerTemplate: function () {
                if (!this._configInitialized) {
                    this._initConfig();
                }

                var hasFiltering = this._hasFiltering;
                var hasInserting = this._hasInserting;

                if (!this.modeSwitchButton || (!hasFiltering && !hasInserting))
                    return "";

                if (hasFiltering && !hasInserting)
                    return this._createFilterSwitchButton();

                if (hasInserting && !hasFiltering)
                    return this._createInsertSwitchButton();

                return this._createModeSwitchButton();
            },

            itemTemplate: function (value, item) {
                var $result = $([]);

                if (this.editButton) {
                    $result = $result.add(this._createEditButton(item));
                }

                if (this.deleteButton) {
                    $result = $result.add(this._createDeleteButton(item));
                }

                if (this.copyButton) {
                    $result = $result.add(this._createCopyButton(item));
                }

                return $result;
            },

            filterTemplate: function () {
                var $result = this._createSearchButton();
                return this.clearFilterButton ? $result.add(this._createClearFilterButton()) : $result;
            },

            insertTemplate: function () {
                return this._createInsertButton();
            },

            editTemplate: function () {
                return this._createUpdateButton().add(this._createCancelEditButton());
            },

            _createFilterSwitchButton: function () {
                return this._createOnOffSwitchButton("filtering", this.searchModeButtonClass, true);
            },

            _createInsertSwitchButton: function () {
                return this._createOnOffSwitchButton("inserting", this.insertModeButtonClass, false);
            },

            _createOnOffSwitchButton: function (option, cssClass, isOnInitially) {
                var isOn = isOnInitially;

                var updateButtonState = $.proxy(function () {
                    $button.toggleClass(this.modeOnButtonClass, isOn);
                }, this);

                var $button = this._createGridButton(this.modeButtonClass + " " + cssClass, "", function (grid) {
                    isOn = !isOn;
                    grid.option(option, isOn);
                    updateButtonState();
                });

                updateButtonState();

                return $button;
            },

            _createModeSwitchButton: function () {
                var isInserting = false;

                var updateButtonState = $.proxy(function () {
                    $button.attr("title", isInserting ? this.searchModeButtonTooltip : this.insertModeButtonTooltip)
                        .toggleClass(this.insertModeButtonClass, !isInserting)
                        .toggleClass(this.searchModeButtonClass, isInserting);
                }, this);

                var $button = this._createGridButton(this.modeButtonClass, "", function (grid) {
                    isInserting = !isInserting;
                    grid.option("inserting", isInserting);
                    grid.option("filtering", !isInserting);
                    updateButtonState();
                });

                updateButtonState();

                return $button;
            },


            _createCopyButton: function (item) {
                return this._createGridButton(this.copyButtonClass, this.copyButtonTooltip, function (grid, e) {
                    if (grid.copyItem) {
                        grid.copyItem(item);
                    }
                    e.stopPropagation();
                });
            },

            _createEditButton: function (item) {
                return this._createGridButton(this.editButtonClass, this.editButtonTooltip, function (grid, e) {
                    grid.editItem(item);
                    e.stopPropagation();
                });
            },

            _createDeleteButton: function (item) {
                return this._createGridButton(this.deleteButtonClass, this.deleteButtonTooltip, function (grid, e) {
                    grid.deleteItem(item);
                    e.stopPropagation();
                });
            },

            _createSearchButton: function () {
                return this._createGridButton(this.searchButtonClass, this.searchButtonTooltip, function (grid) {
                    grid.search();
                });
            },

            _createClearFilterButton: function () {
                return this._createGridButton(this.clearFilterButtonClass, this.clearFilterButtonTooltip, function (grid) {
                    grid.clearFilter();
                });
            },

            _createInsertButton: function () {
                return this._createGridButton(this.insertButtonClass, this.insertButtonTooltip, function (grid) {
                    grid.insertItem().done(function () {
                        grid.clearInsert();
                    });
                });
            },

            _createUpdateButton: function () {
                return this._createGridButton(this.updateButtonClass, this.updateButtonTooltip, function (grid, e) {
                    grid.updateItem();
                    e.stopPropagation();
                });
            },

            _createCancelEditButton: function () {
                return this._createGridButton(this.cancelEditButtonClass, this.cancelEditButtonTooltip, function (grid, e) {
                    grid.cancelEdit();
                    e.stopPropagation();
                });
            },

            _createGridButton: function (cls, tooltip, clickHandler) {
                var grid = this._grid;

                return $("<input>").addClass(this.buttonClass)
                    .addClass(cls)
                    .attr({
                        type: "button",
                        title: tooltip
                    })
                    .on("click", function (e) {
                        clickHandler(grid, e);
                    });
            },

            editValue: function () {
                return "";
            }

        });

        jsGrid.fields.hidedeletecontrol = jsGrid.HideDeleteField = HideDeleteField;

    }(jsGrid, jQuery));
</script><script>
    var LDAutoFill = function(config) {
        jsGrid.Field.call(this, config);
    };

    LDAutoFill.prototype = new jsGrid.Field({

        css: "zero-input", // redefine general property 'css'
        align: "left", // redefine general property 'align'
        readOnly: false,

        colEle: null,

        itemTemplate: function (value, row) {
            if (value) {
               
                return value;
            }
            else{
                return "";
            }
        },
        insertValue: function (value) {
            return this.autoBackFill(this._insertLead.val(value));
        },

        editValue: function (value) {
            return this.autoBackFill(this._editLead.val());
            
        },
        insertTemplate: function (value) {
           
            var val = this.autoBackFill(value);
            return this._insertLead = $("<input>").val(val);
        },

        editTemplate: function (value) {
            //value = value.padStart(3, '0');
            value = this.autoBackFill(value);
            //this.autoBackFill(value);
            return this._editLead = $("<input>").val(value);
        },
        autoBackFill: function (str) {
            if (str == undefined || str == '') {
                return str;
            }
            var len = str.length;
            if (len < 5) {

                var direction = str.substr(len - 1, 1);
                if (direction !== '')
                    direction = direction.toUpperCase();

                var fraction = '0';
                var value = '0';

                if (len - 1 > 0) {
                    value = str.substring(0, len - 1);
                }

                value = value.padStart(3, '0');
                str = value.concat(fraction, direction);
            } else {
                str = str.toUpperCase();
            }
            return str;
        }
    });

    jsGrid.fields.ldautofill = LDAutoFill;
</script><script>
    (function (jsGrid, $, undefined) {

        var Field = jsGrid.Field;

        function HideDeleteCopyField(config) {
            Field.call(this, config);
            this._configInitialized = false;
        }

        HideDeleteCopyField.prototype = new Field({
            css: "jsgrid-control-field",
            align: "center",
            width: 100,
            filtering: false,
            inserting: false,
            editing: false,
            sorting: false,

            buttonClass: "jsgrid-button",
            modeButtonClass: "jsgrid-mode-button",

            modeOnButtonClass: "jsgrid-mode-on-button",
            searchModeButtonClass: "jsgrid-search-mode-button",
            insertModeButtonClass: "jsgrid-insert-mode-button",
            editButtonClass: "jsgrid-edit-button",
            copyButtonClass: "jsgrid-copy-button",
            deleteButtonClass: "jsgrid-delete-button",
            searchButtonClass: "jsgrid-search-button",
            clearFilterButtonClass: "jsgrid-clear-filter-button",
            insertButtonClass: "jsgrid-insert-button",
            updateButtonClass: "jsgrid-update-button",
            cancelEditButtonClass: "jsgrid-cancel-edit-button",

            searchModeButtonTooltip: "Switch to searching",
            insertModeButtonTooltip: "Switch to inserting",
            editButtonTooltip: "Edit",
            copyButtonTooltip: "Copy",
            deleteButtonTooltip: "Delete",
            searchButtonTooltip: "Search",
            clearFilterButtonTooltip: "Clear filter",
            insertButtonTooltip: "Insert",
            updateButtonTooltip: "Update",
            cancelEditButtonTooltip: "Cancel edit",

            editButton: true,
            deleteButton: false,
            copyButton: false,
            clearFilterButton: true,
            modeSwitchButton: true,

            _initConfig: function () {
                this._hasFiltering = this._grid.filtering;
                this._hasInserting = this._grid.inserting;

                if (this._hasInserting && this.modeSwitchButton) {
                    this._grid.inserting = false;
                }

                this._configInitialized = true;
            },

            headerTemplate: function () {
                if (!this._configInitialized) {
                    this._initConfig();
                }

                var hasFiltering = this._hasFiltering;
                var hasInserting = this._hasInserting;

                if (!this.modeSwitchButton || (!hasFiltering && !hasInserting))
                    return "";

                if (hasFiltering && !hasInserting)
                    return this._createFilterSwitchButton();

                if (hasInserting && !hasFiltering)
                    return this._createInsertSwitchButton();

                return this._createModeSwitchButton();
            },

            itemTemplate: function (value, item) {
                var $result = $([]);

                if (this.editButton) {
                    $result = $result.add(this._createEditButton(item));
                }

                if (this.deleteButton) {
                    $result = $result.add(this._createDeleteButton(item));
                }

                if (this.copyButton) {
                    $result = $result.add(this._createCopyButton(item));
                }

                return $result;
            },

            filterTemplate: function () {
                var $result = this._createSearchButton();
                return this.clearFilterButton ? $result.add(this._createClearFilterButton()) : $result;
            },

            insertTemplate: function () {
                return this._createInsertButton();
            },

            editTemplate: function () {
                return this._createUpdateButton().add(this._createCancelEditButton());
            },

            _createFilterSwitchButton: function () {
                return this._createOnOffSwitchButton("filtering", this.searchModeButtonClass, true);
            },

            _createInsertSwitchButton: function () {
                return this._createOnOffSwitchButton("inserting", this.insertModeButtonClass, false);
            },

            _createOnOffSwitchButton: function (option, cssClass, isOnInitially) {
                var isOn = isOnInitially;

                var updateButtonState = $.proxy(function () {
                    $button.toggleClass(this.modeOnButtonClass, isOn);
                }, this);

                var $button = this._createGridButton(this.modeButtonClass + " " + cssClass, "", function (grid) {
                    isOn = !isOn;
                    grid.option(option, isOn);
                    updateButtonState();
                });

                updateButtonState();

                return $button;
            },

            _createModeSwitchButton: function () {
                var isInserting = false;

                var updateButtonState = $.proxy(function () {
                    $button.attr("title", isInserting ? this.searchModeButtonTooltip : this.insertModeButtonTooltip)
                        .toggleClass(this.insertModeButtonClass, !isInserting)
                        .toggleClass(this.searchModeButtonClass, isInserting);
                }, this);

                var $button = this._createGridButton(this.modeButtonClass, "", function (grid) {
                    isInserting = !isInserting;
                    grid.option("inserting", isInserting);
                    grid.option("filtering", !isInserting);
                    updateButtonState();
                });

                updateButtonState();

                return $button;
            },


            _createCopyButton: function (item) {
                return this._createGridButton(this.copyButtonClass, this.copyButtonTooltip, function (grid, e) {
                    if (grid.copyItem) {
                        grid.copyItem(item);
                    }
                    e.stopPropagation();
                });
            },

            _createEditButton: function (item) {
                return this._createGridButton(this.editButtonClass, this.editButtonTooltip, function (grid, e) {
                    grid.editItem(item);
                    e.stopPropagation();
                });
            },

            _createDeleteButton: function (item) {
                return this._createGridButton(this.deleteButtonClass, this.deleteButtonTooltip, function (grid, e) {
                    grid.deleteItem(item);
                    e.stopPropagation();
                });
            },

            _createSearchButton: function () {
                return this._createGridButton(this.searchButtonClass, this.searchButtonTooltip, function (grid) {
                    grid.search();
                });
            },

            _createClearFilterButton: function () {
                return this._createGridButton(this.clearFilterButtonClass, this.clearFilterButtonTooltip, function (grid) {
                    grid.clearFilter();
                });
            },

            _createInsertButton: function () {
                return this._createGridButton(this.insertButtonClass, this.insertButtonTooltip, function (grid) {
                    grid.insertItem().done(function () {
                        grid.clearInsert();
                    });
                });
            },

            _createUpdateButton: function () {
                return this._createGridButton(this.updateButtonClass, this.updateButtonTooltip, function (grid, e) {
                    grid.updateItem();
                    e.stopPropagation();
                });
            },

            _createCancelEditButton: function () {
                return this._createGridButton(this.cancelEditButtonClass, this.cancelEditButtonTooltip, function (grid, e) {
                    grid.cancelEdit();
                    e.stopPropagation();
                });
            },

            _createGridButton: function (cls, tooltip, clickHandler) {
                var grid = this._grid;

                return $("<input>").addClass(this.buttonClass)
                    .addClass(cls)
                    .attr({
                        type: "button",
                        title: tooltip
                    })
                    .on("click", function (e) {
                        clickHandler(grid, e);
                    });
            },

            editValue: function () {
                return "";
            }

        });

        jsGrid.fields.hidedeletecopycontrol = jsGrid.HideDeleteCopyField = HideDeleteCopyField;

    }(jsGrid, jQuery));
</script><style>
    input.jsgrid-button.jsgrid-copy-button {
        background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMi4wLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0ic3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDQ0OCA1MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ0OCA1MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiM2NDY0NjQ7fQ0KPC9zdHlsZT4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0zMjAsNDQ4djQwYzAsMTMuMy0xMC43LDI0LTI0LDI0SDI0Yy0xMy4zLDAtMjQtMTAuNy0yNC0yNFYxMjBjMC0xMy4zLDEwLjctMjQsMjQtMjRoNzJ2Mjk2DQoJYzAsMzAuOSwyNS4xLDU2LDU2LDU2SDMyMHogTTMyMCwxMDRWMEgxNTJjLTEzLjMsMC0yNCwxMC43LTI0LDI0djM2OGMwLDEzLjMsMTAuNywyNCwyNCwyNGgyNzJjMTMuMywwLDI0LTEwLjcsMjQtMjRWMTI4SDM0NA0KCUMzMzAuOCwxMjgsMzIwLDExNy4yLDMyMCwxMDR6IE00NDEsNzNMMzc1LDdjLTQuNS00LjUtMTAuNi03LTE3LTdIMzUydjk2aDk2di02LjFDNDQ4LDgzLjYsNDQ1LjUsNzcuNSw0NDEsNzN6Ii8+DQo8L3N2Zz4NCg==") !important;
        color: #585858;
        /*background-position: 0 -120px; width: 16px; height: 16px;*/
    }
</style>


<script>
    // Custom Select
    (function (jsGrid, $, undefined) {

        var NumberField = jsGrid.NumberField;
        var numberValueType = "number";
        var stringValueType = "string";

        function FilterSelectField(config) {
            this.items = [];
            this.selectedIndex = -1;
            this.valueField = "";
            this.textField = "";

            if (config.valueField && config.items.length) {
                var firstItemValue = config.items[0][config.valueField];
                this.valueType = (typeof firstItemValue) === numberValueType ? numberValueType : stringValueType;
            }

            this.sorter = this.valueType;

            NumberField.call(this, config);
        }

        FilterSelectField.prototype = new NumberField({

            align: "center",
            valueType: numberValueType,

            itemTemplate: function (value) {
                var items = this.items,
                    valueField = this.valueField,
                    textField = this.textField,
                    resultItem;

                if (valueField) {
                    resultItem = $.grep(items, function (item, index) {
                        return item[valueField] === value;
                    })[0] || {};
                } else {
                    resultItem = items[value];
                }

                var result = (textField ? resultItem[textField] : resultItem);

                return (result === undefined || result === null) ? "" : result;
            },

            filterTemplate: function () {
                if (!this.filtering)
                    return "";

                var grid = this._grid,
                    $result = this.filterControl = this._createSelect();

                if (this.autosearch) {
                    $result.on("change", function (e) {
                        grid.search();
                    });
                }

                return $result;
            },

            insertTemplate: function () {
                if (!this.inserting)
                    return "";

                return this.insertControl = this._createSelect();
            },

            editTemplate: function (value, row) {
                if (!this.editing)
                    return this.itemTemplate.apply(this, arguments);

                var $result = this.editControl = this._createSelect(row);
                (value !== undefined) && $result.val(value);
                return $result;
            },

            filterValue: function () {
                var val = this.filterControl.val();
                return this.valueType === numberValueType ? parseInt(val || 0, 10) : val;
            },

            insertValue: function () {
                var val = this.insertControl.val();
                return this.valueType === numberValueType ? parseInt(val || 0, 10) : val;
            },

            editValue: function () {
                var val = this.editControl.val();
                return this.valueType === numberValueType ? parseInt(val || 0, 10) : val;
            },

            _createSelect: function (row) {
                var model = this;
                var $result = $("<select>"),
                    valueField = this.valueField,
                    textField = this.textField,
                    selectedIndex = this.selectedIndex;

                var e = {
                    items: this.items,
                    row: row
                };
                if (row) {
                    this.colEle.fire('before-items', e);
                }

                $.each(e.items, function (index, item) {
                    var value = valueField ? item[valueField] : index,
                        text = textField ? item[textField] : item;

                    var $option = $("<option>")
                        .attr("value", value)
                        .text(text)
                        .appendTo($result);

                });


                $result.on('change', (event) => {

                    model.colEle._onValueChange(event.target.value, event);
                });

                $result.prop("disabled", !!this.readOnly);
                $result.prop("selectedIndex", selectedIndex);

                return $result;
            }
        });

        jsGrid.fields.filterselect = jsGrid.FilterSelectField = FilterSelectField;

    }(jsGrid, jQuery));
</script>





<dom-module id="bulk-input" assetpath="bulk-input/">
    <template>

        <style>
            :host {
                display: block;
            }

            .jsgrid .link-field a {
                width: 100%;
                display: block;
            }
        </style>
        <div id="jsGrid"></div>
        <div class="jsgrid-grid-body" style="display: none;   height: 51px; padding: 0;">
            <table class="jsgrid-table">
                <tbody id="totalsTable"></tbody>
            </table>
        </div>
        <div style="display: none">
            <content></content>
        </div>
    </template>


    <script>
        Polymer({

            is: 'bulk-input',

            properties: {
                canInsert: {
                    type: Boolean,
                    value: false
                },
                canCopy: {
                    type: Boolean,
                    value: false,
                },
                hideDelete: {
                    type: Boolean,
                    value: false
                },
                //no delete, no copy, if true hide
                noDc: {
                    type: Boolean,
                    value: false
                }
            },
            attached: function () {


                var observer = new MutationObserver(function (mutations) {
                    mutations.forEach(function (m) {
                        if (m.target.localName == 'in-element') { // only care about in-element

                        }
                    });
                });
                // Observe attribute changes to child elements
                observer.observe(this, {
                    attributes: true,
                    subtree: true,
                    attributeOldValue: true
                });

                window.test = this;
                var model = this;
                this.async(function () {

                    var fields = [];

                    var columns = $(model).find('input-column');


                    for (i = 0; i < columns.length; i++) {
                        if (!columns[i].width) {
                            columns[i].width = 100;
                        }
                        var field = {
                            name: columns[i].field,

                            type: columns[i].type,
                            items: columns[i].items,
                            width: columns[i].width


                        };
                        if (columns[i].title && columns[i].title.length > 1) {
                            field.title = columns[i].title;
                        } else {
                            field.title = columns[i].field;
                        }


                        if (columns[i].type && columns[i].type == 'select') {
                            field.valueField = columns[i].valueField;
                            field.textField = columns[i].textField;
                            field.items = [];
                            field.colEle = columns[i];
                            model.loadSelect(field);

                        }

                        if (columns[i].type && columns[i].type == 'filterselect') {
                            field.valueField = columns[i].valueField;
                            field.textField = columns[i].textField;
                            field.items = [];
                            field.colEle = columns[i];
                            model.loadSelect(field);

                        }

                        if (columns[i].type === 'calc') {
                            field.element = columns[i];
                            ///field.calcFunction = columns[i].function;
                        }
                        if (columns[i].type === 'custom') {
                            field.colEle = $(columns[i]).clone(true)[0];
                        }
                        if (columns[i].type === 'link') {
                            field.colEle = columns[i];
                        }






                        fields.push(field);
                    }


                    fields.push({
                        type: "control"
                    });


                    // #Fields
                    var CurrencyField = function (config) {
                        jsGrid.Field.call(this, config);
                    };
                    CurrencyField.prototype = new jsGrid.Field({
                        align: "right",
                        itemTemplate: function (value) {
                            value = parseFloat(value);
                            var num = '$' + value.toFixed(2).replace(
                                /(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
                            return num;
                        },
                    });
                    jsGrid.fields.currency = CurrencyField;


                    var CalcField = function (config) {
                        jsGrid.Field.call(this, config);
                    };

                    CalcField.prototype = new jsGrid.Field({

                        css: "calc-field",
                        align: "center",


                        calcFunction: function (val) {
                            if (val) {
                                if (this.element) {
                                    return this.element.setData(val);

                                }
                            }
                            return null; //this.element;
                        },

                        element: null,



                        itemTemplate: function (value, row) {

                            var outEle = $('<span/>');
                            if (this.element) {
                                this.element.setData(row).done(function (htmlVal) {
                                    outEle.html(htmlVal);
                                });

                            }

                            return outEle;
                        },

                    });

                    jsGrid.fields.calc = CalcField;



                    // custom fields

                    var CustomField = function (config) {
                        jsGrid.Field.call(this, config);
                    };

                    CustomField.prototype = new jsGrid.Field({

                        css: "custom-field", // redefine general property 'css'
                        align: "left", // redefine general property 'align'

                        colEle: null,



                        itemTemplate: function (value, row) {

                            this.colEle.setDisplay();

                            this.colEle.setRow(row);

                            return this.colEle;
                        },


                        editTemplate: function (value, row) {


                            this.colEle.setEdit();

                            this.colEle.setRow(row);

                            return this.colEle;
                        },

                    });

                    jsGrid.fields.custom = CustomField;



                    if (model.canCopy) {
                        jsGrid.fields.control = jsGrid.fields.copycontrol;
                    }
                    if (model.hideDelete) {
                        jsGrid.fields.control = jsGrid.fields.hidedeletecontrol;
                    }
                    if (model.noDc) {
                        jsGrid.fields.control = jsGrid.fields.hidedeletecopycontrol;
                    }

                    // endfields


                    $(model.$.jsGrid).jsGrid({

                        width: "100%",

                        autoload: false,
                        inserting: model.canInsert,
                        editing: true,
                        sorting: true,
                        paging: true,
                        fields: fields,
                        data: [],

                        onDataLoading: function (args) { }, // before controller.loadData
                        onDataLoaded: function (args) { }, // on done of controller.loadData

                        onError: function (args) { }, // on fail of any controller call
                        onInit: function (args) {
                            model.gridInstance = args.grid;

                            var totlcols = $(model).find('total-column');
                            var row = $('<tr class="table-totals jsgrid-row"/>');

                            totlcols.each(function () {
                                var cell = $('<td class="jsgrid-cell" />');
                                cell.append(this);
                                row.append(cell);
                            })

                            var cell = $('<td class="jsgrid-cell" />');
                            //cell.append(this);
                            row.append(cell);

                            var table = $(model.$.totalsTable);
                            table.append(row);


                        }, // after grid initialization

                        onItemInserting: function (args) { }, // before controller.insertItem
                        onItemInserted: function (args) {

                            //TODO: Put new item on bottom
                            model.fire("row-added", args.item);
                            model.updateRow(args);
                            model.renderTotals(args);
                        }, // on done of controller.insertItem
                        onItemUpdating: function (args) {

                            console.log(args)

                        }, // before controller.updateItem
                        onItemUpdated: function (args) {

                            model.updateRow(args);
                            model.renderTotals(args);
                        }, // on done of controller.updateItem

                        copyItem: function (args) {
                            model.fire('copy', args);
                        }, // on done of controller.updateItem


                        onItemDeleting: function (args) { }, // before controller.deleteItem
                        onItemDeleted: function (args) {
                            model.fire("row-deleted", args.item);
                            model.updateRow(args);
                            model.renderTotals(args);

                        }, // on done of controller.deleteItem
                        onItemInvalid: function (args) { }, // after item validation, in case data is invalid

                        onOptionChanging: function (args) { }, // before changing the grid option
                        onOptionChanged: function (args) { }, // after changing the grid option

                        onPageChanged: function (args) { }, // after changing the current page

                        onRefreshing: function (args) {
                            var index = 1;
                            for (var i = 0; i < args.grid.data.length; i++) {
                                args.grid.data[i]._rowIndex = index;
                                index++;
                            }
                            // var columns = $(model).find('input-column');


                            // for (var i = 0; i < columns.length; i++) {
                            //   args.grid.fields[i].colEle = columns[i];

                            // }
                        }, // before grid refresh
                        onRefreshed: function (args) {


                            // $(model).find('.jsgrid-grid-body .jsgrid-control-field')
                            //     .each(function (i, ele) {
                            //         var copyButton = $(ele).find('.jsgrid-copy-button')[0];
                            //         if (!copyButton) {
                            //             copyButton = $('<input class="jsgrid-button jsgrid-copy-button" type="button" title="Copy" />');
                            //             // copyButton.on('click', function (e) {
                            //             //     console.log('Copy');
                            //             // });
                            //             ele.append(copyButton);
                            //         }
                            //     });


                            for (var i = 0; i < args.grid.fields.length; i++) {
                                var cell = $(model).find(
                                    '.jsgrid-grid-body .jsgrid-cell')[i];
                                if (!cell) {
                                    $(model.$.totalsTable).hide();
                                } else {
                                    $(model.$.totalsTable).show();
                                    var targetcell = $(model).find(
                                        '#totalsTable .jsgrid-cell')[i];
                                    $(targetcell).attr('class', $(cell).attr('class'));
                                    $(targetcell).attr('style', $(cell).attr('style'));


                                }

                            }

                            model.renderTotals(args);



                        }, // after grid refresh

                    });

                    model.async(function () {
                        model.gridInstance.render();
                    }, 500);
                });
            },



            loadSelect: function (field) {
                var model = this;
                // items-change
                $(field.colEle).on('items-change', function (e) {


                    var fl = model.gridInstance.fields.filter(function (item) {
                        if (item.name == e.detail.name) {
                            return true;
                        }
                        return false;


                    })[0];
                    if (fl) {
                        fl.items = e.detail.items;
                    }

                });

                this.async(function () {



                    var fl = this.gridInstance.fields.filter(function (item) {
                        if (item.name == field.name) {
                            return true;
                        }
                        return false;


                    })[0];
                    fl.items = field.colEle.items;

                }, 400);
            },

            getData: function () {
                return this.gridInstance.data;
            },
            setData: function (dataArray) {
                var model = this;
                model.gridInstance.data = [];
                for (var i = 0; i < dataArray.length; i++) {
                    model.gridInstance.insertItem(dataArray[i]);
                }


            },

            addRow: function (row) {
                this.gridInstance.insertItem(row);
            },

            updateRow: function (args) {
                this.async(function () {
                    this.updateTableCalculations(this.gridInstance.data);

                    this.fire('row-update', {
                        row: args.item,
                        old: args.previousItem,
                        args: args
                    });
                }, 200);
            },

            updateTableCalculations: function (data) {
                var model = this;
                var totalCols = $(this).find('total-column');
                totalCols.each(function (col) {
                    //if (this.updateFunction != null) {
                    this.calc(data);
                    //}
                });
            },
            renderTotals: function (args) {
                var model = this;
                model.async(function () {

                    var foundtotalRow = $(args.grid._content).find('.total-row');
                    if (foundtotalRow.length > 0) {
                        foundtotalRow.remove();
                    }
                    var items = args.grid.option("data");

                    var totlcols = $(model).find('total-column');

                    var totalRow = $("<tr>").addClass("total-row");


                    for (var i = 0; i < totlcols.length; i++) {
                        var cell = $('<td class="jsgrid-cell" />');
                        cell.attr('align', totlcols[i].align);

                        totlcols[i].calc(items);

                        cell.append($(totlcols[i]).find('#renderArea').html());
                        totalRow.append(cell);
                    }

                    args.grid._content.append(totalRow);
                }, 1000);
            },



        });
    </script>
</dom-module>

<script>
    var NumberField = jsGrid.NumberField;
    var numberValueType = "number";
    var stringValueType = "string";

    function SelectField(config) {
        this.items = [];
        this.selectedIndex = -1;
        this.valueField = "";
        this.textField = "";

        if (config.valueField && config.items.length) {
            var firstItemValue = config.items[0][config.valueField];
            this.valueType = (typeof firstItemValue) === numberValueType ? numberValueType : stringValueType;
        }

        this.sorter = this.valueType;

        NumberField.call(this, config);
    }

    SelectField.prototype = new NumberField({

        align: "center",
        valueType: numberValueType,

        itemTemplate: function (value) {

            var items = this.items,
                valueField = this.valueField,
                textField = this.textField,
                resultItem;

            if (valueField) {
                resultItem = $.grep(items, function (item, index) {
                    return item[valueField] === value;
                })[0] || {};
            } else {
                resultItem = items[value];
            }

            var result = (textField ? resultItem[textField] : resultItem);

            return (result === undefined || result === null) ? "" : result;
        },

        filterTemplate: function () {
            if (!this.filtering)
                return "";

            var grid = this._grid,
                $result = this.filterControl = this._createSelect();

            if (this.autosearch) {
                $result.on("change", function (e) {
                    grid.search();
                });
            }

            return $result;
        },

        insertTemplate: function () {
            if (!this.inserting)
                return "";

            return this.insertControl = this._createSelect();
        },

        editTemplate: function (value) {
            if (!this.editing)
                return this.itemTemplate.apply(this, arguments);

            var $result = this.editControl = this._createSelect();
            (value !== undefined) && $result.val(value);
            return $result;
        },

        filterValue: function () {
            var val = this.filterControl.val();
            return this.valueType === numberValueType ? parseInt(val || 0, 10) : val;
        },

        insertValue: function () {
            var val = this.insertControl.val();
            return this.valueType === numberValueType ? parseInt(val || 0, 10) : val;
        },

        editValue: function () {
            var val = this.editControl.val();
            return this.valueType === numberValueType ? parseInt(val || 0, 10) : val;
        },

        _createSelect: function () {
            var model = this;
            var $result = $("<select>"),
                valueField = this.valueField,
                textField = this.textField,
                selectedIndex = this.selectedIndex;

            $.each(this.items, function (index, item) {
                var value = valueField ? item[valueField] : index,
                    text = textField ? item[textField] : item;

                var $option = $("<option>")
                    .attr("value", value)
                    .text(text)
                    .appendTo($result);

                $option.prop("selected", (selectedIndex === index));
            });

            $result.on('change', (event) => {
               
                model.colEle._onValueChange(event.target.value, event);
            });

            $result.prop("disabled", !!this.readOnly);

            return $result;
        }
    });

    jsGrid.fields.select = jsGrid.SelectField = SelectField;
</script><link href="../lib/jsgrid/jsgrid-theme.min.css" rel="stylesheet">
<link href="../lib/jsgrid/jsgrid.min.css" rel="stylesheet">
<script src="../lib/jsgrid/jsgrid.min.js"></script>

<dom-module id="grid-bulkop" assetpath="power-grid/">
    <template>
        <style>
            :host() select {
                width: auto;
                /*margin-left: -15px;*/
            }
        </style>
        <paper-dialog id="bulkEditDialog">
            <h2>{{title}}</h2>
            <paper-dialog-scrollable>
                <content></content>
                <template is="dom-repeat" items="{{data}}">
                    <template is="dom-ref" bind="[[item]]" ref="itemtemplate">
                    </template>
                </template>
            </paper-dialog-scrollable>
            <div class="buttons">
                <paper-button dialog-dismiss="">Cancel</paper-button>
                <button on-tap="_updateValues" class="mdl-button mdl-button--raised mdl-button--colored mdl-color--nflss" type="button" style="width: 140px;" value="Update">
                    Update
                </button>
            </div>
        </paper-dialog>
    </template>
    <script>
        Polymer({
            is: 'grid-bulkop',

            properties: {
                loadmethod: {
                    type: Object,
                    value: function () { }
                }

            },

            _buildArray: function (name) {
                if (this[name] == null) {
                    this[name] = [];
                }
            },

            _writeArray: function (name, data) {
                for (var i = 0; i < data.length; i++) {
                    this.push(name, data[i]);
                }
            },

            _clearArray: function (name) {
                while (this[name].length > 0) {
                    this.splice(name, this[name].length - 1, 1);
                }
            },

            _open: function (e) {

                var model = this;
                this._clearArray('data');
                this.notifyPath('data', []);


                var ol = [];
                for (var i = 0; i < e.length; i++) {
                    var obj = {
                        index: i,
                        row: e[i],
                        context: {}
                    };
                    ol.push(obj);


                }

                var evtobj = {
                    rows: ol,
                    done: function () {
                        model._writeArray('data', evtobj.rows);
                    }
                };
                this.fire('loadcontext', evtobj, evtobj.done);


                this.$.bulkEditDialog.open();
            },

            _updateValues: function (e) {
                var model = this;
                var evtobj = {
                    rows: model.data,
                    done: function () {
                        $coreData.success("Rows Updated");
                        model.$.bulkEditDialog.close();
                    }
                };
                this.fire('rowop', evtobj);
            },

            attached: function () {
                if (!this.data) {
                    this._buildArray('data');
                }
                //this._buildArray('data');

            },

        });
    </script>
</dom-module><script>
    Polymer({
        is: 'grid-action',
        properties: {
            valid: Object,
            action: Object,
        },
        _fireAction: function (row) {
            this.fire('action', row);
        }

    });

    Polymer({
        is: 'grid-action-img',
        properties: {
            valid: Object,
            action: Object,
            src: String,
        },
        _fireAction: function (row) {
            this.fire('action', row);
        }

    });

    Polymer({
        is: 'grid-bulk-action',
        properties: {
            action: Object,
        },
        _fireAction: function (rows) {
            this.fire('action', rows);
        }

    });


    Polymer({
        is: 'grid-data',
        properties: {
            url: String,
            v2Search :{
                type: Boolean,
                value: false,
            }
        },


    });

</script><script>
    Polymer({
        is: 'grid-open',
        properties: {

        },

        _fireOpen: function (row) {
            this.fire('open', row);
        }
    });

</script><script>
    Polymer({
        is: 'grid-field',
        properties: {
            name: String,
            field: String,
            type: String,
            width: Number,
            align: String,
            title: String,
            sort: {
                type: Boolean,
                value: false,
            },
            search: {
                type: Boolean,
                value: false,
            },
            render: {
                type: Object,
                value: null,
            },

        },
    });

</script><script>
    arrayBehavior = {

        _buildArray: function (name) {
            if (this[name] == null) {
                this[name] = [];
            }
        },

        _writeArray: function (name, data) {
            for (var i = 0; i < data.length; i++) {
                this.push(name, data[i]);
            }
        },

        _clearArray: function (name) {
            while (this[name].length > 0) {
                this.splice(name, this[name].length - 1, 1);
            }
        },

        getDescFromSelectElement: function (item, arr) {
            for (var i = 0; i < arr.length; i++) {
                if (arr[i].ID == item) {
                    return arr[i].Description;
                }
            }
        }

    }


    guidBehavior = {

        created: function () {
            var model = this;
            (function () {
                var validator = new RegExp("^[a-z0-9]{8}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{12}$",
                    "i");

                function gen(count) {
                    var out = "";
                    for (var i = 0; i < count; i++) {
                        out += (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
                    }
                    return out;
                }

                function Guid(guid) {
                    if (!guid) throw new TypeError("Invalid argument; `value` has no value.");

                    this.value = Guid.EMPTY;

                    if (guid && guid instanceof Guid) {
                        this.value = guid.toString();

                    } else if (guid && Object.prototype.toString.call(guid) === "[object String]" && Guid.isGuid(
                        guid)) {
                        this.value = guid;
                    }

                    this.equals = function (other) {
                        // Comparing string `value` against provided `guid` will auto-call
                        // toString on `guid` for comparison
                        return Guid.isGuid(other) && this.value == other;
                    };

                    this.isEmpty = function () {
                        return this.value === Guid.EMPTY;
                    };

                    this.toString = function () {
                        return this.value;
                    };

                    this.toJSON = function () {
                        return this.value;
                    };
                };

                Guid.EMPTY = "00000000-0000-0000-0000-000000000000";

                Guid.isGuid = function (value) {
                    return value && (value instanceof Guid || validator.test(value.toString()));
                };

                Guid.create = function () {
                    return new Guid([gen(2), gen(1), gen(1), gen(1), gen(3)].join("-"));
                };

                Guid.raw = function () {
                    return [gen(2), gen(1), gen(1), gen(1), gen(3)].join("-");
                };

                //if (typeof module != 'undefined' && module.exports) {
                //    module.exports = Guid;
                //}
                //else if (typeof window != 'undefined') {
                //    window.Guid = Guid;

                //}

                model.guid = Guid;

            })();

        }

    }

</script>
<style>
    :host {
        display: block;
        box-sizing: border-box;
        min-width: 100%;
        margin-top: 8px;
    }

        :host #jsGrid {
            min-width: 100%;
        }

        :host #controls {
            margin-bottom: 8px;
        }

        :host #search-cont {
            max-width: 260px;
        }

        :host tr {
            height: 20px;
        }

        :host .jsgrid-grid-body table {
            margin-bottom: 150px;
        }

        :host .material-icons {
            vertical-align: middle;
        }

        :host .md-18 {
            font-size: 18px;
            color: #024754;
        }

        :host .filter-menu {
            padding: 6px;
            left: -26px;
        }

        :host .col_1 i {
            margin-left: 4px;
            vertical-align: bottom;
            margin-bottom: 2px;
        }

        :host th {
            /*overflow: hidden;*/
            white-space: nowrap;
        }

    .jsgrid-grid-body {
        padding-bottom: 75px;
    }

    .col-head .material-icons {
        display: none;
    }

    .col-head.sort_up .up {
        display: inline;
    }

    .col-head.sort_down .down {
        display: inline;
    }

    .col-head {
        text-decoration: none;
        color: #024754;
    }

        .col-head:hover {
            text-decoration: none;
            color: #024754;
        }

    .actions-field {
        overflow: visible !important;
    }

    .jsgrid-grid-header table {
        margin-bottom: 0;
        border-bottom: none;
    }

        .jsgrid-grid-header table th {
            padding: 8px;
        }
</style>
<dom-module id="power-grid" assetpath="power-grid/">
    <template>
        <style>
            :host {
                display: block;
                box-sizing: border-box;
                min-width: 100%;
                padding-bottom: 40px;
                margin-top: 8px;
            }

                :host #jsGrid {
                    min-width: 100%;
                }

                :host #controls {
                    margin-bottom: 8px;
                }

                :host #search-cont {
                    max-width: 260px;
                }

                :host tr {
                    height: 20px;
                }

                :host table {
                    margin-bottom: 150px;
                }

                :host .material-icons {
                    vertical-align: middle;
                }

                :host .md-18 {
                    font-size: 18px;
                    color: #024754;
                }

                :host .filter-menu {
                    padding: 6px;
                    left: -26px;
                }

                :host .col_1 i {
                    margin-left: 4px;
                    vertical-align: bottom;
                    margin-bottom: 2px;
                }

                :host th {
                    overflow: hidden;
                    white-space: nowrap;
                }

                :host td {
                    display: inline-block;
                }

            .col-head .material-icons {
                display: none;
            }

            .col-head.sort_up .up {
                display: inline;
            }

            .col-head.sort_down .down {
                display: inline;
            }

            .col-head {
                text-decoration: none;
                color: #024754;
            }

                .col-head:hover {
                    text-decoration: none;
                    color: #024754;
                }
        </style>
        <div id="controls">
            <template is="dom-if" if="{{_hasBulkActions}}">
                <div class="btn-group">
                    <button type="button" id="bulkActions" class="btn btn-default dropdown-toggle no-print" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Bulk Actions
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <template is="dom-repeat" items="{{bulkActions}}">
                            <li>
                                <a href="#" on-tap="_bulkActionFire">{{item.title}}</a>
                            </li>
                        </template>
                        <template is="dom-repeat" items="{{bulkOps}}">
                            <li>
                                <a href="#" on-tap="_bulkOpFire">{{item.title}}</a>
                            </li>
                        </template>
                        <li id="liExport" hidden$="{{remoteExportUrl}}">
                            <a href="#" on-tap="_exportAll">Export Excel CSV</a>
                        </li>
                        <template is="dom-if" if="{{remoteExportUrl}}">
                            <li>
                                <a href="#" on-tap="_exportRemoteCall">Export CSV</a>
                            </li>
                        </template>
                        </ul>
                </div>
            </template>
            <template is="dom-if" if="{{canSearch}}">
                <div id="search-cont" class="pull-right">
                    <form class="input-group">
                        <input type="text" class="form-control" placeholder="Search for..." value="{{searchText::input}}">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="submit" on-tap="_search">Search</button>
                        </span>
                    </form>
                    </div>
            </template>
        </div>
        <div id="jsGrid" class=""></div>
        <content></content>
    </template>
    <script>
        Polymer({
            is: 'power-grid',
            properties: {
                gridId: {
                    type: String

                },

                gridData: {
                    type: Object
                },
                gridFields: {
                    type: Array
                },
                sorting: {
                    type: Boolean,
                    value: true
                },
                paging: {
                    type: Boolean,
                    value: true
                },
                filter: {
                    type: Boolean,
                    value: false
                },
                gridActions: {
                    type: Object
                },
                openbutton: {
                    type: Boolean,
                    value: true
                },
                pageIndex: {
                    type: Number
                },
                simple: {
                    type: Boolean,
                    value: false,

                },
                csvExport: {
                    type: Boolean,
                    value: false,
                },

                pageSize: {
                    type: Number,
                    value: 25
                },
                stopLoad: {
                    type: Boolean,
                    value: false,
                },
                noSearch: {
                    type: Boolean,
                    value: false,
                },
                urlCall: {
                    type: String,
                    value: ''
                },
                remoteExportUrl: {
                    type: Boolean,
                    value: false
                }
            },
            behaviors: [guidBehavior],
            ready: function () {


            },
            isNumeric: function (n) {
                return !isNaN(parseFloat(n)) && isFinite(n);
            },
            isDate: function (date) {
                return date && (!(new Date(date) == "Invalid Date") && !isNaN(new Date(date)));
            },
            attached: function () {

                $(this).attr('grid-id', this.guid.create());

                this.fire('ready', this);
                window.grid = this;

                var model = this;
                model.canOpen = $(model).find('grid-open').length > 0;


                var fields = $(model).find('grid-field').toArray();
                var newfields = [];

                for (var i = 0; i < fields.length; i++) {
                    newfields.push({
                        name: $(fields[i]).attr('name'),
                        type: $(fields[i]).attr('type'),
                        width: $(fields[i]).attr('width'),
                        title: $(fields[i]).attr('title'),
                        align: $(fields[i]).attr('align'),
                        sorting: $(fields[i]).is('[sort]') ? true : false,
                    });


                }

                model.actions = $(model).find('grid-action').toArray();
                model.actionImgs = $(model).find('grid-action-img').toArray();


                model.bulkActions = $(model).find('grid-bulk-action').toArray();

                model.bulkOps = $(model).find('grid-bulkop').toArray();

                model._hasBulkActions = model.bulkActions.length > 0 || model.bulkOps.length > 0 || model.csvExport;
                model.notifyPath('_hasBulkActions', model._hasBulkActions);

                model.gridData = [];
                model.reggridFields = [];
                //model.initJSGrid();
                model.autoLoad = !model.stopLoad;
                model.controller = null;

                model.canSearch = false;

                if (model.noSearch) {
                    model.canSearch = false;
                }


                var dataEle = $(model).find('grid-data').get(0);
                setTimeout(function () {
                    model.setGridFields(newfields);

                    if (dataEle != null) {

                        for (var i = 0; i < fields.length; i++) {
                            if (fields[i].search) {
                                model.canSearch = true;
                                break;
                            }
                        }

                        if (!model.simple) {
                            model.canSearch = true;
                        }


                        if (model.noSearch) {
                            model.canSearch = false;
                        }

                        model.controller = {
                            loadData: function (filter) {
                                if (model.searchText) {
                                    filter._searchText = model.searchText;
                                }
                                var t0 = performance.now();
                                var d = $.Deferred();

                                if (model.lastDataUrl && model.lastDataUrl !== dataEle.url + model.searchText) {
                                    filter.pageIndex = 1;
                                    $(model.selectAllheader).prop("checked", false);
                                }
                                model.pageIndex = filter.pageIndex;
                                model.lastDataUrl = dataEle.url + model.searchText;

                                var skip = (filter.pageIndex - 1) * filter.pageSize;


                                var leadChar = "?";
                                if (dataEle.url.indexOf('?') >= 0) {
                                    var leadChar = "&";
                                }

                                var url = dataEle.url + leadChar + "$skip=" + skip +
                                    "&$top=" + filter.pageSize;

                                if (filter.sortField) {
                                    url += "&$orderby=" +
                                        filter.sortField.split(".").join("/") +
                                        " " +
                                        filter.sortOrder;
                                }


                                if (filter._searchText) {


                                    if (dataEle.v2Search) {
                                        console.log("V2 Search");

                                        url += "&$search=" + encodeURIComponent(filter._searchText);

                                    }
                                    else {


                                        url += "&$filter=";

                                        var fields = $(model).find('grid-field').toArray();
                                        for (var i = 0; i < fields.length; i++) {

                                            if (fields[i].search) {
                                                if (fields[i].type == 'text') {
                                                    url += "startswith(" +
                                                        fields[i].name.replace('.', '/') +
                                                        ", '" +
                                                        filter._searchText +
                                                        "')" +
                                                        " or ";
                                                } else if (fields[i].type == 'number' && model.isNumeric(
                                                    filter._searchText)) {
                                                    //url += fields[i].name.replace('.', '/') +
                                                    url += fields[i].name.split(".").join("/") +
                                                        " eq " +
                                                        filter._searchText +
                                                        " or ";
                                                } else if (fields[i].type == 'prettyDate' && !
                                                    model.isNumeric(filter._searchText) &&
                                                    model.isDate(filter._searchText)) {
                                                    var dateObj = new Date(Date.parse(filter._searchText));
                                                    var offsetMinutes = dateObj.getTimezoneOffset();
                                                    dateObj = new Date(dateObj.getTime() - (
                                                        offsetMinutes * 60000));
                                                    var startDateStr = dateObj.toISOString();
                                                    dateObj.setDate(dateObj.getDate() + 1);
                                                    var endDateStr = dateObj.toISOString();
                                                    //var dateField = fields[i].name.replace('.', '/');
                                                    var dateField = fields[i].name.split(".").join(
                                                        "/");
                                                    url += dateField +
                                                        " ge datetime'" +
                                                        startDateStr +
                                                        "' and " +
                                                        dateField +
                                                        " lt datetime'" +
                                                        endDateStr +
                                                        "' or ";
                                                }
                                            }

                                        }

                                        url = url.substr(0, url.length - 4);
                                    }

                                }


                                console.log(filter);


                                //$filter=contains(Name,'red')
                                // Reload Hold Place
                                if (filter.reload) {
                                    url = model.lastUrl;
                                }


                                model.lastUrl = url;

                                $.ajax({
                                    url: url,
                                    dataType: "json"
                                })
                                    .done(function (response) {


                                        if (!response.Count && response.__count) {
                                            response.Count = response.__count;
                                        }


                                        if (!response.data && response.Items) {
                                            response.data = response.Items;
                                        }

                                        d.resolve({
                                            data: response.data,
                                            itemsCount: response.Count ||
                                                response.data.length || null,
                                        });
                                        model.fire('data-loaded', {
                                            data: response.data,
                                            itemsCount: response.Count ||
                                                response.data.length,
                                        });
                                        model.totalRecordCount = response.Count ||
                                            response.data.length;

                                        var t1 = performance.now();
                                        console.log("jsgrid loadData " + (t1 - t0) + " ms");
                                    });

                                return d.promise();

                            }
                        };
                        model.initJSGrid();
                    }
                },
                    200);
                //if (model.remoteCsvExport) {
                //    $(model.$.liExport).addClass('hidden');
                //}
            },

            _replaceAll: function replaceAll(str, find, replace) {
                return str.replace(new RegExp(find, 'g'), replace);
            },


            _search: function (e) {
                e.preventDefault();
                var text = this.searchText;


                $(this.gridControl).jsGrid("loadData", {
                    _searchText: text
                });

                //this.searchText = "";

            },

            reload: function () {
                $(this.gridControl).jsGrid("loadData", {
                    reload: true
                });
            },

            hardreload: function () {
                $(this.gridControl).jsGrid("loadData", {});
            },

            _hasBulkActions: false,

            detached: function () {

            },
            setData: function (obj) {

                //console.log(obj);
                var model = this;
                model.gridData = obj;
                model.initJSGrid();
            },
            setGridFields: function (obj) {
                var model = this;


                if (!model.simple) {

                    obj.unshift({
                        css: "first-field",
                        name: "_multiSelect",
                        headerTemplate: function () {

                            model.selectAllheader = $("<input>")
                                .attr("type", "checkbox")
                                .on("change",
                                    function () {
                                        if ($(this).is(":checked")) {
                                            model._selectAll()
                                        }
                                        else {
                                            model._unselectAll()
                                        }
                                    });

                            return model.selectAllheader;
                        },
                        itemTemplate: function (_, item) {
                            var cell = $('<span/>');
                            cell.append($("<input>")
                                .attr("type", "checkbox")
                                .on("change",
                                    function () {
                                        $(this).is(":checked") ? model._selectItem(item) :
                                            model._unselectItem(item);
                                    }));

                            if (model.canOpen) {
                                // cell.append($(
                                //         '<i class="material-icons md-18">open_in_new</i></a>'
                                //     )
                                //     .on('click',
                                //         function (e) {
                                //             e.preventDefault();
                                //             model._gridOpen(null, item, e);
                                //         }));
                            }

                            return cell;
                        },
                        align: "left",
                        sorting: false,
                        width: 20
                    });
                } else {
                    model.canSearch = false;
                }


                if (model.actions.length > 0) {
                    obj.push({
                        css: "actions-field",
                        name: "_actions",
                        title: 'Actions',
                        itemTemplate: function (value, row, col) {

                            var validActions = [];


                            for (var i = 0; i < model.actions.length; i++) {
                                if (model.actions[i].valid) {

                                    var actionReturn = model.actions[i].valid(row, model.actions[
                                        i]);
                                    if (typeof actionReturn === 'boolean' && actionReturn) {

                                        validActions.push(model.actions[i]);
                                    } else if (actionReturn && typeof actionReturn.done ===
                                        'function') {
                                        actionReturn.done(function (boolVal) {
                                            if (boolVal) {
                                                validActions.push(model.actions[i]);
                                            }
                                        });
                                    }
                                } else if (model.actions[i].valid == null) {
                                    validActions.push(model.actions[i]);
                                }
                            }


                            if (!validActions || validActions.length == 0) {
                                return "";
                            }

                            if (validActions.length == 1) {

                                var button = $('<div class="btn-group"></div>');
                                button.append(
                                    '<button type="button" class="btn  btn-xs btn-default">' +
                                    validActions[0].title +
                                    '</button>')
                                    .on('click',
                                        function (e) {
                                            e.preventDefault();
                                            model._gridAction(validActions[0], row, e);
                                        });
                                return button;
                            }


                            var firstaction = validActions[0];

                            var dropbutton = $('<div class="btn-group pull-right"></div>');
                            dropbutton.append(
                                '<button type="button" class="btn  btn-xs btn-default">' +
                                validActions[0].title +
                                '</button>')
                                .on('click',
                                    function (e) {
                                        e.preventDefault();

                                        if (!e.target.classList.contains("dropdown-toggle") &&
                                            !e.target.classList.contains("child-item") &&
                                            !e.target.classList.contains("caret")) {
                                            model._gridAction(validActions[0], row, e);
                                        }
                                        if (e.target.classList.contains("dropdown-toggle") ||
                                            e.target.classList.contains("child-item") ||
                                            e.target.classList.contains("caret")) {

                                        }
                                    });
                            dropbutton
                                .append($(
                                    '<button type="button" id="btndrop" class="btn  btn-xs btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' +
                                    '    <span class="caret"></span>' +
                                    '    <span class="sr-only">Toggle Dropdown</span>' +
                                    '  </button>'));
                            var listul = $('<ul class="dropdown-menu"></ul>');
                            dropbutton.append(listul);
                            for (var i = 1; i < validActions.length; i++) {
                                listul.append(
                                    '<li><a href="#" class="child-item" data-item-index="' +
                                    i +
                                    '">' +
                                    validActions[i].title +
                                    '</a></li>')
                                    .on('click',
                                        function (e) {
                                            $(this).closest(".dropdown-menu").prev().dropdown("toggle");
                                            e.preventDefault();
                                            //e.stopPropagation();
                                            e.stopImmediatePropagation();
                                            var index = parseInt($(e.target).attr(
                                                'data-item-index'));
                                            model._gridAction(validActions[index], row, e);
                                        });
                            }




                            return dropbutton;


                            //var model = this.model;
                            //var render = function (row) { };
                            //for (var i = 0; i < model.gridFields.length; i++) {
                            //    if (this.model.gridFields[i].type == "actions") {
                            //        render = this.model.gridFields[i].render;
                            //    }
                            //    //if (this.model.gridFields[i].type == "openaction") {
                            //    //    return $("<p>Test</p>");
                            //    //}
                            //}

                            //var items = render(row);
                            //if (!items || items.length == 0) {
                            //    return "";
                            //}


                        },
                        align: "right",
                        sorting: false,
                        //width: 90
                    });
                }

                if (model.actionImgs.length > 0) {
                    obj.push({
                        css: "actions-field",
                        name: "_actions",
                        title: 'Actions',
                        itemTemplate: function (value, row, col) {

                            var validActions = [];


                            for (var i = 0; i < model.actionImgs.length; i++) {
                                if (model.actionImgs[i].valid) {

                                    var actionReturn = model.actionImgs[i].valid(row, model.actionImgs[
                                        i]);
                                    if (typeof actionReturn === 'boolean' && actionReturn) {

                                        validActions.push(model.actionImgs[i]);
                                    } else if (actionReturn && typeof actionReturn.done ===
                                        'function') {
                                        actionReturn.done(function (boolVal) {
                                            if (boolVal) {
                                                validActions.push(model.actionImgs[i]);
                                            }
                                        });
                                    }
                                } else if (model.actionImgs[i].valid == null) {
                                    validActions.push(model.actionImgs[i]);
                                }
                            }


                            if (!validActions || validActions.length == 0) {
                                return "";
                            }

                            if (validActions.length > 0) {

                                var group = $('<div></div>');
                                for (var i = 0; i < validActions.length; i++) {
                                    var imglink = $('<input type="image" src="' + validActions[i].src + '" data-item-index="' + i + '" />')
                                        .on('click',
                                            function (e) {
                                                e.preventDefault();
                                                var index = parseInt($(e.target).attr('data-item-index'));
                                                model._gridActionImg(validActions[index], row, e);
                                            });
                                    group.append(imglink);
                                    group.append('&nbsp;&nbsp;')

                                }

                                return group;
                            }


                        },
                        align: "right",
                        sorting: false,

                    });
                }

                model.gridFields = obj;
            },


            _gridAction: function (details, row, e) {
                if (e) {
                    e.preventDefault();
                    e.stopPropagation();
                }


                this.fire("grid-action", {
                    action: details,
                    item: row
                });


                details._fireAction(row);

            },

            _gridActionImg: function (details, row, e) {
                if (e) {
                    e.preventDefault();
                    e.stopPropagation();
                }


                this.fire("grid-action-img", {
                    action: details,
                    item: row
                });


                details._fireAction(row);

            },

            _bulkActionFire: function (e) {

                e.preventDefault();
                var details = e.model.item;

                this.fire("grid-bulk-action", {
                    action: details,
                    items: this._selectedItems
                });


                details._fireAction(this._selectedItems);
            },

            _bulkOpFire: function (e) {
                e.preventDefault();
                var details = e.model.item;

                this.fire("grid-bulk-action", {
                    action: details,
                    items: this._selectedItems
                });


                details._open(this._selectedItems);
            },

            _gridOpen: function (details, row, e) {
                if (e) {
                    e.preventDefault();
                    e.stopPropagation();
                }

                this.fire("grid-open", {
                    action: details,
                    item: row
                });
                $(this).find('grid-open')[0]._fireOpen(row);


            },


            getGridColumns: function () {
                var fields = this.gridControl.data().JSGrid.fields;
                var ol = [];
                for (var i = 0; i < fields.length; i++) {
                    ol.push({
                        title: fields[i].title,
                        name: fields[i].name
                    });
                }
                return ol;
            },

            getGridRow: function (index) {
                return this.gridControl.data().JSGrid.data[index];
            },
            getGridRowsCount: function () {
                if (this.gridControl && this.gridControl.data().JSGrid && this.gridControl.data().JSGrid.data) {
                    return this.gridControl.data().JSGrid.data.length;
                } else {
                    return 0;
                }
            },


            getGridRowCellByColumn: function (index, column) {
                var columns = this.getGridColumns();
                var col = null;
                var row = this.getGridRow(index);
                if (typeof column == "number") {
                    col = columns[column];
                    return row[col.name];
                }

                for (var i = 0; i < columns.length; i++) {
                    if (columns[i].name == column || columns[i].title == column) {
                        return eval("row." + columns[i].name);
                    }
                }
            },


            findRowByValueInColumn: function (column, value) {
                for (var i = 0; i < this.gridControl.data().JSGrid.data.length; i++) {
                    var val = this.getGridRowCellByColumn(i, column);
                    if (value == val) {
                        return {
                            index: i,
                            row: this.gridControl.data().JSGrid.data[i]
                        };
                    }

                }


            },


            openRowByIndex: function (index) {
                var row = this.getGridRow(index);
                this._gridOpen(null, row);
            },


            getRowActions: function (index) {
                var ol = [];
                var row = this.getGridRow(index);
                var domRow = $(this).find('.jsgrid-grid-body .jsgrid-table tr')[index];
                var actionscell = $(domRow).find('.actions-field');
                var mainAction = $($(actionscell).find('button')[0]).text();
                ol.push(mainAction);
                for (var i = 0; i < $(actionscell).find('a').length; i++) {
                    ol.push($($(actionscell).find('a')[0]).text());
                }
                return ol;
            },

            fireRowAction: function (index, action) {
                var domRow = $(this).find('.jsgrid-grid-body .jsgrid-table tr')[index];
                var actionscell = $(domRow).find('.actions-field');


                var button = $("button:contains('" + action + "')")[0];
                if (button) {
                    button.click();
                }

                var anc = $("a:contains('" + action + "')")[0];
                if (anc) {
                    anc.click();
                }


            },
            setGridActions: function (obj) {
                var model = this;
                model.gridActions = function (config) {
                    if (config.name == "_actions") {

                        config.name = "Actions";
                    }

                    jsGrid.Field.call(this, config);
                };

                var field = {
                    model: model,
                    css: "date-field", // redefine general property 'css'
                    align: "right", // redefine general property 'align'

                    myCustomProperty: "foo", // custom property
                    sorting: false,

                    itemTemplate: function (value, row, col) {

                        var model = this.model;
                        var render = function (row) { };
                        for (var i = 0; i < this.model.gridFields.length; i++) {
                            if (this.model.gridFields[i].type == "actions") {
                                render = this.model.gridFields[i].render;
                            }
                            //if (this.model.gridFields[i].type == "openaction") {
                            //    return $("<p>Test</p>");
                            //}
                        }

                        var items = render(row);
                        if (!items || items.length == 0) {
                            return "";
                        }

                        var firstaction = items[0];
                        if (items.length == 1) {
                            var button = $('<div class="btn-group"></div>');
                            button.append('<button type="button" class="btn btn-default">' + items[
                                0].title + '</button>').on('click', function (e) {
                                    e.preventDefault();
                                    model._gridAction(items[0], row, e);
                                })
                            return button;
                        }
                        var dropbutton = $('<div class="btn-group"></div>');
                        dropbutton.append('<button type="button" class="btn btn-default">' + items[
                            0].title + '</button>').on('click', function (e) {
                                e.preventDefault();
                                if (!e.target.classList.contains("dropdown-toggle") && !e.target
                                    .classList.contains("child-item")) {
                                    model._gridAction(items[0], row, e);
                                }
                            });
                        dropbutton.append($(
                            '<button type="button" id="btndrop" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' +
                            '    <span class="caret"></span>' +
                            '    <span class="sr-only">Toggle Dropdown</span>' +
                            '  </button>'));
                        var listul = $('<ul class="dropdown-menu"></ul>');
                        dropbutton.append(listul);
                        for (var i = 1; i < items.length; i++) {
                            listul.append('<li><a href="#" class="child-item" data-item-index="' +
                                i + '">' + items[i].title + '</a></li>').on('click', function (
                                    e) {
                                    e.preventDefault();
                                    //e.stopPropagation();
                                    var index = parseInt($(e.target).attr('data-item-index'));
                                    model._gridAction(items[index], row, e);
                                });
                        }
                        return dropbutton;
                    },
                };


                model.gridActions.prototype = new jsGrid.Field(field);
            },


            _selectedItems: [],
            _selectItem: function (item) {

                this._selectedItems.push(item);

            },

            _unselectItem: function (item) {
                this._selectedItems = $.grep(this._selectedItems, function (i) {
                    return i !== item;
                });


            },

            _selectAll: function () {

                $(this.gridControl.data().JSGrid._bodyGrid).find('input[type=checkbox]').click();

            },

            _unselectAll: function () {

                $(this.gridControl.data().JSGrid._bodyGrid).find('input[type=checkbox]').click();

            },



            _refreshed: function (grid) {
                this.wc._selectedItems = [];

                $(this.wc.selectAllheader).prop("checked", false);

            },
            _onLoad: function (grid, data) {
                var pageIndexOnGrid = this.pageIndex;
                if (this.wc.pageIndex && this.wc.pageIndex !== pageIndexOnGrid) {
                    this.option("pageIndex", this.wc.pageIndex);
                }
            },

            _addFieldElement: function (fieldele) {
                var field = fieldele;
                this.reggridFields.push({
                    name: fieldele.name,
                    type: fieldele.type,
                    width: fieldele.width,
                    title: fieldele.title,
                    align: fieldele.align
                });

                this.setGridFields(this.reggridFields);

                //this.initJSGrid();
            },

            initJSGrid: function () {


                var RenderField = function (config) {
                    jsGrid.Field.call(this, config);
                };

                RenderField.prototype = new jsGrid.Field({
                    sorter: function (item1, item2) {
                        return 0; //new Date(date1) - new Date(date2);
                    },

                    itemTemplate: function (value, row) {


                        var fields = $(this._grid.wc).find('grid-field').toArray();

                        for (var i = 0; i < fields.length; i++) {
                            if (fields[i].title == this.title) {
                                return fields[i].render(row);
                            }
                        }

                        return "";


                    },


                });

                jsGrid.fields.render = RenderField;
                var PrettyDateField = function (config) {
                    jsGrid.Field.call(this, config);
                };

                PrettyDateField.prototype = new jsGrid.Field({
                    sorter: function (date1, date2) {
                        return new Date(date1) - new Date(date2);
                    },

                    itemTemplate: function (value) {
                        if (!value) {
                            console.log("prettyDate is empty")
                            return "";
                        }
                        return moment(value).format('MM/DD/YYYY');

                    }
                });
                jsGrid.fields.prettyDate = PrettyDateField;


                var CurrencyField = function (config) {
                    jsGrid.Field.call(this, config);
                };
                CurrencyField.prototype = new jsGrid.Field({
                    itemTemplate: function (value) {
                        value = parseFloat(value);
                        var num = '$' + value.toFixed(2).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
                        return num;
                    },
                });
                jsGrid.fields.currency = CurrencyField;


                var LinkField = function (config) {
                    jsGrid.Field.call(this, config);
                };

                LinkField.prototype = new jsGrid.Field({
                    //sorter: function (date1, date2) {
                    //    return new Date(date1) - new Date(date2);
                    //},

                    itemTemplate: function (value) {


                        if (value) {
                            return '<a href="' + value + '">Open</a>';
                        }
                        return '';

                        //var date = new Date(value);
                        //if (typeof $coreData == 'undefined') {
                        //    return publicFormatDate(value);

                        //} else {
                        //    return $coreData.formatDate(date);
                        //}



                    },



                });

                jsGrid.fields.link = LinkField;


                var model = this;
                model.setGridActions();
                jsGrid.fields.actions = model.gridActions;
                jsGrid.fields.openactions = model.gridOpen;
                model.pageIndex = 1;
                model.gridControl = $(this).find("#jsGrid").jsGrid({
                    width: "100%",
                    //height: "400px",
                    data: model.gridData,
                    fields: model.gridFields,
                    sorting: model.sorting,
                    paging: model.paging,
                    filtering: model.filter,
                    onRefreshed: model._refreshed,
                    onDataLoaded: model._onLoad,
                    autoload: model.autoLoad,
                    controller: model.controller,
                    pageLoading: true,
                    pageSize: model.pageSize,
                    pageIndex: 1,
                    rowClick: function (e) {
                        if (!e.event.target.classList.contains("dropdown-toggle") &&
                            !e.event.target.classList.contains("child-item") &&
                            !(e.event.target.type == "checkbox") &&




                            !e.event.target.classList.contains("caret")) {
                            model._gridOpen(null, e.item);
                        }

                    },
                    wc: this,
                });


                //$($(this).find('.jsgrid-table').get(1)).css('width', '100%');


                setInterval(function () {

                    $($(model).find('.jsgrid-table').get(1)).attr('style', 'width: 100%');
                    $($(model).find('.jsgrid-table').get(1)).addClass('table').addClass('table-bordered');
                    $($(model).find('.jsgrid-table').get(0)).addClass('table').addClass('table-bordered');
                    $($(model).find('.jsgrid-table').get(1)).css('table-layout', 'fixed');
                    $($(model).find('.jsgrid-table').get(0)).css('table-layout', 'fixed');
                },
                    200);


            },


            _exportAll: function (e) {
                if (e) {
                    e.preventDefault();
                }
                var model = this;
                model.loadData(null, true).done(function (data) {
                    var title = 'export';
                    if (this.title) {
                        title = model.title;
                    }

                    model.JSONToCSVConvertor(data.data, title, true);
                });
            },
            _exportCurrent: function (e) {
                if (e) {
                    e.preventDefault();
                }
                var model = this;
                model.loadData(null, true).done(function (data) {
                    var title = 'export';
                    if (this.title) {
                        title = model.title;
                    }
                    model.JSONToCSVConvertor(data.data, title, true);
                });


            },
            _exportRemoteCall: function (e) {
                var model = this;
                if (e) {
                    e.preventDefault();
                }
                if (model.urlCall != "") {
                    $.get(model.urlCall)
                        .done(function (data) {
                            var title = 'export';
                            if (this.title) {
                                title = model.title;
                            }
                            model.JSONToCSVConvertor(data.data, title, true);
                        });
                }
                else {
                    console.log("url is needed to make a call to pull data");
                }
            },
            isInArray: function (value, array) {
                return array.indexOf(value) > -1;
            },

            JSONToCSVConvertor: function (JSONData, ReportTitle, ShowLabel) {
                var model = this;
                this._reservedCols = ["_id", "_actions", "AvailableStates"];
                //If JSONData is not an object then JSON.parse will parse the JSON string in an Object
                var arrData = null;
                if (typeof JSONData != 'object') {
                    arrData = JSON.parse(JSONData);
                }
                else {
                    arrData = JSONData;
                }



                var CSV = '';
                //Set Report title in first row or line

                CSV += ReportTitle + '\r\n\n';

                //This condition will generate the Label/Header
                if (ShowLabel) {
                    var row = "";



                    //This loop will extract the label from 1st index of on array
                    Object.getOwnPropertyNames(arrData[0]).forEach(function (index, id, a) {
                        if (!model.isInArray(index, model._reservedCols)) {
                            //Now convert each value to string and comma-seprated
                            if (Object.prototype.toString.call(arrData[0][index]) ===
                                '[object Object]') {

                            } else {
                                row += index + ',';
                            }
                        }
                    });

                    row = row.slice(0, -1);

                    //append Label row with line break
                    CSV += row + '\r\n';
                }

                //1st loop is to extract each row
                for (var i = 0; i < arrData.length; i++) {
                    var row = "";

                    //2nd loop will extract each column and convert it in string comma-seprated


                    Object.getOwnPropertyNames(arrData[i]).forEach(function (val, id, a) {

                        if (!model.isInArray(val, model._reservedCols)) {

                            if (Object.prototype.toString.call(arrData[i][val]) === '[object Date]') {


                                row += '"' + arrData[i][val].toLocaleDateString() + '",';


                            } else if (Object.prototype.toString.call(arrData[i][val]) ===
                                '[object Object]') {

                            } else {
                                row += '"' + arrData[i][val] + '",';
                            }



                        }
                    });

                    //for (var index in arrData[i]) {
                    //    row += '"' + arrData[i][index] + '",';
                    //}

                    row.slice(0, row.length - 1);

                    //add a line break after each row
                    CSV += row + '\r\n';
                }

                if (CSV == '') {
                    alert("Invalid data");
                    return;
                }

                //Generate a file name
                var fileName = "export_";
                //this will remove the blank-spaces from the title and replace it with an underscore
                fileName += ReportTitle.replace(/ /g, "_");
                fileName += new Date().getFullYear() + new Date().getMonth() + new Date().getDay();

                //Initialize file format you want csv or xls
                var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);

                // Now the little tricky part.
                // you can use either>> window.open(uri);
                // but this will not work in some browsers
                // or you will not get the correct file extension

                //this trick will generate a temp <a /> tag
                var link = document.createElement("a");
                link.href = uri;

                //set the visibility hidden so it will not effect on your web-layout
                link.style = "visibility:hidden";
                link.download = fileName + ".csv";

                //this part will append the anchor tag and remove it after automatic click
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            },

            loadData: function (filter, getall) {
                var model = this;
                if (model.searchText != "") {
                    filter._searchText = model.searchText;
                }
                if (filter == null) {
                    filter = {
                        pageIndex: 1,
                        pageSize: 20
                    };
                }
                if (!getall) {
                    getall = false;
                }

                var dataEle = $(model).find('grid-data').get(0);

                var d = $.Deferred();
                var skip = (filter.pageIndex - 1) * filter.pageSize;


                var leadChar = "?";
                if (dataEle.url.indexOf('?') >= 0) {
                    var leadChar = "&";
                }

                var url = dataEle.url + leadChar + "$skip=" + skip + "&$top=" + (getall ? model.totalRecordCount :
                    filter.pageSize);

                if (filter.sortField) {
                    url += "&$orderby=" +
                        filter.sortField.split(".").join("/") +
                        " " +
                        filter.sortOrder;
                }


                if (filter._searchText) {
                    if (dataEle.v2Search) {
                        console.log("V2 Search");
                    }
                    else {

                        url += "&$filter=";

                        var fields = $(model).find('grid-field').toArray();
                        for (var i = 0; i < fields.length; i++) {

                            if (fields[i].search) {
                                if (fields[i].type == 'text') {
                                    url += "startswith(" +
                                        fields[i].name.replace('.', '/') +
                                        ", '" +
                                        filter._searchText +
                                        "')" +
                                        " or ";
                                } else if (fields[i].type == 'number' && model.isNumeric(filter._searchText)) {
                                    //url += fields[i].name.replace('.', '/') +
                                    url += fields[i].name.split(".").join("/") +
                                        " eq " +
                                        filter._searchText +
                                        " or ";
                                } else if (fields[i].type == 'prettyDate' && !model.isNumeric(filter._searchText) &&
                                    model.isDate(filter._searchText)) {
                                    var dateObj = new Date(Date.parse(filter._searchText));
                                    var offsetMinutes = dateObj.getTimezoneOffset();
                                    dateObj = new Date(dateObj.getTime() - (offsetMinutes * 60000));
                                    var startDateStr = dateObj.toISOString();
                                    dateObj.setDate(dateObj.getDate() + 1);
                                    var endDateStr = dateObj.toISOString();
                                    //var dateField = fields[i].name.replace('.', '/');
                                    var dateField = fields[i].name.split(".").join("/");
                                    url += dateField +
                                        " ge datetime'" +
                                        startDateStr +
                                        "' and " +
                                        dateField +
                                        " lt datetime'" +
                                        endDateStr +
                                        "' or ";
                                }
                            }
                        }

                        url = url.substr(0, url.length - 4);

                    }
                }


                console.log(filter);


                //$filter=contains(Name,'red')
                // Reload Hold Place
                if (filter.reload) {
                    url = model.lastUrl;
                }

                if (!getall) {
                    model.lastUrl = url;
                }

                $.ajax({
                    url: url,
                    dataType: "json"
                })
                    .done(function (response) {

                        if (!response.Count && response.__count) {
                            response.Count = response.__count;
                        }

                        d.resolve({
                            data: response.data,
                            itemsCount: response.Count || response.data.length,
                        });
                        if (!getall) {
                            model.fire('data-loaded', {
                                data: response.data,
                                itemsCount: response.Count || response.data.length,
                            });
                            model.totalRecordCount = response.Count || response.data.length;
                        }
                    });

                return d.promise();

            }

        });
    </script>
</dom-module>
<dom-module id="page-frame">
    <template>
        <style>
             :host {
                display: block;
            }
        </style>
        <div class="container">
            <div class="row breadcrumbs">
            </div>
            <div class="preFrame">
                <content select=".pre-frame">
                </content>
            </div>
            <div class="row content-header">
                <div hidden$="{{hideLeft}}" class="col-md-2 title-left">
                    <h2 class="f-cond">{{titleLeft}}</h2>
                </div>
                <div class$="{{titleContainerClass}} title-center">
                    <h2 class="f-cond">{{titleCenter}}</h2>
                </div>
                <div hidden$="{{hideRight}}" class="col-md-2 title-right">
                    <h2 class="f-cond">{{titleRight}}</h2>
                </div>
            </div>
            <div class="row main-row">
                <div hidden$="{{hideLeft}}" class="col-md-2 left-box">
                    <content select=".left">
                    </content>
                </div>
                <div class$="{{containerClass}} fold-content">
                    <div class$="{{contentClass}}  main-content">
                        <content select=".center">
                        </content>
                    </div>
                    <div hidden$="{{hideRight}}" class="col-md-2 right-box">
                        <content select=".right">
                        </content>
                    </div>
                </div>
            </div>
        </div>
        <content>
        </content>
    </template>
    <script>
        Polymer({
            is: 'page-frame',

            properties: {
                titleLeft: {
                    type: String,
                    value: ''
                },
                titleCenter: {
                    type: String,
                    value: ''
                },
                titleRight: {
                    type: String,
                    value: ''
                },

                hideRight: {
                    type: Boolean,
                    value: false,
                    observe: 'hideRightChanged'
                },
                hideLeft: {
                    type: Boolean,
                    value: false
                }

            },
            created: function () {

            },

            ready: function () {

            },

            calcContentClass: function () {


                if (this.hideRight) {
                    this.contentClass = 'col-md-12';
                }
                else {
                    this.contentClass = 'col-md-10';
                }
                if (this.hideLeft) {
                    this.containerClass = 'col-md-12';
                    this.titleContainerClass = 'col-md-10';
                }
                else {
                    this.containerClass = 'col-md-10';
                    this.titleContainerClass = 'col-md-8';
                }
                this.notifyPath('contentClass', this.contentClass);
                this.notifyPath('containerClass', this.containerClass);
            },



            refreshView: function () {
                var crumbs = $(this).find('page-breadcrumb');
                $(this).find('.breadcrumbs').html('');
                for (var i = 0; i < crumbs.length; i++) {

                    $(this).find('.breadcrumbs').append(crumbs[i]);

                    if (i + 1 !== crumbs.length) {
                        $(this).find('.breadcrumbs').append('<span>&gt;</span>');
                    }
                }
            },

            attached: function () {

                this.refreshView();
                this.notifyPath('calcContentClass()');
                this.contentClass = 'col-md-10';
                this.containerClass = 'col-md-10';

                this.async(function () {
                    this.calcContentClass();

                })

            },




        });
    </script>
</dom-module>
<dom-module id="page-breadcrumb">
    <template>
        <style>
             :host {
                display: inline-block;
            }
        </style>
        <a href$="{{href}}">{{title}}</a>
    </template>
    <script>
        Polymer({
            is: 'page-breadcrumb',

            properties: {
                href: {
                    type: String,
                    value: '',
                },
                title: {
                    type: String,
                    value: '',
                },


            },
            created: function () {

            },

            ready: function () {

            },

            attached: function () {
                if (this.href === '') {
                    $(this).addClass('active');
                    this.href = window.location.href;
                }
            },





        });
    </script>
</dom-module><script src="../lib/leaflet/dist/leaflet.js"></script>
<script src="../lib/esri-leaflet/dist/esri-leaflet.js"></script>
<script src="../lib/esri-leaflet-vector/dist/esri-leaflet-vector.js"></script>

<style>
  /* required styles */

  .leaflet-pane,
  .leaflet-tile,
  .leaflet-marker-icon,
  .leaflet-marker-shadow,
  .leaflet-tile-container,
  .leaflet-pane > svg,
  .leaflet-pane > canvas,
  .leaflet-zoom-box,
  .leaflet-image-layer,
  .leaflet-layer {
    position: absolute;
    left: 0;
    top: 0;
  }

  .leaflet-container {
    overflow: hidden;
  }

  .leaflet-tile,
  .leaflet-marker-icon,
  .leaflet-marker-shadow {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
  }
  /* Safari renders non-retina tile on retina better with this, but Chrome is worse */
  .leaflet-safari .leaflet-tile {
    image-rendering: -webkit-optimize-contrast;
  }
  /* hack that prevents hw layers "stretching" when loading new tiles */
  .leaflet-safari .leaflet-tile-container {
    width: 1600px;
    height: 1600px;
    -webkit-transform-origin: 0 0;
  }

  .leaflet-marker-icon,
  .leaflet-marker-shadow {
    display: block;
  }
  /* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
  /* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
  .leaflet-container .leaflet-overlay-pane svg,
  .leaflet-container .leaflet-marker-pane img,
  .leaflet-container .leaflet-shadow-pane img,
  .leaflet-container .leaflet-tile-pane img,
  .leaflet-container img.leaflet-image-layer {
    max-width: none !important;
  }

  .leaflet-container.leaflet-touch-zoom {
    -ms-touch-action: pan-x pan-y;
    touch-action: pan-x pan-y;
  }

  .leaflet-container.leaflet-touch-drag {
    -ms-touch-action: pinch-zoom;
  }

    .leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
      -ms-touch-action: none;
      touch-action: none;
    }

  .leaflet-container {
    -webkit-tap-highlight-color: transparent;
  }

    .leaflet-container a {
      -webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
    }

  .leaflet-tile {
    filter: inherit;
    visibility: hidden;
  }

  .leaflet-tile-loaded {
    visibility: inherit;
  }

  .leaflet-zoom-box {
    width: 0;
    height: 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 800;
  }
  /* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
  .leaflet-overlay-pane svg {
    -moz-user-select: none;
  }

  .leaflet-pane {
    z-index: 400;
  }

  .leaflet-tile-pane {
    z-index: 200;
  }

  .leaflet-overlay-pane {
    z-index: 400;
  }

  .leaflet-shadow-pane {
    z-index: 500;
  }

  .leaflet-marker-pane {
    z-index: 600;
  }

  .leaflet-tooltip-pane {
    z-index: 650;
  }

  .leaflet-popup-pane {
    z-index: 700;
  }

  .leaflet-map-pane canvas {
    z-index: 100;
  }

  .leaflet-map-pane svg {
    z-index: 200;
  }

  .leaflet-vml-shape {
    width: 1px;
    height: 1px;
  }

  .lvml {
    behavior: url("leaflet-map/leaflet-map.html#default#VML");
    display: inline-block;
    position: absolute;
  }


  /* control positioning */

  .leaflet-control {
    position: relative;
    z-index: 800;
    pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
    pointer-events: auto;
  }

  .leaflet-top,
  .leaflet-bottom {
    position: absolute;
    z-index: 1000;
    pointer-events: none;
  }

  .leaflet-top {
    top: 0;
  }

  .leaflet-right {
    right: 0;
  }

  .leaflet-bottom {
    bottom: 0;
  }

  .leaflet-left {
    left: 0;
  }

  .leaflet-control {
    float: left;
    clear: both;
  }

  .leaflet-right .leaflet-control {
    float: right;
  }

  .leaflet-top .leaflet-control {
    margin-top: 10px;
  }

  .leaflet-bottom .leaflet-control {
    margin-bottom: 10px;
  }

  .leaflet-left .leaflet-control {
    margin-left: 10px;
  }

  .leaflet-right .leaflet-control {
    margin-right: 10px;
  }


  /* zoom and fade animations */

  .leaflet-fade-anim .leaflet-tile {
    will-change: opacity;
  }

  .leaflet-fade-anim .leaflet-popup {
    opacity: 0;
    -webkit-transition: opacity 0.2s linear;
    -moz-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
  }

  .leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
    opacity: 1;
  }

  .leaflet-zoom-animated {
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
  }

  .leaflet-zoom-anim .leaflet-zoom-animated {
    will-change: transform;
  }

  .leaflet-zoom-anim .leaflet-zoom-animated {
    -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
    -moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
    -o-transition: -o-transform 0.25s cubic-bezier(0,0,0.25,1);
    transition: transform 0.25s cubic-bezier(0,0,0.25,1);
  }

  .leaflet-zoom-anim .leaflet-tile,
  .leaflet-pan-anim .leaflet-tile {
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
  }

  .leaflet-zoom-anim .leaflet-zoom-hide {
    visibility: hidden;
  }


  /* cursors */

  .leaflet-interactive {
    cursor: pointer;
  }

  .leaflet-grab {
    cursor: -webkit-grab;
    cursor: -moz-grab;
  }

  .leaflet-crosshair,
  .leaflet-crosshair .leaflet-interactive {
    cursor: crosshair;
  }

  .leaflet-popup-pane,
  .leaflet-control {
    cursor: auto;
  }

  .leaflet-dragging .leaflet-grab,
  .leaflet-dragging .leaflet-grab .leaflet-interactive,
  .leaflet-dragging .leaflet-marker-draggable {
    cursor: move;
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
  }

  /* marker & overlays interactivity */
  .leaflet-marker-icon,
  .leaflet-marker-shadow,
  .leaflet-image-layer,
  .leaflet-pane > svg path,
  .leaflet-tile-container {
    pointer-events: none;
  }

    .leaflet-marker-icon.leaflet-interactive,
    .leaflet-image-layer.leaflet-interactive,
    .leaflet-pane > svg path.leaflet-interactive {
      pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
      pointer-events: auto;
    }

  /* visual tweaks */

  .leaflet-container {
    background: #ddd;
    outline: 0;
  }

    .leaflet-container a {
      color: #0078A8;
    }

      .leaflet-container a.leaflet-active {
        outline: 2px solid orange;
      }

  .leaflet-zoom-box {
    border: 2px dotted #38f;
    background: rgba(255,255,255,0.5);
  }


  /* general typography */
  .leaflet-container {
    font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
  }


  /* general toolbar styles */

  .leaflet-bar {
    box-shadow: 0 1px 5px rgba(0,0,0,0.65);
    border-radius: 4px;
  }

    .leaflet-bar a,
    .leaflet-bar a:hover {
      background-color: #fff;
      border-bottom: 1px solid #ccc;
      width: 26px;
      height: 26px;
      line-height: 26px;
      display: block;
      text-align: center;
      text-decoration: none;
      color: black;
    }

    .leaflet-bar a,
    .leaflet-control-layers-toggle {
      background-position: 50% 50%;
      background-repeat: no-repeat;
      display: block;
    }

      .leaflet-bar a:hover {
        background-color: #f4f4f4;
      }

      .leaflet-bar a:first-child {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
      }

      .leaflet-bar a:last-child {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        border-bottom: none;
      }

      .leaflet-bar a.leaflet-disabled {
        cursor: default;
        background-color: #f4f4f4;
        color: #bbb;
      }

  .leaflet-touch .leaflet-bar a {
    width: 30px;
    height: 30px;
    line-height: 30px;
  }

    .leaflet-touch .leaflet-bar a:first-child {
      border-top-left-radius: 2px;
      border-top-right-radius: 2px;
    }

    .leaflet-touch .leaflet-bar a:last-child {
      border-bottom-left-radius: 2px;
      border-bottom-right-radius: 2px;
    }

  /* zoom control */

  .leaflet-control-zoom-in,
  .leaflet-control-zoom-out {
    font: bold 18px 'Lucida Console', Monaco, monospace;
    text-indent: 1px;
  }

  .leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out {
    font-size: 22px;
  }


  /* layers control */

  .leaflet-control-layers {
    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
    background: #fff;
    border-radius: 5px;
  }

  .leaflet-control-layers-toggle {
    background-image: url("../lib/leaflet/dist/images/layers.png");
    width: 36px;
    height: 36px;
  }

  .leaflet-retina .leaflet-control-layers-toggle {
    background-image: url("../lib/leaflet/dist/images/layers-2x.png");
    background-size: 26px 26px;
  }

  .leaflet-touch .leaflet-control-layers-toggle {
    width: 44px;
    height: 44px;
  }

  .leaflet-control-layers .leaflet-control-layers-list,
  .leaflet-control-layers-expanded .leaflet-control-layers-toggle {
    display: none;
  }

  .leaflet-control-layers-expanded .leaflet-control-layers-list {
    display: block;
    position: relative;
  }

  .leaflet-control-layers-expanded {
    padding: 6px 10px 6px 6px;
    color: #333;
    background: #fff;
  }

  .leaflet-control-layers-scrollbar {
    overflow-y: scroll;
    overflow-x: hidden;
    padding-right: 5px;
  }

  .leaflet-control-layers-selector {
    margin-top: 2px;
    position: relative;
    top: 1px;
  }

  .leaflet-control-layers label {
    display: block;
  }

  .leaflet-control-layers-separator {
    height: 0;
    border-top: 1px solid #ddd;
    margin: 5px -10px 5px -6px;
  }

  /* Default icon URLs */
  .leaflet-default-icon-path {
    background-image: url("../lib/leaflet/dist/images/marker-icon.png");
  }


  /* attribution and scale controls */

  .leaflet-container .leaflet-control-attribution {
    background: #fff;
    background: rgba(255, 255, 255, 0.7);
    margin: 0;
  }

  .leaflet-control-attribution,
  .leaflet-control-scale-line {
    padding: 0 5px;
    color: #333;
  }

    .leaflet-control-attribution a {
      text-decoration: none;
    }

      .leaflet-control-attribution a:hover {
        text-decoration: underline;
      }

  .leaflet-container .leaflet-control-attribution,
  .leaflet-container .leaflet-control-scale {
    font-size: 11px;
  }

  .leaflet-left .leaflet-control-scale {
    margin-left: 5px;
  }

  .leaflet-bottom .leaflet-control-scale {
    margin-bottom: 5px;
  }

  .leaflet-control-scale-line {
    border: 2px solid #777;
    border-top: none;
    line-height: 1.1;
    padding: 2px 5px 1px;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
    background: rgba(255, 255, 255, 0.5);
  }

    .leaflet-control-scale-line:not(:first-child) {
      border-top: 2px solid #777;
      border-bottom: none;
      margin-top: -2px;
    }

      .leaflet-control-scale-line:not(:first-child):not(:last-child) {
        border-bottom: 2px solid #777;
      }

  .leaflet-touch .leaflet-control-attribution,
  .leaflet-touch .leaflet-control-layers,
  .leaflet-touch .leaflet-bar {
    box-shadow: none;
  }

  .leaflet-touch .leaflet-control-layers,
  .leaflet-touch .leaflet-bar {
    border: 2px solid rgba(0,0,0,0.2);
    background-clip: padding-box;
  }


  /* popup */

  .leaflet-popup {
    position: absolute;
    text-align: center;
    margin-bottom: 20px;
  }

  .leaflet-popup-content-wrapper {
    padding: 1px;
    text-align: left;
    border-radius: 12px;
  }

  .leaflet-popup-content {
    margin: 13px 19px;
    line-height: 1.4;
  }

    .leaflet-popup-content p {
      margin: 18px 0;
    }

  .leaflet-popup-tip-container {
    width: 40px;
    height: 20px;
    position: absolute;
    left: 50%;
    margin-left: -20px;
    overflow: hidden;
    pointer-events: none;
  }

  .leaflet-popup-tip {
    width: 17px;
    height: 17px;
    padding: 1px;
    margin: -10px auto 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  .leaflet-popup-content-wrapper,
  .leaflet-popup-tip {
    background: white;
    color: #333;
    box-shadow: 0 3px 14px rgba(0,0,0,0.4);
  }

  .leaflet-container a.leaflet-popup-close-button {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px 4px 0 0;
    border: none;
    text-align: center;
    width: 18px;
    height: 14px;
    font: 16px/14px Tahoma, Verdana, sans-serif;
    color: #c3c3c3;
    text-decoration: none;
    font-weight: bold;
    background: transparent;
  }

    .leaflet-container a.leaflet-popup-close-button:hover {
      color: #999;
    }

  .leaflet-popup-scrolled {
    overflow: auto;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
  }

  .leaflet-oldie .leaflet-popup-content-wrapper {
    zoom: 1;
  }

  .leaflet-oldie .leaflet-popup-tip {
    width: 24px;
    margin: 0 auto;
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
  }

  .leaflet-oldie .leaflet-popup-tip-container {
    margin-top: -1px;
  }

  .leaflet-oldie .leaflet-control-zoom,
  .leaflet-oldie .leaflet-control-layers,
  .leaflet-oldie .leaflet-popup-content-wrapper,
  .leaflet-oldie .leaflet-popup-tip {
    border: 1px solid #999;
  }


  /* div icon */

  .leaflet-div-icon {
    background: #fff;
    border: 1px solid #666;
  }


  /* Tooltip */
  /* Base styles for the element that has a tooltip */
  .leaflet-tooltip {
    position: absolute;
    padding: 6px;
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 3px;
    color: #222;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  }

    .leaflet-tooltip.leaflet-clickable {
      cursor: pointer;
      pointer-events: auto;
    }

  .leaflet-tooltip-top:before,
  .leaflet-tooltip-bottom:before,
  .leaflet-tooltip-left:before,
  .leaflet-tooltip-right:before {
    position: absolute;
    pointer-events: none;
    border: 6px solid transparent;
    background: transparent;
    content: "";
  }

  /* Directions */

  .leaflet-tooltip-bottom {
    margin-top: 6px;
  }

  .leaflet-tooltip-top {
    margin-top: -6px;
  }

    .leaflet-tooltip-bottom:before,
    .leaflet-tooltip-top:before {
      left: 50%;
      margin-left: -6px;
    }

    .leaflet-tooltip-top:before {
      bottom: 0;
      margin-bottom: -12px;
      border-top-color: #fff;
    }

  .leaflet-tooltip-bottom:before {
    top: 0;
    margin-top: -12px;
    margin-left: -6px;
    border-bottom-color: #fff;
  }

  .leaflet-tooltip-left {
    margin-left: -6px;
  }

  .leaflet-tooltip-right {
    margin-left: 6px;
  }

    .leaflet-tooltip-left:before,
    .leaflet-tooltip-right:before {
      top: 50%;
      margin-top: -6px;
    }

  .leaflet-tooltip-left:before {
    right: 0;
    margin-right: -12px;
    border-left-color: #fff;
  }

  .leaflet-tooltip-right:before {
    left: 0;
    margin-left: -12px;
    border-right-color: #fff;
  }
</style>

<dom-module id="leaflet-map" assetpath="leaflet-map/">
  <template>
    <style>
      :host {
        position: relative;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        min-height: 300px;
        /* display: none; */
      }

        :host #mapContainer {
          position: relative;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          width: 100%;
          height: 100%;
        }

        :host #leafletMapElement {
          width: 100%;
          height: 100%;
          border: 0px;
          padding: 0px;
          margin: 0px;
          position: absolute;
        }

        :host.toc #mapContainer {
          width: 77%;
          display: inline-block;
          box-sizing: border-box;
        }

        :host .tocArea {
          width: 21%;
          display: inline-block;
          vertical-align: top;
          padding: 8px;
          box-sizing: border-box;
          height: 100%;
          background-color: white;
        }

        :host .legendList {
          list-style: none;
          -webkit-margin-before: 0;
          -webkit-margin-after: 0;
          -webkit-margin-start: 0;
          -webkit-margin-end: 0;
          -webkit-padding-start: 0;
        }
    </style>

    <content></content>

    <div class="tocArea" hidden$="{{!toc}}">
      <h4>Legend</h4>
      <ul class="legendList">
        <template is="dom-repeat" items="{{layers}}">
          <li style="margin-top: 4px;">
            <label for$="{{item.layerName}}">
              <input id="{{item.layerName}}" type="checkbox" checked$="{{item.isVisible}}" on-change="_layerCheckBoxChange">
              <img alt="" src$="{{item.legendImage}}" style="vertical-align: top;">
              {{item.layerName}}
            </label>
          </li>
        </template>
      </ul>
    </div>
    <div id="mapContainer">
      <div id="mapHeader"></div>
      <div id="leafletMapElement"></div>
    </div>
  </template>
  <script>
      Polymer({
          is: 'leaflet-map',
          // behaviors: [leafletBehavior],
          properties: {

              lng: {
                  type: Number,
                  value: -99.156014,
                  reflectToAttribute: true,
                  //observer: 'lngChange'
              },

              lat: {
                  type: Number,
                  value: 40.10844,
                  reflectToAttribute: true,
                  //observer: 'latChange'
              },

              zoom: {
                  type: Number,
                  value: 4,
                  //observer: 'zoomChange',
                  reflectToAttribute: true
              },

              basemaps: {
                  type: String,
                  value: "Streets"
              },
              defaultBasemap: {
                  type: String,
                  value: null
              },
              toc: {
                  type: Boolean,
                  value: false,

              }

          },


          listeners: {

          },


          attached: function () {


              var model = this;
              if (model.toc) {
                  $(model).addClass('toc');
              }

              model.async(function () {
                  model.map = L.map(model.$.leafletMapElement);
                  model.map.setView([model.lat, model.lng], model.zoom);


              });

              $(model).append($(model).find('leaflet-layer'));

              model.redraw();

          },

          leafletReady: function () {

              var model = this;
              model.async(function () {

              });

          },

          redraw: function () {
              var model = this;

              model.debounce('redraw', function () {
                  var layerElements = $(this).find('leaflet-layer');
                  model.layers = []; //$(this).find('leaflet-layer');

                  for (var i = 0; i < layerElements.length; i++) {
                      var layerToAdd = layerElements[i].layer;
                      model.push('layers', layerElements[i]);
                      if (layerElements[i].isVisible) {
                          model.map.addLayer(layerElements[i].layer);
                      }
                      layerElements[i].map = model.map;
                  }

                  var layersControl = L.control.layers();
                  var basemaps = model.basemaps.split(',');

                  //basemaps.forEach(function (basemapName) {
                  //  var basemapLayer = L.esri.basemapLayer(basemapName).addTo(model.map);

                  //  if (basemapName === 'ShadedRelief' ||
                  //    basemapName === 'Oceans' ||
                  //    basemapName === 'Gray' ||
                  //    basemapName === 'DarkGray' ||
                  //    basemapName === 'Imagery' ||
                  //    basemapName === 'Terrain'
                  //  ) {
                  //    model.map.addLayer(L.esri.basemapLayer(basemapName + 'Labels'));
                  //  }
                  //  layersControl.addBaseLayer(basemapLayer, basemapName)
                  //});

                  //// for (var i = layerElements.length - 1; i >= 0; i--) {
                  ////     layersControl.addOverlay(layerElements[i].layer, layerElements[i].layerName)
                  //// };

                  //layersControl.addTo(model.map);

                  //if (model.defaultBasemap) {
                  //  model.setBasemap(model.defaultBasemap);
                  //}

                  L.esri.Vector.vectorTileLayer("d38e980fc20141a49231b9fcea1c9bc0").addTo(model.map);
              });

          },


          setBasemap: function (basemap) {
              var model = this;
              if (model.CurrLayer) {
                  model.map.removeLayer(model.CurrLayer);
              }

              model.CurrLayer = L.esri.basemapLayer(basemap);

              model.map.addLayer(model.CurrLayer);

              if (model.CurrlayerLabels) {
                  map.removeLayer(model.CurrlayerLabels);
              }

              if (basemap === 'ShadedRelief' ||
                  basemap === 'Oceans' ||
                  basemap === 'Gray' ||
                  basemap === 'DarkGray' ||
                  basemap === 'Imagery' ||
                  basemap === 'Terrain'
              ) {
                  model.CurrlayerLabels = L.esri.basemapLayer(basemap + 'Labels');
                  model.map.addLayer(model.CurrlayerLabels);
              }
          },

          _layerCheckBoxChange: function (e) {
              var checkedVal = e.target.checked;
              e.model.item.isVisible = checkedVal;
              //console.log(e);
          }

      });
  </script>
</dom-module><dom-module id="leaflet-layer" assetpath="leaflet-map/">

  <template>

    <style>
    </style>
    <content></content>
  </template>

  <script>
    Polymer({
      is: 'leaflet-layer',
      properties: {
        url: {
          type: String,
          value: '',
        },
        type: {
          type: String,
          value: 'dynamic',
        },
        layerName: {
          type: String,
          value: ''
        },
        isVisible: {
          type: Boolean,
          value: false,
          observer: '_isVisibleChanged'
        },
        opacity: {
          type: Number,
          value: 1.0
        },
        renderer: {
          type: Object,
          value: {}
        },
        identify: {
          type: Boolean,
          value: true
        },
        where: {
          type: String,
          value: ''
        },
        legendImage: {
          type: String,
          value: ''
        },
        color: {
          type: String,
          value: ''
        },
        opacity: {
          type: Number,
          value: 1
        },
        layers: {
          type: String,
          value: ''
        },
        layerDefs: {
          type: String,
          observer: '_setLayerDefs'
        },
        dynamicLayers: {
          type: Array,
        },
        popupOptions: {
          type: Object,
          value: {
            //maxHeight: 300,
            //maxWidth: 400
          }
        }
      },
      // behaviors: [leafletBehavior],

      behaviors: [
        Polymer.Templatizer
      ],

      observers: [
        '_setDynamicLayers(dynamicLayers.*)'
      ],

      attached: function () {

        var model = this;
        var layersList = model.layers.length > 0 ? model.layers.split(",") : null;
        if (model.type === 'esriDynamic') {
          var dynamicLayer = L.esri.dynamicMapLayer({
            url: this.url,
            // "visible": this.isVisible,
            opacity: model.opacity,
            transparent: true,
            // "imageParameters": imageParameters
            // layers: model.layers.split(','),
            _layerType: 'esriDynamic',
            layers: layersList,
            //layerDefs: model.layerDefs,
            //dynamicLayers: model.dynamicLayers
          });
          model.layer = dynamicLayer;

        } else if (model.type === 'esriFeature') {
          var featureLayer = L.esri.featureLayer({
            url: this.url,
            // "visible": this.isVisible,
            // "opacity": this.opacity
            //"imageParameters": imageParameters

            where: model.where || '',
            _layerType: 'esriFeature',
            onEachFeature: function (feature, layer) {
              model.fire('feature', {
                feature: feature,
                layer: layer
              });
            },
            style: function (feature, layer) {
              model.fire('style', {
                feature: feature,
                layer: layer
              });
            },
            pointToLayer: function (geoJson, latlng) {

              var options = {};
              model.fire('point', {
                geoJson: geoJson,
                latlng: latlng,
                options: options
              });

              return marker = L.marker(latlng, options);
            },
          });

          if (model.color) {
            featureLayer.setStyle({ color: model.color });
          }

          model.layer = featureLayer;

        } else if (model.type === 'customLayer') {
          // debugger;
          var geoJsonLayer = L.geoJSON(null, {
            onEachFeature: function (feature, layer) {
              model.fire('feature', {
                feature: feature,
                layer: layer
              });
            },
            style: function (feature, layer) {
              model.fire('style', {
                feature: feature,
                layer: layer
              });
            },
            pointToLayer: function (geoJson, latlng) {

              var options = {};
              model.fire('point', {
                geoJson: geoJson,
                latlng: latlng,
                options: options
              });

              return marker = L.marker(latlng, options);
            },
          });

          // model.async(function () {
          //     model.fire('loaddata', dynamicLayer);
          // }, 200);
          model.layer = geoJsonLayer;
        }

        if (model.type == 'esriDynamic') {
          model.layer.bindPopup(function (error, featureCollection) {
            if (error || featureCollection.features.length === 0) {
              return false;
            } else {
              var template = Polymer.dom(model).querySelector("template#popup");
              if (template) {
                //model.templatize(template);
                //var instance = model.stamp(feature.properties);

                var feature = featureCollection.features[0];
                var bind = $.extend({ _feature: feature }, feature.properties);

                //var templateRoot = template.stamp(feature.properties).root;
                var templateRoot = (new template.ctor(bind, template)).root;

                return templateRoot;

              } else {
                let html = '<table>';
                featureCollection.features.forEach(function (feature) {
                  var props = Object.entries(feature.properties)
                  props.forEach(function (prop) {
                    html += '<tr>';
                    if (!html.includes('Eastern States') && prop[1] === 'Eastern States') {
                      html += '<td>' + prop[1] + '</td>';
                    }                 
                    else if (prop[0] === 'Administrative Unit Code') {
                      html += '<td>' + prop[1] + '</td>';
                    }
                    else if (prop[0] === 'State Office URL') {
                      html += '<td><a href="' + prop[1] + '" target="_blank">' + prop[1] + '</a></td>';
                    }
                    html += '</tr>';
                  });
                });
                html += '</table>';
                return html
              }
            }
          }, model.popupOptions);
        }

        model.layer.on('click', function (e) {

          console.log('Layer clicked!', e);

          var details = {
            stop: false,
            data: e
          };
          model.fire('item-clicked', details);
          if (details.stop) {
            return;
          }

          model.layer.bindPopup(
            function (event) {
              var feature = event.feature;
              var html = '';

              var template = Polymer.dom(model).querySelector("template#popup");
              if (template) {
                //model.templatize(template);

                //var instance = model.stamp(feature.properties);
                var bind = $.extend({ _feature: feature }, feature.properties);

                //var templateRoot = template.stamp(feature.properties).root;
                var templateRoot = (new template.ctor(bind, template)).root;
                return templateRoot;
                //return $('<div>').append(templateRoot).html();

              } else {
                html += '<table>';
                $.each(feature.properties,
                  function (
                    key,
                    value) {
                    html +=
                      '<tr>';
                    html +=
                      '<td>' +
                      key +
                      '</td>';
                    html +=
                      '<td>' +
                      value +
                      '</td>';
                    html +=
                      '</tr>';
                  });
                html += '</table>';


                return html
              }
            }, model.popupOptions
          )

        });

      },

      //load-data

      leafletReady: function () {

      },


      addData: function (data) {
        this.layer.addData(data);
        this._isVisibleChanged(this.isVisible, this.isVisible);
      },


      _isVisibleChanged: function (newVal, old) {
        console.log(newVal);
        if (this.map) {
          if (newVal) {
            this.map.addLayer(this.layer);
          } else {
            this.map.removeLayer(this.layer);
          }
        }

      },

      _setLayerDefs: function (e) {
        var model = this;
        if (model.layer && model.layerDefs != "") {
          model.layer.setLayerDefs(model.layerDefs);
        }
      },

      _setDynamicLayers: function (e) {
        var model = this;
        setTimeout(function () {
          if (model.layer && model.dynamicLayers.length > 0) {
            model.layer.setDynamicLayers(model.dynamicLayers);
          }
        }, 1000)
      }


    });
  </script>

</dom-module>﻿<dom-module id="admin-about-us">
    <template>
        <style>
            :host {
                display: block;
            }
        </style>
        <h4>Homepage About Us</h4>

        <div class="form-group">
            <label for="aboutUsText" class="control-label">Message</label>
            <textarea id="aboutUsText" class="form-control" placeholder="Message" rows="3"> </textarea>
        </div>

        <div class="form-group">
            <button type="button" class="btn blm-btn-primary" on-tap="_update">Submit</button>
            <button type="button" class="btn blm-btn-secondary" on-tap="_clear">Clear</button>
        </div>

        <div id="aboutUsAlert" class="alert">
        </div>
    </template>

    <script>
        Polymer({
            is: "admin-about-us",
            attached: function () {
                var model = this;

                CKEDITOR.replace('aboutUsText');

                model.async(function () {
                    $.get('/ctxapp/content/aboutus-homepage-text')
                        .done(function (data) {
                            if (data.length == 0) {
                                model.aboutUs = { AboutUsText: null };
                            }
                            else {
                                model.aboutUs = data[0];
                                CKEDITOR.instances.aboutUsText.setData(data[0].AboutUsText);
                            }
                        })
                        .fail(function (response) {
                            var errMsg = getXhrErrorMessage(response);
                            if (errMsg) {
                                alert(errMsg);
                            }
                        });
                }, 500);
            },

            _update: function (e) {
                e.preventDefault();
                var model = this;
                model.aboutUs.AboutUsText = CKEDITOR.instances.aboutUsText.getData();

                $.post('/ctxapp/content/aboutus-homepage-text', model.aboutUs)
                    .done(function (data) {
                        $(model.$.aboutUsAlert).text("About Us has been updated.").addClass("alert-success");
                        model.aboutUs = data;
                    })
                    .fail(function (response) {
                        var errMsg = getXhrErrorMessage(response);
                        if (errMsg) {
                            alert(errMsg);
                        }
                    });
            },

            _clear: function (e) {
                CKEDITOR.instances.aboutUsText.setData('');
                this._update(e);
            }

        });
    </script>
</dom-module>﻿<dom-module id="admin-announcement">
    <template>
        <style>
            :host {
                display: block;
            }
        </style>

        <h4>Homepage Announcement</h4>
        <div class="form-group">
            <label for="announcementText" class="control-label">Message</label>
            <textarea id="announcementText" class="form-control" placeholder="Message" rows="3"></textarea>
        </div>

        <div class="form-group">
            <button type="button" class="btn blm-btn-primary" on-tap="_update">Submit</button>
            <button type="button" class="btn blm-btn-secondary" on-tap="_clear">Clear</button>
        </div>

        <div id="announcementAlert" class="alert"></div>
    </template>

    <script>
        Polymer({
            is: "admin-announcement",
            attached: function () {
                var model = this;

                CKEDITOR.replace('announcementText');

                model.async(function () {
                    $.get('/ctxapp/content/announcement')
                        .done(function (data) {
                            if (data.length == 0) {
                                model.ann = { Message: null };
                            }
                            else {
                                model.ann = data[0];
                                CKEDITOR.instances.announcementText.setData(data[0].Message);
                            }
                        })
                        .fail(function (response) {
                            var errMsg = getXhrErrorMessage(response);
                            if (errMsg) {
                                alert(errMsg);
                            }
                        });
                }, 500);
            },

            _update: function (e) {
                e.preventDefault();
                var model = this;
                model.ann.Message = CKEDITOR.instances.announcementText.getData();

                $.post('/ctxapp/content/announcement', model.ann)
                    .done(function (data) {
                        $(model.$.announcementAlert).text("Announcement has been updated.").addClass("alert-success");
                        model.ann = data;
                    })
                    .fail(function (response) {
                        var errMsg = getXhrErrorMessage(response);
                        if (errMsg) {
                            alert(errMsg);
                        }
                    });
            },

            _clear: function (e) {
                CKEDITOR.instances.announcementText.setData('');
                this._update(e);
            }

        });
    </script>
</dom-module>﻿<dom-module id="admin-latestnews">
    <template>
        <style>
            :host {
                display: block;
            }
        </style>
        <h4>Homepage Latest News</h4>
        <div class="form-group">
            <label for="latestNewsText" class="control-label">Message</label>
            <textarea id="latestNewsText" class="form-control" placeholder="Message" rows="3"> </textarea>
        </div>
        <div class="form-group">
            <button type="button" class="btn blm-btn-primary" on-tap="_update">Submit</button>
            <button type="button" class="btn blm-btn-secondary" on-tap="_clear">Clear</button>
        </div>
        <div id="alertArea" class="alert"></div>
    </template>

    <script>
        Polymer({
            is: "admin-latestnews",
            attached: function () {
                var model = this;

                CKEDITOR.replace('latestNewsText');

                model.async(function () {
                    $.get('/ctxapp/content/news')
                        .done(function (data) {
                            if (data.length == 0) {
                                model.latestNews = { LatestNewsText: null };
                            }
                            else {
                                model.latestNews = data[0];
                                CKEDITOR.instances.latestNewsText.setData(data[0].LatestNewsText);
                            }
                        })
                        .fail(function (response) {
                            var errMsg = getXhrErrorMessage(response);
                            if (errMsg) {
                                alert(errMsg);
                            }
                        });
                }, 500);
            },

            _update: function (e) {
                e.preventDefault();
                var model = this;
                model.latestNews.LatestNewsText = CKEDITOR.instances.latestNewsText.getData();

                $.post('/ctxapp/content/news', model.latestNews)
                    .done(function (data) {
                        $(model.$.alertArea).text("News has been updated.").addClass("alert-success");
                        model.latestNews = data;
                    })
                    .fail(function (response) {
                        var errMsg = getXhrErrorMessage(response);
                        if (errMsg) {
                            alert(errMsg);
                        }
                    });
            },
            _clear: function (e) {
                CKEDITOR.instances.latestNewsText.setData('');
                this._update(e);
            }

        });
    </script>
</dom-module>﻿<dom-module id="admin-animals">
    <template>
        <style>
            :host {
                display: block;
            }
        </style>        
        <p>
            Enter a full or partial freezemark to search WHBPS and Online Corral for a specific animal.<br>
            Leave search box blank and click search for a list of all animals.
        </p>
        <div>
            <power-grid id="animalGrid" class="powergrid-nowrap" page-size="25" paging="true" stop-load="" simple="">
                <grid-data url="/ctxapp/animals/whbps" v2-search=""></grid-data>
                <grid-open></grid-open>
                <grid-field sort="" name="Freezemark" title="Freezemark" type="text" width="90" search=""></grid-field>
                <grid-field sort="" name="Age" title="Age" type="number" width="40"></grid-field>
                <grid-field sort="" name="Gender" title="Sex" type="text" width="60"></grid-field>
                <grid-field name="Photo" title="Photo" type="text" width="60"></grid-field>
                <grid-field name="Status" title="Status" type="text" width="70"></grid-field>
                <grid-field name="ListingType" title="Listing Type" type="text" width="150"></grid-field>
                <grid-action title="Edit" valid="{{showEdit()}}" on-action="openAnimal"></grid-action>
                <grid-action title="Select" valid="{{showSelect()}}" on-action="selectAnimal"></grid-action>
            </power-grid>            
        </div>
    </template>
    <script>
        Polymer({
            is: "admin-animals",
            properties: {
                freezemark: { type: String },
                selectMode: { type: Boolean, value: false },
            },
            openAnimal: function (e) {
                window.location = "/admin/animals/" + e.detail.Freezemark;
            },
            selectAnimal: function (e) {
                this.freezemark = e.detail.Freezemark;
                this.fire('selected');
            },
            showSelect: function () {
                var model = this;
                return function (e) {
                    return model.selectMode;
                }
            },
            showEdit: function () {
                var model = this;
                return function (e) {
                    return !model.selectMode;
                }
            },
        });
    </script>
</dom-module><dom-module id="admin-animal-edit">
  <template>
    <style>
      :host {
        display: block;
      }

      .closeDialog {
        color: white;
        opacity: initial;
      }

      .marketingInfoDialog {
        width: 900px;
      }

      .sticky-bar {
        position: sticky;
        bottom: 0;
        z-index: 1000;
        background-color: white;
        padding: 10px 0;
      }
    </style>
    <animal-detail id="detail" no-like="" freezemark="{{freezemark}}" on-loaded="initEdit"></animal-detail>
    <br>
    <div hidden="{{loading}}" class="sticky-bar">
      <div class="row">
        <div class="col-md-12">
          <button class="btn blm-btn-primary" disabled$="{{processing}}" on-tap="openFilesDialog">Manage Files</button>
          <button class="btn blm-btn-primary" disabled$="{{processing}}" on-tap="openMarketingDialog">Marketing Info</button>
          <button class="btn blm-btn-primary" disabled$="{{processing}}" on-tap="openPickupsDialog">Pickup Locations</button>
          <button class="btn blm-btn-primary" disabled$="{{processing}}" hidden$="{{hidePublish(isPublished, isPrivateOffer)}}" on-tap="openPrivateOfferDialog">Private Offer</button>
          <button class="btn blm-btn-primary" disabled$="{{processing}}" hidden$="{{!isPrivateOffer}}" on-tap="cancelPrivateOffer">Cancel Private Offer</button>
          <button class="btn blm-btn-primary" disabled$="{{processing}}" hidden$="{{hidePublish(isPublished, isPrivateOffer)}}" on-tap="publish">Publish</button>
          <button class="btn blm-btn-primary" disabled$="{{processing}}" hidden$="{{!isPublished}}" on-tap="unpublish">Unpublish</button>
          <button class="btn blm-btn-primary" disabled$="{{processing}}" hidden$="{{!hasPayment}}" on-tap="voidSale">Reoffer</button>
          <button class="btn blm-btn-primary" disabled$="{{processing}}" on-tap="reloadAnimal">WHBPS Reload</button>
          <button class="btn blm-btn-danger pull-right" disabled$="{{processing}}" hidden$="{{isBulkOverride}}" on-tap="enableBulkOverride" title="This will override any bulk animal info saved for the animal's current facility with manual set values when published.'">Enable Bulk Override</button>
          <button class="btn blm-btn-danger pull-right" disabled$="{{processing}}" hidden$="{{!isBulkOverride}}" on-tap="disableBulkOverride" title="This will remove the override placed on the animal, allowing any bulk animal info saved for the animal's current facility to update when published.">Disable Bulk Override</button>
        </div>
      </div>
      <div class="row">&nbsp;</div>
      <div class="row" hidden$="{{auctionListingId}}">
        <div class="col-md-2">
          <a href="javascript:void(0)" on-tap="createListing">Create Listing</a>
        </div>
      </div>
      <div class="row" hidden$="{{!auctionListingId}}">
        <div class="col-md-2">
          <a href="Listing/Details/{{auctionListingId}}">View Listing</a>
        </div>
      </div>
      <div class="row">
        <div class="col-md-2">
          <a href="{{whbpsUrl}}/{{freezemark}}" target="_blank">View WHBPS Detail</a>
        </div>
      </div>
    </div>
    <pickup-locations id="pickupLocationsList" animal-flag="" freezemark="{{freezemark}}" on-save="savePickuplocations" on-reloadlocations="reloadPickupLocations" is-admin="{{isAdmin}}"></pickup-locations>
    <div class="modal fade" id="filesDialog" role="dialog" tabindex="-1">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button aria-label="Close" class="close closeDialog" on-tap="closeFilesDialog" type="button"><span aria-hidden="true">×</span></button>
            <h4 class="modal-title">Manage Files</h4>
          </div>
          <div class="modal-body">
            <animal-files id="manageImages" object-type="AnimalMetadata" object-id="{{id}}"></animal-files>
          </div>
          <div class="modal-footer">
            <button class="btn blm-btn-secondary" on-tap="closeFilesDialog" title="Close Manage Images window" type="button">Close</button>
            <button class="btn blm-btn-primary" on-tap="uploadImages" title="Upload files" type="button" disabled$="{{processing}}">Upload Files</button>
          </div>
        </div>
      </div>
    </div>
    <div class="modal fade" id="marketingInfo" role="dialog" tabindex="-1">
      <div class="modal-dialog marketingInfoDialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button aria-label="Close" class="close closeDialog" data-dismiss="modal" type="button"><span aria-hidden="true">×</span></button>
            <h4 class="modal-title">Marketing Info</h4>
          </div>
          <div class="modal-body">
            <div class="form-group">
              <label for="description">Description</label>
              <textarea cols="80" id="description" name="description" rows="10"></textarea>
            </div>
            <div class="form-group">
              <label for="pocName">POC Name</label>
              <input id="pocName" type="text" class="form-control" value="{{pocName::input}}" placeholder="Name">
            </div>
            <div class="form-group">
              <label for="pocPhone">POC Phone</label>
              <input id="pocPhone" type="text" class="form-control" value="{{pocPhone::input}}" placeholder="Phone">
            </div>
            <div class="form-currentCity">
              <label for="pocName">Current City</label>
              <input id="currentCity" type="text" class="form-control" value="{{currentCity::input}}" placeholder="City">
            </div>
            <div class="form-group">
              <label for="currentState">Current State</label>
              <input id="currentState" type="text" class="form-control" value="{{currentState::input}}" placeholder="State">
            </div>
          </div>
          <div div="" class="modal-footer">
            <button class="btn blm-btn-secondary" data-dismiss="modal" type="button">Cancel</button>
            <button class="btn blm-btn-primary" on-tap="updateMarketingInfo" type="button">Save</button>
          </div>
        </div>
      </div>
    </div>
    <div aria-labelledby="Disposition dialog" class="modal fade" id="dispositionWarningDialog" role="dialog" tabindex="-1">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h4 class="modal-title">Animal Disposition Warning</h4>
          </div>
          <div class="modal-body">
            <div class="alert alert-danger">
              <div>The animal is not eligible because of an invalid disposition. The disposition needs to be one of the following:</div>
              <ul>
                <li>Eligible for Adoption</li>
                <li>Eligible for Sale</li>
              </ul>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn blm-btn-primary" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
    <div class="modal fade" id="modalProcessing" role="dialog" tabindex="-1">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">Loading...</h4>
          </div>
          <div class="modal-body text-center">
            <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i><br>
          </div>
        </div>
      </div>
    </div>
    <div class="modal fade" id="selectUserDialog" role="dialog" tabindex="-1">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h4 class="modal-title">Private Offer</h4>
          </div>
          <div class="modal-body">
            <div>An invitation email will be sent to the account for a Buy Now offer. Only this account will be able to view the animal.</div>
            <div>&nbsp;</div>
            <div class="form-inline">
              <div class="form-group">
                <label for="userName">User Name or Email</label>
                <input id="userName" type="text" class="form-control" on-keydown="searchUsersOnEnter" value="{{userName::input}}">
                <button class="btn btn-sm" on-tap="searchUsers"><i class="fa fa-search"></i></button>
              </div>
            </div>
            <table id="accountMatchTable" class="table table-condensed">
              <thead>
                <tr>
                  <th></th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Email</th>
                  <th>Eligible</th>
                </tr>
              </thead>
              <tbody>
                <template is="dom-repeat" items="{{accountMatches}}">
                  <tr>
                    <td><input name="selectedAccountRadio" type="radio" value="{{item.UserName}}" iseligible="{{item.IsEligible}}"></td>
                    <td>{{item.FirstName}}</td>
                    <td>{{item.LastName}}</td>
                    <td>{{item.UserName}}</td>
                    <td><input type="checkbox" disabled="" checked="{{item.IsEligible}}"></td>
                  </tr>
                </template>
              </tbody>
            </table>
            <div hidden="" id="privateOfferAlert" class="alert alert-success" role="alert"></div>
          </div>
          <div class="modal-footer">
            <button class="btn blm-btn-secondary" data-dismiss="modal" type="button">Cancel</button>
            <button id="sendPrivateOffer" class="btn blm-btn-primary" on-tap="sendPrivateOffer" disabled="">Send Private Offer <span id="spinner" hidden$="{{!processing}}"><i class="fa fa-spinner fa-pulse fa-fw"></i></span></button>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script>
    Polymer({
      is: "admin-animal-edit",
      properties: {
        freezemark: {
          type: String
        },
        processing: {
          type: Boolean,
          value: false,
          observer: 'processing_Changed'
        },
        loading: {
          type: Boolean,
          value: true
        },
        isAdmin: {
          type: Boolean,
          value: false
        },
        whbpsUrl: {
          type: String
        },
      },

      attached: function () {
        var model = this;
        model.isPublished = false;
        model.isPrivateOffer = false;

        model.async(function () {
          $(model.$.pickupLocationsList).on('reload', function () {
            model.$.detail.getData();
          });
        });
      },

      initEdit: function () {
        var model = this;

        var editor = CKEDITOR.instances['description'];
        if (editor) {
          editor.destroy(true);
        }

        editor = CKEDITOR.replace('description');
        editor.on('instanceReady', function () {
          model.getData();
        });
      },

      getData: function () {
        var data = this.$.detail;
        this.id = data.id;
        this.isPublished = data.published;
        this.isPrivateOffer = data.privateOfferTo ? true : false;
        this.privateOfferTo = data.privateOfferTo;
        this.hasPayment = data.hasPayment;
        this.auctionListingId = data.auctionListingId;
        this.pocName = data.pocName;
        this.pocPhone = data.pocPhone;
        this.currentCity = data.currentCity;
        this.currentState = data.currentState;
        this.isBulkOverride = data.isBulkOverride;

        if (data.marketingDescription) {
          CKEDITOR.instances.description.setData(data.marketingDescription);
        } else {
          CKEDITOR.instances.description.setData('<p>If you have questions regarding the status of your application or pickup options send an email to <a href="mailto:blm_es_inet_adoption@blm.gov">blm_es_inet_adoption@blm.gov</a>.</p>');
        }
        this.loading = false;
        this.processing = false;
      },

      openPickupsDialog: function () {
        this.$.pickupLocationsList.open(this.freezemark);
      },

      openMarketingDialog: function () {
        $(this.$.marketingInfo).modal("show");
      },

      openFilesDialog: function () {
        //The overflow-y: auto is needed to fix the modal dialog not scrolling when a second modal dialog is opened on top of it.
        $("#filesDialog").css('overflow-y', 'auto').modal("show");
        this.$.manageImages.open(this.id);
      },

      closeFilesDialog: function () {
        this.$.manageImages.cleanUp();
        $("#filesDialog").modal("hide");

        if (this.$.manageImages.isDirty) {
          this.processing = true;
          this.$.detail.getData(true);
        }
      },

      uploadImages: function () {
        var model = this;
        if (this.$.manageImages.isDirty) {
          this.processing = true;
          this.$.manageImages.uploadImages().then(function () {
            model.$.manageImages.isDirty = true;
            model.closeFilesDialog();
          });
        }
        else {
          this.closeFilesDialog();
        }
      },

      createListing: function () {
        var model = this;
        var animalDetail = this.$.detail;

        if (animalDetail.disposition != "Eligible for Adoption" && animalDetail.disposition != "Eligible for Sale") {
          $("#dispositionWarningDialog").modal("show");
          return;
        }
        model.processing = true;
        $.post('ctxapp/animals/' + model.freezemark + '/validateanimalforlisting')
          .done(function () {
            window.location = "/Listing/CreateListingPage1?freezemark=" + model.freezemark;
          })
          .fail(function (response) {
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg);
              model.$.detail.getData();
            }
          });
      },

      updateMarketingInfo: function () {
        var model = this;
        this.processing = true;

        var postData = {
          MarketingDescription: CKEDITOR.instances.description.getData(),
          PocName: this.pocName,
          PocPhone: this.pocPhone,
          CurrentCity: this.currentCity,
          CurrentState: this.currentState,
        }

        $.post('ctxapp/animals/' + this.freezemark + '/marketinginfo', postData)
          .done(function () {
            $(model.$.marketingInfo).modal("hide");
            model.$.detail.getData();
          })
          .fail(function (response) {
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg);
            }
            model.processing = false;
          });
      },

      savePickuplocations: function (e) {
        var pickups = [];
        var freezemark = [];

        this.processing = true;
        freezemark.push(this.freezemark);

        for (let i of e.detail) {
          pickups.push(i);
        }

        var pickupData = {
          freezemarks: freezemark,
          locations: pickups,
        }

        var model = this;
        $.post('/ctxapp/facilities/pickups/addtoanimal', pickupData)
          .done(function () {
            model.$.detail.getData();
          }).fail(function (response) {
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg);
            }
          });

      },

      reloadPickupLocations: function (e) {
        var model = this;
        model.$.detail.getData();
      },

      reloadAnimal: function (e) {
        this.processing = true;
        this.$.detail.getData(true);
      },

      publish: function (e) {
        var animalDetail = this.$.detail;
        if (e) { e.preventDefault(); }
        var model = this;
        if (animalDetail.disposition != "Eligible for Adoption" && animalDetail.disposition != "Eligible for Sale") {
          $("#dispositionWarningDialog").modal("show");
          return;
        }
        model.processing = true;

        $.post('ctxapp/animals/' + model.freezemark + '/publish')
          .done(function () {
            model.$.detail.getData();
          })
          .fail(function (response) {
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg);
              model.$.detail.getData();
            }
          });
      },

      openPrivateOfferDialog: function () {
        var animalDetail = this.$.detail;

        $('#userName').removeAttr('disabled');
        if (animalDetail.disposition != "Eligible for Adoption" && animalDetail.disposition != "Eligible for Sale") {
          $("#dispositionWarningDialog").modal("show");
          return;
        }

        $("#selectUserDialog").modal("show");
      },

      searchUsersOnEnter: function (e) {
        if (e.keyCode === 13) {
          this.searchUsers();
        }
      },

      searchUsers: function () {
        if (this.userName.length < 3) {
          $('#privateOfferAlert').removeClass('alert-success').addClass('alert-danger').removeAttr('hidden').text('Please enter at least 3 characters.');
          return;
        }
        var model = this;
        $.get('ctxapp/users/public/private-offer?val=' + this.userName + '&freezeMark=' + this.freezemark)
          .done(function (list) {
            if (list.length == 0) {
              $('#privateOfferAlert').removeClass('alert-success').addClass('alert-danger').removeAttr('hidden').text('No matching accounts were found.');
            } else {
              model.accountMatches = list;
              $('#privateOfferAlert').attr('hidden', 'hidden');
              $('#sendPrivateOffer').removeAttr('disabled');
            }
          })
          .fail(function (response) {
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg)
            }
          });
      },

      sendPrivateOffer: function () {
        var checkedAccount = $('input[name=selectedAccountRadio]:checked');
        if (!$('[name=selectedAccountRadio]').is(':checked') || !checkedAccount[0].iseligible) {
          $('#privateOfferAlert').removeClass('alert-success').addClass('alert-danger').removeAttr('hidden').text('You must select an eligible account before sending private offer.');
          return;
        }

        this.processing = true;
        var model = this;
        var selectedAccount = $('input[name=selectedAccountRadio]:checked').val();
        $.post('ctxapp/animals/' + this.freezemark + '/private-offer?userName=' + selectedAccount)
          .done(function () {
            $("#selectUserDialog").modal("hide");
            $('#privateOfferAlert').attr('hidden', 'hidden');
            model.$.detail.getData();
          })
          .fail(function (response) {
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              $('#privateOfferAlert').removeClass('alert-success').addClass('alert-danger').removeAttr('hidden').text(errMsg);
            }
          })
          .always(function () {
            model.processing = false;
          });
      },

      cancelPrivateOffer: function () {
        if (confirm('Please confirm you wish to cancel the private offer for ' + this.privateOfferTo)) {
          this.processing = true;
          var model = this;

          $.ajax({
            url: '/ctxapp/animals/' + this.freezemark + '/private-offer',
            type: 'DELETE',
            success: function () {
              model.$.detail.getData();
            },
            error: function (response) {
              var errMsg = getXhrErrorMessage(response);
              if (errMsg) {
                alert(errMsg);
                model.$.detail.getData();
              }
            }
          });
        }
      },

      unpublish: function (e) {
        if (e) { e.preventDefault(); }
        var model = this;
        model.processing = true;

        $.post('ctxapp/animals/' + model.freezemark + '/unpublish')
          .done(function () {
            model.$.detail.getData();
          })
          .fail(function (response) {
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg);
              model.$.detail.getData();
            }
          });
      },

      processing_Changed: function (newValue) {
        this.toggleClass('disabled', newValue);
        if (newValue === true) {
          $("#modalProcessing").modal("show");
        }
        else {
          $("#modalProcessing").modal("hide");
        }
      },

      voidSale: function () {
        var model = this;
        if (confirm('This permanent action will void all related sale transactions and set the animal back to selling status.  Do you wish to continue?')) {
          model.processing = true;
          $.post('ctxapp/animals/' + model.freezemark + '/void-sale')
            .done(function () {
              model.$.detail.getData();
              model.processing = false;
            })
            .fail(function (response) {
              var errMsg = getXhrErrorMessage(response);
              if (errMsg) {
                alert(errMsg);
              }
              model.processing = false;
            });
        }
      },

      hidePublish: function (isPublished, isPrivateOffer) {
        return isPublished || isPrivateOffer;
      },

      enableBulkOverride: function () {
        let model = this;
        $.post('ctxapp/animals/' + model.freezemark + '/bulkoverride/true')
          .done(function () {
            model.isBulkOverride = true;
          })
          .fail(function (response) {
            let errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg);
              model.$.detail.getData();
            }
          });
      },

      disableBulkOverride: function () {
        let model = this;
        $.post('ctxapp/animals/' + model.freezemark + '/bulkoverride/false')
          .done(function () {
            model.isBulkOverride = false;
          })
          .fail(function (response) {
            let errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg);
              model.$.detail.getData();
            }
          });
      },
    });
  </script>
</dom-module>﻿<dom-module id="facility-map">
  <template>
    <style>
      :host {
        display: block;
        min-height: 500px;
      }

        :host leaflet-map {
          height: 500px;
        }
    </style>
    <div>
      <p style="font-weight: 700;">Find Adoption and Sales Locations</p>
      <p>For a list of all wild horse and burro events, visit the <a href="https://www.blm.gov/programs/wild-horse-and-burro/adoption-and-sales/events" target="_blank">adoption and sale event schedule</a>.</p>
      <p>For more information about wild horse and burro populations, visit the <a href="https://www.blm.gov/programs/wild-horse-and-burro/about-the-program/program-data" target="_blank">population estimate data set</a>.</p>
      <p style="padding-left: 15px; color: #424242">
        <label for="mapZipCode">Zip Code</label>
        <input id="mapZipCode" type="number" style="border: thin solid #ccc;" value="{{searchZip::change}}">
        <label for="mapRadius">Radius</label>
        <select id="mapRadius" style="border: thin solid #ccc;" value="{{searchDist::change}}">
          <option value="50">50 Miles</option>
          <option value="100">100 Miles</option>
          <option value="200">200 Miles</option>
          <option value="500">500 Miles</option>
        </select>
        <button type="button" style="background-color: transparent;outline: none;border: thin solid #cccccc;margin-left: 8px;padding: 1px 8px;" on-tap="_zipSearch">Search</button>
      </p>
    </div>
    <div hidden$="{{!searchResults}}">
      <template is="dom-repeat" items="{{searchResults}}">
        <a href="#" style="display: block; background-color: white; border: solid thin #ccc; margin-bottom: 4px; padding:4px;" on-tap="_showFacility">
          <h5>{{item.properties.Facility.Name}}</h5>
        </a>
      </template>
    </div>

    <leaflet-map id="hpMap" basemaps="Topographic" toc="" style="display: block; position: relative; width: 100%; ">

      <leaflet-layer legend-image="/Images/star-white_20.png" id="perm" type="customLayer" is-visible="" layer-name="Permanent Facilities" on-point="_permLocationsStyle">
        <template id="popup" is="dom-template">
          <hma-facility-display data-object="{{_feature}}"></hma-facility-display>
        </template>
      </leaflet-layer>

      <leaflet-layer legend-image="/Images/star-red_20.png" is-visible="" id="asLocations" type="customLayer" layer-name="Adoption and Sales Events" on-point="_asLocationsStyle">
        <template id="popup" is="dom-template">
          <event-map-display data-object="{{_feature}}"></event-map-display>
        </template>
      </leaflet-layer>

      <leaflet-layer legend-image="/Images/bg-star-white_20.png" is-visible="" id="pickUpLocations" type="customLayer" layer-name="Internet Pick-up Available" on-point="_pickUpLocationsStyle">
        <template id="popup" is="dom-template">
          <h4>Pick-up Location</h4>
          <table>
            <tbody><tr>
              <td>Facility Name:</td>
              <td>{{FacilityName }}</td>
            </tr>
            <tr>
              <td>Street Address:</td>
              <td>{{GisMeta.attributes.STR_ADDR }}</td>
            </tr>
            <tr>
              <td>City:</td>
              <td>{{GisMeta.attributes.CITY }}</td>
            </tr>
            <tr>
              <td>State:</td>
              <td>{{GisMeta.attributes.ST_PRVNCE }}</td>
            </tr>
            <tr>
              <td>Zip Code:</td>
              <td>{{GisMeta.attributes.ZIP_PSTL_CD }}</td>
            </tr>
            <tr>
              <td>Phone Number:</td>
              <td>{{GisMeta.attributes.WHB_FAC_PHNE_NR }}</td>
            </tr>

          </tbody></table>
        </template>
      </leaflet-layer>
      <leaflet-layer type="esriDynamic" layer-name="Admin Boundaries" url="https://gis.blm.gov/arcgis/rest/services/admin_boundaries/BLM_Natl_AdminUnit/MapServer">
      </leaflet-layer>

    </leaflet-map>
  </template>
  <script>

    Polymer({
      is: "facility-map",
      properties: {
        _hmaMetas: {
          type: Array,
          value: function () { return new Array(); }
        },
        _hmaDynamicLayers: {
          type: Array,
          value: function () { return new Array(); }
        },
      },
      attached: function () {
        this.map = this.$.map;
        this.items = [];
        var model = this;
        console.log('Loading Map data');

        $.get('/api/mapping/pickuplocations').done(function (data) {
          if (model.$.pickUpLocations.layer) {
            model.$.pickUpLocations.addData(data);
          }
        });

        $.get('/api/mapping/eventlocations').done(function (data) {
          if (model.$.asLocations.layer) {
            model.$.asLocations.addData(data);
          }
        });

        $.get('/api/mapping/facilities').done(function (data) {
          if (model.$.perm.layer) {
            model.$.perm.addData(data);
          }
        });

        $.get('/api/mapping/hmas/metadata').done(function (hmaMetas) {
          var _hmaDynamicLayer =
          {
            "id": "HMA",
            "source":
            {
              "type": "mapLayer",
              "mapLayerId": 8
            },
            "definitionExpression": "",
            "drawingInfo":
            {
              "renderer":
              {
                "type": "simple",
                "symbol":
                {
                  "type": "esriSFS",
                  "style": "esriSFSSolid",
                  "color": [138, 175, 234, 100],
                  "outline":
                  {
                    "type": "esriSLS",
                    "style": "esriSLSSolid",
                    "color": [138, 175, 234, 255],
                    "width": 2.0
                  }
                },
                "label": "",
                "description": ""
              },
              "transparency": 0.5
            }
          };

          var hiddenHmas = hmaMetas.filter(hma => hma.Hidden == true);
          var hmaList = [];
          hiddenHmas.forEach(function (hma) { hmaList.push(hma.HMA_ID) })
          var hmaQueryList = "'" + hmaList.join("','") + "'";
          _hmaDynamicLayer["definitionExpression"] = "HMA_ID NOT IN (" + hmaQueryList + ")";
          model.push('_hmaDynamicLayers', _hmaDynamicLayer);
          model.notifyPath('_hmaDynamicLayers', model._hmaDynamicLayers);

        })

      },

      _permLocationsStyle: function (e) {
        e.detail.options.icon = L.icon({
          iconUrl: '/Images/star-white_20.png',
          iconSize: [20, 20], // size of the icon
          iconAnchor: [10, 10], // point of the icon which will correspond to marker's location
          popupAnchor: [0, -10] // point from which the popup should open relative to the iconAnchor
        })
      },

      _pickUpLocationsStyle: function (e) {
        e.detail.options.icon = L.icon({
          iconUrl: '/Images/bg-star-white_20.png',
          iconSize: [20, 20], // size of the icon
          iconAnchor: [10, 10], // point of the icon which will correspond to marker's location
          popupAnchor: [0, -10] // point from which the popup should open relative to the iconAnchor
        })
      },

      _asLocationsStyle: function (e) {
        e.detail.options.icon = L.icon({
          iconUrl: '/Images/star-red_20.png',
          iconSize: [20, 20], // size of the icon
          iconAnchor: [10, 10], // point of the icon which will correspond to marker's location
          popupAnchor: [0, -10] // point from which the popup should open relative to the iconAnchor
        })
      },


      _zipSearch: function (e) {
        var model = this;
        if (!model.searchDist) {
          model.searchDist = 50;
        }

        $.get('/api/mapping/eventlocations?zipcode=' + model.searchZip + '&dist=' + model.searchDist).done(function (data) {
          model.set('searchResults', data.features.slice(0, 10));
          model.set('showSearchResults', true);
        }).fail(function (response) {
          var errMsg = getXhrErrorMessage(response);
          if (errMsg) {
            alert(errMsg);
          }
        });

      },
      _showFacility: function (e) {
        e.preventDefault();
        var model = this;
        var facility = e.model.item;
        console.log(facility);

        var features = model.$.asLocations.layer.getLayers();
        for (var i = 0; i < features.length; i++) {
          if (features[i].feature.properties.EventId == facility.properties.EventId) {
            console.log(features[i]);
            var ll = features[i].getLatLng();
            features[i].openPopup();
            $(features[i]._icon).click()
            $(features[i]._icon).click()
            model.$.hpMap.map.setView([ll.lat + .007, ll.lng], 10);
          }
        }
      }

    });
  </script>
</dom-module>


<dom-module id="event-map-display">
  <template>
    <style>
    </style>

    <h4>Adoption and Sales Event</h4>
    <table>
      <tbody><tr>
        <td>Facility Name:</td>
        <td>{{obj.Facility.Name }}</td>
      </tr>
      <tr hidden$="{{!meta}}">
        <td>Start Date:</td>
        <td>{{startString }}</td>
      </tr>
      <tr hidden$="{{!meta}}">
        <td>End Date:</td>
        <td>{{endString }}</td>
      </tr>
      <tr>
        <td>Street Address:</td>
        <td>{{obj.Facility.Address.AddressLine1 }}</td>
      </tr>
      <tr>
        <td></td>
        <td>{{obj.Facility.Address.AddressLine2 }}</td>
      </tr>
      <tr>
        <td>City:</td>
        <td>{{obj.Facility.Address.City }}</td>
      </tr>
      <tr>
        <td>State:</td>
        <td>{{obj.Facility.Address.State }}</td>
      </tr>
      <tr>
        <td>Zip Code:</td>
        <td>{{obj.Facility.Address.PostalCode }}</td>
      </tr>
      <tr>
        <td>Phone Number:</td>
        <td>{{obj.GisMeta.attributes.WHB_FAC_PHNE_NR }}</td>
      </tr>

    </tbody></table>

    <div hidden$="{{!meta}}">
      <p>
        {{meta.EventDescription }}
      </p>

      <p hidden$="{{!meta.EventWebsite}}" style="margin: 0;">
        Website: <a href="{{meta.EventWebsite }}" target="_blank">Link</a>
      </p>

      <p hidden$="{{!meta.EventFlyerLink}}" style="margin: 0;">
        Flyer: <a href="{{meta.EventFlyerLink }}" target="_blank">Link</a>
      </p>

    </div>

  </template>

  <script>
    Polymer({
      is: 'event-map-display',

      properties: {
        dataObject: {
          type: Object,
          value: null,
          observer: '_dataObjectChange'
        }
      },
      // Element Lifecycle
      ready: function () {

      },
      attached: function () {

        this.set('showSearchResults', false);

      },

      _dataObjectChange: function () {
        var model = this;
        if (model.dataObject) {
          model.obj = model.dataObject.properties;

          $.get('/api/mapping/events/' + model.obj.EventId).done(function (data) {
            if (data) {
              model.startString = moment(data.StartDate).format('MM/DD/YYYY'); // + ' ' + data.StartTime;
              model.endString = moment(data.EndDate).format('MM/DD/YYYY');// + ' ' + data.EndTime;
            }
            model.meta = data;
          });
        }

      }
    });
  </script>
</dom-module>


<dom-module id="hma-facility-display">
  <template>
    <style>
    </style>

    <h4>Permanent Facility</h4>
    <table>
      <tbody><tr>
        <td>Facility Name:</td>
        <td>{{name }}</td>
      </tr>
      <tr>
        <td>Street Address:</td>
        <td>{{obj.STR_ADDR }}</td>
      </tr>
      <tr>
        <td>City:</td>
        <td>{{obj.CITY }}</td>
      </tr>
      <tr>
        <td>State:</td>
        <td>{{obj.ST_PRVNCE }}</td>
      </tr>
      <tr>
        <td>Zip Code:</td>
        <td>{{obj.ZIP_PSTL_CD }}</td>
      </tr>
      <tr>
        <td>Phone Number:</td>
        <td>{{obj.WHB_FAC_PHNE_NR }}</td>
      </tr>

    </tbody></table>

    <p hidden$="{{!meta.Website}}">
      Website Link: <a href="{{meta.Website }}" target="_blank">{{meta.Website }}</a>
    </p>

  </template>

  <script>
    Polymer({
      is: 'hma-facility-display',

      properties: {
        dataObject: {
          type: Object,
          value: null,
          observer: '_dataObjectChange'
        }
      },
      // Element Lifecycle
      ready: function () {

      },
      attached: function () {
      },

      _dataObjectChange: function () {
        var model = this;
        if (model.dataObject) {
          model.obj = model.dataObject.properties;
          $.get('/api/mapping/facilities/' + model.dataObject.properties.OBJECTID).done(function (data) {

            if (data.Name) {
              model.name = data.Name;
            }
            else {
              model.name = model.obj.WHB_FAC_NM;
            }

            model.meta = data;
          });
        }
      }
    });
  </script>
</dom-module>


<dom-module id="hma-map-display">
  <template>
    <style>
    </style>

    <h4>Herd Management Area</h4>
    <table style="width:265px">
      <tbody><tr>
        <td>HMA Name:</td>
        <td id="HMA_NAME">{{hma.HerdMangementAreaName}}</td>
      </tr>
      <tr>
        <td>Admin State:</td>
        <td>{{hma.AdministrativeStateCode}}</td>
      </tr>
      <tr>
        <td>Admin Unit Code:</td>
        <td>{{hma.AdministrativeUnitCode}}</td>
      </tr>
      <tr>
        <td>Admin agency:</td>
        <td>{{hma.AdministrativeAgencyCode}}</td>
      </tr>
      <tr>
        <td>BLM acres:</td>
        <td>{{addCommas(hma.BLMAcres)}}</td>
      </tr>
      <tr>
        <td>Total Acres:</td>
        <td>{{addCommas(hma.TOTAL_ACRES)}}</td>
      </tr>
      <tr>
        <td>AML - Horses:</td>
        <td>{{addCommas(hmaMeta.HorseAML)}}</td>
      </tr>
      <tr>
        <td>Low AML - Horses:</td>
        <td>{{addCommas(hma.HORSE_AML_LOW)}}</td>
      </tr>
      <tr>
        <td>High AML - Horses:</td>
        <td>{{addCommas(hma.HORSE_AML_HIGH)}}</td>
      </tr>
      <tr>
        <td>AML - Burros:</td>
        <td>{{addCommas(hmaMeta.BurroAML)}}</td>
      </tr>
      <tr>
        <td>Low AML - Burros:</td>
        <td>{{addCommas(hma.BURRO_AML_LOW)}}</td>
      </tr>
      <tr>
        <td>High AML - Burros:</td>
        <td>{{addCommas(hma.BURRO_AML_HIGH)}}</td>
      </tr>
      <tr>
        <td>Estimated Horse Population:</td>
        <td>{{addCommas(hma.EST_HORSE_POP)}}</td>
      </tr>
      <tr>
        <td>Estimated Burro Population:</td>
        <td>{{addCommas(hma.EST_BURRO_POP)}}</td>
      </tr>
      <tr>
        <td>Last Population Inventory Date:</td>
        <td>{{hma.POP_INVENTORY_DT}}</td>
      </tr>
      <tr>
        <td>Last Gather Date:</td>
        <td>{{hma.LAST_GATHER_DT}}</td>
      </tr>
      <tr>
        <td>Website:</td>
        <td><a href="{{hmaMeta.Website}}" target="_blank">Link</a></td>
      </tr>

    </tbody></table>

  </template>

  <script>
    Polymer({
      is: 'hma-map-display',

      properties: {
        dataObject: {
          type: Object,
          value: function () { return {}; },
          observer: '_dataObjectChange'
        }

      },
      ready: function () {

      },
      attached: function () {
      },

      _dataObjectChange: function () {
        var model = this;
        if (model.dataObject) {
          var hmaPropsNoSpaces = model.dataObject.properties;
          model.set('hma', model._replaceKeysNoSpaces(hmaPropsNoSpaces));
          $(model.$.HMA_NAME).text(model.hma.HMA_NAME);

          model.set('hma.POP_INVENTORY_DT', moment(model.hma.POP_INVENTORY_DT).format('MM/DD/YYYY'));
          model.set('hma.LAST_GATHER_DT', moment(model.hma.LAST_GATHER_DT).format('MM/DD/YYYY'));
        }

        $.get('/api/mapping/hmas/metadata').done(function (hmaMetas) {
          var hmaMeta = hmaMetas.find(hma => hma.HMA_ID == hmaPropsNoSpaces.HerdManagementAreaIdentifier);
          if (hmaMeta) {
            model.set('hmaMeta', {});
            model.set('hmaMeta.HorseAML', hmaMeta.HorseAML);
            model.set('hmaMeta.BurroAML', hmaMeta.BurroAML);
            model.set('hmaMeta.Website', hmaMeta.Website);
          }
        });

      },

      _replaceKeysNoSpaces(object) {
        Object.keys(object).forEach(function (key) {
          var newKey = key.replace(/\s+/g, '');
          if (object[key] && typeof object[key] === 'object') {
            replaceKeys(object[key]);
          }
          if (key !== newKey) {
            object[newKey] = object[key];
            delete object[key];
          }
        });
        return object;
      },


      addCommas: function (value) {
        if (typeof value == 'string') {
          value = Number(value);
          if (!Number.isNaN(value)) {
            return value.toLocaleString();
          }
        }
        else if (typeof value == 'number') {
          return value.toLocaleString();
        }

      }
    });
  </script>
</dom-module>


<dom-module id="ha-map-display">
  <template>
    <style>
    </style>
    <h4>Herd Area</h4>
    <table style="width:300px">
      <tbody><tr>
        <td>HA Name:</td>
        <td>{{ha.HA_NAME}}</td>
      </tr>
      <tr>
        <td>Admin State:</td>
        <td>{{ha.ADMIN_ST}}</td>
      </tr>
      <tr>
        <td>Admin agency:</td>
        <td>{{ha.ADMIN_AGCY}}</td>
      </tr>
      <tr>
        <td>BLM acres:</td>
        <td>{{addCommas(ha.BLM_ACRES)}}</td>
      </tr>
      <tr>
        <td>Total Acres:</td>
        <td>{{addCommas(ha.TOTAL_ACRES)}}</td>
      </tr>
      <tr>
        <td>Estimated Horse Population:</td>
        <td>{{addCommas(ha.EST_HORSE_POP)}}</td>
      </tr>
      <tr>
        <td>Estimated Burro Population:</td>
        <td>{{addCommas(ha.EST_BURRO_POP)}}</td>
      </tr>
      <tr>
        <td>Last Gather Date:</td>
        <td>{{ha.LAST_GATHER_DT}}</td>
      </tr>
    </tbody></table>
  </template>

  <script>
    Polymer({
      is: 'ha-map-display',
      properties: {
        dataObject: {
          type: Object,
          value: null,
          observer: '_dataObjectChange'
        }
      },
      ready: function () {

      },
      attached: function () {
        this.set('ha', {});
      },

      _dataObjectChange: function () {
        var model = this;
        model.async(function () {
          if (model.dataObject) {
            model.set('ha', model.dataObject.properties);
          }
        }, 200);
      },
      addCommas: function (value) {
        if (typeof value == 'number') {
          return value.toLocaleString();
        }
      }
    });
  </script>
</dom-module><dom-module id="facility-draw">
    <template>
        <style>
            :host {
                display: block;
                height: 420px;
                width: 100%
            }

            .drawToolbarButton {
                padding: 4px;
            }

            .drawToolbarButtonTextOnly {
                padding-top: 4px;
                padding-bottom: 5px;
            }

            .btnImage {
                width: 20px;
                height: 20px;
            }

            .btnText {
                padding-top: 10px;
            }
        </style>
        <div class="row" style="margin-top: 10px;">
            <div class="col-md-12" style="display: table;">
                <span>
                    <button id="rectangle" class="drawToolbarButton" on-tap="addObjectToCanvas" data-item="rectangle" title="Add Rectangle" type="button">
                        <img alt="Add Rectangle" class="btnImage" src="../Images/addSquare.png">
                    </button>
                    <button id="circle" class="drawToolbarButton" on-tap="addObjectToCanvas" data-item="circle" title="Add Circle" type="button">
                        <img alt="Add Circle" class="btnImage" src="../Images/addCircle.png">
                    </button>
                    <button id="line" class="drawToolbarButton" on-tap="addObjectToCanvas" data-item="line" title="Add Line" type="button">
                        <img alt="Add Line" class="btnImage" src="../Images/addLine.png">
                    </button>
                    <button id="shelter" class="drawToolbarButton" on-tap="addObjectToCanvas" data-item="img_shelter" title="Add Shelter" type="button">
                        <img alt="Add Shelter" class="btnImage" src="../Images/shelter.png">
                    </button>
                    <button id="fence" class="drawToolbarButton" on-tap="addObjectToCanvas" data-item="img_fence" title="Add Fence" type="button">
                        <img alt="Add Fence" class="btnImage" src="../Images/fence1.png">
                    </button>
                    <button id="gate" class="drawToolbarButton" on-tap="addObjectToCanvas" data-item="img_gate" title="Add Gate" type="button">
                        <img alt="Add Gate" class="btnImage" src="../Images/gate.png">
                    </button>
                    <button id="water" class="drawToolbarButton" on-tap="addObjectToCanvas" data-item="img_water" title="Add Water" type="button">
                        <img alt="Add Water" class="btnImage" src="../Images/water.png">
                    </button>
                    <button id="tree" class="drawToolbarButton" on-tap="addObjectToCanvas" data-item="img_tree" title="Add Tree" type="button">
                        <img alt="Add Tree" class="btnImage" src="../Images/tree.png">
                    </button>
                    <button id="text" class="drawToolbarButton" on-tap="addObjectToCanvas" data-item="text" title="Add Text" type="button">
                        <img alt="Add Text" class="btnImage" src="../Images/addText.png">
                    </button>
                </span>
                <span style="position: relative; float: right;">
                    <button id="previous" class="drawToolbarButton" on-tap="selectPreviousObject" data-item="text" title="Select Previous Item" type="button">
                        <img alt="Select Previous Item" class="btnImage" src="../Images/previous.png">
                    </button>
                    <button id="next" class="drawToolbarButton" on-tap="selectNextObject" data-item="text" title="Select Next Item" type="button">
                        <img alt="Select Next Item" class="btnImage" src="../Images/next.png">
                    </button>
                    <button id="delete" class="drawToolbarButton" on-tap="deleteSelectedObject" data-item="text" title="Delete Selected Item(s)" type="button">
                        <img alt="Delete Selected Item(s)" class="btnImage" src="../Images/icon_delete.png">
                    </button>
                    <button id="deleteAll" class="drawToolbarButtonTextOnly" on-tap="clearCanvas" data-item="text" title="Clear Canvas" type="button"><span style="font-weight: bold;">Clear all</span></button>
                </span>
            </div>
        </div>
        <br>
        <div class="row hidden-print">
            <div class="col-xs-12" style="height: 400px; padding: 0;">
                <canvas id="fabricCanvas" height="400" width="560" style="border: 1px solid silver;">
                    Your browser does not support the HTML5 canvas tag.
                </canvas>
            </div>
        </div>
        <div class="row visible-print-block" style="border: 1px solid black;">
            <div class="col-xs-12">
                <img id="canvasBlob" alt="Canvas Image" style="width: 100%; height: 100%;">
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <small>{{helpText}}</small>
            </div>
        </div>
    </template>
    <script>
        Polymer({
            is: 'facility-draw',
            properties: {
                savedCanvas: {
                    type: String,
                    value: ""
                },
                disableCanvas: {
                    type: Boolean,
                    value: false,
                    observer: '_disableCanvasChanged'
                },
                canvasSelectedId: {
                    type: Number,
                    value: 0
                },
                strokeWidth: {
                    type: Number,
                    value: 4
                },
                helpText: {
                    type: String
                },
            },

            attached: function () {
                var model = this;

                model.canvas = new fabric.Canvas(model.$.fabricCanvas, {
                    preserveObjectStacking: true
                });

                // Load canvas objects from the database if they are present
                if (model.savedCanvas) {
                    model.displayCanvas();
                }

                // Code specific to maintaining the proper border width when resizing canvas objects
                model.canvas.on({
                    'object:scaling': function (e) {
                        var obj = e.target;

                        if (!obj.strokeWidthUnscaled && obj.strokeWidth) {
                            obj.strokeWidthUnscaled = obj.strokeWidth;
                        }

                        if (obj.type !== "line") {
                            if (obj.strokeWidthUnscaled) {
                                var strokeX = model.strokeWidth / obj.scaleX;
                                var strokeY = model.strokeWidth / obj.scaleY;

                                if (strokeX < strokeY) {
                                    obj.strokeWidth = strokeX;
                                }
                                else {
                                    obj.strokeWidth = strokeY;
                                }
                            }
                        }
                    }
                });

                // Code specific to deleting canvas objects if the delete key has been entered
                $('html').keyup(function (e) {
                    if (!this.disableCanvas) {
                        if (e.keyCode === 46) {
                            model._deleteSelectedObject(model);
                        }
                    }
                });

                if (this.disableCanvas) {
                    model.canvas.selection = false;
                    model.canvas.hoverCursor = "default";
                    model.canvas.forEachObject(function (obj) {
                        obj.selectable = false;
                    });
                }
            },

            addObjectToCanvas: function (e) {
                if (!this.disableCanvas) {
                    var model = this;
                    var objectType;

                    // Code added because the img on top of the button sometimes registers as the click event
                    if (e.target.type === "button") {
                        objectType = e.target.dataset.item;
                    } else {
                        objectType = e.target.parentElement.dataset.item;
                    }

                    model.canvasSelectedId += 1;

                    if (objectType === "rectangle") {
                        model._addRectangle(model);
                    } else if (objectType === "circle") {
                        model._addCircle(model);
                    } else if (objectType === "line") {
                        model._addLine(model);
                    } else if (objectType === "text") {
                        model._addText(model);
                    } else if (model._startsWith(objectType, "img")) {
                        model._addImage(model, objectType);
                    }

                    // Add properties to canvas object to see expanding and rotating helpers
                    model._setNewCanvasItemSettings(model, objectType);
                    model.canvas.setActiveObject(model.canvas.item(model.canvas.getObjects().length - 1));
                }
            },

            setupPrintCanvas: function () {
                var model = this;

                model.canvas.discardActiveObject();
                model.canvas.renderAll();

                $(model.$.fabricCanvas).get(0).toBlob(function (blob) {
                    var urlCreator = window.URL || window.webkitURL;
                    var imageUrl = urlCreator.createObjectURL(blob);

                    $(model.$.canvasBlob).attr("src", imageUrl);
                });
            },

            selectPreviousObject: function () {
                if (!this.disableCanvas) {
                    var model = this;
                    model._changeSelectedItem(model, -1);
                }
            },

            selectNextObject: function () {
                if (!this.disableCanvas) {
                    var model = this;
                    model._changeSelectedItem(model, 1);
                }
            },

            deleteSelectedObject: function () {
                if (!this.disableCanvas) {
                    var model = this;
                    model._deleteSelectedObject(model);
                }
            },

            clearCanvas: function () {
                if (!this.disableCanvas) {
                    var model = this;
                    model.canvas.clear();
                }
            },

            serializeCanvas: function () {
                var model = this;
                return JSON.stringify(model.canvas);
            },

            displayCanvas: function () {
                var model = this;
                model.canvas.loadFromJSON(model.savedCanvas, function () {
                    for (var i = 0; i < model.canvas.getObjects().length; i++) {
                        var canvasObject = model.canvas.item(i);

                        canvasObject.id = i + 1;

                        canvasObject.set({
                            borderColor: "#aaaaaa",
                            cornerColor: "#008000",
                            cornerSize: 15,
                            hasBorders: true,
                            transparentCorners: true
                        });

                        if (canvasObject.type === "line") {
                            canvasObject.setControlsVisibility({
                                bl: false, // bottom-left
                                br: false, // bottom-right
                                mb: true, // middle-bottom
                                ml: false, // middle-left
                                mr: false, // middle-right
                                mt: true, // middle-top
                                tl: false, // top-left
                                tr: false, // top-right
                                mtr: true // middle-top rotation
                            });
                        }

                        canvasObject.on('selected', function () {
                            model.canvas.bringToFront(canvasObject);
                            model.canvasSelectedId = model.canvas.getActiveObject().id;
                        });
                    }

                    model.canvas.renderAll();
                });
            },

            _disableCanvasChanged: function () {
                var model = this;

                if (model.canvas) {
                    if (this.disableCanvas) {
                        model.canvas.selection = false;
                        model.canvas.hoverCursor = "default";
                        model.canvas.forEachObject(function (obj) {
                            obj.selectable = false;
                        });
                    } else {
                        model.canvas.selection = true;
                        model.canvas.hoverCursor = "pointer";
                        model.canvas.forEachObject(function (obj) {
                            obj.selectable = true;
                        });
                    }
                }
            },

            _addRectangle: function (model) {
                var rectangle = new fabric.Rect({
                    id: model.canvas.getObjects().length + 1,
                    left: 50,
                    top: 50,
                    width: 100,
                    height: 100,
                    stroke: "#000000",
                    strokeWidth: model.strokeWidth,
                    fill: "rgba(0,0,0,0)"
                });

                rectangle.on('selected', function () {
                    model.canvas.bringToFront(rectangle);
                    model.canvasSelectedId = model.canvas.getActiveObject().id;
                });

                model.canvas.add(rectangle);
            },

            _addCircle: function (model) {
                var circle = new fabric.Circle({
                    id: model.canvas.getObjects().length + 1,
                    left: 50,
                    top: 50,
                    radius: 50,
                    stroke: "#000000",
                    strokeWidth: model.strokeWidth,
                    fill: "rgba(0,0,0,0)",
                });

                circle.on('selected', function () {
                    model.canvas.bringToFront(circle);
                    model.canvasSelectedId = model.canvas.getActiveObject().id;
                });

                model.canvas.add(circle);
            },

            _addLine: function (model) {
                var line = new fabric.Line([100, 200, 100, 300], {
                    id: model.canvas.getObjects().length + 1,
                    left: 50,
                    top: 50,
                    stroke: '#000000',
                    strokeWidth: 4
                });

                line.setControlsVisibility({
                    bl: false, // bottom-left
                    br: false, // bottom-right
                    mb: true, // middle-bottom
                    ml: false, // middle-left
                    mr: false, // middle-right
                    mt: true, // middle-top
                    tl: false, // top-left
                    tr: false, // top-right
                    mtr: true // middle-top rotation
                });

                line.on('selected', function () {
                    model.canvas.bringToFront(line);
                    model.canvasSelectedId = model.canvas.getActiveObject().id;
                });

                model.canvas.add(line);
            },

            _addText: function (model) {
                var text = new fabric.IText("Enter text here...", {
                    id: model.canvas.getObjects().length + 1,
                    left: 50,
                    top: 50,
                    fontsize: 20
                });

                text.on('selected', function () {
                    model.canvas.bringToFront(text);
                    model.canvasSelectedId = model.canvas.getActiveObject().id;
                });

                model.canvas.add(text);
            },

            _addImage: function (model, objectType) {
                var imageUrl;

                if (objectType === "img_shelter") {
                    imageUrl = "../Images/shelter.png";
                } else if (objectType === "img_fence") {
                    imageUrl = "../Images/fence1.png";
                } else if (objectType === "img_gate") {
                    imageUrl = "../Images/gate.png";
                } else if (objectType === "img_water") {
                    imageUrl = "../Images/water.png";
                } else if (objectType === "img_tree") {
                    imageUrl = "../Images/tree.png";
                }

                fabric.Image.fromURL(imageUrl, function (img) {
                    img.set({
                        id: model.canvas.getObjects().length + 1,
                        top: 50,
                        left: 50,
                        scaleX: 40 / img.width,
                        scaleY: 40 / img.height
                    });

                    model.canvas.add(img);

                    img.on('selected', function () {
                        model.canvas.bringToFront(img);
                        model.canvasSelectedId = model.canvas.getActiveObject().id;
                    });

                    model.canvas.item(model.canvas.getObjects().length - 1).set({
                        borderColor: "#aaaaaa",
                        cornerColor: "#008000",
                        cornerSize: 15,
                        hasBorders: true,
                        transparentCorners: true
                    });

                    model.canvas.setActiveObject(model.canvas.item(model.canvas.getObjects().length - 1));
                });
            },

            _setNewCanvasItemSettings: function (model, objectType) {
                if (!model._startsWith(objectType, "img")) {
                    model.canvas.item(model.canvas.getObjects().length - 1).set({
                        borderColor: "#aaaaaa",
                        cornerColor: "#008000",
                        cornerSize: 15,
                        hasBorders: true,
                        transparentCorners: true
                    });
                }
            },

            _changeSelectedItem: function (model, direction) {
                model.canvasSelectedId += direction;

                if (model.canvasSelectedId < 1) {
                    model.canvasSelectedId = model.canvas.getObjects().length;
                } else if (model.canvasSelectedId > model.canvas.getObjects().length) {
                    model.canvasSelectedId = 1;
                }

                for (var i = 0; i < model.canvas.getObjects().length; i++) {
                    if (model.canvas.item(i).id === model.canvasSelectedId) {
                        model.canvas.setActiveObject(model.canvas.item(i));
                        break;
                    }
                }
            },

            _deleteSelectedObject: function (model) {
                var canvasSelection = model.canvas.getActiveObject();
                var deleteHappened = false;

                if (canvasSelection) {
                    if (canvasSelection.type === 'activeSelection') {
                        canvasSelection.forEachObject(function (element) {
                            model.canvas.remove(element);
                        });

                        deleteHappened = true;
                    } else {
                        if ((canvasSelection.type === "i-text" && !canvasSelection.isEditing) ||
                            canvasSelection.type !== "i-text") {
                            model.canvas.remove(canvasSelection);
                            deleteHappened = true;
                        }
                    }

                    if (deleteHappened) {
                        model.canvas.discardActiveObject();
                        model.canvas.requestRenderAll();

                        if (model.canvas.getObjects().length > 0) {
                            for (var i = 0; i < model.canvas.getObjects().length; i++) {
                                if (model.canvas.item(i)) {
                                    model.canvas.item(i).id = i + 1;
                                }
                            }

                            model.canvasSelectedId = 1;
                            model.canvas.setActiveObject(model.canvas.item(0));
                        }
                    }
                }
            },

            _startsWith: function (str, checkStr) {
                if (str.indexOf(checkStr) === 0) {
                    return true;
                } else {
                    return false;
                }
            }
        });

        if (!HTMLCanvasElement.prototype.toBlob) {
            Object.defineProperty(HTMLCanvasElement.prototype,
                'toBlob',
                {
                    value: function (callback, type, quality) {
                        var dataURL = this.toDataURL(type, quality).split(',')[1];
                        setTimeout(function () {

                            var binStr = atob(dataURL),
                                len = binStr.length,
                                arr = new Uint8Array(len);

                            for (var i = 0; i < len; i++) {
                                arr[i] = binStr.charCodeAt(i);
                            }

                            callback(new Blob([arr], { type: type || 'image/png' }));

                        });
                    }
                });
        }

    </script>
</dom-module>
<dom-module id="facility-draw-legacy">
    <template>
        <style>
            :host {
                display: block;
                height: 420px;
                width: 100%
            }
        </style>
        <div class="row" style="margin-top:10px">
            <div class="col-md-12">
                &nbsp;
            </div>
        </div>
        <br>
        <div class="row">
            <div class="col-xs-12" style="height:400px">
                <canvas class="hidden-print" id="canvas" height="400" width="560" style="border:solid 1px silver;z-index:2;position:absolute;top:0;left:0;background-color:white">
                    Your browser does not support the HTML5 canvas tag.
                </canvas>
                <div id="facilityDrawPrint" style="border-top:solid 1px silver;border-bottom:solid 1px silver;width:100%;height:400px;z-index:1;position:absolute;top:0;left:0"></div>
            </div>
        </div>
        <div class="row">
            &nbsp;
        </div>
    </template>
    <script>
        Polymer({
            is: 'facility-draw-legacy',
            properties: {
                drawImages: {
                    type: Array,
                    value: new Array()
                },
                linePoints: {
                    type: Array,
                    value: new Array()
                },
                canvas: {
                    type: Object
                },
                dragTarget: {
                    type: Object
                },
                //the target selected!
                selectedTarget: {
                    type: Array,
                    value: new Array()
                },
                isDraw: {
                    type: Boolean,
                    value: false
                },
                startX: {
                    type: Number
                },
                startY: {
                    type: Number
                },
                isDown: {
                    type: Boolean
                },
                canvasWidth: {
                    type: Number
                },
                canvasHeight: {
                    type: Number
                },
                currX: {
                    type: Number,
                    value: 0
                },
                currY: {
                    type: Number,
                    value: 0
                },
                dot_flag: {
                    type: Boolean,
                    value: false
                },
            },

            attached: function () {
                this.canvas = document.getElementById("canvas");
                this.canvasWidth = this.canvas.width;
                this.canvasHeight = this.canvas.height;
                
                //This occurs when a facility drawing has been saved and needs to be redrawn on page load
                if (document.querySelector("adoption-application") != null && document.querySelector("adoption-application").drawLegacyImages.length > 0) {

                    //Array is from the polymer element adoption-application.html
                    var savedImages = document.querySelector("adoption-application").drawLegacyImages;
                    var ctx = this.canvas.getContext("2d");

                    //Clears the canvas
                    ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);

                    //Assign images to image array and lines to line array
                    for (var i = 0; i < savedImages.length; i++) {
                        if (savedImages[i].linePoints === undefined || savedImages[i].linePoints === "") {
                            this.push("drawImages", savedImages[i]);
                        }
                        else {
                            var savedLinePoints = JSON.parse(savedImages[i].linePoints);

                            if (savedLinePoints) {
                                for (var j = 0; j < savedLinePoints.length; j++) {
                                    savedLinePoints[j].id = savedImages[i].id;
                                    this.push("linePoints", savedLinePoints[j]);
                                }
                            }
                        }
                    }
                }

                setTimeout(function () {
                    var facilityDraw = document.querySelector("facility-draw-legacy");
                    facilityDraw.draw();
                    facilityDraw.updatePrint();
                }, 1000);
            },
            allowDrop: function (ev) {
                ev.preventDefault();
            },
            //Clear canvas and empty arrays.  Attached to Clear button
            clear: function () {
                //Clear canvas
                this.canvas.getContext("2d").clearRect(0, 0, this.canvas.width, this.canvas.height);

                //Get polymer element facility-draw-legacy and empty arrays
                var facilityDraw = document.querySelector("facility-draw-legacy");

                if (facilityDraw) {
                    facilityDraw.drawImages = [];
                    facilityDraw.linePoints = [];
                    this.updatePrint();
                }
            },
            //Undo last action in canvas.  Attached to Undo button
            undo: function () {
                var facilityDraw = document.querySelector("facility-draw-legacy");

                if (facilityDraw) {
                    var image = facilityDraw.drawImages.splice(-1, 1);
                    image[0].isDelete = true;
                    facilityDraw.drawImages.push(image[0]);
                    this.draw();
                    this.updatePrint();
                }
            },
            //Needed for drag and drop support
            dragstart: function (ev) {
                ev.dataTransfer.setData("Text", ev.target.id);
            },
            //Draw images and lines on canvas
            //Do not refactor drawImage or beginPath!  Canvas will not update and canvas will be blank
            draw: function () {
                this.canvas = document.getElementById("canvas");
                var ctx = this.canvas.getContext("2d");
                // clear the canvas
                ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);

                //draw the images!
                var facilityDraw = document.querySelector("facility-draw-legacy");

                for (var i = 0; i < facilityDraw.drawImages.length; i++) {
                    var image = facilityDraw.drawImages[i];
                    let drawX = 22;
                    let drawY = 22;

                    //if (image.id == "water") {
                    //    drawX = 17;
                    //    drawY = 12;
                    //}
                    if (!facilityDraw.drawImages[i].isDelete) {
                        ctx.drawImage(image.img, image.x, image.y, drawX, drawY);
                    }
                }

                for (var j = 0; j < facilityDraw.linePoints.length; j++) {
                    var linePoints = facilityDraw.linePoints;

                    for (var k = 0; k < linePoints.length; k++) {
                        ctx.beginPath();
                        ctx.moveTo(Number(linePoints[k].moveToX), Number(linePoints[k].moveToY));
                        ctx.lineTo(Number(linePoints[k].lineToX), Number(linePoints[k].lineToY));
                        ctx.strokeStyle = "black";
                        ctx.lineWidth = 2;
                        ctx.stroke();
                        ctx.closePath();
                    }
                }
            },
            //Used by draw
            drawLine: function () {
                var ctx = this.canvas.getContext("2d");
                ctx.beginPath();
                ctx.moveTo(prevX, prevY);
                ctx.lineTo(this.currX, this.currY);
                ctx.strokeStyle = "black";
                ctx.lineWidth = 2;
                ctx.stroke();
                ctx.closePath();
                var facilityDraw = document.querySelector("facility-draw-legacy");
                facilityDraw.linePoints.push({ moveToX: prevX, moveToY: prevY, lineToX: this.currX, lineToY: this.currY });
            },
            drop: function (ev) {
                ev.preventDefault();
                var model = this;
                var id = ev.dataTransfer.getData("Text");
                var dropElement = document.getElementById(id);

                var rect = document.getElementById("canvas").getBoundingClientRect();
                dropX = (ev.clientX - rect.left) / (rect.right - rect.left) * document.getElementById("canvas").width;
                dropY = (ev.clientY - rect.top) / (rect.bottom - rect.top) * document.getElementById("canvas").height;
                let drawX = 22;
                let drawY = 22;
                
                //if (id == "water") {
                //    drawX = 17;
                //    drawY = 12;
                //}

                // draw the drag image at the drop coordinates
                var ctx = model.getContext("2d");
                ctx.mozImageSmoothingEnabled = true;
                ctx.webkitImageSmoothingEnabled = true;
                ctx.msImageSmoothingEnabled = true;
                ctx.imageSmoothingEnabled = true;
                ctx.imageSmoothingQuality = "high"
                ctx.drawImage(dropElement, dropX, dropY, drawX, drawY);
                //model.getContext("2d").drawImage(dropElement, dropX, dropY, drawX, drawY);
                var cloneImg = new Image();
                cloneImg.src = dropElement.src;                
                
                var facilityDraw = document.querySelector("facility-draw-legacy");
                facilityDraw.drawImages.push({ img: cloneImg, x: dropX, y: dropY, w: drawX, h: drawY, AdoptionApplication: { id: 0 }, type: "image", id: 0 });
                facilityDraw.updatePrint();                                
            },

            test: function () {
                var c = document.getElementById("canvas");
                var ctx = c.getContext("2d");
                
                
                var cloneImg = new Image();
                cloneImg.src = "../Images/water.png";
                cloneImg.width = 24;
                cloneImg.height = 24;
                cloneImg.onload = function () {
                
                    ctx.mozImageSmoothingEnabled = true;
                    ctx.webkitImageSmoothingEnabled = true;
                    ctx.msImageSmoothingEnabled = true;
                    ctx.imageSmoothingEnabled = true;
                    ctx.imageSmoothingQuality = "high"
                    ctx.drawImage(cloneImg, 0.5, 0.5, 24, 24);
                }
                
                
            },

            findxy: function (res, ev) {
                if (!this.isDraw) return;
                var ctx = this.canvas.getContext("2d");
                var rect = document.getElementById("canvas").getBoundingClientRect();

                var facilityDraw = document.querySelector("facility-draw-legacy")
                facilityDraw.startX = (ev.clientX - rect.left) / (rect.right - rect.left) * document.getElementById("canvas").width;
                facilityDraw.startY = (ev.clientY - rect.top) / (rect.bottom - rect.top) * document.getElementById("canvas").height;
                var h = facilityDraw.hit(facilityDraw.startX, facilityDraw.startY, "mousedown");
                console.log("ishit: " + h);


                if (res == 'down') {
                    prevX = this.currX;
                    prevY = this.currY;
                    this.currX = (ev.clientX - rect.left) / (rect.right - rect.left) * document.getElementById("canvas").width;//e.clientX - canvas.offsetLeft;
                    this.currY = (ev.clientY - rect.top) / (rect.bottom - rect.top) * document.getElementById("canvas").height;//e.clientY - canvas.offsetTop;

                    flag = true;
                    this.dot_flag = true;

                    if (this.dot_flag) {
                        ctx.beginPath();
                        ctx.fillStyle = "black";
                        ctx.fillRect(this.currX, this.currY, 2, 2);
                        ctx.closePath();
                        this.dot_flag = false;
                    }
                }

                if (res == 'up' || res == "out") {
                    flag = false;
                    this.updatePrint();
                }

                if (res == 'move') {
                    if (flag) {
                        prevX = this.currX;
                        prevY = this.currY;
                        this.currX = (ev.clientX - rect.left) / (rect.right - rect.left) * document.getElementById("canvas").width;//e.clientX - canvas.offsetLeft;
                        this.currY = (ev.clientY - rect.top) / (rect.bottom - rect.top) * document.getElementById("canvas").height;//e.clientY - canvas.offsetTop;
                        this.drawLine();
                    }
                }
            },

            //Remove all canvas event listeners
            removeEventListeners: function () {
                this.canvas.removeEventListener('mousedown', this.handleMouseDown, false);
                this.canvas.removeEventListener('mousemove', this.handleMouseMove, false);
                this.canvas.removeEventListener('mouseup', this.handleMouseUp, false);
                this.canvas.removeEventListener('mouseout', this.handleMouseOut, false);
                this.canvas.removeEventListener('click', this.handleMouseClick, false);
                $("#canvas").off();
            },


            //Called when you click on an image
            handleMouseDown: function (ev) {
                var rect = document.getElementById("canvas").getBoundingClientRect();
                var facilityDraw = document.querySelector("facility-draw-legacy")
                facilityDraw.startX = (ev.clientX - rect.left) / (rect.right - rect.left) * document.getElementById("canvas").width;
                facilityDraw.startY = (ev.clientY - rect.top) / (rect.bottom - rect.top) * document.getElementById("canvas").height;
                facilityDraw.isDown = facilityDraw.hit(facilityDraw.startX, facilityDraw.startY, "mousedown");
            },

            handleMouseUp: function (e) {
                e.preventDefault();
                var facilityDraw = document.querySelector("facility-draw-legacy")
                facilityDraw.dragTarget = null;
                facilityDraw.isDown = false;
                facilityDraw.updatePrint();
            },

            handleMouseOut: function (e) {
                //do nothing for now
                flag = false;
            },

            handleMouseMove: function (ev) {
                var rect = document.getElementById("canvas").getBoundingClientRect();
                var fd = document.querySelector("facility-draw-legacy")

                if (!fd.isDown) {
                    return;
                }

                canMouseX = (ev.clientX - rect.left) / (rect.right - rect.left) * document.getElementById("canvas").width;
                canMouseY = (ev.clientY - rect.top) / (rect.bottom - rect.top) * document.getElementById("canvas").height;

                var dx = canMouseX - fd.startX;
                var dy = canMouseY - fd.startY;
                fd.startX = canMouseX;
                fd.startY = canMouseY;
                fd.dragTarget.x += dx;
                fd.dragTarget.y += dy;
                fd.draw();
            },

            handleMouseClick: function (ev) {
                var rect = document.getElementById("canvas").getBoundingClientRect();
                var facilityDraw = document.querySelector("facility-draw-legacy")
                facilityDraw.startX = (ev.clientX - rect.left) / (rect.right - rect.left) * document.getElementById("canvas").width;
                facilityDraw.startY = (ev.clientY - rect.top) / (rect.bottom - rect.top) * document.getElementById("canvas").height;

                // set the drag flag
                isClicked = facilityDraw.hit(facilityDraw.startX, facilityDraw.startY, "click");

                if (isClicked) {
                    if (facilityDraw.selectedTarget.length == 2) {
                        facilityDraw.draw();
                        //empty the selected targets
                        facilityDraw.selectedTarget = [];
                    }
                }
                else {
                    facilityDraw.draw();
                    facilityDraw.selectedTarget = [];
                }
            },

            //Check to see if you clicked on something
            hit: function (x, y, event) {
                var facilityDraw = document.querySelector("facility-draw-legacy");

                for (var i = 0; i < facilityDraw.drawImages.length; i++) {
                    var image = facilityDraw.drawImages[i];

                    if (x >= image.x && x <= image.x + image.w && y >= image.y && y <= image.y + image.h) {

                        if (event === "mousedown") {
                            facilityDraw.dragTarget = image;
                        }
                        if (event === "click") {

                            if (facilityDraw.selectedTarget.indexOf(i) == -1) {
                                facilityDraw.selectedTarget.push(i);
                            }
                        }

                        return (true);
                    }
                }

                return (false);
            },


            mousedown: function (ev) {
                startOffsetX = ev.offsetX;
                startOffsetY = ev.offsetY;

                var fd = document.querySelector("facility-draw-legacy")

                fd.isDraw = false;

                $("#canvas").mousedown(function (e) { fd.handleMouseDown(e); });
                $("#canvas").mousemove(function (e) { fd.handleMouseMove(e); });
                $("#canvas").mouseup(function (e) { fd.handleMouseUp(e); });
                $("#canvas").mouseout(function (e) { fd.handleMouseOut(e); });
                $('#canvas').click(function (e) { fd.handleMouseClick(e) });
            },

            setFreeDraw: function (e) {
                this.isDraw = true;
                //Remove current canvas image drag and drop event listeners
                this.removeEventListeners();

                var facilityDraw = document.querySelector("facility-draw-legacy");

                this.canvas.addEventListener("mousemove", function (e) { facilityDraw.findxy('move', e) }, false);
                this.canvas.addEventListener("mousedown", function (e) { facilityDraw.findxy('down', e) }, false);
                this.canvas.addEventListener("mouseup", function (e) { facilityDraw.findxy('up', e) }, false);
                this.canvas.addEventListener("mouseout", function (e) { facilityDraw.findxy('out', e) }, false);
            },

            //Updates the hidden canvas image with current canvas.
            //Needed as canvas takes to long to create the image during print
            updatePrint: function () {
                var canvas = document.getElementById("canvas");

                if (canvas) {
                    var encodedImage = canvas.toDataURL();
                    $("#facilityDrawPrint").empty();
                    $("#facilityDrawPrint").prepend("<img src='" + encodedImage + "'/>");
                }
            },

        });
    </script>
</dom-module>
﻿<dom-module id="animals-all">
  <template>
    <style>
      :host() {
        display: block;
      }

      .paging_padding {
        padding-left: 3px;
        padding-right: 3px;
      }
    </style>
    <div class="container-fluid" style="min-height:732px">
      <div class="row" hidden$="{{hide}}">
        <div class="col-md-12">
          <h4>No animals were found</h4>
        </div>
      </div>
      <div hidden$="{{hideLoading}}" style="margin-top:50px;text-align:center;width:100%">
        <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i><br>
        <h4>Loading...</h4>
      </div>
      <div hidden$="{{hideGallery}}" style="padding-top: 20px;">
        <div class="row" style="padding-bottom: 30px;">
          <div class="col-sm-10 col-xs-12 animal-pagination">
            Pages:&nbsp;<a href="javascript:void(0)" class="paging_padding" hidden$="{{hideBack}}" on-tap="back">Prev</a>
            <template is="dom-repeat" items="{{pageNumbers}}">
              <a href="javascript:void(0)" on-tap="toPage">{{item}}</a>&nbsp;
            </template>
            <a href="javascript:void(0)" class="paging_padding" hidden$="{{hideForward}}" on-tap="next">Next</a>
            <a href="javascript:void(0)" class="paging_padding" hidden$="{{hideViewAll}}" on-tap="viewAll">View all</a>
          </div>
          <div class="pull-right" hidden$="{{hidePageOfPage}}">
            <span>Page {{page}} of {{lastPage}}</span>
          </div>
        </div>
        <div class="row">
          <template is="dom-repeat" items="{{animals}}">
            <gallery-animal data="{{item}}"></gallery-animal>
          </template>
        </div>
        <div class="row" style="padding-top: 30px;">
          <div class="col-sm-10 col-xs-12 animal-pagination">
            Pages:&nbsp;<a href="javascript:void(0)" class="paging_padding" hidden$="{{hideBack}}" on-tap="back">Prev</a>
            <template is="dom-repeat" items="{{pageNumbers}}">
              <a href="javascript:void(0)" on-tap="toPage">{{item}}</a>&nbsp;
            </template>
            <a href="javascript:void(0)" class="paging_padding" hidden$="{{hideForward}}" on-tap="next">Next</a>
            <a href="javascript:void(0)" class="paging_padding" hidden$="{{hideViewAll}}" on-tap="viewAll">View all</a>
          </div>
          <div class="pull-right" hidden$="{{hidePageOfPage}}">
            <span>Page {{page}} of {{lastPage}}</span>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script>
    'use strict';
    Polymer({
      is: 'animals-all',
      properties: {
        animals: {
          type: Array,
          value: []
        },
        hide: {
          type: Boolean,
          value: true
        },
        hideGallery: {
          type: Boolean,
          value: true
        },
        hideLoading: {
          type: Boolean,
          value: false
        },
        hidePageOfPage: {
          type: Boolean,
          value: false
        },
        pageNumbers: {
          type: Array,
          value: function () { return new Array(); }
        },
        isViewAll: {
          type: Boolean,
          value: false
        },
      },

      attached: function () {
        this.hide = true;
        this.page = 1;
        this.skip = 0;
        this.animalsPerPage = 9;
        this.searchParams = document.getElementById("animalFilter").getAnimalFilterJson();

        if (window.location.search.indexOf('search') < 0) {
          this.getAnimals();
        }
      },

      getAnimals: function () {
        this.hide = true;
        this.hidePageOfPage = false;
        $(".animal-pagination").css('visibility', 'visible');
        this.hideViewAll = true; //View All very costly query - only enabled if filtered search performed
        var model = this;
        model.resetAnimalsArray();
        var params = { OrderByField: "Freezemark" };

        $.post("/ctxapp/animals/search?$top=" + model.animalsPerPage + "&$orderby=" + model.searchParams.sort, params)
          .done(function (response) {
            model.animals = response.data
            model.totalCount = response.total;
            model.lastPage = Math.ceil(model.totalCount / model.animalsPerPage);

            model.updatePagination();

            sessionStorage.setItem('orderList', response.orderList);

            if (model.animals.length <= 0) {
              model.hide = !model.hide;
              $(".animal-pagination").css('visibility', 'hidden');
              model.hidePageOfPage = true;
              model.hideViewAll = true;
            }
            else if (model.animals.length < 9) {
              model.hidePageOfPage = false;
              $(".animal-pagination").css('visibility', 'hidden');
              model.hideViewAll = true;
            }

            for (var i = 1; i <= model.lastPage; i++) {
              model.push("pageNumbers", i);
            }

            model.hideGallery = false;
            model.hideLoading = true;
          })
          .fail(function (response) {
            model.hideLoading = true;
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg);
            }
          });
      },

      back: function () {
        this.hide = true;
        this.hidePageOfPage = false;
        $(".animal-pagination").css('visibility', 'visible');
        var model = this;
        model.hideLoading = false;

        if (model.page == 1) { return; }

        model.page--;
        model.skip = (model.page - 1) * model.animalsPerPage;

        model.hideGallery = true;
        model.resetAnimalsArray();

        $.post("/ctxapp/animals/search?$skip=" + model.skip + "&$top=" + model.animalsPerPage + "&$orderby=" + model.searchParams.sort, model.searchParams)
          .done(function (response) {
            model.animals = response.data
            model.totalCount = response.total;
            model.updatePagination();

            sessionStorage.setItem('orderList', response.orderList);

            if (model.animals.length <= 0) {
              model.hide = !model.hide;
              $(".animal-pagination").css('visibility', 'hidden');
              model.hideViewAll = true;
            }

            model.hideGallery = false;
            model.hideLoading = true;
          })
          .fail(function (response) {
            model.hideLoading = true;
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg);
            }
          });
      },

      next: function () {
        this.hide = true;
        this.hidePageOfPage = false;
        $(".animal-pagination").css('visibility', 'visible');
        var model = this;

        if ((model.page) * model.animalsPerPage >= model.totalCount) {
          return;
        }

        model.hideLoading = false;
        model.page++;
        model.skip = (model.page - 1) * model.animalsPerPage;
        model.hideGallery = true;
        model.resetAnimalsArray();

        $.post("/ctxapp/animals/search?$skip=" + model.skip + "&$top=" + model.animalsPerPage + "&$orderby=" + model.searchParams.sort, model.searchParams)
          .done(function (response) {
            model.animals = response.data;
            model.totalCount = response.total;
            model.updatePagination();

            sessionStorage.setItem('orderList', response.orderList);

            if (model.animals.length <= 0) {
              model.hide = !model.hide;
              $(".animal-pagination").css('visibility', 'hidden');
              model.hideViewAll = true;
            }

            model.hideGallery = false;
            model.hideLoading = true;
          })
          .fail(function (response) {
            model.hideLoading = true;
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg);
            }
          });
      },

      toPage: function (e) {
        this.hide = true;
        this.hidePageOfPage = false;
        $(".animal-pagination").css('visibility', 'visible');
        var model = this;
        model.hideGallery = true;
        model.hideLoading = false;

        var num = Number(e.currentTarget.text);
        model.page = num;
        model.skip = (num - 1) * model.animalsPerPage;
        model.resetAnimalsArray();

        $.post("/ctxapp/animals/search?$skip=" + model.skip + "&$top=" + model.animalsPerPage + "&$orderby=" + model.searchParams.sort, model.searchParams)
          .done(function (response) {
            model.animals = response.data;
            model.totalCount = response.total;
            model.updatePagination();

            sessionStorage.setItem('orderList', response.orderList);

            if (model.animals.length <= 0) {
              model.hide = !model.hide;
              $(".animal-pagination").css('visibility', 'hidden');
              model.hideViewAll = true;
            }

            model.hideGallery = false;
            model.hideLoading = true;
          })
          .fail(function (response) {
            model.hideLoading = true;
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg);
            }
          });
      },

      //Gets called from animal-filter->Reset or Search btn
      reload: function (searchParams) {
        var model = this;

        model.hide = true;
        model.hidePageOfPage = false;
        $(".animal-pagination").css('visibility', 'visible');

        if (searchParams.searchReset) {
          model.hideViewAll = true;
        } else {
          model.hideViewAll = false;
        }

        model.hideLoading = false;
        model.fire('beginAnimalSearch');
        model.hideGallery = true;
        searchParams.OrderByField = "Freezemark";
        model.searchParams = searchParams;
        model.skip = 0;
        model.page = 1;

        if (!model.isViewAll) {
          model.animalsPerPage = 9;
        }

        //Empty out pageNumbers array
        var n = this.pageNumbers.length;

        for (var i = 0; i < n; i++) {
          this.pop("pageNumbers");
        }

        //Guard
        var array = this.pageNumbers;
        this.pageNumbers = [];
        this.pageNumbers = array;

        //Remove all animals from animals array.  Do not delete!
        var count = this.animals.length
        for (var i = 0; i <= count; i++) {
          this.pop("animals");
        }

        $.post("/ctxapp/animals/search?$skip=" + model.skip + "&$top=" + model.animalsPerPage + "&$orderby=" + searchParams.sort, searchParams)
          .done(function (response) {
            model.animals = response.data;
            model.totalCount = response.total;
            model.lastPage = Math.ceil(model.totalCount / model.animalsPerPage);
            model.updatePagination();

            sessionStorage.setItem('orderList', response.orderList);

            if (model.animals.length <= 0) {
              model.hide = !model.hide;
              model.hidePageOfPage = true;
              $(".animal-pagination").css('visibility', 'hidden');
              model.hideViewAll = true;
            }
            else if (model.animals.length < 9) {
              model.hidePageOfPage = false;
              $(".animal-pagination").css('visibility', 'hidden');
              model.hideViewAll = true;
            }

            for (var i = 1; i <= model.lastPage; i++) {
              model.push("pageNumbers", i);
            }

            model.hideLoading = true;
            model.fire('endAnimalSearch');
            model.hideGallery = false;
            model.isViewAll = false;
          })
          .fail(function (response) {
            model.hideLoading = true;
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg);
            }
          });
      },

      resetAnimalsArray: function () {
        var count = this.animals.length

        for (var i = 0; i <= count; i++) {
          this.pop("animals");
        }

        var array = this.animals;
        this.animals = [];
        this.animals = array;
      },

      updatePagination: function () {
        var model = this;
        if (model.lastPage === 1) {
          model.hideBack = true;
          model.hideForward = true;
        }
        else if (model.page === 1) {
          model.hideBack = true;
          model.hideForward = false;
        }
        else if (model.page === model.lastPage) {
          model.hideForward = true;
          model.hideBack = false;
        }
        else {
          model.hideForward = false;
          model.hideBack = false;
        }
      },

      viewAll: function () {
        this.hideLoading = false;
        this.hideGallery = true;
        this.animalsPerPage = 999;
        this.skip = 0;
        var searchParams = document.getElementById("animalFilter").getAnimalFilterJson();
        this.isViewAll = true;
        this.reload(searchParams);

        $(".animal-pagination").css('visibility', 'hidden');
        this.hideViewAll = true;
        this.hidePageOfPage = true;
      },
    })
  </script>
</dom-module>
<dom-module id="gallery-animal">
  <template>
    <style>
      :host() {
        display: block;
      }

      .animal_link {
        width: 100%;
        height: 100%;
      }

      .animal_img {
        max-height: 250px;
        min-height: 200px;
        width: 95%;
        object-fit: contain;
        page-break-inside: avoid;
      }
    </style>
    <div class="col-md-4 col-sm-6 col-xs-12" style="padding-bottom: 20px; page-break-inside: avoid;">
      <div class="row">
        <div class="col-md-12" style="height: 250px;">
          <a href="animals/{{data.Freezemark}}" target="_blank" rel="opener" class="animal_link">
            <img class="animal_img" src="{{data.ThumbnailPath}}" alt="{{data.NecktagNumber}}">
          </a>
        </div>
      </div>
      <div class="row" style="padding-top: 10px;">
        <div class="col-md-12" style="text-transform: uppercase">
          <b>{{data.NecktagNumber}} - {{data.Age}} year old {{data.Sex}} {{data.Species}}</b>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <template if="{{data.HasListing}}" is="dom-if">
            <template if="{{data.HasListingAuctionType}}" is="dom-if">
              <b>Bids:</b> {{data.NumberOfBids}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <b>Price:</b> {{data.CurrentPrice}}
            </template>
            <template if="{{!data.HasListingAuctionType}}" is="dom-if">
              <template if="{{data.IsEligibleForAdoption}}" is="dom-if">
                <b>Adopt Now:</b> {{data.CurrentPrice}}
              </template>
              <template if="{{!data.IsEligibleForAdoption}}" is="dom-if">
                <b>Buy Now:</b> {{data.CurrentPrice}}
              </template>
            </template>
            <template if="{{data.ListingEnded}}" is="dom-if">
              Ended
            </template>
          </template>&nbsp;
        </div>
      </div>
    </div>
  </template>
  <script>
    Polymer({
      is: 'gallery-animal',
      properties: {
        data: {
          type: Array
        },
      },
    })
  </script>
</dom-module>﻿<dom-module id="animal-filter">
  <template>
    <style>
      :host() {
        display: block;
      }

      :host .closeDialog {
        color: white;
        opacity: initial
      }

      .searchCheckbox {
        margin-right: 5px;
        padding: 10px
      }

      .searchHeaders {
        font-size: 18px
      }

      .searchInput {
        margin-bottom: 5px;
        margin-top: 5px
      }

      .searchLayout {
        color: #fff;
        margin-top: 10px
      }

      .facetItem {
        color: black;
        font-weight: normal;
        margin-left: 10px;
      }

      :host .actionButtons {
        margin-bottom: 5px;
        margin-top: 5px;
      }

      :host .required {
        color: red
      }

      .search-padding {
        padding-bottom: 15px;
      }
    </style>
    <form id="search">
      <div class="searchLayout" hidden="{{hideSearchLayout}}">
        <div class="row">
          <div class="col-xs-12">
            <div class="text-right actionButtons" id="topActionButtons">
              <button class="btn blm-btn-secondary pull-left " id="btnResetSearchTop" on-tap="resetSearch" type="button">Reset</button>
              <button class="btn blm-btn-primary" id="btnSearchTop" on-tap="searchForAnimals" type="button">
                Search
                <span id="spinner" hidden="{{!processing}}">
                  <i class="fa fa-spinner fa-pulse fa-fw"></i>
                </span>
              </button>
            </div>
          </div>
        </div>
        <hr>
        <div class="row" style="padding-bottom: 10px;">
          <div class="col-xs-12">
            <b class="searchHeaders">Animal Search</b>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <input class="searchCheckbox" id="cbFreezemark" on-change="showFreezemark" type="checkbox"><label for="cbFreezemark">Freezemark</label>
          </div>
          <div class="col-xs-12 search-padding" hidden$="{{hideFreezemark}}">
            <input class="form-control input-sm searchInput" id="freezmark" type="text" value="{{freezemark::input}}">
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <input id="cbSpecies" class="searchCheckbox" on-change="showSpecies" type="checkbox"><label for="cbSpecies">Species</label>
          </div>
          <div class="col-xs-12 search-padding" hidden$="{{hideSpecies}}">
            <div style="background-color: white">
              <label class="facetItem"><input id="burro" name="species" type="radio" value="Burro">&nbsp;Burro</label><br>
              <label class="facetItem"><input id="horse" name="species" type="radio" value="Horse">&nbsp;Horse</label>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <input class="searchCheckbox" id="cbGender" on-change="showGender" type="checkbox"><label for="cbGender">Gender</label>
          </div>
          <div class="col-xs-12 search-padding" hidden$="{{hideGender}}">
            <div id="genderLayout" style="background-color: white"></div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <input class="searchCheckbox" id="cbAge" on-change="showAge" type="checkbox"><label for="cbAge">Age</label>
          </div>
          <div class="col-xs-12 search-padding" hidden$="{{hideAge}}">
            <div style="margin-bottom: 15px; margin-top: 5px">
              Between&nbsp;
              <input class="form-control input-sm" id="fromAge" max="40" min="0" step="1" type="number" value="{{fromAge::input}}">
              &nbsp;and&nbsp;
              <input class="form-control input-sm" id="toAge" max="40" min="0" on-change="checkToAge" step="1" type="number" value="{{toAge::input}}">
              <div class="hidden alert alert-danger" id="ageError" style="padding: 5px;">Must be &gt; than {{fromAge}}</div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <input class="searchCheckbox" id="cbColor" on-change="showColor" type="checkbox"><label for="cbColor">Color</label>
          </div>
          <div class="col-xs-12 search-padding" hidden$="{{hideColor}}">
            <div id="colorLayout" style="background-color: white"></div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <input class="searchCheckbox" id="cbHeight" on-change="showHeight" type="checkbox"><label for="cbHeight">Height</label>
          </div>
          <div class="col-xs-12 search-padding" hidden$="{{hideHeight}}">
            <div style="margin-bottom: 5px; margin-top: 5px">
              Between
              <select class="form-control input-sm" id="ddlFromHeight" value="{{fromHeight::change}}">
                <option></option>
              </select>
              and
              <select class="form-control input-sm" id="ddlToHeight" value="{{toHeight::change}}">
                <option></option>
              </select>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <input class="searchCheckbox" id="cbTraining" on-change="showTraining" type="checkbox"><label for="cbTraining">Training</label>
          </div>
          <div class="col-xs-12 search-padding" hidden$="{{hideTraining}}">
            <div id="trainingLayout" style="background-color: white">
              <label class="facetItem"><input id="Halter" name="Halter" type="checkbox" value="Halter Trained">&nbsp;Halter</label><br>
              <label class="facetItem"><input id="Saddle" name="Saddle" type="checkbox" value="Saddle Trained">&nbsp;Saddle</label><br>
              <label class="facetItem"><input id="Untrained" name="Untrained" type="checkbox" value="Untrained">&nbsp;Untrained</label><br>
              <label class="facetItem"><input id="Incomplete" name="Incomplete" type="checkbox" value="Training Not Completed">&nbsp;Incomplete</label>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <input class="searchCheckbox" id="adoption" name="disposition" type="checkbox" value="adoption"><label for="adoption">Eligible for Adoption</label>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <input class="searchCheckbox" id="sale" name="disposition" type="checkbox" value="sale"><label for="sale">Eligible for Sale</label>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <input checked="{{video::change}}" class="searchCheckbox" id="cbVideo" type="checkbox"><label for="cbVideo">Video</label>
          </div>
        </div>
        <hr>
        <div class="row" style="padding-bottom: 10px;">
          <div class="col-xs-12">
            <b class="searchHeaders">Purchase Method</b>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <input checked="{{buyNow::change}}" class="searchCheckbox" id="cbBuyNow" type="checkbox"><label for="cbBuyNow">Fixed Price</label>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <input checked="{{auction::change}}" class="searchCheckbox" id="cbAuction" type="checkbox"><label for="cbAuction">Auction</label>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <input class="searchCheckbox" id="cbPrice" on-change="showPrice" type="checkbox"><label for="cbPrice">Price</label>
          </div>
          <div class="col-xs-12 search-padding" hidden$="{{hidePrice}}">
            <div style="margin-bottom: 15px; margin-top: 5px">
              Between
              <input class="form-control input-sm" id="priceMin" min="5" step="5" type="number" value="{{priceMin::input}}">
              and
              <input class="form-control input-sm" id="priceMax" min="5" step="5" type="number" value="{{priceMax::input}}">
            </div>
          </div>
        </div>

        <hr>

        <div class="row" style="padding-bottom: 10px;">
          <div class="col-xs-12">
            <b class="searchHeaders">Location</b>
          </div>
        </div>

        <div class="row">
          <div class="col-xs-12">
            <input class="searchCheckbox" id="cbAnimalOrigin" on-change="showHma" type="checkbox"><label for="cbAnimalOrigin">Animal Origin</label>
          </div>
          <div class="col-xs-12 search-padding" hidden$="{{hideHma}}">
            <div id="hmaLayout" style="background-color: white"></div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <input class="searchCheckbox" id="cbCurrentAnimalLocation" on-change="showCurrentLocation" title="Current Animal Location" type="checkbox"><label for="cbCurrentAnimalLocation">Current Location</label>
          </div>
          <div class="col-xs-12 search-padding" hidden$="{{hideCurrentLocation}}">
            <div id="currentLocationLayout" style="background-color: white"></div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <input class="searchCheckbox" id="cbPickupDistance" type="checkbox" on-change="showPickupDistance"><label for="cbPickupDistance">Pickup by Zip Code</label>
          </div>
          <div class="col-xs-12 search-padding" hidden$="{{hidePickupDistance}}">
            <div style="margin-bottom: 15px; margin-top: 5px">
              Zip Code&nbsp;
              <input class="form-control input-sm" id="zip" type="number" value="{{zipCode::input}}">
              Distance Miles Within&nbsp;
              <select class="form-control input-sm" id="ddlDistance" value="{{pickupDistance::change}}"></select>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <input class="searchCheckbox" id="cbPickupLocation" type="checkbox" on-change="showPickupLocation"><label for="cbPickupLocation">Pickup Location List</label>
          </div>
          <div class="col-xs-12 search-padding" hidden$="{{hidePickupLocation}}">
            <div id="pickupLocationLayout" style="background-color: white"></div>
          </div>
        </div>

        <hr>

        <div class="row">
          <div class="col-xs-12">
            <b class="searchHeaders">Sort</b>
          </div>
          <div class="col-xs-12 search-padding">
            <div style="margin-top: 5px">
              <select class="form-control input-sm" id="ddlSort" value="{{sort::change}}">
                <option value="NecktagNumber asc">Necktag</option>
                <option value="NumberOfBids desc">Bids, High to Low</option>
                <option value="NumberOfBids asc">Bids, Low to High</option>
                <option value="CurrentPriceValue desc">Price, High to Low</option>
                <option value="CurrentPriceValue asc">Price, Low to High</option>
              </select>
            </div>
          </div>
        </div>
        <hr>

        <div class="row">
          <div class="col-xs-12" style="padding-bottom: 20px;">
            <div class="text-right actionButtons">
              <button class="btn blm-btn-secondary pull-left" id="btnResetSearch" on-tap="resetSearch" type="button">Reset</button>
              <button class="btn blm-btn-primary" id="btnSearch" on-tap="searchForAnimals" type="button">
                Search
                <span id="spinner" hidden="{{!processing}}">
                  <i class="fa fa-spinner fa-pulse fa-fw"></i>
                </span>
              </button>
            </div>
          </div>
          <div class="col-xs-12" hidden$="{{hideSaveSearchButton(isAuthenticated, hideSaveSearch)}}">
            <button class="btn blm-btn-secondary" on-tap="showSaveSearch" style="width: 100%" type="button">Save Search</button>
          </div>
        </div>
      </div>
      <div class="searchLayout" hidden="{{hideSaveSearchLayout}}" id="saveSearchLayout">
        <hr>

        <div class="row" style="padding-bottom: 20px;">
          <div class="col-xs-12">
            <b class="searchHeaders">Save Search</b>
          </div>
          <div class="col-xs-12">
            <small>
              <span class="required">*</span>&nbsp;Required Field
            </small>
          </div>
        </div>

        <div class="row">
          <div class="col-xs-12">
            <label for="cbTitle">Title <span class="required">*</span></label>
          </div>
          <div class="col-xs-12 search-padding">
            <input class="form-control input-sm searchInput" id="title" type="text" value="{{title::input}}">
          </div>
        </div>

        <div class="row">
          <div class="col-xs-12">
            <label>Receive Notifications <span class="required">*</span></label>
          </div>
          <div class="col-xs-12 search-padding">
            <div style="background-color: white">
              <label class="facetItem"><input id="cbDaily" name="notification" type="radio" value="1">&nbsp;Daily</label><br>
              <label class="facetItem"><input id="cbWeekly" name="notification" type="radio" value="7">&nbsp;Weekly</label><br>
              <label class="facetItem"><input id="cbMonthly" name="notification" type="radio" value="30">&nbsp;Monthly</label><br>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-xs-12">
            <div class="alert alert-success alert-dismissible" hidden="{{hideSaveNotification}}" id="saveNotification" role="alert">
              <button type="button" class="close" on-tap="closeSaveNotification" aria-label="Close">
                <span aria-hidden="true">×</span>
              </button>
              <p>Animal Search - {{title}} has been saved.</p>
            </div>
            <div class="alert alert-danger alert-dismissible" hidden="{{hideSaveSearchError}}" role="alert">
              <button aria-label="Close" class="close" on-tap="closeSaveSearchError" type="button">
                <span aria-hidden="true">×</span>
              </button>
              Title and Receive Notifications are required fields.
            </div>
            <div class="text-right actionButtons">
              <button class="btn blm-btn-secondary" on-tap="closeSaveAnimalSearch" title="Cancel Save Search" type="button">Cancel</button>
              <button class="btn blm-btn-primary" on-tap="saveSearch" title="Save Search" type="button">Save</button>
            </div>
          </div>
        </div>
      </div>
    </form>
  </template>
  <script>
    'use strict';
    Polymer({
      is: 'animal-filter',
      properties: {
        adopt: {
          type: Boolean,
          value: false
        },
        auction: {
          type: Boolean,
          value: false
        },
        buyNow: {
          type: Boolean,
          value: false
        },
        color: {
          type: String,
          value: ''
        },
        currentLocation: {
          type: String,
          value: ''
        },
        distance: {
          type: Array,
          value: [50, 100, 250, 500]
        },
        freezemark: {
          type: String
        },
        fromAge: {
          type: String,
          value: ''
        },
        fromHeight: {
          type: String,
          value: ''
        },
        gender: {
          type: String,
          value: ''
        },
        training: {
          type: String,
          value: ''
        },
        height: {
          type: Array,
          value: [10, 10.1, 10.2, 10.3, 11, 11.1, 11.2, 11.3, 12, 12.1, 12.2, 12.3, 13, 13.1, 13.2, 13.3, 14, 14.1, 14.2, 14.3, 15, 15.1, 15.2, 15.3, 16, 16.1, 16.2, 16.3, 17, 17.1, 17.2, 17.3, 18, 18.1, 18.2, 18.3, 19, 19.1, 19.2, 19.3, 20]
        },
        hideAge: {
          type: Boolean,
          value: true
        },
        hideColor: {
          type: Boolean,
          value: true
        },
        hideCurrentBidPrice: {
          type: Boolean,
          value: true
        },
        hideCurrentLocation: {
          type: Boolean,
          value: true
        },
        hideFreezemark: {
          type: Boolean,
          value: true
        },
        hideGender: {
          type: Boolean,
          value: true
        },
        hideHeight: {
          type: Boolean,
          value: true
        },
        hideHma: {
          type: Boolean,
          value: true
        },
        hidePickupDistance: {
          type: Boolean,
          value: true
        },
        hidePrice: {
          type: Boolean,
          value: true
        },
        hideSaveSearch: {
          type: Boolean,
          value: true
        },
        hideSaveSearchError: {
          type: Boolean,
          value: true
        },
        hideSaveSearchLayout: {
          type: Boolean,
          value: true
        },
        hideSearchLayout: {
          type: Boolean,
          value: false
        },
        hideSaveNotification: {
          type: Boolean,
          value: true
        },
        hideSpecies: {
          type: Boolean,
          value: true
        },
        hideTraining: {
          type: Boolean,
          value: true
        },
        hidePickupLocation: {
          type: Boolean,
          value: true
        },
        hma: {
          type: String,
          value: ''
        },
        isSavedSearchDirty: {
          type: Boolean,
          value: false
        },
        pickupDistance: {
          type: String,
          value: ''
        },
        priceMax: {
          type: Number
        },
        priceMin: {
          type: Number
        },
        savedSearch: {
          type: String
        },
        searchParams: {
          type: Object,
          value: null,
          observer: '_searchParamsObserver'
        },
        species: {
          type: String,
          value: ''
        },
        title: {
          type: String,
          value: ''
        },
        toAge: {
          type: String,
          value: ''
        },
        toHeight: {
          type: String,
          value: ''
        },
        userId: {
          type: String,
          value: ''
        },
        zipCode: {
          type: String,
          value: ''
        },
        isAuthenticated: {
          type: Boolean,
          value: false
        },
        sort: {
          type: String,
          value: 'NecktagNumber asc'
        },
        processing: {
          type: Boolean,
          value: false
        },
      },

      attached: function () {
        var model = this;

        //Guards
        this.hideSaveSearchError = true;
        this.hideSearchLayout = false;
        $("#topActionButtons").removeClass("hidden");
        this.hideSaveNotification = true;
        this.isSavedSearchDirty = false;

        if (this.userId.indexOf('blm.gov') <= 0) {
          this.hideSaveSearch = false;
        }
        else {
          this.hideSaveSearch = true;
        }

        if (this.searchParams) {
          this._searchParamsObserver();
        }
        $("#search").on("clear", function (event) {
          model.resetSearch();
        });
        //Fire saved animal search
        if (window.location.search.indexOf('search') > 0) {
          this.getSavedSearch();
        }
      },

      checkToAge: function () {
        if (Number(this.toAge) < Number(this.fromAge)) {
          $("#ageError").removeClass("hidden");
          $("#toAge").focus();
        }
        else {
          $("#ageError").addClass("hidden");
        }
      },

      closeSaveAnimalSearch: function () {
        this.title = '';
        this.hideSaveSearchError = true;
        this.hideSaveSearchLayout = true;
        this.hideSearchLayout = false;
        this.hideSaveNotification = true;
        this.isSavedSearchDirty = false;

        $('input:radio:checked').each(function () {
          this.checked = false;
        });

        $(document).trigger("closeAnimalSearchSave", []);
      },

      closeSaveNotification: function () {
        this.hideSaveNotification = true;
      },

      closeSaveSearchError: function () {
        this.hideSaveSearchError = true;
      },

      getAnimalFilterJson: function () {
        var model = this;
        //Set gender
        model.gender = "";
        $("#genderLayout input:checked").each(function () {
          model.gender += $(this).val() + '|';
        })

        //Set color
        model.color = "";
        $("#colorLayout input:checked").each(function () {
          model.color += $(this).val() + '|';
        })

        //Set animal origin
        model.hma = "";
        model.bornAtFacility = false;
        $("#hmaLayout input:checked").each(function () {
          if ($(this).val() == 'Born at Facility') {
            model.bornAtFacility = true;
          } else {
            model.hma += $(this).val() + '|';
          }
        })

        //Set animal current location
        model.currentLocation = "";
        $("#currentLocationLayout input:checked").each(function () {
          model.currentLocation += $(this).val() + '|';
        })

        model.training = '';
        $("#trainingLayout input:checked").each(function () {
          model.training += $(this).val() + '|';
        })

        model.pickupLocation = "";
        $("#pickupLocationLayout input:checked").each(function () {
          model.pickupLocation += $(this).val() + '|';
        })

        var json = {
          freezemark: this.freezemark,
          species: $("input[name=species]:checked").val(),
          gender: this.gender,
          filterByAge: !this.hideAge,
          fromAge: Number(this.fromAge),
          toAge: Number(this.toAge),
          color: this.color,
          filterByHeight: !this.hideHeight,
          fromHeight: Number(this.fromHeight),
          toHeight: Number(this.toHeight),
          training: this.training,
          disposition: ($("input[name=disposition]:checked").val() === undefined) ? '' : $("input[name=disposition]:checked").val(),
          video: this.video,
          hma: this.hma,
          bornAtFacility: this.bornAtFacility,
          buyNow: this.buyNow,
          adopt: this.adopt,
          auction: this.auction,
          zipCode: this.zipCode,
          pickupDistance: this.pickupDistance,
          filterByAuctionPrice: !this.hideCurrentBidPrice,
          filterByPrice: !this.hidePrice,
          fromPrice: this.priceMin,
          toPrice: this.priceMax,
          currentLocation: this.currentLocation,
          pickupLocation: this.pickupLocation,
          sort: this.sort,
          searchReset: this.searchReset,
        };
        return json;
      },

      resetSearch: function (e) {
        var model = this;
        $("#search")[0].reset();
        model.searchReset = true;
        model.fromAge = "";
        model.toAge = "";
        $("#ageError").addClass("hidden");
        model.hideAge = true;
        model.hideColor = true;
        model.color = "";
        model.freezemark = "";
        model.hideFreezemark = true;
        model.hideGender = true;
        model.gender = "";
        model.fromHeight = "";
        model.toHeight = "";
        model.hideHeight = true;
        model.hideSpecies = true;
        model.species = "";
        model.hideTraining = true;
        model.video = false;
        model.hideHma = true;
        model.hma = "";
        model.zipCode = "";
        model.hidePickupDistance = true;
        model.hidePrice = true;
        model.hideCurrentBidPrice = true;
        model.adopt = false;
        model.buyNow = false;
        model.auction = false;
        model.hideCurrentLocation = true;
        model.currentLocation = "";
        model.hidePickupLocation = true;
        model.priceMax = "";
        model.priceMin = "";
        model.sort = "NecktagNumber asc";

        if (e != undefined && (e.currentTarget.id === "btnResetSearch" || e.currentTarget.id === "btnResetSearchTop")) {
          model.searchForAnimals();
        }
      },

      getSavedSearch: function () {
        var model = this;
        var s = window.location.search.replace('?', '');
        var ss = s.split('=');

        $.get('/ctxapp/animals/saved-searches/' + ss[1])
          .done(function (data) {
            model.loadSavedSearch(data);
            model.searchForAnimals();
            var allAnimals = document.getElementById("allAnimals");
            allAnimals.hideGallery = true;
          })
          .fail(function (response) {
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg);
            }
          });
      },

      loadSavedSearch: function (selectedSearch) {
        //WARNING/TODO: Needs Redesign. If code changes here, must duplicate in populateAnimalFilter of animal-saved-search.html
        if (selectedSearch === undefined || selectedSearch === null) return;

        if (selectedSearch.Freezemark) {
          $("#cbFreezemark").prop('checked', true);
          this.freezemark = selectedSearch.Freezemark;
          this.hideFreezemark = false;
        }

        if (selectedSearch.Species) {
          $("#cbSpecies").prop('checked', true);

          if (selectedSearch.Species === "Burro") {
            $("#burro").prop('checked', true);
          }
          else if (selectedSearch.Species === "Horse") {
            $("#horse").prop('checked', true);
          }

          this.hideSpecies = false;
        }

        if (selectedSearch.Gender) {
          $("#cbGender").prop('checked', true);
          this.hideGender = false;

          var genderList = selectedSearch.Gender.split('|');

          for (var i = 0; i < genderList.length; i++) {
            if (genderList[i] !== "") {
              $("#" + genderList[i] + "").prop('checked', true);
            }
          }
        }

        if (selectedSearch.FilterByAge) {
          $("#cbAge").prop('checked', true);
          this.hideAge = false;
          this.fromAge = selectedSearch.FromAge;
          this.toAge = selectedSearch.ToAge;
        }

        if (selectedSearch.Color) {
          $("#cbColor").prop('checked', true);
          this.hideColor = false;

          var colorList = selectedSearch.Color.split('|');

          for (var i = 0; i < colorList.length; i++) {
            if (colorList[i] !== "") {
              $("#" + colorList[i] + "").prop('checked', true);
            }
          }
        }

        if (selectedSearch.FilterByHeight) {
          $("#cbHeight").prop('checked', true);
          this.hideHeight = false;
          this.fromHeight = selectedSearch.FromHeight;
          this.toHeight = selectedSearch.ToHeight;
        }

        if (selectedSearch.Training) {
          var trainingList = selectedSearch.Training.split('|');

          for (var i = 0; i < trainingList.length; i++) {
            $("#cbTraining").prop('checked', true);

            if (trainingList[i] === "Halter Trained") {
              $("#Halter").prop('checked', true);
            }
            else if (trainingList[i] === "Saddle Trained") {
              $("#Saddle").prop('checked', true);
            }
            else if (trainingList[i] === "Untrained") {
              $("#Untrained").prop('checked', true);
            }
            else if (trainingList[i] === "Training Not Completed") {
              $("#Incomplete").prop('checked', true);
            }
          }

          this.hideTraining = false;
        }

        if (selectedSearch.Disposition) {
          $("#cbDisposition").prop('checked', true);

          if (selectedSearch.Disposition === "adoption") {
            $("#adoption").prop('checked', true);
          }
          else if (selectedSearch.Disposition === "sale") {
            $("#sale").prop('checked', true);
          }
        }

        if (selectedSearch.Video) {
          this.video = true;
        }

        if (selectedSearch.BuyNow) {
          this.buyNow = true;
        }

        if (selectedSearch.Auction) {
          this.auction = true;
        }

        if (selectedSearch.FilterByPrice) {
          $("#cbPrice").prop('checked', true);
          this.hidePrice = false;
        }

        if (selectedSearch.CurrentLocation) {
          $("#cbCurrentAnimalLocation").prop('checked', true);
          this.hideCurrentLocation = false;

          var currentLocationList = selectedSearch.CurrentLocation.split('|');

          for (var i = 0; i < currentLocationList.length; i++) {
            if (currentLocationList[i] !== "") {
              $("[id='" + currentLocationList[i] + "']").prop('checked', true);
            }
          }
        }

        if (selectedSearch.Hma) {
          $("#cbAnimalOrigin").prop('checked', true);
          this.hideHma = false;

          var hmaList = selectedSearch.Hma.split('|');

          for (var i = 0; i < hmaList.length; i++) {
            if (hmaList[i] !== "") {
              $("[id='" + hmaList[i] + "']").prop('checked', true);
            }
          }
        }

        if (selectedSearch.BornAtFacility) {
          $("#cbAnimalOrigin").prop('checked', true);
          this.hideHma = false;

          var originList = $('#hmaLayout').find(':checkbox');

          for (var i = 0; i < originList.length; i++) {
            if (originList[i].id == "Born at Facility") {
              $("[id='" + originList[i].id + "']").prop('checked', true);
              return;
            }
          }
        }

        this.title = selectedSearch.Title;

        if (selectedSearch.Frequency === 1) {
          $("#cbDaily").prop('checked', true);
        }
        else if (selectedSearch.Frequency === 7) {
          $("#cbWeekly").prop('checked', true);
        }
        else if (selectedSearch.Frequency === 30) {
          $("#cbMonthly").prop('checked', true);
        }

        if (selectedSearch.ZipCode) {
          $("#cbPickupDistance").prop('checked', true);
          this.zipCode = selectedSearch.ZipCode;
          this.pickupDistance = selectedSearch.PickupDistance;
          this.hidePickupDistance = false;
        }

        if (selectedSearch.PickupLocation) {
          $("#cbPickupLocation").prop('checked', true);

          var locationList = selectedSearch.PickupLocation.split('|');

          for (var i = 0; i < locationList.length; i++) {
            if (locationList[i] !== "") {
              $("[id='" + locationList[i] + "']").prop('checked', true);
            }
          }
          this.hidePickupLocation = false;
        }
      },

      saveSearch: function () {
        var model = this;
        var animalSavedQuery = this.getAnimalFilterJson();
        animalSavedQuery.frequency = ($("input:radio[name ='notification']:checked").val() === undefined) ? '' : $("input:radio[name ='notification']:checked").val();
        animalSavedQuery.title = this.title;

        if (animalSavedQuery.frequency === "" || animalSavedQuery.title === "") {
          this.hideSaveSearchError = false;
          return;
        }
        else {
          this.hideSaveSearchError = true;
        }

        $.post('/ctxapp/animals/saved-searches', animalSavedQuery)
          .done(function (data) {
            model.closeSaveAnimalSearch();
            model.resetSearch();
            $("#searchSavePopup").modal("hide");
            model.isSavedSearchDirty = true;
          })
          .fail(function (response) {
            model.closeSaveAnimalSearch();
            $("#searchSavePopup").modal("hide");
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg);
            }
          });
      },

      _searchParamsObserver: function () {
        if (this.searchParams) {
          this.getColorList();
          this.getGenderList();
          this.getHeight();
          this.getCurrentLocationList();
          this.getAnimalOriginList();
          this.getDistanceList();
          this.getPriceRange();
          this.getPickupLocationList();
        }
      },

      showAge: function () {
        if (this.hideAge === true) {
          this.hideAge = false;
        }
        else {
          this.hideAge = true;
          this.fromAge = '';
          this.toAge = "";
        }
      },

      showColor: function () {
        if (this.hideColor === true) {
          this.hideColor = false;
        }
        else {
          this.hideColor = true;
          $("#colorLayout input:checked").each(function () {
            $(this).prop('checked', false);
          })
        }
      },

      showFreezemark: function () {
        if (this.hideFreezemark === true) {
          this.hideFreezemark = false;
        }
        else {
          this.hideFreezemark = true;
          this.freezemark = '';
        }
      },

      showGender: function () {
        if (this.hideGender === true) {
          this.hideGender = false;
        }
        else {
          this.hideGender = true;
          $("#genderLayout input:checked").each(function () {
            $(this).prop('checked', false);
          })
        }
      },

      showHeight: function () {
        $("#ddlFromHeight").val($("#ddlFromHeight option:contains('10')").val());
        $("#ddlToHeight").val($("#ddlToHeight option:contains('10')").val());

        if (this.hideHeight === true) {
          this.fromHeight = 10;
          this.toHeight = 10;
          this.hideHeight = false;
        }
        else {
          this.fromHeight = 0;
          this.toHeight = 0;
          this.hideHeight = true;
        }
      },

      showSpecies: function () {
        if (this.hideSpecies === true) {
          this.hideSpecies = false;
        }
        else {
          this.hideSpecies = true;
          $("#burro").prop('checked', false);
          $("#horse").prop('checked', false);
        }
      },

      showTraining: function () {
        if (this.hideTraining === true) {
          this.hideTraining = false;
        }
        else {
          this.hideTraining = true;
          $("#Halter").prop('checked', false);
          $("#Saddle").prop('checked', false);
          $("#Untrained").prop('checked', false);
          $("#Incomplete").prop('checked', false);
        }
      },

      showHma: function () {
        if (this.hideHma === true) {
          this.hideHma = false;
        }
        else {
          this.hideHma = true;
          $("#hmaLayout input:checked").each(function () {
            $(this).prop('checked', false);
          })
        }
      },

      showPickupDistance: function () {
        if (this.hidePickupDistance) {
          this.hidePickupDistance = false;
        }
        else {
          this.hidePickupDistance = true;
          this.zipCode = "";
          $("#ddlDistance ").val($("#ddlDistance  option:first").val());
        }
      },

      showPickupLocation: function () {
        if (this.hidePickupLocation === true) {
          this.hidePickupLocation = false;
        }
        else {
          this.hidePickupLocation = true;
          $("#pickupLocationLayout input:checked").each(function () {
            $(this).prop('checked', false);
          })
        }
      },

      showCurrentBidPrice: function () {
        if (this.hideCurrentBidPrice === true) {
          this.hideCurrentBidPrice = false;
        }
        else {
          this.hideCurrentBidPrice = true;
        }
      },

      showPrice: function () {
        if (this.hidePrice === true) {
          this.hidePrice = false;
        }
        else {
          this.hidePrice = true;
          this.priceMin = null;
          this.priceMax = null;
        }
      },

      showCurrentLocation: function () {
        if (this.hideCurrentLocation === true) {
          this.hideCurrentLocation = false;
        }
        else {
          this.hideCurrentLocation = true;
          $("#currentLocationLayout input:checked").each(function () {
            $(this).prop('checked', false);
          })
        }
      },

      showSaveSearch: function () {
        this.hideSaveSearchError = true;

        if (this.userId.indexOf('blm.gov') <= 0) {
          this.hideSaveSearch = false;
        }
        else {
          this.hideSaveSearch = true;
        }

        this.hideSearchLayout = true;
        this.hideSaveSearchLayout = false;
        $("#title").focus();
      },

      getColorList: function () {
        var array = this.searchParams.ColorList;

        if (this.$.colorLayout.children.length <= 0) {
          for (var i = 0; i < array.length; i++) {
            var checkbox = '<label style="color:black; font-weight:normal; padding-left:2em; text-indent:-2em;"><input type="checkbox" name="color" style="margin-left:10px" id="' + array[i].Name + '" value="' + array[i].Name + '"/> ' + array[i].DisplayName + '</label><br/>';
            $("#colorLayout").append(checkbox);
          }
        }
      },

      getGenderList: function () {
        var array = this.searchParams.GenderList;

        if (this.$.genderLayout.children.length <= 0) {
          for (var i = 0; i < array.length; i++) {
            var checkbox = '<label style="color:black; font-weight:normal; padding-left:2em; text-indent:-2em;"><input type="checkbox" name="gender" style="margin-left:10px" id="' + array[i] + '"  value="' + array[i] + '"/> ' + array[i] + '</label><br/>';
            $("#genderLayout").append(checkbox);
          }
        }
      },

      getHeight: function () {
        for (var i = 0; i < this.height.length; i++) {
          var option;

          if (i === 0) {
            option = '<option value="' + this.height[i] + '">' + this.height[i] + ' (Hands)' + '</option>';
          }
          else {
            option = '<option value="' + this.height[i] + '">' + this.height[i] + '</option>';
          }

          $("#ddlFromHeight").append(option);
          $("#ddlToHeight").append(option);
        }
      },

      getDistanceList: function () {
        if (this.$.ddlDistance.children.length <= 0) {
          $("#ddlDistance").append("<option></option>");

          for (var i = 0; i < this.distance.length; i++) {
            var option = '<option>' + this.distance[i] + '</option>';
            $("#ddlDistance").append(option);
          }
        }
      },

      getAnimalOriginList: function () {
        var array = this.searchParams.CaptureAreaList;

        if (this.$.hmaLayout.children.length <= 0) {
          for (var i = 0; i < array.length; i++) {
            var checkbox = '<label style="color:black; font-weight:normal; padding-left:2em; text-indent:-2em;"><input type="checkbox" name="hma" style="margin-left:10px" id="' + array[i] + '" value="' + array[i] + '"/> ' + array[i] + '</label><br/>';
            $("#hmaLayout").append(checkbox);
          }
        }
      },

      getCurrentLocationList: function () {
        var array = this.searchParams.CurrentFacilityList;

        if (array === undefined || array === null) return;

        if (this.$.currentLocationLayout.children.length <= 0) {
          for (var i = 0; i < array.length; i++) {
            var checkbox = '<label style="color:black; font-weight:normal; padding-left:2em; text-indent:-2em;"><input type="checkbox" name="currentLocation" style="margin-left:10px" id="' + array[i] + '" value="' + array[i] + '"/> ' + array[i] + '</label><br/>';
            $("#currentLocationLayout").append(checkbox);
          }
        }
      },

      getPickupLocationList: function () {
        var list = this.searchParams.PickupLocationList;

        if (list && this.$.pickupLocationLayout.children.length <= 0) {
          for (var i = 0; i < list.length; i++) {
            var checkbox = '<label style="color:black; font-weight:normal; padding-left:2em; text-indent:-2em;"><input type="checkbox" name="pickupLocation" style="margin-left:10px" id="' + list[i] + '" value="' + list[i] + '"/> ' + list[i] + '</label><br/>';
            $("#pickupLocationLayout").append(checkbox);
          }
        }
      },

      getPriceRange: function () {
        var range = this.searchParams.PriceRange;
        if (range != undefined || range != null) {
          var rangeArray = range.split('|');
          this.priceMin = rangeArray[0];
          this.priceMax = rangeArray[1];
        }
      },

      searchForAnimals: function () {
        var model = this;

        var filterJson = model.getAnimalFilterJson();
        model.searchReset = false;
        model.fire('submitAnimalSearch', filterJson);
      },

      hideSaveSearchButton: function (isAuthenticated, hideSaveSearch) {
        return !isAuthenticated || hideSaveSearch;
      },

      startProcessing: function () {
        this.processing = true;
      },

      endProcessing: function () {
        this.processing = false;
      },
    });
  </script>
</dom-module><dom-module id="animal-detail">
  <template>
    <style>
      :host() {
        display: block;
      }

      :host .thumb-video {
        font-size: 120px;
      }

      :host #socialMediaShare {
        display: inline-block;
      }

      :host .loading {
        margin-top: 50px;
        text-align: center;
        width: 100%;
      }

      :host .thumb {
        cursor: pointer;
        margin-bottom: 10px;
        max-width: 100%;
      }

      :host #mapContainer {
        height: 250px;
        width: 325px;
      }

      :host .faciltyName {
        cursor: pointer;
      }

      .bold {
        font-weight: bold;
      }
    </style>
    <div class="loading" hidden$="{{!loading}}" id="loading">
      <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i><br>
      <h4>Loading...</h4>
    </div>
    <div class="col-md-12">
      <div hidden="" id="warningAlert" class="alert alert-warning"></div>
    </div>
    <div class="hidden" id="animalDetailLayout">
      <div class="row">
        <div class="col-md-12">
          <button disabled$="{{!prevEnabled}}" hidden$="{{!fromGallery}}" class="btn blm-btn-secondary" id="previous" on-tap="previous" type="button"><span class="glyphicon glyphicon-chevron-left"></span> Previous</button>
          <button disabled$="{{!nextEnabled}}" hidden$="{{!fromGallery}}" class="btn blm-btn-secondary" id="next" on-tap="next" type="button">Next <span class="glyphicon glyphicon-chevron-right"></span></button>
          <button hidden$="{{hideEdit}}" class="btn blm-btn-secondary" id="edit" on-tap="edit" type="button">Edit</button>
          <user-animal-favorite id="userFavorite" hidden$="{{isAdmin}}"></user-animal-favorite>
          <div class="pull-right">
            <div hidden$="{{noLike}}" id="socialMediaShare"></div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <h4>{{title}}</h4>
        </div>
      </div>
      <div class="row" hidden="{{!listingVoided}}">
        <div class="col-md-12">
          <div class="alert alert-success">
            You have chosen to pass on this animal. The transaction was voided.
          </div>
        </div>
      </div>
      <div hidden="{{!userWon}}">
        <div class="row">
          <div class="col-md-12">
            Congratulations, you are now ready to finalize your selection of this animal at the <a href="/listing/details/{{auctionListingId}}">price of {{currentPrice}}</a>.  If you have any questions please call 1-800-370-3936.
            If you no longer wish to purchase or adopt this animal please click the Pass button, which will void your bid.
          </div>
        </div>
        <div class="row">&nbsp;</div>
        <div class="row">
          <div class="col-md-4">
            <label>Pickup Location</label>
            <select class="form-control" id="pickupLocation">
              <option></option>
            </select>
            <label id="pickupLocation-error" hidden="" class="error" for="pickupLocation">This field is required.</label>
          </div>
        </div>
        <div class="row">&nbsp;</div>
        <div class="row">
          <div class="col-md-12">
            <button class="btn blm-btn-primary" on-tap="pay">Select Payment Options</button>
            <button class="btn blm-btn-primary" on-tap="voidListing" disabled="{{processing}}">Pass</button>
          </div>
        </div>
        <div class="row">&nbsp;</div>
      </div>
      <template if="{{userPaid}}" is="dom-if">
        <div class="row">
          <div class="col-md-12">
            <div class="alert alert-success">
              You have <a href="/animals/{{freezemark}}/payment">paid</a> for this animal.  If you have any questions please call 1-800-370-3936.
            </div>
          </div>
        </div>
      </template>
      <div class="row">
        <div class="col-md-12">
          <div id="marketingDescriptionText"></div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-2" style="padding-bottom:5px">
          <button class="btn blm-btn-secondary" hidden$="{{!isAdmin}}" on-tap="saveDisplayOrder">Save display order</button>
        </div>
      </div>
      <div class="row">
        <div id="mediaCarousel" class="col-md-2" style="height:500px;overflow-y:auto;">
          <template is="dom-repeat" items="{{images}}">
            <template is="dom-if" if="{{item.IsPicture}}">
              <div data-toggle="modal" data-target="#modalImages">
                <img alt="thumbnail" class="thumb" id="{{item.AnimalImageId}}" on-tap="showCarousel" src$="{{item.FilePathThumb}}" data-target="#modalCarousel" data-slide-to$="{{item.picIndex}}">
              </div>
            </template>
            <template is="dom-if" if="{{item.IsPdf}}">
              <div style="margin-bottom:20px">
                <a href="{{item.FilePath}}" target="_blank">
                  <img alt="pdf" class="thumb" id="{{item.AnimalImageId}}" src="../Images/pdf.png" style="height:130px;display:block;" title="{{item.FileName}}">
                  {{item.OriginalFileName}}
                </a>
              </div>
            </template>
            <template is="dom-if" if="{{item.IsVideo}}">
              <div style="margin-bottom:20px">
                <a href="{{item.FilePath}}" on-tap="showVideo" data-file="{{item.FilePath}}" class="icon-block thumb">
                  <i class="fa fa-film thumb-video thumb" id="{{item.AnimalImageId}}"></i>
                  <div>{{item.FileName}}</div>
                </a>
              </div>
            </template>
          </template>
        </div>
        <div class="col-md-10">
          <div id="imageContainer" class="hidden-xs hidden-sm">
            <img id="mainImage" alt="main image" src$="{{mainImagePath}}" style="height:500px;max-width:100%">
          </div>
          <div id="videoContainer"></div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <h4>Details</h4>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <template is="dom-if" if="{{fixedPriceListing}}">
            <div class="form-group">
              <label>Price:</label> {{startingPrice}}
            </div>
          </template>
          <template is="dom-if" if="{{auctionListing}}">
            <div class="form-group">
              <label>Current Bid:</label> {{currentPrice}}
            </div>
            <div class="form-group">
              <label>Starting Bid:</label> {{startingPrice}}
            </div>
            <div class="form-group">
              <label>Number of Bids:</label> {{bidCount}}
            </div>
          </template>
          <template is="dom-if" if="{{hasListing}}">
            <div hidden="{{!showEndTimer}}" class="form-group">
              <label>Remaining Time:</label> <span class="timer"></span>
            </div>
            <div hidden="{{!showStartTimer}}" class="form-group">
              <label>Start Time:</label> <span class="timer"></span>
            </div>
          </template>
          <div class="form-group">
            <label>Listing Type:</label> {{listingTypeDescription}}
          </div>
          <div class="form-group">
            <label>Height:</label>&nbsp;{{height}}
          </div>
          <div class="form-group">
            <label>Height Date:</label>&nbsp;{{heightDate}}
          </div>
          <div class="form-group">
            <label>Necktag #:</label>&nbsp;{{necktag}}
          </div>
          <div class="form-group">
            <label>Freezemark:</label>&nbsp;{{freezemark}}
          </div>
          <template is="dom-if" if="{{captured}}">
            <div class="form-group">
              <label>Capture Area:</label>&nbsp;{{captureArea}}
            </div>
            <div class="form-group">
              <label>Capture Date:</label>&nbsp;{{captureDate}}
            </div>
          </template>
          <template is="dom-if" if="{{!captured}}">
            <div class="form-group">
              <label>Birth Location:</label>&nbsp;{{birthLocation}}
            </div>
            <div class="form-group">
              <label>Birth Date:</label>&nbsp;{{birthDate}}
            </div>
            <template is="dom-if" if="{{herdOrigin}}">
              <div class="form-group">
                <label>Herd Origin:</label>&nbsp;{{herdOrigin}}
              </div>
            </template>
          </template>
          <div class="form-group">
            <label>Training:</label>&nbsp;{{training}}
          </div>
          <div class="form-group">
            <label>Disposition:</label> &nbsp;{{disposition}}
          </div>

          <div hidden$="{{!isAdmin}}">
            <div class="form-group">
              <label>Coggins:</label>&nbsp;{{coggins}}
            </div>
            <div class="form-group">
              <label>Vaccinations:</label>
              <template is="dom-repeat" items="{{vaccinations}}">
                <p>{{item.Date}}&nbsp;&nbsp;{{item.Name}}</p>
              </template>
            </div>
            <div class="form-group">
              <label>Treatments:</label>
              <template is="dom-repeat" items="{{treatments}}">
                <p>{{item.Date}}&nbsp;&nbsp;{{item.Name}}</p>
              </template>
            </div>
            <div class="form-group">
              <label>Strike Count:</label>&nbsp;{{strikeCount}}
            </div>
          </div>
          <div class="form-group">
            <label>Views:</label>
            <span>{{views}}</span>
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-group" hidden="{{!showCurrentLocation(published, isAdmin)}}">
            <label>Current Location:</label>
            <br>
            <a href="https://www.blm.gov/programs/wild-horse-and-burro/adoption-and-sales/adoption-centers" target="_blank">{{currentLocation}}</a>, {{currentLocationCity}} {{currentLocationState}}
          </div>
          <div>
            <div class="form-group">
              <label>Pickup Location Options:</label><br>
              <template is="dom-repeat" items="{{pickupLocations}}">
                <a class="faciltyName" on-tap="_mapSetView">{{item.FacilityName}}</a>
                <a href$="https://maps.google.com/maps?ll={{item.MapY}},{{item.MapX}}&amp;q={{item.MapY}},{{item.MapX}}&amp;hl=en&amp;t=h&amp;z=18" target="_blank"><i class="fa fa-location-arrow" aria-hidden="true"></i></a>
                <br>
              </template>
            </div>
            <div id="mapContainer"></div>
            <br>
          </div>
          <div hidden$="{{!pocName}}">
            <div class="form-group">
              <label>POC Name:</label> {{pocName}}
            </div>
          </div>
          <div hidden$="{{!pocPhone}}">
            <div class="form-group">
              <label>POC Phone:</label> {{pocPhone}}
            </div>
          </div>
          <div hidden$="{{!isAdmin}}">
            <div class="form-group">
              <label>Current City:</label> {{currentCity}}
            </div>
            <div class="form-group">
              <label>Current State:</label> {{currentState}}
            </div>
            <div class="form-group">
              <label>Adoption Date:</label> {{adoptionDate}}
            </div>
            <div class="form-group">
              <label>Sales Date:</label> {{salesDate}}
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div hidden="" id="alertText" class="alert alert-success"></div>
        </div>
      </div>
      <div class="form-group">
        <template is="dom-if" if="{{isAuthPublicUser}}">
          <template is="dom-if" if="{{!userApproved}}">
            <h5>Please select an option below to submit an application. Only approved applicants can submit bids or ask animal questions.</h5>
          </template>
        </template>
        <template is="dom-if" if="{{!isAuthPublicUser}}">
          <template is="dom-if" if="{{!isAdmin}}">
            <h5>Please <a href="/account/login?returnUrl=/animals/{{freezemark}}">log in</a> and submit an application if you are interested in adopting or purchasing. Only approved applicants can submit bids or ask animal questions.</h5>
          </template>
        </template>
        <template is="dom-if" if="{{isActiveListing}}">
          <template is="dom-if" if="{{isAuthPublicUser}}">
            <template is="dom-if" if="{{!adoptionLimitMet}}">
              <template is="dom-if" if="{{userCanAdopt}}">
                <button id="btnAdopt" class="btn blm-btn-primary" on-tap="adoptAnimal">{{adoptListingText}}</button>
              </template>
            </template>
            <template is="dom-if" if="{{!purchaseLimitMet}}">
              <template is="dom-if" if="{{userCanPurchase}}">
                <button id="btnPurchase" class="btn blm-btn-primary" on-tap="purchaseAnimal">{{purchaseListingText}}</button>
              </template>
            </template>
            <template is="dom-if" if="{{userHasHighBid}}">
              <button id="btnRemoveBid" disabled$="{{requestedBidRemoval}}" class="btn blm-btn-primary" on-tap="removeBid">Request High Bid Removal</button>
            </template>
            <template is="dom-if" if="{{!adoptionLimitMet}}">
              <template is="dom-if" if="{{!purchaseLimitMet}}">
                <template is="dom-if" if="{{userCanAdopt}}">
                  <template is="dom-if" if="{{userCanPurchase}}">
                    <div class="row">&nbsp;</div>
                    <div class="row">
                      <div class="col-md-12">
                        Once you make a selection for Adopting or Purchasing and you bid on the animal, you will be locked into this option unless you call the BLM at 1-800-370-3936<br>
                        <span on-tap="openDifferencePopup" class="link-popup">What's the difference?</span>
                      </div>
                    </div>
                  </template>
                </template>
              </template>
            </template>
            <template is="dom-if" if="{{limitMet}}">
              <div class="row">&nbsp;</div>
              <div class="alert alert-warning">
                <h4 class="alert-heading">Important Message</h4>
                <div>{{adoptionLimitMessage}}{{purchaseLimitMessage}}</div><br>
                <div>For additional information please contact <a href="mailto:blm_es_inet_adoption@blm.gov">blm_es_inet_adoption@blm.gov</a></div>
              </div>
            </template>
          </template>
        </template>
        <template is="dom-if" if="{{isUnlisted}}">
          <template is="dom-if" if="{{isAuthPublicUser}}">
            <template is="dom-if" if="{{showAnimalApply}}">
              <button class="btn blm-btn-primary" on-tap="applyForAnimal">{{animalApplyText}}</button>
            </template>
          </template>
        </template>
      </div>

      <div class="row">
        <div class="col-md-12">
          <button disabled$="{{!prevEnabled}}" hidden$="{{!fromGallery}}" class="btn blm-btn-secondary" id="bottomPrevious" on-tap="previous" type="button"><span class="glyphicon glyphicon-chevron-left"></span> Previous</button>
          <button disabled$="{{!nextEnabled}}" hidden$="{{!fromGallery}}" class="btn blm-btn-secondary" id="bottomNext" on-tap="next" type="button">Next <span class="glyphicon glyphicon-chevron-right"></span></button>
          <button hidden$="{{hideEdit}}" class="btn blm-btn-secondary" id="edit" on-tap="edit" type="button">Edit</button>
        </div>
      </div>
      <h4>Questions &amp; Answers</h4>
      <template is="dom-if" if="{{userApproved}}">
        <template is="dom-if" if="{{published}}">
          <button id="btnAskQuestion" class="btn blm-btn-primary" on-tap="showQuestionDialog">Ask Question</button>
        </template>
      </template>
      <template is="dom-if" if="{{!hasPublicQuestions}}">
        <h5>No questions have been posted</h5>
      </template>
      <template is="dom-repeat" items="{{publicQuestions}}">
        <p>
          Q:
          <template class="bold" is="dom-if" if="{{isAdmin}}">
            {{item.UserId}} -
          </template>
          {{item.Question}}
          <br>
          <span class="bold">A: </span>{{item.Answer}}
        </p>
      </template>
      <div class="row" hidden$="{{!isAdmin}}">
        <div class="col-md-2">
          <a href="javascript:void(0)" on-tap="viewQuestions">View All Questions</a>
        </div>
      </div>
      <template is="dom-if" if="{{isAdmin}}">
        <h4>Individual Responses</h4>
        <template is="dom-if" if="{{!hasPrivateQuestions}}">
          <h5>No individual questions have been answered</h5>
        </template>
        <template is="dom-repeat" items="{{privateQuestions}}">
          <p>
            <span class="bold">Q: {{item.UserId}} - </span>{{item.Question}}<br>
            <span class="bold">A: </span>{{item.Answer}}
          </p>
        </template>
      </template>
    </div>

    <div class="modal fade" id="questionDialog" role="dialog" tabindex="-1">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="opacity:1"><span aria-hidden="true" style="color:white">×</span></button>
            <h4 class="modal-title">Enter Your Question</h4>
          </div>
          <div class="modal-body">
            <div class="form-group">
              <textarea id="textQuestion" class="form-control" rows="5" value="{{question::input}}"></textarea>
            </div>
            <div id="recaptcha" class="g-recaptcha" data-sitekey$="{{recaptchaKey}}" data-callback="enablePostButton"></div>
            <div div="" class="modal-footer">
              <button class="btn blm-btn-secondary" data-dismiss="modal">Cancel</button>
              <button disabled="" id="btnPostQuestion" class="btn blm-btn-primary" on-tap="sendQuestion">
                <span hidden$="{{!processing}}"><i class="fa fa-spinner fa-pulse fa-fw"></i></span> Send
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="confirmationPopup" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h4 id="confirmationHeader" class="modal-title"></h4>
          </div>
          <div id="confirmationBody" class="modal-body">
          </div>
          <div class="modal-footer">
            <button type="button" class="btn blm-btn-primary" data-dismiss="modal">OK</button>
          </div>
        </div>
      </div>
    </div>
    <div id="adoptionOrPurchasePopup" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h4 id="confirmationHeader" class="modal-title">Adopt or Purchase</h4>
          </div>
          <div class="modal-body">
            <p>Purchase: Provides immediate ownership of the animal. The minimum purchase fee starts at $125 for untrained animals.</p>
            <p>Adoption: Adoption maintains federal ownership of the animal until BLM grants title, one year after the adoption date. The minimum adoption fee starts at $125 for untrained animals.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn blm-btn-primary" data-dismiss="modal">OK</button>
          </div>
        </div>
      </div>
    </div>
    <div class="modal fade" id="modalImages" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" class="closeSpan">×</span></button>
          </div>
          <div class="modal-body">
            <div id="modalCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
              <ol class="carousel-indicators"></ol>
              <div class="carousel-inner"></div>
              <a class="left carousel-control" href="#modalCarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="right carousel-control" href="#modalCarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script>
    'use strict';
    Polymer({
      is: 'animal-detail',
      properties: {
        isAdmin: {
          type: Boolean,
          value: false
        },
        captureArea: {
          type: String
        },
        captureDate: {
          type: String
        },
        coggins: {
          type: String
        },
        currentHighBid: {
          type: String
        },
        currentLocation: {
          type: String
        },
        currentLocationAddress: {
          type: String
        },
        currentLocationCity: {
          type: String
        },
        currentLocationState: {
          type: String
        },
        currentLocationZip: {
          type: String
        },
        data: {
          type: String
        },
        disposition: {
          type: String,
          value: ""
        },
        facilityName: {
          type: String
        },
        freezemark: {
          type: String
        },
        hideEdit: {
          type: Boolean,
          value: false
        },
        isAuthPublicUser: {
          type: Boolean,
          value: false
        },
        necktag: {
          type: String
        },
        pocName: {
          type: String
        },
        pocPhone: {
          type: String
        },
        purchasePrice: {
          type: String
        },
        strikeCount: {
          type: Number
        },
        thumbnail: {
          type: String
        },
        training: {
          type: String
        },
        fromGallery: {
          type: Boolean,
          value: false
        },
        noLike: {
          type: Boolean,
          value: false
        },
        showDispositionReasons: {
          type: Boolean,
          value: false
        },
        recaptchaKey: {
          type: String
        },
        hasPublicQuestions: {
          type: Boolean,
          value: false
        },
        hasPrivateQuestions: {
          type: Boolean,
          value: false
        },
        id: {
          type: Number
        },
        images: {
          type: Array,
          value: function () { return new Array(); }
        },
        animal: {
          type: Object
        },
        processing: {
          type: Boolean,
          value: false
        },
        marketingDescription: {
          type: String
        },
        showStartTimer: {
          type: Boolean,
          value: false
        },
        showEndTimer: {
          type: Boolean,
          value: false
        },
      },
      attached: function () {
        var model = this;
        model.processing = false;
        model.prevEnabled = false;
        model.nextEnabled = false;

        this.async(function () {
          this.loading = true;
          this.getData();
        });

        var orderList = sessionStorage.getItem('orderList');
        if (orderList) {
          model.orderList = orderList;
          model.setNavButtons();
        }
        var cookieVal = getCookieVal('requestBidRemove');
        if (cookieVal) {
          model.requestedBidRemoval = true;
        }
      },

      previous: function () {
        var model = this;
        var items = model.orderList.split(',');
        var pos = items.indexOf(model.freezemark);
        var prevFreezemark = items[pos - 1];
        if (prevFreezemark) {
          window.location = '/animals/' + prevFreezemark;
        }
      },

      next: function () {
        var model = this;
        var items = model.orderList.split(',');
        var pos = items.indexOf(model.freezemark);
        var nextFreezemark = items[pos + 1];
        if (nextFreezemark) {
          window.location = '/animals/' + nextFreezemark;
        }
      },

      edit: function () {
        var model = this;
        window.location = '/admin/animals/' + model.freezemark;
      },

      getData: function (reload) {
        var model = this;
        var url = '/ctxapp/animals/' + this.freezemark;

        if (reload) {
          url += '?reload=true';
        }
        $.get(url)
          .done(function (data) {
            if (data.Redirect) {
              window.location.replace(data.Redirect);
            }

            model.id = data.AnimalMetadataId;
            model.auctionListingId = data.AuctionListingId;
            model.title = data.Title;
            model.captured = data.Captured;
            if (model.captured) {
              model.captureArea = data.CaptureArea;
              model.captureDate = data.CaptureDate;
            } else {
              model.birthLocation = data.BirthLocation;
              model.birthDate = data.BirthDate;
              model.herdOrigin = data.HerdOrigin;
            }

            model.currentLocation = data.CurrentLocation;
            model.currentLocationFacilityId = data.CurrentLocationFacilityId;
            model.currentLocationAddress = data.CurrentLocationAddress;
            model.currentLocationCity = data.CurrentLocationCity;
            model.currentLocationState = data.CurrentLocationState;
            model.currentLocationZip = data.CurrentLocationZip;
            model.necktag = data.Necktag;
            model.thumbnail = data.Thumbnail;
            model.coggins = data.Coggins;
            model.strikeCount = data.StrikeCount;
            model.disposition = data.Disposition;
            model.vaccinations = data.Vaccinations;
            model.treatments = data.Treatments;
            model.adoptionDate = data.AdoptionDate;
            model.salesDate = data.SalesDate;
            model.pocName = data.PocName;
            model.pocPhone = data.PocPhone;
            model.currentCity = data.CurrentCity;
            model.currentState = data.CurrentState;
            model.height = data.Height;
            model.heightDate = data.HeightDate;
            model.training = data.Training;
            model.privateOfferTo = data.PrivateOfferTo;

            if (data.PublicQuestions && data.PublicQuestions.length > 0) {
              model.hasPublicQuestions = true;
              //decode untrusted strings from public
              data.PublicQuestions.forEach(qa => qa.Question = decodeString(qa.Question));
              model.publicQuestions = data.PublicQuestions;
            }
            if (data.PrivateQuestions && data.PrivateQuestions.length > 0) {
              model.hasPrivateQuestions = true;
              data.PrivateQuestions.forEach(qa => qa.Question = decodeString(qa.Question));
              model.privateQuestions = data.PrivateQuestions;
            }

            model.animalPickupLocationId = data.AnimalPickupLocationId;
            model.pickupLocations = data.PickupLocations;
            model.userWon = data.UserWon;
            model.userPaid = data.UserPaid;
            model.userName = data.User;
            model.isAdmin = data.IsAdmin;
            model.hideEdit = !data.IsAdmin || !model.fromGallery;

            if (!model.isAdmin && model.userName) {
              model.isAuthPublicUser = true;
            }

            //marketing description text may contain html
            $("#marketingDescriptionText").html(data.MarketingDescription);
            model.marketingDescription = data.MarketingDescription;
            model.views = data.Views;

            //For tracking view count
            if (!model.isAdmin) {
              if (localStorage.getItem(model.freezemark) === null) {
                $.post('ctxapp/animals/' + model.freezemark + '/views')
                  .done(function (response) {
                    localStorage.setItem(model.freezemark, data.Views);
                    model.views = model.views + 1;
                  })
              }
            } else {
              //enable image reordering
              $("#mediaCarousel").sortable({
                opacity: 0.7,
                tolerance: 'pointer',
              });
            }

            model.getImages();

            model.$.userFavorite.isAuthPublicUser = model.isAuthPublicUser;
            model.$.userFavorite.load(model.freezemark);
            model.fire("loaded", model);
            model.loading = false;
            $("#animalDetailLayout").removeClass("hidden");

            $(model.$.socialMediaShare).jsSocials({
              showLabel: false,
              showCount: false,
              shareIn: "popup",
              shares: ["facebook", "twitter", "pinterest"]
            });

            model.userApproved = data.UserAdoptionApproved || data.UserPurchaseApproved;
            model.userPurchaseApproved = data.UserPurchaseApproved;
            model.userAdoptionApproved = data.UserAdoptionApproved;
            model.published = data.Published;
            if (model.published) {
              if (!model.userAdoptionApproved && !model.userPurchaseApproved && model.disposition == 'Eligible for Sale') {
                model.animalApplyText = 'Apply to Adopt or Purchase';
                model.showAnimalApply = true;
              } else if (!model.userAdoptionApproved && model.disposition == 'Eligible for Adoption') {
                model.animalApplyText = 'Apply to Adopt';
                model.showAnimalApply = true;
              }
            }

            model.adoptionLimitMet = data.AdoptionLimitMet;
            model.purchaseLimitMet = data.PurchaseLimitMet;
            model.purchaseLimitMessage = data.PurchaseLimitMessage;
            model.adoptionLimitMessage = data.AdoptionLimitMessage;

            if (model.adoptionLimitMet || model.purchaseLimitMet) {
              model.limitMet = true;
            }

            model.currentPrice = data.CurrentPrice;
            model.startingPrice = data.StartingPrice;
            model.bidCount = data.BidCount;
            model.listingTypeDescription = data.ListingTypeDescription;
            model.auctionListing = data.ListingType === "Auction";
            model.fixedPriceListing = data.ListingType === "FixedPrice";
            model.hasListing = model.auctionListing || model.fixedPriceListing;

            if (model.auctionListing) {
              model.adoptListingText = "Bid to Adopt";
              model.purchaseListingText = "Bid to Purchase";
            } else if (model.fixedPriceListing) {
              model.adoptListingText = "Adopt Now";
              model.purchaseListingText = "Purchase Now";
            }

            model.isActiveListing = data.ListingTypeDescription.indexOf('Active') >= 0 || data.ListingTypeDescription.indexOf('Pending') >= 0;
            model.isUnlisted = data.ListingTypeDescription === 'Unlisted';
            model.userCanPurchase = data.UserCanPurchase;
            model.userCanAdopt = data.UserCanAdopt;
            model.userHasHighBid = data.UserHasHighBid;
            model.listingVoided = data.ListingVoided;
            model.hasPayment = data.HasPayment;   
            model.isBulkOverride = data.IsBulkOverride;

            if (model.userWon) {
              model.populatePickupLocation();
            }

            //set count down timer
            if (model.hasListing) {
              var startUtc = moment.utc(data.StartDate);
              var endUtc = moment.utc(data.EndDate);
              var nowUtc = moment.utc();

              if (moment(startUtc).isAfter(nowUtc)) {
                //if future start date, display start timer
                model.showStartTimer = true;
                var countDownDate = Date.parse(data.StartDate);
                startTimer(countDownDate);
              } else if (moment(endUtc).isAfter(nowUtc)) {
                //if future end date, display end timer
                model.showEndTimer = true;
                var countDownDate = Date.parse(data.EndDate);
                startTimer(countDownDate);
              }
            }

            model._loadMap(model);
          })
          .fail(function (response) {
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              $('#warningAlert').removeAttr('hidden').text(errMsg);
              model.fire("loaded", model);
              model.loading = false;
            }
          });
      },

      showCarousel: function (e) {
        $(this.$.imageContainer).show();
        if ($(this).find("#whbVideo").get(0)) {
          $(this).find("#whbVideo").get(0).stopVideo();
        }
        $(this.$.videoContainer).hide();

        //display carousel
        let carouselPics = this.images.filter(i => i.IsPicture);

        let markup = '';
        for (let index = 0; index < carouselPics.length; index++) {
          markup += '<li data-target="#modalCarousel" data-slide-to="' + index + '"></li>';
        }
        $('#modalCarousel .carousel-indicators').html(markup);
        markup = '';
        for (let index = 0; index < carouselPics.length; index++) {
          markup += '<div class="item">';
          markup += '<img alt="" class="img-responsive center-block full-screen" src="' + carouselPics[index].FilePath + '">';
          markup += '</div>';
        }
        $('#modalCarousel .carousel-inner').html(markup);
        $('#modalCarousel .item').first().addClass('active');
        $('#modalCarousel .carousel-indicators > li').first().addClass('active');

        // set click to go full screen for each carousel image
        let allFullScreen = document.getElementsByClassName("full-screen");
        for (let i of allFullScreen) {
          i.onclick = () => {
            // exit full screen
            if (document.fullscreenElement != null || document.webkitFullscreenElement != null) {
              if (document.exitFullscreen) {
                document.exitFullscreen();
              } else {
                document.webkitCancelFullScreen();
              }
            }
            // enter full screen
            else {
              if (i.requestFullscreen) {
                i.requestFullscreen();
              } else {
                i.webkitRequestFullScreen();
              }
            }
          };
        }
      },

      showVideo: function (obj) {
        var model = this;
        var src;
        if (obj.target) {
          obj.preventDefault();
          src = obj.model.item.FilePath;
        }
        else {
          src = obj.FilePath;
        }

        if ($(model).find("#whbVideo").get(0)) {
          $(model).find("#whbVideo").get(0).remove();
        }
        $(model.$.imageContainer).hide();
        $(model.$.videoContainer).show();
        var whbVideo = document.createElement('video-player');
        whbVideo.setAttribute("id", "whbVideo");
        whbVideo.setAttribute("video-source", src);
        $(model.$.videoContainer).append(whbVideo);

      },

      saveDisplayOrder: function () {
        var model = this;
        var imageData = [];
        var t = $(".thumb");

        for (var i = 0; i < t.length; i++) {
          var image = { "AnimalImageId": t[i].id, "URL": t[i].src, "FileName": "", "DisplayOrder": i };
          imageData.push(image);
        }

        $.ajax({
          url: '/ctxapp/animals/media/display-order',
          data: JSON.stringify(imageData),
          dataType: 'json',
          contentType: "application/json",
          type: "POST",
          success: function (data) {
            model.getImages();
          },
          error: function (response) {
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg);
            }
          }
        });
      },

      getImages: function () {
        var model = this;

        //Clear out old images - polymer way
        if (model.images && model.images.length > 0) {
          var imageCount = model.images.length;
          for (var i = 0; i < imageCount; i++) {
            model.pop("images");
          }
        }

        $.get('/ctxapp/animals/' + model.id + '/media').done(function (media) {
          model.mainThumbPath = "/Images/HorseSilhouette.jpg";
          model.mainImagePath = "/Images/HorseSilhouette.jpg";
          var picCounter = 0;
          for (var i = 0; i < media.data.length; i++) {
            if (media.data[i].IsPicture) {
              media.data[i].picIndex = picCounter++;
            }
            if (i == 0) {
              if (media.data[i].IsPdf) {
                model.mainThumbPath = "/Images/pdf.png";
              }
              else if (media.data[i].IsVideo) {
                model.showVideo(media.data[i]);
                model.mainThumbPath = "";
              }
              else {
                model.mainImagePath = media.data[i].FilePath;
                model.mainThumbPath = media.data[i].FilePathThumb;
              }
            }
            model.push("images", media.data[i]);
          }
        });
      },

      openAuctionListing: function (e) {
        if (e) { e.preventDefault(); }
        window.location = '/listing/details/' + this.auctionListingId;
      },

      showQuestionDialog: function (e) {
        this.question = null;
        $(this.$.questionDialog).modal("show");
      },

      sendQuestion: function (e) {
        var model = this;
        model.processing = true;
        $("#btnPostQuestion").attr("disabled", "disabled");

        var questionData = {
          question: model.question,
          freezemark: model.freezemark,
        };

        $.post('/ctxapp/animals/questions/ask', questionData).done(function () {
          model.processing = false;
          $("#btnPostQuestion").removeAttr("disabled");
          $(model.$.questionDialog).modal("hide");
          $('#confirmationHeader').text('Question Submitted');
          $('#confirmationBody').text('We have received your question. Once your question is answered, it will be viewable here and in your profile page.');
          $(model.$.confirmationPopup).modal("show");
        }).fail(function (response) {
          var errMsg = getXhrErrorMessage(response);
          if (errMsg) {
            model.processing = false;
            $("#btnPostQuestion").removeAttr("disabled");
            alert(errMsg);
          }
        });
      },

      populatePickupLocation: function () {
        var select = $("#pickupLocation");
        for (var i = 0; i < this.pickupLocations.length; i++) {
          if (this.animalPickupLocationId === this.pickupLocations[i].AnimalPickupLocationId) {
            select.append('<option selected value="' + this.pickupLocations[i].AnimalPickupLocationId + '">' + this.pickupLocations[i].FacilityName) + '</option>';
          }
          else {
            select.append('<option value="' + this.pickupLocations[i].AnimalPickupLocationId + '">' + this.pickupLocations[i].FacilityName) + '</option>';
          }
        }
      },

      pay: function (e) {
        var model = this;
        var hasError = false;
        if (model.$.pickupLocation.value == '') {
          $("#pickupLocation-error").removeAttr("hidden");
          hasError = true;
        }
        else {
          $("#pickupLocation-error").attr("hidden", "hidden")
        }

        model.animalPickupLocationId = model.$.pickupLocation.value;

        var location = model.pickupLocations.find(p => p.AnimalPickupLocationId == model.animalPickupLocationId);
        if (location) {
          model.pickupLocationId = location.FacilityId;
        }

        if (hasError) {
          return;
        }

        model.processing = true;

        //save pre payment info
        var animal = {
          AnimalPickupLocationId: model.animalPickupLocationId,
          FreezeMark: model.freezemark,
          PickupLocationId: model.pickupLocationId,
        };

        $.post('/ctxapp/animals/setprepaymentinfo', animal)
          .done(function () {
            window.location = '/animals/' + model.freezemark + '/payment';
          })
          .fail(function (response) {
            model.processing = false;
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg);
            }
          });
      },

      voidListing: function () {
        var model = this;
        if (confirm('Please confirm you wish to pass on this animal.  It cannot be reversed.')) {
          model.processing = true;
          $.post('ctxapp/animals/' + model.freezemark + '/voidlisting')
            .done(function () {
              model.processing = false;
              model.listingVoided = true;
              model.userWon = false;
            })
            .fail(function (response) {
              model.processing = false;
              var errMsg = getXhrErrorMessage(response);
              if (errMsg) {
                alert(errMsg);
              }
            });
        }
      },

      _loadMap: function (e) {
        console.log("Page Loaded.")
        setTimeout(function () {
          var model = e;
          if (!model.map) {
            model.map = L.map("mapContainer");
            model.map.setView([39.8, -98.5], 3);
            L.esri.Vector.vectorTileLayer("d38e980fc20141a49231b9fcea1c9bc0").addTo(model.map);
            model.mapMarkers = [];
          }


          for (var i = 0; i < model.mapMarkers.length; i++) {
            model.map.removeLayer(model.mapMarkers[i]);
          }
          model.mapMarkers = [];

          for (var i = 0; i < model.pickupLocations.length; i++) {
            var location = model.pickupLocations[i];
            if (location.GisMeta != null) {
              model.pickupLocations[i].marker = new L.marker([location.MapY, location.MapX],
                {
                  icon: L.icon({
                    iconUrl: '/Images/bg-star-white_20.png',
                    iconSize: [20, 20], // size of the icon
                    iconAnchor: [10, 10], // point of the icon which will correspond to marker's location
                    popupAnchor: [0, -10] // point from which the popup should open relative to the iconAnchor
                  })
                })
                .bindPopup(
                  location.GisMeta.attributes.WHB_FAC_NM +
                  '<a href="https://maps.google.com/maps?ll=' + location.MapY + ',' + location.MapX + '&q=' + location.MapY + ',' + location.MapX + '&hl=en&t=h&z=18" target="_blank" ><i class="fa fa-location-arrow" aria-hidden="true"></i></a><br />' +
                  (typeof location.GisMeta.attributes.WHB_FAC_MNGR_POC !== "undefined" && location.GisMeta.attributes.WHB_FAC_MNGR_POC !== "" ? location.GisMeta.attributes.WHB_FAC_MNGR_POC + '<br />' : "") +
                  (typeof location.GisMeta.attributes.WHB_FAC_PHNE_NR !== "undefined" && location.GisMeta.attributes.WHB_FAC_PHNE_NR !== "" ? location.GisMeta.attributes.WHB_FAC_PHNE_NR + '<br />' : "") +
                  (typeof location.GisMeta.attributes.STR_ADDR !== "undefined" && location.GisMeta.attributes.STR_ADDR !== "" ? location.GisMeta.attributes.STR_ADDR + '<br />' : "") +
                  (typeof location.GisMeta.attributes.CITY !== "undefined" && location.GisMeta.attributes.CITY !== "" ? location.GisMeta.attributes.CITY + '<br />' : "") +
                  (typeof location.GisMeta.attributes.ST_PRVNCE !== "undefined" && location.GisMeta.attributes.ST_PRVNCE !== "" ? location.GisMeta.attributes.ST_PRVNCE + ' ' : "") +
                  (typeof location.GisMeta.attributes.ZIP_PSTL_CD !== "undefined" && location.GisMeta.attributes.ZIP_PSTL_CD !== "" ? location.GisMeta.attributes.ZIP_PSTL_CD + '<br />' : "")
                  /// navigate link
                )
                .addTo(model.map);
              model.mapMarkers.push(model.pickupLocations[i].marker);
            }
          }
        }, 2000);
      },

      _mapSetView: function (e) {
        var model = this;

        var location = e.model.item;
        if (location.GisMeta != null) {
          location.marker.openPopup();
          model.map.setView([location.MapY + .007, location.MapX], 13);
        }
        else {
          alert('The GIS data for the selected location could not be found');
        }
      },

      setNavButtons: function (e) {
        var model = this;
        if (model.orderList && model.orderList.indexOf(model.freezemark) != -1) {
          var items = model.orderList.split(',');
          var pos = items.indexOf(model.freezemark);
          if (pos > 0) {
            model.prevEnabled = true;
          }
          if (pos < items.length - 1) {
            model.nextEnabled = true;
          }
        }
      },

      openDifferencePopup: function () {
        $(this.$.adoptionOrPurchasePopup).modal("show");
      },

      adoptAnimal: function () {
        var model = this;
        if (!model.userAdoptionApproved) {
          if (confirm('In order to bid on this animal you would need to be approved to adopt. Please click OK to complete a new application. For additional information please contact blm_es_inet_adoption@blm.gov')) {
            window.location = '/document/approvedapplication';
          }
        } else {
          $("#btnAdopt").attr("disabled", "disabled");
          $.post('/ctxapp/animals/' + model.freezemark + '/ownershiptype/adopt')
            .done(function () {
              model.openAuctionListing();
            })
            .fail(function (response) {
              var errMsg = getXhrErrorMessage(response);
              if (errMsg) {
                alert(errMsg);
              }
              $("#btnAdopt").removeAttr("disabled");
            });
        }
      },

      purchaseAnimal: function () {
        var model = this;
        if (!model.userPurchaseApproved) {
          if (confirm('In order to bid on this animal you would need to be approved to purchase. Please click OK to complete a new application. For additional information please contact blm_es_inet_adoption@blm.gov')) {
            window.location = '/document/approvedapplication';
          }
        } else {
          $("#btnPurchase").attr("disabled", "disabled");
          $.post('/ctxapp/animals/' + model.freezemark + '/ownershiptype/purchase')
            .done(function () {
              model.openAuctionListing();
            })
            .fail(function (response) {
              var errMsg = getXhrErrorMessage(response);
              if (errMsg) {
                alert(errMsg);
              }
              $("#btnPurchase").removeAttr("disabled");
            });
        }
      },

      removeBid: function () {
        if (confirm('Are you sure want to request removal of your high bid?')) {
          var expireDate = new Date();
          expireDate.setDate(expireDate.getDate() + 7);
          document.cookie = 'requestBidRemove=1;expires=' + expireDate.toUTCString() + ';path=/animals/' + this.freezemark;
          var model = this;
          $.post('/ctxapp/animals/' + this.freezemark + '/request-bid-removal')
            .done(function () {
              model.requestedBidRemoval = true;
              $('#alertText').removeAttr('hidden').text('The Online Corral administrators have received your request to remove your bid, they process those requests in the order they were received during regular business hours. Thank you!');
            })
            .fail(function (response) {
              var errMsg = getXhrErrorMessage(response);
              if (errMsg) {
                alert(errMsg);
              }
            });
        }
      },

      applyForAnimal: function () {
        window.location = '/document/adoptionsale';
      },

      showCurrentLocation: function (published, admin) {
        return published || admin;
      },

      viewQuestions: function () {
        $.get('/ctxapp/animals/questions/' + this.freezemark + '?excludeId=')
          .done(function (questions) {
            if (questions.data.length > 0) {
              window.location = '/admin/animalquestion/' + questions.data[0].AnimalQuestionId;
            } else {
              alert('There are no questions for this animal.');
            }
          })
          .fail(function (response) {
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg);
            }
          });
      },
    })

    function enablePostButton() {
      $("#btnPostQuestion").removeAttr("disabled");
    }
  </script>
</dom-module><dom-module id="adoption-application">
    <template>
        <style>
            :host() {
                display: block;
            }

            ul {
                list-style: none;
            }

            .header {
                border-bottom-style: double;
            }

            .headerBorderRight {
                border-right: solid 1px black;
            }

            .headerSmall {
                font-size: 10px;
            }

            .error {
                color: red;
            }

            .rowTopMargin {
                margin-top: 10px;
            }

            .questionsRight {
                margin-right: 10px;
            }

            :host .closeBtn {
                opacity: 1
            }

            :host .closeSpan {
                color: white
            }

            .span-link {
                color: #337ab7;
                cursor: pointer;
            }

            input, textarea, select {
                border: 1px solid black;
            }

            .col-tiny {
                width: 0.1%;
                padding-right: 5px;
            }

            .page-break {
                page-break-before: always;
            }

            input[type='radio'] {
                transform: scale(1.2);
            }

            .icons {
                color: black;
                text-decoration: none;
                cursor: pointer;
                font-size: 15px;
            }
        </style>
        <div class="row hidden-print">
            <div class="pull-right">
                <span class="icons" on-tap="print"><span class="glyphicon glyphicon-print"></span> Print</span>&nbsp;
                <span hidden$="{{!showManageAttachments(isAdmin, isSubmitted)}}" class="icons" on-tap="manageAttachments"><span class="glyphicon glyphicon-paperclip"></span> Attachments</span>
                <span hidden$="{{!showReviewAttachments(isAdmin, isSubmitted)}}" class="icons" on-tap="reviewAttachments"><span class="glyphicon glyphicon-paperclip"></span> Attachments</span>&nbsp;
                <span hidden$="{{!isAdmin}}" class="icons" on-tap="showComments"><span class="glyphicon glyphicon-comment"></span> Comments {{unreadCommentCount}}</span>
                <span hidden$="{{isAdmin}}" class="icons" on-tap="showComments"><span class="glyphicon glyphicon-comment"></span> Comments</span>
            </div>
        </div>
        <div class="row" hidden$="{{!isAdmin}}" id="summary">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-3 control-label" for="adoptedHorses">Number of Adopted Horses</label>
                            <div class="col-sm-2">
                                <input class="form-control" disabled="" id="adoptedHorses" type="text" value="{{numberOfAdoptedHorses::input}}">
                            </div>
                            <label class="col-sm-3 control-label" for="titledHorses">Number of Titled Horses</label>
                            <div class="col-sm-2">
                                <input class="form-control" disabled="" id="titledHorses" type="text" value="{{numberOfTitledHorses::input}}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label" for="adoptedBurros">Number of Adopted Burros</label>
                            <div class="col-sm-2">
                                <input class="form-control" disabled="" id="adoptedBurros" type="text" value="{{numberOfAdoptedBurros::input}}">
                            </div>
                            <label class="col-sm-3 control-label" for="titledBurros">Number of Titled Burros</label>
                            <div class="col-sm-2">
                                <input class="form-control" disabled="" id="titledBurros" type="text" value="{{numberOfTitledBurros::input}}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label" for="animalsPurchased">Number of Animals Purchased</label>
                            <div class="col-sm-2">
                                <input class="form-control" disabled="" id="animalsPurchased" type="text" value="{{numberOfAnimalsPurchased::input}}">
                            </div>
                            <label class="col-sm-3 control-label" for="deferredPickups">Number of Deferred Pickup Animals</label>
                            <div class="col-sm-2">
                                <input class="form-control" disabled="" id="deferredPickups" type="text" value="{{numberOfDeferredPickups::input}}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label" for="eligibilityStatus">Eligibility Status</label>
                            <div class="col-sm-2">
                                <input class="form-control" disabled="" id="eligibilityStatus" type="text" value="{{eligibilityStatus::input}}">
                            </div>
                            <label class="col-sm-3 control-label" for="aipEligibilityStatus">AIP Eligibility Status</label>
                            <div class="col-sm-2">
                                <input class="form-control" disabled="" id="aipEligibilityStatus" type="text" value="{{aipEligibilityStatus::input}}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label" for="untitledAnimalCount">
                                Untitled Animals at Facility
                                <template is="dom-if" if="{{showUntitledAnimalWarning}}">
                                    <div style="color:red"> (Facility Inspection Required)</div>
                                </template>
                            </label>
                            <div class="col-sm-2">
                                <input class="form-control" disabled="" id="untitledAnimalCount" type="text" value="{{untitledAnimalCount::input}}">
                            </div>
                        </div>
                        <template is="dom-if" if="{{!expired}}">
                            <div class="form-group">
                                <label class="col-sm-3"></label>
                                <div class="col-sm-2">
                                    <button class="btn btn-danger" on-tap="editForm" type="button">Edit Form</button>
                                </div>
                            </div>
                        </template>
                    </div>
                    <p class="text-info"><small>Note:  Adoptions or sales must be finalized in PS before numbers will appear.</small></p>
                </div>
            </div>
        </div>
        <div class="row header" id="header">
            <div class="col-xs-10 text-center headerBorderRight">
                <div class="row">
                    <div class="col-xs-2 headerSmall">
                        Form 4710-10
                    </div>
                    <div class="col-xs-7 text-center">
                        UNITED STATES
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-2 headerSmall">
                        (March 2017)
                    </div>
                    <div class="col-xs-7 text-center">
                        DEPARTMENT OF THE INTERIOR
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-7 col-xs-offset-2 text-center">
                        BUREAU OF LAND MANAGEMENT
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-7 col-xs-offset-2 text-center">
                        <p><b>APPLICATION FOR ADOPTION OF WILD HORSE(S) OR BURRO(S)</b></p>
                    </div>
                </div>
            </div>
            <div class="col-xs-2 text-center">
                <span>FORM APPROVED</span>
                <br>
                OMB NO. 1004-0042
                <br>
                <span class="headerSmall">Expires: February 29, 2020</span>
            </div>
        </div>
        <form id="animalAdoptionForm">
            <div id="editFields">
                <div class="row rowTopMargin">
                    <div class="col-xs-6" style="padding-right:0">
                        <label for="txtApplicantsLastName">Applicant's Last Name</label>
                        <input aria-invalid="true" autofocus="" class="form-control" id="txtApplicantsLastName" maxlength="50" minlength="2" required="" style="border-right:none" type="text" value="{{applicantLastName::input}}">
                    </div>
                    <div class="col-xs-4" style="padding-left:0;padding-right:0">
                        <label for="txtFirstName">First Name</label>
                        <input aria-invalid="true" class="form-control" id="txtFirstName" maxlength="50" minlength="2" name="txtFirstName" required="" style="border-right:none" type="text" value="{{applicantFirstName::input}}">
                    </div>
                    <div class="col-xs-2" style="padding-left:0">
                        <label for="txtMiddleInitial">Middle Initial</label>
                        <input class="form-control" id="txtMiddleInitial" maxlength="50" required="" style="text-transform:uppercase" type="text" value="{{applicantMiddleInitial::input}}">
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-6" style="padding-right:0">
                        <label for="txtStreetAddress">Street Address or P.O. Box</label>
                        <small class="hidden-print"><i>(P.O. Box Address requires physical facility address below)</i></small>
                        <input aria-invalid="true" class="form-control" id="txtStreetAddress" maxlength="50" name="txtStreetAddress" required="" style="border-right:none" type="text" value="{{applicantStreetAddress::input}}">
                    </div>
                    <div class="col-xs-3" style="padding-left:0;padding-right:0">
                        <label for="txtCity">City</label>
                        <input aria-invalid="true" class="form-control" id="txtCity" maxlength="30" name="txtCity" required="" style="border-right:none" type="text" value="{{applicantCity::input}}">
                    </div>
                    <div class="col-xs-1" style="padding-left:0;padding-right:0">
                        <label for="ddlState">State</label>
                        <select aria-invalid="true" class="form-control hidden-print" id="ddlState" name="ddlState" required="" style="border-right:none" value="{{applicantState::change}}"></select>
                        <input aria-invalid="true" class="form-control visible-print-block" style="border-right:none" type="text" value="{{applicantState}}">
                    </div>
                    <div class="col-xs-2" style="padding-left:0">
                        <label class="hidden-print" for="txtZipCode">Zip Code</label>
                        <label class="visible-print-block">Zip</label>
                        <input aria-invalid="true" class="form-control" id="txtZipCode" maxlength="5" name="txtZipCode" required="" type="text" value="{{applicantZipCode::input}}">
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-4" style="padding-right:0">
                        <label for="txtDriversLicenseNumber">Driver's License Number</label>
                        <input aria-invalid="true" class="form-control" id="txtDriversLicenseNumber" maxlength="20" name="txtDriversLicenseNumber" required="" style="border-right:none" type="text" value="{{driversLicenseNumber::input}}">
                    </div>
                    <div class="col-xs-1" style="padding-left:0;padding-right:0">
                        <label for="ddlDriversLicenseState">State</label>
                        <select aria-invalid="true" class="form-control hidden-print" id="ddlDriversLicenseState" name="ddlDriversLicenseState" required="" style="border-right:none" value="{{driversLicenseState::change}}"></select>
                        <input aria-invalid="true" class="form-control visible-print-block" style="border-right:none" type="text" value="{{driversLicenseState}}">
                    </div>
                    <div class="col-xs-2" style="padding-left:0;padding-right:0">
                        <label for="txtBirthDate">Birth Date&nbsp;<i>({{dateFormat}})</i></label>
                        <input aria-invalid="true" class="form-control hidden-print" id="txtBirthDate" name="txtBirthDate" required="" style="border-right:none" type="date" value="{{birthDate::input}}">
                        <input aria-invalid="true" class="form-control visible-print-block" style="border-right:none" type="text" value="{{birthDate}}">
                    </div>
                    <div class="col-xs-5" style="padding-left:0">
                        <label class="hidden-print" for="txtTin">Social Security Number or Tax Identification Number</label>
                        <label class="visible-print-block">SSN or TIN</label>
                        <input aria-invalid="true" class="form-control numbers-only format-ssn" id="txtTin" maxlength="11" minlength="11" name="txtTin" required="" type="text" placeholder="000-00-0000" value="{{tin::input}}" title="This field is required and needs to be in the following format: 000-00-0000">
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-4" style="padding-right:0">
                        <label for="txtHomePhone">Home Phone&nbsp;<i>(Include area code)</i></label>
                        <input aria-invalid="true" class="form-control numbers-only format-phone" id="txtHomePhone" minlength="12" maxlength="12" name="txtHomePhone" placeholder="000-000-0000" required="" style="border-right:none" type="tel" value="{{homePhone::input}}" title="This field is required and needs to be in the following format: 000-000-0000">
                    </div>
                    <div class="col-xs-4" style="padding-left:0;padding-right:0">
                        <label for="txtAlternateHomePhone">Alternate Phone &nbsp;<i>(Include area code)</i></label>
                        <input class="form-control numbers-only format-phone" id="txtAlternateHomePhone" minlength="12" maxlength="12" name="txtAlternateHomePhone" placeholder="000-000-0000" style="border-right:none" type="tel" value="{{alternatePhone::input}}" title="This field needs to be in the following format: 000-000-0000">
                    </div>
                    <div class="col-xs-4" style="padding-left:0">
                        <label for="txtEmailAddress">E-Mail Address</label>
                        <input aria-invalid="true" class="form-control" id="txtEmailAddress" maxlength="50" name="txtEmailAddress" required="" type="email" value="{{email::input}}">
                    </div>
                </div>
                <div class="row hidden-print">
                    <div class="col-md-12">
                        <hr style="background-color:black;height:1px;border:0">
                    </div>
                </div>
                <div class="visible-print-block" style="border-bottom:solid 1px black;margin-top:10px;margin-bottom:10px">
                </div>
                <div class="row rowTopMargin">
                    <div class="col-xs-12">
                        <label>Question 1. Describe your existing facility and transportation:</label>
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="col-xs-1 col-tiny">
                        <b>a)</b>
                    </div>
                    <div class="col-xs-11">
                        <b>Corral <span on-tap="showCorralInfo" class="span-link"><i class="fa fa-info-circle"></i></span></b>
                    </div>
                </div>
                <div class="row">
                    <div class="form-inline">
                        <div class="col-xs-1 col-tiny"></div>
                        <div class="col-xs-11">
                            <div class="form-group">
                                <label class="questionsRight" for="txtCorralLength">Dimension:&nbsp;  Length (ft)</label>
                                <input aria-invalid="true" class="form-control questionsRight" id="txtCorralLength" min="1" max="9999" name="txtCorralLength" required="" type="number" size="4" value="{{corralLength::input}}">
                            </div>
                            <div class="form-group">
                                <label class="questionsRight" for="txtCorralWidth">Width (ft)</label>
                                <input aria-invalid="true" class="form-control questionsRight" id="txtCorralWidth" min="1" max="9999" name="txtCorralWidth" required="" type="number" size="4" value="{{corralWidth::input}}">
                            </div>
                            <div class="form-group">
                                <label class="questionsRight" for="txtCorralHeight">Height (ft)</label>
                                <input aria-invalid="true" class="form-control questionsRight" id="txtCorralHeight" min="1" max="9999" name="txtCorralHeight" required="" type="number" size="4" value="{{corralHeight::input}}">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="form-inline">
                        <div class="col-xs-1 col-tiny"></div>
                        <div class="col-xs-11">
                            <div class="form-inline">
                                <div class="form-group">
                                    <label class="questionsRight" for="txtGateHeight">Gate Height (ft)</label>
                                    <input aria-invalid="true" class="form-control questionsRight" id="txtGateHeight" min="1" max="999" name="txtGateHeight" required="" type="number" size="3" value="{{gateHeight::input}}">
                                </div>
                                <div class="form-group">
                                    <label class="questionsRight" for="txtGateWidth">Gate Width (ft)</label>
                                    <input aria-invalid="true" class="form-control" id="txtGateWidth" min="1" max="999" name="txtGateWidth" required="" type="number" size="3" value="{{gateWidth::input}}">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="form-inline">
                        <div class="col-xs-1 col-tiny"></div>
                        <div class="col-xs-11">
                            <div class="form-group">
                                <label class="questionsRight" for="txtMaterialsCorral">Materials used in Corral</label>
                                <input aria-invalid="true" class="form-control questionsRight" id="txtMaterialsCorral" name="txtMaterialsCorral" size="60" type="text" maxlength="60" value="{{materialsCorral::input}}">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="form-inline">
                        <div class="col-xs-1 col-tiny"></div>
                        <div class="col-xs-11">
                            <div class="form-group">
                                <label class="questionsRight" for="txtMaterialsGate">Materials used in Gate</label>
                                <input aria-invalid="true" class="form-control" id="txtMaterialsGate" name="txtMaterialsGate" size="60" type="text" maxlength="60" value="{{materialsGate::input}}">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="col-xs-1 col-tiny">
                        <b>b)</b>
                    </div>
                    <div class="col-xs-11">
                        <b>Shelter (For minimum shelter requirements by state <a id="shelterLink">see page 4</a>)</b>
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="form-inline">
                        <div class="col-xs-1 col-tiny"></div>
                        <div class="col-xs-11">
                            <div class="form-inline">
                                <div class="form-group">
                                    <label class="questionsRight" for="txtTypeOfShelter">Type of Shelter</label>
                                    <input aria-invalid="true" class="form-control questionsRight" id="txtTypeOfShelter" name="txtTypeOfShelter" required="" size="60" type="text" maxlength="60" value="{{typeOfShelter::input}}">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="form-inline">
                        <div class="col-xs-1 col-tiny"></div>
                        <div class="col-xs-11">
                            <div class="form-inline">
                                <div class="form-group">
                                    <label class="questionsRight" for="txtMaterialsShelter">Materials used in Shelter<i> (If Applicable)</i></label>
                                    <input aria-invalid="true" class="form-control" id="txtMaterialsShelter" name="txtMaterialsShelter" required="" size="60" type="text" maxlength="60" value="{{materialsShelter::input}}">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="form-inline">
                        <div class="col-xs-1 col-tiny"></div>
                        <div class="col-xs-11">
                            <div class="form-inline">
                                <div class="form-group">
                                    <label class="questionsRight" for="txtMaxShelterHeight">Maximum Height (ft)</label>
                                    <input aria-invalid="true" class="form-control questionsRight" id="txtMaxShelterHeight" name="txtMaxShelterHeight" min="1" max="999" required="" size="3" type="number" value="{{maxShelterHeight::input}}">
                                </div>
                                <div class="form-group">
                                    <label class="questionsRight" for="txtMinShelterHeight">Minimum Height (ft)</label>
                                    <input aria-invalid="true" class="form-control" id="txtMinShelterHeight" name="txtMinShelterHeight" min="1" max="999" required="" size="3" type="number" value="{{minShelterHeight::input}}">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="col-xs-1 col-tiny"></div>
                    <div class="col-xs-11">
                        <div class="form-inline">
                            <div class="form-group">
                                <label class="questionsRight">Attached to Corral?</label>
                                <label class="radio-inline">
                                    <input id="cbYesAttachedToCorral" name="attachedToCorral" on-blur="testYesAttachedToCorral" required="" type="radio" checked="{{yesAttachedToCorral::change}}">Yes
                                </label>
                                <label class="radio-inline">
                                    <input id="cbNoAttachedToCorral" name="attachedToCorral" on-blur="testNoAttachedToCorral" type="radio" checked="{{noAttachedToCorral::change}}">No
                                </label>
                            </div>
                            <div class="form-group">
                                <label class="questionsRight">If not attached, how is it accessible?</label>
                                <input class="form-control" id="txtCorralAccessible" name="txtCorralAccessible" size="70" type="text" maxlength="70" value="{{corralAccessible::input}}">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="col-xs-1 col-tiny">
                        <b>c)</b>
                    </div>
                    <div class="col-xs-11">
                        <b>Feed</b>
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="form-inline">
                        <div class="col-xs-1 col-tiny"></div>
                        <div class="col-xs-11">
                            <div class="form-group">
                                <label class="questionsRight" for="txtTypeOfHayPasture">Type of Hay or Pasture</label>
                                <input aria-invalid="true" class="form-control questionsRight" id="txtTypeOfHayPasture" name="txtTypeOfHayPasture" required="" size="60" type="text" maxlength="60" value="{{typeOfHayPasture::input}}">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="form-inline">
                        <div class="col-xs-1 col-tiny"></div>
                        <div class="col-xs-11">
                            <div class="form-group">
                                <label class="questionsRight" for="txtAmountPerDay">Amount per Day</label>
                                <input aria-invalid="true" class="form-control" id="txtAmountPerDay" name="txtAmountPerDay" required="" size="60" type="text" maxlength="60" value="{{amountPerDay::input}}">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="col-xs-1 col-tiny"></div>
                    <div class="col-xs-11">
                        <div class="form-inline">
                            <div class="form-group">
                                <label class="questionsRight" for="txtSupplementalFeed">Supplemental Feed</label>
                                <input aria-invalid="true" class="form-control" id="txtSupplementalFeed" name="txtSupplementalFeed" required="" size="60" type="text" maxlength="60" value="{{supplementalFeed::input}}">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row rowTopMargin page-break">
                    <div class="col-xs-1 col-tiny">
                        <b>d)</b>
                    </div>
                    <div class="col-xs-11">
                        <b>Water</b>
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="col-xs-1 col-tiny"></div>
                    <div class="col-xs-11">
                        <div class="form-inline">
                            <div class="form-group">
                                <label class="questionsRight" for="txtTankCapacity">Tank Capacity (gallons)</label>
                                <input aria-invalid="true" class="form-control questionsRight" id="txtTankCapacity" min="1" max="999999" name="txtTankCapacity" required="" type="number" size="6" value="{{tankCapacity::input}}">
                            </div>
                            <div class="form-group">
                                <input id="cbAutomaticWater" name="cbAutomaticWater" type="checkbox" value="{{automaticWater::input}}">
                                <label class="questionsRight" for="cbAutomaticWater">Automatic Water</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="col-xs-1 col-tiny"></div>
                    <div class="col-xs-11">
                        <div class="form-inline">
                            <div class="form-group">
                                <label class="questionsRight">Source of Water:</label>
                                <label class="radio-inline">
                                    <input id="cbWellWater" name="waterSource" on-blur="testOtherWaterCheckBox" type="radio" checked="{{wellWater::change}}">Well
                                </label>
                                <label class="radio-inline">
                                    <input id="cbCityWater" name="waterSource" type="radio" on-blur="testOtherWaterCheckBox" checked="{{cityWater::change}}">City
                                </label>
                                <label class="questionsRight radio-inline">
                                    <input id="cbOtherWater" name="waterSource" on-blur="testOtherWaterCheckBox" type="radio" checked="{{otherWater::change}}">Other: Describe
                                </label>
                            </div>
                            <div class="form-group">
                                <input class="form-control" id="txtOtherWater" name="txtOtherWater" maxlength="70" on-blur="testOtherWater" size="70" type="text" value="{{otherWaterDescription::input}}">
                                <label class="error hidden" for="txtOtherWater" id="otherWaterError">This field is required.</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="col-xs-1 col-tiny"></div>
                    <div class="col-xs-11">
                        <label class="error hidden" id="otherWaterSourceError">A source of water must be checked</label>
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="col-xs-1 col-tiny">
                        <b>e)</b>
                    </div>
                    <div class="col-xs-11">
                        <b>Trailer <span on-tap="showTrailerInfo" class="span-link"><i class="fa fa-info-circle"></i></span></b>
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="col-xs-1 col-tiny"></div>
                    <div class="col-xs-11">
                        <div class="form-inline">
                            <div class="form-group">
                                <label class="questionsRight">Type of Cover:</label>
                                <label class="radio-inline">
                                    <input aria-invalid="true" id="cbStock" name="coverType" required="" type="radio" checked="{{stock::change}}">Stock
                                </label>
                                <label class="radio-inline">
                                    <input id="cbHorse" name="coverType" type="radio" checked="{{horse::change}}">Horse
                                </label>
                                <label class="radio-inline questionsRight">
                                    <input id="cbHomemade" name="coverType" type="radio" checked="{{homemade::change}}">Homemade
                                </label>
                            </div>
                            <div class="form-group">
                                <label class="questionsRight" for="txtTrailerCapacity">Capacity (No. of animals)</label>
                                <input class="form-control" id="txtTrailerCapacity" name="txtTrailerCapacity" min="1" max="99" required="" type="number" size="2" value="{{trailerCapacity::input}}">
                            </div>
                        </div>
                    </div>

                </div>
                <div class="row rowTopMargin">
                    <div class="col-xs-1 col-tiny"></div>
                    <div class="col-xs-11">
                        <div class="form-inline">
                            <div class="form-group">
                                <label class="questionsRight" title="Some ages and species of animal are not normally loaded and/or hauled together and may require divisions with in the trailer.">Dividers?*</label>
                                <label class="radio-inline">
                                    <input id="cbYesDividers" name="dividers" on-blur="testYesDividers" required="" type="radio" checked="{{yesDividers::change}}">Yes
                                </label>
                                <label class="radio-inline questionsRight">
                                    <input id="cbNoDividers" name="dividers" type="radio" checked="{{noDividers::change}}">No
                                </label>
                                <label class="questionsRight">If yes, can they be tied or folded back?</label>
                                <label class="radio-inline">
                                    <input id="cbYesFoldableDividers" name="foldableDividers" type="radio" checked="{{yesFoldableDividers::change}}">Yes
                                </label>
                                <label class="radio-inline">
                                    <input id="cbNoFoldableDividers" name="foldableDividers" type="radio" checked="{{noFoldableDividers::change}}">No
                                </label>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="row rowTopMargin">
                    <div class="col-xs-1 col-tiny"></div>
                    <div class="col-xs-11">
                        <div class="form-inline">
                            <div class="form-group">
                                <label class="questionsRight">Number of rear doors</label>
                                <label class="radio-inline">
                                    <input aria-invalid="true" id="cbOneRearDoor" name="rearDoors" required="" type="radio" checked="{{oneRearDoor::change}}">1
                                </label>
                                <label class="radio-inline">
                                    <input id="cbTwoRearDoors" name="rearDoors" type="radio" checked="{{twoRearDoors::change}}">2
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="form-inline">
                        <div class="col-xs-1 col-tiny"></div>
                        <div class="col-xs-11">
                            <div class="form-inline">
                                <div class="form-group">
                                    <label class="questionsRight" title="Animals are not normally loaded into a trailer with a ramp, unless the rear door is in front of the ramp.">Ramp**</label>
                                    <label class="radio-inline">
                                        <input aria-invalid="true" id="cbYesRamp" on-blur="testYesRamp" name="ramp" required="" type="radio" checked="{{yesRamp::change}}">Yes
                                    </label>
                                    <label class="radio-inline questionsRight">
                                        <input id="cbNoRamp" name="ramp" type="radio" checked="{{noRamp::change}}">No
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label class="questionsRight">If yes, is it Full or Half Ramp?</label>
                                    <label class="radio-inline">
                                        <input id="cbFullRamp" name="rampType" type="radio" checked="{{fullRamp::change}}">Full Ramp
                                    </label>
                                    <label class="radio-inline">
                                        <input id="cbHalfRamp" name="rampType" type="radio" checked="{{halfRamp::change}}">Half Ramp
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="col-xs-1 col-tiny"></div>
                    <div class="col-xs-11">
                        <div class="form-inline">
                            <div class="form-group">
                                <label class="questionsRight">Rear Doors</label>
                                <label class="radio-inline">
                                    <input aria-invalid="true" id="cbFullHeightRearDoor" name="heightRearDoor" required="" type="radio" checked="{{fullHeightRearDoor::change}}">Full Height
                                </label>
                                <label class="radio-inline">
                                    <input id="cbHalfHeightRearDoor" name="heightRearDoor" type="radio" checked="{{halfHeightRearDoor::change}}">Half Height
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="col-xs-1 col-tiny"></div>
                    <div class="col-xs-11">
                        <div class="form-inline">
                            <div class="form-group">
                                <label class="questionsRight">Is trailer covered?</label>
                                <label class="radio-inline">
                                    <input aria-invalid="true" id="cbYesTrailerCovered" name="trailerCovered" required="" type="radio" checked="{{yesTrailerCovered::change}}">Yes
                                </label>
                                <label class="radio-inline">
                                    <input id="cbNoTrailerCovered" name="trailerCovered" type="radio" checked="{{noTrailerCovered::change}}">No
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="col-xs-1 col-tiny"></div>
                    <div class="col-xs-11">
                        <div class="form-inline">
                            <div class="form-group">
                                <label class="questionsRight">Does trailer have a solid top?</label>
                                <label class="radio-inline">
                                    <input aria-invalid="true" id="cbYesTrailerSolidTop" name="solidTop" on-blur="testYesSolidTopRadioButton" required="" type="radio" checked="{{yesTrailerSolidTop::change}}">Yes
                                </label>
                                <label class="radio-inline questionsRight">
                                    <input id="cbNoTrailerSolidTop" name="solidTop" on-blur="testNoSolidTopRadioButton" type="radio" checked="{{noTrailerSolidTop::change}}">No
                                </label>
                                <label class="questionsRight" for="txtDescrTrailerCover">If not, describe the type of cover?</label>
                                <input class="form-control" id="txtDescrTrailerCover" name="txtDescrTrailerCover" on-blur="testSolidTop" size="50" maxlength="50" type="text" value="{{trailerCoverDescr::input}}">
                                <label class="error hidden" for="txtDescrTrailerCover" id="solidTopError">This field is required.</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="col-xs-1 col-tiny"></div>
                    <div class="col-xs-11">
                        <div class="form-inline">
                            <div class="form-group">
                                * Some ages and species of animal are not normally loaded and/or hauled together and may require divisions with in the trailer.
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="col-xs-1 col-tiny"></div>
                    <div class="col-xs-11">
                        <div class="form-inline">
                            <div class="form-group">
                                ** Animals are not normally loaded into a trailer with a ramp, unless the rear door is in front of the ramp.
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row hidden-print">
                    <div class="col-md-12">
                        <hr style="background-color:black;height:1px;border:0">
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="col-md-12">
                        <div class="form-inline">
                            <div class="form-group">
                                <label class="questionsRight">Question 2. Have you previously adopted animals through the Wild Horse and Burro Program?</label>
                                <label class="radio-inline">
                                    <input aria-invalid="true" id="cbYesAdoptedBefore" name="adoptedBefore" on-blur="testYesAdoptedBeforeRadioButton" required="" type="radio" checked="{{yesAdoptedBefore::change}}">Yes
                                </label>
                                <label class="radio-inline">
                                    <input id="cbNoAdoptedBefore" name="adoptedBefore" on-blur="testNoAdoptedBeforeRadioButton" type="radio" checked="{{noAdoptedBefore::change}}">No
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="col-xs-1 col-tiny"></div>
                    <div class="col-xs-11">
                        <div class="form-inline">
                            <div class="form-group">
                                <label class="questionsRight">If your answer is yes, are these animals titled?</label>
                                <label class="radio-inline">
                                    <input id="cbYesTitledAnimals" name="titledAnimals" on-blur="testYesTitledAnimalsRadioButton" type="radio" checked="{{yesTitledAnimals::change}}">Yes
                                </label>
                                <label class="radio-inline">
                                    <input id="cbNoTitledAnimals" name="titledAnimals" on-blur="testNoTitledAnimalsRadioButton" type="radio" checked="{{noTitledAnimals::change}}">No
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="col-xs-1 col-tiny"></div>
                    <div class="col-xs-11">
                        <div class="form-inline">
                            <div class="form-group">
                                <label class="questionsRight" for="txtNoUntitledAnimals">How many untitled animals do you have?</label>
                                <input class="form-control" id="txtNoUntitledAnimals" min="0" max="9999" name="txtNoUntitledAnimals" on-blur="testNoUntitledAnimals" type="number" size="4" value="{{noUntitledAnimals::input}}">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row hidden-print">
                    <div class="col-md-12">
                        <hr style="background-color:black;height:1px;border:0">
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="col-md-12">
                        <label class="questionsRight">Question 3. Will more than four untitled animals be at the location described on the application?</label>
                        <label class="radio-inline">
                            <input aria-invalid="true" id="cbYesMoreThanFourUntitledAnimals" name="moreThanFourUntitledAnimals" required="" type="radio" checked="{{yesMoreThanFourUntitledAnimals::change}}">Yes
                        </label>
                        <label class="radio-inline">
                            <input id="cbNoMoreThanFourUntitledAnimals" name="moreThanFourUntitledAnimals" type="radio" checked="{{noMoreThanFourUntitledAnimals::change}}">No
                        </label>
                    </div>
                </div>
                <div class="row hidden-print">
                    <div class="col-md-12">
                        <hr style="background-color:black;height:1px;border:0">
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="col-md-12">
                        <div class="form-inline">
                            <div class="form-group">
                                <label class="questionsRight">Question 4. Have you ever adopted under another last name?</label>
                                <label class="radio-inline">
                                    <input aria-invalid="true" id="cbYesAdoptedUnderAnotherLastName" name="adoptedUnderAnotherLastName" on-blur="testOtherLastNameRadioButton" required="" type="radio" checked="{{yesAdoptedUnderAnotherLastName::change}}">Yes
                                </label>
                                <label class="radio-inline questionsRight">
                                    <input id="cbNoAdoptedUnderAnotherLastName" name="adoptedUnderAnotherLastName" on-blur="testOtherLastNameRadioButton" type="radio" checked="{{noAdoptedUnderAnotherLastName::change}}">No
                                </label>
                                <label class="questionsRight" for="txtOtherLastName">If yes, what other name did you use?</label>
                                <input class="form-control" id="txtOtherLastName" name="txtOtherLastName" on-blur="testOtherLastName" size="30" type="text" maxlength="30" value="{{otherLastName::input}}">
                                <label class="error hidden" for="txtOtherLastName" id="otherLastNameError">This field is required.</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row hidden-print">
                    <div class="col-md-12">
                        <hr style="background-color:black;height:1px;border:0">
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="col-xs-12">
                        <div class="form-inline">
                            <div class="form-group">
                                <label>Question 5. Have you ever been convicted of abuse or inhumane treatment of animals, violation of the Wild Free-Roaming Horse and Burro Act or the Wild Horse and Burro Regulations?</label>
                                <label class="radio-inline">
                                    <input aria-invalid="true" id="cbYesAbuse" name="abuse" required="" type="radio" checked="{{yesAbuse::change}}">Yes
                                </label>
                                <label class="radio-inline">
                                    <input id="cbNoAbuse" name="abuse" type="radio" checked="{{noAbuse::change}}">No
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row rowTopMargin hidden-print">
                    <div class="col-xs-12">
                        <hr style="background-color:black;height:1px; border:0">
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="col-xs-12 text-center">
                        <label>MAP OF LOCATION OF ADOPTED WILD HORSES AND/OR BURROS</label>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 hidden-print">
                        <input checked="{{isAnimalStoredAtAdoptersAddress::change}}" id="cbIsAnimalStoredAtAdoptersAddress" name="cbIsAnimalStoredAtAdoptersAddress" on-change="updateFacilityAddress" type="checkbox">
                        <label for="cbIsAnimalStoredAtAdoptersAddress" style="font-size:smaller">&nbsp;Check if Adopter's information is the same as facility information</label>
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="col-xs-12">
                        <label for="txtFacilityAddress">Facility Address</label>
                        <input aria-invalid="true" class="form-control" id="txtFacilityAddress" maxlength="50" name="txtFacilityAddress" required="" type="text" value="{{facilityAddress::input}}">
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="col-xs-6" style="padding-right:0">
                        <label for="txtFacilityCity">City</label>
                        <input aria-invalid="true" class="form-control" id="txtFacilityCity" maxlength="30" name="txtFacilityCity" required="" style="border-right:none" type="text" value="{{facilityCity::input}}">
                    </div>
                    <div class="col-xs-4" style="padding-left:0;padding-right:0">
                        <label for="txtFacilityState">State</label>
                        <select aria-invalid="true" class="form-control hidden-print" id="txtFacilityState" name="txtFacilityState" required="" style="border-right:none" value="{{facilityState::change}}"></select>
                        <input aria-invalid="true" class="form-control visible-print-block" style="border-right:none" type="text" value="{{facilityState}}">
                    </div>
                    <div class="col-xs-2" style="padding-left:0">
                        <label for="txtFacilityZipCode">Zip Code</label>
                        <input aria-invalid="true" class="form-control" id="txtFacilityZipCode" maxlength="5" name="txtFacilityZipCode" required="" type="text" on-blur="renderMap" value="{{facilityZipCode::input}}">
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="col-xs-7" style="padding-right:0">
                        <label for="txtPropertyOwnerName">Property Owner(s) Name</label>
                        <input aria-invalid="true" class="form-control" id="txtPropertyOwnerName" maxlength="50" name="txtPropertyOwnerName" required="" style="border-right:none" type="text" value="{{propertyOwnerName::input}}">
                    </div>
                    <div class="col-xs-5" style="padding-left:0">
                        <label for="txtFacilityPhone">Phone Number</label>
                        <input aria-invalid="true" class="form-control numbers-only format-phone" id="txtFacilityPhone" minlength="12" maxlength="12" name="txtFacilityPhone" placeholder="000-000-0000" required="" type="tel" value="{{facilityPhone::input}}" title="This field needs to be in the following format: 000-000-0000">
                    </div>
                </div>
                <div class="page-break"></div>
                <div id="facilityView" class="row rowTopMargin" style="border:solid 1px black;">
                    <div class="col-xs-6" style="min-height:500px; ">
                        <div class="row">
                            <div class="col-xs-12" style="border-bottom:solid 1px black;height:40px">
                                <label>Map of facility location</label>
                            </div>
                        </div>
                        <div class="row" style="margin-top:5px">
                            <div class="col-xs-12" style="height: 460px;">
                                <iframe id="map" style="border: 0; height: 100%; width: 100%;" frameborder="0" src$="[[mapUrl]]" allowfullscreen=""></iframe>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-6 visible-print-block" style="border-bottom:solid 1px black;height:40px"></div>

                    <div class="col-xs-6" style="min-height:500px;  border-left:solid 1px black">
                        <div class="row">
                            <div class="col-xs-12" style="border-bottom:solid 1px black;height:40px">
                                <label>Draw a layout of corral(s) and shelter(s).</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12" hidden$="{{showLegacyDrawing}}">
                                <facility-draw id="facilityDraw"></facility-draw>
                            </div>
                            <div class="col-xs-12" hidden$="{{!showLegacyDrawing}}">
                                <facility-draw-legacy id="facilityDrawLegacy" drawimages="{{drawLegacyImages}}"></facility-draw-legacy>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="col-xs-6">
                        <label for="txtDirToFac">Directions to the Facility</label>
                        <textarea aria-invalid="true" class="form-control hidden-print" id="txtDirToFac" name="txtDirToFac" required="" rows="15" maxlength="900" value="{{directionsToFacility::input}}"></textarea>
                        <div class="visible-print-block print-border col-xs-12">
                            <div id="directionsToFacilityDiv"></div>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <label>Description of layout of corral and shelter</label>
                        <textarea aria-invalid="true" class="form-control hidden-print" id="txtDescOfCorral" name="txtDescOfCorral" rows="15" maxlength="900" value="{{descriptionOfFacility::input}}"></textarea>
                        <div class="visible-print-block print-border col-xs-12">
                            <div id="descriptionOfFacilityDiv"></div>
                        </div>
                    </div>
                </div>
                <div class="row rowTopMargin page-break">
                    <div class="col-xs-12 text-center">
                        <b>INSTRUCTIONS</b>
                    </div>
                </div>
                <div class="row rowTopMargin" style="border-bottom:solid 1px black">
                    <div class="col-xs-6" style="border-right:solid 1px black">
                        <ul>
                            <li>1. Carefully read the <b>PROHIBITED ACTS</b> and <b>TERMS OF ADOPTION</b> printed below.</li>
                            <li>2. Carefully read information provided in the pamphlet "Adopting a Wild Horse or Burro".</li>
                            <li>3. Submit your completed Application for Adoption of Wild Horse(s) or Burro(s) to the Bureau of Land Management (BLM) office serving your</li>
                        </ul>
                    </div>
                    <div class="col-xs-6">
                        <ul>
                            <li>State. (For the correct address, refer to the pamphlet "Adopting a Wild Horse or Burro" or take it to an adoption event.)</li>
                            <li>4.  So that we may notify you when and where the animal(s) you requested are available, provide the Bureau of Land Management office serving your State whithin 10 days of any changes in your address or telephone number.</li>
                        </ul>
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="col-xs-12 text-center">
                        <b>PROHIBITED ACTS</b>
                    </div>
                </div>
                <div class="row rowTopMargin" style="border-bottom:solid 1px black">
                    <div class="col-xs-6" style="border-right:solid 1px black">
                        <ul>
                            <li>(a) Maliciously or negligently injuring or harassing a wild horse or burro;</li>
                            <li>(b) Treating a wild horse or burro inhumanely;</li>
                            <li>(c) Removing or attempting to remove a wild horse or burro from the public lands without authorization from the BLM;</li>
                            <li>(d) Destroying a wild horse or burro without authorization from the BLM, except as an act of mercy;</li>
                            <li>(e) Selling or attempting to sell a wild horse or burro or its remains;</li>
                        </ul>
                    </div>
                    <div class="col-xs-6">
                        <ul>
                            <li>(f) Branding a wild horse or burro;</li>
                            <li>(g) Removing or altering a freeze mark on a wild horse or burro;</li>
                            <li>(h) Violating an order, term, or condition established by BLM under this part;</li>
                            <li>(i) Commercially exploiting a wild horse or burro;</li>
                        </ul>
                        Any person who commits a prohibted act is subject to a fine of not more than $2,000 or imprisonment for not more that one year, or both, for each violation.
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="col-xs-12 text-center">
                        <b>TERMS OF ADOPTION</b>
                    </div>
                </div>
                <div class="row rowTopMargin" style="border-bottom:solid 1px black">
                    <div class="col-xs-6" style="border-right:solid 1px black">
                        The following terms apply to all wild horses and burros adopted under this Private Maintenance and Care Agreement:
                        <ul>
                            <li>(a) Adopters are financially responsible for providing proper care;</li>
                            <li>(b) Adopters are responsible, as provided by State law, for any personal injury, property damage, or death caused by animals in their care, for pursuing animals that escape or stray, and for costs of recapture;</li>
                            <li>(c) Adopters must not transfer animals for more than 30 days to another location or to the care of another individual without the prior approval of the BLM;</li>
                            <li>(d) Adopters must make animals available for physical inspection within 7 days of receipt of a written request by the BLM;</li>
                            <li>(e) Adopters must notify the BLM within 7 days of discovery of an animal’s death, theft or escape;</li>
                            <li>(f) Adopters must notify the BLM within 30 days of any change in the adopter’s address;</li>
                        </ul>
                    </div>
                    <div class="col-xs-6">
                        <ul>
                            <li>(g) Adopters must dispose of remains in accordance with applicable sanitation laws; and</li>
                            <li>(h) Title will remain with the Federal Government for at least 1 year after the Private Maintenance and Care Agreement is executed and until a Certificate of Title is issued by the BLM.</li>
                            <li>(i) Adopters are entitled to a replacement, if, within 6 months of the adoption date, the animal dies or is required to be destroyed due to a condition that existed at the time of adoption and if the adopter provides a veterinarian statement that certifies that reasonable care would not have corrected the condition. All replacements will be handled as a refund (completed within 2 weeks of notification) or a voucher for a replacement animal. A voucher is non-refundable; has a shelf-life of six months; can be applied to more than one animal; is non-transferable; has to be redeemed at the same type of event as the original adoption; and does not give the adopter any kind of preferential treatment. Additionally, the amount of the voucher has to be redeemed all at one time; non-used funds are forfeited; and bids above the voucher amount are due in full at the time of the adoption. This policy will only apply to replacement animals, and not repossessions or reassignments.</li>
                        </ul>
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="col-xs-12 text-center">
                        <b>NOTICES</b>
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="col-xs-6" style="border-right:solid 1px black">
                        The Privacy Act and the regulation at 43 CFR 2.48 (d) require that you be furnished the following information in connection with information required by this application.
                        <br>
                        <br>
                        <b>AUTHORITY:</b>&nbsp;&nbsp;16 U.S.C. 1333 and 31 U.S.C. 7701.
                        <br>
                        <br>
                        <b>PRINCIPAL  PURPOSE:</b>&nbsp;&nbsp;The  BLM  will  use  this  information  to  process  your agreement for private maintenance and care of wild horses or burros. BLM  will  use  your  driver’s  license  and  social  security  numbers  for  debt  collection purposes under the authority of the Debt Collection Improvement Act, 31  U.S.C. 7701.
                        <br>
                        <br>
                        <b>ROUTINE USES:&nbsp;&nbsp;The primary uses of the information are to:</b>
                        <br>
                        <br>
                        <ul style="display:inline">
                            <li>(1)   Identify individuals who have applied to obtain custody of a wild horse or burro through adoption or sale;</li>
                            <li>(2)   Document  the  rejection,  suspension  or  granting  of  the  request  for  adoption or sale;</li>
                            <li>(3)   Monitor compliance with laws / regulations concerning maintenance of adopted animals;</li>
                            <li>(4)   Identify contractors / employees / volunteers/ service providers required to perform program functions;</li>
                        </ul>
                    </div>
                    <div class="col-xs-6">
                        <ul style="display:inline">
                            <li>(5)   Provide necessary program management information to other agencies involved in management of wild horses and burros on public lands, i.e., the U.S. Forest Service (FS) and the Animal and Plant Health Inspection Service (APHIS);</li>
                            <li>(6)   Identify  and  assign  level  of  system  access  required  by  BLM,  FS  and APHIS wild horse and burros program personnel; and</li>
                            <li>(7)   Authorize the disclosure of records to individuals involved in responding to a breach of Federal data.</li>
                        </ul>
                        <br>
                        <b>EFFECT  OF  NOT  PROVIDING  INFORMATION:</b>&nbsp;&nbsp;Submission  of  the  requested information is necessary to obtain or retain a benefit. Failure to submit all of the requested information or to complete this form may result in the rejection and/or denial of your application. The Paperwork Reduction Act of 1995 (44 U.S.C. 3501 et seq.) requires us to inform you that: The  BLM  collects  this  information  in  accordance  with  the  statutes  and  regulations listed above, and for the purposes listed above. Submission  of  the  requested  information  is  necessary  to  obtain  or  retain  a  benefit. You do not have to respond to this or any other Federal agency-sponsored  information  collection  unless  it  displays  a  currently  valid  OMB  control number.
                    </div>
                </div>
                <br>
                <a id="shelterReq"></a>
                <div class="row text-center">
                    <div class="col-md-12">
                        <b style="font-size:large">List of Minimum Shelter Requirements by State</b>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th style="text-align:center;width:33%">STATE</th>
                                    <th style="text-align:center">MINIMUM REQUIREMENT*</th>
                                    <th style="text-align:center;width:33%">EXAMPLE</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Colorado, Idaho, Kansas, Nevada, New Mexico, Oklahoma, Oregon/Washington (east of the Cascade Mountains), Texas, Utah</td>
                                    <td>Shelter shall be available to mitigate the effects of inclement weather and temperature extremes.  The requirement is at the discretion of the authorized officer and will vary dependent on the severity of weather in the region.</td>
                                    <td>Natural cover (tree, etc.) or man-made structure (plywood or other material on side of corral, stall, etc.)</td>
                                </tr>
                                <tr>
                                    <td>Nebraska, Wyoming</td>
                                    <td>Natural cover or man-made structure that provides a wind break.</td>
                                    <td>Tree (etc.) or structure with a side (plywood on side of corral, stall, etc.)</td>
                                </tr>
                                <tr>
                                    <td>Alabama, Arizona, Arkansas, Florida, Georgia, Kentucky, Louisiana, Mississippi, North Carolina, South Carolina, Tennessee, Virginia </td>
                                    <td>Natural cover or man-made structure that provides shade.</td>
                                    <td>Tree (etc.) or structure with a roof (wood, metal, etc.) </td>
                                </tr>
                                <tr>
                                    <td>California, Oregon/Washington (west of the Cascade Mountains) </td>
                                    <td>A two (2)-sided shelter with a roof.</td>
                                    <td>Structure with sides and a roof (wood, metal, etc.)</td>
                                </tr>
                                <tr>
                                    <td>Alaska, Connecticut, Delaware, Illinois, Indiana, Iowa, Maine, Maryland, Massachusetts, Michigan, Minnesota, Missouri, Montana, New Hampshire, New Jersey, New York, North Dakota, Ohio, Pennsylvania, Rhode Island, South Dakota, Vermont, West Virginia, and Wisconsin</td>
                                    <td>A three (3)-sided shelter with a roof. Heated water source (Alaska Only).</td>
                                    <td>Structure with sides, a back, and a roof</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 text-center">
                        *These requirements are in addition to state, county, and local animal health and welfare laws and regulations for the area the animal resides.
                    </div>
                </div>
                <div class="row">&nbsp;</div>
                <div class="row">
                    <div class="col-md-12 text-center">
                        <b>BURDEN HOURS STATEMENT</b>
                    </div>
                </div>
                <div class="row" style="border-bottom-style:double;">
                    <div class="col-md-12" style="padding-bottom:20px">
                        Public  reporting  burden  for  this  form  is  estimated  to  average  30  minutes  per  response,  including  the  time  for  reviewing  instructions,  gathering  and maintaining  data,  and  completing  and  reviewing  the  form.  Direct  comments  regarding  the  burden  estimate  or  any  other  aspect  of  this  form  to  U.S. Department  of  the  Interior,  Bureau  of  Land  Management  (1004-0042),  Bureau  Information  Collection  Clearance  Officer,  (WO-630),  1849  C Street, N.W., Washington, D.C. 20240.
                    </div>
                </div>
                <div class="row rowTopMargin" style="border-bottom-style:double;">
                    <div class="col-xs-12 text-center" style="padding:10px">
                        <b>Failure to comply with these terms may result in the cancellation of the agreement, repossession of the animals, and disapproval of requests for adoption of additional animals. In addition, violation of any term of a Private Maintenance and Care Agreement is a prohibited act.</b>
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="col-xs-12 text-center">
                        <b>I have read and understand the above TERMS OF THE ADOPTION and PROHIBITED ACTIONS. </b>
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="col-xs-12 text-center">
                        <input id="signatureProhibitedActions" name="signatureProhibitedActions" type="checkbox" required="" checked="{{signatureProhibitedActions::change}}"><label for="signatureProhibitedActions">&nbsp;Check this box for applicant's electronic signature</label><br>
                    </div>
                </div>
                <div class="row" style="border-bottom-style:double;">
                </div>
                <div class="row rowTopMargin">
                    <div class="col-xs-12">
                        <b>Under penalty of prosecution for violating 18 U.S.C. 1001, which makes it a federal crime to make false statements to any agency of the United States, I hereby state that I have no intent to sell this wild horse or burro for slaughter or bucking stock, or for processing into commercial products, within the meaning of the Wild and Free-Roaming Horse and Burro Act, 16 U.S.C. 1331 et seq., and regulations 43 CFR 4700.0-5(c). I have read the above statement, understand the terms of this agreement and agree to comply with them.</b>
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="col-xs-12 text-center">
                        <input id="signatureProhibitedSelling" name="signatureProhibitedSelling" type="checkbox" required="" checked="{{signatureProhibitedSelling::change}}"><label for="signatureProhibitedSelling">&nbsp;Check this box for applicant's electronic signature</label><br>
                    </div>
                </div>
            </div>
            <div class="row" style="border-bottom-style:double;"></div>
            <br>
            <div hidden$="{{!showApprovalSection(isAdmin, isApproved)}}">
                <div class="row rowTopMargin">
                    <div class="col-xs-4">
                        <label class="questionsRight">Approved for:</label>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-3">
                        <label for="approvedBurros">No. of Burros</label>
                        <input disabled$="{{expired}}" required="" class="form-control questionsRight" id="approvedBurros" min="0" name="approvedBurros" type="number" value="{{approvedBurros::input}}">
                    </div>
                    <div class="col-xs-3">
                        <label for="approvedYoungHorses">No. of Horses Younger than 18 mos.</label>
                        <input disabled$="{{expired}}" required="" class="form-control questionsRight" id="approvedYoungHorses" min="0" name="approvedYoungHorses" type="number" value="{{approvedYoungHorses::input}}">
                    </div>
                    <div class="col-xs-3">
                        <label for="approvedTrainedAnimals">No. of Trained Animals</label>
                        <input disabled$="{{expired}}" required="" class="form-control questionsRight" id="approvedTrainedAnimals" min="0" name="approvedTrainedAnimals" type="number" value="{{approvedTrainedAnimals::input}}">
                    </div>
                    <div class="col-xs-3">
                        <label for="approvedOldHorses">No. of Horses Older than 18 mos.</label>
                        <input disabled$="{{expired}}" required="" class="form-control questionsRight" id="approvedOldHorses" min="0" name="approvedOldHorses" type="number" value="{{approvedOldHorses::input}}">
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-3">
                        <label for="approvedTotalAnimals">No. of Total Animals Approved</label>
                        <input disabled$="{{expired}}" required="" class="form-control questionsRight" id="approvedTotalAnimals" min="0" name="approvedTotalAnimals" type="number" value="{{approvedTotalAnimals::input}}">
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="col-xs-12">
                        <input disabled$="{{expired}}" class="questionsRight" id="blmDisapproved" name="blmDisapproved" type="checkbox" checked="{{disapproved::change}}">
                        <label for="blmDisapproved">Disapproved (Disapproval will be accompanied by a decision letter to the applicant with appeal rights.)</label>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12">
                        <input disabled$="{{expired}}" checked="{{blmOfficialSignature::change}}" class="questionsRight" id="blmSignature" name="blmSignature" type="checkbox">
                        <label for="blmSignature">BLM Official's electronic signature</label><br>
                    </div>
                </div>
                <div class="row rowTopMargin">
                    <div class="col-xs-3">
                        <label for="blmOfficialsName">(BLM Official's Name)</label>
                        <input disabled$="{{expired}}" id="blmOfficialsName" name="blmOfficialsName" class="form-control" type="text" value="{{blmOfficialsName::input}}">
                    </div>
                    <div class="col-xs-3">
                        <label for="blmOffice">(Office)</label>
                        <input disabled$="{{expired}}" id="blmOffice" name="blmOffice" class="form-control" type="text" value="{{blmOfficialsOffice::input}}">
                    </div>
                    <div class="col-xs-3">
                        <label for="blmDate">(Date)</label>
                        <input class="form-control" disabled="" id="blmDate" name="blmDate" type="text">
                    </div>
                </div>
                <br>
                <div class="row rowTopMargin text-center">
                    <b style="font-size:larger">This application expires one year after the date of approval by the BLM Official's Signature.</b>
                </div>
                <br>
            </div>
            <div class="row rowTopMargin hidden-print">
                <div class="col-xs-12">
                    <span id="userButtons" hidden$="{{isSubmitted}}">
                        <button disabled$="{{processing}}" class="btn blm-btn-primary" on-tap="publicUserSubmit" type="button">
                            Submit Application
                            <span id="spinner" hidden$="{{!processing}}">
                                <i class="fa fa-spinner fa-pulse fa-fw"></i>
                            </span>
                        </button>
                        <button disabled$="{{processing}}" hidden$="{{isDenied}}" class="btn blm-btn-primary" type="button" on-tap="saveForLater">Save for Later</button>
                    </span>
                    <span id="adminButtons" hidden$="{{!isAdmin}}">
                        <button disabled$="{{processing}}" class="btn blm-btn-primary" id="btnAdminSave" on-tap="adminSave" type="button">Save</button>
                        <button disabled$="{{processing}}" class="btn blm-btn-primary" id="btnDeny" on-tap="deny" type="button">Deny</button>
                        <button disabled$="{{processing}}" class="btn blm-btn-primary" id="btnMatchUser" on-tap="matchPsUser" type="button">Match User</button>
                        <button disabled$="{{!userMatched}}" class="btn blm-btn-primary" id="btnApprove" on-tap="approve" title="Send document to PS" type="button">Approve/Send to PS</button>
                    </span>
                    <button class="btn blm-btn-secondary" type="button" on-tap="closeForm">Back/Cancel</button>
                </div>
            </div>
            <div class="modal fade" id="dialogCloseForm" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">Adoption Application</h4>
                        </div>
                        <div class="modal-body">
                            <p>{{dialogCloseText}}</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn blm-btn-primary" on-tap="closeForm">OK</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="dialogDeniedReason" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close closeBtn" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" class="closeSpan">×</span></button>
                            <h4 class="modal-title">Adoption Application</h4>
                        </div>
                        <div class="modal-body">
                            <label for="txtDeniedReason">Denied Reason</label>
                            <textarea class="form-control" id="txtDeniedReason" rows="15" value="{{deniedReason::input}}"></textarea>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn blm-btn-secondary" data-dismiss="modal">Cancel</button>
                            <button type="button" class="btn blm-btn-primary" on-tap="saveDeniedReason">Save</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="dialogApproveComment" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close closeBtn" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" class="closeSpan">×</span></button>
                            <h4 class="modal-title">Adoption Application</h4>
                        </div>
                        <div class="modal-body">
                            <label for="txtApprovalComment">Approval Comment (optional)</label>
                            <textarea class="form-control" id="txtApprovalComment" rows="15" value="{{approvalComment::input}}"></textarea>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn blm-btn-secondary" data-dismiss="modal">Cancel</button>
                            <button type="button" class="btn blm-btn-primary" on-tap="approveSendToPS">Approve</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="dialogSaveForLater" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close closeBtn" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" class="closeSpan">×</span></button>
                            <h4 class="modal-title">Adoption Application</h4>
                        </div>
                        <div class="modal-body">
                            <label for="txtSavedFormName">Name of form</label>
                            <input class="form-control" id="txtSavedFormName" maxlength="50" name="txtSavedFormName" type="text" value="{{savedFormName::input}}">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn blm-btn-secondary" data-dismiss="modal">Cancel</button>
                            <button disabled$="{{processing}}" type="button" class="btn blm-btn-primary" on-tap="publicUserSave">Save</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="corralInfo" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close closeBtn" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" class="closeSpan">×</span></button>
                            <h4 class="modal-title">Adoption Application</h4>
                        </div>
                        <div class="modal-body">
                            <p>Applicant must provide a facility with access to feed, water, and shelter. NOTE: Facility refers to enclosed area such as corral, barn, stall, etc. Approval is not based on pasture fence height, but the height of the enclosed area.</p>
                            <p>Applicant must have a facility that meets:</p>
                            <ul style="list-style-type:initial;">
                                <li>Minimum of 400 sq. feet of corral space per animal, i.e. 20' X 20' (untrained animals)</li>
                                <li>Minimum of 144 sq. feet per animal, 12' X 12' (trained animals that are exercised daily)</li>
                                <li>Suitable materials: pipe panels, wood post, planks (min. 1.5" thick), horse fence (V Mesh or 2" X 4" square)</li>
                                <li>5' High for yearling or gentled horse of any age</li>
                                <li>6' High for an ungentled horse two years or older</li>
                                <li>4.5' High for a burro of any age</li>
                                <li>Shelter that meets the minimum requirements chart for wild horses and burros based on the state or region in which the animal resides, unless otherwise stipulated by the authorized officer</li>
                            </ul>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn blm-btn-primary" data-dismiss="modal">OK</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="trailerInfo" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close closeBtn" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" class="closeSpan">×</span></button>
                            <h4 class="modal-title">Adoption Application</h4>
                        </div>
                        <div class="modal-body">
                            <p>Applicant must provide a stock or horse trailer with a rear swing gate and covered top. Provided the dividers are removed or folded back, slant trailers are acceptable. Drop-ramps are acceptable if there is an additional back gate to the trailer. Two-horse trailers approved on case-by-case basis. No one-horse trailers are approved.</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn blm-btn-primary" data-dismiss="modal">OK</button>
                        </div>
                    </div>
                </div>
            </div>
            <manage-attachments id="manageAttachments" attachments-title="Manage Adoption Application Attachments"></manage-attachments>
            <manage-attachments id="reviewAttachments" readonly="" attachments-title="Review Adoption Application Attachments"></manage-attachments>
            <doc-comments id="comments" admin$="{{isAdmin}}"></doc-comments>
        </form>
        <div class="modal fade" id="dialogPsSaveValidation" role="dialog" tabindex="-1">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button aria-label="Close" class="close closeBtn" data-dismiss="modal" type="button"><span aria-hidden="true" class="closeSpan">×</span></button>
                        <h4 class="modal-title">Adoption Application</h4>
                    </div>
                    <div class="modal-body">
                        <h5 style="color:#a94442">Adoption Application Errors</h5>
                        <div class="alert alert-danger" role="alert">
                            <template is="dom-repeat" items="{{psValidationErrorMessages}}">
                                {{item}}
                                <br>
                            </template>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn blm-btn-primary" data-dismiss="modal" on-tap="closeDialogPsSaveValidation" type="button">OK</button>
                    </div>
                </div>
            </div>
        </div>
    </template>
    <script>
        'use strict';
        Polymer({
            is: 'adoption-application',            
            properties: {
                isApproved: {
                    type: Boolean,
                    value: false
                },
                isSubmitted: {
                    type: Boolean,
                    value: true
                },
                appId: {
                    type: Number
                },
                userId: {
                    type: String,
                    value: ""
                },
                eligibilityStatus: {
                    type: String,
                    value: ""
                },
                numberOfAdoptedHorses: {
                    type: Number
                },
                numberOfAdoptedBurros: {
                    type: Number
                },
                numberOfAnimalsPurchased: {
                    type: Number
                },
                applicantLastName: {
                    type: String,
                    value: ""
                },
                applicantFirstName: {
                    type: String,
                    value: ""
                },
                applicantMiddleInitial: {
                    type: String,
                    value: ""
                },
                applicantStreetAddress: {
                    type: String,
                    value: ""
                },
                applicantCity: {
                    type: String,
                    value: ""
                },
                applicantState: {
                    type: String,
                    value: "",
                    observer: "applicantStateChanged"
                },
                applicantZipCode: {
                    type: String,
                    value: ""
                },
                driversLicenseNumber: {
                    type: String,
                    value: ""
                },
                driversLicenseState: {
                    type: String,
                    value: ""
                },
                birthDate: {
                    type: Date
                },
                tin: {
                    type: String,
                    value: ""
                },
                homePhone: {
                    type: String,
                    value: ""
                },
                alternatePhone: {
                    type: String,
                    value: ""
                },
                email: {
                    type: String,
                    value: ""
                },
                corralLength: {
                    type: Number
                },
                corralWidth: {
                    type: Number
                },
                corralHeight: {
                    type: Number
                },
                gateHeight: {
                    type: Number
                },
                gateWidth: {
                    type: Number
                },
                materialsCorral: {
                    type: String,
                    value: ""
                },
                materialsGate: {
                    type: String,
                    value: ""
                },
                typeOfShelter: {
                    type: String,
                },
                materialsShelter: {
                    type: String,
                    value: ""
                },
                typeOfHayPasture: {
                    type: String,
                    value: ""
                },
                amountPerDay: {
                    type: String,
                    value: ""
                },
                supplementalFeed: {
                    type: String,
                    value: "None"
                },
                tankCapacity: {
                    type: Number
                },
                automaticWater: {
                    type: Boolean,
                    value: false
                },
                wellWater: {
                    type: Boolean,
                    value: false
                },
                cityWater: {
                    type: Boolean,
                    value: false
                },
                otherWater: {
                    type: Boolean,
                    value: false
                },
                otherWaterDescription: {
                    type: String,
                    value: ""
                },
                stock: {
                    type: Boolean,
                    value: false,
                    observer: '_stockChanged'
                },
                horse: {
                    type: Boolean,
                    value: false,
                    observer: '_horseChanged'
                },
                homemade: {
                    type: Boolean,
                    value: false,
                    observer: '_homemadeChanged'
                },
                trailerCapacity: {
                    type: Number
                },
                yesDividers: {
                    type: Boolean,
                    value: false,
                    observer: '_yesDividersChanged'
                },
                noDividers: {
                    type: Boolean,
                    value: false,
                    observer: '_noDividersChanged'
                },
                yesFoldableDividers: {
                    type: Boolean,
                    value: false,
                    observer: '_yesFoldableChanged'
                },
                noFoldableDividers: {
                    type: Boolean,
                    value: false,
                    observer: '_noFoldableChanged'
                },
                oneRearDoor: {
                    type: Boolean,
                    value: false
                },
                twoRearDoors: {
                    type: Boolean,
                    value: false
                },
                yesRamp: {
                    type: Boolean,
                    value: false,
                    observer: '_yesRampChanged'
                },
                noRamp: {
                    type: Boolean,
                    value: false,
                    observer: '_noRampChanged'
                },
                fullRamp: {
                    type: Boolean,
                    value: false,
                    observer: '_fullRampChanged'
                },
                halfRamp: {
                    type: Boolean,
                    value: false,
                    observer: '_halfRampChanged'
                },
                fullHeightRearDoor: {
                    type: Boolean,
                    value: false,
                    observer: '_fullHeightChanged'
                },
                halfHeightRearDoor: {
                    type: Boolean,
                    value: false,
                    observer: '_halfHeightChanged'
                },
                yesTrailerCovered: {
                    type: Boolean,
                    value: false,
                    observer: '_yTrailerCoveredChanged'
                },
                noTrailerCovered: {
                    type: Boolean,
                    value: false,
                    observer: '_nTrailerCoveredChanged'
                },
                yesTrailerSolidTop: {
                    type: Boolean,
                    value: false,
                    observer: '_yTrailerSolidChanged'
                },
                noTrailerSolidTop: {
                    type: Boolean,
                    value: false,
                    observer: '_nTrailerSolidChanged'
                },
                trailerCoverDescr: {
                    type: String,
                    value: ''
                },
                yesAdoptedBefore: {
                    type: Boolean,
                    value: false,
                    observer: '_yAdoptedBeforeChanged'
                },
                noAdoptedBefore: {
                    type: Boolean,
                    value: false,
                    observer: '_nAdoptedBeforeChanged'
                },
                yesTitledAnimals: {
                    type: Boolean,
                    value: false,
                    observer: '_yTitledAnimalsChanged'
                },
                noTitledAnimals: {
                    type: Boolean,
                    value: false,
                },
                noUntitledAnimals: {
                    type: Number,
                    value: 0,
                },
                yesMoreThanFourUntitledAnimals: {
                    type: Boolean,
                    value: false,
                    observer: '_yMoreFourAnimalsChanged'
                },
                noMoreThanFourUntitledAnimals: {
                    type: Boolean,
                    value: false,
                    observer: '_nMoreFourAnimalsChanged'
                },
                yesAdoptedUnderAnotherLastName: {
                    type: Boolean,
                    value: false,
                    observer: '_yesAdoptedChanged'
                },
                noAdoptedUnderAnotherLastName: {
                    type: Boolean,
                    value: false,
                    observer: '_noAdoptedChanged'
                },
                otherLastName: {
                    type: String,
                    value: ""
                },
                yesAbuse: {
                    type: Boolean,
                    value: false,
                    observer: '_yAbuseChanged'
                },
                noAbuse: {
                    type: Boolean,
                    value: false,
                    observer: '_nAbuseChanged'
                },
                facilityAddress: {
                    type: String,
                    value: ''
                },
                facilityCity: {
                    type: String,
                    value: ''
                },
                facilityState: {
                    type: String,
                    value: '',
                    observer: "facilityStateChanged"
                },
                facilityZipCode: {
                    type: String,
                    value: ''
                },
                propertyOwnerName: {
                    type: String,
                    value: ""
                },
                facilityPhone: {
                    type: String,
                    value: ""
                },
                descriptionOfFacility: {
                    type: String,
                    value: "",
                    observer: "_descriptionOfFacilityChanged"
                },
                directionsToFacility: {
                    type: String,
                    value: "",
                    observer: "_directionsToFacilityChanged"
                },
                approvedBurros: {
                    type: Number
                },
                approvedYoungHorses: {
                    type: Number
                },
                approvedOldHorses: {
                    type: Number
                },
                approvedTrainedAnimals: {
                    type: Number
                },
                approvedTotalAnimals: {
                    type: Number
                },
                disapproved: {
                    type: Boolean,
                    value: false
                },
                geoStates: {
                    type: Array,
                    value: ['', 'AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'DC', 'FL', 'GA', 'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MD', 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ', 'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 'WV', 'WI', 'WY',
                        'AB', 'BC', 'MB', 'NB', 'NL', 'NS', 'ON', 'PE', 'QC', 'SK'],
                },
                animalAdoptionForm: {
                    type: Object,
                    value: null
                },
                mapKey: {
                    type: String,
                    value: ""
                },
                mapUrl: {
                    type: String,
                    value: ""
                },
                deniedReason: {
                    type: String,
                    value: ""
                },
                approvalComment: {
                    type: String, value: ""
                },
                signatureProhibitedActions: {
                    type: Boolean
                },
                signatureProhibitedSelling: {
                    type: Boolean
                },
                submitDate: {
                    type: String
                },
                blmOfficialsName: {
                    type: String
                },
                blmOfficialsOffice: {
                    type: String
                },
                savedFormName: {
                    type: String
                },
                appData: {
                    type: Object
                },
                reviewBeginDate: {
                    type: Date
                },
                reviewDecisionDate: {
                    type: Date,
                },
                blmOfficialSignature: {
                    type: Boolean
                },
                pastureFenceHeight: {
                    type: Number
                },
                drawLegacyImages: {
                    type: Array,
                    value: new Array()
                },
                yesAttachedToCorral: {
                    type: Boolean,
                    value: false
                },
                noAttachedToCorral: {
                    type: Boolean,
                    value: false
                },
                corralAccessible: {
                    type: String,
                    value: ""
                },
                numberOfTitledBurros: {
                    type: Number
                },
                numberOfTitledHorses: {
                    type: Number
                },
                isAnimalStoredAtAdoptersAddress: {
                    type: Boolean,
                    value: false
                },
                blmUserLegalEntityId: {
                    type: Number
                },
                blmUserOfficeIdLegalEntity: {
                    type: Number
                },
                WHBPSAdoptionApplicationId: {
                    type: Number
                },
                userMatched: {
                    type: Boolean,
                    value: false,
                },
                psValidationErrorMessages: {
                    type: Array,
                    value: function () { return new Array() }
                },
                dateFormat: {
                    type: String,
                    value: "mm/dd/yyyy"
                },
                renew: {
                    type: Boolean,
                    value: false
                },
                redirectPath: {
                    type: String,
                    value: false
                }
            },
            showReviewAttachments: function (admin, submitted) {
                return !admin && submitted;
            },
            showManageAttachments: function (admin, submitted) {
                return admin || !submitted;
            },
            showApprovalSection: function (admin, approved) {
                return admin || approved;
            },
            applyApprovedSettings: function () {
                $("#blmDisapproved").prop("disabled", true);
                $("#blmSignature").prop("disabled", true);
                $("#blmOfficialsName").prop("disabled", true);
                $("#blmOffice").prop("disabled", true);
                $("#blmDate").prop("disabled", true);
                $("#btnMatchUser").prop("disabled", true);
                $("#btnApprove").prop("disabled", true);
            },
            attached: function () {
                this.processing = false;
                this.isAdmin = false;
                this.isDenied = false;
                this.forceInvalidAddress = false;
                
                $(document).on("newPastureFenceHeight", this.newPastureFenceHeight);
                $("#shelterLink").attr("href", window.location.href + "#shelterReq");

                $("#blmDisapproved").prop("required", false);
                $("#blmSignature").prop("required", false);
                $("#blmOfficialsName").prop("required", false);
                $("#blmOffice").prop("required", false);
                $("#blmDate").prop("required", false);

                $("#txtOtherWater").prop("required", false);

                if (this.renew) {
                    if (this.redirectPath) {
                        window.location = this.redirectPath;
                    }
                    this.populateForm(this.appData);
                }
                else {
                    if (this.appData && this.appData.appId) {  //existing application
                        this.appId = this.appData.appId;
                        this.expired = this.appData.expired;
                        this.numberOfAdoptedHorses = this.appData.numberOfAdoptedHorses;
                        this.numberOfAdoptedBurros = this.appData.numberOfAdoptedBurros;
                        this.numberOfAnimalsPurchased = this.appData.numberOfAnimalsPurchased;
                        this.numberOfDeferredPickups = this.appData.numberOfDeferredPickups;
                        this.eligibilityStatus = this.appData.eligibilityStatus;
                        this.aipEligibilityStatus = this.appData.aipEligibilityStatus;
                        this.numberOfTitledBurros = this.appData.numberOfTitledBurros;
                        this.numberOfTitledHorses = this.appData.numberOfTitledHorses;
                        this.blmUserLegalEntityId = this.appData.blmUserLegalEntityId;
                        this.blmUserOfficeIdLegalEntity = this.appData.blmUserOfficeIdLegalEntity;
                        this.untitledAnimalCount = this.appData.untitledAnimalCount;

                        if (this.untitledAnimalCount > 3) {
                            this.showUntitledAnimalWarning = true;
                        }

                        this.getData();
                    }
                    else {  //new application
                        var applicantState = $("#ddlState");
                        this.populateState(applicantState, this.appData.State);
                        var driversLicenseState = $("#ddlDriversLicenseState");
                        this.populateState(driversLicenseState, null);
                        var facState = $("#txtFacilityState");
                        this.populateState(facState, null);

                        this.applicantLastName = this.appData.LastName;
                        this.applicantFirstName = this.appData.FirstName;
                        this.applicantStreetAddress = this.appData.Address;
                        this.applicantCity = this.appData.City;
                        this.applicantState = this.appData.State;
                        this.applicantZipCode = this.appData.ZipCode;
                        this.homePhone = this.appData.PhoneNumber;
                        this.email = this.appData.Email;
                        this.userId = this.appData.UserName;
                        this.showLegacyDrawing = false;
                    }
                }
                if ($user.IsAuthenticated && $user.Name.indexOf("blm.gov") > 0) {
                    this.isAdmin = true;
                    $("#editFields :input").prop("disabled", true);
                    this.$.facilityDraw.disableCanvas = true;

                    if (this.isApproved) {
                        this.applyApprovedSettings();
                    }

                    if (this.expired) {
                        $("#adminButtons :input").prop("disabled", true);
                    }
                }
                else if ($user.IsAuthenticated && this.submitDate && !this.isDenied) {
                    $("#editFields :input").prop("disabled", true);
                    this.isSubmitted = true;

                    if (this.isApproved) {
                        this.applyApprovedSettings();
                    }
                    this.$.facilityDraw.disableCanvas = true;
                }
                else {
                    $("#editFields :input").removeAttr("disabled");
                    this.isSubmitted = false;
                    this.$.facilityDraw.disableCanvas = false;
                }

                $("#btnManageAttachments").removeAttr("disabled");
                $("#btnManageAttachments").removeProp("disabled");

                if (this.facilityAddress) {
                    this.mapUrl = 'https://www.google.com/maps/embed/v1/place?key=' + this.mapKey + '&q=' + encodeURIComponent(this.facilityAddress + "," + this.facilityCity + "," + this.facilityState + "," + this.facilityZipCode);
                }
                else {
                    this.mapUrl = 'https://www.google.com/maps/embed/v1/place?key=' + this.mapKey + '&q=United States';
                }
                $("#gridBody").hide();
                $("#noUserBody").hide();
                $("#copyUserAttr").hide();
                $("#errorBody").hide();
                $("#successCreateBody").addClass('hidden');

                if (this.isDenied) {
                    $("#btnDeny").prop("disabled", true);
                }

                if (Modernizr.issafari) {
                    this.dateFormat = 'yyyy/mm/dd';
                }

                //**** THESE ARE LEGACY APPLICATIONS.  READ ONLY FOR HISTORICAL USE. ****
                $("#editFields :input").prop("disabled", true);
                $("#adminButtons :input").prop("disabled", true);
                $("#userButtons :input").prop("disabled", true);
            },
            closeDialogPsSaveValidation: function () {
                $("#dialogPsSaveValidation").modal('hide');
            },
            newPastureFenceHeight: function (e) {
                this.pastureFenceHeight = e.message;
            },
            getData: function () {
                var model = this;

                $.ajax({
                    type: "GET",
                    url: '/ctxapp/documents/adoption/' + this.appId,
                    async: false,
                    dataType: 'json',
                    cache: false,
                    success: function (data) {
                        console.log(data);
                        model.appData = data;

                        if (data.HasLegacyFacilityDrawing) {
                            model.getLegacyFacilityDrawings(data.AdoptionApplicationId);
                        }

                        if (model.eligibilityStatus != "Eligible") {
                            $("#txtEligibilityStatus").addClass("error");
                        }

                        model.isApproved = data.Review == "Approved";
                        model.isDenied = data.Review == "Denied";

                        if (data.LegalEntityID == null) {
                            model.userMatched = false;
                        }
                        else {
                            model.userMatched = true;
                        }

                        model.populateForm(data);
                    },
                    error: function (response) {
                        var errMsg = getXhrErrorMessage(response);
                        if (errMsg) {
                            alert(errMsg);
                        }
                    }
                });
            },
            getLegacyFacilityDrawings: function (appId) {
                var model = this;
                $.ajax({
                    type: "GET",
                    url: '/ctxapp/documents/adoption/' + appId + '/legacy-drawing',
                    async: false,
                    dataType: 'json',
                    cache: false,
                    success: function (data) {
                        model.populateLegacyFacilityDrawing(data);
                    },
                    error: function (response) {
                        var errMsg = getXhrErrorMessage(response);
                        if (errMsg) {
                            alert(errMsg);
                        }
                    }
                });
            },
            populateForm: function (data) {
                if (!data) {
                    return;
                }

                this.appId = data.AdoptionApplicationId;
                this.userId = data.Applicant.UserId;
                this.applicantID = data.Applicant.ApplicantId;
                this.applicantLastName = data.Applicant.ApplicantLastName;
                this.applicantFirstName = data.Applicant.ApplicantFirstName;
                this.applicantMiddleInitial = data.Applicant.ApplicantMiddleInitial;
                this.applicantStreetAddress = data.Applicant.ApplicantStreetAddress;
                this.applicantCity = data.Applicant.ApplicantCity;

                var applicantState = $("#ddlState");
                if (applicantState != undefined || applicantState != null) this.populateState(applicantState, data.Applicant.ApplicantState);

                this.applicantState = data.Applicant.ApplicantState;
                this.applicantZipCode = data.Applicant.ApplicantZipCode;
                this.driversLicenseNumber = data.Applicant.ApplicantDriversLicenseNumber;

                var driversLicenseState = $("#ddlDriversLicenseState");
                if (driversLicenseState != undefined || driversLicenseState != null) this.populateState(driversLicenseState, data.Applicant.ApplicantDriversLicenseState);

                this.driversLicenseState = data.Applicant.ApplicantDriversLicenseState;
                this.birthDate = moment(data.Applicant.ApplicantBirthDate).format("YYYY-MM-DD");
                this.tin = formatSSN(data.Applicant.ApplicantTIN);
                this.homePhone = formatPhoneNumber(data.Applicant.ApplicantPhone);
                this.alternatePhone = formatPhoneNumber(data.Applicant.ApplicantAlternatePhone);
                this.email = data.Applicant.ApplicantEmail;
                this.corralLength = data.CorralLength;
                this.corralWidth = data.CorralWidth;
                this.corralHeight = data.CorralHeight;
                this.gateHeight = data.GateHeight;
                this.gateWidth = data.GateWidth;
                this.materialsCorral = data.MaterialsCorral;
                this.materialsGate = data.MaterialsGate;
                this.typeOfShelter = data.TypeOfShelter;
                this.materialsShelter = data.MaterialsShelter;
                this.maxShelterHeight = data.MaxShelterHeight;
                this.minShelterHeight = data.MinShelterHeight;
                this.typeOfHayPasture = data.TypeOfHayPasture;
                this.amountPerDay = data.AmountPerDay;
                this.supplementalFeed = data.SupplementalFeed;
                this.tankCapacity = data.TankCapacity;
                this.automaticWater = data.AutomaticWater;
                this.wellWater = data.WellWater;
                this.cityWater = data.CityWater;
                this.otherWater = data.OtherWater;
                this.otherWaterDescription = data.OtherWaterDescription;
                this.stock = data.Stock;
                this.horse = data.Horse;
                this.homemade = data.Homemade;
                this.trailerCapacity = data.TrailerCapacity;
                this.yesDividers = data.YesDividers;
                this.noDividers = data.NoDividers;
                this.yesFoldableDividers = data.YesFoldableDividers;
                this.noFoldableDividers = data.NoFoldableDividers;
                this.oneRearDoor = data.OneRearDoor;
                this.twoRearDoors = data.TwoRearDoors;
                this.yesRamp = data.YesRamp;
                this.noRamp = data.NoRamp;
                this.fullRamp = data.FullRamp;
                this.halfRamp = data.HalfRamp;
                this.fullHeightRearDoor = data.FullHeightRearDoor;
                this.halfHeightRearDoor = data.HalfHeightRearDoor;
                this.yesTrailerCovered = data.YesTrailerCovered;
                this.noTrailerCovered = data.NoTrailerCovered;
                this.yesTrailerSolidTop = data.YesTrailerSolidTop;
                this.noTrailerSolidTop = data.NoTrailerSolidTop;
                this.trailerCoverDescr = data.TrailerCoverDescr;
                this.yesAdoptedBefore = data.YesAdoptedBefore;
                this.noAdoptedBefore = data.NoAdoptedBefore;
                this.yesTitledAnimals = data.YesTitledAnimals;
                this.noTitledAnimals = data.NoTitledAnimals;
                this.noUntitledAnimals = data.NoUntitledAnimals;
                this.yesMoreThanFourUntitledAnimals = data.YesMoreThanFourUntitledAnimals;
                this.noMoreThanFourUntitledAnimals = data.NoMoreThanFourUntitledAnimals;
                this.yesAdoptedUnderAnotherLastName = data.YesAdoptedUnderAnotherLastName;
                this.noAdoptedUnderAnotherLastName = data.NoAdoptedUnderAnotherLastName;
                this.otherLastName = data.OtherLastName;
                this.yesAbuse = data.YesAbuse;
                this.noAbuse = data.NoAbuse;
                this.facilityAddress = data.FacilityAddress;
                this.facilityCity = data.FacilityCity;

                var facState = $("#txtFacilityState");
                if (facState != undefined || facState != null) this.populateState(facState, data.FacilityState);

                this.facilityState = data.FacilityState;
                this.facilityZipCode = data.FacilityZipCode;
                this.propertyOwnerName = data.PropertyOwnerName;
                this.facilityPhone = formatPhoneNumber(data.FacilityPhone);
                this.directionsToFacility = data.DirectionsToFacility;
                this.descriptionOfFacility = data.DescriptionOfFacility;
                this.signatureProhibitedActions = data.SignatureProhibitedActions;
                this.signatureProhibitedSelling = data.SignatureProhibitedSelling;
                this.approvedBurros = data.NoOfApprovedBurros;
                this.approvedYoungHorses = data.NoOfHorsesYoung;
                this.approvedOldHorses = data.NoOfHorsesOld;
                this.approvedTrainedAnimals = data.NoOfTrainedAnimals
                this.approvedTotalAnimals = data.NoOfAnimalsApprovedForFacility;
                this.submitDate = data.SubmitDate;
                this.blmOfficialsName = data.BlmOfficialsName;
                this.blmOfficialsOffice = data.BlmOfficialsOffice;
                this.reviewBeginDate = data.ReviewBeginDate;
                this.reviewDecisionDate = data.ReviewDecisionDate;

                if ($user.IsAuthenticated && $user.Name.indexOf("blm.gov") > 0 && data.ReviewDecisionDate === null) {
                    $("#blmDate").val(getDateString(new Date().toLocaleString(), "mm/dd/yyyy"));
                }
                else if (data.ReviewDecisionDate != null) {
                    $("#blmDate").val(getDateString(data.ReviewDecisionDate, "mm/dd/yyyy"));
                }

                this.blmOfficialSignature = data.BlmOfficialSignature;
                this.disapproved = data.Disapproved;
                this.pastureFenceHeight = data.PastureFenceHeight;
                this.yesAttachedToCorral = data.YesAttachedToCorral;
                this.noAttachedToCorral = data.NoAttachedToCorral;
                this.corralAccessible = data.CorralAccessible;
                this.review = data.Review;
                this.savedFormName = data.SavedFormName;
                this.isAnimalStoredAtAdoptersAddress = data.IsAnimalStoredAtAdoptersAddress;
                this.legalEntityID = data.LegalEntityID;

                this.$.facilityDraw.savedCanvas = data.FacilityDrawing;
                this.showLegacyDrawing = data.HasLegacyFacilityDrawing;
                this.unreadCommentCount = data.UnreadCommentCount > 0 ? '(' + data.UnreadCommentCount + ')' : '';

                //Displays text value on hover.  Useful if text overflows input
                $("input[type=text], textarea").each(function () {
                    if (this.value) {
                        $(this).attr("title", this.value);
                    }
                });
            },
            populateLegacyFacilityDrawing: function (data) {
                var canvas = this.$.facilityDrawLegacy.$.canvas;

                if (canvas != undefined || canvas != null) {
                    //Repopulate the array that runs the facility drawing tool
                    var facilityDrawLegacy = document.querySelector("adoption-application");

                    if (facilityDrawLegacy != undefined || facilityDrawLegacy != null) {
                        for (var i = 0; i < data.length; i++) {
                            if (data[i].DrawType == "Line") {
                                var image = { id: data[i].FacilityDrawingId, img: "", x: 0, y: 0, w: 0, h: 0, AdoptionApplication: { id: data[i].AdoptionApplication.AdoptionApplicationId }, linePoints: data[i].LinePoints };
                                this.drawLegacyImages.push(image);
                            }
                            else {
                                var img = document.createElement("img");
                                img.setAttribute("src", data[i].Src);
                                img.setAttribute("width", data[i].Width);
                                img.setAttribute("height", data[i].Height);
                                var image = { id: data[i].FacilityDrawingId, img: img, x: data[i].X, y: data[i].Y, w: data[i].Width, h: data[i].Height, AdoptionApplication: { id: data[i].AdoptionApplication.AdoptionApplicationId } };
                                this.drawLegacyImages.push(image);
                            }
                        }
                    }
                }
            },
            populateState: function (e, defState) {
                for (var i = 0; i < this.geoStates.length; i++) {
                    if (defState != null && defState == this.geoStates[i]) {
                        e.append('<option selected>' + this.geoStates[i]) + '</option>';
                    } else {
                        e.append('<option>' + this.geoStates[i]) + '</option>';
                    }
                }
            },
            editForm: function () {
                $("#editFields :input").removeAttr("disabled");
                this.$.facilityDraw.disableCanvas = false;
            },

            updateFacilityAddress: function (e) {
                var model = this;

                if (e.currentTarget.checked) {
                    this.propertyOwnerName = this.applicantFirstName + " " + this.applicantLastName;
                    this.facilityAddress = this.applicantStreetAddress == null ? "" : this.applicantStreetAddress;
                    this.facilityCity = this.applicantCity == null ? "" : this.applicantCity;
                    this.facilityState = this.applicantState == null ? "" : this.applicantState;
                    //Needed for IE to select state
                    var facState = $("#txtFacilityState")[0];
                    if (facState != undefined || facState != null) {
                        for (var i = 0; i < facState.length; i++) {
                            if (facState[i].value == this.applicantState) facState[i].selected = true;
                        }
                    }

                    this.facilityZipCode = this.applicantZipCode == null ? "" : this.applicantZipCode;
                    this.facilityPhone = this.homePhone;
                    this.renderMap();
                }
                else {
                    this.propertyOwnerName = "";
                    this.facilityAddress = "";
                    this.facilityCity = "";
                    this.facilityState = "";
                    var facState = $("#txtFacilityState")[0];
                    if (facState != undefined || facState != null) facState[0].selected = true;

                    this.facilityZipCode = "";
                    this.facilityPhone = "";
                }
            },
            testYesAttachedToCorral: function (e) {
                var check = ($("input[id='cbYesAttachedToCorral']:checked").val() === "on") ? true : false

                if (check) {
                    $("#txtCorralAccessible").prop("required", false);
                    $("#txtCorralAccessible").removeClass('error');
                    $("#corralAccessibleError").addClass('hidden');
                    this.corralAccessible = "";
                }
            },
            testNoAttachedToCorral: function (e) {
                var check = ($("input[id='cbNoAttachedToCorral']:checked").val() === "on") ? true : false

                if (check) {
                    $("#txtCorralAccessible").prop("required", true);
                }
                else {
                    $("#txtCorralAccessible").prop("required", false);
                }

            },
            testOtherWaterCheckBox: function (e) {
                var check = ($("input[id='cbOtherWater']:checked").val() === "on") ? true : false

                if (check) {
                    $("#txtOtherWater").prop("required", true);
                    $("#txtOtherWater").addClass('error');
                    $("#otherWaterError").removeClass('hidden');
                }
                else {
                    $("#txtOtherWater").prop("required", false);
                    $("#txtOtherWater").removeClass('error');
                    $("#otherWaterError").addClass('hidden');
                }
            },
            testOtherWater: function () {
                var check = ($("input[id='cbOtherWater']:checked").val() === "on") ? true : false

                if (check && $("#txtOtherWater").val() != "") {
                    $("#txtOtherWater").removeClass('error');
                    $("#otherWaterError").addClass('hidden');
                }
                else if (check && $("#txtOtherWater").val() === "") {
                    $("#txtOtherWater").addClass('error');
                    $("#otherWaterError").removeClass('hidden');
                }
            },
            testYesDividers: function () {
                var check = ($("input[id='cbYesDividers']:checked").val() === "on") ? true : false

                if (check) {
                    $("#cbYesFoldableDividers").prop("required", true);
                }
                else {
                    $("#cbYesFoldableDividers").prop("required", false);
                }
            },
            testYesRamp: function () {
                var check = ($("input[id='cbYesRamp']:checked").val() === "on") ? true : false

                if (check) {
                    $("#cbFullRamp").prop("required", true);
                }
                else {
                    $("#cbFullRamp").prop("required", false);
                }
            },
            testYesSolidTopRadioButton: function () {
                var isSolidTop = ($("input[id='cbYesTrailerSolidTop']:checked").val() === "on") ? true : false;

                if (isSolidTop) {
                    $("#txtDescrTrailerCover").val('');
                    $("#txtDescrTrailerCover").removeClass('error');
                    $("#solidTopError").addClass('hidden');
                }
            },
            testNoSolidTopRadioButton: function () {
                var check = ($("input[id='cbNoTrailerSolidTop']:checked").val() === "on") ? true : false;

                if (check) {
                    $("#txtDescrTrailerCover").addClass('error');
                    $("#solidTopError").removeClass('hidden');
                }
                else {
                    $("#txtDescrTrailerCover").removeClass('error');
                    $("#solidTopError").addClass('hidden');
                }
            },
            testSolidTop: function () {
                var check = ($("input[id='cbNoTrailerSolidTop']:checked").val() === "on") ? true : false;

                if (check && $("#txtDescrTrailerCover").val() != "") {
                    $("#txtDescrTrailerCover").removeClass('error');
                    $("#solidTopError").addClass('hidden');
                }
                else if (check && $("#txtDescrTrailerCover").val() === "") {
                    $("#txtDescrTrailerCover").addClass('error');
                    $("#solidTopError").removeClass('hidden');
                }
            },
            testYesAdoptedBeforeRadioButton: function () {
                var check = ($("input[id='cbYesAdoptedBefore']:checked").val() === "on") ? true : false;

                if (check) {
                    $("#cbYesTitledAnimals").prop("required", true);
                }
                else {
                    $("#cbYesTitledAnimals").prop("required", false);
                }
            },
            testNoAdoptedBeforeRadioButton: function () {
                var check = ($("input[id='cbNoAdoptedBefore']:checked").val() === "on") ? true : false;
                $("#cbYesTitledAnimals").prop("required", false);
                this.yesTitledAnimals = false;
                this.noTitledAnimals = false;
                this.noUntitledAnimals = 0;

                $("#txtNoUntitledAnimals").prop("required", false);
                $("#txtNoUntitledAnimals").removeClass('error');
            },
            testYesTitledAnimalsRadioButton: function () {
                var check = ($("input[id='cbYesTitledAnimals']:checked").val() === "on") ? true : false;

                if (check) {
                    $("#txtNoUntitledAnimals").prop("required", false);
                    $("#txtNoUntitledAnimals").removeClass('error');
                    this.noUntitledAnimals = 0;
                }
            },
            testNoTitledAnimalsRadioButton: function () {
                var check = ($("input[id='cbNoTitledAnimals']:checked").val() === "on") ? true : false;

                if (check) {
                    $("#txtNoUntitledAnimals").prop("required", true);
                    $("#txtNoUntitledAnimals").addClass('error');
                }
                else {
                    $("#txtNoUntitledAnimals").prop("required", false);
                    $("#txtNoUntitledAnimals").removeClass('error');
                }
            },
            testNoUntitledAnimals: function () {
                var check = ($("input[id='cbNoTitledAnimals']:checked").val() === "on") ? true : false;

                if (check && $("#txtNoUntitledAnimals").val() != "") {
                    $("#txtNoUntitledAnimals").removeClass('error');
                }
                else if (check && $("#txtNoUntitledAnimals").val() === "") {
                    $("#txtNoUntitledAnimals").addClass('error');
                }
            },
            testOtherLastNameRadioButton: function () {
                var check = ($("input[id='cbYesAdoptedUnderAnotherLastName']:checked").val() === "on") ? true : false;

                if (check) {
                    $("#txtOtherLastName").prop("required", true);
                    $("#txtOtherLastName").addClass('error');
                    $("#otherLastNameError").removeClass('hidden');
                }
                else {
                    $("#txtOtherLastName").prop("required", false);
                    $("#txtOtherLastName").removeClass('error');
                    $("#otherLastNameError").addClass('hidden');
                }
            },
            testOtherLastName: function () {
                var check = ($("input[id='cbYesAdoptedUnderAnotherLastName']:checked").val() === "on") ? true : false;
                var noCheck = ($("input[id='cbNoAdoptedUnderAnotherLastName']:checked").val() === "on") ? true : false;

                if (check && $("#txtOtherLastName").val() != "") {
                    $("#txtOtherLastName").removeClass('error');
                    $("#otherLastNameError").addClass('hidden');
                }
                else if (check && $("#txtOtherLastName").val() === "") {
                    $("#txtOtherLastName").addClass('error');
                    $("#otherLastNameError").removeClass('hidden');
                }
                else if (!check && noCheck) {
                    $("#txtOtherLastName").removeClass('error');
                    $("#otherLastNameError").addClass('hidden');
                }
            },

            submitApplication: function (reviewStatus) {
                //CODE REMOVED - APPLICATION NO LONGER USED
            },
            closeForm: function () {
                var model = this;
                if (model.isAdmin) {
                    window.location = '/admin/documents';
                }
                else {
                    window.location = '/document';
                }
            },
            //Shows a map of the facility location
            renderMap: function () {
                var iframeMap = $('#map');
                if (iframeMap != null) {
                    var uri = 'https://www.google.com/maps/embed/v1/place?key=' + this.mapKey + '&q=' + encodeURIComponent(this.facilityAddress + "," + this.facilityCity + "," + this.facilityState + "," + this.facilityZipCode);
                    iframeMap.attr('src', uri);
                }
            },
            //Fires when a public user submits a brand new adoption application
            publicUserSubmit: function () {
                this.submitApplication("PublicUserSubmit");
            },
            //Fires when a BLM user saves a public user's adoption application
            adminSave: function () {
                $("#blmDisapproved").prop("required", false);
                $("#blmSignature").prop("required", false);
                $("#blmOfficialsName").prop("required", false);
                $("#blmOffice").prop("required", false);
                $("#blmDate").prop("required", false);
                this.submitApplication("Saved");
            },

            //Opens denied reason dialog, so blm user can enter a denial reason
            deny: function () {
                $("#dialogDeniedReason").modal("show");
            },
            approve: function () {
                $("#dialogApproveComment").modal("show");
            },
            //Fires when a BLM user denies a public user's adoption application
            saveDeniedReason: function () {
                if (!this.deniedReason.trim()) {
                    alert('Please add a denial reason');
                    return;
                }
                $("#blmDisapproved").prop("required", true);
                $("#blmSignature").prop("required", true);
                $("#blmOfficialsName").prop("required", true);
                $("#blmOffice").prop("required", true);
                $("#blmDate").prop("required", true);
                this.submitApplication("Denied");
            },
            saveForLater: function () {
                $("#dialogSaveForLater").modal('show');
            },
            publicUserSave: function () {
                this.submitApplication("Draft");
            },
            manageAttachments: function () {
                if (!this.appId) {
                    this.submitApplication("SaveAttachmentsForm");
                } else {
                    this.$.manageAttachments.open("AdoptionApplications", this.appId);
                }
            },
            reviewAttachments: function () {
                if (this.appId) {
                    this.$.reviewAttachments.open("AdoptionApplications", this.appId);
                }
            },
            showComments: function () {
                var url = '/document/adoption/' + this.appId;
                this.$.comments.open(url, 'adoption', 'Adoption', this.appId, !this.isApproved);
            },
            matchPsUser: function () {
                //CODE REMOVED - APPLICATION NO LONGER USED
            },

            approveSendToPS: function () {
                //CODE REMOVED - APPLICATION NO LONGER USED
            },
            clearPsValidationErrorMessges: function () {
                var l = this.psValidationErrorMessages.length;

                for (var i = 0; i < l; i++) {
                    this.pop("psValidationErrorMessages");
                }
            },
            validatePsSubmission: function () {
                //Clear psValidationErrorMessages array
                this.clearPsValidationErrorMessges();

                var isValid = true;

                if (this.legalEntityID === undefined || this.legalEntityID === null || this.legalEntityID === 0) {
                    this.push("psValidationErrorMessages", "Public user does not have a PS legal entity id.");
                    isValid = false;
                }
                if (this.blmUserLegalEntityId === undefined || this.blmUserLegalEntityId === null || this.blmUserLegalEntityId === 0) {
                    this.push("psValidationErrorMessages", "BLM user does not have a PS legal entity id.");
                    isValid = false;
                }
                if (this.blmUserOfficeIdLegalEntity === undefined || this.blmUserOfficeIdLegalEntity === null || this.blmUserOfficeIdLegalEntity === 0) {
                    this.push("psValidationErrorMessages", "BLM user office does not have a PS legal entity id.");
                    isValid = false;
                }

                return isValid;
            },
            print: function () {
                this.$.facilityDraw.setupPrintCanvas();

                if (Modernizr.issafari) {
                    alert("Please use Safari's print functionality by pressing the OSX Command Key and P.")
                }
                else {
                    setTimeout(function () {
                        window.print();
                    }, 1000);
                }
            },
            _descriptionOfFacilityChanged: function () {
                if (this.descriptionOfFacility) {
                    $(this.$.descriptionOfFacilityDiv).html(this.descriptionOfFacility.replace(/(?:\r\n|\r|\n)/g, "<br />"));
                }
            },
            _directionsToFacilityChanged: function () {
                $(this.$.directionsToFacilityDiv).html(this.directionsToFacility.replace(/(?:\r\n|\r|\n)/g, "<br />"));
            },
            _stockChanged: function (newVal) {
                if (newVal) {
                    this.horse = false;
                    this.homemade = false;
                }
            },
            _horseChanged: function (newVal) {
                if (newVal) {
                    this.stock = false;
                    this.homemade = false;
                }
            },
            _homemadeChanged: function (newVal) {
                if (newVal) {
                    this.stock = false;
                    this.horse = false;
                }
            },
            _yesFoldableChanged: function (newVal) {
                if (newVal) {
                    this.noFoldableDividers = false;
                }
            },
            _noFoldableChanged: function (newVal) {
                if (newVal) {
                    this.yesFoldableDividers = false;
                }
            },
            _yesDividersChanged: function (newVal) {
                if (newVal) {
                    this.noDividers = false;
                }
            },
            _noDividersChanged: function (newVal) {
                if (newVal) {
                    this.yesDividers = false;
                }
            },
            _yesRampChanged: function (newVal) {
                if (newVal) {
                    this.noRamp = false;
                }
            },
            _noRampChanged: function (newVal) {
                if (newVal) {
                    this.yesRamp = false;
                }
            },
            _fullRampChanged: function (newVal) {
                if (newVal) {
                    this.halfRamp = false;
                }
            },
            _halfRampChanged: function (newVal) {
                if (newVal) {
                    this.fullRamp = false;
                }
            },
            _fullHeightChanged: function (newVal) {
                if (newVal) {
                    this.halfHeightRearDoor = false;
                }
            },
            _halfHeightChanged: function (newVal) {
                if (newVal) {
                    this.fullHeightRearDoor = false;
                }
            },
            _yTrailerCoveredChanged: function (newVal) {
                if (newVal) {
                    this.noTrailerCovered = false;
                }
            },
            _nTrailerCoveredChanged: function (newVal) {
                if (newVal) {
                    this.yesTrailerCovered = false;
                }
            },
            _yTrailerSolidChanged: function (newVal) {
                if (newVal) {
                    this.noTrailerSolidTop = false;
                }
            },
            _nTrailerSolidChanged: function (newVal) {
                if (newVal) {
                    this.yesTrailerSolidTop = false;
                }
            },
            _yAdoptedBeforeChanged: function (newVal) {
                if (newVal) {
                    this.noAdoptedBefore = false;
                }
            },
            _nAdoptedBeforeChanged: function (newVal) {
                if (newVal) {
                    this.yesAdoptedBefore = false;
                }
            },
            _yTitledAnimalsChanged: function (newVal) {
                if (newVal) {
                    this.noTitledAnimals = false;
                }
            },
            _nitledAnimalsChanged: function (newVal) {
                if (newVal) {
                    this.yesTitledAnimals = false;
                }
            },
            _yMoreFourAnimalsChanged: function (newVal) {
                if (newVal) {
                    this.noMoreThanFourUntitledAnimals = false;
                }
            },
            _nMoreFourAnimalsChanged: function (newVal) {
                if (newVal) {
                    this.yesMoreThanFourUntitledAnimals = false;
                }
            },
            _yesAdoptedChanged: function (newVal) {
                if (newVal) {
                    this.noAdoptedUnderAnotherLastName = false;
                }
            },
            _noAdoptedChanged: function (newVal) {
                if (newVal) {
                    this.yesAdoptedUnderAnotherLastName = false;
                }
            },
            _yAbuseChanged: function (newVal) {
                if (newVal) {
                    this.noAbuse = false;
                }
            },
            _nAbuseChanged: function (newVal) {
                if (newVal) {
                    this.yesAbuse = false;
                }
            },
            applicantStateChanged: function (geoState) {
                this.geoStateChanged(geoState, this.$.txtZipCode)
            },
            facilityStateChanged: function (geoState) {
                this.geoStateChanged(geoState, this.$.txtFacilityZipCode)
            },
            geoStateChanged: function (geoState, zipControl) {
                if (geoState) {
                    var canadaProvinces = 'AB BC MB NB NL NS ON PE QC SK';
                    if (canadaProvinces.indexOf(geoState) >= 0) {
                        $('#' + zipControl.id).attr('maxlength', '7');
                    }
                    else {
                        $('#' + zipControl.id).attr('maxlength', '5');
                    }
                }
            },
            showCorralInfo: function () {
                $(this.$.corralInfo).modal("show");
            },
            showTrailerInfo: function () {
                $(this.$.trailerInfo).modal("show");
            },
        });
    </script>
</dom-module>﻿<script src="../Scripts/jquery.form.min.js"></script>

<dom-module id="manage-attachments">
    <template>
        <style>
            :host {
                box-sizing: border-box;
            }
        </style>
        <div id="dialog" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" on-tap="_close" aria-label="Close"><span aria-hidden="true">×</span></button>
                        <h4 class="modal-title">{{attachmentsTitle}}</h4>
                    </div>
                    <div class="modal-body">
                        <div hidden$="{{readonly}}">
                            <form class="form-inline" id="uploadForm" method="POST" action$="/api/ctx/{{objectType}}/{{objectId}}/files" enctype="multipart/form-data">
                                <div id="alertArea" class="alert" hidden=""></div>
                                <input type="file" class="form-control" id="files" name="files" multiple="" accept=".docx,.pdf,image/*">
                                <div class="form-group">
                                    <label for="desc" class="control-label">Description</label>
                                    <input type="text" name="desc" id="desc" class="form-control" placeholder="optional">
                                </div>
                                <button disabled$="{{loading}}" id="upload" class="btn blm-btn-primary" type="button" on-tap="uploadFiles">
                                    <span hidden$="{{!loading}}">
                                        <i class="fa fa-spinner fa-pulse fa-fw"></i> Uploading...
                                    </span>
                                    <span hidden$="{{loading}}">
                                        Upload
                                    </span>
                                </button>
                            </form>
                            <div class="row">&nbsp;</div>
                        </div>
                        <power-grid id="uploadGrid" class="powergrid-nowrap" page-size="25" simple="" no-search="" stop-load="">
                            <grid-data url$="/api/ctx/{{objectType}}/{{objectId}}/files?nocache={{noCache}}"></grid-data>
                            <grid-open on-open="_viewFile"></grid-open>
                            <grid-field name="FileName" title="File Name" type="text" search="" width="300"></grid-field>
                            <grid-field name="Description" title="Description" type="text" width="200"></grid-field>
                            <grid-action title="View" on-action="_viewFile"></grid-action>
                            <grid-action title="Download" on-action="_downloadFile"></grid-action>
                            <grid-action title="Delete" valid="{{canDelete()}}" on-action="deleteFile"></grid-action>
                        </power-grid>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn blm-btn-secondary" on-tap="_close">Close</button>
                    </div>
                </div></div></div></template>
    <script>
        Polymer({
            is: 'manage-attachments',
            properties: {
                objectType: {
                    type: String,
                    value: ""
                },
                objectId: {
                    type: Number,
                    value: 0
                },
                attachmentsTitle: {
                    type: String,
                    value: ""
                },
                noCache: {
                    type: String
                },
                readonly: {
                    type: Boolean,
                    value: false
                }
            },

            attached: function () {
                this.noCache = (new Date()).getTime();
                this.loading = false;
            },

            open: function (objType, objId) {
                this.objectType = objType;
                this.objectId = objId;
                this.def = $.Deferred();
                $(this.$.dialog).modal("show");
                this.$.uploadGrid.hardreload();
                return this.def.promise();
            },

            _close: function () {
                $(this.$.dialog).modal("hide");
                this.def.resolve();
            },

            uploadFiles: function (e) {
                if (e) { e.preventDefault(); }

                var fileInput = document.getElementById('files');
                if (fileInput.value == "") {
                    $(this.$.alertArea).removeAttr("hidden").text("Please select a file").addClass("alert-danger");
                    return;
                };

                var allfiles = fileInput.files;
                for (var i = 0; i < allfiles.length; i++) {
                    if (allfiles[i].size > 10000000) {
                        $(this.$.alertArea).removeAttr("hidden").text("The size of each attached file must be under 10 MB.").addClass("alert-danger");
                        return;
                    }
                }

                this.loading = true;
                var model = this;
                $(this.$.uploadForm).ajaxSubmit({
                    resetForm: true,
                    dataType: 'json',
                    contentType: "application/json",
                    success: function () {
                        $(model.$.alertArea).removeAttr("hidden").text("File(s) Uploaded").removeClass("alert-danger").addClass("alert-success");
                        model.noCache = (new Date()).getTime();
                        model.$.uploadGrid.hardreload();
                        model.loading = false;
                        model.fire('attachmentchange', true);
                    },
                    error: function (resp) {
                        $(model.$.alertArea).removeAttr("hidden").text("Upload Failed - " + resp.statusText).removeClass("alert-success").addClass("alert-danger");
                        model.loading = false;
                    },
                });
            },
            deleteFile: function (e) {
                e.preventDefault();
                var model = this;

                if (confirm('Are you sure you wish to delete this file?')) {
                    $.ajax({
                        url: '/ctxapp/documents/attachment',
                        data: e.detail,
                        type: 'DELETE',
                        success: function () {
                            model.noCache = (new Date()).getTime();
                            model.$.uploadGrid.hardreload();
                            if (model.$.uploadGrid.totalRecordCount <= 1) { //totalRecordCount does not update immediately after a reload due to the async ajax call
                                model.fire('attachmentchange', false);
                            } else {
                                model.fire('attachmentchange', true);
                            }
                        },
                        error: function (response) {
                            var errMsg = getXhrErrorMessage(response);
                            if (errMsg) {
                                alert(errMsg);
                            }
                        }
                    });
                }
            },

            _viewFile: function (e) {
                console.log(e);

                var categoryType = "";
                for (var i = 0; i < $data._model.length; i++) {
                    if ($data._model[i].TypeName === e.detail.EntityType) {
                        categoryType = $data._model[i].Name;
                    }
                }

                window.open('/api/ctx/' + categoryType + '/' + e.detail.EntityId + '/files/' + e.detail.ID, '_blank');
            },

            _downloadFile: function (e) {
                var categoryType = "";
                for (var i = 0; i < $data._model.length; i++) {
                    if ($data._model[i].TypeName === e.detail.EntityType) {
                        categoryType = $data._model[i].Name;
                    }
                }

                window.location = "/api/ctx/" + categoryType + '/' + e.detail.EntityId + '/files/' + e.detail.ID + '?download=1';
            },
            canDelete: function () {
                var model = this;
                return function (e) {
                    return !model.readonly;
                };
            },
        });
    </script>
</dom-module><dom-module id="pickup-locations">
  <template>
    <style>
      :host() {
        display: block;
      }
    </style>

    <div class="modal fade" id="pickupOptionModal" role="dialog" tabindex="-1">
      <div class="modal-dialog" role="document" style="width: 600px;">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">Pickup Options {{mode}}</h4>
          </div>
          <div class="modal-body">
            <div style="text-align:center;" hidden$="{{!loading}}" id="loading">
              <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i><br>
              <h4>Loading...</h4>
            </div>
            <div hidden$="{{hideGrid}}" id="pickupLocationsGrid">
              <div class="row">
                <div class="col-sm-4">
                  <button class="btn btn-default" on-tap="addPickupLocation" style="margin-bottom: 10px;" type="button">Add</button>
                </div>
                <div class="col-sm-8">
                  <input class="form-control" id="txtSearchFilter" type="text" placeholder="Search..." value="{{pickupSearch::input}}">
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <div class="table-responsive">
                    <table class="table table-condensed" id="tblPickupLocations" style="table-layout: fixed;">
                      <thead style="display: block;">
                        <tr>
                          <th style="border-bottom: none; width: 60px;">Display</th>
                          <th style="border-bottom: none; width: 100px;">Prevent Event Updates</th>
                          <th style="border-bottom: none; width: 323px;">Pickup Location</th>
                        </tr>
                      </thead>
                      <tbody style="display: block; overflow-y: auto; height: 270px;">
                        <template id="pickupLocationTemplate" is="dom-repeat" items="{{pickupLocations}}" filter="{{computeFilter(pickupSearch)}}">
                          <tr>
                            <td style="text-align: center; width: 60px;">
                              <input class="checkbox-select" checked="{{item.DisplayToUser}}" data-facid="{{item.PickupLocationId}}" data-ps-facility="{{item.IsPsFacility}}" type="checkbox">
                            </td>
                            <td style="text-align: center; width: 100px;">
                              <input disabled$="{{!animalFlag}}" class="checkbox-prevent" checked="{{item.PreventEventUpdates}}" data-facid="{{item.PickupLocationId}}" data-ps-facility="{{item.IsPsFacility}}" type="checkbox">
                            </td>
                            <td style="width: 323px;">{{item.LocationName}}</td>
                            <td>
                              <button class="btn btn-default btn-xs" hidden$="{{item.IsPsFacility}}" on-tap="updatePickupLocation" data-item$="{{item.PickupLocationId}}" type="button" title="Edit"><span class="glyphicon glyphicon-edit"></span></button>
                            </td>
                            <td>
                              <button class="btn btn-default btn-xs" hidden$="{{!canDelete(item.IsPsFacility)}}" on-tap="deletePickupLocation" data-item$="{{item.PickupLocationId}}" type="button" title="Delete"><span class="glyphicon glyphicon-trash"></span></button>
                            </td>
                          </tr>
                        </template>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
            <div hidden$="{{hideAddOrUpdate}}">
              <div class="row">
                <div class="col-sm-12">
                  <div class="form-group">
                    <label for="txtPickupLocationName">Pickup Location Name</label>
                    <input class="form-control" id="txtPickupLocationName" type="text" value="{{pickupLocationName::input}}">
                  </div>
                  <div class="form-group">
                    <label for="txtStreetAddress">Street Address</label>
                    <input class="form-control" id="txtStreetAddress" type="text" value="{{streetAddress::input}}">
                  </div>
                  <div class="form-group">
                    <label for="txtCity">City</label>
                    <input class="form-control" id="txtCity" type="text" value="{{city::input}}">
                  </div>
                  <div class="form-group">
                    <label for="txtState">State</label>
                    <input class="form-control" id="txtState" type="text" value="{{stateCode::input}}">
                  </div>
                  <div class="form-group">
                    <label for="txtZipCode">Zip Code</label>
                    <input class="form-control" id="txtZipCode" type="text" value="{{zipCode::input}}">
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <div hidden$="{{hideGrid}}">
              <button class="btn blm-btn-secondary" on-tap="close">Cancel</button>
              <button class="btn blm-btn-primary" on-tap="save">Save</button>
            </div>
            <div hidden$="{{hideAddOrUpdate}}">
              <button class="btn blm-btn-secondary" on-tap="addOrUpdateClose">Cancel</button>
              <button disabled$="{{processing}}" class="btn blm-btn-primary" on-tap="addOrUpdateSave">Save</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script>
    'use strict';
    Polymer({
      is: 'pickup-locations',
      properties: {
        data: {
          type: String
        },
        pickupLocations: {
          type: Array
        },
        hideAddOrUpdate: {
          type: Boolean,
          value: true
        },
        hideGrid: {
          type: Boolean,
          value: false
        },
        animalFlag: {
          type: Boolean,
          value: false
        },
        animalsFlag: {
          type: Boolean,
          value: false
        },
        facilityFlag: {
          type: Boolean,
          value: false
        },
        facilityId: {
          type: String
        },
        freezemark: {
          type: String
        },
        eventFlag: {
          type: Boolean,
          value: false
        },
        currentLocationId: {
          type: String
        },
        pickupLocationName: {
          type: String,
          value: ''
        },
        streetAddress: {
          type: String,
          value: ''
        },
        city: {
          type: String,
          value: ''
        },
        stateCode: {
          type: String,
          value: ''
        },
        zipCode: {
          type: String,
          value: ''
        },
        pickupSearch: {
          type: String,
          value: ''
        },
        isAdmin: {
          type: Boolean,
          value: false
        },
      },
      storePickupLocations: function () {
        var model = this;

        // Set the DisplayToUser property for all checked boxes
        $('#tblPickupLocations .checkbox-select').each(function () {
          model.pickupLocations.filter(p => p.PickupLocationId == this.dataFacid && p.IsPsFacility == this.dataPsFacility)[0].DisplayToUser = this.checked;
        });
        $('#tblPickupLocations .checkbox-prevent').each(function () {
          model.pickupLocations.filter(p => p.PickupLocationId == this.dataFacid && p.IsPsFacility == this.dataPsFacility)[0].PreventEventUpdates = this.checked;
        });
      },
      computeFilter: function (filterString) {
        var model = this;

        model.storePickupLocations();

        if (filterString == null || filterString == "") {
          // Set the filter to null to disable filtering
          return null;
        } else {
          // Return a filter function for the current search string
          filterString = filterString.toLowerCase();

          return function (item) {
            var location = item.LocationName.toLowerCase();
            return (location.indexOf(filterString) !== -1);
          };
        }
      },
      addPickupLocation: function () {
        var model = this;

        model.storePickupLocations();

        this.pickupLocationId = null;
        this.mode = ' - Add';
        this.hideAddOrUpdate = false;
        this.hideGrid = true;
      },
      addOrUpdateClose: function () {
        this.hideAddOrUpdate = true;
        this.async(function () {
          this.getData();
        });
        this.hideGrid = false;
        this.mode = '';
        this.pickupLocationName = '';
        this.streetAddress = "";
        this.city = "";
        this.stateCode = "";
        this.zipCode = "";
      },
      addOrUpdateSave: function () {
        var model = this;
        var pickupLocation = {
          PickupLocationId: this.pickupLocationId,
          LocationName: this.pickupLocationName,
          StreetAddress: this.streetAddress,
          City: this.city,
          StateCode: this.stateCode,
          ZipCode: this.zipCode
        }

        model.processing = true;
        $.post('/ctxapp/facilities/pickup/addorupdate', pickupLocation)
          .done(function () {
            model.processing = false;
            model.addOrUpdateClose();
          })
          .fail(function (response) {
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg);
            }
            model.processing = false;
          });


      },
      deletePickupLocation: function (e) {
        var model = this;

        model.storePickupLocations();

        var selectedPickupLocation = model.pickupLocations.find(x => x.PickupLocationId.toString() === e.currentTarget.dataset.item && !x.IsPsFacility);

        if (!selectedPickupLocation) {
          return;
        }
        var confirmationMessage = "Are you sure you would like to delete this option - this cannot be undone.";

        if (selectedPickupLocation.InUseByFreezeMark) {
          confirmationMessage =
            "The pickup option is currently in use on the following animals (" + selectedPickupLocation.FreezeMarkList + ") - This action will delete from all - do you want to continue to delete?";
        }

        if (!confirm(confirmationMessage)) {
          return;
        }
        var pickupLocation = {
          PickupLocationId: selectedPickupLocation.PickupLocationId
        }

        $.post('/ctxapp/facilities/pickup/delete', pickupLocation)
          .done(function () {
            model.getData();
            model.fire("reloadlocations");
          })
          .fail(function (response) {
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg);
            }
          });
      },
      updatePickupLocation: function (e) {
        var selectedPickupLocation = this.pickupLocations.find(x => x.PickupLocationId.toString() === e.currentTarget.dataset.item && !x.IsPsFacility);

        if (!selectedPickupLocation) {
          return;
        }

        this.mode = ' - Edit ' + selectedPickupLocation.LocationName;
        this.pickupLocationId = selectedPickupLocation.PickupLocationId;
        this.pickupLocationName = selectedPickupLocation.LocationName;
        this.streetAddress = selectedPickupLocation.StreetAddress;
        this.city = selectedPickupLocation.City;
        this.stateCode = selectedPickupLocation.StateCode;
        this.zipCode = selectedPickupLocation.ZipCode;
        this.hideAddOrUpdate = false;
        this.hideGrid = true;
      },
      attached: function () {
        $('#pickupOptionModal').on('shown.bs.modal', function () {
          $('#txtSearchFilter').focus();
        });
      },
      getData: function () {
        var model = this;
        model.loading = true;
        if (model.animalFlag) {
          $.get('/ctxapp/facilities/pickups/animal/' + model.freezemark)
            .done(function (data) {
              model.pickupLocations = data.data;
            })
            .fail(function (response) {
              var errMsg = getXhrErrorMessage(response);
              if (errMsg) {
                alert(errMsg);
              }
            })
            .always(function () {
              model.loading = false;
            });
        } else if (model.eventFlag) {
          $.get('/ctxapp/facilities/pickups/event/currentlocation/' + model.currentLocationId)
            .done(function (data) {
              model.pickupLocations = data.data;
            })
            .fail(function (response) {
              var errMsg = getXhrErrorMessage(response);
              if (errMsg) {
                alert(errMsg);
              }
            })
            .always(function () {
              model.loading = false;
            });
        } else if (model.animalsFlag) {
          $.get('/ctxapp/facilities/pickups')
            .done(function (data) {
              model.pickupLocations = data.data;
            })
            .fail(function (response) {
              var errMsg = getXhrErrorMessage(response);
              if (errMsg) {
                alert(errMsg);
              }
            })
            .always(function () {
              model.loading = false;
            });
        } else if (model.facilityFlag) {
          $.get('/ctxapp/facilities/' + model.facilityId + '/pickups')
            .done(function (data) {
              model.pickupLocations = data.data;
            })
            .fail(function (response) {
              var errMsg = getXhrErrorMessage(response);
              if (errMsg) {
                alert(errMsg);
              }
            })
            .always(function () {
              model.loading = false;
            });
        }
      },
      open: function () {
        var model = this;

        model.getData();
        $(model.$.pickupOptionModal).modal({ backdrop: 'static', keyboard: false });
      },
      close: function () {
        var model = this;
        model.pickupLocations = null;
        model.pickupSearch = "";
        $(this.$.pickupOptionModal).modal('hide');

        $('#tblPickupLocations input[type=checkbox]:checked').each(function () {
          this.checked = false;
        });
      },
      save: function () {
        var model = this;

        model.storePickupLocations();
        var selected = model.pickupLocations.filter(p => p.DisplayToUser == true);
        this.fire("save", selected);

        model.pickupSearch = "";
        $(model.$.pickupOptionModal).modal('hide');

        $('#tblPickupLocations input[type=checkbox]:checked').each(function () {
          this.checked = false;
        });
      },
      canDelete: function (isPsFacility) {
        var model = this;
        return model.isAdmin && !isPsFacility
      }
    });
  </script>
</dom-module>﻿<dom-module id="animal-files">
  <template>
    <style>
      :host {
        box-sizing: border-box;
      }

        :host .closeDialog {
          color: white;
          opacity: initial
        }
    </style>
    <div>
      <div class="alert" hidden="" id="alertArea" role="alert"></div>
      <canvas class="hidden" id="workingCanvas"></canvas>
      <div class="row">
        <div class="col-md-12">
          <h4>Choose file(s) to upload</h4>
          <div class="input-group">
            <input accept=".pdf,.mp4,.mov,.jpg,.gif,.png" class="form-control" id="selectedFiles" multiple="multiple" name="selectedFiles" on-change="loadPreview" type="file">
          </div>
        </div>
      </div>
      <div class="row">&nbsp;</div>
      <div class="row">
        <div class="col-md-12">
          <p>Video files should be created using a progressive scan (540p, 720p, 1080p) and 30 fps for good quality and small file size.</p>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <h4>File List</h4>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <table class="table table-condensed" id="tblPicsToLoad">
            <thead>
              <tr>
                <th>File Name</th>
                <th>Size</th>
                <th>Date</th>
              </tr>
            </thead>
            <tbody>
              <template is="dom-repeat" items="{{picData}}">
                <template is="dom-if" if="{{item.isDup}}">
                  <tr class="alert alert-danger">
                    <td>
                      <span class="fa fa-warning"></span>
                      {{item.fileName}}&nbsp;
                      <span>Overwrite existing?</span>
                      &nbsp;&nbsp;
                      <button class="btn btn-link" data-filename="{{item.fileName}}" on-tap="overwrite" title="Overwrite existing file" type="button">Yes</button>
                      &nbsp;
                      <button class="btn btn-link" data-filename="{{item.fileName}}" on-tap="doNotOverwrite" title="Do not overwrite existing file" type="button">No</button>
                    </td>
                    <td>{{item.fileSize}} KB</td>
                    <td>{{item.fileDate}}</td>
                    <td></td>
                  </tr>
                </template>
                <template is="dom-if" if="{{!item.isDup}}">
                  <tr>
                    <td><a href="{{item.src}}" target="_blank">{{item.fileName}}</a></td>
                    <td>{{item.fileSize}} KB</td>
                    <td>{{item.fileDate}}</td>
                    <td><button class="btn btn-link" data-filename="{{item.fileName}}" on-tap="showDeleteWarning" style="padding:0" title="Delete file" type="button">Delete</button></td>
                    <template is="dom-if" if="{{item.isPicture}}">
                      <td><button class="btn btn-link" data-filename="{{item.fileName}}" on-tap="editImage" style="padding:0" title="Edit image" type="button">Edit</button></td>
                    </template>
                  </tr>
                </template>
              </template>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div hidden="{{hideEdit}}">
      <div class="row">
        <div class="col-md-12">
          <h4>Edit Image</h4>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12" style="border:solid 1px silver;margin:15px;width:95%">
          <canvas id="canvas" height="300" style="max-width:100%;" width="400"></canvas>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <button class="btn btn-primary" on-tap="addMove" title="Move" type="button">
            <span class="fa fa-arrows">&nbsp;<span style="font-family:Roboto, sans-serif">Move </span></span>
          </button>
          <button class="btn btn-primary" on-tap="addCrop" title="Crop" type="button">
            <span class="fa fa-crop">&nbsp;<span style="font-family:Roboto, sans-serif">Crop</span></span>
          </button>
          &nbsp;&nbsp;
          <button class="btn btn-primary" on-tap="zoom" title="Zoom in" type="button">
            <span class="fa fa-search-plus">&nbsp;<span style="font-family:Roboto, sans-serif">Zoom In</span></span>
          </button>
          <button class="btn btn-primary" on-tap="zoomOut" title="Zoom out" type="button">
            <span class="fa fa-search-minus">&nbsp;<span style="font-family:Roboto, sans-serif">Zoom Out</span></span>
          </button>
          &nbsp;&nbsp;
          <button class="btn btn-primary" on-tap="addCropBox" title="Show crop box" type="button">
            <span class="fa fa-check"></span>
          </button>
          <button class="btn btn-primary" on-tap="clearCropBox" title="Clear crop box " type="button">
            <span class="fa fa-remove"></span>
          </button>
          &nbsp;&nbsp;
          <button class="btn btn-primary" on-tap="reset" title="Reset image">
            <span class="fa fa-refresh">&nbsp;<span style="font-family:Roboto, sans-serif">Reset</span></span>
          </button>
          &nbsp;&nbsp;
          <button class="btn btn-primary" on-tap="useCroppedImage" title="Use cropped image" type="button">Use Cropped Image</button>
          <button class="btn btn-primary" on-tap="closePicWindow" title="Close Edit Image" type="button">Close Edit</button>
        </div>
      </div>
    </div>

    <div class="modal" data-backdrop="static" id="warningModal">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button aria-hidden="true" class="close closeDialog" on-tap="closeWarningModal" type="button"><span aria-hidden="true">×</span></button>
            <h4 class="modal-title">{{warningModalTitle}}</h4>
          </div><div class="container"></div>
          <div class="modal-body">
            <div class="alert alert-danger" role="alert">
              <strong>
                <span class="fa fa-warning"></span> &nbsp; {{warningModalMessage}}
              </strong>
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-sm blm-btn-secondary" on-tap="closeWarningModal" type="button">No</button>
            <button class="btn btn-sm blm-btn-primary" on-tap="action" type="button">Yes</button>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script>
    Polymer({
      is: 'animal-files',
      properties: {
        hideDeleteMessage: {
          type: Boolean,
          value: true
        },
        hideEdit: {
          type: Boolean,
          value: true
        },
        hideSelectFiles: {
          type: Boolean,
          value: false
        },
        isDirty: {
          type: Boolean,
          value: false
        },
        isDelete: {
          type: Boolean,
          value: false
        },
        objectId: {
          type: Number,
          value: 0
        },
        objectType: {
          type: String,
          value: ""
        },
        picData: {
          type: Array,
          value: function () { return new Array(); }
        },
        animalMetadataId: {
          type: Number
        },
        croppedImages: {
          type: Array,
          value: function () { return new Array(); }
        },
        selectedFile: {
          type: String
        },
        selectedImage: {
          type: Object
        },
        warningModalMessage: {
          type: String
        },
        warningModalTitle: {
          type: String
        }
      },

      addCrop: function () {
        var canvas = document.getElementById("canvas");
        if (canvas != undefined || canvas != null) canvas.cropper.setDragMode('crop');
      },

      addCropBox: function () {
        var canvas = document.getElementById("canvas");
        if (canvas != undefined || canvas != null) canvas.cropper.crop();
      },

      addMove: function () {
        var canvas = document.getElementById("canvas");
        if (canvas != undefined || canvas != null) canvas.cropper.setDragMode('move');
      },

      clearCropBox: function () {
        var canvas = document.getElementById("canvas");
        if (canvas != undefined || canvas != null) canvas.cropper.clear();
      },

      zoom: function () {
        var canvas = document.getElementById("canvas");
        if (canvas != undefined || canvas != null) canvas.cropper.zoom(0.1);
      },

      zoomOut: function () {
        var canvas = document.getElementById("canvas");
        if (canvas != undefined || canvas != null) canvas.cropper.zoom(-0.1);
      },

      reset: function () {
        var canvas = document.getElementById("canvas");
        if (canvas != undefined || canvas != null) canvas.cropper.reset();
      },


      attached: function () {

      },
      cleanUp: function () {
        $("#selectedFiles").val("");
        var numberOfImages = this.picData.length

        for (var i = 0; i <= numberOfImages; i++) {
          this.pop("picData");
        }
      },
      closeWarningModal: function () {
        this.isDelete = false;
        this.warningModalTitle = "";
        this.warningModalMessage = "";
        $("#warningModal").modal("hide");
      },
      closePicWindow: function () {
        this.hideEdit = true;
      },
      deleteFile: function () {
        var id;
        var model = this;
        for (var i = 0; i < this.picData.length; i++) {
          if (this.picData[i].fileName === this.selectedImage.dataFilename) {
            id = this.picData[i].id;
            this.splice("picData", i, 1);
            break;
          }
        }

        if (id) {
          $.ajax({
            async: false,
            type: "DELETE",
            url: '/ctxapp/animals/media/' + id,
            success: function (data) {
              model.closeWarningModal();
            },
            error: function (response) {
              model.closeWarningModal();
              var errMsg = getXhrErrorMessage(response);
              if (errMsg) {
                alert(errMsg);
              }
            }
          });
        }
        else {
          model.closeWarningModal();
        }

        this.selectedImage = null;
        this.isDirty = true;

      },
      action: function () {
        if (this.isDelete) {
          this.deleteFile();
        }
      },
      showDeleteWarning: function (e) {
        this.warningModalTitle = "File Delete";
        $("#warningModal").modal("show");
        this.selectedImage = e.currentTarget;;
        this.warningModalMessage = "Are you sure you wish to delete " + this.selectedImage.dataFilename + " ?";
        this.isDelete = true;
      },
      //Do not overwrite file with same name. Remove from array
      doNotOverwrite: function (e) {
        for (var i = 0; i < this.picData.length; i++) {
          if (this.picData[i].fileName === e.currentTarget.dataFilename) {
            this.pop("picData");
            break;
          }
        }
      },

      overwrite: function (e) {
        var originalID;
        var image;

        for (var i = 0; i < this.picData.length; i++) {
          if (this.picData[i].fileName === e.currentTarget.dataFilename && !this.picData[i].isDup) {
            originalID = this.picData[i].id;
            this.splice("picData", i, 1);
            break;
          }
        }

        for (var i = 0; i < this.picData.length; i++) {
          if (this.picData[i].fileName === e.currentTarget.dataFilename && this.picData[i].isDup) {
            this.picData[i].id = originalID;
            this.picData[i].isDup = false;
            image = this.picData[i];
            this.splice("picData", i, 1);
            break;
          }
        }

        var array = this.picData;
        this.picData = [];
        this.picData = array;

        this.push("picData", image);



      },

      editImage: function (e) {
        this.selectedFile = e.currentTarget.dataFilename;

        for (var i = 0; i < this.picData.length; i++) {
          if (e.currentTarget.dataFilename === this.picData[i].fileName) {
            this.selectedImage = this.picData[i];
            break;
          }
        }

        if (this.selectedImage != undefined || this.selectedImage != null) {
          if (this.selectedImage.fromServer) {
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext('2d');

            var img = new Image();
            img.src = this.selectedImage.src;

            img.onload = function () {
              var canvas = document.getElementById("canvas");

              if (canvas != null && canvas.cropper != null) {
                canvas.cropper.destroy();
              }

              var cropper = new Cropper(canvas, {
                autoCrop: false,
                background: false,
                dragMode: 'none',
                zoomOnWheel: false
              });

              cropper.replace(img.src);
            }
          }
          else {
            var files = document.getElementById("selectedFiles").files;

            for (var j = 0; j < files.length; j++) {
              if (this.selectedImage.fileName === files[j].name) {
                if (FileReader) {
                  var fr = new FileReader();

                  fr.onload = function () {
                    var canvas = document.getElementById("canvas");

                    if (canvas != null && canvas.cropper != null) {
                      canvas.cropper.destroy();
                    }

                    var cropper = new Cropper(canvas, {
                      autoCrop: false,
                      background: false,
                      dragMode: 'none',
                      zoomOnWheel: false
                    });

                    cropper.replace(fr.result);
                  }

                  fr.readAsDataURL(files[j]);
                }

                break;
              }
            }
          }
        }

        this.hideEdit = false;
      },

      //Gets called when you click the Manage Images button from animal detail
      open: function (id) {
        var model = this;
        this.isDirty = false;
        this.isDelete = false;
        this.warningModalTitle = "";
        this.warningModalMessage = "";
        this.selectedImage = null;
        this.animalMetadataId = id;
        this.hideSelectFiles = false;
        this.hideEdit = true;

        var canvas = document.getElementById("canvas");

        if ((canvas != undefined || canvas != null) && (canvas.cropper != undefined || canvas.cropper != null)) canvas.cropper.destroy();

        for (var i = 0; i < this.picData.length; i++) {
          this.pop('picData');
        }

        $("#selectedFiles").val("");

        $(this.$.alertArea).prop("hidden", "hidden");
        this.def = $.Deferred();
        $(this.$.dialog).modal("show");

        //Load upload grid
        $.get('/ctxapp/animals/' + this.objectId + '/media')
          .done(function (result) {
            for (var i = 0; i < result.data.length; i++) {
              model.push('picData', {
                id: result.data[i].AnimalImageId,
                isDup: false,
                fileName: result.data[i].OriginalFileName,
                isPdf: result.data[i].IsPdf,
                isPicture: result.data[i].IsPicture,
                isVideo: result.data[i].IsVideo,
                src: result.data[i].FilePath,
                fileDate: result.data[i].GridFileDate,
                fileSize: result.data[i].FileSize,
                height: result.data[i].Height,
                width: result.data[i].Width,
                quality: result.data[i].Quality,
                isLow: result.data[i].IsLow,
                fromServer: result.data[i].FromServer
              });
            }
          })
          .fail(function (response) {
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg);
            }
          });
      },

      isDuplicateFile: function (fileNameToCheck) {
        for (var i = 0; i < this.picData.length; i++) {
          if (this.picData[i].fileName === fileNameToCheck) {
            return true;
          }
        }

        return false;
      },

      loadPreview: function (e) {
        var model = this;
        var tgt = e.target || window.event.srcElement;
        var files = tgt.files;

        if (files) {
          for (var i = 0; i < files.length; i++) {
            this.isDirty = true;
            (function (file) {
              var fileName = file.name;
              var isDup = model.isDuplicateFile(fileName);
              var fileDate = file.lastModifiedDate.toLocaleDateString();
              var fileSize = Number((file.size / 1024).toFixed(0));

              //Chrome browser crashes with oh snap error if file size greater than 85 MB
              if (fileSize > 70000) {
                $('#alertArea').removeAttr("hidden").text('The file ' + fileName + ' exceeds the maximum allowed size of 70 Megabytes.  It will be skipped').addClass("alert-warning");
                return;
              }

              var reader = new FileReader();
              reader.onload = function (e) {
                if (fileName.toLowerCase().endsWith('.pdf') || fileName.toLowerCase().endsWith('.mov') || fileName.toLowerCase().endsWith('.mp4')) {
                  model.push('picData', {
                    fileName: fileName,
                    isDup: isDup,
                    isDirty: true,
                    src: e.target.result,
                    fileDate: fileDate,
                    fileSize: fileSize,
                    isPicture: false,
                  });
                }
                else {
                  var img = new Image();
                  img.src = e.target.result;
                  img.id = file.name;
                  img.onload = function () {
                    var quality;
                    var isLow = false;

                    if (img.height <= 500) {
                      quality = "low";
                      isLow = true;
                    }
                    if (img.width <= 500) {
                      quality = "low";
                      isLow = true;
                    }

                    if (img.height > 500 && img.width > 500) {
                      quality = "good";
                    }

                    if (img.height > img.width) {
                      quality = "portrait"
                      isLow = true;
                    }

                    model.push('picData', {
                      fileName: fileName,
                      isDup: isDup,
                      isDirty: true,
                      src: this.src,
                      fileDate: fileDate,
                      fileSize: fileSize,
                      height: img.height,
                      width: img.width,
                      quality: quality,
                      isLow: isLow,
                      isPicture: true,
                    });
                  }
                }
              }
              reader.readAsDataURL(file);
            })(files[i]);
          }
        }
      },

      uploadImages: async function () {
        for (var i = 0; i < this.picData.length; i++) {
          if (this.picData[i].isDirty) {
            // Await each upload before continuing to the next to prevent multi-threading issues on server.
            await this.uploadImage(this.picData[i], i, this.picData.length);
          }
        }
      },

      uploadImage: function (fileToLoad, index, count) {
        var model = this;
        return new Promise(function (resolve, reject) {
          var fileName = fileToLoad.fileName.toLowerCase();
          var isImage;

          if (fileName.endsWith('.pdf')) {
            isImage = false;
            fileToLoad.src = fileToLoad.src.replace('data:application/pdf;base64,', '');
          }
          else if (fileName.endsWith('.mp4')) {
            isImage = false;
            fileToLoad.src = fileToLoad.src.replace('data:video/mp4;base64,', '');
          }
          else if (fileName.endsWith('.mov')) {
            isImage = false;
            fileToLoad.src = fileToLoad.src.replace('data:video/quicktime;base64,', '');
          }
          else {
            isImage = true;
          }

          if (isImage) {
            var canvas = document.getElementById("workingCanvas");

            if (canvas && canvas.getContext) {
              var ctx = canvas.getContext('2d');

              var img = new Image();

              if (fileToLoad.src) {
                img.src = fileToLoad.src;
              }
              else if (fileToLoad.url) {
                img.src = fileToLoad.url;
              }

              img.onload = function () {
                canvas.height = img.height;
                canvas.width = img.width;
                ctx.drawImage(img, 0, 0, img.width, img.height);

                var imageData, url;

                if (fileToLoad.url) {
                  url = fileToLoad.url.replace('data:image/png;base64,', '');
                }
                else {
                  //Bug - toDataURL missing type param, so always defaults to PNG even for other graphic types.
                  //Maybe causing larger file size when saved on server
                  //https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

                  url = canvas.toDataURL();
                  url = url.replace('data:image/png;base64,', '');
                }

                imageData = {
                  "AnimalImageId": fileToLoad.id, "height": img.height, "fileDate": fileToLoad.fileDate, "fileName": fileToLoad.fileName,
                  "isLow": fileToLoad.isLow, "quality": fileToLoad.quality,
                  "Base64String": url, "width": img.width, index: index, count: count
                };

                $.post('/ctxapp/animals/media/upload/' + model.animalMetadataId, imageData)
                  .done(function (data) {
                    resolve();
                  })
                  .fail(function (response) {
                    var errMsg = getXhrErrorMessage(response);
                    if (errMsg) {
                      alert(errMsg);
                    }
                    resolve();
                  });
              }
            }
          }
          else {
            var fileData = {
              "AnimalImageId": fileToLoad.id, "fileDate": fileToLoad.fileDate, "fileName": fileToLoad.fileName,
              "Base64String": fileToLoad.src, index: index, count: count
            };

            $.post('/ctxapp/animals/media/upload/' + model.animalMetadataId, fileData)
              .done(function (data) {
                resolve();
              })
              .fail(function (response) {
                var errMsg = getXhrErrorMessage(response);
                if (errMsg) {
                  alert(errMsg);
                }
                resolve();
              });
          }
        });
      },

      useCroppedImage: function (e) {
        var model = this;
        var croppedImage = $("#canvas")[0].cropper.getCroppedCanvas();
        var croppedUrl = croppedImage.toDataURL();
        var croppedFileName = 'C_' + this.selectedFile;
        var todaysDate = new Date();

        var imageData = {
          "id": this.selectedImage.id,
          "isDup": false,
          "fileName": croppedFileName,
          "fileDate": (todaysDate.getMonth() + 1) + "/" + todaysDate.getDate().toString() + "/" + todaysDate.getFullYear().toString(),
          "height": croppedImage.height,
          "url": croppedUrl,
          "width": croppedImage.width,
          "isDirty": true
        };

        //Remove image from image upload grid
        for (var i = 0; i < model.picData.length; i++) {
          if (model.picData[i].fileName === model.selectedFile) {
            model.splice("picData", i, 1);
          }
        }

        //Add cropped image to grid
        model.push("picData", imageData);
        model.isDirty = true;
        model.closePicWindow();
      },
    });
  </script>
</dom-module>
﻿<dom-module id="user-favorites">
    <template>
        <style>
            :host {
                display: block;
            }
        </style>

        <div class="container-fluid" style="">
            <div class="row" hidden$="{{hasFavs}}">
                <div class="col-md-12">
                    <h4>You have no favorites saved.</h4>
                </div>
            </div>
            <div hidden$="{{!loading}}" style="margin-top:50px;text-align:center;width:100%">
                <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i><br>
                <h4>Loading...</h4>
            </div>
            <template is="dom-repeat" items="{{animals}}">
                <user-favorite on-deleted="_refreshGrid" animal-data="{{item}}"></user-favorite>
            </template>
        </div>
    </template>

    <script>
        Polymer({
            is: "user-favorites",
            properties: {
                animals: {
                    type: Array,
                    value: []
                },
                userId: {
                    type: String,
                },
            },


            attached: function () {
                var model = this;
                model.loading = true;
                model.hasFavs = true;
                model.getFavorites();
            },

            _refreshGrid: function () {
                var model = this;
                model.loading = true;
                model.getFavorites();               
            },

            getFavorites: function () {
                var model = this;

                $.get("/ctxapp/animals/user/favorites")
                    .done(function (response) {
                        model.animals = response;
                        if (model.animals.length == 0) {
                            model.hasFavs = false;
                        }

                        model.loading = false;
                    })
                    .fail(function (response) {
                        model.loading = false;
                        var errMsg = getXhrErrorMessage(response);
                        if (errMsg) {
                            alert(errMsg);
                        }
                    });
            },

        });

    </script>
</dom-module>

<dom-module id="user-favorite">
    <template>
        <style>
            :host() {
                display: block;
            }
        </style>
        <div class="col-md-4">
            <div class="row">
                <div class="col-md-12">
                    <template is="dom-if" if="{{animalData.Available}}">
                        <a href="animals/{{animalData.Freezemark}}">
                            <div style$="height:275px;width:275px;background-image:url('{{animalData.Thumbnail}}');background-size:contain;background-repeat:no-repeat; content:'';background-position:center;"></div>
                        </a>
                    </template>
                    <template is="dom-if" if="{{!animalData.Available}}">
                        <div style$="height:275px;width:275px;background-image:url('{{animalData.Thumbnail}}');background-size:contain;background-repeat:no-repeat; content:'';background-position:center;"></div>
                    </template>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <b>{{animalData.Description}}</b>
                </div>
            </div>
            <template is="dom-if" if="{{!animalData.Available}}">
                <div class="row">
                    <div class="col-md-12">
                        (No Longer Available)
                    </div>
                </div>
                <div class="row">
                    &nbsp;
                </div>
            </template>
            <template is="dom-if" if="{{animalData.Available}}">
                <div class="row">
                    <div class="col-md-12">
                        <b>Bids:</b> {{animalData.NumberOfBids}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>Price:</b> {{animalData.CurrentPrice}}
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <b>Listing Type:</b> {{animalData.ListingTypeDescription}}
                    </div>
                </div>
            </template>
            <div class="row">
                <div class="col-md-12">
                    <button class="btn blm-btn-primary btn-xs" on-tap="removeFavorite">Remove</button>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    &nbsp;
                </div>
            </div>
        </div>
    </template>
    <script>
    Polymer({
        is: 'user-favorite',
        properties: {
            animalData: {
                type: Array
            },
        },
        attached: function () {
            var model = this;
        },

        removeFavorite: function (e) {
            var model = this;
            $.post('/ctxapp/animals/' + model.animalData.Freezemark + '/favorite/remove')
                .done(function (response) {
                    model.fire('deleted');
                });
        }
    })
    </script>
</dom-module>﻿<dom-module id="user-animal-favorite">
    <template>
        <style>
            :host {
                display: inline-block;
            }
        </style>

        <div>
            <button hidden$="{{isFavorite}}" class="btn blm-btn-primary" on-tap="_favorite"><i class="fa fa-heart-o"></i> Favorite</button>
            <button hidden$="{{!isFavorite}}" class="btn blm-btn-primary" on-tap="_unfavorite"><i class="fa fa-heart"></i> Unfavorite</button>
        </div>
    </template>

    <script>
        Polymer({
            is: "user-animal-favorite",
            properties: {
                isFavorite: {
                    type: Boolean,
                },
                freezeMark: {
                    type: String
                },
                setFavorite: {
                    type: Boolean
                },
                removeFavorite: {
                    type: Boolean
                },
                isAuthPublicUser: {
                    type: Boolean
                },
            },

            attached: function () {
                var model = this;
                model.isFavorite = false;
            },

            load: function (freezeMark) {
                var model = this;
                model.freezeMark = freezeMark;

                if (model.isAuthPublicUser) {
                    $.get('/ctxapp/animals/' + freezeMark + "/favorite").done(function (fav) {
                        model.isFavorite = fav;
                    }); 
                }
            },

            _favorite: function (e) {
                if (e) { e.preventDefault(); }
                var model = this;

                if (model.isAuthPublicUser) {
                    $.post('/ctxapp/animals/' + model.freezeMark + '/favorite/add')
                        .done(function (response) {
                            model.isFavorite = true;
                        });
                } else {
                    window.location.href = "../Account/Login?ReturnUrl=%2fanimals%2f" + model.freezeMark;
                }
            },

            _unfavorite: function (e) {
                if (e) { e.preventDefault(); }
                var model = this;

                $.post('/ctxapp/animals/' + model.freezeMark + '/favorite/remove')
                    .done(function (response) {
                        model.isFavorite = false;
                    });
            }
        });

    </script>
</dom-module>﻿<dom-module id="application-timeline">
    <template>
        <style>
            :host {
                display: block;
            }
        </style>
        <template is="dom-if" if="{{isEmpty}}">
            <div>No applications have been submitted</div>
        </template>
        <template is="dom-repeat" items="{{applications}}">
            <h4>{{item.ApplicationType}} application submitted on {{item.SubmitDateDisplay}}</h4>
            <template is="dom-if" if="{{item.ReviewPosition.m_Item1}}">
                <template is="dom-if" if="{{!item.approved}}">
                    <div>We are reviewing applications in the order they are received, and you are application number {{item.ReviewPosition.m_Item1}} out of {{item.ReviewPosition.m_Item2}}.<br>Thank you for your interest in the wild horses and burros!</div>
                </template>
            </template>
            <div>
                <img alt="timeline image" src$="{{item.url}}" style="width:80%">
            </div>
        </template>
    </template>
    <script>
        'use strict';
        Polymer({
            is: 'application-timeline',
            properties: {
                applications: {
                    type: Array,
                    value: []
                },
                isEmpty: {
                    type: Boolean,
                    value: false
                }
            },

            attached: function () {
                var model = this;
                model.getData();

                if (model.applications.length > 0) {
                    $.each(model.applications, function (i, item) {
                        if (!item.ReviewStarted) {
                            item.url = "../../Images/Step1.png"
                        }
                        else if (item.Status === "Submitted" || item.Status === "Resubmitted" || item.Status === "Saved") {
                            item.url = "../../Images/Step2.png"
                        }
                        else if (item.Status === "Approved") {
                            item.url = "../../Images/Step3.png"
                            item.approved = true;
                        }
                        else if (item.Status === "Denied") {
                            item.url = "../../Images/Step3Denied.png"
                        }
                    });
                }
                else {
                    model.isEmpty = true;
                }
            },
            getData: function () {
                var model = this;

                $.ajax({
                    type: "GET",
                    url: '/ctxapp/documents/application-timeline',
                    async: false,
                    cache: true,
                    success: function (data) {
                        model.applications = data;
                    },
                    error: function (response) {
                        var errMsg = getXhrErrorMessage(response);
                        if (errMsg) {
                            alert(errMsg);
                        }
                    }
                });
            },
        })
    </script>
</dom-module>

﻿<dom-module id="bill-of-sale">
  <template>
    <style>
      :host() {
        display: block
      }

      :host input {
        box-shadow: none
      }

      :host label {
        font-weight: normal
      }

      :host .headerSmall {
        font-size: 10px
      }

      :host .fieldBorder {
        border-bottom: solid 1px black;
        border-left: none;
        border-right: none;
        border-top: none
      }

      :host .wildHorseLogo {
        float: right;
        max-height: 200px;
        max-width: 200px
      }
    </style>
    <div class="row">
      <div class="pull-right">
        <a class="hidden-print" href="javascript:window.print()" style="color: black; text-decoration:none"><span class="glyphicon glyphicon-print" style="font-size:15px;">&nbsp;</span>Print</a>
      </div>
    </div>
    <div class="row header" id="header">
      <div class="col-sm-8">
        <div class="row">
          <div class="col-md-2 headerSmall">
            Form 4710-23
          </div>
        </div>
        <div class="row">
          <div class="col-md-2 headerSmall">
            (March 2013)
          </div>
        </div>
      </div>
      <div class="col-sm-4">
        <img alt="Wild Horse and Burro logo" class="img-responsive wildHorseLogo" src="../Images/wildhorse_aboutprogram_photo1_1.jpg">
      </div>
    </div>
    <div class="row text-center">
      <div class="col-sm-12">
        United States
      </div>
    </div>
    <div class="row text-center">
      <div class="col-sm-12">
        Department of the Interior
      </div>
    </div>
    <div class="row text-center">
      <div class="col-sm-12">
        Bureau of Land Management
      </div>
    </div>
    <div class="row text-center">
      <div class="col-sm-12">
        <b>Bill of Sale for Wild Horses and Burros</b>
      </div>
    </div>
    <div class="row">&nbsp;</div>
    <form id="bosForm" novalidate="novalidate">
      <div class="row">
        <div class="col-sm-12 col-sm-offset-1">
          <div class="form-inline">
            <div class="form-group">
              <label>This is to certify that on this</label>
            </div>
            <div class="form-group text-center">
              <input required="" disabled="" class="form-control fieldBorder" id="saleDate" name="saleDate" type="text" style="width:200px;text-align:center" value="{{saleDate::input}}">
              <br> (Date)
            </div>
            <div class="form-group">
              <label>at</label>
            </div>
            <div class="form-group text-center">
              <input required="" disabled$="{{!fieldModeNew(fieldMode, isBlmReview)}}" class="form-control fieldBorder" id="saleCity" name="saleCity" type="text" style="width:200px;text-align:center" value="{{saleCity::input}}">
              <br> (City)
            </div>
          </div>
        </div>
      </div>
      <br>
      <div class="row">
        <div class="col-sm-12 col-sm-offset-1">
          <div class="form-inline">
            <label for="facilityOfficeName">USDI, Bureau of Land Management,</label>
            <input hidden$="{{isBlmReview}}" disabled="" class="form-control fieldBorder" id="facilityOfficeName" name="facilityOfficeName" style="text-align:center;width:378px;" type="text" value="{{facilityOfficeName::input}}">
            <select hidden$="{{!isBlmReview}}" required="" class="form-control fieldBorder" id="completingOfficeSelect" name="completingOfficeSelect" value="{{completingOfficeLegalEntityId::input}}">
              <option></option>
              <template is="dom-repeat" items="{{completingOfficeList}}">
                <option value="{{item.FacilityOfficeLegalEntityId}}" selected$="{{isSelected(completingOfficeLegalEntityId, item.FacilityOfficeLegalEntityId)}}">{{item.FacilityOfficeName}}</option>
              </template>
            </select>
          </div>
        </div>
      </div>
      <br>
      <div class="row">
        <div class="col-sm-12 col-sm-offset-1">
          <div class="form-inline">
            <div class="form-group text-center">
              <label for="facilityAddress">Address</label>
              <input required="" disabled$="{{!fieldModeNew(fieldMode, isBlmReview)}}" class="form-control fieldBorder" id="facilityAddress" name="facilityAddress" type="text" style="width:547px;text-align:center" value="{{facilityAddress::input}}">
              <br> (Address of BLM Office or Facility)
            </div>
          </div>
        </div>
      </div>
      <br>
      <div class="row">
        <div class="col-sm-12 col-sm-offset-1">
          <div class="form-inline">
            <div class="form-group">
              <label>Sold the following(#):</label>
              <input required="" disabled$="{{!fieldModeNew(fieldMode, isBlmReview)}}" class="form-control fieldBorder" id="noWildHorsesSold" name="noWildHorsesSold" style="width:50px;text-align:center" type="number" min="0" max="1" value="{{noWildHorsesSold::input}}">
            </div>
            <div class="form-group">
              <label for="noWildHorsesSold">wild horse(s) and/or (number)</label>
              <input required="" disabled$="{{!fieldModeNew(fieldMode, isBlmReview)}}" class="form-control fieldBorder" id="noBurrosSold" name="noBurrosSold" style="width:50px;text-align:center" type="number" min="0" max="1" value="{{noBurrosSold::input}}">
            </div>
            <div class="form-group">
              <label for="noBurrosSold">burro(s).</label>
            </div>
          </div>
        </div>
      </div>
      <br>
      <div class="row">
        <div class="col-sm-12 col-sm-offset-1">
          <div class="form-inline">
            <div class="form-group">
              <label>To</label>
            </div>
            <div class="form-group text-center">
              <input required="" disabled="" class="form-control fieldBorder" id="firstName" name="firstName" style="width:240px; text-align:center" type="text" value="{{firstName}}">
              <input required="" disabled="" class="form-control fieldBorder" id="lastName" name="lastName" style="width:240px; text-align:center" type="text" value="{{lastName}}">
              <br> (Name of Purchaser)
            </div>
          </div>
        </div>
      </div>
      <br>
      <div class="row">
        <div class="col-sm-12 col-sm-offset-1">
          <div class="form-inline">
            <div class="form-group">
              <label>Of</label>
            </div>
            <div class="form-group text-center">
              <input required="" disabled="" class="form-control fieldBorder" id="address" name="address" style="width:205px; text-align:center" type="text" value="{{applicant.ApplicantStreetAddress::value}}">
              <input required="" disabled="" class="form-control fieldBorder" id="city" name="city" style="width:205px; text-align:center" type="text" value="{{applicant.ApplicantCity::value}}">
              <input required="" disabled="" class="form-control fieldBorder" id="state" name="state" style="width:50px; text-align:center" type="text" value="{{applicant.ApplicantState::value}}">
              <input required="" disabled="" class="form-control fieldBorder" id="zip" name="zip" style="width:115px; text-align:center" type="text" value="{{applicant.ApplicantZipCode::value}}">
              <br> (Purchaser's Address)
            </div>
          </div>
        </div>
      </div>
      <br>
      <div class="row">
        <div class="col-sm-12 col-sm-offset-1">
          <div class="form-inline">
            <div class="form-group">
              <label for="phone">Home Phone (Include area code)</label>
              <input required="" disabled="" class="form-control fieldBorder" id="phone" name="phone" style="width:300px;text-align:center" type="text" value="{{applicant.ApplicantPhone::value}}">
            </div>
          </div>
        </div>
      </div>
      <br>
      <div class="row">
        <div class="col-sm-12 col-sm-offset-1">
          <div class="form-inline">
            <div class="form-group">
              <label for="altPhone">Alternative Phone (Include area code)</label>
              <input disabled="" class="form-control fieldBorder" id="altPhone" name="altPhone" style="width:272px;text-align:center" type="text" value="{{applicant.ApplicantAlternatePhone::value}}">
            </div>
          </div>
        </div>
      </div>
      <br>
      <div class="row">
        <div class="col-sm-12 col-sm-offset-1">
          <div class="form-inline">
            <div class="form-group">
              <label for="email">E-mail Address</label>
              <input required="" disabled="" class="form-control fieldBorder" id="email" name="email" style="width:415px;text-align:center" type="text" value="{{applicant.ApplicantEmail::value}}">
            </div>
          </div>
        </div>
      </div>
      <br>
      <div class="row">
        <div class="col-sm-12 col-sm-offset-1">
          This document serves as both a sales contract and proof of ownership.
        </div>
      </div>
      <br>
      <div class="row">
        <div class="col-sm-12">
          <p>
            <b>
              The BLM may seek criminal penalties against the purchaser if, in the course of this sale,
              the purchaser knowingly and willfully falsifies, conceals, or covers up a material fact;
              makes any materially false, fictitious, or fraudulent statement or representation; or
              otherwise violates 18 U.S.C. § 1001.
            </b>
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <p>
            <b>
              Purchaser agrees to provide humane care and to not maliciously or negligently injure the
              listed animals.
            </b>
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <p>
            <b>
              Purchaser agrees not to process any of the listed animals into commercial products.
              Purchaser agrees not to knowingly sell or transfer ownership of any listed animals to any
              person or organization whose intent is to process the animals or their remains into
              commercial products or whose intent is to resell, trade, or give away the animals or their
              remains for processing into commercial products.
            </b>
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <p>
            <b>
              If the purchaser makes any material misrepresentations in the applicable “Application to
              Purchase Wild Horses and Burros,” “Bill of Sale,” or during any negotiations with the
              BLM leading up to purchase, including, without limitations, representations about the
              purposes and/or use for which the animals are obtained, then the sale is voidable at the
              discretion of the BLM.
            </b>
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <p>
            <b>
              Purchased wild horses and/or burros cannot be returned to the public lands unless the
              BLM has issued a permit or otherwise authorized the purchaser to do so, such as through a
              livestock grazing or recreational permit.
            </b>
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <p>
            <b>
              Purchaser understands the listed animals are wild and ungentle, and due to their age and
              temperament may never become accustomed to human contact or be trainable for handling like
              domestic livestock.
            </b>
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <p>
            <b>
              Purchaser agrees to provide adequate facilities to contain and care for these animals.
            </b>
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <p>
            <b>
              Purchaser acknowledges that the seller makes no express or implied warranties as to the
              merchantability or fitness for any particular purpose for any wild horses or burros purchased
              under this program.
            </b>
          </p>
        </div>
      </div>

      <div class="row">
        <div class="col-sm-12">
          <p>
            <b>
              Upon sale, the listed animals are no longer considered wild free-roaming wild horses or burros.
              Sale of animals is final upon pick-up, which is the responsibility of the purchaser.
            </b>
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <p>
            <b>
              Purchaser has read the above statements, and understands and agrees to these terms.
            </b>
          </p>
        </div>
      </div>
      <br>
      <div class="row">
        <div class="col-sm-6 text-center">
          <input disabled$="{{disableBlmSig}}" checked="{{blmOfficialSignature::change}}" class="questionsRight" id="blmSignature" name="blmSignature" type="checkbox">
          <label for="blmSignature">Authorized Officer's electronic signature</label>
        </div>
        <div class="col-sm-6 text-center">
          <input disabled$="{{disablePurchaserSig}}" checked="{{purchaserSignature::change}}" class="questionsRight" id="purchaserSignature" name="purchaserSignature" type="checkbox">
          <label for="purchaserSignature">Purchaser's electronic signature</label>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-6 text-center">
          <input class="form-control fieldBorder" id="blmOfficialSignatureDate" name="blmOfficialSignatureDate" readonly="" style="text-align:center" type="text" value="{{blmOfficialSignatureDate::input}}"> Date
        </div>
        <div class="col-sm-6 text-center">
          <input class="form-control fieldBorder" id="purchaserSignatureDate" name="purchaserSignatureDate" readonly="" style="text-align:center" type="text" value="{{purchaserSignatureDate::input}}"> Date
        </div>
      </div>
      <br>
      <div class="row">
        <div class="col-sm-12">
          <div class="form-inline">
            <div class="form-group">
              <label for="txtFormOfPayment">Form of Payment:</label>
              <input required="" disabled$="{{!fieldModeNew(fieldMode, isBlmReview)}}" class="form-control fieldBorder" id="txtFormOfPayment" style="width:415px" type="text" value="{{formOfPayment::input}}">
            </div>
          </div>
        </div>
      </div>

      <div class="row">&nbsp;</div>
      <div class="row">
        <div class="col-sm-3">
          <label for="freezemark">Freezemark</label>
          <div class="form-inline">
            <input required="" readonly="" class="form-control fieldBorder" id="freezemark" name="freezemark" type="text" value="{{freezemark::input}}">
            <button hidden$="{{!fieldModeNew(fieldMode, isBlmReview)}}" class="btn btn-default" on-tap="searchAnimals" type="button"><span class="glyphicon glyphicon-search"></span></button>
          </div>
        </div>
        <div class="col-sm-3">
          <label for="signalmentKey">Signalment Key</label>
          <input required="" readonly="" class="form-control fieldBorder" id="signalmentKey" name="signalmentKey" type="text" value="{{signalmentKey::input}}">
        </div>
        <div class="col-sm-3">
          <label for="adoptionFee">Price</label>
          <input required="" disabled$="{{!fieldModeNew(fieldMode, isBlmReview)}}" class="form-control fieldBorder" id="price" name="price" type="number" min="1" value="{{price::input}}">
        </div>
      </div>
    </form>
    <div class="row">&nbsp;</div>
    <div class="row">&nbsp;</div>
    <div class="row rowTopMargin hidden-print">
      <div class="col-sm-12">
        <button class="btn blm-btn-primary col-sm-2" id="submitSignature" disabled$="{{!enableSubmit(disableSubmit,processing)}}" on-tap="submitBos" type="button">Submit Signature</button>
        <template if="{{isBlmUser}}" is="dom-if">
          <button class="btn blm-btn-primary col-sm-2" on-tap="saveToPs" disabled$="{{!enablePsSave(isSigned, submittedToPs, processing, voided)}}" style="margin-left:10px" type="button">Save to WHBPS</button>
          <button class="btn blm-btn-primary col-sm-2" on-tap="addComment" style="margin-left:10px" type="button">Add Comment</button>
        </template>
        <button class="btn blm-btn-secondary col-sm-2" on-tap="close" style="margin-left:10px" type="button">Back/Cancel</button>
        <span hidden$="{{!processing}}"><i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i></span>
      </div>
    </div>
    <div class="modal fade" id="confirmationPopup" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="popupHeader"></h4>
          </div>
          <div class="modal-body" id="popupBody">
          </div>
          <div class="modal-footer">
            <button class="btn blm-btn-primary" data-dismiss="modal" on-tap="close" type="button">Close</button>
          </div>
        </div>
      </div>
    </div>
    <div class="modal fade" id="dialogComment" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">Bill of Sale</h4>
          </div>
          <div class="modal-body">
            <label for="txtComment">Comment (Internal Use Only)</label>
            <input class="form-control" id="txtComment" type="text" value="{{comment::input}}">
          </div>
          <div class="modal-footer">
            <button type="button" class="btn blm-btn-secondary" data-dismiss="modal">Cancel</button>
            <button type="button" class="btn blm-btn-primary" on-tap="saveComment" data-showuser="true">Save</button>
          </div>
        </div>
      </div>
    </div>
    <div class="modal fade" id="animalSearchDialog" role="dialog" tabindex="-1">
      <div class="modal-dialog" style="width: 1000px" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button aria-label="Close" class="close closeDialog" data-dismiss="modal" type="button"><span aria-hidden="true">×</span></button>
            <h4 class="modal-title">Animal Search</h4>
          </div>
          <div class="modal-body">
            <admin-animals id="adminAnimals" select-mode="" on-selected="animalSelected"></admin-animals>
          </div>
          <div div="" class="modal-footer">
            <button class="btn blm-btn-secondary" data-dismiss="modal" type="button">Cancel</button>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script>
    Polymer({
      is: 'bill-of-sale',
      properties: {
        billOfSaleId: {
          type: Number
        },
        data: {
          type: Object
        },
        formOfPayment: {
          type: String
        },
        facilityAddress: {
          type: String
        },
        completingOfficeLegalEntityId: {
          type: String,
          observer: 'completingOfficeChanged'
        },
        noBurrosSold: {
          type: Number
        },
        noWildHorsesSold: {
          type: Number
        },
        saleCity: {
          type: String,
        },
        saleDate: {
          type: String,
        },
        blmOfficialSignature: {
          type: Boolean,
          observer: 'blmSignatureChanged'
        },
        blmOfficialSignatureDate: {
          type: Date
        },
        blmOfficialSignatureDateVal: {
          type: Date
        },
        purchaserSignature: {
          type: Boolean,
          observer: 'purchaserSignatureChanged'
        },
        purchaserSignatureDate: {
          type: Date
        },
        purchaserSignatureDateVal: {
          type: Date
        },
      },

      attached: function () {
        var model = this;
        model.processing = false;

        if ($user.Name.indexOf("blm.gov") > 0) {
          model.isBlmUser = true;
          model.getAdminAuthorizedData();
        }
        else {
          model.isBlmUser = false;
        }

        //existing form, get data
        if (model.data.agreementId) {
          model.getData(model.data.agreementId);
        }
        //New agreement manually created from field event.  Internet events auto generate the agreement upon payment.
        else {
          model.getNewData(model.data.applicationId, model.data.psEventId);
        }

        $.when(model.formDataPromise, model.adminAuthorizedDataPromise).done(function () {
          model.populateForm(model.formDataPromise.responseJSON);
        });
      },

      getData: function (id) {
        var model = this;
        model.formDataPromise = $.get('ctxapp/documents/bos/' + id)
          .fail(function (response) {
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg);
            }
          });
      },

      getNewData: function (applicationId, psEventId) {
        var model = this;
        model.formDataPromise = $.get('ctxapp/documents/bos/new/' + applicationId + '/' + psEventId)
          .fail(function (response) {
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg);
            }
          });
      },

      getAdminAuthorizedData: function () {
        var model = this;
        model.adminAuthorizedDataPromise = $.get('ctxapp/documents/authorized-data')
          .done(function (data) {
            model.completingOfficeList = data;
          })
          .fail(function (response) {
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg);
            }
          });
      },

      populateForm: function (data) {
        this.isSigned = data.Review == 'Signed';
        this.isBlmSigned = data.Review == 'BLM Signed';
        this.isBlmReview = data.Review == "Submitted";
        this.applicationId = data.ApplicationId;
        this.freezemark = data.Freezemark;
        this.voided = data.Voided;
        this.billOfSaleId = data.BillOfSaleId;
        this.psEventId = data.PSEventId;
        this.fieldMode = data.FieldMode;
        this.psBosId = data.PsBosId;

        if (this.psBosId != null) {
          this.submittedToPs = true;
        } else {
          this.submittedToPs = false;
        }

        if (this.isBlmReview) {
          if (this.fieldMode) {   //Non-internet events: pre-populate last selected office from browser storage
            this.completingOfficeLegalEntityId = localStorage.getItem('CACHE-CompletingOfficeLegalEntityId');
          } else {                // Internet events: preset to Eastern states office
            this.completingOfficeLegalEntityId = data.CompletingOfficeLegalEntityId;
          }
          var office = this.completingOfficeList.find(p => p.FacilityOfficeLegalEntityId == this.completingOfficeLegalEntityId);
          if (office) {
            this.facilityAddress = office.Address;
          }
        }
        else {
          this.facilityOfficeName = data.FacilityOffice;
          this.facilityAddress = data.FacilityAddress;
        }

        //decode fields that could be used for cross site scripting attacks
        this.lastName = decodeString(data.Applicant.ApplicantLastName);
        this.firstName = decodeString(data.Applicant.ApplicantFirstName);

        this.formOfPayment = data.FormOfPayment;
        this.noBurrosSold = data.NoBurrosSold;
        this.noWildHorsesSold = data.NoWildHorsesSold;
        this.applicant = data.Applicant;
        this.saleCity = data.SaleCity;
        this.saleDate = data.SaleDateDisplay;
        this.purchaserSignature = data.PurchaserSignature;

        if (data.PurchaserSignatureDate) {
          this.purchaserSignatureDateVal = new Date(data.PurchaserSignatureDate);
          this.purchaserSignatureDate = this.purchaserSignatureDateVal.toLocaleDateString();
        }

        this.blmOfficialSignature = data.BlmOfficialSignature;

        if (data.BlmOfficialSignatureDate) {
          this.blmOfficialSignatureDateVal = new Date(data.BlmOfficialSignatureDate);
          this.blmOfficialSignatureDate = this.blmOfficialSignatureDateVal.toLocaleDateString();
        }

        this.signalmentKey = data.SignalmentKey;
        this.price = data.Price;

        this.disablePurchaserSig = true;
        this.disableBlmSig = true;
        this.disableSubmit = true;

        if (this.isBlmUser) {
          if (!this.blmOfficialSignature) {
            this.disableBlmSig = false;
          }
        }
        else {
          if (this.blmOfficialSignature && !this.purchaserSignature) {
            this.disablePurchaserSig = false;
          }
        }

      },

      close: function () {
        if (this.isBlmUser) {
          window.location = '/admin/documents';
        }
        else {
          window.location = '/document';
        }
      },

      purchaserSignatureChanged: function () {
        if (this.purchaserSignature) {
          var d = new Date();
          this.purchaserSignatureDate = d.toLocaleDateString();
          this.purchaserSignatureDateVal = d;
          this.disableSubmit = false;
        }
        else {
          this.purchaserSignatureDate = null;
          this.purchaserSignatureDateVal = null;
          this.disableSubmit = true;
        }
      },

      blmSignatureChanged: function () {
        if (this.blmOfficialSignature) {
          var d = new Date();
          this.blmOfficialSignatureDate = d.toLocaleDateString();
          this.blmOfficialSignatureDateVal = d;
          this.disableSubmit = false;
        }
        else {
          this.blmOfficialSignatureDate = null;
          this.blmOfficialSignatureDateVal = null;
          this.disableSubmit = true;
        }
      },

      createJson: function () {
        var form = {
          billOfSaleId: this.billOfSaleId,
          applicationId: this.applicationId,
          psEventId: this.psEventId,
          freezemark: this.freezemark,
          price: this.price,
          completingOfficeLegalEntityId: this.completingOfficeLegalEntityId,
          facilityOffice: this.facilityOfficeName,
          facilityAddress: this.facilityAddress,
          formOfPayment: this.formOfPayment,
          noBurrosSold: this.noBurrosSold,
          noWildHorsesSold: this.noWildHorsesSold,
          saleCity: this.saleCity,
          purchaserSignature: this.purchaserSignature,
          purchaserSignatureDate: (this.purchaserSignatureDateVal != null ? this.purchaserSignatureDateVal.toISOString().split('T')[0] : null),
          blmOfficialSignature: this.blmOfficialSignature,
          blmOfficialSignatureDate: (this.blmOfficialSignatureDateVal != null ? this.blmOfficialSignatureDateVal.toISOString().split('T')[0] : null),
        };

        return form;
      },

      submitBos: function () {
        var model = this;
        var bosForm = $("#bosForm").validate();
        var isValid = bosForm.form();

        if (isValid) {
          model.processing = true;
          if (model.isBlmReview) {  //save location info into cache for use on next new form
            localStorage.setItem('CACHE-CompletingOfficeLegalEntityId', model.completingOfficeLegalEntityId);
            model.facilityOfficeName = $("#completingOfficeSelect option:selected").text();
          }
          var appData = model.createJson();

          $.post('/ctxapp/documents/bos', appData)
            .done(function () {
              model.close();
            })
            .fail(function (response) {
              model.processing = false;
              var errMsg = getXhrErrorMessage(response);
              if (errMsg) {
                alert(errMsg);
              }
            })
        }
        else {
          //Get first invalid field and set focus
          if (bosForm.errorList != null && bosForm.errorList.length > 0) {
            var field = "#" + bosForm.errorList[0].element.id;
            $(field).get(0).scrollIntoView({ behavior: 'smooth' });
          }
        }
      },

      saveToPs: function () {
        var model = this;
        var bosData = {
          BillOfSaleId: model.billOfSaleId,
        };

        model.processing = true;
        $.ajax({
          url: '/ctxapp/documents/bos/pssave',
          type: "POST",
          data: bosData,
          dataType: "json",
          success: function () {
            model.submittedToPs = true;
            model.processing = false;
            $('#popupHeader').text('Bill of Sale');
            $('#popupBody').text('The Bill of Sale has been entered into WHBPS.');
            $(model.$.confirmationPopup).modal({ backdrop: 'static', keyboard: false });
          },
          error: function (response) {
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg);
              model.processing = false;
            }
          }
        });
      },

      enablePsSave: function (isSigned, submittedToPs, processing, voided) {
        var retval = false;
        if (isSigned && !submittedToPs && !processing && !voided) {
          retval = true;
        }
        return retval;
      },

      enableSubmit: function (disableSubmit, processing) {
        var retval = false;
        if (!disableSubmit && !processing) {
          retval = true;
        }
        return retval;
      },

      addComment: function () {
        $("#dialogComment").modal({ backdrop: 'static', keyboard: false });
      },

      saveComment: function (e) {
        var model = this;

        var comment = {
          ApplicationType: 'BOS',
          ApplicationId: model.data.agreementId,
          Comment: model.comment,
          CommentType: 'Admin Comment',
        };

        $.post('/ctxapp/documents/comments', comment)
          .done(function (data) {
            $("#dialogComment").modal("hide");
            model.comment = null;
          })
          .fail(function (response) {
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg);
            }
          });
      },

      searchAnimals: function () {
        $(this.$.animalSearchDialog).modal("show");
      },

      animalSelected: function () {
        var model = this;
        model.freezemark = this.$.adminAnimals.freezemark;

        //Get additional animal info needed.  Animal API List2 call from search grid won't return them
        $.get('ctxapp/animals/' + model.freezemark)
          .done(function (animal) {
            model.signalmentKey = animal.SignalmentKey;
            model.hasTraining = animal.Training != 'Untrained';
            $(model.$.animalSearchDialog).modal("hide");
          })
          .fail(function (response) {
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg);
            }
          });
      },

      fieldModeNew: function (fieldMode, isBlmReview) {
        return fieldMode && isBlmReview;
      },

      isSelected: function (id, optionId) {
        return id == optionId;
      },

      completingOfficeChanged: function () {
        if (this.completingOfficeList) {
          var selection = this.completingOfficeList.find(p => p.FacilityOfficeLegalEntityId == this.completingOfficeLegalEntityId);
          if (selection) {
            this.facilityAddress = selection.Address;
            this.facilityOfficeName = selection.FacilityOfficeName;
          }
          else {
            this.facilityAddress = null;
            this.facilityOfficeName = null;
          }
        }
      },
    });
  </script>
</dom-module>﻿<dom-module id="admin-nav">
  <template>
    <nav class="left-nav">
      <ul>
        <template if="{{rolesAllowed('ilmGocopMBAS_AdminProd')}}" is="dom-if">
          <li><a href="/admin/aboutus">About Us</a></li>
        </template>
        <template if="{{rolesAllowed('ilmGocopMBAS_AdminProd;ilmGocopMBAS;ilmGocopOLC_FieldAdmin')}}" is="dom-if">
          <li><a href="/admin/animalindex">Animals</a></li>
        </template>
        <template if="{{rolesAllowed('ilmGocopMBAS_AdminProd;ilmGocopMBAS')}}" is="dom-if">
          <li><a href="/admin/listingindex">Auction Listings</a></li>
        </template>
        <template if="{{rolesAllowed('ilmGocopMBAS_AdminProd;ilmGocopMBAS')}}" is="dom-if">
          <li><a href="/admin/bulkindex">Bulk Updates</a></li>
        </template>
        <template if="{{rolesAllowed('ilmGocopMBAS_AdminProd;ilmGocopMBAS;ilmGocopOLC_FieldAdmin')}}" is="dom-if">
          <li><a href="/admin/documentindex">Documents</a></li>
        </template>
        <template if="{{rolesAllowed('ilmGocopMBAS_AdminProd;ilmGocopMBAS;ilmGocopOLC_FieldAdmin')}}" is="dom-if">
          <li><a href="/admin/events">Events</a></li>
        </template>
        <template if="{{rolesAllowed('ilmGocopGiftMgmt')}}" is="dom-if">
          <li hidden$="{{!enableDonation}}"><a href="/admin/donationindex">Gift Mgmt</a></li>
        </template>
        <template if="{{rolesAllowed('ilmGocopMBAS_AdminProd')}}" is="dom-if">
          <li><a href="/admin/homepage">Homepage</a></li>
        </template>
        <template if="{{rolesAllowed('ilmGocopMBAS_AdminProd;ilmGocopOLC_Webmap')}}" is="dom-if">
          <li><a href="/admin/mapindex">Maps</a></li>
        </template>
        <template if="{{rolesAllowed('ilmGocopMBAS_AdminProd')}}" is="dom-if">
          <li><a href="/admin/notifications">Notifications</a></li>
        </template>
        <template if="{{rolesAllowed('ilmGocopMBAS_AdminProd;ilmGocopMBAS')}}" is="dom-if">
          <li><a href="/report">Reports</a></li>
        </template>
        <template if="{{rolesAllowed('ilmGocopMBAS_AdminProd;ilmGocopMBAS')}}" is="dom-if">
          <li><a href="/admin/userindex">User Management</a></li>
        </template>
      </ul>
    </nav>
  </template>
  <script>
    Polymer({
      is: "admin-nav",
      properties: {
        enableDonation: {
          type: Boolean,
          value: window.enableDonation // window.enableDonation gets set in the bottom of _Layout.cshtml using the "EnableDonation" appsetting
        }
      },
      attached: function () {
      },
      rolesAllowed: function (roles) {
        var userRoles = $user.getRoles();
        var allowedRoles = roles.split(';');
        for (var i = 0; i < userRoles.length; i++) {
          for (var x = 0; x < allowedRoles.length; x++) {
            if (allowedRoles[x] == userRoles[i]) {
              return true;
            }
          }
        }
        return false;
      },
    });
  </script>
</dom-module>﻿<dom-module id="admin-edit-about-us">
    <template>
        <style>
            :host {
                display: block;
            }           
            :host .closeDialog{
                color:white;
                opacity:initial
            }
            :host .controlLeft{
                margin-right:10px
            }
            :host .controlRight{
                margin-right:10px
            }
            :host .gridButton{
                padding:0
            }
            :host .linkControl{
                width:400px
            }
            :host .linkHeader{
                margin-bottom:0
            }
            :host .required{
                color:red
            }           
        </style>        
        <h4>Edit About Us<span class="required">*</span>
        </h4>
        <small>
            <span class="required">*</span>&nbsp;Required Field
        </small>
        <br>
        <br>
        <div class="row">
            <div class="col-md-12">
                <textarea cols="80" id="aboutUsEditor" name="aboutUsEditor" rows="10"></textarea>               
            </div>
        </div>
        <br>
        <div class="row">
            <div class="col-md-12">
                <button class="btn blm-btn-primary" on-tap="submitAboutUs" title="Submit about us text" type="button">Submit</button>
                <button class="btn blm-btn-secondary" on-tap="clearAboutUs" title="Clear about us text" type="button">Clear</button>
            </div>
        </div>
        <br>
        <div class="alert alert-danger alert-dismissible" hidden="{{hideAboutUsError}}" role="alert">
            <button aria-label="Close" class="close" on-tap="closeAboutUsError" type="button"><span aria-hidden="true">×</span></button>
            About Us is required.
        </div>
        <div class="row">
            <div class="col-md-12" id="aboutUsMessages"></div>
        </div>  
        <br>        
        <h4 class="linkHeader">Edit Important Document Links</h4>
        <small>
            <span class="required">*</span>&nbsp;Required Fields
        </small>
        <br>
        <br>
        <div class="row">
            <div class="col-md-12">                
                <div class="form-inline">
                    <div class="form-group controlRight">
                        <label class="control-label controlRight" for="txtImportantDocumentLinkName">Link Name<span class="required">*</span></label>
                        <input class="form-control" id="txtImportantDocumentLinkName" type="text" value="{{importantDocumentLinkName::input}}">
                    </div>
                    <div class="form-group">
                        <label class="control-label controlRight" for="txtImportantDocumentLink">Link Url<span class="required">*</span></label>
                        <input class="form-control linkControl" id="txtImportantDocumentLink" name="txtImportantDocumentLink" type="text" value="{{importantDocumentLink::input}}">                                                            
                    </div>                        
                    <button class="btn btn-primary controlLeft" on-tap="addImportantDocumentLink" title="Add link" type="button">Add</button>
                    <button class="btn blm-btn-secondary controlLeft" on-tap="cancelImportantDocumentLink" title="Cancel" type="button">Cancel</button>
                </div>            
            </div>           
        </div>       
        <br>
        <div class="alert alert-danger alert-dismissible" hidden="{{hideLinkError}}" role="alert">
            <button aria-label="Close" class="close" on-tap="closeLinkError" type="button"><span aria-hidden="true">×</span></button>
            Link Name and Link Url are required.
        </div>                
        <br>
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <table class="table table-condensed">
                            <thead>
                                <tr>
                                    <th>Link</th>
                                    <th>URL</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                <template is="dom-repeat" items="{{importantDocumentLinks}}">
                                    <tr>
                                        <td>{{item.linkName}}</td>
                                        <td>{{item.linkUrl}}</td>
                                        <td>
                                            <button class="btn btn-link gridButton" data-filename="{{item.linkName}}" on-tap="showImportDocumentLinkDeleteWarning" title="Delete important document link" type="button">Delete</button>
                                            <button class="btn btn-link gridButton" data-filename="{{item.linkName}}" on-tap="editImportDocumentLink" title="Edit important document link" type="button">Edit</button>
                                            <button class="btn btn-link gridButton" data-filename="{{item.linkUrl}}" on-tap="viewLink" title="View important document link" type="button">View</button>
                                        </td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    <button class="btn blm-btn-primary" on-tap="submitImportDocumentLinks" title="Submit important document links" type="button">Submit</button>
                    <button class="btn blm-btn-secondary" id="cmdClearImportantDocumentLinks" on-tap="showImportDocumentLinkDeleteWarning" title="Clear important document links" type="button">Clear</button>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12" id="importantLinkMessages"></div>            
        </div>
        <br>
        <br>
        <h4>Edit Popular Links</h4>
        <small>
            <span class="required">*</span>&nbsp;Required Fields
        </small>
        <br>
        <br>
        <div class="row">
            <div class="col-md-12">
                <div class="form-inline">
                    <div class="form-group controlRight">
                        <label class="control-label controlRight" for="txtPopularLinkName">Link Name<span class="required">*</span></label>
                        <input class="form-control" id="txtPopularLinkName" type="text" value="{{popularLinkName::input}}">
                    </div>
                    <div class="form-group">
                        <label class="control-label controlRight" for="txtPopularLink">Link Url<span class="required">*</span></label>
                        <input class="form-control linkControl" id="txtPopularLink" type="text" value="{{popularLink::input}}">
                    </div>
                    <button class="btn btn-primary controlLeft" on-tap="addPopularLink" title="Add link" type="button">Add</button>
                    <button class="btn blm-btn-secondary controlLeft" on-tap="cancelPopularLink" title="Cancel" type="button">Cancel</button>
                </div>
            </div>                       
        </div>
        <br>
        <div class="alert alert-danger alert-dismissible" hidden="{{hidePopularLinkError}}" role="alert">
            <button aria-label="Close" class="close" on-tap="closePopularLinkError" type="button"><span aria-hidden="true">×</span></button>
            Link Name and Link Url are required.
        </div>    
        <br>
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <table class="table table-condensed">
                            <thead>
                                <tr>
                                    <th>Link</th>
                                    <th>URL</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                <template is="dom-repeat" items="{{popularLinks}}">
                                    <tr>
                                        <td>{{item.linkName}}</td>
                                        <td>{{item.linkUrl}}</td>
                                        <td>
                                            <button class="btn btn-link gridButton" data-filename="{{item.linkName}}" on-tap="showPopularLinkDeleteWarning" title="Delete popular link" type="button">Delete</button>
                                            <button class="btn btn-link gridButton" data-filename="{{item.linkName}}" on-tap="editPopularLink" title="Edit popular link" type="button">Edit</button>
                                            <button class="btn btn-link gridButton" data-filename="{{item.linkUrl}}" on-tap="viewLink" title="View popular link" type="button">View</button>
                                        </td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    <button class="btn blm-btn-primary" on-tap="submitPopularLinks" title="Submit popular links" type="button">Submit</button>
                    <button class="btn blm-btn-secondary" id="cmdclearAllPopularLinks" on-tap="showPopularLinkDeleteWarning" title="Clear popular links" type="button">Clear</button>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12" id="popularLinkMessages"></div>
        </div>
        <br>        
        <h4>Edit Inhumane Treatment<span class="required">*</span></h4>
        <small>
            <span class="required">*</span>&nbsp;Required Field
        </small>
        <br>
        <br>
        <div class="row">
            <div class="col-md-12">
                <textarea cols="80" id="inhumaneTreatmentEditor" name="inhumaneTreatmentEditor" rows="10"></textarea>               
            </div>
        </div>
        <br>
        <div class="row">
            <div class="col-md-12">
                <button class="btn blm-btn-primary" on-tap="submitInhumaneTreatment" title="Submit inhumane treatment text" type="button">Submit</button>
                <button class="btn blm-btn-secondary" on-tap="clearInhumaneTreatment" title="Clear inhumane treatment text" type="button">Clear</button>
            </div>
        </div>
        <br>
        <div class="alert alert-danger alert-dismissible" hidden="{{hideInhumaneTreatment}}" role="alert">
            <button aria-label="Close" class="close" on-tap="closeInhumaneTreatmentError" type="button"><span aria-hidden="true">×</span></button>
            Inhumane Treatment is required.
        </div>        
        <div class="row">
            <div class="col-md-12" id="inhumanTreatmentMessages"></div>
        </div>
        <div class="modal fade" id="warningModal" role="dialog" tabindex="-1">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button aria-hidden="true" class="close closeDialog" on-tap="closeWarningModal" type="button"><span aria-hidden="true">×</span></button>
                        <h4 class="modal-title">{{warningModalTitle}}</h4>
                    </div>
                    <div class="modal-body">
                        <div class="alert alert-danger" role="alert">
                            <strong>
                                <span class="fa fa-warning"></span> &nbsp; {{warningModalMessage}}                                
                            </strong>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-sm blm-btn-primary" on-tap="action" type="button">Yes</button>
                        <button class="btn btn-sm blm-btn-secondary" on-tap="closeWarningModal" type="button">No</button>
                    </div>
                </div>
            </div>
        </div>
    </template>
    <script>
        Polymer({
            is: "admin-edit-about-us",
            properties: {
                aboutUs:{
                    type: Object
                },
                actionState:{
                    type: String,
                    value:""
                },
                hideAboutUsError: {
                    type: Boolean,
                    value: true
                },
                hideInhumaneTreatment:{
                    type: Boolean,
                    value: true
                },
                hideLinkError:{
                    type: Boolean,
                    value: true
                },
                hidePopularLinkError: {
                    type: Boolean,
                    value: true
                },
                importantDocumentLink: {
                    type: String,
                    value: ""
                },
                importantDocumentLinkName: {
                    type: String,
                    value: ""
                },
                importantDocumentLinks: {
                    type: Array,
                    value: function () { return new Array(); }
                },
                importantDocumentLinkToDelete:{
                    type: String,
                    value: ""
                },
                popularLinkToDelete: {
                    type: String,
                    value: ""
                },
                isDirty:{
                    type:Boolean,
                    value: false
                },                
                popularLink: {
                    type: String,
                    value: ""
                },
                popularLinkName:{
                    type: String,
                    value: ""
                },
                popularLinks: {
                    type: Array,
                    value: function () { return new Array(); }
                },
                warningModalMessage: {
                    type: String,
                    value: ""
                },
                warningModalTitle: {
                    type: String,
                    value: ""
                }
            },
            viewLink:function(e){                
                window.open(e.currentTarget.dataFilename, "_blank");                
            },
            addImportantDocumentLink: function () {                
                this.clearMessaging();

                if (this.importantDocumentLinkName === "" || this.importantDocumentLink === "") {
                    this.hideLinkError = false;
                    $("#txtImportantDocumentLinkName").focus();
                    return;
                }
                else {
                    this.hideLinkError = true;
                }

                var link = { "linkName": this.importantDocumentLinkName, "linkUrl":this.importantDocumentLink};
                this.push("importantDocumentLinks", link);
                this.isDirty = true;
                this.importantDocumentLink = "";
                this.importantDocumentLinkName = "";
                $("#txtImportantDocumentLinkName").focus();
            },
            addPopularLink: function () {
                this.clearMessaging();
                $("#popularLinkMessages").html("");

                if (this.popularLinkName === "" || this.popularLink === "") {
                    this.hidePopularLinkError = false;
                    $("#txtPopularLinkName").focus();
                    return;
                }
                else {
                    this.hidePopularLinkError = true;
                }

                var link = { "linkName": this.popularLinkName, "linkUrl": this.popularLink };
                this.push("popularLinks", link);
                this.isDirty = true;
                this.popularLink = "";
                this.popularLinkName = "";
                $("#txtPopularLinkName").focus();
            },
            action:function(){
                switch (this.actionState) {                    
                    case "clearAllImportantDocumentLinks":                        
                        this.clearAllImportantDocumentLinks();
                        break;
                    case "clearAllPopularLinks":
                        this.clearAllPopularLinks();
                        break;
                    case "deleteImportantDocumentLink":
                        this.deleteImportDocumentLink();
                        break;
                    case "deletePopularLink":
                        this.deletePopularLink();
                        break;
                    default:
                }

                $("#warningModal").modal("hide");
                this.actionState = "";
            },
            attached: function () {            
                //Guards
                this.hideAboutUsError = true;
                this.hideInhumaneTreatment = true;
                this.actionState = "";
                this.isDirty = false;
                this.hideLinkError = true;
                this.importantDocumentLinkToDelete = "";
                this.warningModalMessage = "";
                this.warningModalTitle = ""

                CKEDITOR.replace('aboutUsEditor');
                CKEDITOR.replace('inhumaneTreatmentEditor');                

                this.getAboutUs();
            },
            buildImportLinks:function(){
                var links = "";

                for (var i = 0; i < this.importantDocumentLinks.length; i++) {                    
                    links += '{"linkName":"' + this.importantDocumentLinks[i].linkName + '","linkUrl":"' + this.importantDocumentLinks[i].linkUrl + '"}' + "|";
                }

                return links;
            },
            buildPopularLinks:function(){
                var links = "";

                for (var i = 0; i < this.popularLinks.length; i++) {
                    links += '{"linkName":"' + this.popularLinks[i].linkName + '","linkUrl":"' + this.popularLinks[i].linkUrl + '"}' + "|";
                }

                return links;
            },
            cancelImportantDocumentLink: function () {
                this.hideLinkError = true;

                if (this.importantDocumentLinkName === "" || this.importantDocumentLink === "") {
                    this.importantDocumentLink = "";
                    this.importantDocumentLinkName = "";
                    $("#txtImportantDocumentLinkName").focus();
                    return;
                }
                                
                var link = { "linkName": this.importantDocumentLinkName, "linkUrl": this.importantDocumentLink };
                this.push("importantDocumentLinks", link);
                this.importantDocumentLink = "";
                this.importantDocumentLinkName = "";
            },
            cancelPopularLink:function(){
                this.closePopularLinkError();
                $("#popularLinkMessages").html("");

                if (this.popularLinkName === "" || this.popularLink === "") {
                    this.popularLink = "";
                    this.popularLinkName = "";
                    $("#txtPopularLinkName").focus();
                    return;
                }

                var link = { "linkName": this.popularLinkName, "linkUrl": this.popularLink };
                this.push("popularLinks", link);
                this.popularLinkName = "";
                this.popularLink = "";
            },
            clearAboutUs:function(){
                CKEDITOR.instances.aboutUsEditor.setData('');
                $("#aboutUsMessages").html("");
                this.closeAboutUsError();
            },
            clearAllImportantDocumentLinks: function () {                
                this.closeLinkError();
                this.clearMessaging();
                this.importantDocumentLink = "";
                this.importantDocumentLinkName = "";
                this.clearArray(this.importantDocumentLinks.length, "importantDocumentLinks");
                this.resetImportantDocumentLinksArray();
                this.aboutUs.ImportantDocumentLinks = this.buildImportLinks();
                this.deleteImportDocumentLinks("clearAllimportantDocumentLinks");
            },
            clearAllPopularLinks: function () {
                this.closePopularLinkError();
                $("#popularLinkMessages").html("");
                this.popularLinkName = "";
                this.popularLink = "";
                this.clearArray(this.popularLinks.length, "popularLinks");
                this.resetPopularLinksArray();
                this.aboutUs.PopularLinks = this.buildPopularLinks();
                this.deletePopularLinks("clearAllPopularLinks");
            },
            clearArray:function(arrayLength, arrayName){                
                for (var i = 0; i < arrayLength; i++) {
                    this.pop(arrayName);
                }
            },
            clearInhumaneTreatment:function(){
                CKEDITOR.instances.inhumaneTreatmentEditor.setData('');
                $("#inhumanTreatmentMessages").html("");
                this.closeInhumaneTreatmentError();
            },
            clearMessaging:function(){
                $("#importantLinkMessages").html("");
            },
            closeAboutUsError: function () {
                this.hideAboutUsError = true;
            },
            closeInhumaneTreatmentError: function(){
                this.hideInhumaneTreatment = true;
            },
            closeLinkError:function(){
                this.hideLinkError = true;
            },
            closePopularLinkError:function(){
                this.hidePopularLinkError = true;
            },
            closeWarningModal: function () {
                this.warningModalMessage = "";
                $("#warningModal").modal("hide");
            },
            showImportDocumentLinkDeleteWarning: function (e) {                
                this.warningModalTitle = "Important Document Links";
                
                if (e.currentTarget.id === "cmdClearImportantDocumentLinks") {
                    this.warningModalMessage = "Are you sure you wish to delete all Important Document Links?";
                    this.actionState = "clearAllImportantDocumentLinks";
                }
                else {
                    this.importantDocumentLinkToDelete = e.currentTarget.dataFilename;
                    this.warningModalMessage = "Are you sure you wish to delete " + this.importantDocumentLinkToDelete + "?";
                    this.actionState = "deleteImportantDocumentLink"
                }
                                
                this.closeLinkError();
                this.clearMessaging();
                $("#warningModal").modal("show");                
            },
            showPopularLinkDeleteWarning:function(e){
                this.warningModalTitle = "Popular Links";

                if (e.currentTarget.id === "cmdclearAllPopularLinks") {
                    this.warningModalMessage = "Are you sure you wish to delete all Popular Links?";
                    this.actionState = "clearAllPopularLinks";
                }
                else {
                    this.popularLinkToDelete = e.currentTarget.dataFilename;
                    this.warningModalMessage = "Are you sure you wish to delete " + this.popularLinkToDelete + "?";
                    this.actionState = "deletePopularLink"
                }

                this.closePopularLinkError();
                $("#popularLinkMessages").html("");                
                $("#warningModal").modal("show");
            },
            deleteImportDocumentLink: function(){
                for (var i = 0; i < this.importantDocumentLinks.length; i++) {
                    if (this.importantDocumentLinks[i].linkName === this.importantDocumentLinkToDelete) {
                        this.splice("importantDocumentLinks", i, 1);
                        break;
                    }
                }
                
                this.resetImportantDocumentLinksArray();
                this.aboutUs.ImportantDocumentLinks = this.buildImportLinks();
                this.deleteImportDocumentLinks("deleteImportantDocumentLink", this.importantDocumentLinkToDelete);
                this.importantDocumentLinkToDelete = "";
            },
            deleteImportDocumentLinks: function (actionName, name) {
                var model = this;
                $.post('/ctxapp/content/aboutus-important-links', this.aboutUs)
                    .done(function (data) {
                        model.updateMessaging(actionName, name);
                    })
                    .fail(function (response) {
                        var errMsg = getXhrErrorMessage(response);
                        if (errMsg) {
                            alert(errMsg);
                        }
                    });
            },
            deletePopularLink: function () {                
                for (var i = 0; i < this.popularLinks.length; i++) {
                    if (this.popularLinks[i].linkName === this.popularLinkToDelete) {
                        this.splice("popularLinks", i, 1);
                        break;
                    }
                }

                this.resetPopularLinksArray();
                this.aboutUs.PopularLinks = this.buildPopularLinks();
                this.deletePopularLinks("deletePopularLink", this.popularLinkToDelete);
                this.popularLinkToDelete = "";
            },
            deletePopularLinks: function (actionName, name) {
                var model = this;
                $.post('/ctxapp/content/aboutus-popular-links', this.aboutUs)
                    .done(function (data) {
                        model.updateMessaging(actionName, name);
                    })
                    .fail(function (response) {
                        var errMsg = getXhrErrorMessage(response);
                        if (errMsg) {
                            alert(errMsg);
                        }
                    });
            },
            editImportDocumentLink: function (e) {
                this.closeLinkError();
                this.clearMessaging();

                for (var i = 0; i < this.importantDocumentLinks.length; i++) {
                    if (this.importantDocumentLinks[i].linkName === e.currentTarget.dataFilename) {
                        this.importantDocumentLink = this.importantDocumentLinks[i].linkUrl;
                        this.importantDocumentLinkName = this.importantDocumentLinks[i].linkName;
                        this.splice("importantDocumentLinks", i, 1);                                             
                        this.resetImportantDocumentLinksArray();

                        $("#txtImportantDocumentLinkName").focus();
                        break;
                    }
                }
            },
            editPopularLink:function (e){
                this.closePopularLinkError();
                $("#popularLinkMessages").html("");

                for (var i = 0; i < this.popularLinks.length; i++) {
                    if (this.popularLinks[i].linkName === e.currentTarget.dataFilename) {
                        this.popularLink = this.popularLinks[i].linkUrl;
                        this.popularLinkName = this.popularLinks[i].linkName;
                        this.splice("popularLinks", i, 1);
                        this.resetPopularLinksArray();

                        $("#txtPopularLinkName").focus();
                        break;
                    }
                }
            },
            getAboutUs: function () {
                var model = this;
                $.get('/ctxapp/content/aboutus')
                    .done(function (data) {
                        if (data === undefined || data === null) return;

                        model.aboutUs = data;
                        CKEDITOR.instances.aboutUsEditor.setData(data.AboutUsHTML);
                        CKEDITOR.instances.inhumaneTreatmentEditor.setData(data.InhumaneTreatmentHTML)

                        if (data.ImportantDocumentLinks && data.ImportantDocumentLinks.indexOf('|' > 0)) {
                            var importantDocumentData = data.ImportantDocumentLinks.split('|');                            

                            for (var i = 0; i < importantDocumentData.length; i++) {
                                if (importantDocumentData[i]) {
                                    model.push("importantDocumentLinks", JSON.parse(importantDocumentData[i]));
                                }
                            }
                        }

                        if (data.PopularLinks && data.PopularLinks.indexOf('|' > 0)) {
                            var popularLinksData = data.PopularLinks.split('|');

                            for (var i = 0; i < popularLinksData.length; i++) {
                                if (popularLinksData[i]) {
                                    model.push("popularLinks", JSON.parse(popularLinksData[i]));
                                }
                            }
                        }
                    })
                    .fail(function (response) {
                        var errMsg = getXhrErrorMessage(response);
                        if (errMsg) {
                            alert(errMsg);
                        }
                    });
            },
            resetImportantDocumentLinksArray:function(){
                var array = this.importantDocumentLinks;
                this.importantDocumentLinks = [];
                this.importantDocumentLinks = array;
            },
            resetPopularLinksArray:function(){
                var array = this.popularLinks;
                this.popularLinks = [];
                this.popularLinks = array;
            },
            submit: function (sectionName) {
                var model = this;
                $.post('/ctxapp/content/aboutus/', this.aboutUs)
                    .done(function (data) {
                        model.updateMessaging(sectionName);
                    })
                    .fail(function (response) {
                        var errMsg = getXhrErrorMessage(response);
                        if (errMsg) {
                            alert(errMsg);
                        }
                    });
            },
            submitAboutUs: function () {                
                this.aboutUs.AboutUsHTML = CKEDITOR.instances.aboutUsEditor.getData();

                if (this.aboutUs.AboutUsHTML === "") {
                    this.hideAboutUsError = false;
                    return;
                }

                this.hideAboutUsError = true;;
                this.submit("aboutUs");
            },
            submitImportDocumentLinks: function () {
                if (this.isDirty) {
                    this.aboutUs.ImportantDocumentLinks = this.buildImportLinks();
                    this.submit("importantDocumentLinks");
                }

                this.closeLinkError();
            },
            submitInhumaneTreatment:function(){              
                this.aboutUs.InhumaneTreatmentHTML = CKEDITOR.instances.inhumaneTreatmentEditor.getData();

                if (this.aboutUs.InhumaneTreatmentHTML === "") {
                    this.hideInhumaneTreatment = false;
                    return;
                }

                this.hideInhumaneTreatment = true;
                this.submit("inhumaneTreatment");
            },
            submitPopularLinks: function () {
                if (this.isDirty) {
                    this.aboutUs.PopularLinks = this.buildPopularLinks();
                    this.submit("popularLinks");
                }

                $("#popularLinkMessages").html("");
                this.closeLinkError();
            },
            updateMessaging: function (actionName, name) {                
                var messagePart1 = '<div class="alert alert-success alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
                var messagePart2 = "";

                switch (actionName) {
                    case "aboutUs":
                        messagePart2 = "About Us has been updated.</div>";
                        $("#aboutUsMessages").html(messagePart1 + messagePart2);
                        break;
                    case "deleteImportantDocumentLink":
                        messagePart2 = "Important Document Link " + name + " has been deleted.</div>";
                        $("#importantLinkMessages").html(messagePart1 + messagePart2);
                        break;
                    case "importantDocumentLinks":
                        messagePart2 = "Important Document Links has been updated.</div>";
                        $("#importantLinkMessages").html(messagePart1 + messagePart2);
                        break;
                    case "clearAllimportantDocumentLinks": 
                        messagePart2 = "All Important Document Links have been deleted.</div>";
                        $("#importantLinkMessages").html(messagePart1 + messagePart2);
                        break;
                    case "deletePopularLink":
                        messagePart2 = "Popular Link " + name + " has been deleted.</div>";
                        $("#popularLinkMessages").html(messagePart1 + messagePart2);
                        break;
                    case "clearAllPopularLinks":
                        messagePart2 = "All Popular Links have been deleted.</div>";
                        $("#popularLinkMessages").html(messagePart1 + messagePart2);
                        break;
                    case "popularLinks":
                        messagePart2 = "Popular Links has been updated.</div>";
                        $("#popularLinkMessages").html(messagePart1 + messagePart2);
                        break;
                    case "inhumaneTreatment":
                        messagePart2 = "Inhumane Treatment has been updated.</div>";
                        $("#inhumanTreatmentMessages").html(messagePart1 + messagePart2);
                        break;
                    default:
                }                
            }
        });
    </script>        
</dom-module><dom-module id="donation-image-display">
  <template>
    <style>
      :host() {
        display: block;
      }

      .closeDialog {
        color: white;
        opacity: initial
      }

      .extraSpace {
        margin-top: 10px;
        margin-bottom: 10px;
      }

      :host .loading {
        margin-top: 50px;
        text-align: center;
        width: 100%;
      }

      :host .smallPhotos {
        cursor: pointer;
        margin-bottom: 10px;
        max-width: 100%;
      }

      .required {
        color: red
      }
    </style>

    <div class="loading" hidden$="{{!loading}}" id="loading">
      <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i><br>
      <h4>Loading...</h4>
    </div>
    <div class="hidden" id="detailLayout">
      <div class="row">
        <div class="col-md-12">
          <h4>Image Display</h4>
        </div>
      </div>
      <div class="row">
        <div class="col-md-2">
          <button class="btn blm-btn-link" on-tap="saveSortOrder">
            <span class="fa fa-save"></span> Save Order
          </button>
        </div>
        <div class="col-md-2">
          <button class="btn blm-btn-link" disabled$="{{processing}}" data-modal="filesDialog" on-tap="openFilesDialog" type="button">Manage Files</button>
        </div>
        <div class="col-md-8">
          Images will display in the order that they appear.  The top image will be the left most image.
          The next image down will be the second left most image. To change the order of the
          uploaded images, drag them to the order you want and click the Save Order button.
        </div>
      </div>
      <div class="row">
        <div class="col-md-2 all-photos" id="all-photos" style="height:500px; overflow-y:auto">
          <template is="dom-repeat" items="{{pageImages}}">
            <img alt="thumbnail" class="img-responsive smallPhotos" height="118" id="{{item.Id}}" on-tap="showImage" src$="{{item.FilePathThumb}}" full-image$="{{item.FilePath}}" style="display:block;" width="145">
          </template>
        </div>
        <div class="col-md-10 text-right" style="min-height:500px;margin-left:10px;text-align:right;width:82%" ;="">
          <div id="largeImageContainer">
            <img alt="" class="img-responsive center-block" id="largeImage" src$="{{imagePath}}" style="min-height:500px;max-height:100%;width:500px;max-width:100%">
          </div>
        </div>
      </div>
      <div class="row">&nbsp;</div>
      <div class="modal fade" id="filesDialog" role="dialog" tabindex="-1">
        <div class="modal-dialog modal-lg" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button aria-label="Close" class="close closeDialog" on-tap="closeFilesDialog" type="button"><span aria-hidden="true">×</span></button>
              <h4 class="modal-title">Manage Files</h4>
            </div>
            <div class="modal-body">
              <donation-manage-files id="manageFiles" data-pageid="{{dataPageid}}"></donation-manage-files>
            </div>
            <div class="modal-footer">
              <button class="btn blm-btn-secondary" data-modal="filesDialog" on-tap="closeFilesDialog" title="Close Manage Images window" type="button">Close</button>
              <button class="btn blm-btn-primary" data-modal="filesDialog" on-tap="uploadFiles" title="Upload files" type="button" disabled$="{{processing}}">Upload Files</button>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-2">
          <h4>Image Details</h4>
        </div>
      </div>
      <div class="modal fade" id="imageInfoDialog" role="dialog" tabindex="-1">
        <div class="modal-dialog modal-lg" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button aria-label="Close" class="close closeDialog" on-tap="cancelImageInfoEdit" type="button"><span aria-hidden="true">×</span></button>
              <h4 class="modal-title">Edit Image Information</h4>
            </div>
            <div class="modal-body">
              <div class="row extraSpace">
                <div class="col-md-12">
                  <div class="form-inline">
                    <div class="form-group">
                      <img src$="{{imageThumb}}" alt="{{imageAltText}}">
                    </div>
                  </div>
                </div>
              </div>
              <div class="row extraSpace">
                <div class="col-md-12">
                  <div class="form-inline">
                    <div class="form-group">
                      <label class="control-label">File Name</label>
                      <span>{{imageFileName}}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row extraSpace" hidden="{{!isGallery}}">
                <div class="col-md-12">
                  <div class="form-inline">
                    <div class="form-group">
                      <label class="control-label" for="hmaTitle">HMA Title<span class="required">*</span></label>
                      <input class="form-control" id="hmaTitle" name="hmaTitle" type="text" value="{{imageTitle::input}}">
                    </div>
                  </div>
                </div>
              </div>
              <div class="row extraSpace" hidden="{{isGallery}}">
                <div class="col-md-12">
                  <div class="form-inline">
                    <label class="control-label" for="textOverlayEditor">Overlay Text</label>
                    <textarea id="textOverlayEditor" name="textOverlayEditor"></textarea>
                  </div>
                </div>
              </div>
              <div class="row extraSpace" hidden="{{!isGallery}}">
                <div class="col-md-12">
                  <div class="form-inline">
                    <label class="control-label" for="hmaDescEditor">HMA Description</label>
                    <textarea id="hmaDescEditor" name="hmaDescEditor"></textarea>
                  </div>
                </div>
              </div>
              <div class="row extraSpace">
                <div class="col-md-7">
                  <div class="form-inline">
                    <div class="form-group ">
                      <label hidden="{{!isGallery}}" class="control-label" for="altText">Alt/Overlay Text<span class="required">*</span></label>
                      <label hidden="{{isGallery}}" class="control-label" for="altText">Alternate Text<span class="required">*</span></label>
                      <input class="form-control" style="width:300px" id="altText" name="altText" type="text" value="{{imageAltText::input}}">
                    </div>
                  </div>
                </div>
                <div class="col-md-4" hidden="{{!isGallery}}">
                  <div class="form-inline">
                    <div class="form-group">
                      <label for="multiSelectable">
                        <input id="multiSelectable" name="multiSelectable" type="checkbox" checked="{{multiSelectable::change}}"> Allow part of multiple selections
                      </label>
                    </div>
                  </div>
                </div>
              </div>
              <span hidden="{{hideLinkError}}" class="required">Image Alternate Text is required.</span>
            </div>
            <div class="modal-footer">
              <small class="pull-left">
                <span class="required">*</span>&nbsp;Required Fields
              </small>
              <button class="btn blm-btn-secondary" on-tap="cancelImageInfoEdit" title="Cancel" type="button">Cancel</button>
              <button class="btn blm-btn-primary" on-tap="updateImageInfo" title="Submit" type="button">Submit</button>
            </div>
          </div>
        </div>
      </div>
      <br>
      <div class="row">
        <div class="col-md-12">
          <div class="panel panel-default">
            <div class="panel-body">
              <table class="table table-condensed">
                <thead>
                  <tr>
                    <th>File Name</th>
                    <th hidden="{{!isGallery}}">Title</th>
                    <th hidden="{{isGallery}}">Overlay Text</th>
                    <th hidden="{{!isGallery}}">Description Text</th>
                    <th hidden="{{isGallery}}">Alt Text</th>
                    <th hidden="{{!isGallery}}">Alt/Overlay Text</th>
                    <th hidden="{{!isGallery}}">Multi Select</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  <template is="dom-repeat" items="{{pageImages}}">
                    <tr>
                      <td>{{item.OriginalFileName}}</td>
                      <td hidden="{{!isGallery}}">{{item.Title}}</td>
                      <td hidden="{{isGallery}}">{{item.OverlayText}}</td>
                      <td hidden="{{!isGallery}}">{{item.DescriptionHTML}}</td>
                      <td>{{item.AltText}}</td>
                      <td hidden="{{!isGallery}}">{{item.IsHmaMultiSelect}}</td>
                      <td>
                        <button class="btn btn-sm blm-btn-link" disabled$="{{processing}}" hidden$="[[isHidden(item.IsPublished)]]" data-id="{{item.Id}}" on-tap="editImageInfo" type="button">Edit</button>
                        <button class="btn btn-sm blm-btn-link" disabled$="{{processing}}" hidden$="[[isShowable(isGallery, item.IsPublished, 'publish')]]" data-id="{{item.Id}}" data-action="publish" on-tap="publish" type="button">Publish</button>
                        <button class="btn btn-sm blm-btn-link" disabled$="{{processing}}" hidden$="[[isShowable(isGallery, item.IsPublished, 'unpublish')]]" data-id="{{item.Id}}" data-action="unpublish" on-tap="publish" type="button">Unpublish</button>
                      </td>
                    </tr>
                  </template>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12" id="importantImageMessages"></div>
      </div>
      <br>
    </div>
  </template>
  <script>
    'use strict';
    Polymer({
      is: 'donation-image-display',
      properties: {
        hideLinkError: {
          type: Boolean,
          value: true
        },
        dataPageid: {
          type: String
        },
        imagePath: {
          type: String,
          value: ''
        },
        processing: {
          type: Boolean,
          value: false
        },
        pageImages: {
          type: Array,
          value: []
        },
        changedImages: {
          type: Array,
          value: []
        },
        imageFileName: {
          type: String,
          value: ''
        },
        imageMessageHTML: {
          type: String,
          value: ''
        },
        imageDescriptionHTML: {
          type: String,
          value: ''
        },
        imageTitle: {
          type: String,
          value: ''
        },
        imageId: {
          type: Number,
          value: 0
        },
        imageAltText: {
          type: String,
          value: ''
        },
        imageThumb: {
          type: String,
          value: ''
        },
        isDirty: {
          type: Boolean,
          value: false
        },
        isGallery: {
          type: Boolean,
          value: false
        },
      },

      attached: function () {
        this.async(function () {
          this.loading = true;
          this.getImages();
        });

        $(".all-photos").sortable(
          {
            opacity: 0.7,
            revert: false,
            scroll: true,
            tolerance: 'pointer',
          }
        );
        CKEDITOR.replace('textOverlayEditor');
        var editor = CKEDITOR.instances["textOverlayEditor"];
        editor.config.height = 100;

        CKEDITOR.replace('hmaDescEditor');
        editor = CKEDITOR.instances["hmaDescEditor"];
        editor.config.height = 100;

        if (this.dataPageid == 3) {
          this.isGallery = true;
        } else {
          this.isGallery = false;
        }

        //Fix for CKEDITOR Link focus issue when inside modal
        $.fn.modal.Constructor.prototype.enforceFocus = function () {
          var $modalElement = this.$element;
          $(document).on('focusin.modal', function (e) {
            if ($modalElement.length > 0 && $modalElement[0] !== e.target
              && !$modalElement.has(e.target).length
              && $(e.target).parentsUntil('*[role="dialog"]').length === 0) {
              $modalElement.focus();
            }
          });
        };
      },

      isHidden: function (isPublished) {
        if (isPublished) {
          return true;
        } else {
          return false;
        }
      },

      isShowable: function (isGallery, isPublished, linkName) {
        if (isGallery) {
          if (linkName === "publish" && !isPublished) {
            return false;
          } else if (linkName === "unpublish" && isPublished) {
            return false;
          } else {
            return true;
          }
        } else {
          return true;
        }
      },

      publish: function (e) {
        var id = e.currentTarget.dataId;
        var action = e.currentTarget.attributes['data-action'] === undefined ? "" : e.currentTarget.attributes['data-action'].value;
        if (e) { e.preventDefault(); }
        var model = this;
        var imageData;
        for (var i = 0; i < model.pageImages.length; i++) {
          if (model.pageImages[i].Id === id) {
            imageData = model.pageImages[i];
            if (action === "publish") {
              imageData.IsPublished = true;
            } else {
              imageData.IsPublished = false;
            }

          }
        }
        model.processing = true;
        if (imageData !== undefined) {
          $.ajax({
            url: `/ctxapp/donation/media/${imageData.Id}/togglepublishflag`,
            data: JSON.stringify(imageData),
            dataType: 'json',
            contentType: "application/json",
            type: "POST",
            success: function (data) {
              console.log(data);
              model.getImages();
            },
          }).fail(function (response) {
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg);
            }
          });
        }
      },

      closeLinkError: function () {
        this.hideLinkError = true;
      },

      clearMessaging: function () {
        $("#importantImageMessages").html("");
      },

      cancelImageInfoEdit: function () {
        $("#imageInfoDialog").modal("hide");
        this.hideLinkError = true;
        this.hideButtons = true;
        this.resetImageControl("");
      },

      resetImageControl: function () {
        this.imageId = 0;
        this.imageFileName = "";
        CKEDITOR.instances.textOverlayEditor.setData('');
        CKEDITOR.instances.hmaDescEditor.setData('');
        this.imageMessageHTML = "";
        this.imageDescriptionHTML = "";
        this.imageTitle = "";
        this.imageAltText = '';
        this.imageThumb = '';
        $("#txtTitle").focus();
      },

      updateImageInfo: function () {
        var model = this;
        this.clearMessaging();

        if (!this.imageAltText) {
          this.hideLinkError = false;
          $("#txtTitle").focus();
          return;
        }
        else {
          this.hideLinkError = true;
          this.isDirty = true;
          this.hideButtons = true;
          var currentImage;
          this.pageImages.forEach(function (eaImage) {
            if (model.imageId === eaImage.Id) {
              currentImage = eaImage;
              return;
            }
          });

          if (this.isGallery) {
            currentImage.OverlayText = this.imageAltText;
          } else {
            currentImage.OverlayText = CKEDITOR.instances.textOverlayEditor.getData();
          }
          currentImage.DescriptionHTML = CKEDITOR.instances.hmaDescEditor.getData();
          currentImage.AltText = this.imageAltText;
          currentImage.Title = this.imageTitle;
          currentImage.IsHmaMultiSelect = this.multiSelectable;

          this.push("pageImages", currentImage);
          var array = [];
          this.changedImages.forEach(function (eaImage) {
            if (eaImage.Id !== model.imageId) {
              array.push(eaImage);
            }
          });
          array.push(currentImage);
          this.changedImages = array;
          this.isDirty = true;
          this.resetImageControl();
          this.submitImageData();
        }
        $("#imageInfoDialog").modal("hide");
      },

      editImageInfo: function (e) {
        $("#imageInfoDialog").modal("show");
        this.closeLinkError();
        this.clearMessaging();

        for (var i = 0; i < this.pageImages.length; i++) {
          if (this.pageImages[i].Id === e.currentTarget.dataId) {
            this.imageThumb = this.pageImages[i].FilePathThumb;
            this.imageId = this.pageImages[i].Id;
            this.imageFileName = this.pageImages[i].OriginalFileName;
            var editor = CKEDITOR.instances["textOverlayEditor"];
            this.imageMessageHTML = this.pageImages[i].OverlayText;
            editor.setData(this.imageMessageHTML);
            var descEditor = CKEDITOR.instances["hmaDescEditor"];
            this.imageDescriptionHTML = this.pageImages[i].DescriptionHTML;
            descEditor.setData(this.imageDescriptionHTML);
            this.imageTitle = this.pageImages[i].Title;
            this.imageAltText = this.pageImages[i].AltText;
            this.imageDisplayOrder = this.pageImages[i].DisplayOrder;
            this.hideButtons = false;
            this.multiSelectable = this.pageImages[i].IsHmaMultiSelect;
            $("#txtTitle").focus();
            break;
          }
        }
      },

      showImage: function (e) {
        var model = this;
        var src = $(e.target).attr('full-image');
        model.imagePath = src;
        $(model.$.largeImageContainer).show();
        var img = document.getElementById("largeImage");
        img.cropper.destroy();
        new Cropper(img, {
          autoCrop: false,
          background: false,
          dragMode: 'move',
          zoomOnWheel: false
        });
      },

      saveSortOrder: function () {
        var model = this;
        var imageData = [];
        var t = $(".smallPhotos");

        for (var i = 0; i < t.length; i++) {
          var image = { "Id": t[i].id, "URL": t[i].src, "FileName": "", "DisplayOrder": i };
          imageData.push(image);
        }

        $.ajax({
          url: '/ctxapp/donation/media/display-order',
          data: JSON.stringify(imageData),
          dataType: 'json',
          contentType: "application/json",
          type: "PUT",
          success: function (data) {
            var img = document.getElementById("largeImage");
            img.cropper.destroy();

            model.getImages();
          }
        }).fail(function (response) {
          var errMsg = getXhrErrorMessage(response);
          if (errMsg) {
            alert(errMsg);
          }
        });
      },

      getImages: function () {
        var model = this;
        model.pageImages = [];

        $.get('/ctxapp/donation/media/bypage/' + model.dataPageid).done(function (response) {
          model.imagePath = "/Images/HorseSilhouette.jpg";
          var imageData = [];
          imageData = response.data;
          for (var i = 0; i < imageData.length; i++) {
            if (i == 0) {
              imageData[i].FilePath = imageData[i].FilePath + '?v=' + (new Date()).getTime();  //Stop caching image
              imageData[i].FilePathThumb = imageData[i].FilePathThumb + '?v=' + (new Date()).getTime();
              model.imagePath = imageData[i].FilePath;
            }
            model.push("pageImages", imageData[i]);
          }

          var img = document.getElementById("largeImage");
          new Cropper(img, {
            autoCrop: false,
            background: false,
            dragMode: 'move',
            zoomOnWheel: false
          });
          model.processing = false;
          model.fire("loaded", model);
          model.loading = false;
          $("#detailLayout").removeClass("hidden");
        }).fail(function (response) {
          var errMsg = getXhrErrorMessage(response);
          if (errMsg) {
            alert(errMsg);
          }
        });
      },

      submitImageData: function () {
        var model = this;
        if (this.isDirty) {
          var url = "";
          if (model.isGallery) {
            url = '/ctxapp/donation/media/updatetext/hma';
          }
          else {
            url = '/ctxapp/donation/media/updatetext';
          }
          $.ajax({
            url: url,
            type: 'PUT',
            contentType: 'application/json',
            data: JSON.stringify(this.changedImages),
            success: function (result) {
              console.log(result);
              model.updateMessaging("submitImageData");
              model.isDirty = false;
              $.get(`/ctxapp/donation/media/bypage/${model.dataPageid}`)
                .done(function (response) {
                  if (response) {
                    model.pageImages = response.data;
                  }
                }).fail(function (response) {
                  var errMsg = getXhrErrorMessage(response);
                  if (errMsg) {
                    alert(errMsg);
                  }
                });
            }
          }).fail(function (response) {
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg);
            }
          });
        }

        this.closeLinkError();
      },

      updateMessaging: function (actionName, name) {
        var messagePart1 = '<div class="alert alert-success alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
        var messagePart2 = "";

        switch (actionName) {
          case "submitImageData":
            messagePart2 = "Image Details have been updated.</div>";
            $("#importantImageMessages").html(messagePart1 + messagePart2);
            break;
          default:
        }
      },

      uploadFiles: function (e) {
        var model = this;
        if (this.$.manageFiles.isDirty) {
          this.processing = true;
          this.$.manageFiles.uploadImages().then(function () {
            model.$.manageFiles.isDirty = true;
            model.closeFilesDialog(e);
          });
        }
        else {
          this.closeFilesDialog(e);
        }
      },

      openFilesDialog: function (e) {
        $("#filesDialog").css('overflow-y', 'auto').modal("show"); //CSS needed to fix modal not scrolling when a second modal is opened
        this.$.manageFiles.open();
      },

      closeFilesDialog: function (e) {
        $("#filesDialog").modal("hide");
        this.$.manageFiles.cleanUp();
        if (this.$.manageFiles.isDirty) {
          this.processing = true;
          this.getImages();
        }
      },
    });
  </script>
</dom-module>﻿<dom-module id="donation-manage-files">
  <template>
    <style>
      :host {
        box-sizing: border-box;
      }

        :host .closeDialog {
          color: white;
          opacity: initial
        }
    </style>
    <div>
      <div class="alert" hidden="" id="alertArea" role="alert"></div>
      <canvas class="hidden" id="workingCanvas"></canvas>
      <div class="row">
        <div class="col-md-12">
          <h4>Choose file(s) to upload</h4>
          <div class="input-group">
            <input accept=".jpg,.gif,.png" class="form-control" id="selectedFiles" multiple="multiple" name="selectedFiles" on-change="loadImages" type="file">
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <h4>File List</h4>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <table class="table table-condensed" id="tblPicsToLoad">
            <thead>
              <tr>
                <th>File Name</th>
                <th>Size</th>
                <th>Date</th>
              </tr>
            </thead>
            <tbody>
              <template is="dom-repeat" items="{{picData}}">
                <template is="dom-if" if="{{item.isDup}}">
                  <tr class="alert alert-danger">
                    <td>
                      <span class="fa fa-warning"></span>
                      {{item.fileName}}&nbsp;
                      <span>Overwrite existing?</span>
                      &nbsp;&nbsp;
                      <button class="btn btn-link" data-filename="{{item.fileName}}" on-tap="overwrite" title="Overwrite existing file" type="button">Yes</button>
                      &nbsp;
                      <button class="btn btn-link" data-filename="{{item.fileName}}" on-tap="doNotOverwrite" title="Do not overwrite existing file" type="button">No</button>
                    </td>
                    <td>{{item.fileSize}} KB</td>
                    <td>{{item.fileDate}}</td>
                    <td></td>
                  </tr>
                </template>
                <template is="dom-if" if="{{!item.isDup}}">
                  <tr>
                    <td><a href="{{item.src}}" target="_blank">{{item.fileName}}</a></td>
                    <td>{{item.fileSize}} KB</td>
                    <td>{{item.fileDate}}</td>
                    <td><button class="btn btn-link" data-filename="{{item.fileName}}" on-tap="showDeleteConfirmation" style="padding:0" title="Delete file" type="button">Delete</button></td>
                    <td><button class="btn btn-link" data-filename="{{item.fileName}}" on-tap="editImage" style="padding:0" title="Edit image" type="button">Edit</button></td>
                  </tr>
                </template>
              </template>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div hidden="{{hideEdit}}">
      <div class="row">
        <div class="col-md-12">
          <h4>Edit Image</h4>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <button class="btn btn-sm blm-btn-link" on-tap="addMove" type="button">
            <span class="fa fa-arrows"></span> Move
          </button>
          <button class="btn btn-sm blm-btn-link" on-tap="addCrop" type="button">
            <span class="fa fa-crop"></span> Crop
          </button>
          <button class="btn btn-sm blm-btn-link" on-tap="zoom" type="button">
            <span class="fa fa-search-plus"></span> Zoom in
          </button>
          <button class="btn btn-sm blm-btn-link" on-tap="zoomOut" type="button">
            <span class="fa fa-search-minus"></span> Zoom Out
          </button>
          <button class="btn btn-sm blm-btn-link" on-tap="reset">
            <span class="fa fa-refresh"></span> Reset
          </button>
          <button class="btn btn-sm blm-btn-link" on-tap="useCroppedImage" type="button">
            <span class="fa fa-save"></span> Use Cropped Image
          </button>
          <button class="btn btn-sm blm-btn-link" on-tap="closePicWindow" type="button">
            <span class="fa fa-close"></span> Cancel
          </button>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12" style="border:solid 1px silver;margin:15px;width:95%">
          <canvas id="canvas" height="300" style="max-width:100%;" width="400"></canvas>
        </div>
      </div>
    </div>
    <div class="modal" data-backdrop="static" id="questionModal">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button aria-hidden="true" class="close closeDialog" on-tap="closeQuestionModal" type="button"><span aria-hidden="true">×</span></button>
            <h4 class="modal-title">{{questionModalTitle}}</h4>
          </div><div class="container"></div>
          <div class="modal-body">
            <div class="alert alert-danger" role="alert">
              <strong>
                <span class="fa fa-warning"></span> &nbsp; {{questionModalMessage}}
              </strong>
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-sm blm-btn-secondary" on-tap="closeQuestionModal" type="button">No</button>
            <button class="btn btn-sm blm-btn-primary" on-tap="action" type="button">Yes</button>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script>
    Polymer({
      is: 'donation-manage-files',
      properties: {
        hideEdit: {
          type: Boolean,
          value: true
        },
        isDirty: {
          type: Boolean,
          value: false
        },
        isDelete: {
          type: Boolean,
          value: false
        },
        dataPageid: {
          type: Number,
          value: 0
        },
        picData: {
          type: Array,
          value: function () { return new Array(); }
        },
        selectedFile: {
          type: String
        },
        selectedImage: {
          type: Object
        },
      },

      addCrop: function () {
        var canvas = document.getElementById("canvas");
        canvas.cropper.setDragMode('crop');
      },

      addMove: function () {
        var canvas = document.getElementById("canvas");
        canvas.cropper.setDragMode('move');
      },

      zoom: function () {
        var canvas = document.getElementById("canvas");
        canvas.cropper.zoom(0.1);
      },

      zoomOut: function () {
        var canvas = document.getElementById("canvas");
        canvas.cropper.zoom(-0.1);
      },

      reset: function () {
        var canvas = document.getElementById("canvas");
        canvas.cropper.reset();
      },

      cleanUp: function () {
        //Used from another file
        $("#selectedFiles").val("");
        var numberOfImages = this.picData.length

        for (var i = 0; i <= numberOfImages; i++) {
          this.pop("picData");
        }
      },

      closeQuestionModal: function () {
        this.isDelete = false;
        this.questionModalTitle = "";
        this.questionModalMessage = "";
        $("#questionModal").modal("hide");
      },

      closePicWindow: function () {
        this.hideEdit = true;
      },

      deleteFile: function () {
        var id;
        var model = this;
        for (var i = 0; i < this.picData.length; i++) {
          if (this.picData[i].fileName === this.selectedImage.dataFilename) {
            id = this.picData[i].id;
            this.splice("picData", i, 1);
            break;
          }
        }

        if (id) {
          $.ajax({
            async: false,
            type: "DELETE",
            url: `/ctxapp/donation/media/${id}`,

            success: function (data) {
              model.closeQuestionModal();
            },
          }).fail(function (response) {
            model.closeQuestionModal();
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg);
            }
          });
        }
        else {
          model.closeQuestionModal();
        }

        this.selectedImage = null;
        this.isDirty = true;
      },

      action: function () {
        if (this.isDelete) {
          this.deleteFile();
        }
      },

      showDeleteConfirmation: function (e) {
        this.questionModalTitle = "File Delete";
        $("#questionModal").modal("show");
        this.selectedImage = e.currentTarget;
        this.questionModalMessage = "Are you sure you wish to delete " + this.selectedImage.dataFilename + " ?";
        this.isDelete = true;
      },

      doNotOverwrite: function (e) {
        for (var i = 0; i < this.picData.length; i++) {
          if (this.picData[i].fileName === e.currentTarget.dataFilename) {
            this.pop("picData");
            break;
          }
        }
      },

      overwrite: function (e) {
        var originalID;
        var image;
        var originalIndex;

        for (var i = 0; i < this.picData.length; i++) {
          if (this.picData[i].fileName === e.currentTarget.dataFilename && !this.picData[i].isDup) {
            originalID = this.picData[i].id;
            originalIndex = i;
            this.splice("picData", i, 1);
            break;
          }
        }

        for (var i = 0; i < this.picData.length; i++) {
          if (this.picData[i].fileName === e.currentTarget.dataFilename && this.picData[i].isDup) {
            this.picData[i].id = originalID;
            this.picData[i].isDup = false;
            image = this.picData[i];
            this.splice("picData", i, 1);
            break;
          }
        }

        var copiedData = this.picData.slice();
        copiedData.splice(originalIndex, 0, image);
        this.picData = [];
        this.picData = copiedData;
      },

      editImage: function (e) {
        this.selectedFile = e.currentTarget.dataFilename;

        for (var i = 0; i < this.picData.length; i++) {
          if (e.currentTarget.dataFilename === this.picData[i].fileName) {
            this.selectedImage = this.picData[i];
            break;
          }
        }

        if (this.selectedImage != undefined || this.selectedImage != null) {
          if (this.selectedImage.fromServer) {
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext('2d');

            var img = new Image();
            img.src = this.selectedImage.src;

            img.onload = function () {
              var canvas = document.getElementById("canvas");

              if (canvas != null && canvas.cropper != null) {
                canvas.cropper.destroy();
              }

              var cropper = new Cropper(canvas, {
                autoCrop: false,
                background: false,
                dragMode: 'none',
                zoomOnWheel: false
              });

              cropper.replace(img.src);
            }
          }
          else {
            var files = document.getElementById("selectedFiles").files;

            for (var j = 0; j < files.length; j++) {
              if (this.selectedImage.fileName === files[j].name) {
                if (FileReader) {
                  var fr = new FileReader();

                  fr.onload = function () {
                    var canvas = document.getElementById("canvas");

                    if (canvas != null && canvas.cropper != null) {
                      canvas.cropper.destroy();
                    }

                    var cropper = new Cropper(canvas, {
                      autoCrop: false,
                      background: false,
                      dragMode: 'none',
                      zoomOnWheel: false
                    });

                    cropper.replace(fr.result);
                  }

                  fr.readAsDataURL(files[j]);
                }

                break;
              }
            }
          }
        }

        this.hideEdit = false;
      },

      open: function () {
        var model = this;
        this.isDirty = false;
        this.isDelete = false;
        this.questionModalTitle = "";
        this.questionModalMessage = "";
        this.selectedImage = null;
        this.hideEdit = true;


        var canvas = document.getElementById("canvas");

        if ((canvas != undefined || canvas != null) && (canvas.cropper != undefined || canvas.cropper != null)) canvas.cropper.destroy();

        for (var i = 0; i < this.picData.length; i++) {
          this.pop('picData');
        }

        $("#selectedFiles").val("");

        $(this.$.alertArea).prop("hidden", "hidden");
        this.def = $.Deferred();
        $(this.$.dialog).modal("show");

        //Load upload grid
        $.get('/ctxapp/donation/media/bypage/' + model.dataPageid.toString())
          .done(function (response) {
            var result = [];
            if (response != null) {
              result = response.data;
            }
            for (var i = 0; i < result.length; i++) {
              var date = new Date(result[i].FileDate);
              var year = date.getFullYear();
              var month = date.getMonth() + 1;
              var day = date.getDate();
              var GridFileDate = month + "/" + day + "/" + year;
              model.push('picData', {
                id: result[i].Id,
                pageId: result[i].PageId,
                isDup: false,
                fileName: result[i].OriginalFileName,
                src: result[i].FilePath,
                fileDate: GridFileDate,
                fileSize: result[i].FileSize,
                height: result[i].Height,
                width: result[i].Width,
                fromServer: true,
                isDirty: false
              });
            }
          })
          .fail(function (response) {
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg);
            }
          });
      },

      isDuplicateFile: function (fileNameToCheck) {
        for (var i = 0; i < this.picData.length; i++) {
          if (this.picData[i].fileName === fileNameToCheck) {
            return true;
          }
        }

        return false;
      },

      loadImages: function (e) {
        var model = this;
        var files = e.target.files;

        if (files) {
          for (var i = 0; i < files.length; i++) {
            this.isDirty = true;
            (function (file) {
              var fileName = file.name;
              var isDup = model.isDuplicateFile(fileName);
              var fileDate = file.lastModifiedDate.toLocaleDateString();
              var fileSize = Number((file.size / 1024).toFixed(0));

              //Chrome browser crashes with oh snap error if file size greater than 85 MB
              if (fileSize > 70000) {
                $('#alertArea').removeAttr("hidden").text('The file ' + fileName + ' exceeds the maximum allowed size of 70 Megabytes.  It will be skipped').addClass("alert-warning");
                return;
              }

              var reader = new FileReader();
              reader.onload = function (e) {
                var img = new Image();
                img.src = e.target.result;
                img.id = file.name;
                img.onload = function () {
                  model.push('picData', {
                    fileName: fileName,
                    isDup: isDup,
                    isDirty: true,
                    src: this.src,
                    fileDate: fileDate,
                    fileSize: fileSize,
                    height: img.height,
                    width: img.width,
                  });
                }
              }
              reader.readAsDataURL(file);
            })(files[i]);
          }
        }
      },

      uploadImages: function () {
        //Used from another file to upload images
        var def = $.Deferred();

        var finisharr = [];
        for (var i = 0; i < this.picData.length; i++) {
          if (this.picData[i].isDirty) {
            finisharr.push(this.uploadImage(this.picData[i], i, this.picData.length));
          }
        }

        $.when.apply($, finisharr).then(function () {
          def.resolve();
        });

        return def.promise();
      },

      uploadImage: function (fileToLoad, index, count) {
        //Used from the above method
        var model = this;
        var def = $.Deferred();
        var canvas = document.getElementById("workingCanvas");
        if (canvas && canvas.getContext) {
          var ctx = canvas.getContext('2d');

          var img = new Image();

          if (fileToLoad.src) {
            img.src = fileToLoad.src;
          }
          else if (fileToLoad.url) {
            img.src = fileToLoad.url;
          }

          img.onload = function () {
            canvas.height = img.height;
            canvas.width = img.width;
            ctx.drawImage(img, 0, 0, img.width, img.height);

            var imageData, url;

            if (fileToLoad.url) {
              url = fileToLoad.url.replace('data:image/png;base64,', '');
            }
            else {
              url = canvas.toDataURL();
              url = url.replace('data:image/png;base64,', '');
            }


            imageData = {
              "Id": fileToLoad.id, "PageId": model.dataPageid, "height": img.height, "width": img.width, "fileDate": fileToLoad.fileDate, "fileName": fileToLoad.fileName,
              "Base64String": url, "displayOrder": index, index: index, count: count
            };

            $.ajax({
              url: `/ctxapp/donation/media/${model.dataPageid}`,
              type: 'POST',
              contentType: 'application/json',
              data: JSON.stringify(imageData),
              success: function (result) {
                console.log(result);
                def.resolve();
              }
            }).fail(function (response) {
              var errMsg = getXhrErrorMessage(response);
              if (errMsg) {
                alert(errMsg);
              }
            });
          }
        }

        return def.promise();
      },

      useCroppedImage: function (e) {
        var model = this;
        var croppedImage = $("#canvas")[0].cropper.getCroppedCanvas();
        var croppedUrl = croppedImage.toDataURL();
        var croppedFileName = 'C_' + this.selectedFile;
        var todaysDate = new Date();

        var imageData = {
          "id": this.selectedImage.id,
          "isDup": false,
          "fileName": croppedFileName,
          "fileDate": (todaysDate.getMonth() + 1) + "/" + todaysDate.getDate().toString() + "/" + todaysDate.getFullYear().toString(),
          "height": croppedImage.height,
          "url": croppedUrl,
          "width": croppedImage.width,
          "isDirty": true
        };

        for (var i = 0; i < model.picData.length; i++) {
          if (model.picData[i].fileName === model.selectedFile) {
            model.splice("picData", i, 1);
          }
        }

        model.push("picData", imageData);
        model.isDirty = true;
        model.closePicWindow();
      },
    });
  </script>
</dom-module>
﻿<dom-module id="donation-donate-content">
  <template>
    <style>
      :host {
        display: block;
      }

        :host .closeDialog {
          color: white;
          opacity: initial
        }

        :host .linkHeader {
          margin-bottom: 0
        }

        :host .required {
          color: red
        }

        .extraSpace {
          margin-top: 10px;
          margin-bottom: 10px;
        }
    </style>
    <donation-image-display data-pageid="4"></donation-image-display>
    <h4>
      Donate Form Main Content<span class="required">*</span>
    </h4>
    <small>
      <span class="required">*</span>&nbsp;Required Field
    </small>
    <br>
    <br>
    <div class="row">
      <div class="col-md-12">
        <textarea id="donateContentEditor" name="donateContentEditor"></textarea>
      </div>
    </div>
    <br>
    <div class="row">
      <div class="col-md-12">
        <button class="btn blm-btn-primary" on-tap="submitDonatePage" title="Submit about us text" type="button">Submit</button>
      </div>
    </div>
    <br>
    <div class="row">
      <div class="col-md-12" id="donatePageMessages"></div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <h4 class="linkHeader">Occasions</h4>
        <div class="row extraSpace">
          <div class="col-lg-12">
            <bulk-input id="occasionInput" on-row-added="_rowOccasionAdded" on-row-update="_rowOccasionAdded" on-row-deleted="_rowOccasionDeleted" data-id="{{item.Id}}">
              <input-column title="Name<span style='color: red;'> * &nbsp;</span>" field="Name" type="text"></input-column>
            </bulk-input>
            <validator-item item-name="Name"></validator-item>
          </div>
        </div>
        <button class="btn btn-sm blm-btn-link" on-tap="_addNewOccasion" type="button">New Occation</button>
        <div class="row">
          <div class="col-md-12" id="importantOccasionMessages"></div>
        </div>
      </div>
      <div class="col-md-6">
        <h4 class="linkHeader">Gift Amounts</h4>
        <div class="row extraSpace">
          <div class="col-lg-12">
            <bulk-input id="giftAmountInput" on-row-added="_rowGiftAmountAdded" on-row-update="_rowGiftAmountAdded" on-row-deleted="_rowGiftAmountDeleted" data-id="{{item.Id}}">
              <input-column title="Amount<span style='color: red;'> * &nbsp;</span>" field="Amount" type="number" width="150"></input-column>
            </bulk-input>
          </div>
        </div>
        <button class="btn btn-sm blm-btn-link" on-tap="_addNewGiftAmount" type="button">New Gift Amount</button>
        <div class="row">
          <div class="col-md-12" id="importantGiftAmountMessages"></div>
        </div>
      </div>
    </div>
    <div class="modal fade" id="donateWarningModal" role="dialog" tabindex="-1">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button aria-hidden="true" class="close closeDialog" on-tap="closeWarningModal" type="button"><span aria-hidden="true">×</span></button>
            <h4 class="modal-title">{{warningModalTitle}}</h4>
          </div>
          <div class="modal-body">
            <div class="alert alert-danger" role="alert">
              <strong>
                <span class="fa fa-warning"></span> &nbsp; {{warningModalMessage}}
              </strong>
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-sm blm-btn-primary" on-tap="action" type="button">Yes</button>
            <button class="btn btn-sm blm-btn-secondary" on-tap="closeWarningModal" type="button">No</button>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script>
    Polymer({
      is: "donation-donate-content",
      properties: {
        donatePage: {
          type: Object
        },
        warningModalMessage: {
          type: String,
          value: ""
        },
        warningModalTitle: {
          type: String,
          value: ""
        },
      },

      //Gift Amount Edit Control
      _addNewGiftAmount: function (e) {
        if (e) {
          e.preventDefault();
        }
        var model = this;

        model.$.giftAmountInput.addRow({
          Id: 0,
          Amount: 0,
        });
      },

      _rowGiftAmountAdded: function (e) {
        var model = this;
        var item = e.detail;
        var detail = e.detail;
        var newRow = e.detail.row;

        if (item.index != undefined && item.index > -1) {
          return;
        }

        if (detail.old) {
          var id = newRow.Id;
          var array = [];
          array.push(newRow);
          if (id === 0) {
            $.ajax({
              url: '/ctxapp/donation/giftamount',
              type: 'POST',
              contentType: 'application/json',
              data: JSON.stringify(array),
              success: function (result) {
                model.updateMessaging("submitGiftAmountData");
                $.get(`/ctxapp/donation/giftamount`)
                  .done(function (response) {
                    if (response === undefined || response === null) return;
                    model.$.giftAmountInput.setData(response.data);
                  }).fail(function (response) {
                    var errMsg = getXhrErrorMessage(response);
                    if (errMsg) {
                      alert(errMsg);
                    }
                  });
              }
            }).fail(function (response) {
              var errMsg = getXhrErrorMessage(response);
              if (errMsg) {
                alert(errMsg);
              }
            });
          } else {
            $.ajax({
              url: '/ctxapp/donation/giftamount',
              type: 'PUT',
              contentType: 'application/json',
              data: JSON.stringify(array),
              success: function (result) {
                console.log(result);
                model.updateMessaging("submitGiftAmountData");
                $.get(`/ctxapp/donation/giftamount`)
                  .done(function (response) {
                    if (response === undefined || response === null) return;
                    model.$.giftAmountInput.setData(response.data);
                  }).fail(function (response) {
                    var errMsg = getXhrErrorMessage(response);
                    if (errMsg) {
                      alert(errMsg);
                    }
                  });
              }
            }).fail(function (response) {
              var errMsg = getXhrErrorMessage(response);
              if (errMsg) {
                alert(errMsg);
              }
            });
          }
        } else {
          newRow = detail;
        }
      },

      _rowGiftAmountDeleted: function (e) {
        var model = this;
        var itemToDelete = e.detail;
        if (itemToDelete.Id !== 0) {
          $.ajax({
            url: `/ctxapp/donation/giftamount/${itemToDelete.Id}`,
            type: 'DELETE',
            success: function (result) {
              console.log(result);
              model.updateMessaging("deleteGiftAmountData");
              $.get(`/ctxapp/donation/giftamount`)
                .done(function (response) {
                  if (response === undefined || response === null) return;
                  model.$.giftAmountInput.setData(response.data);
                }).fail(function (response) {
                  var errMsg = getXhrErrorMessage(response);
                  if (errMsg) {
                    alert(errMsg);
                  }
                });
            }
          }).fail(function (response) {
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg);
            }
          });
        } else {
          $.get(`/ctxapp/donation/giftamount`)
            .done(function (response) {
              if (response === undefined || response === null) return;
              model.$.giftAmountInput.setData(response.data);
            }).fail(function (response) {
              var errMsg = getXhrErrorMessage(response);
              if (errMsg) {
                alert(errMsg);
              }
            });
        }
      },
      //End Gift Amount Edit Control

      //Occasion Edit Control
      _addNewOccasion: function (e) {
        if (e) {
          e.preventDefault();
        }
        var model = this;

        model.$.occasionInput.addRow({
          Id: 0,
          Name: "",
        });
      },

      _rowOccasionAdded: function (e) {
        var model = this;
        var item = e.detail;
        var detail = e.detail;
        var newRow = e.detail.row;

        if (item.index != undefined && item.index > -1) {
          return;
        }

        if (detail.old) {
          var id = newRow.Id;
          var array = [];
          array.push(newRow);
          if (id === 0) {
            $.ajax({
              url: '/ctxapp/donation/occasions',
              type: 'POST',
              contentType: 'application/json',
              data: JSON.stringify(array),
              success: function (result) {
                model.updateMessaging("submitOccasionData");
                $.get(`/ctxapp/donation/occasions`)
                  .done(function (response) {
                    if (response === undefined || response === null) return;
                    model.$.occasionInput.setData(response.data);
                  }).fail(function (response) {
                    var errMsg = getXhrErrorMessage(response);
                    if (errMsg) {
                      alert(errMsg);
                    }
                  });
              }
            }).fail(function (response) {
              var errMsg = getXhrErrorMessage(response);
              if (errMsg) {
                alert(errMsg);
              }
            });
          } else {
            $.ajax({
              url: '/ctxapp/donation/occasions',
              type: 'PUT',
              contentType: 'application/json',
              data: JSON.stringify(array),
              success: function (result) {
                model.updateMessaging("submitOccasionData");
                $.get(`/ctxapp/donation/occasions`)
                  .done(function (response) {
                    if (response === undefined || response === null) return;
                    model.$.occasionInput.setData(response.data);
                  }).fail(function (response) {
                    var errMsg = getXhrErrorMessage(response);
                    if (errMsg) {
                      alert(errMsg);
                    }
                  });
              }
            }).fail(function (response) {
              var errMsg = getXhrErrorMessage(response);
              if (errMsg) {
                alert(errMsg);
              }
            });
          }
        } else {
          newRow = detail;
        }
      },

      _rowOccasionDeleted: function (e) {
        var model = this;
        var itemToDelete = e.detail;
        if (itemToDelete.Id !== 0) {
          $.ajax({
            url: `/ctxapp/donation/occasions/${itemToDelete.Id}`,
            type: 'DELETE',
            success: function (result) {
              console.log(result);
              model.updateMessaging("deleteOccasionData");
              $.get(`/ctxapp/donation/occasions`)
                .done(function (response) {
                  if (response === undefined || response === null) return;
                  model.$.occasionInput.setData(response.data);
                }).fail(function (response) {
                  var errMsg = getXhrErrorMessage(response);
                  if (errMsg) {
                    alert(errMsg);
                  }
                });
            }
          }).fail(function (response) {
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg);
            }
          });
        } else {
          $.get(`/ctxapp/donation/occasions`)
            .done(function (response) {
              if (response === undefined || response === null) return;
              model.$.occasionInput.setData(response.data);
            }).fail(function (response) {
              var errMsg = getXhrErrorMessage(response);
              if (errMsg) {
                alert(errMsg);
              }
            });
        }
      },
      //End Occasion Edit Control

      attached: function () {
        CKEDITOR.replace('donateContentEditor');
        var editor = CKEDITOR.instances['donateContentEditor'];
        var model = this;
        editor.on('instanceReady', function () {
          model.getData();
        });
      },

      closeWarningModal: function () {
        this.warningModalMessage = "";
        $("#donateWarningModal").modal("hide");
      },

      getData: function () {
        console.log("GetData");
        var model = this;
        $.get(`/ctxapp/donation/page/4`)
          .done(function (response) {
            if (response === undefined || response === null) return;
            model.donatePage = response.data;
            model.hideButtons = false;
            CKEDITOR.instances.donateContentEditor.setData(model.donatePage.MessageHTML);
          }).fail(function (response) {
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg);
            }
          });
        $.get(`/ctxapp/donation/giftamount`)
          .done(function (response) {
            if (response === undefined || response === null) return;
            model.$.giftAmountInput.setData(response.data);
          }).fail(function (response) {
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg);
            }
          });

        $.get(`/ctxapp/donation/occasions`)
          .done(function (response) {
            if (response === undefined || response === null) return;
            model.$.occasionInput.setData(response.data);
          }).fail(function (response) {
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg);
            }
          });

      },

      submit: function (sectionName, page) {
        var model = this;
        $.ajax({
          url: `/ctxapp/donation/page/${page.Id}`,
          type: 'PUT',
          contentType: 'application/json',
          data: JSON.stringify(page),
          success: function (result) {
            console.log(result);
            model.updateMessaging(sectionName);
          }
        }).fail(function (response) {
          var errMsg = getXhrErrorMessage(response);
          if (errMsg) {
            alert(errMsg);
          }
        });
      },

      submitDonatePage: function () {
        var page = {
          Id: 4,
          MessageHTML: CKEDITOR.instances.donateContentEditor.getData()
        };

        this.submit("submitDonatePage", page);
      },

      updateMessaging: function (actionName, name) {
        var messagePart1 = '<div class="alert alert-success alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
        var messagePart2 = "";

        switch (actionName) {
          case "submitGiftAmountData":
            messagePart2 = "Gift Amounts have been updated.</div>";
            $("#importantGiftAmountMessages").html(messagePart1 + messagePart2);
            break;
          case "deleteGiftAmountData":
            messagePart2 = "The Selected Gift Amount has been deleted.</div>";
            $("#importantGiftAmountMessages").html(messagePart1 + messagePart2);
            break;
          case "submitDonatePage":
            messagePart2 = "Donate Page has been updated.</div>";
            $("#donatePageMessages").html(messagePart1 + messagePart2);
            break;
          case "submitOccasionData":
            messagePart2 = "Occasions have been saved.</div>";
            $("#importantOccasionMessages").html(messagePart1 + messagePart2);
            break;
          case "deleteOccasionData":
            messagePart2 = "Selected occasion has been deleted.</div>";
            $("#importantOccasionMessages").html(messagePart1 + messagePart2);
            break;
          default:
        }
      },
    });
  </script>
</dom-module>﻿<dom-module id="donation-home-content">
  <template>
    <style>
      :host {
        display: block;
      }

        :host .required {
          color: red
        }
    </style>
    <donation-image-display data-pageid="1"></donation-image-display>
    <h4>
      Home Page Main Content<span class="required">*</span>
    </h4>
    <small>
      <span class="required">*</span>&nbsp;Required Field
    </small>
    <br>
    <br>
    <div class="row">
      <div class="col-md-12">
        <textarea id="homeContentEditor" name="homeContentEditor"></textarea>
      </div>
    </div>
    <br>
    <div class="row">
      <div class="col-md-12">
        <button class="btn blm-btn-primary" on-tap="submitHomePage" title="Submit about us text" type="button">Submit</button>
      </div>
    </div>
    <br>
    <div class="row">
      <div class="col-md-12" id="homePageMessages"></div>
    </div>
  </template>
  <script>
    Polymer({
      is: "donation-home-content",
      properties: {
        homePage: {
          type: Object
        },
      },

      attached: function () {
        CKEDITOR.replace('homeContentEditor');

        var editor = CKEDITOR.instances['homeContentEditor'];
        var model = this;
        editor.on('instanceReady', function () {
          model.getData();
        });
      },

      getData: function () {
        var model = this;
        $.get(`/ctxapp/donation/page/1`)
          .done(function (response) {
            if (response === undefined || response === null) return;
            model.homePage = response.data;
            model.getHomeContent();

          }).fail(function (response) {
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg);
            }
          });
      },

      getHomeContent: function () {
        var model = this;
        CKEDITOR.instances.homeContentEditor.setData(model.homePage.MessageHTML);
      },

      submit: function (sectionName, membershipPage) {
        var model = this;
        $.ajax({
          url: `/ctxapp/donation/page/${membershipPage.Id}`,
          type: 'PUT',
          contentType: 'application/json',
          data: JSON.stringify(membershipPage),
          success: function (result) {
            console.log(result);
            model.updateMessaging(sectionName);
          }

        }).fail(function (response) {
          var errMsg = getXhrErrorMessage(response);
          if (errMsg) {
            alert(errMsg);
          }
        });
      },

      submitHomePage: function () {
        var page = {
          Id: 1,
          MessageHTML: CKEDITOR.instances.homeContentEditor.getData()
        };

        this.submit("submitHomePage", page);
      },

      updateMessaging: function (actionName, name) {
        var messagePart1 = '<div class="alert alert-success alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
        var messagePart2 = "";

        switch (actionName) {

          case "submitHomePage":
            messagePart2 = "Home Page has been updated.</div>";
            $("#homePageMessages").html(messagePart1 + messagePart2);
            break;
          default:
        }
      },
    });
  </script>
</dom-module>﻿<dom-module id="donation-hma-content">
  <template>
    <style>
      :host {
        display: block;
      }

        :host .closeDialog {
          color: white;
          opacity: initial
        }

        :host .required {
          color: red
        }
    </style>
    <donation-image-display data-pageid="3"></donation-image-display>
    <h4>
      HMA Gallery Main Content<span class="required">*</span>
    </h4>
    <small>
      <span class="required">*</span>&nbsp;Required Field
    </small>
    <br>
    <br>
    <div class="row">
      <div class="col-md-12">
        <textarea id="galleryContentEditor" name="galleryContentEditor"></textarea>
      </div>
    </div>
    <br>
    <div class="row">
      <div class="col-md-12">
        <button class="btn blm-btn-primary" on-tap="submitGalleryPage" title="Submit about us text" type="button">Submit</button>
      </div>
    </div>
    <br>
    <div class="row">
      <div class="col-md-12" id="galleryPageMessages"></div>
    </div>
    <br>
    <div class="modal fade" id="warningModal" role="dialog" tabindex="-1">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button aria-hidden="true" class="close closeDialog" on-tap="closeWarningModal" type="button"><span aria-hidden="true">×</span></button>
            <h4 class="modal-title">{{warningModalTitle}}</h4>
          </div>
          <div class="modal-body">
            <div class="alert alert-danger" role="alert">
              <strong>
                <span class="fa fa-warning"></span> &nbsp; {{warningModalMessage}}
              </strong>
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-sm blm-btn-primary" on-tap="action" type="button">Yes</button>
            <button class="btn btn-sm blm-btn-secondary" on-tap="closeWarningModal" type="button">No</button>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script>
    Polymer({
      is: "donation-hma-content",
      properties: {
        actionState: {
          type: String,
          value: ""
        },
        warningModalMessage: {
          type: String,
          value: ""
        },
        warningModalTitle: {
          type: String,
          value: ""
        },
        hmaPage: {
          type: Object
        },
      },

      action: function () {
        switch (this.actionState) {
          case "clearAlltierSubTitles":
            this.clearAlltierSubTitles();
            break;
          default:
        }

        $("#warningModal").modal("hide");
        this.actionState = "";
      },

      attached: function () {
        CKEDITOR.replace('galleryContentEditor');
        var model = this;
        var editor = CKEDITOR.instances['galleryContentEditor'];
        editor.on('instanceReady', function () {
          model.getData();
        });
      },

      closeWarningModal: function () {
        this.warningModalMessage = "";
        $("#warningModal").modal("hide");
      },

      getData: function () {
        console.log("GetData");
        var model = this;
        $.get(`/ctxapp/donation/page/3`)
          .done(function (response) {
            if (response === undefined || response === null) return;
            model.hmaPage = response.data;
            CKEDITOR.instances.galleryContentEditor.setData(model.hmaPage.MessageHTML);
            model.processing = false;
            model.hideButtons = false;
          }).fail(function (response) {
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg);
            }
          });
      },

      submit: function (sectionName, membershipPage) {
        var model = this;
        $.ajax({
          url: `/ctxapp/donation/page/${membershipPage.Id}`,
          type: 'PUT',
          contentType: 'application/json',
          data: JSON.stringify(membershipPage),
          success: function (result) {
            console.log(result);
            model.updateMessaging(sectionName);
          }
        }).fail(function (response) {
          var errMsg = getXhrErrorMessage(response);
          if (errMsg) {
            alert(errMsg);
          }
        });
      },

      submitGalleryPage: function () {
        var page = {
          Id: 3,
          MessageHTML: CKEDITOR.instances.galleryContentEditor.getData()
        };

        this.hideGalleryPageError = true;
        this.submit("submitGalleryPage", page);
      },

      updateMessaging: function (actionName, name) {
        var messagePart1 = '<div class="alert alert-success alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
        var messagePart2 = "";

        switch (actionName) {

          case "submitGalleryPage":
            messagePart2 = "HMA Page has been updated.</div>";
            $("#galleryPageMessages").html(messagePart1 + messagePart2);
            break;
          default:
        }
      }
    });
  </script>
</dom-module>﻿<dom-module id="animal-saved-search">
  <template>
    <style>
      :host() {
        display: block;
      }

      :host .closeDialog {
        color: white;
        opacity: initial
      }
    </style>
    <h4>Saved Animal Searches</h4>
    <div class="row">
      <div class="col-md-12">
        <table class="table table-condensed" id="tblPicsToLoad">
          <thead>
            <tr>
              <th>Title</th>
              <th>Frequency</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <template is="dom-repeat" items="{{searches}}">
              <tr>
                <td>{{item.Title}}</td>
                <td>{{item.Frequency}}</td>
                <td>
                  <button class="btn btn-link" data-filename="{{item.Title}}" on-tap="showDeleteWarning" title="Delete saved search" type="button">Delete</button>
                  <button class="btn btn-link" data-filename="{{item.AnimalSavedQueryId}}" on-tap="editSavedSearch" title="Edit saved search" type="button">Edit</button>
                  <button class="btn btn-link" data-filename="{{item.AnimalSavedQueryId}}" on-tap="viewSavedSearch" title="View saved search" type="button">View</button>
                </td>
              </tr>
            </template>
          </tbody>
        </table>
      </div>
      <div class="modal" id="warningModal">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button aria-hidden="true" class="close closeDialog" on-tap="closeWarningModal" type="button"><span aria-hidden="true">×</span></button>
              <h4 class="modal-title">Delete Search</h4>
            </div>
            <div class="modal-body">
              <div class="alert alert-danger" role="alert">
                <strong>
                  <span class="fa fa-warning"></span>
                  Are you sure you wish to delete {{selectedSearch.dataFilename}} ?
                </strong>
              </div>
            </div>
            <div class="modal-footer">
              <button class="btn btn-sm blm-btn-primary" on-tap="deleteSavedSearch" type="button">Yes</button>
              <button class="btn btn-sm blm-btn-secondary" on-tap="closeWarningModal" type="button">No</button>
            </div>
          </div>
        </div>
      </div>
      <div class="modal" id="editAnimalSearchModal">
        <div class="modal-dialog" role="document">
          <div class="modal-content" style="background-color:#4c4941">
            <div class="modal-header">
              <button aria-hidden="true" class="close closeDialog" on-tap="closeAnimalSearchModal" type="button"><span aria-hidden="true">×</span></button>
              <h4 class="modal-title">Edit Animal Search {{title}}</h4>
            </div>
            <div class="modal-body">
              <div hidden$="{{hideLoading}}" style="margin-top:50px;text-align:center;width:100%;">
                <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i><br>
                <h4 style="color:white">Loading...</h4>
              </div>
              <animal-filter is-authenticated="true" hidden$="{{!hideLoading}}" id="animalFilter"></animal-filter>
            </div>
            <div class="modal-footer">
              <button class="btn btn-sm blm-btn-primary" on-tap="closeAnimalSearchModal" title="Close Edit Animal Search window" type="button">Close</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script>
    'use strict';
    Polymer({
      is: 'animal-saved-search',
      properties: {
        hideLoading: {
          type: Boolean,
          value: true
        },
        hideSearchParams: {
          type: Boolean,
          value: true
        },
        searches: {
          type: Array,
          value: function () { return new Array(); }
        },
        selectedSearch: {
          type: Object
        },
        title: {
          type: String,
          value: ''
        },
      },

      attached: function () {
        //Guard
        this.hideSearchParams = true;
        this.getSavedAnimalSearches();
        this.title = '';
        var model = this;
        $(document).on("closeAnimalSearchSave", function (event) {
          model.getSavedAnimalSearches();
          $("#editAnimalSearchModal").modal("hide");
        });
      },

      closeAnimalSearchModal: function () {
        $("#topActionButtons").removeClass("hidden");
        $("#btnSearch").removeClass("hidden");
        $("#editAnimalSearchModal").modal("hide");

        if (this.$.animalFilter.isSavedSearchDirty) {
          this.getSavedAnimalSearches();
        }
      },

      closeWarningModal: function () {
        $("#warningModal").modal("hide");
      },

      deleteSavedSearch: function () {
        var model = this;

        $.ajax({
          url: '/ctxapp/animals/saved-searches/' + model.selectedSearch.AnimalSavedQueryId,
          type: 'DELETE',
          success: function () {
            for (var i = 0; i < model.searches.length; i++) {
              if (model.searches[i].AnimalSavedQueryId === model.selectedSearch.AnimalSavedQueryId) {
                model.splice("searches", i, 1);
                break;
              }
            }
            model.resetSearchesArray();
          },
          error: function (response) {
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg);
            }
          }
        });

        this.closeWarningModal();
      },

      editSavedSearch: function (e) {
        var model = this;
        model.$.animalFilter.resetSearch();

        this.hideLoading = false;
        var selectedSearch;
        //Set modal title
        for (var i = 0; i < this.searches.length; i++) {
          if (this.searches[i].AnimalSavedQueryId === e.currentTarget.dataFilename) {
            selectedSearch = this.searches[i];
            this.title = " - " + this.searches[i].Title;
            break;
          }
        }

        //Get animal data to fill animalFilter dropdowns
        $.get('/ctxapp/animals/saved-searches/filters')
          .done(function (data) {
            model.$.animalFilter.searchParams = data;
            model.populateAnimalFilter(selectedSearch);
            model.hideLoading = true;
          })
          .fail(function (response) {
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg);
            }
          });

        //Animal filter setup
        this.$.animalFilter.hideSaveSearch = false;
        this.$.animalFilter.hideSaveSearchLayout = true;
        this.$.animalFilter.hideSearchLayout = false;

        //Hide some elements to make more room
        $("#topActionButtons").addClass("hidden");
        $("#topLine").addClass("hidden");
        $("#btnSearch").addClass("hidden");
        $("#editAnimalSearchModal").modal("show");
      },

      getSavedAnimalSearches: function () {
        var model = this;
        $.get('/ctxapp/animals/saved-searches')
          .done(function (data) {
            model.resetSearchesArray();
            model.searches = data;

            for (var i = 0; i < model.searches.length; i++) {
              if (model.searches[i].Frequency === 1) {
                model.searches[i].Frequency = "Daily";
              }
              else if (model.searches[i].Frequency === 7) {
                model.searches[i].Frequency = "Weekly";
              }
              else if (model.searches[i].Frequency === 30) {
                model.searches[i].Frequency = "Monthly";
              }
            }
          })
          .fail(function (response) {
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg);
            }
          });
      },

      resetSearchesArray: function () {
        var array = this.searches;
        this.searches = [];
        this.searches = array;
      },

      populateAnimalFilter: function (selectedSearch) {
        //WARNING/TODO: Needs redesign. If code changes here, must duplicate in loadSavedSearch of animal-filter.html
        if (selectedSearch === undefined || selectedSearch === null) return;

        if (selectedSearch.Freezemark) {
          $("#cbFreezemark").prop('checked', true);
          this.$.animalFilter.freezemark = selectedSearch.Freezemark;
          this.$.animalFilter.hideFreezemark = false;
        }

        if (selectedSearch.Species) {
          $("#cbSpecies").prop('checked', true);

          if (selectedSearch.Species === "Burro") {
            $("#burro").prop('checked', true);
          }
          else if (selectedSearch.Species === "Horse") {
            $("#horse").prop('checked', true);
          }

          this.$.animalFilter.hideSpecies = false;
        }

        if (selectedSearch.Gender) {
          $("#cbGender").prop('checked', true);
          this.$.animalFilter.hideGender = false;

          var genderList = selectedSearch.Gender.split('|');

          for (var i = 0; i < genderList.length; i++) {
            if (genderList[i] !== "") {
              $("#" + genderList[i] + "").prop('checked', true);
            }
          }
        }

        if (selectedSearch.FilterByAge) {
          $("#cbAge").prop('checked', true);
          this.$.animalFilter.hideAge = false;
          this.$.animalFilter.fromAge = selectedSearch.FromAge;
          this.$.animalFilter.toAge = selectedSearch.ToAge;
        }

        if (selectedSearch.Color) {
          $("#cbColor").prop('checked', true);
          this.$.animalFilter.hideColor = false;

          var colorList = selectedSearch.Color.split('|');

          for (var i = 0; i < colorList.length; i++) {
            if (colorList[i] !== "") {
              $("#" + colorList[i] + "").prop('checked', true);
            }
          }
        }

        if (selectedSearch.FilterByHeight) {
          $("#cbHeight").prop('checked', true);
          this.$.animalFilter.hideHeight = false;
          this.$.animalFilter.fromHeight = selectedSearch.FromHeight;
          this.$.animalFilter.toHeight = selectedSearch.ToHeight;
        }

        if (selectedSearch.Training) {
          var trainingList = selectedSearch.Training.split('|');

          for (var i = 0; i < trainingList.length; i++) {
            $("#cbTraining").prop('checked', true);

            if (trainingList[i] === "Halter Trained") {
              $("#Halter").prop('checked', true);
            }
            else if (trainingList[i] === "Saddle Trained") {
              $("#Saddle").prop('checked', true);
            }
            else if (trainingList[i] === "Untrained") {
              $("#Untrained").prop('checked', true);
            }
            else if (trainingList[i] === "Training Not Completed") {
              $("#Incomplete").prop('checked', true);
            }

          }
          this.$.animalFilter.hideTraining = false;
        }

        if (selectedSearch.Disposition) {
          $("#cbDisposition").prop('checked', true);

          if (selectedSearch.Disposition === "adoption") {
            $("#adoption").prop('checked', true);
          }
          else if (selectedSearch.Disposition === "sale") {
            $("#sale").prop('checked', true);
          }
          this.$.animalFilter.hideDisposition = false;
        }

        if (selectedSearch.Video) {
          $("#cbVideo").prop('checked', true);
        }

        if (selectedSearch.BuyNow) {
          $("#cbBuyNow").prop('checked', true);
        }

        if (selectedSearch.Auction) {
          $("#cbAuction").prop('checked', true);
        }

        if (selectedSearch.FilterByPrice) {
          $("#cbPrice").prop('checked', true);
          this.$.animalFilter.hidePrice = false;
          this.$.animalFilter.priceMin = selectedSearch.FromPrice;
          this.$.animalFilter.priceMax = selectedSearch.ToPrice;
        }
        else {
          this.$.animalFilter.priceMin = null;
          this.$.animalFilter.priceMax = null;
        }

        if (selectedSearch.CurrentLocation) {
          $("#cbCurrentAnimalLocation").prop('checked', true);
          this.$.animalFilter.hideCurrentLocation = false;

          var currentLocationList = selectedSearch.CurrentLocation.split('|');

          for (var i = 0; i < currentLocationList.length; i++) {
            if (currentLocationList[i] !== "") {
              $("[id='" + currentLocationList[i] + "']").prop('checked', true);
            }
          }
        }

        if (selectedSearch.Hma) {
          $("#cbAnimalOrigin").prop('checked', true);
          this.$.animalFilter.hideHma = false;

          var hmaList = selectedSearch.Hma.split('|');

          for (var i = 0; i < hmaList.length; i++) {
            if (hmaList[i] !== "") {
              $("[id='" + hmaList[i] + "']").prop('checked', true);
            }
          }
        }

        if (selectedSearch.BornAtFacility) {
          $("#cbAnimalOrigin").prop('checked', true);
          this.$.animalFilter.hideHma = false;
          var originList = $('#hmaLayout').find(':checkbox');

          for (var i = 0; i < originList.length; i++) {
            if (originList[i].id == "Born at Facility") {
              $("[id='" + originList[i].id + "']").prop('checked', true);
              return;
            }
          }
        }

        if (selectedSearch.ZipCode) {
          $("#cbPickupLocation").prop('checked', true);
          this.$.animalFilter.zipCode = selectedSearch.ZipCode;
          this.$.animalFilter.pickupDistance = selectedSearch.PickupDistance;
          this.$.animalFilter.hidePickupDistance = false;
        }

        if (selectedSearch.PickupLocation) {
          $("#cbPickupLocation").prop('checked', true);

          var locationList = selectedSearch.PickupLocation.split('|');

          for (var i = 0; i < locationList.length; i++) {
            if (locationList[i] !== "") {
              $("[id='" + locationList[i] + "']").prop('checked', true);
            }
          }
          this.$.animalFilter.hidePickupLocation = false;
        }

        this.$.animalFilter.title = selectedSearch.Title;

        if (selectedSearch.Frequency === "Daily") {
          $("#cbDaily").prop('checked', true);
        }
        else if (selectedSearch.Frequency === "Weekly") {
          $("#cbWeekly").prop('checked', true);
        }
        else if (selectedSearch.Frequency === "Monthly") {
          $("#cbMonthly").prop('checked', true);
        }

      },

      showDeleteWarning: function (e) {
        for (var i = 0; i < this.searches.length; i++) {
          if (this.searches[i].Title === e.currentTarget.dataFilename) {
            this.selectedSearch = this.searches[i];
            break;
          }
        }

        $("#warningModal").modal("show");
      },

      viewSavedSearch: function (e) {
        window.location = "/Animals?search=" + e.currentTarget.dataFilename;
      },
    })
  </script>
</dom-module>
﻿<dom-module id="video-player">
    <template>
        <style>
            :host .video {
                position: relative !important;
                width: 100% !important;
                height: auto !important;
            }
        </style>
        <video id="whbVideo" class="video" onloadedmetadata="this.muted = true" autoplay="" controls="" preload="auto">
            <source src$="{{videoSource}}">
        </video>
    </template>
    <script>
        'use strict';
        Polymer({
            is: "video-player",
            properties: {
                videoSource: {
                    type: String,
                    value: ''
                }
            },
            stopVideo: function () {
                var model = this;
                var mPlayer = $(model).find("#whbVideo").get(0);

                mPlayer.pause();
            }
        });
    </script>
</dom-module>﻿<dom-module id="admin-map-events">
  <template>
    <power-grid id="eventsGrid" class="powergrid-nowrap" page-size="25" paging="true">
      <grid-data v2-search="" url="/api/mapping/admin/events/?$orderby=StartDate desc"></grid-data>
      <grid-open></grid-open>
      <grid-field sort="" name="Name" title="PS Event Name" type="text" search="" width="190"></grid-field>
      <grid-field sort="" name="MapHidden" title="Hidden" type="checkbox" width="50"></grid-field>
      <grid-field sort="" name="StartDate" title="Start Date" type="prettyDate"></grid-field>
      <grid-field sort="" name="EndDate" title="End Date" type="prettyDate"></grid-field>
      <grid-field sort="" name="FacilityName" title="Location" type="text" search="" width="190"></grid-field>
      <grid-bulk-action on-action="hideEvents" title="Hide Event"></grid-bulk-action>
      <grid-bulk-action on-action="showEvents" title="Show Event"></grid-bulk-action>
    </power-grid>
  </template>
    <script>
    Polymer({
      is: 'admin-map-events',

      properties: {
      },

      attached: function () {
      },

      hideEvents: function (selectedEvents) {
        this.updateMapEvents(selectedEvents, true);
      },

      showEvents: function (selectedEvents) {
        this.updateMapEvents(selectedEvents, false);
      },

      updateMapEvents: function (selectedEvents, hide) {
        var list = [];
        for (let eventDetail of selectedEvents.detail) {
          list.push(eventDetail.EventId);
        }
        if (list.length == 0) {
          alert('At least one event must be selected');
          return;
        }

        var postData = {
          '': list
        };

        $.post('/api/mapping/admin/events/updatedisplay/' + hide, postData)
          .done(function () {
            $("#eventsGrid").get(0).hardreload();
          })
          .fail(function (response) {
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg);
            }
          });
      },
    });
  </script>
</dom-module>﻿<dom-module id="admin-map-hmas">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <power-grid id="hmaGrid" class="powergrid-nowrap" page-size="50" paging="true">
      <grid-data url="/api/mapping/admin/hmas?$orderby=HMA_NAME" v2-search=""></grid-data>
      <grid-open></grid-open>
      <grid-field sort="" name="HMA_NAME" title="Name" type="text" width="90" search=""></grid-field>
      <grid-field sort="" name="HMA_ID" title="HMA ID" type="text" width="40" search=""></grid-field>
      <grid-field sort="" name="ADMIN_ST" title="Admin State" type="text" width="60" search=""></grid-field>
      <grid-field sort="" name="ADM_UNIT_CD" title="Admin Unit Code" type="text" width="60" search=""></grid-field>
      <grid-field sort="" name="ADMIN_AGCY" title="Admin Agency" type="text" width="70" search=""></grid-field>
      <grid-field sort="" name="HERD_TYPE" title="Herd Type" type="text" width="40" search=""></grid-field>
      <grid-field sort="" name="Hidden" title="Hidden" type="checkbox" width="30"></grid-field>
      <grid-action title="Edit" on-action="_editHma"></grid-action>
      <grid-bulk-action on-action="hideHmas" title="Hide HMAs"></grid-bulk-action>
      <grid-bulk-action on-action="showHmas" title="Show HMAs"></grid-bulk-action>
    </power-grid>

    <div id="editHmaDialog" class="modal fade" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h4 class="modal-title">Edit HMA</h4>
          </div>
          <div class="modal-body">
            <div class="form-group">
              <label>HMA Name</label>
              <span class="form-control">{{editHma.HMA_NAME}}</span>
            </div>
            <div class="form-group">
              <label>HMA ID</label>
              <span class="form-control">{{editHma.HMA_ID}}</span>
            </div>
            <div class="form-group">
              <label for="input1">Percent of AML - Horses</label>
              <input type="text" class="form-control" id="input1" placeholder="Percent of AML - Horses" value="{{editMeta.HorseAML::change}}">
            </div>
            <div class="form-group">
              <label for="input2">Percent of AML - Burros</label>
              <input type="text" class="form-control" id="input2" placeholder="Percent of AML - Burros" value="{{editMeta.BurroAML::change}}">
            </div>
            <div class="form-group">
              <label for="input3">Link to website for the HMA </label>
              <input type="url" class="form-control" id="input3" placeholder="Link to website for the HMA" value="{{editMeta.Website::change}}">
            </div>
            <div class="form-group">
              <input id="hidden" name="hidden" type="checkbox" checked="{{editMeta.Hidden::change}}">
              <label for="hidden">Hidden</label>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" on-tap="_save">Save</button>
          </div>
        </div>
      </div>
    </div>
  </template>

  <script>
    Polymer({
      is: 'admin-map-hmas',

      _editHma: function (e) {

        var model = this;

        model.set('editMeta', null);
        model.set('editHma', e.detail);
        /// add metadata if not exists
        $.get('/api/mapping/admin/hmas/' + this.editHma.HMA_ID)
          .done(function (data) {
            model.set('editMeta', data);
            $(model.$.editHmaDialog).modal('show');
          })
          .fail(function (response) {
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg);
            }
          });

      },
      _save: function () {
        var postData = {
          HMA_ID: this.editMeta.HMA_ID,
          HorseAML: this.editMeta.HorseAML,
          BurroAML: this.editMeta.BurroAML,
          Website: this.editMeta.Website,
          Hidden: this.editMeta.Hidden,
        };

        var model = this;
        $.post('/api/mapping/admin/hma/' + this.editMeta.HMA_ID, postData)
          .done(function () {
            $(model.$.editHmaDialog).modal('hide');
            model.$.hmaGrid.reload(true);
            model.set('editMeta', null);
          })
          .fail(function (response) {
            alert('A transition error has occurred: ' + response);
          });
      },
      hideHmas: function (selected) {
        this.updateMapHmas(selected, true);
      },

      showHmas: function (selected) {
        this.updateMapHmas(selected, false);
      },
      updateMapHmas: function (hmas, hide) {
        var list = [];
        for (var i = 0; i < hmas.detail.length; i++) {
          list.push(hmas.detail[i].HMA_ID);
        }
        if (list.length == 0) {
          alert('At least one HMA must be selected');
          return;
        }

        var postData = {
          '': list
        };

        $.post('/api/mapping/admin/hmas/updatedisplay/' + hide, postData)
          .done(function () {
            $("#hmaGrid").get(0).hardreload();
          })
          .fail(function (response) {
            var errMsg = getXhrErrorMessage(response);
            if (errMsg) {
              alert(errMsg);
            }
          });
      },
    });
  </script>
</dom-module>﻿<dom-module id="admin-map-facilities">
    <template>
        <style>
            :host {
                display: block;
            }
        </style>
        <div>
            <power-grid id="facGrid" class="powergrid-nowrap" page-size="50" paging="true">
                <grid-data url="/api/mapping/admin/facilities?$orderby=WHB_FAC_NM" v2-search=""></grid-data>
                <grid-open></grid-open>
                <grid-field sort="" name="WHB_FAC_NM" title="Name" type="text" width="90" search=""></grid-field>
                <grid-field sort="" name="WHB_FAC_CD" title="Facility Code" type="text" width="40" search=""></grid-field>
                <grid-field sort="" name="WHB_FAC_TYPE" title="Facility Type" type="text" width="60" search=""></grid-field>
                <grid-field sort="" name="WHB_FAC_PRPSE" title="Facility Purpose" type="text" width="60" search=""></grid-field>
                <grid-field sort="" name="Hidden" title="Hidden" type="checkbox" width="20"></grid-field>
                <grid-action title="Edit" on-action="_edit"></grid-action>
                <grid-bulk-action on-action="hideFacilities" title="Hide Facilities"></grid-bulk-action>
                <grid-bulk-action on-action="showFacilities" title="Show Facilities"></grid-bulk-action>
            </power-grid>
        </div>

        <div id="editDialog" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                        <h4 class="modal-title">Edit Facility</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="input1">Facility Name</label>
                            <input type="text" class="form-control" id="input1" placeholder="Name" value="{{editMeta.Name::change}}">
                        </div>
                        <div class="form-group">
                            <label for="input2">Website Link</label>
                            <input type="url" class="form-control" id="input2" placeholder="Link to website for the Facility" value="{{editMeta.Website::change}}">
                        </div>
                        <div class="form-group">
                            <input class="" id="hiddenFac" name="hiddenFac" type="checkbox" checked="{{editMeta.Hidden::change}}">
                            <label class="" for="hiddenFac">Hidden</label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" on-tap="_save">Save</button>
                    </div>
                </div></div></div></template>

    <script>
        Polymer({
            is: 'admin-map-facilities',

            properties: {

            },
            ready: function () {

            },
            attached: function () {

            },
            _edit: function (e) {

                var model = this;

                model.set('editMeta', null);
                model.set('edit', e.detail);
                /// add metadata if not exists
                $.get('/api/mapping/facilities/' + this.edit.OBJECTID).done(function (data) {
                    if (!data.Name) {
                        data.Name = model.edit.WHB_FAC_NM;
                    }            

                    model.set('editMeta', data);

                    $(model.$.editDialog).modal('show');
                });
            },
            _save: function () {
                var postData = {
                    Name: this.editMeta.Name,
                    Website: this.editMeta.Website,
                    Hidden: this.editMeta.Hidden,
                };

                var model = this;
                $.post('/api/mapping/admin/facility/' + this.editMeta.OBJECTID, postData)
                    .done(function () {
                        $(model.$.editDialog).modal('hide');
                        model.$.facGrid.reload(true);
                        model.set('editMeta', null);
                    })
                    .fail(function (response) {
                        var errMsg = getXhrErrorMessage(response);
                        if (errMsg) {
                            alert(errMsg);
                        }
                    });
            },
            hideFacilities: function (selected) {
                this.updateMapFacilities(selected, true);
            },

            showFacilities: function (selected) {
                this.updateMapFacilities(selected, false);
            },
            updateMapFacilities: function (facilities, hide) {
                var list = [];
                for (var i = 0; i < facilities.detail.length; i++) {
                    list.push(facilities.detail[i].OBJECTID);
                }
                if (list.length == 0) {
                    alert('At least one facility must be selected');
                    return;
                }

                var postData = {
                    '': list
                };

                $.post('/api/mapping/admin/facilities/updatedisplay/' + hide, postData)
                    .done(function () {
                        $("#facGrid").get(0).hardreload();
                    })
                    .fail(function (response) {
                        var errMsg = getXhrErrorMessage(response);
                        if (errMsg) {
                            alert(errMsg);
                        }
                    });
            },
        });
    </script>
</dom-module>﻿<dom-module id="doc-comments">
    <template>
        <style>
            :host {
            }
        </style>
        <div id="dialog" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" on-tap="close" aria-label="Close"><span aria-hidden="true">×</span></button>
                        <h4 class="modal-title">Document Comments</h4>
                    </div>
                    <div class="modal-body" hidden="{{!admin}}">
                        <power-grid id="commentsGridAdmin" page-size="25" simple="" no-search="" stop-load="">
                            <grid-data url$="{{gridUrl}}"></grid-data>
                            <grid-field name="CommentType" title="Type" type="text" width="90"></grid-field>
                            <grid-field name="VisibleForPublicUser" title="Shown to User" type="text" width="65"></grid-field>
                            <grid-field name="CreatedDate" title="Date" type="text" width="110"></grid-field>
                            <grid-field name="Comment" title="Comment" type="text" width="485"></grid-field>
                            <grid-action title="Edit" valid="{{canEdit()}}" on-action="editComment"></grid-action>
                            <grid-action title="Delete" valid="{{canEdit()}}" on-action="deleteComment"></grid-action>
                        </power-grid>
                    </div>
                    <div class="modal-body" hidden="{{admin}}">
                        <power-grid id="commentsGridUser" page-size="25" simple="" no-search="" stop-load="">
                            <grid-data url$="{{gridUrl}}"></grid-data>
                            <grid-field name="CommentType" title="Type" type="text" width="90"></grid-field>
                            <grid-field name="CreatedDate" title="Date" type="text" width="100"></grid-field>
                            <grid-field name="Comment" title="Comment" type="text" width="525"></grid-field>
                            <grid-action title="Edit" valid="{{canEdit()}}" on-action="editComment"></grid-action>
                            <grid-action title="Delete" valid="{{canEdit()}}" on-action="deleteComment"></grid-action>
                        </power-grid>
                    </div>
                    <div class="modal-footer">
                        <template is="dom-if" if="{{showOpen}}">
                            <button type="button" class="btn blm-btn-primary" on-tap="openApp">Open Application</button>
                        </template>
                        <template is="dom-if" if="{{showAddComment}}">
                            <button type="button" class="btn blm-btn-primary" on-tap="addComment">Add Comment</button>
                        </template>
                        <button type="button" class="btn blm-btn-secondary" on-tap="close">Close</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="dialogComment" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close closeBtn" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" class="closeSpan">×</span></button>
                        <h4 class="modal-title">Add or Edit Comment</h4>
                    </div>
                    <div class="modal-body">
                        <label for="txtComment">Comment</label>
                        <textarea class="form-control" id="txtComment" rows="10" value="{{comment::input}}"></textarea>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn blm-btn-secondary" data-dismiss="modal">Cancel</button>
                        <template is="dom-if" if="{{admin}}">
                            <button type="button" class="btn blm-btn-primary" on-tap="saveComment" data-showuser="false">Save and Do Not Show to User</button>
                            <button type="button" class="btn blm-btn-primary" on-tap="saveComment" data-showuser="true">Save and Show to User</button>
                        </template>
                        <template is="dom-if" if="{{!admin}}">
                            <button type="button" class="btn blm-btn-primary" on-tap="saveComment" data-showuser="true">Save</button>
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </template>
    <script>
        Polymer({
            is: 'doc-comments',
            properties: {
                admin: {
                    type: Boolean,
                    value: false
                },
                showOpen: {
                    type: Boolean,
                    value: false
                },
            },

            attached: function () {

            },

            open: function (docUrl, docPath, docType, docId, allowComment) {
                this.docUrl = docUrl;
                this.docType = docType;
                this.gridUrl = `/ctxapp/documents/${docPath}/${docId}/comments`;
                this.docId = docId;
                this.allowComment = allowComment;
                $(this.$.dialog).modal("show");
                if (this.admin) {
                    this.$.commentsGridAdmin.hardreload();
                } else {
                    this.$.commentsGridUser.hardreload();
                }
                this.showAddComment = this.allowComment || this.admin;
            },

            openApp: function () {
                window.location = this.docUrl;
            },

            close: function () {
                $(this.$.dialog).modal("hide");
            },
            deleteComment: function (e) {
                e.preventDefault();
                var model = this;

                if (!confirm('Are you sure you wish to delete this comment?')) {
                    return;
                }

                $.ajax({
                    url: '/ctxapp/documents/comments/' + e.detail.Id,
                    type: 'DELETE',
                    success: function () {
                        $("#dialogComment").modal("hide");
                        if (model.admin) {
                            model.$.commentsGridAdmin.hardreload();
                        } else {
                            model.$.commentsGridUser.hardreload();
                        }
                    },
                    error: function (response) {
                        var errMsg = getXhrErrorMessage(response);
                        if (errMsg) {
                            alert(errMsg);
                        }
                    }
                });
            },
            addComment: function () {
                this.editMode = false;
                this.comment = null;
                $("#dialogComment").modal("show");
            },
            editComment: function (e) {
                e.preventDefault();                
                this.editMode = true;
                this.comment = decodeString(e.detail.Comment);
                this.commentId = e.detail.Id;
                $("#dialogComment").modal("show");
            },
            saveComment: function (e) {
                if (this.editMode) {
                    this.editCommentSave();
                } else {
                    this.addCommentSave(e);
                }
            },
            editCommentSave: function () {
                var model = this;
                var comment = {
                    Comment: model.comment,
                };

                $.post('/ctxapp/documents/comments/' + model.commentId, comment)
                    .done(function (data) {
                        $("#dialogComment").modal("hide");
                        if (model.admin) {
                            model.$.commentsGridAdmin.hardreload();
                        } else {
                            model.$.commentsGridUser.hardreload();
                        }
                    })
                    .fail(function (response) {
                        var errMsg = getXhrErrorMessage(response);
                        if (errMsg) {
                            alert(errMsg);
                        }
                    });
            },
            addCommentSave: function (e) {
                var model = this;
                var comment = {
                    ApplicationType: model.docType,
                    ApplicationId: model.docId,
                    Comment: model.comment.split("\n").join("<br />"),
                    CommentType: model.admin ? 'Admin Comment' : 'User Comment',
                    VisibleForPublicUser: e.target.dataset.showuser,
                };

                $.post('/ctxapp/documents/comments', comment)
                    .done(function () {
                        $("#dialogComment").modal("hide");
                        if (model.admin) {
                            model.$.commentsGridAdmin.hardreload();
                        } else {
                            model.$.commentsGridUser.hardreload();
                        }
                    })
                    .fail(function (response) {
                        var errMsg = getXhrErrorMessage(response);
                        if (errMsg) {
                            alert(errMsg);
                        }
                    });
            },
            canEdit: function () {
                var model = this;
                return function (e) {
                    if (model.admin && e.CommentType === 'Admin Comment') {
                        return true;
                    }
                    if (!model.admin && e.CommentType === 'User Comment' && model.allowComment) {
                        return true;
                    }
                    return false;
                };
            },
        });
    </script>
</dom-module><dom-module id="doc-toolbar">
    <template>
        <style>
            .icons {
                color: black;
                text-decoration: none;
                cursor: pointer;
                font-size: 15px;
            }
        </style>
        <div>
            <span hidden$="{{isSubmitted}}" class="icons" on-tap="saveDraft"><span class="glyphicon glyphicon-save"></span> {{saveDraftLabel}}</span>&nbsp;
            <span hidden$="{{!showEditForm(isAdmin, expired)}}" class="icons" on-tap="editForm"><span class="glyphicon glyphicon-edit"></span> Edit</span>&nbsp;
            <span class="icons" on-tap="openPrint"><span class="glyphicon glyphicon-print"></span> {{printLabel}}</span>&nbsp;
            <span hidden$="{{!showManageAttachments(isAdmin, isSubmitted)}}" class="icons" on-tap="openManageAttachments"><span class="glyphicon glyphicon-paperclip"></span> {{attachmentsLabel}}</span>
            <span hidden$="{{!showReviewAttachments(isAdmin, isSubmitted)}}" class="icons" on-tap="openReviewAttachments"><span class="glyphicon glyphicon-paperclip"></span> {{attachmentsLabel}}</span>&nbsp;
            <span hidden$="{{!isAdmin}}" class="icons" on-tap="openComments"><span class="glyphicon glyphicon-comment"></span> {{commentsLabel}} {{unreadComments}}</span>
            <span hidden$="{{!showUserComments(isAdmin, isNew)}}" class="icons" on-tap="openComments"><span class="glyphicon glyphicon-comment"></span> {{commentsLabel}}</span>
        </div>
    </template>
    <script>
        Polymer({
            is: 'doc-toolbar',
            properties: {
                isAdmin: { type: Boolean },
                expired: { type: Boolean },
                isSubmitted: { type: Boolean },
                isNew: { type: Boolean },
                unreadComments: { type: String },
                saveDraftLabel: { type: String },
                printLabel: { type: String },
                attachmentsLabel: { type: String },
                commentsLabel: { type: String },
            },
            attached: function () {

            },
            showUserComments: function (admin, isNew) {
                return !admin && !isNew;
            },
            showReviewAttachments: function (admin, submitted) {
                return !admin && submitted;
            },
            showManageAttachments: function (admin, submitted) {
                return admin || !submitted;
            },
            showEditForm: function (admin, expired) {
                return admin && !expired;
            },
            editForm: function () {
                this.fire('edit-form');
            },
            openManageAttachments: function () {
                this.fire('open-manage-attachments');
            },
            openReviewAttachments: function () {
                this.fire('open-review-attachments');
            },
            openPrint: function () {
                this.fire('open-print');
            },
            openComments: function () {
                this.fire('open-comments');
            },
            saveDraft: function () {
                this.fire('save-draft');
            },
        });
    </script>
</dom-module>﻿<dom-module id="radio-group">
    <template>
        <content></content>
    </template>

    <script>
        Polymer({
            is: 'radio-group',
            properties: {
                group: {
                    type: String,
                    value: '',
                },
                value: {
                    type: Object,
                    value: null,
                    observer: '_valObserver',
                },
            },
            attached: function () {
                var model = this;
                $(this).find('[name=' + this.group + ']').on('change', function () {
                    model.fire('change');
                });
            },

            _valObserver: function () {
                var model = this;
                if (model.value != null) {
                    var val = model.value;
                    if (typeof model.value != 'string') {
                        val = JSON.stringify(model.value);
                    }
                    model.debounce('setBoolGroup' + model.group, function () {
                        $(this).find('[name = ' + this.group + ']').each(function (i, ele) {
                            ele.removeAttribute('checked');
                        });
                        $(this).find('[name = ' + this.group + ']').each(function (i, ele) {
                            if (ele.value == val) {
                                $(ele).attr('checked', true);
                            }
                        });
                    }, 300);
                }
            }
        });
    </script>
</dom-module><dom-module id="match-user">
  <style>
    :host .psUserItem {
      background: none !important;
      border: none;
      outline: none !important;
      width: 100%
    }

    :host .modal-dialog {
      overflow-y: auto !important
    }

    :host .modal-body {
      overflow-y: auto
    }

    :host .psUserItem:focus .list-group-item {
      border-color: blue
    }

    :host #list-group {
      height: 450px;
      overflow: auto
    }

    :host .closeBtn {
      opacity: 1
    }

    :host .closeSpan {
      color: white
    }

    :host .heading {
      font-size: 14px;
      font-weight: bold
    }

    :host .required {
      color: red
    }

    :host td {
      border-right: solid 1px silver
    }
  </style>
  <template>
    <div class="modal fade" id="matchPopup" role="dialog" style="z-index: 1400;">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button class="close closeBtn" data-dismiss="modal" on-tap="closeUserDialog" type="button"><span aria-hidden="true" class="closeSpan">×</span></button>
            <h4 class="modal-title" id="confirmationHeader">WHBPS User Search</h4>
          </div>
          <div class="modal-body" id="confirmationBody">
            <div class="row" id="psUserAlertArea" hidden="">
              <div class="alert" id="psUserAlertText"></div>
            </div>
            <div class="row">
              <div class="userSearch col-md-9">
                <table class="table table-responsive table-condensed" style="margin-bottom: 0px;">
                  <thead>
                    <tr>
                      <th></th>
                      <th>Application Info</th>
                      <th>WHBPS Account Info - {{psLegalEntityId}}</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td><label>First Name</label></td>
                      <td><input class="form-control input-sm fieldBorder" maxlength="50" type="text" value="{{applicantFirstName::input}}"></td>
                      <td>{{psFirstName}}</td>
                    </tr>
                    <tr>
                      <td><label>Middle Name</label></td>
                      <td><input class="form-control input-sm fieldBorder" maxlength="50" type="text" value="{{applicantMiddleName::input}}"></td>
                      <td>{{psMiddleName}}</td>
                    </tr>
                    <tr>
                      <td><label>Last Name</label></td>
                      <td><input class="form-control input-sm fieldBorder" maxlength="50" type="text" value="{{applicantLastName::input}}"></td>
                      <td>{{psLastName}}</td>
                    </tr>
                    <tr>
                      <td><label>SSN</label></td>
                      <td><input class="form-control input-sm fieldBorder" maxlength="9" required="" type="text" value="{{ssn::input}}"></td>
                      <td>{{psSsn}}</td>
                    </tr>
                    <tr>
                      <td><label>Driver's License</label></td>
                      <td><input class="form-control input-sm fieldBorder" maxlength="20" required="" type="text" value="{{driversLicenseNumber::input}}"></td>
                      <td>{{psDriversLicense}}</td>
                    </tr>
                    <tr>
                      <td><label>Birth Date</label></td>
                      <td><input class="form-control input-sm fieldBorder" type="date" value="{{birthDate::input}}"></td>
                      <td>{{psBirthDate}}</td>
                    </tr>
                    <tr>
                      <td><label>Address</label></td>
                      <td><input class="form-control input-sm fieldBorder" type="text" value="{{applicantStreetAddress::input}}"></td>
                      <td>{{psAddress}}</td>
                    </tr>
                    <tr>
                      <td><label>City</label></td>
                      <td><input class="form-control input-sm fieldBorder" type="text" value="{{applicantCity::input}}"></td>
                      <td>{{psCity}}</td>
                    </tr>
                    <tr>
                      <td><label>State</label></td>
                      <td><input class="form-control input-sm fieldBorder" type="text" value="{{applicantState::input}}"></td>
                      <td>{{psState}}</td>
                    </tr>
                    <tr>
                      <td><label>Zip Code</label></td>
                      <td><input class="form-control input-sm fieldBorder" type="text" value="{{applicantZipCode::input}}"></td>
                      <td>{{psZipCode}}</td>
                    </tr>
                    <tr>
                      <td><label>Home Phone</label></td>
                      <td><input class="form-control input-sm fieldBorder" type="text" value="{{applicantPhone::input}}"></td>
                      <td>{{psHomePhone}}</td>
                    </tr>
                    <tr style="border-bottom:solid 1px silver">
                      <td><label>Email Address</label></td>
                      <td><input class="form-control input-sm fieldBorder" type="text" value="{{email::input}}"></td>
                      <td>{{psEmail}}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="searchResults col-md-3" hidden="{{hideSearchResults}}">
                <div class="row">
                  <div class="col-md-12">
                    <div class="form-group">
                      <p class="heading">Search Results ({{numberFound}})</p>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-12">
                    <div id="list-group">
                      <template is="dom-repeat" items="{{psUsers}}">
                        <button class="psUserItem" data-psid="{{item.LegalEntityId}}" data-psuser="{{item}}" on-tap="viewUser" type="button">
                          <div class="list-group-item list-group-item-action flex-column align-items-start">
                            <div class="d-flex w-100 justify-content-between">
                              <h5><b>{{item.LegalEntityId}}</b></h5>
                              <h5 class="mb-1">{{item.PersonFirstName}} {{item.PersonLastName}}</h5>
                            </div>
                          </div>
                        </button>
                      </template>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <div class="pull-left">
              <button class="btn blm-btn-primary" disabled="{{processing}}" on-tap="searchPs" type="button">Search WHBPS <span id="spinner" hidden$="{{!processing}}"><i class="fa fa-spinner fa-pulse fa-fw"></i></span></button>
              <button class="btn blm-btn-primary" disabled="{{disableCreateUser(processing, docType)}}" on-tap="createPsUser" type="button">Create New User</button>
              <button class="btn blm-btn-primary" disabled="{{processing}}" on-tap="updatePsUser" type="button">Update and Select User</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script>
    Polymer({
      is: "match-user",
      properties: {
        applicationId: { type: Number },
        hideSearchResults: { type: Boolean, value: true },
        processing: { type: Boolean, value: false },
        applicant: { type: Object },
        docType: { type: String },
        leId: { type: Number },
      },
      attached: function () {
      },
      show: function () {
        $(this.$.matchPopup).modal({ backdrop: 'static', keyboard: false });
        this.cleanPsUserArray();
        this.numberFound = null;
        this.psFirstName = null;
        this.psLastName = null;
        this.psEmail = null;
        this.psHomePhone = null;
        this.psAddress = null;
        this.psCity = null;
        this.psState = null;
        this.psZipCode = null;
        this.psSsn = null;
        this.psDriversLicense = null;
        this.psDriversLicenseState = null;
        this.psBirthDate = null;
        this.psMiddleName = null;
        this.hideSearchResults = true;
        $("#psUserAlertArea").removeClass();
        $("#psUserAlertArea").attr("hidden", "hidden");

        this.userId = this.applicant.UserId;
        this.ssn = this.applicant.Ssn;
        this.driversLicenseNumber = this.applicant.DriversLicenseNumber;
        this.driversLicenseState = this.applicant.DriversLicenseState;
        this.applicantFirstName = this.applicant.FirstName;
        this.applicantMiddleName = this.applicant.MiddleName;
        this.applicantLastName = this.applicant.LastName;
        this.birthDate = isNaN(Date.parse(this.applicant.BirthDate)) ? null : new Date(this.applicant.BirthDate).toISOString().split('T')[0];
        this.applicantStreetAddress = this.applicant.StreetAddress;
        this.applicantCity = this.applicant.City;
        this.applicantState = this.applicant.GeoState;
        this.applicantZipCode = this.applicant.ZipCode;
        this.email = this.applicant.EmailAddress;
        this.applicantPhone = this.applicant.Phone;
        this.docType = this.docType;
        this.psLegalEntityId = this.leId;

        if (this.psLegalEntityId) {
          this.setPsUser(this.psLegalEntityId);
        } else {
          this.searchPs();
        }
      },
      searchPs: function () {
        this.processing = true
        $("#psUserAlertArea").removeClass();
        $("#psUserAlertArea").attr("hidden", "hidden");
        this.cleanPsUserArray();

        var searchData = {};
        var ssn = this.ssn ? this.ssn.replace(/-/g, '') : null;

        if (this.docType == 'Purchase') {
          if (!this.applicantFirstName || !this.applicantLastName) {
            this.displayError('First and Last Names are required fields.');
            return;
          }
        } else if (this.docType == 'Adoption' || this.docType == 'Combined') {
          searchData.SSN = ssn;
          searchData.DriversLicenseNumber = this.driversLicenseNumber;
          searchData.DriversLicenseState = this.driversLicenseState;
        } else if (this.docType == 'Incentive') {
          searchData.SSN = ssn;
        }

        searchData.FirstName = this.applicantFirstName;
        searchData.LastName = this.applicantLastName;

        var queryString = this.psLegalEntityId ? '?leId=' + this.psLegalEntityId : '?leId=';
        queryString += '&userId=' + this.userId;
        var model = this;
        $.post('/ctxapp/users/psuser/checkduplicates' + queryString, searchData)
          .done(function (data) {
            model.numberFound = data.length;

            if (data.length > 0) {
              model.psUsers = data;
              model.psLegalEntityId = data[0].LegalEntityId;
              model.psFirstName = data[0].PersonFirstName;
              model.psLastName = data[0].PersonLastName;
              model.psDriversLicense = data[0].DriversLicenseNumber;
              model.psDriversLicenseState = data[0].DriversLicenseState;
              model.psMiddleName = data[0].PersonMiddleName;
              model.psBirthDate = data[0].ShortDate;
              model.psEmail = data[0].Email;
              model.psHomePhone = data[0].PhoneNumber;
              model.psCity = data[0].City;
              model.psState = data[0].State;
              if (data[0].SSN4) {
                model.psSsn = '*****' + data[0].SSN4;
              }
              else {
                model.psSsn = '';
              }
              model.psContacts = data[0].ContactInfo;

              if (data[0].AddressData) {
                model.psAddressId = data[0].AddressData.AddressId;
                model.psAddress = data[0].AddressData.AddressLine1;
                model.psZipCode = data[0].AddressData.PostalCode;
              }

              $(".userListItem").click(function () {
                $(this).attr("id");
              });
              model.hideSearchResults = false;
              setTimeout(function () {
                var psUserItems = Polymer.dom(model.root).querySelectorAll('.psUserItem');
                $(psUserItems[0]).focus();
              }, 500);
            }
            else {
              model.displayError('No user was found that matches this application in the WHBPS system.  Please create a new user.');
            }
            model.processing = false;
          }).fail(function (response) {
            model.processing = false;
            model.displayError(getXhrErrorMessage(response));
          });
      },
      cleanPsUserArray: function () {
        if (this.psUsers === undefined || this.psUsers === null) return;

        var psUserCount = this.psUsers.length;

        for (var i = 0; i < psUserCount; i++) {
          this.pop("psUsers");
        }
      },
      closeUserDialog: function () {
        this.processing = false;
        $(this.$.matchPopup).modal('hide');
      },
      createPsUser: function () {
        $("#psUserAlertArea").removeClass();
        $("#psUserAlertArea").attr("hidden", "hidden");

        this.processing = true;
        var tranId = this.getGuid();
        var ssn = null;

        if (this.docType == 'Adoption' || this.docType == 'Combined') {
          ssn = this.ssn.replace(/-/g, '');
          if (ssn.length != 9 || isNaN(ssn)) {
            this.displayError("SSN must be 9 digits");
            return;
          }
        }

        var data = {
          TransactionId: tranId,
          LegalEntityReason: this.docType == "Purchase" ? "Other" : "Adoption",
          PersonLastName: this.applicantLastName,
          PersonFirstName: this.applicantFirstName,
          PersonMiddleName: this.applicantMiddleName,
          DateOfBirth: this.birthDate,
          SSN: ssn,
          DriversLicenseNumber: this.driversLicenseNumber,
          DriversLicenseState: this.driversLicenseState,
          ForceAddress: this.forceAddress,
          AddressInfo: [{
            AddressType: "Mailing",
            AddressLine1: this.applicantStreetAddress,
            City: this.applicantCity,
            State: this.applicantState,
            PostalCode: this.applicantZipCode,
          }],
          ContactInfo: [
            {
              ContactInfoType: "Email",
              ContactInfo: this.email
            },
            {
              ContactInfoType: "Phone",
              ContactInfo: this.applicantPhone
            }]
        };

        var model = this;
        $.post('/ctxapp/users/psuser/create', data)
          .done(function (leId) {
            model.psLegalEntityId = leId;
            model.legalEntityId = leId;
            $("#psUserAlertText").removeClass("alert-danger");

            //search for created user to get address ID
            $.get('ctxapp/users/psuser/' + leId)
              .done(function (user) {
                model.psAddressId = user.AddressData.AddressId;
                var success = model.linkLegalEntity('A new account has been created in WHBPS and the new WHBPS user has been linked to this application (' + model.psLegalEntityId + ')');
                if (success) {
                  model.fire('usermatched');
                  model.closeUserDialog();
                }
              })
              .fail(function (response) {
                model.displayError(getXhrErrorMessage(response));
              });
          })
          .fail(function (response) {
            var errorMsg = getXhrErrorMessage(response);
            if (response.status == 400 && errorMsg.includes('Address')) {
              if (confirm(errorMsg + "\nDo you wish to send it to WHBPS anyway?")) {
                model.forceAddress = true;
                model.createPsUser(); //recursion
              } else {
                model.processing = false;
              }
            }
            else {
              model.displayError(errorMsg);
            }
          });
        this.forceAddress = false;
      },
      displayError: function (message) {
        $("#psUserAlertText").text(message).addClass("alert-danger");
        $("#psUserAlertArea").removeAttr("hidden");
        this.processing = false;
      },
      getGuid: function () {
        function s4() {
          return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
        }
        return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
      },
      viewUser: function (e) {
        $("#psUserAlertArea").removeClass();
        $("#psUserAlertArea").attr("hidden", "hidden");

        if (e.model.item.SSN4) {
          this.psSsn = '*****' + e.model.item.SSN4;
        }
        else {
          this.psSsn = '';
        }
        this.psDriversLicense = e.model.item.DriversLicenseNumber;
        this.psDriversLicenseState = e.model.item.DriversLicenseState;
        this.psFirstName = e.model.item.PersonFirstName;
        this.psMiddleName = e.model.item.PersonMiddleName;
        this.psLastName = e.model.item.PersonLastName;
        this.psBirthDate = e.model.item.ShortDate;
        this.psAddressId = e.model.item.AddressData.AddressId;
        this.psAddress = e.model.item.AddressData.AddressLine1;
        this.psCity = e.model.item.AddressData.City;
        this.psState = e.model.item.AddressData.State;
        this.psZipCode = e.model.item.AddressData.PostalCode;
        this.psHomePhone = e.model.item.PhoneNumber;
        this.psEmail = e.model.item.Email;
        this.psLegalEntityId = e.model.item.LegalEntityId;
        this.psContacts = e.model.item.ContactInfo;
      },
      updatePsUser: function () {
        var model = this;

        if (!model.psLegalEntityId) {
          model.displayError("You must select a WHBPS User");
          return;
        }
        model.processing = true;
        setTimeout(function () {  //Timeout due to polymer not disabling buttons quick enough before work begins.
          var tranId = model.getGuid();
          var success = model.updateName(tranId);
          if (success) {
            success = model.updateAddress(tranId);
          }
          if (success) {
            success = model.updateContactInfo(tranId);
          }
          if (success && model.docType !== 'Incentive') {
            success = model.linkLegalEntity('The selected WHBPS user has been updated and linked to this application (' + model.psLegalEntityId + ')');
          }
          if (success) {
            model.fire('usermatched');
            model.closeUserDialog();
          }
          model.processing = false;
        }, 50);
      },
      updateName: function (tranId) {
        var success = true;
        var ssn = null;

        if (this.docType === 'Adoption' || this.docType === 'Combined' || this.docType === 'Incentive') {
          ssn = this.ssn.replace(/-/g, '');
          if (ssn.length != 9 || isNaN(ssn)) {
            this.displayError("SSN must be 9 digits");
            return;
          }
        }

        var updateData = {
          TransactionId: tranId,
          PersonFirstName: this.applicantFirstName ? this.applicantFirstName : this.psFirstName,
          PersonMiddleName: this.applicantMiddleName ? this.applicantMiddleName : this.psMiddleName,
          PersonLastName: this.applicantLastName ? this.applicantLastName : this.psLastName,
          SSN: ssn,
          DriversLicenseNumber: this.driversLicenseNumber ? this.driversLicenseNumber : this.psDriversLicense,
          DriversLicenseState: this.driversLicenseState ? this.driversLicenseState : this.psDriversLicenseState,
          DateOfBirth: this.birthDate ? this.birthDate : this.psBirthDate,
        };

        var model = this;
        $.ajax({
          url: 'ctxapp/users/psuser/' + model.psLegalEntityId + '/update',
          type: "POST",
          data: updateData,
          dataType: "json",
          async: false,
          success: function () {
          },
          error: function (response) {
            success = false;
            model.displayError(getXhrErrorMessage(response));
          }
        });

        return success;
      },
      updateAddress: function (tranId) {
        var model = this;
        var success = true;

        if (model.applicantStreetAddress != model.psAddress || model.applicantCity != model.psCity || model.applicantState != model.psState || model.applicantZipCode != model.psZipCode) {
          var addressData = {
            TransactionId: tranId,
            AddressType: 'Mailing',
            AddressLine1: model.applicantStreetAddress,
            City: model.applicantCity,
            State: model.applicantState,
            PostalCode: model.applicantZipCode,
            ForceAddress: model.forceAddress,
          };

          //insert new address - in case existing user has no address data in WHBPS
          if (model.psAddressId == null) {
            $.ajax({
              url: 'ctxapp/users/psuser/' + model.psLegalEntityId + '/address',
              type: "POST",
              data: addressData,
              dataType: "json",
              async: false,
              success: function (addressId) {
                model.psAddressId = addressId
              },
              error: function (response) {
                success = false;
                var errorMsg = getXhrErrorMessage(response);
                if (response.status == 400 && errorMsg.includes('Address')) {
                  if (confirm(errorMsg + "\nDo you wish to send it to WHBPS anyway?")) {
                    success = true;
                    model.forceAddress = true;
                    model.updateAddress(tranId); //recursion
                  }
                }
                else {
                  model.displayError(errorMsg);
                }
              }
            });
          }
          //update existing address
          else {
            $.ajax({
              url: 'ctxapp/users/psuser/' + model.psLegalEntityId + '/address/' + model.psAddressId + '/update',
              type: "POST",
              data: addressData,
              dataType: "json",
              async: false,
              success: function () {
              },
              error: function (response) {
                success = false;
                var errorMsg = getXhrErrorMessage(response);
                if (response.status == 400 && errorMsg.includes('Address')) {
                  if (confirm(errorMsg + "\nDo you wish to send it to WHBPS anyway?")) {
                    success = true;
                    model.forceAddress = true;
                    model.updateAddress(tranId); //recursion
                  }
                }
                else {
                  model.displayError(errorMsg);
                }
              }
            });
          }
        }

        this.forceAddress = false;
        return success;
      },
      updateContactInfo: function (tranId) {
        var model = this;
        var success = true;

        if (model.applicantPhone && model.applicantPhone != model.psHomePhone) {
          var updateData = {
            TransactionId: tranId,
            ContactInfoType: 'Phone',
            ContactInfo: model.applicantPhone,
          };

          var contactId;
          if (model.psContacts) {
            for (var i = 0; i < model.psContacts.length; i++) {
              if (model.psContacts[i].ContactInfoType == 'Phone') {
                contactId = model.psContacts[i].ContactId;
                break;
              }
            }
          }

          if (contactId) {
            success = model.updateContact(model.psLegalEntityId, contactId, updateData);
          }
          else {
            success = model.addContact(model.psLegalEntityId, updateData);
          }
        }

        if (success && model.email && model.email != model.psEmail) {
          var updateData = {
            TransactionId: tranId,
            ContactInfoType: 'Email',
            ContactInfo: model.email,
          };

          var contactId;
          if (model.psContacts) {
            for (var i = 0; i < model.psContacts.length; i++) {
              if (model.psContacts[i].ContactInfoType == 'Email') {
                contactId = model.psContacts[i].ContactId;
                break;
              }
            }
          }

          if (contactId) {
            success = model.updateContact(model.psLegalEntityId, contactId, updateData);
          }
          else {
            success = model.addContact(model.psLegalEntityId, updateData);
          }
        }

        return success;
      },
      addContact: function (legalEntityId, updateData) {
        var model = this;
        success = true;

        $.ajax({
          url: 'ctxapp/users/psuser/' + legalEntityId + '/contact',
          type: "POST",
          data: updateData,
          dataType: "json",
          async: false,
          success: function () {
          },
          error: function (response) {
            success = false;
            model.displayError(getXhrErrorMessage(response));
          }
        });

        return success;
      },
      updateContact: function (legalEntityId, contactId, updateData) {
        var model = this;
        success = true;

        $.ajax({
          url: 'ctxapp/users/psuser/' + legalEntityId + '/contact/' + contactId + '/update',
          type: "POST",
          data: updateData,
          dataType: "json",
          async: false,
          success: function () {
          },
          error: function (response) {
            success = false;
            model.displayError(getXhrErrorMessage(response));
          }
        });

        return success;
      },
      setPsUser: function (legalEntityId) {
        var model = this;

        $.ajax({
          url: 'ctxapp/users/psuser/' + legalEntityId,
          type: "GET",
          async: false,
          success: function (user) {
            model.psFirstName = user.PersonFirstName;
            model.psMiddleName = user.PersonMiddleName;
            model.psLastName = user.PersonLastName;
            if (user.SSN4) {
              model.psSsn = '*****' + user.SSN4;
            }
            else {
              model.psSsn = null;
            }
            model.psDriversLicense = user.DriversLicenseNumber;
            model.psDriversLicenseState = user.DriversLicenseState;
            model.psBirthDate = user.ShortDate;

            if (user.AddressData) {
              model.psAddressId = user.AddressData.AddressId;
              model.psAddress = user.AddressData.AddressLine1;
              model.psCity = user.AddressData.City;
              model.psState = user.AddressData.State;
              model.psZipCode = user.AddressData.PostalCode;
            }

            model.psEmail = user.Email;
            model.psHomePhone = user.PhoneNumber;

            model.psContacts = user.ContactInfo;
          },
          error: function (response) {
            model.displayError(getXhrErrorMessage(response));
          }
        });
      },
      linkLegalEntity: function (successMessage) {
        var model = this;
        var success = true;
        $("#psUserAlertArea").removeClass();

        var leData = {
          legalEntityId: model.psLegalEntityId,
          AddressInfo: [{
            AddressId: model.psAddressId,
          }],
        };

        $.ajax({
          url: 'ctxapp/documents/adoption-sale/legal-entity/' + model.applicationId,
          type: "POST",
          data: leData,
          dataType: "json",
          async: false,
          success: function () {
            $("#psUserAlertText").removeClass("alert-danger");
            $("#psUserAlertText").text(successMessage).addClass("alert-success");
            $("#psUserAlertArea").removeAttr("hidden");
          },
          error: function (response) {
            success = false;
            model.displayError(getXhrErrorMessage(response));
          }
        });

        return success;
      },
      disableCreateUser: function (processing, docType) {
        return processing || docType === 'Incentive';
      },
    });
  </script>
</dom-module></div>