var uww_template = [
	'<div class="weather-widget-header">',
		'<div id= "uww_field_header_name" class="weather-widget-header__city"></div>',
		'<div class="weather-widget-header__temp">',
			'<img id="uww_field_header_image" src="" alt="">',
			'<span id="uww_field_header_temp"></span>',
		'</div>',
	'</div>',
	'<div class="weather-widget">',
		'<div class="weather-widget__wrapper">',
			'<ul class="weather-widget__list">',
				'<li class="weather-widget__item">',
					'<div class="weather-widget__today">',
						'Погода сегодня в ',
						'<span id="uww_field_date"></span>',
					'</div>',
					'<a href="javascript:void(0);" class="weather-widget__location">',
						'<span id="uww_field_name" class="weather-widget__name"></span>',
						'<i class="fa fa-cog"></i>',
					'</a>',
					'<div class="weather-widget__conditions">',
						'<div class="weather-widget__temp">',
							'<div id="uww_field_temp" class="weather-widget__number"></div>',
							'<div class="weather-widget__icon">',
								'<img id="uww_field_image" src="" class="" />',
							'</div>',
						'</div>',
						'<div id="uww_field_desc" class="weather-widget__desc"></div>',
						'<div class="weather-widget__info">',
							'<div class="weather-widget__feeling">',
								'Ощущается как',
								'<span id="uww_field_feeling"></span>',
							'</div>',
							'<div class="weather-widget__min">',
								'Мин.',
								'<span id="uww_field_min"></span>',
							'</div>',
							'<div class="weather-widget__max">',
								'Макс.',
								'<span id="uww_field_max"></span>',
							'</div>',
						'</div>',
					'</div>',
					'<a href="#" id="uww_field_detail" class="weather-widget__details">',
						'Подробнее',
						'<i class="fa fa-chevron-circle-right"></i>',
					'</a>',
				'</li>',
				'<li class="weather-widget__item">',
					'<div class="weather-widget__title">Настройки</div>',
					'<a href="javascript:void(0);" class="weather-widget__close">',
						'<i class="fa fa-times"></i>',
					'</a>',
					'<form action="" method="post" class="weather-widget__newCity newCity">',
						'<label class="newCity__label">Введите город</label>',
						'<input type="text" class="newCity__text tranparentInput" placeholder="Введите город" data-location="" autocomplete="off">',
						'<ul class="weather-widget__searchResults" style="display: none;"></ul>',
						'<input type="button" class="newCity__cancel tranparentInput" value="Отмена">',
						'<input type="hidden" name="_csrf_token" value="Xd-U4s7XLbeuJ6M5ZrXPeSIdqWN8TszpqwvjEMzH-5g">',
						'<input type="button" class="newCity__submit tranparentInput" value="ОК">',
					'</form>',
				'</li>',
			'</ul>',
		'</div>',
	'</div>'].join('');

var style = document.createElement("style");
style.appendChild(document.createTextNode(""));
document.head.appendChild(style);
style.sheet.insertRule(".weather-widget-container {width:180px;height:34px;overflow:hidden;position:absolute;text-align:right;}", 0);


var uww_lang = 'ru';
var uww_styles_href = "http://pogoda.unian.net/styles/widget.css";
var uww_styles_link = document.createElement('link');
uww_styles_link.setAttribute('rel', 'stylesheet');
uww_styles_link.setAttribute('href', uww_styles_href);
document.getElementsByTagName('head')[0].appendChild(uww_styles_link);

var uww_container = document.getElementById('unian_weather_widget');

if (uww_container) {
	uww_container.innerHTML = htmlDecode(uww_template);
	fillWidget();
}


function htmlDecode(input){
	var e = document.createElement('div');
	e.innerHTML = input;
	return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
}

function fillWidget() {
	fillField('date', "14:45");
	fillField('header_name', "Сомервилль");
	fillField('header_temp', "+8" + "°");
	fillFieldAttribute('header_image', 'src', "http://pogoda.unian.net/images/icons/n100.svg");
	fillField('name', "Сомервилль");
	fillField('temp', "+8" + "°");
		fillFieldAttribute('image', 'src', "http://pogoda.unian.net/images/icons/n100.svg");
	fillField('desc', "Практически безоблачно");
	fillField('feeling', "+8" + "°");
	fillField('min', "0" + "°");
	fillField('max', "+15" + "°");

	fillFieldAttribute('detail', 'href', "http://pogoda.unian.net/");
}
function fillField(field_id, field_val) {
	var prefix = 'uww_field_';
	var element = document.getElementById(prefix + field_id);
	if (element) {
		element.innerHTML = field_val;
	}
}
function fillFieldAttribute(field_id, att_name, att_value) {
	var prefix = 'uww_field_';
	var element = document.getElementById(prefix + field_id);
	if (element) {
		element.setAttribute(att_name, att_value);
	}
}

if(!!window.jQuery) {
	$(function(){
		$('.weather-widget-container')
			.on('focus', '.newCity__text', function() {
				$(this).val('');
				$('.weather-widget-container').addClass('hovered');
			})
			.on('focusout', '.newCity__text', function() {
				$('.weather-widget-container').removeClass('hovered');
			})
			.on('keyup', '.newCity__text', function () {
				var query = $(this).val();
				if(query.length !== 0) {
					$('.newCity__cancel').attr('disabled', false);
				} else {
					$('.newCity__cancel').attr('disabled', true);
				}
				if (query.length >= 3 ) {
					searchUnianWidgetLocations(query);
				}
			})
			.on('click', 'ul.weather-widget__searchResults li', function () {
				var result_text = $(this).text();
				var result_id = $(this).data('location');
				$('.newCity__text').val(result_text).attr('data-location', result_id);

				$('ul.weather-widget__searchResults').css('display', 'none').html('');
			})
			.on('click', '.newCity__submit', function () {
				var location_id = $('.newCity__text').data('location');
				changeUnianWidgetDefaultLocation(location_id);
			})
			.on('click', '.weather-widget__location', function(e) {
				e.preventDefault();
				$('.weather-widget__list').css('top', '-100%');
			})
			.on('click', '.weather-widget__close', function(e) {
				e.preventDefault();
				$('.weather-widget__list').css('top', '0');
			})
			.on('click', '.newCity__cancel', function() {
				$('.newCity__text').val('').attr('data-location', '');
				$(this).attr('disabled', true);
			})
		;
	});

	function changeUnianWidgetDefaultLocation(location_id) {
		if (!location_id) {
			return;
		}
		var spinner = $(document.createElement('i'), {class:'fa fa-fw fa-2x fa-spinner fa-spin weather-widget__loader'});
		spinner.insertAfter($('.newCity'));
		$.ajax({
			url: 'http://pogoda.unian.net/load',
			type: 'get',
			xhrFields: {
				withCredentials: true
			},
			dataType: 'json',
			data: {location_id: location_id, type: 'json', lang: uww_lang },
			success: function (data) {
				spinner.remove();
				$('.weather-widget__list li:first').replaceWith(data.html);
				fillField('header_name', data.name);
				fillField('header_temp', data.temp + "°");
				fillFieldAttribute('header_image', 'src', data.image);
				$('.weather-widget__list').css('top', '0');
			},
			error: function (data) {
				spinner.remove();
				console.error(data);
			}
		});
	}

	function searchUnianWidgetLocations(query) {
		$.ajax({
			url: 'http://pogoda.unian.net/search',
			type: 'get',
			data: {query: query, locations_only:1, type: 'json'},
			success: function (data) {
				if ( data.locations.length ) {
					showUnianWidgetSearchResults(data.locations);
				}
			}
		});
	}

	function showUnianWidgetSearchResults(locations) {
		var container = $('ul.weather-widget__searchResults');
		container.html('');
		for (var i in locations) {
			var location = locations[i];
			var field_name = uww_lang == 'ru' ? 'nameRus' : 'nameUkr';
			var result_item = $(document.createElement('li'), {title: location[field_name]}).attr('data-location', location.id).text(location[field_name]);

			result_item.appendTo(container);
		}
		container.css('display', 'block');
	}
}