var SLIDER_WIDTH  = 15;         // used for the slider control
var SLIDER_HEIGHT = 8;          // used for the slider control

var COLOR_PALETTE_TEMPLATE = "../color_picker.htm";
var COLOR_PALETTE_WIDTH    = 560;
var COLOR_PALETTE_HEIGHT   = 150;

///////////////////////////////////////////////
// Function:      InTheRectangle
// Description:   checks if the current mouse cursor
//                position is in a given rectangle
//                (modified now - using only "x" and "width"
//                for comfortability of the user when dragging)
///////////////////////////////////////////////
function InTheRectangle(this_x, this_y, x, y, width, height)
{
   //return (this_x >= x && this_y >=y && this_x <= x + width && this_y <= y + height);

   // modification
   return (this_x >= x && this_x <= x + width);
}


///////////////////////////////////////////////
// Function:      GetAdequateValue
// Description:   returns the adequate value
//                assuming that min < value < max
//                If "value" is out of this range
//                it returns "min" or "max" depending
//                on where "value" "goes out".
///////////////////////////////////////////////
function GetAdequateValue(min, value, max)
{
   if (value < min)
      return min;
   if (value > max)
      return max;
   return value;
}


///////////////////////////////////////////////
// Function:      CalculateValue
// Description:   Calculates a value for a slider
//                with given "distance" from the left
//                side of the slider, width, max and min
//                value that it has to take and the
//                offset the value will be de/in-creased
///////////////////////////////////////////////
function CalculateValue(distance, width, min_value, max_value, offset)
{
   
   var offset_per_pixels = Math.floor(width / (max_value - min_value)) + 1; // hope this is not 0
   var value             = Math.floor(distance / offset_per_pixels + offset - 1);

   value = GetAdequateValue(min_value, value, max_value);

   return value;
}


///////////////////////////////////////////////
// Function:      SliderControlChange
// Description:   Hooks the mousedrag event of the
//                layer containing the slider control
//                and moves the layer depending on 
//                the mouse position. Also sets values to
//                form elements given by "form" and "name"
///////////////////////////////////////////////
function SliderControlChange(x, y, width, height, form_obj_name, value, min_value, max_value, offset, path_to_cgibin)
{
   var layer_name = form_obj_name.substring(form_obj_name.indexOf("].") + 2);
   var layer = IE ? document.all[layer_name + 'Layer'].style : document.layers[layer_name + 'Layer'];

   var left  = parseInt(layer.left);
   var top   = parseInt(layer.top);

   var mouse_x = GetMouseX();
   var mouse_y = GetMouseY();

   if (InTheRectangle(mouse_x, mouse_y, x, y, width, height)) {
      layer.left = mouse_x;
      //layer.top  = mouse_y;

      // fill form stuff
      var obj   = eval(form_obj_name);

      obj.value = CalculateValue(mouse_x - x, width, min_value, max_value, offset);
   }

}


///////////////////////////////////////////////
// Function:      SliderControl
// Description:   Creates a slider control
///////////////////////////////////////////////
function SliderControl(x, y, width, height, form_obj_name, value, min_value, max_value, offset, path_to_cgibin)
{
   width  = parseInt(width);
   height = parseInt(height);

   var layer_name = form_obj_name.substring(form_obj_name.indexOf("].") + 2);

   var code = '<div id="' + layer_name + 'Layer" style="position:absolute; top:' + y + 'px; left:' + x + 'px; width:' + SLIDER_WIDTH + 'px; height:' + height + 'px" ondrag="javascript:SliderControlChange(' + x + ', ' + y + ', ' + width + ', ' + height + ', \'' + form_obj_name + '\', ' + value + ', ' + min_value + ', ' + max_value + ', ' + offset + ', \'' + path_to_cgibin + '\');">';
      code += '<img src="' + path_to_cgibin + '/imagen.cgi?slider.img&width=' + SLIDER_WIDTH + '&height=' + SLIDER_HEIGHT + '" alt=\'Drag Me\'>';
      code += '</div>';

   document.write(code);

   var code = '<div id="' + layer_name + 'LayerScale" style="position:absolute; background-color:#CCCCCC; background:#CCCCCC; top:' + (y - 1) + 'px; left:' + x + 'px; width:' + (width + SLIDER_WIDTH) + 'px; height:1px"><img src="Image/space.gif" width="1" height="1"></div>';
   document.write(code);
}



///////////////////////////////////////////////
// Function:      OpenColorPaletteWindow
// Description:   Opens the template with colors to choose
///////////////////////////////////////////////
function OpenColorPaletteWindow(foreground, form_obj_string)
{
   var url    = COLOR_PALETTE_TEMPLATE + "?" + escape(form_obj_string);
   var title  = "PaletteWindow";
   var width  = COLOR_PALETTE_WIDTH  + 10;
   var height = COLOR_PALETTE_HEIGHT + 50;

   var options = "toolbars=no,scrollbars=no,menubar=no,resizable=no,width=" + width + ",height=" + height;

   window.open(url, title, options);
}



function SelectObjValue(value, text)
{
	this.value = value;
	this.text  = text;
}


///////////////////////////////////////////////
// Function:      SetNetscapeSelectValue
// Description:   Selects the option in the <select>
//                object specified by the value variable
///////////////////////////////////////////////
function SetNetscapeSelectValue(obj, value)
{
	if (document.all) return;
	var i;
	var selectedIndex = 0;
	var values = new Array();
	for (i = 0; i < obj.options.length; i++) {
		values[i] = new SelectObjValue(obj.options[i].value, obj.options[i].text);
		if (obj.options[i].value == value) {	
			selectedIndex = i;
			value = value;
		}
	}

	// clear the control
	while (obj.options.length) obj.options[0] = null;
	
	// create a new object
	for (i = 0; i < values.length; i++) {
		obj.options[i] = new Option(values[i].text, values[i].value);
		if (i == selectedIndex)	{
			obj.selectedIndex = i;
		}
	}
}