var color_picker_div = false;
var color_picker_form_field = false;
var rebackfunc = false;
var color_picker = '';

var slider_handle_image = imgpath+'/slider_handle.gif';
var slider_handle_image_obj = false;
var sliderObjectArray = new Array();
var slider_counter = 0;
var slideInProgress = false;
var handle_start_x;
var event_start_x;
var currentSliderIndex;

function showColorPicker(inputObj,formField,reback){
	if(!color_picker_div){
		color_picker_div = document.createElement('DIV');
		color_picker_div.className = 'menu';
		color_picker_div.style.cssText = 'display:none;z-index:4000;position:absolute;width:250px;padding-bottom:1px;';
		document.body.appendChild(color_picker_div);
		createTopRow(color_picker_div);			
		var contentDiv = document.createElement('DIV');
		contentDiv.id = 'color_picker_content';
		color_picker_div.appendChild(contentDiv);			
		createAllColorDiv(contentDiv);
		createBottomRow(color_picker_div);
	}
	if (typeof formField == 'string') {
		formField = getObj(formField);
	}
	if (formField.value && formField.value.match(/\#[0-9A-F]{6}/ig)){
		document.getElementById('color_code').value= formField.value.toUpperCase();
		document.getElementById('color_code').onchange();
	} else {
		document.getElementById('color_code').value='#000000';
		document.getElementById('color_code').onchange();
	}
	color_picker_div.style.left = findPosX(inputObj) + ietruebody().scrollLeft + (is_ie ? 4:0) + 'px';
	color_picker_div.style.top = findPosY(inputObj) + ietruebody().scrollTop + inputObj.offsetHeight + (is_ie ? 4:0) + 'px';
	if(color_picker_div.style.display=='none') color_picker_div.style.display='block'; else color_picker_div.style.display='none';
	color_picker_form_field = formField;
	rebackfunc = reback;
}
function createTopRow(inputObj){
	var tabDiv = document.createElement('DIV');
	tabDiv.style.left = '0px';
	tabDiv.style.position = 'absolute';
	tabDiv.style.cssText = 'height:14px;padding-left:4px;';
	var closeButton = document.createElement('DIV');
	closeButton.style.cssText = 'position: absolute; right: 1px; top: 1px; cursor: pointer; width: 18px; height: 18px;background:url('+imgpath+'/close.gif) no-repeat';
	closeButton.onclick = function(){color_picker_div.style.display='none';};
	tabDiv.appendChild(closeButton);
	inputObj.appendChild(tabDiv);
}

var fast_color = new Array('#FF0000','#008000','#0000FF','#FFA500','#FF00FF','#FF1493','#FFFF00','#D8BFD8','#FFC0CB','#FFE4E1','#00FFFF','#808080','#008080','#6B8E23','#4B0082','#000000');
function createBottomRow(inputObj){
	var tabDiv = document.createElement('DIV');
	tabDiv.style.left = '0px';
	tabDiv.style.position = 'absolute';
	tabDiv.style.cssText = 'height:16px;padding-left:4px;';
	for (var no =0 ; no<fast_color.length ; no++) {
		var div = document.createElement('DIV');
		var color = fast_color[no];
		div.style.cssText = 'background-color:'+color+';margin-left:1px;margin-bottom:1px;float:left;border:1px solid #000;cursor:pointer;width: 12px;height: 12px;';
		div.title = fast_color[no];	
		div.onclick = chooseColor;
		tabDiv.appendChild(div);
	}
	inputObj.appendChild(tabDiv);
}

function chooseColor(){
	color_picker_form_field.value = this.title;
	color_picker = this.title;
	color_picker_div.style.display='none';
	goBackFunction();
}

function goBackFunction(){
	if (rebackfunc && typeof rebackfunc == 'function') {
		rebackfunc();	
	}
}

function createAllColorDiv(inputObj){
	var allColorDiv = document.createElement('DIV');
	allColorDiv.style.paddingLeft = '3px';
	allColorDiv.style.paddingTop = '5px';
	allColorDiv.style.paddingBottom = '5px';
	inputObj.appendChild(allColorDiv);
	
	var labelDiv = document.createElement('DIV');
	labelDiv.style.cssText = 'width:15px;height:20px;float:left;font-size:11px;font-weight:bold;';
	labelDiv.innerHTML = 'R';
	allColorDiv.appendChild(labelDiv);
	
	var innerDiv = document.createElement('DIV');
	innerDiv.style.cssText = 'width:175px;height:20px;float:left;';
	innerDiv.id = 'sliderRedColor';
	allColorDiv.appendChild(innerDiv);
	
	var innerDivInput = document.createElement('DIV');
	innerDivInput.style.cssText = 'width:45px;height:20px;float:left;';
	
	var input = document.createElement('INPUT');
	input.id = 'red_color';
	input.className = 'input';
	input.maxlength = 3;
	input.style.width = '45px';
	input.style.fontSize = '11px';
	input.name = 'redColor';
	input.value = 0;
	
	innerDivInput.appendChild(input);
	allColorDiv.appendChild(innerDivInput);

	var labelDiv = document.createElement('DIV');
	labelDiv.style.cssText = 'width:15px;height:20px;float:left;font-size:11px;font-weight:bold;';
	labelDiv.innerHTML = 'G';
	allColorDiv.appendChild(labelDiv);	
			
	var innerDiv = document.createElement('DIV');
	innerDiv.style.cssText = 'width:175px;height:20px;float:left;';
	innerDiv.id = 'sliderGreenColor';		
	allColorDiv.appendChild(innerDiv);		
	
	var innerDivInput = document.createElement('DIV');
	innerDivInput.style.cssText = 'width:45px;height:20px;float:left;';
	
	var input = document.createElement('INPUT');
	input.id = 'green_color';
	input.className = 'input';
	input.maxlength = 3;
	input.style.width = '45px';
	input.style.fontSize = '11px';
	input.name = 'GreenColor';
	input.value = 0;
	
	innerDivInput.appendChild(input);
	allColorDiv.appendChild(innerDivInput);

	var labelDiv = document.createElement('DIV');
	labelDiv.style.cssText = 'width:15px;height:20px;float:left;font-size:11px;font-weight:bold;';
	labelDiv.innerHTML = 'B';
	allColorDiv.appendChild(labelDiv);			
	var innerDiv = document.createElement('DIV');
	innerDiv.style.cssText = 'width:175px;height:20px;float:left;';
	innerDiv.id = 'sliderBlueColor';
	allColorDiv.appendChild(innerDiv);
	
	var innerDivInput = document.createElement('DIV');
	innerDivInput.style.cssText = 'width:45px;height:20px;float:left;';
	
	var input = document.createElement('INPUT');
	input.id = 'blue_color';
	input.className = 'input';
	input.maxlength = 3;
	input.style.width = '45px';
	input.style.fontSize = '11px';
	input.name = 'BlueColor';
	input.value = 0;
	
	innerDivInput.appendChild(input);
	allColorDiv.appendChild(innerDivInput);

	var colorPreview = document.createElement('DIV');
	colorPreview.style.cssText = 'width:186px;margin-right:2px;margin-top:1px;border:1px solid #CCC;float:left;cursor:pointer;height:20px;';
	colorPreview.id = 'colorPreview';
	colorPreview.style.backgroundColor = '#000000';
	colorPreview.innerHTML = '<span></span>';
	colorPreview.title = 'µã»÷Ñ¡ÔñÑÕÉ«';
	allColorDiv.appendChild(colorPreview);
	colorPreview.onclick = chooseColorSlider;
	
	var colorCodeDiv = document.createElement('DIV');
	colorCodeDiv.style.cssText = 'width:50px;height:20px;float:left;';
	var input = document.createElement('INPUT');
	input.id = 'color_code';
	input.className = 'input';
	
	colorCodeDiv.appendChild(input);
	input.maxLength = 7;
	input.style.fontSize = '11px';
	input.style.width = '45px';
	input.value = '#000000';
	input.onchange = setPreviewColorFromTxt;
	input.onblur = setPreviewColorFromTxt;

	allColorDiv.appendChild(colorCodeDiv);
	var clearingDiv = document.createElement('DIV');
	clearingDiv.style.clear = 'both';
	allColorDiv.appendChild(clearingDiv);
	form_widget_amount_slider('sliderRedColor',document.getElementById('red_color'),170,0,255,"setColorByRGB()");
	form_widget_amount_slider('sliderGreenColor',document.getElementById('green_color'),170,0,255,"setColorByRGB()");
	form_widget_amount_slider('sliderBlueColor',document.getElementById('blue_color'),170,0,255,"setColorByRGB()");
}

function form_widget_amount_slider(targetElId,formTarget,width,min,max,onchangeAction){
	if(!slider_handle_image_obj){
		getImageSliderHeight();
	}
	slider_counter = slider_counter +1;
	sliderObjectArray[slider_counter] = new Array();
	sliderObjectArray[slider_counter] = {"width":width-9,"min":min,"max":max,"formTarget":formTarget,"onchangeAction":onchangeAction};
	formTarget.setAttribute('sliderIndex',slider_counter);

	var parentObj = document.createElement('DIV');
	parentObj.style.width = width + 'px';
	parentObj.style.height = '12px';
	parentObj.style.position = 'relative';
	parentObj.id = 'slider_container' + slider_counter;
	document.getElementById(targetElId).appendChild(parentObj);
	
	var obj = document.createElement('DIV');
	obj.style.cssText = 'border-top:1px solid #9d9c99;border-left:1px solid #9d9c99;border-bottom:1px solid #eee;border-right:1px solid #eee;background-color:#f0ede0;position:absolute;bottom:0px;width:3px;height:3px;';
	obj.innerHTML = '<span></span>';
	obj.style.width = width + 'px';
	obj.id = 'slider_slider' + slider_counter;
	obj.style.position = 'absolute';
	obj.style.bottom = '0px';
	parentObj.appendChild(obj);
	
	var handleImg = document.createElement('IMG');
	handleImg.style.position = 'absolute';
	handleImg.style.left = '0px';
	handleImg.style.zIndex = 5;
	handleImg.src = slider_handle_image_obj.src;
	handleImg.id = 'slider_handle' + slider_counter;
	handleImg.onmousedown = initMoveSlider;
	if(document.body.onmouseup){
		if(document.body.onmouseup.toString().indexOf('stopMoveSlider')==-1){
			alert('You allready have an onmouseup event assigned to the body tag');
		}
	}else{
		document.body.onmouseup = stopMoveSlider;
		document.body.onmousemove = startMoveSlider;
	}
	handleImg.ondragstart = form_widget_cancel_event;
	parentObj.appendChild(handleImg);
	positionSliderImage(false,slider_counter);
	onpropertychange_f(formTarget,positionSliderImage);
}

function onpropertychange_f(e_, func_f){
	if (is_ie) {
		e_.onpropertychange = func_f;
		return;
	}
	if (document.addEventListener) {
		e_.addEventListener("input", func_f, false);
		return;
	} else if (document.attachEvent) {
		e_.attachEvent("onpropertychange",func_f);
		return;
	}
}

function form_widget_cancel_event(){
	return false;
}

function chooseColorSlider(){
	color_picker_form_field.value = document.getElementById('color_code').value;
	color_picker = color_picker_form_field.value;
	color_picker_div.style.display='none';
	goBackFunction();
}
function setPreviewColorFromTxt(){
	if(this.value.match(/\#[0-9A-F]{6}/g)){
		document.getElementById('colorPreview').style.backgroundColor=this.value;
		var r = this.value.substr(1,2);
		var g = this.value.substr(3,2);
		var b = this.value.substr(5,2);
		document.getElementById('red_color').value = baseConverter(r,16,10);
		document.getElementById('green_color').value = baseConverter(g,16,10);
		document.getElementById('blue_color').value = baseConverter(b,16,10);
		
		positionSliderImage(false,1,document.getElementById('red_color'));
		positionSliderImage(false,2,document.getElementById('green_color'));
		positionSliderImage(false,3,document.getElementById('blue_color'));
	}
}
function positionSliderImage(e,theIndex,inputObj){
	if(this)inputObj = this;
	if(!theIndex)theIndex = inputObj.getAttribute('sliderIndex');
	var handleImg = document.getElementById('slider_handle' + theIndex);
	var ratio = sliderObjectArray[theIndex]['width'] / (sliderObjectArray[theIndex]['max']-sliderObjectArray[theIndex]['min']);
	var temp = sliderObjectArray[theIndex]['formTarget'].value - 0;
	if (temp > 255) {
		sliderObjectArray[theIndex]['formTarget'].value = 255;
	} else if (temp < 0) {
		sliderObjectArray[theIndex]['formTarget'].value = 0;
	}
	var currentValue = sliderObjectArray[theIndex]['formTarget'].value-sliderObjectArray[theIndex]['min'];
	handleImg.style.left = currentValue * ratio + 'px';
	setColorByRGB();
}

function baseConverter (number,ob,nb){
	number = number + "";
	number = number.toUpperCase();
	var list = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
	var dec = 0;
	for (var i = 0; i <=  number.length; i++) {
		dec += (list.indexOf(number.charAt(i))) * (Math.pow(ob , (number.length - i - 1)));
	}
	number = "";
	var magnitude = Math.floor((Math.log(dec))/(Math.log(nb)));
	for (var i = magnitude; i >= 0; i--) {
		var amount = Math.floor(dec/Math.pow(nb,i));
		number = number + list.charAt(amount); 
		dec -= amount*(Math.pow(nb,i));
	}
	if(number.length==0)number=0;
	return number;
}
function setColorByRGB(){
	var formObj = document.forms[0];	
	var r = document.getElementById('red_color').value.replace(/[^\d]/,'');
	var g = document.getElementById('green_color').value.replace(/[^\d]/,'');
	var b = document.getElementById('blue_color').value.replace(/[^\d]/,'');		
	if(r/1>255)r=255;
	if(g/1>255)g=255;
	if(b/1>255)b=255;
	r = baseConverter(r,10,16) + '';
	g = baseConverter(g,10,16) + '';
	b = baseConverter(b,10,16) + '';
	if(r.length==1)r = '0' + r;
	if(g.length==1)g = '0' + g;
	if(b.length==1)b = '0' + b;

	document.getElementById('colorPreview').style.backgroundColor = '#' + r + g + b;
	document.getElementById('color_code').value = '#' + r + g + b;		
}

function initMoveSlider(e){
	if(document.all)e = event;
	slideInProgress = true;
	event_start_x = e.clientX;
	handle_start_x = this.style.left.replace('px','');
	currentSliderIndex = this.id.replace(/[^\d]/g,'');
	return false;
}

function startMoveSlider(e){
	if(document.all)e = event;
	if(!slideInProgress)return;
	var leftPos = handle_start_x/1 + e.clientX/1 - event_start_x;
	if(leftPos<0)leftPos = 0;
	if(leftPos/1>sliderObjectArray[currentSliderIndex]['width'])leftPos = sliderObjectArray[currentSliderIndex]['width'];
	document.getElementById('slider_handle' + currentSliderIndex).style.left = leftPos + 'px';
	adjustFormValue(currentSliderIndex);
	if(sliderObjectArray[currentSliderIndex]['onchangeAction']){
		eval(sliderObjectArray[currentSliderIndex]['onchangeAction']);
	}
}

function stopMoveSlider(){
	slideInProgress = false;
}

function getImageSliderHeight(){
	if(!slider_handle_image_obj){
		slider_handle_image_obj = new Image();
		slider_handle_image_obj.src = slider_handle_image;
	}
	if(slider_handle_image_obj.width>0){
		return;
	}else{
		setTimeout('getImageSliderHeight()',50);
	}
}
function adjustFormValue(theIndex){
	var handleImg = document.getElementById('slider_handle' + theIndex);
	var ratio = sliderObjectArray[theIndex]['width'] / (sliderObjectArray[theIndex]['max']-sliderObjectArray[theIndex]['min']);
	var currentPos = handleImg.style.left.replace('px','');
	sliderObjectArray[theIndex]['formTarget'].value = Math.round(currentPos / ratio) + sliderObjectArray[theIndex]['min'];
}