var _busyLoading = false;
var names_new;
var slider1;
var slider2;
var names;
var names_sliders;
var presets;

function doOnLoad() {
	names = {
		color_of_border: 			"dhtmlxColorPicker1",
		color_of_light: 				"dhtmlxColorPicker2",
		color_of_text: 				"dhtmlxColorPicker3",
		color_of_window: 			"dhtmlxColorPicker4",
		color_of_bg: 					"dhtmlxColorPicker5",
		color_of_menu_sel: 		"dhtmlxColorPicker6",
		color_of_bg2: 				"dhtmlxColorPicker7",
		color_of_border_of_sel: "dhtmlxColorPicker8",
		color_of_content: 			"dhtmlxColorPicker9",
		color_of_text_head: 		"dhtmlxColorPicker10",
		color_of_text_grid: 		"dhtmlxColorPicker11",
		color_of_text_cal: 			"dhtmlxColorPicker12",
		color_bg_web: 				"dhtmlxColorPicker13",
		color_header_web: 		"dhtmlxColorPicker14",
		color_sel_border_web: 	"dhtmlxColorPicker15",
		color_header_text_web:"dhtmlxColorPicker16",
		color_content_text_web:"dhtmlxColorPicker17",
		color_grid_tree_text_web:"dhtmlxColorPicker18",
		color_border_web: 		"dhtmlxColorPicker19",
		color_content_web: 		"dhtmlxColorPicker20",
		color_sel_web: 				"dhtmlxColorPicker21",
		color_menu_text_web: 	"dhtmlxColorPicker22",
		color_select_text_web:	"dhtmlxColorPicker23",
		color_menu_bg_web:		"dhtmlxColorPicker24"
	};
	
	names_sliders = {
		intensity_toolbar: 	'slider1',
		intensity_tabbar:	'slider2'
	}

	presets = {
		classic: 	['autumn', 'blue_sky', 'clouds', 'rose', 'salad', 'sky', 'sea', 'yellow_sand'],
		web: 		['blue', 'deep_blue', 'grass', 'violet', 'rose', 'summer', 'ocean', 'oak', 'brown']
	};

	slider1 = new dhtmlxSlider("sliderBox1", 83, "arrow", false, 0, 100, 100, 2);
	slider1.setImagePath("codebase/imgs/");
	slider1.attachEvent("onChange", my_func_slider1);
	slider1.init();

	slider2 = new dhtmlxSlider("sliderBox2", 83, "arrow", false, 0, 100, 100, 2);
	slider2.setImagePath("codebase/imgs/");
	slider2.attachEvent("onChange", my_func_slider2);
	slider2.init();

	changeScheme(document.getElementById('scheme_list'));
	navClick(document.getElementById('nav_main'));
}

function loader() {
	for (var i = 0; i<names.length; i++) {
		var c = window["CP"+i] = dhtmlXColorPickerInput(names[i]);
		c.setImagePath("codebase/imgs/");
		c.setColor(colors[i]);
		c.init();
		c.container.onclick=stop_click;
	}
}

function stop_click(e) {
	(e||event).cancelBubble = true;
	return false;
}

dhtmlxEvent(window,"click",function(e) {
	var t = (e?e.target:event.srcElement);
	if ((t.tagName !="INPUT")&&(t.tagName != "DIV")){
		close_pickers();
	}
});

function close_pickers() {
	for (var i in names) {
		if (window[names[i]]) {
			window[names[i]].hide();
		}
	}
}

function submitter() {
	document.getElementById('intensity_toolbar').value = slider1.getValue();
	document.getElementById('intensity_tabbar').value = slider2.getValue();
}

function button_click(elem) {
	var id = elem.id;
	if (id == 'button_apply') {
		document.getElementById('btn').setAttribute("name", "config_save");
		submitter();
		document.forms[0].submit();
	} else {
		if (id == 'button_download') {
			document.getElementById('btn').setAttribute("name", "config_download");
			submitter();
			document.forms[0].submit();
		}
	}
}


function color_opacity(color, pos) {
	var colorR = parseInt(color.substr(1, 2), 16);
	var colorG = parseInt(color.substr(3, 2), 16);
	var colorB = parseInt(color.substr(5, 2), 16);
	colorR = Math.round(colorR+(255-colorR)*pos/100);
	colorG = Math.round(colorG+(255-colorG)*pos/100);
	colorB = Math.round(colorB+(255-colorB)*pos/100);
	return '#' + Number(colorR).toString(16) + Number(colorG).toString(16) + Number(colorB).toString(16);		
}


function loadPresetParams(skinName) {
	var els = document.getElementsByTagName('input');
	for (var i = 0; i < els.length; i++) {
		if (els[i].getAttribute('reset')) {
			els[i].checked = false;
		}
	}
	for (var name in window[skinName]) {
		var type = window[skinName][name].type;
		var value = window[skinName][name].value;
		switch (type) {
			case 'colorpicker':
				if (names[name] != undefined) {
					var id = names[name];
					document.getElementById(id).value = value;
					document.getElementById(id + "_div").style.background = value;
					window[id].setColor(value);
				}
				break;
			case 'checkbox':
				if (value == 'on') {
					document.getElementById(name).checked = true;
				} else {
					document.getElementById(name).checked = false;
				}
				break;
			case 'slider':
				if (names_sliders[name] != undefined) {
					var id = names_sliders[name];
					var slider_int = value;
					window[id].setValue(slider_int);
					document.getElementById(id + "_input").value = slider_int;
					slider_int = 100 - slider_int;
					color = dhtmlxColorPicker6.getSelectedColor();
					color = color_opacity(color[0], slider_int);
					document.getElementById(id + '_div').style.background = color;
				}
				break;
			case 'select':
			case 'input':
				var el = document.getElementById(name);
				if (el) {
					el.value = value;
				}
				break;
		}
	}
}

function set_default_skin(elem) {
	/*if (_busyLoading == true) {
		var skinName = document.getElementById("config_preset").value;
		elem.value = skinName;
		return false;
	}*/
	_busyLoading = true;
	var skinName = elem.options[elem.selectedIndex].value;
	if (document.getElementById('changes').value == '0') {
		set_default_skin_helper(skinName);
	} else {
		if (confirm('All your changes will be lost. Are you sure?')) {
			set_default_skin_helper(skinName);
		}
	}
}

function set_default_skin_helper(skinName) {
	loadPresetParams(skinName);
	document.getElementById('btn').setAttribute("name", "config_save");
	var schemeName = document.getElementById('scheme_list').options[document.getElementById('scheme_list').selectedIndex].value;
	document.getElementById("dhtmlx_iframe").src = "http://apps.dhtmlx.com/skinBuilder_v30/presets/" + schemeName +  "/" + skinName + "/sample.html";
	document.getElementById("config_preset").value = skinName;
	document.getElementById('changes').value = '0';
}

function input_opacity_setted(elem, slider, div_id) {
	var inp_value = elem.value;
	inp_value = parseInt(inp_value, 10);
	if (isNaN(inp_value)) {
		inp_value = 100;
	}
	if (inp_value > 100) {
		inp_value = 100;
	}
	if (inp_value < 0) {
		inp_value = 0;
	}
	elem.value = inp_value;
	window[slider].setValue(inp_value);
	var color = dhtmlxColorPicker6.getSelectedColor();
	color = color_opacity(color[0], 100 - inp_value);
	document.getElementById(div_id).style.background = color;
}

function navHover(btn) {
	if (!btn.on) {
		switch (btn.id) {
			case 'nav_main':
				btn.className = 'nav_main_over';
				break;
			case 'nav_sel':
				btn.className = 'nav_sel_over';
				break;
			case 'nav_text':
				btn.className = 'nav_text_over';
				break;
		}
	}
}

function navOut(btn) {
	if (!btn.on) {
		switch (btn.id) {
			case 'nav_main':
				btn.className = 'nav_main';
				break;
			case 'nav_sel':
				btn.className = 'nav_sel';
				break;
			case 'nav_text':
				btn.className = 'nav_text';
				break;
		}
	}
}

function navClick(btn) {
	close_pickers();
	switch (btn.id) {
		case 'nav_main':
			document.getElementById('colors_main').style.display = 'block';
			document.getElementById('colors_sel').style.display = 'none';
			document.getElementById('colors_text').style.display = 'none';
			document.getElementById('nav_sel').className = 'nav_sel';
			document.getElementById('nav_text').className = 'nav_text';
			document.getElementById('nav_sel').on = false;
			document.getElementById('nav_text').on = false;
			btn.className = 'nav_main_on';
			break;
		case 'nav_sel':
			document.getElementById('colors_main').style.display = 'none';
			document.getElementById('colors_sel').style.display = 'block';
			document.getElementById('colors_text').style.display = 'none';
			document.getElementById('nav_main').className = 'nav_main';
			document.getElementById('nav_text').className = 'nav_text';
			document.getElementById('nav_main').on = false;
			document.getElementById('nav_text').on = false;
			btn.className = 'nav_sel_on';
			break;
		case 'nav_text':
			document.getElementById('colors_main').style.display = 'none';
			document.getElementById('colors_sel').style.display = 'none';
			document.getElementById('colors_text').style.display = 'block';
			document.getElementById('nav_main').className = 'nav_main';
			document.getElementById('nav_sel').className = 'nav_sel';
			document.getElementById('nav_main').on = false;
			document.getElementById('nav_sel').on = false;
			btn.className = 'nav_text_on';
			break;
	}
	btn.on = true;
}

function my_func_slider1(pos, slider) {
	document.getElementById("slider1_input").value = pos;
	pos = 100 - pos;
	var color = dhtmlxColorPicker6.getSelectedColor();
	color = color_opacity(color[0], pos);
	document.getElementById('slider1_div').style.background = color;
	document.getElementById('changes').value = '1';
}

function my_func_slider2(pos, slider) {
	document.getElementById("slider2_input").value = pos;
	pos = 100 - pos;
	var color = dhtmlxColorPicker6.getSelectedColor();
	color = color_opacity(color[0], pos);
	document.getElementById('slider2_div').style.background = color;
	document.getElementById('changes').value = '1';
}

function changeScheme(obj) {
	if (((document.getElementById('changes').value == '1')&&(confirm('All your changes will be lost. Are you sure?')))||(document.getElementById('changes').value == '0')) {
		document.getElementById('changes').value = '0';
		var scheme = obj.options[obj.selectedIndex].value;
		document.getElementById('current_scheme').value = scheme;
		var els = document.getElementsByTagName('*');
		for (var i = 0; i < els.length; i++) {
			if (els[i].getAttribute('scheme')) {
				var sch = els[i].getAttribute('scheme');
				sch = sch.split(',');
				els[i].style.display = 'none';
				for (var j = 0; j < sch.length; j++) {
					if (sch[j] == scheme) {
						els[i].style.display = 'block';
						break;
					}
				}
			}
		}
		var presetsList = document.getElementById('presets_list');
		while (presetsList.options.length > 0) {
			presetsList.remove(0);
		}
		var str = '';
		for (var i = 0; i < presets[scheme].length; i++) {
			var opt=document.createElement('option');
			var value = presets[scheme][i];
			opt.value = value;
			value = value.substr(0, 1).toUpperCase() + value.substr(1);
			var reg = /_/g;
			value = value.replace(reg, " ");
			opt.text = value;
			addSelectOption(presetsList, opt, null);
		}
		if (scheme == 'classic') {
			presetsList.selectedIndex = 1;
		} else {
			presetsList.selectedIndex = 0;
		}
		set_default_skin(presetsList);
	} else {
		var scheme = document.getElementById('current_scheme').value;
		for (var i = 0; i < obj.options.length; i++) {
			if (obj.options[i].value == scheme) {
				obj.selectedIndex = i;
			}
		}
		return false;
	}
}

function addSelectOption(select, option, position) {
	try {
		select.add(option);
	} catch(ex) {
		select.add(option, position);
	}
}

function colorInputed(id) {
	var color = document.getElementById(id).value;
	var reg = /#[0-9a-fA-F]{6}/;
	var correct_color = reg.test(color);
	if (correct_color == true) {
		window[id].setColor(color);
		document.getElementById(id + '_div').style.backgroundColor = color;
		document.getElementById('changes').value = '1';
	}
}

function colorBlured(id) {
	var color = window[id].getSelectedColor();
	document.getElementById(id).value = color[0];
}