<?php
// Copyright 1999-2017. Parallels IP Holdings GmbH. All Rights Reserved.

$defaultText = ' (' . $this->defaultText . ')';

?>
<div class='form-row'>
    <div class='field-name'>
        <?php echo $this->element->getLabel(); ?>
    </div>
    <div class='field-value'>
        <div class='combobox'><!-- + combobox-open + dropup -->
            <input type='text' class='combobox-input input-text <?php if ($this->element->getAttrib('isLongLength')): ?>f-big-size<?php endif; ?>' <?php echo $this->element->getAttrib('disabled'); ?> value='<?php echo $this->value; ?>' id='<?php echo $this->element->getId(); ?>'>
            <?php echo $this->defaultElementContent; ?>
            <?php echo $this->realElementContent; ?>
            <?php echo $this->options; ?>
            <input type='hidden' value='<?=$defaultText?>' id='<?=$this->element->getId()?>-default-text' />
            </div>
        <?php echo $this->restoreToDefaultElementContent; ?>
        <?php echo $this->description; ?>
        <span class='field-errors'></span>
    </div>

</div>
<script type='text/javascript'>
    //<![CDATA[
    Jsw.onReady(function() {
        var mainElement = $(<?php echo $this->jsEscape($this->element->getId()); ?>);
        var defaultElement = $(mainElement.id + '-default');
        var resetElement = $(mainElement.id + '-reset-to-default');
        var realValueElement = $(mainElement.id + '-real');
        var defaultText = '<?=$defaultText?>';

        if (!mainElement || !defaultElement || !resetElement || !realValueElement) {
            return;
        }

        var tempValue = mainElement.value.replace(defaultText, '');
        if (tempValue == defaultElement.value) {
            resetElement.hide();
        }

        resetElement.observe('click', function(event){
            event.preventDefault();
            if (mainElement.disabled) {
                return;
            }
            mainElement.value = defaultElement.value;
            realValueElement.value = defaultElement.value;
            if (mainElement.value == defaultElement.value && '' != defaultElement.value) {
                mainElement.value = mainElement.value + defaultText;
            }
            resetElement.hide();
        });

        mainElement.observe('change', function(event){
            realValueElement.value = this.value;
            if (mainElement.value == defaultElement.value) {
                resetElement.hide();
            } else {
                resetElement.show();
            }
        });

        var editableSelectButton = $(mainElement.id + '-button');
        if (editableSelectButton) {

            var optionList = editableSelectButton.up().next(0);
            optionList.select('li').each(function(item) {
                item.observe('mousedown', function(event){
                    var comboBox = this.up().up();
                    comboBox.toggleClassName('combobox-open');
                    realValueElement.value = this.readAttribute('data-value');
                    mainElement.value = realValueElement.value;
                    return false;
                });
                return false;
            });

            editableSelectButton.observe('click', function(event){
                Event.stop(event);
                if (mainElement.disabled) {
                    return;
                }
                var combobox = this.up().up();
                $$('.combobox').each(function(item) {
                    if (combobox == item) {
                        combobox.toggleClassName('combobox-open');
                        mainElement.focus();
                    } else {
                        item.removeClassName('combobox-open');
                    }
                });
            });
        }

        var cleanupTextValue = function(){
            if (-1 < this.value.indexOf(defaultText)) {
                this.value = this.value.replace(defaultText, '');
            }
        };
        mainElement.observe('focusin', cleanupTextValue);
        mainElement.observe('focus', cleanupTextValue);

        mainElement.observe('blur', function(event){
            if (editableSelectButton) {
                optionList.up().removeClassName('combobox-open');

            }
            if (this.value == defaultElement.value) {
                this.value = this.value + defaultText;
                resetElement.hide();
            } else {
                resetElement.show();
            }
        });
    });
    //]]>
</script>