<script>
$(function(){
    /* Video main page urban */
    var $viewMainPage=$('#map_on_main_page_urban, #main_page_background_type');
    if($viewMainPage[0]){

        var COptions = function() {

            var $this=this;

            this.hideCheckbox = function(el){
                if(el[0]){
					el.closest('.form-group').hide();
					el.closest('.bl_label').hide();
				}
            }
            this.showCheckbox = function(el){
                if(el[0]){
					el.closest('.form-group').show();
					el.closest('.bl_label').show();
				}
            }
            this.hideSelectPrev = function(el){
                if(el[0]){
					el.closest('.form-group').hide();
					if (el.prev('.label_desc')[0]) {
						el.hide().prev('.label_desc').hide()
								.prev('label').hide().end().end().next('a').hide();
					} else {
						el.hide().prev('label').hide().end().next('a').hide();
					}
				}
            }
            this.showSelectPrev = function(el){
                if(el[0]){
					el.closest('.form-group').show();
					if (el.prev('.label_desc')[0]) {
						el.show().prev('.label_desc').show()
								.prev('label').show().end().end().next('a').show();
					} else {
						el.show().prev('label').show().end().next('a').show();
					}
				}
            }
            //Select Text
            this.hideInput = function(el){
                if(el[0]){
					el.closest('.form-group').hide();
                    if (el.prev('.label_desc')[0]) {
                        el.hide().prev('.label_desc').hide().prev('label').hide();
                    } else {
                        el.hide().prev('label').hide();
                    }
                }
            }
            this.showInput = function(el){
                if(el[0]){
					el.closest('.form-group').show();
                    if (el.prev('.label_desc')[0]) {
                        el.show().prev('.label_desc').show().prev('label').show();
                    } else {
                        el.show().prev('label').show();
                    }
                }
            }
            this.hideColor = function(el){
				el.closest('.form-group').hide();
                el.hide();
            }
            this.showColor = function(el){
				el.closest('.form-group').show();
                el.show();
            }
            this.combine = function(groupOptions, groups){
                var obj={};
                groups.forEach(function(key) {
                    obj=$.extend(obj, groupOptions[key]);
                });
                return obj;
            }
            this.prepare = function(options, type){
                for (var el in options) {
                    var fn=(type||'hide')+options[el];
                    $this[fn]($(el));
                }
            }
            this.initOptions = function(groupOptions, notAllowOptions,type){
                cOptions.prepare(notAllowOptions[type]);
                cOptions.prepare(groupOptions[type], 'show');
            }

            return this;
        }

        var cOptions = new COptions();

        var $code=$('#input_main_page_urban_video_code, #input_main_page_video_code'),
            $mute=$('#option_main_page_urban_video_mute, #option_main_page_video_mute'),
            $volume=$('#main_page_urban_video_volume, #main_page_video_volume'),
            $videoOnce=$('#option_main_page_urban_video_show_video_once, #option_main_page_video_show_video_once'),
            $image=$('#image_main_page_urban, #main_page_image'),
            $imageImpact=$('#image_main_page_impact'),
            $imageRatio=$('#input_image_main_page_compression_ratio_urban, #input_main_page_image_compression_ratio'),
            $imageUpload=$('#upload_image_main_page_urban, #main_page_image_upload'),
            $imageBg=$('.field_background_color_urban, .block_bg_image'),
            type=$viewMainPage.val(),
            $animated=$('#main_page_urban_animated'),
            $videoStopOnJoin=$('#option_main_page_video_stop_on_join_page');
            //$mapsService=$('#maps_service');

        var groupOptions = {
            video : {
                '#input_main_page_urban_video_code':'Input',
                '#option_main_page_urban_video_mute':'Checkbox',
                '#main_page_urban_video_volume':'Input',
                '#option_main_page_urban_video_show_video_once':'Checkbox',
                '#option_main_page_video_stop_on_join_page':'Checkbox',
           } ,
           color: {
                '.field_background_color_urban':'Color',
           },
           image : {
                '#image_main_page_urban':'SelectPrev',
                '#input_image_main_page_compression_ratio_urban':'Input',
                '#upload_image_main_page_urban':'Input',
           },
           animated: {
                '#main_page_urban_animated':'SelectPrev',
           },
           map : {
                '#maps_service':'SelectPrev',
           }
        }
        var notAllowOptions = {
            map: cOptions.combine(groupOptions, ['video', 'color', 'image', 'animated']),
        };

        //Test чтоб переделать потом а то не удобно уже становится
        if (type=='map') {
            cOptions.initOptions(groupOptions, notAllowOptions, type);
        }

        if(type=='animated'){
            hideInput($code);
            hideCheckbox($mute);
            hideInput($volume);
            hideCheckbox($videoOnce);
            hideCheckbox($videoStopOnJoin);

            hideColor($imageBg);
            hideSelectPrev($image);
            hideInput($imageRatio);
            hideInput($imageUpload);
            //hideSelectPrev($mapsService);
        }else if(type=='image'){
            hideInput($code);
            hideCheckbox($mute);
            hideInput($volume);
            hideCheckbox($videoOnce);
            hideSelectPrev($animated);
            hideCheckbox($videoStopOnJoin);
         }else if(type=='random_image'){
            hideInput($code);
            hideCheckbox($mute);
            hideInput($volume);
            hideCheckbox($videoOnce);
            hideSelectPrev($animated);
            hideCheckbox($videoStopOnJoin);
        } else {
            hideColor($imageBg);
            hideSelectPrev($image);
            hideSelectPrev($imageImpact);
            hideInput($imageRatio);
            hideInput($imageUpload);
            hideSelectPrev($animated);
        }

        $viewMainPage.change(function(){
            if (this.value=='map') {
                //Test чтоб переделать потом а то не удобно уже становится
                cOptions.initOptions(groupOptions, notAllowOptions, this.value);
            }else if(this.value=='video'){
                showInput($code);
                showCheckbox($mute);
                showInput($volume);
                showCheckbox($videoOnce);
                showCheckbox($videoStopOnJoin);

                hideColor($imageBg);
                hideSelectPrev($image);
                hideSelectPrev($imageImpact);
                hideInput($imageRatio);
                hideInput($imageUpload);

                hideSelectPrev($animated);
                //hideSelectPrev($mapsService);
            }else if (this.value=='image'){
                showColor($imageBg);
                showSelectPrev($image);
                showSelectPrev($imageImpact);
                showInput($imageRatio);
                showInput($imageUpload);

                hideInput($code);
                hideCheckbox($mute);
                hideInput($volume);
                hideCheckbox($videoOnce);

                hideSelectPrev($animated);
                hideCheckbox($videoStopOnJoin);
                //hideSelectPrev($mapsService);
            }else if (this.value=='random_image'){
                showColor($imageBg);
                showSelectPrev($image);
                showSelectPrev($imageImpact);
                showInput($imageRatio);
                showInput($imageUpload);

                hideInput($code);
                hideCheckbox($mute);
                hideInput($volume);
                hideCheckbox($videoOnce);

                hideSelectPrev($animated);
                hideCheckbox($videoStopOnJoin);
                //hideSelectPrev($mapsService);
            }else{
                hideInput($code);
                hideCheckbox($mute);
                hideInput($volume);
                hideCheckbox($videoOnce);

                hideColor($imageBg);
                hideSelectPrev($image);
                hideInput($imageRatio);
                hideInput($imageUpload);
                showSelectPrev($animated);
                hideCheckbox($videoStopOnJoin);
                //hideSelectPrev($mapsService);
            }
			removeErrorAll();
        })
    }
    /* Video main page urban */
    /* App */
    $('#option_app_ios_active, #option_app_android_active').click(function(){
        var $el=$(this),
            $url=~this.id.indexOf('ios')?$('#input_app_ios_url'):$('#input_app_android_url');
        if($el.prop('checked')&&!trim($url.val())){
            $el.prop('checked', false).iCheck('update');
            $url.focus();
            alertCustom('{j_url_application_is_empty}');
        }
    })
    $('#input_app_ios_url, #input_app_android_url').on('change propertychange input', function(){
        var $chk=~this.id.indexOf('ios')?$('#option_app_ios_active'):$('#option_app_android_active');
        if(!trim($(this).val()))$chk.prop('checked', false).iCheck('update');
    })
    /* App */

    /* Translator */
    if ($('#option_autotranslator_enabled').prop('checked')) {
        showInput($('#input_autotranslator_key'));
        showCheckbox($('#option_autotranslator_show_original'));
    } else {
        hideInput($('#input_autotranslator_key'));
        hideCheckbox($('#option_autotranslator_show_original'));
    }

    $('#option_autotranslator_enabled').click(function(){
        var $el=$(this);
        if($el.prop('checked')){
            showInput($('#input_autotranslator_key'));
            showCheckbox($('#option_autotranslator_show_original'));
        } else {
            hideInput($('#input_autotranslator_key'));
            hideCheckbox($('#option_autotranslator_show_original'));
        }
    });


    if($('#watermark_type').val()=='text'){
        showInput($('#input_logo'));
        showInput($('#input_logo_size'));
        hideSelectPrev($('#watermark_position'));
        $('#watermark_params').hide();
    } else {
        hideInput($('#input_logo'));
        hideInput($('#input_logo_size'));
        showSelectPrev($('#watermark_position'));
        $('#watermark_params').show();
    }

    $('#watermark_type').click(function(){
        var $el=$(this);
        if($el.val()=='text'){
            showInput($('#input_logo'));
            showInput($('#input_logo_size'));
            hideSelectPrev($('#watermark_position'));
            $('#watermark_params').hide();
        } else {
            hideInput($('#input_logo'));
            hideInput($('#input_logo_size'));
            showSelectPrev($('#watermark_position'));
            $('#watermark_params').show();
        }
    });

    /* Translator */
    var map_service = $('#maps_service').val();
    if (map_service == 'Bing') {
        showInput($('#input_bing_apikey'));
        hideInput($('#input_google_apikey'));
    } else {
        showInput($('#input_google_apikey'));
        hideInput($('#input_bing_apikey'));
    }
    $('#maps_service').change(function() {
        var map_service = $('#maps_service').val();
        if (map_service == 'Bing') {
            showInput($('#input_bing_apikey'));
            hideInput($('#input_google_apikey'));
        } else {
            showInput($('#input_google_apikey'));
            hideInput($('#input_bing_apikey'));
        }
    });

    var locationTitle = $("#option_default_title_with_location_urban_location").prop("checked");
    if(locationTitle){
        showSelectPrev($("#title_location_urban"));
    } else {
        hideSelectPrev($("#title_location_urban"));
    }
    $("#option_default_title_with_location_urban_location, #option_default_title_with_location_urban_title").change(function() {
        var locationTitle = $("#option_default_title_with_location_urban_location").prop("checked");
        if(locationTitle){
            showSelectPrev($("#title_location_urban"));
        } else {
            hideSelectPrev($("#title_location_urban"));
        }
    });

    /* WebRtc */
    $('#type_media_chat').change(function(){
        var val=$(this).val(),
            sel={0:'#input_webrtc_camera_resolution_width_min', 1:'#input_webrtc_camera_resolution_width_ideal', 2:'#input_webrtc_camera_resolution_width_max',
                 3:'#input_webrtc_framerate_min', 4:'#input_webrtc_framerate_ideal', 5:'#input_webrtc_framerate_max'};

        for (var k in sel) {
            if(val == 'webrtc'){
                showInput($(sel[k]));
            } else {
                hideInput($(sel[k]));
            }
        }
    }).change();
    /* WebRtc */

    var selGdprParams=$('#label_gdpr_cookie_consent_popup_width, #input_gdpr_cookie_consent_popup_width,'+
                        '#label_gdpr_cookie_consent_popup_unit, #gdpr_cookie_consent_popup_unit,'+
                        '#label_gdpr_cookie_consent_popup_position, #gdpr_cookie_consent_popup_position');
    $('#gdpr_cookie_consent_popup_theme').change(function(){
        selGdprParams[this.value=='normal'?'hide':'show']();
    }).change();

    $('#option_header_short_show').change(function(){
        listPeopleFeaturedFieldsSwitchDisplay();
    }).change();

    $('#info_block_leayout').change(function(){
        listPeopleFeaturedFieldsSwitchDisplay();
    }).change();

    $('#list_people_featured_style').change(function(){
        var val = $(this).val();
        if(val === 'circle' || !isListPeopleFeaturedAvailable()) {
            hideInput($('#input_list_people_featured_number'));
        } else {
            showInput($('#input_list_people_featured_number'));
        }
    }).change();

});

function isListPeopleFeaturedAvailable()
{
    return ($('#info_block_leayout').val() !== 'info_block_central' && !$('#option_header_short_show').prop('checked'))
}
function listPeopleFeaturedFieldsSwitchDisplay()
{
    if(isListPeopleFeaturedAvailable()) {
            showCheckbox($('#option_list_people_featured'));
            showInput($('#list_people_featured_style'));
            showColor($('#list_people_featured_border_color'));
        } else {
            hideCheckbox($('#option_list_people_featured'));
            hideInput($('#list_people_featured_style'));
            hideColor($('#list_people_featured_border_color'));
        }
        $('#list_people_featured_style').change();
}

function hideCheckbox(el){
    if(el[0]){
		el.closest('.form-group').hide();
		el.closest('.bl_label').hide();
	}
}
function showCheckbox(el){
    if(el[0]){
		el.closest('.form-group').show();
		el.closest('.bl_label').show();
	}
}

function hideSelectPrev(el){
	if(el[0]){
		el.closest('.form-group').hide();
		if (el.prev('.label_desc')[0]) {
			el.hide().prev('.label_desc').hide()
					 .prev('label').hide().end().end().next('a').hide();
		} else {
			el.hide().prev('label').hide().end().next('a').hide();
		}
	}
}

function showSelectPrev(el){
	if(el[0]){
		el.closest('.form-group').show();
		if (el.prev('.label_desc')[0]) {
			 el.show().prev('.label_desc').show()
					  .prev('label').show().end().end().next('a').show();
		} else {
			el.show().prev('label').show().end().next('a').show();
		}
	}
}

function hideSelectPrev1(el){
    if(el[0]){
		el.closest('.form-group').hide();
		el.hide().prev('label').hide().end().next('a').hide();
	}
}
function showSelectPrev1(el){
    if(el[0]){
		el.closest('.form-group').show();
		el.show().prev('label').show().end().next('a').show();
	}
}

//Select Text
function hideInput(el){
    if(el[0]){
		el.closest('.form-group').hide();
        if (el.prev('.label_desc')[0]) {
            el.hide().prev('.label_desc').hide().prev('label').hide();
        } else {
            el.hide().prev('label').hide();
        }
    }
}
function showInput(el){
    if(el[0]){
		el.closest('.form-group').show();
        if (el.prev('.label_desc')[0]) {
            el.show().prev('.label_desc').show().prev('label').show();
        } else {
            el.show().prev('label').show();
        }
    }
}

function hideColor(el){
	el.closest('.form-group').hide();
    //el.hide();
}
function showColor(el){
	el.closest('.form-group').show();
    //el.show();
}
</script>

<!-- begin_item -->
<!-- begin_item_group_options_start -->
<div class="group_decor_arrow group_arrow_{item_group_options_init}"></div>
<div class="group_options group_{item_group_options_init}">
    <div class="decor_top"></div>
<!-- end_item_group_options_start -->

<fieldset class="form-group form-group-{option}">
<!-- begin_item_section -->
<!-- begin_yes_save -->

<fieldset class="form-group mb-3">
	<div class="wrap_button">
		<button class="btn btn-primary btn_submit" type="submit">{l_save}</button>
		<div class="button_submit_instruction">{l_or_use_ctrl_s}</div>
	</div>
</fieldset>
<!-- end_yes_save -->
<h2 class="mb-1">{section_name}</h2>
<!-- end_item_section -->

<!-- begin_item_title -->
<label id="label_{option}">{label}:</label>
<!-- end_item_title -->

<!-- begin_item_label -->
<div class="label">{value}</div>
<div style="clear: both;"></div>
<!-- end_item_label -->

<!-- begin_item_text -->
<div class="label_desc">{label_desc}</div>
<input class="form-control" <!-- begin_item_text_max_length -->maxlength="{item_text_max_length}"<!-- end_item_text_max_length --> id="input_{option}" type="text" name="option[{option}]" value="{value}">
<!-- end_item_text -->

<!-- begin_item_number -->
<div id="label_desc_{option}" class="label_desc">{label_desc}</div>
<input id="input_{option}" class="form-control" type="number" min="1" max="{item_number_max}" name="option[{option}]" value="{value}">
<!-- end_item_number -->

<!-- begin_item_textarea -->
<textarea class="form-control config_textarea" name="option[{option}]">{value}</textarea>
<!-- end_item_textarea -->

<!-- begin_item_password -->
<input type="password" class="form-control" name="option[{option}]">
<!-- end_item_password -->

<!-- begin_item_file -->

<!--<input id="{option}" name="{option}" type="file"/>-->

<div id="{option}" class="upload-single-file">
	<div class="label_desc">{label_desc}</div>
	<div id="dpz-upload-single-icon" data-name="{option}" class="dropzone dropzone-area dpz-upload-single-icon dpz-upload-{option}">
		<input id="dpz-file{option}" class="image-data-url" type="hidden" name="{option}" value="">
	</div>
</div>

<!-- begin_item_upload_image_js -->
<script type="text/javascript">
$(function(){
    $("#{option}").change(function(){
        var home_page = $("#option_restore_{option}");
        if(home_page.is(':checked')) {
            home_page.removeAttr('checked');
        }
    });
});
</script>
<!-- end_item_upload_image_js -->
<!-- end_item_file -->

<!-- begin_item_checkbox -->
<div id="bl_label_{option}" class="bl_label custom-control custom-switch">
	<input type="hidden" name="option[{option}]" value="N">
	<input class="custom-control-input i_checkbox" type="checkbox" id="option_{option}" name="option[{option}]" value="Y" {checked} >
	<label class="custom-control-label" for="option_{option}">{label}</label>
    <div class="label_desc label_desc_checkbox">{label_desc}</div>
</div>
<!-- begin_recaptcha_enabled -->
<script>
$(function(){
    $("#option_recaptcha_enabled").change(function(){
        var checked=$(this).prop('checked'),
            siteKey=$.trim($('#input_recaptcha_site_key').val()),
            secretKey=$.trim($('#input_recaptcha_secret_key').val());
        if((!siteKey||!secretKey)&&checked){
            $(this).prop('checked',false).iCheck('update');
            alertCustom('{j_recaptcha_field_must_be_filled}');
        }
    });
});
</script>
<div class="label_desc">{l_recaptcha_get_the_keys}</div>
<!-- end_recaptcha_enabled -->
<!-- end_item_checkbox -->

<!-- begin_item_selectbox -->
<div class="label_desc">{label_desc}</div>
<select id="{option}" class="input form-control <!-- begin_item_background_class -->input_background_config<!-- end_item_background_class -->" name="option[{option}]">{selectbox_options}</select>
<!-- begin_info_timezone -->
<script type="text/javascript">
    $('#{option}').change(function(){
        var zone = $(this).val();
        $.post('{url_administration}ajax.php', {cmd: 'timezone', zone: zone}, function(data) {
            $('#info_timezone').html(data);
        });
    });
</script>
<div id="info_timezone">{info_timezone}</div>
<!-- end_info_timezone -->
<!-- begin_item_schema_color_js -->
<script type="text/javascript">
var colors = {
    <!-- begin_item_color_value -->
    '{title_color}': {upper: '{value_upper}', lower: '{value_lower}'},
    <!-- end_item_color_value -->
}

<!-- begin_item_color_scheme_by_config -->
var colors = {item_color_scheme_by_config};
<!-- end_item_color_scheme_by_config -->

$(function(){
    $("#{option}").change(function(){
         var key = $(this).val();
         var fieldType = '';
         if (key != 'custom') {
            $("#upper_header_color_oryx").spectrum("set", colors[key]['upper']);
            $("#lower_header_color_oryx").spectrum("set", colors[key]['lower']);
            for(index in colors[key]) {
                var itemSelector = '[name="option[' + index + ']"]';
                if(in_array_key('type', colors[key][index])) {
                    fieldType = colors[key][index]['type'];
                    if(fieldType == 'checkbox') {
                        $(itemSelector).prop('checked', colors[key][index]['value'] == 'Y' ? true : false);
                    } else if (fieldType == 'select') {
                        $(itemSelector).val(colors[key][index]['value']);
                    }
                } else {
                    $(itemSelector).spectrum("set", colors[key][index]);
                }
            }
         }
    });
});
</script>
<!-- end_item_schema_color_js -->

<!-- begin_item_background_preview_js -->
<div id="{option}_preview_carousel" class="carousel slide mt-2" data-ride="false" data-interval="false">
	<ol class="carousel-indicators">
		<!-- begin_item_background_preview_li -->
        <li data-target="#{option}_preview_carousel" data-slide-to="{item_background_preview_li}" <!-- begin_item_background_preview_li_active -->class="active"<!-- end_item_background_preview_li_active -->></li>
		<!-- end_item_background_preview_li -->
	</ol>
	<div class="carousel-inner" role="listbox">
		<!-- begin_item_background_preview_img -->
        <div data-value="{item_background_preview_value}" class="carousel-item <!-- begin_item_background_preview_img_active -->active<!-- end_item_background_preview_img_active -->">
            <img class="d-block w-100" src="{item_background_preview_img}" alt="">
        </div>
		<!-- end_item_background_preview_img -->
	</div>
	<a class="carousel-control-prev" href="#{option}_preview_carousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
	</a>
	<a class="carousel-control-next" href="#{option}_preview_carousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
	</a>
</div>

<script type="text/javascript">
	var $car_{option}=$('#{option}_preview_carousel');

	$car_{option}.carousel({
		interval: false,
		ride: false
	}).on('slid.bs.carousel', function(e){
		var val=$car_{option}.find('.carousel-item.active').data('value');
		$('#{option}').val(val).prop('selected', true);
	})

    if ($('#{option}').val() != '{item_background_img_current}') {
        $('#{option}').val('{item_background_img_default}').prop('selected', true);
    }

	var $carItems_{option}=$car_{option}.find('.carousel-item');
    $('#{option}').change(function(){
        var $el=$car_{option}.find('.carousel-item[data-value="'+$(this).val()+'"]');
		$car_{option}.carousel($carItems_{option}.index($el));
    })

</script>
<!-- end_item_background_preview_js -->

<!-- begin_item_background_js -->
<span class="gallery_{option}">
	<a target="_blank" id="{option}_lightbox" class="{option}_lightbox_background background_img_config" data-size="480x360" title="{l_view}" href="">
		<img id="{option}-thumbnail" src="" style="display:none;"/>
		<svg  viewBox="0 0 24 24">
			<path clip-rule="evenodd" d="M12,4C4.063,4-0.012,12-0.012,12S3.063,20,12,20    c8.093,0,12.011-7.969,12.011-7.969S20.062,4,12,4z M12.018,17c-2.902,0-5-2.188-5-5c0-2.813,2.098-5,5-5c2.902,0,5,2.187,5,5    C17.018,14.812,14.92,17,12.018,17z M12.018,9c-1.658,0.003-3,1.393-3,3c0,1.606,1.342,3,3,3c1.658,0,3-1.395,3-3    C15.018,10.392,13.676,8.997,12.018,9z" fill-rule="evenodd"/>
		</svg>
	</a>
</span>


<script type="text/javascript">
$(function(){
	initPhotoSwipeFromDOM('.gallery_{option}');

    if ($('#{option}').val() != '{item_background_img_current}') {
        $('#{option}').val('{item_background_img_default}').prop('selected', true);
    }

    $('#{option}').change(function(){
        var urlToFileDir = '{item_background_js_url_to_file_dir}';
        var file = $(this).val();
        var emptyAvailable = {emptyAvailable};
        if ($("#{option}").is(":visible")){
            if (file != 'None.png' && file != 'no_image'){
                if(urlToFileDir) {
                    $('#{option}_lightbox').attr('href', urlToFileDir + file);
					$('#{option}-thumbnail').attr('src', urlToFileDir + file);
                }
                $("#{option}_lightbox").show();
            } else {
                $("#{option}_lightbox").hide();
            }
        }

        if(!urlToFileDir) {
            $.post('{url_administration}ajax.php', {cmd: '{ajax_cmd}', file: file, data_size: 1}, function(res) {
				res=getDataAjax(res, 'data');
				var url=res.src;
                if (url != 'no_file') {
					if (res.w && res.h) {
						var w=res.w, h=res.h,
							wW=$win.width()-80;
						if (res.w > wW) {
							var d=wW/w;
							w=wW;
							h = Math.round(h * d, 1);
						}
						$('#{option}_lightbox').attr('data-size', w+'x'+h);
					}
					$('#{option}_lightbox').attr('href', url);
					$('#{option}-thumbnail').attr('src', url);
				}
            });
        }

    }).change();
});
</script>
<!-- end_item_background_js -->
<!-- end_item_selectbox -->

<!-- begin_item_radio -->
<div id="label_{option}_{value}" class="bl_label skin skin-flat">
	<input id="option_{option}_{value}" class="form-check-inline form-check class_{option}" type="radio" name="option[{option}]" value="{value}" {checked} >
	<label for="option_{option}_{value}">{label}</label>
</div>
<!-- end_item_radio -->
<!-- begin_item_color -->
<script type="text/javascript">
$( document ).ready(function() {
$("#{option}").spectrum({
    color: "{value}",
    cancelText: "{l_cancel}",
    chooseText: "{l_ok}",
	transparentText: "{l_transparent}",
    showInput: true,
    <!-- begin_item_color_allow_empty -->
	preferredFormat: "hex",
    allowEmpty: true,
    <!-- end_item_color_allow_empty -->
    change: function() {
        if('{option}' != 'push_notifications_android_icon_color') {
            $("#color_scheme_oryx, #color_scheme_impact").val('custom');
        }
    },
});
});
</script>
<div class="bl_label field_{option} color_choose">
	<div class="color_choose_sp">
        <input style="opacity:0;" name="option[{option}]" type="text" id="{option}"  value="{value}"/>
    </div>
    <label>
		{label}
	</label>
    <div class="label_desc label_desc_color">{label_desc}</div>
</div>
<!-- end_item_color -->

<!-- begin_item_select_multiple -->
<!-- begin_item_select_multiple_item -->
<input class="input_{option} form-control" type="text" name="option[{option}][]" value="{value}">
<!-- end_item_select_multiple_item -->
<a id="add_{option}" data-inp=".input_{option}" href="#" class="link_add_multiple">+ {l_add}</a>
<script>
    $(function(){
        $('#add_{option}').click(function(){
            var $el=$(this), $inp=$($el.data('inp'));
            $inp.first().clone(true).val('').insertAfter($inp.last()).focus();
            /*if($inp.length==4){
                $el.hide();
            }*/
            return false;
        })
    })
</script>
<!-- end_item_select_multiple -->


<!-- begin_item_separator -->
<div class="options_separator">&nbsp;</div>
<!-- end_item_separator -->
<!-- begin_item_br -->
<div class="options_br">&nbsp;</div>
<!-- end_item_br -->

    <!-- begin_watermark_params -->
    <script>

    var watermarkWidth='{watermark_width}'*1;
    var watermarkHeight='{watermark_height}'*1;

		$(function() {
			_dzSetReaderOnLoad('logo', function(){
				$('#update').html('<span>{j_upload}</span>');
			})
		})

		function sendWatermarkImage(){
            var fd = new FormData();
			if(!trim($('#dpz-filelogo').val())){
                return false;
            }

            var newHeight=$("#watermark_height").val();
            var newWidth=$("#watermark_width").val();
            fd.append('cmd', 'update_watermark');
            //fd.append('logo', $('#watermark_file')[0].files[0]);
			fd.append('logo_data', $('#dpz-filelogo').val());
            fd.append('watermark_width', newWidth);
            fd.append('watermark_height', newHeight);
            $.ajax({
              type: 'POST',
              url: 'options.php',
              data: fd,
              processData: false,
              contentType: false,
              dataType: "json",
			  beforeSend: function(data) {
					$('.btn_disabled_wt').prop('disabled', true);
					$("#update").addChildrenLoader();
			  },
              success: function(data) {
				  $('.btn_disabled_wt').prop('disabled', false);
				  $("#update").removeChildrenLoader();
                  if(data.url){
                      $("#watermark_output img").attr('src',data.url+'?'+Math.random());
                      $("#watermark_width").val(data.width);
                      $("#watermark_height").val(data.height);
                      $("#update").html('<span>{j_update_size}</span>');
                  }else if(data.msg){
                      alertCustom(data.msg);
                  }
              },
              error: function(data) {

                console.log(data);
              }
            });
        }

        function deleteWatermark()
        {
            var fd = new FormData();
            fd.append('cmd', 'delete_watermark');
            $.ajax({
              type: 'POST',
              url: 'options.php',
              data: fd,
              processData: false,
              contentType: false,
              dataType: "json",
              success: function(data) {
                  if(data.url){
                      $("#watermark_output img").attr('src',data.url);
                      $("#watermark_width").val('');
                      $("#watermark_height").val('');
                      $("#update").html('<span>{j_upload}</span>');
                  }

                console.log(data);
              },
              error: function(data) {

                console.log(data);
              }
            });

        }

		function confirmCustomWatermark(){
			confirmCustom('{j_are_you_sure}', function(){
				deleteWatermark();
			})
		}

    </script>
    <div id="watermark_params">
        <div id="{block}_output" class="block_logo block_logo_watermark">
            <!-- begin_watermark_image -->
            <img src="{watermark_img}?rand={rand}" alt=""/>
            <!-- end_watermark_image -->
        </div>


		<div class="row">
			<fieldset class="form-group col-md-6">
				<label>{l_width}<span>({l_px})</span></label>
				<input class="form-control" id="watermark_width" type="text" maxlength="3" name="{block}_width" value="{watermark_width}">
			</fieldset>
			<fieldset class="form-group col-md-6">
				<label>{l_height}<span>({l_px})</span></label>
				<input class="form-control" id="watermark_height" type="text" maxlength="3" name="{block}_height" value="{watermark_height}">
			</fieldset>
		</div>

        <!--<fieldset class="form-group">
            <input class="upload" id="watermark_file" type="file" name="logo"/>
        </fieldset>-->
		<fieldset class="form-group upload-single-file">
			<div id="dpz-upload-single-icon" data-name="logo" class="dropzone dropzone-area dpz-upload-single-icon dpz-upload-single-logo">
				<input id="dpz-filelogo" class="image-data-url" type="hidden" name="logo_data" value="">
			</div>
		</fieldset>


        <fieldset class="form-group">
			<button id="update" class="btn btn-primary btn_disabled_wt" onClick="sendWatermarkImage();return false;" type="submit" >{l_upload}</button>
			<!-- begin_delete -->
			<button id="delete" class="btn btn-secondary ml-1 btn_disabled_wt" onClick="confirmCustomWatermark(); return false;">{l_delete}</button>
            <input type="hidden" name="is_delete_watermark" id="is_delete_watermark" value="0">
			<!-- end_delete -->
		</fieldset>
    </div>
    <!-- end_watermark_params -->
	</fieldset>

	<!-- begin_item_color_scheme_options_start -->
        <div class="color_scheme_options_start {color_scheme_options_start_class}">
            <img class="icon_color_scheme_options" src="{url_tmpl_administration}images/edit_color_scheme_options.gif">
            <a href="#" class="edit_color_scheme_options {edit_color_scheme_options_class}">{l_edit_color_scheme_options}</a>
            <a href="#" class="hide_color_scheme_options {hide_color_scheme_options_class}">{l_hide_color_scheme_options}</a>
        </div>
        <div class="color_scheme_options {item_color_scheme_options_start_class}">
            <script>
                $(function(){
                    $('.edit_color_scheme_options').click(function(){
                        $('.color_scheme_options').show();
                        $('.edit_color_scheme_options').hide();
                        $('.hide_color_scheme_options').show();
                        $('.color_scheme_options_start').addClass('color_scheme_options_hide').removeClass('color_scheme_options_edit');
                        setColorSchemeOptionsHide('N');
                        return false;
                    });

                    $('.hide_color_scheme_options').click(function(){
                        $('.color_scheme_options').hide();
                        $('.edit_color_scheme_options').show();
                        $('.hide_color_scheme_options').hide();
                        $('.color_scheme_options_start').addClass('color_scheme_options_edit').removeClass('color_scheme_options_hide');
                        setColorSchemeOptionsHide('Y');
                        return false;
                    });

                    $('.icon_color_scheme_options').click(function(){
                        if($('.edit_color_scheme_options').is(':visible')) {
                            $('.edit_color_scheme_options').click();
                        } else {
                            $('.hide_color_scheme_options').click();
                        }
                    });

                    function setColorSchemeOptionsHide(value)
                    {
                        $.get('ajax.php?cmd=color_scheme_options_hide_impact&value=' + value);
                    }
                });
            </script>
            <div class="decor_top"></div>
    <!-- end_item_color_scheme_options_start -->
    <!-- begin_item_color_scheme_options_end -->
            <div class="decor_bottom"></div>
        </div>
    <!-- end_item_color_scheme_options_end -->


<!-- begin_item_group_options_end -->
<script>
    {item_group_options_init}();
</script>
    <div class="decor_bottom"></div>
</div>
<!-- end_item_group_options_end -->

<!-- end_item -->