var icon_picker_container = 'IconPickerContainer';
var delayed_close = null;

function updateDynamicIcon(input_icon, input_icon_color, new_name, new_img)
{
	var color_pattern = /color=[^&]*/i;
	var icon = document.getElementById('DynamicIcon');
	var color = document.getElementById(input_icon_color).value;
	
	if ( new_name ) {
		document.getElementById(input_icon).value = new_name;
	}
	
	if ( new_img ) {
		icon.src = new_img.src;
	}

	// Update new color
	icon.src = icon.src.replace(color_pattern, 'color='+color);
	
	closeIconPicker();
}

// ICON PICKER

function toggleIconPicker()
{
	if ( document.getElementById(icon_picker_container).style.display == 'block' ) {
		closeIconPicker();
	}
	else {
		openIconPicker();
	}
}

function closeIconPicker()
{
	document.getElementById(icon_picker_container).style.display = 'none';
}

function openIconPicker()
{
	document.getElementById(icon_picker_container).style.display = 'block';
	document.getElementById(icon_picker_container).focus();
}

function closeIconPickerDelayed()
{
	delayed_close = setTimeout('closeIconPicker();', 500);
}

function cancelIconPickerDelayedClose()
{
	if ( delayed_close != null ) {
		clearTimeout(delayed_close);
	}
}


// COLOR PICKER
var ColorPicker = null;
var color_picker_visible = false;
var color_picker_container = 'ColorPickerContainer';
var color_picker_hider = 'HideColorPickerContainer';

function destroyColorPicker()
{
	closeColorPicker();
	ColorPicker = null;
}

function initColorPicker(valElement, styElement)
{
	if ( !styElement ) {
		styElement = '';
	}
	
	//destroyColorPicker();
	if ( null == ColorPicker ) {
		ColorPicker = new jscolor.color(document.getElementById(valElement),
			{
			valueElement: valElement,
			styleElement: styElement,
			pickerMode: 'HVS',
			pickerBorder: 0,
			pickerFace: 0,
			pickerInset: 0,
			hsv: [0, 1, 1]
			});
	}
}

function toggleColorPicker(fieldid)
{
	if ( color_picker_visible ) {
		closeColorPicker();
	}
	else {
		openColorPicker(fieldid);
	}
}

function closeColorPicker()
{
	document.getElementById(color_picker_hider).style.display = 'none';
	document.getElementById(color_picker_container).style.display = 'none';
	if ( null != ColorPicker ) {
		ColorPicker.hidePicker();
	}
	color_picker_visible = false;
}

function openColorPicker(fieldid)
{
	document.getElementById(color_picker_hider).style.display = 'block';
	document.getElementById(color_picker_container).style.display = 'block';
	document.getElementById(color_picker_container).focus();
	if ( null == ColorPicker ) {
		initColorPicker(fieldid);
	}
	ColorPicker.showPicker();
	color_picker_visible = true;
}