var themeStyler = {
	vars: {},
	create: function(style_data) {

		this.initColors();

		//

		if (style_data) {

			this.replayData(style_data);

		}

		//

		this.initSaveData();

		this.initStylerCustomize();

	},
	initStylerCustomize: function() {

		if (localStorage.colorsCustomize) {

			jQuery("#theme-styler-link").hide();

			jQuery("#theme-styler").show();

		}

		jQuery("#theme-styler-link-href").on('click', function() {

			jQuery("#theme-styler-link").hide();

			jQuery("#theme-styler").show();

			localStorage.colorsCustomize = '1';

			return false;

		});

		jQuery("#theme-styler-top-hide").on('click', function() {

			jQuery("#theme-styler-link").show();

			jQuery("#theme-styler").hide();

			localStorage.removeItem('colorsCustomize');

			return false;

		});

	},
	replayData: function(style_data) {

		if (style_data && style_data.data) {

			for (i in style_data.data) {

				jQuery("#theme-styler [name=" + i + "]").minicolors('value', style_data.data[i]);

			}

		}

	},
	initColors: function() {

		jQuery("#theme-styler .input-color").each(function() {

			themeStyler.vars[this.name] = this.value;

		});

		//

		this.preview_delay_func = null;

		jQuery(".input-color").minicolors({
			change: function(hex) {

				themeStyler.vars[this.name] = hex;

				//

				clearTimeout(themeStyler.preview_delay_func);

				themeStyler.preview_delay_func = setTimeout(function() {

					themeStyler.previewStyle();

				}, 1000);

			}
		});

	},
	previewStyle: function() {

		var css_template = document.getElementById('theme-styler-css').innerHTML;

		for (i in themeStyler.vars) {

			var color = this._hexToRGB(this.vars[i]);

			if (!color) {
				continue;
			}

			css_template = css_template.replace(new RegExp('\{\{var\:' + i + '\}\}', 'g'), color.r + ',' + color.g + ',' + color.b);

		}

		jQuery("#css-theme-styler").html(css_template);

	},
	//

	initSaveData: function() {

		jQuery("#theme-styler-top-save").on('click', function() {

			jQuery("#theme-styler-top-save").text('saving...');

			themeStyler.saveData(function() {

				jQuery("#theme-styler-top-save").text('save');

			});

			return false;

		});

		jQuery("#theme-styler-top-hide").on('click', function() {

			return false;

		});

	},
	saveData: function(_func) {

		var ajax_url = app_url.ajax + '?action=hotel_theme_styler_save';

		$.ajax({
			url: ajax_url,
			type: 'POST',
			data: {
				saveData: encodeURI(this.exportData())
			}
		}).done(function() {

			_func();

		});

	},
	exportData: function() {

		var css_string = jQuery("#css-theme-styler").html(),
				css_data = {};

		//

		jQuery("#theme-styler .input-color").each(function() {

			css_data[this.name] = this.value;

		});

		return JSON.stringify({
			css: css_string,
			data: css_data
		});

	},
	//

	_componentToHex: function(c) {
		var hex = c.toString(16);
		return hex.length == 1 ? "0" + hex : hex;
	},
	_hexToRGB: function(hex) {
		var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
		return result ? {
			r: parseInt(result[1], 16),
			g: parseInt(result[2], 16),
			b: parseInt(result[3], 16)
		} : null;
	}


};