function BorderPicker (callBack)
{
   this.callBack = callBack || false;

   BorderPicker.prototype.ids++;
   this.id = this.ids

   this.colorPickerId = null;
   this.currentControl = null;

   this.borderSizes = 5;
   this.borderStyles = ['none', 'solid', 'dashed', 'dotted', 'double', 'groove', 'ridge', 'inset', 'outset'];

   return this.makePicker();
}

BorderPicker.prototype = new ObjectEvents();

BorderPicker.prototype.makePicker = function ()
{
   var div = make_el('div', {unselectable : true, className : 'border-picker-holder',
                             id : 'border-picker-' + this.id, isBorderPicker : true,
                             style : {position : 'absolute', display : 'none', width : '370px', height : '36px'}});
   var label1 = make_el('label', {htmlFor : 'border-picker-width-' + this.id,
                                  isBorderPicker : true}, 'Width ', div);
   var sizes = make_el('select', {id : 'border-picker-width-' + this.id,
                                  className : 'border-picker-width', isBorderPickerSelect : true}, div);

   for (i = 0; i <= this.borderSizes; i++)
   {
      var opt = make_el('option', {label : i + 'px', value : i + 'px', isBorderPickerSelect : true}, i + 'px', sizes);
   }

   var label2 = make_el('label', {htmlFor : 'border-picker-style-' + this.id, isBorderPicker : true}, 'Style ', div);
   var styles = make_el('select', {id : 'border-picker-style-' + this.id,
                                   className : 'border-picker-style', isBorderPickerSelect : true}, div);

   for (i = 0; i < this.borderStyles.length; i++)
   {
      make_el('option', {label : this.borderStyles[i], value : this.borderStyles[i], isBorderPickerSelect : true}, this.borderStyles[i], styles);
   }

   var label3 = make_el('label', {htmlFor : 'border-picker-color-' + this.id, isBorderPicker : true}, 'Color ', div);
   var color = make_el('input', {type : 'text', size : 8, id : 'border-picker-color-' + this.id, isBorderPickerSelect : true}, div);
   var icon = make_el('img', {src : 'http://static.yuku.com/userskins/bypass/img/editor/color.png', className : 'icon',
                              alt : '[c]', title : 'Pick Color', isBorderPickerColor : true,
                              style : {margin : '2px 3px', verticalAlign : 'top'}, control : color}, div);

   div.appendChild(this.addColorPicker());

   this.addEvent(document, 'click', 'click');
   this.addEvent(sizes, 'change', 'doCallBack');
   this.addEvent(styles, 'change', 'doCallBack');
   this.addEvent(color, 'change', 'doCallBack');
   this.addEvent(color, 'focus', 'doCallBack');

   return div;
}

BorderPicker.prototype.ids = 0;

BorderPicker.prototype.click = function (e)
{
   var src = get_srcEl(e);

   if (src.isBorderPickerColor)
   {
      this.currentControl = src.control;
      this.showHideColorPicker(e, 1);
   }
   else if (!(src.isColorPicker || src.isColorScale || src.isColorScalePicker || src.isAlphaImg)) // not the colour picker inside
   {
      this.showHideColorPicker(e, 0);
   }
}

BorderPicker.prototype.addColorPicker = function ()
{
   var me = this;
   var colorPicker = new ColorPicker(function (val) { me.processBorderColorPicker(val)});

   this.colorPickerId = colorPicker.id;

   colorPicker.style.display = 'none';
   colorPicker.style.position = 'relative';

   var divs = get_by_tag('div', colorPicker);
   for (i = 0; i < divs.length; i++)
      divs[i].isBorderPickerColorPicker = true;

   return colorPicker;
}

BorderPicker.prototype.isBorderColorPickerElement = function (el)
{
   var par = get_parent_by_prop(el, 'isBorderPicker');

   if (!par || !par.isBorderPicker)
      return false;
   else
      return true;
}

BorderPicker.prototype.showHideColorPicker = function (e, show)
{
   if (!this.colorPickerId) return;
   var colorPicker = get_by_id(this.colorPickerId);
   if (!colorPicker) return;

   if (show)
   {
      var xy = this.getCoords(e, colorPicker.offsetWidth, colorPicker.offsetHeight);

      colorPicker.style.display = '';
      colorPicker.style.top = xy.y + 'px';
      colorPicker.style.left = xy.x + 'px';
   }
   else
   {
      colorPicker.style.display = 'none';
   }
}

BorderPicker.prototype.doCallBack = function (e)
{
   if (this.callBack)
   {
      var value = this.makeBorderValue();
      this.callBack(value);
   }
}

BorderPicker.prototype.getCoords = function (e, w, h)
{
   var mos = FindMouseXY(e);
   var src = get_srcEl(e);
   var win = window_size();

   x = (mos.x + w - 10 > win.x) ? src.offsetLeft - w : src.offsetLeft;
   y = (mos.y + h - 10 > win.y) ? src.offsetTop - h : src.offsetTop;

   return {x: x, y : y};
}

BorderPicker.prototype.makeBorderValue = function ()
{
   var style = get_by_id('border-picker-style-' + this.id);
   var width = get_by_id('border-picker-width-' + this.id);
   var color = get_by_id('border-picker-color-' + this.id);

   var border = width.options[width.selectedIndex].value;
   border += ' ' + style.options[style.selectedIndex].value;
   border += ' ' + color.value;

   return border;
}

BorderPicker.prototype.processBorderColorPicker = function (value)
{
   if (value && value.trim() != '' && this.currentControl)
   {
      this.currentControl.value = '#' + value;
      this.currentControl.focus();
      this.currentControl.blur();
   }
}