<public:component />
<public:attach event="ondocumentready" handler="initializeSelectBox" />
<public:attach event="onpropertychange" handler="eventChangeProperty" />
<public:attach event="onmousedown" for="document" handler="eventMouseDown" />
<public:property name="setColor" put="setupColor" />
<public:property name="setImage" put="setupImage" />

<script language="JavaScript">

var objSelectBox = this;
var mTable, mTBody, mTR, mTD;
var sTable, sTBody, sTR, sTD;
var widthObject, heightObject, topMT, heightMT, topST, heightST;
var close_check = 0;

//var normal_bgcolor = "#FFD781";
var normal_bgcolor = "#FFffff";
var normal_color = "#333333";
var active_bgcolor = "#FFD781";
var active_color = "#000000";
var normal_border_tag = "1 solid #FFF5DF";
var active_border_tag = "1 solid #FFF5DF";
var font_tag = "normal 11px Tahoma";
var arrow_image = "images/img_Arrow.gif";

// onMouseDown
function eventMouseDown(){
  if(close_check) closeSubLayer();
}

// onChange
function eventChangeProperty(){
  if (window.event.type == "propertychange" && window.event.propertyName == "selectedIndex"){
    if (objSelectBox.onchange != null) objSelectBox.onchange();
  }
}

// onMouseWheel
function eventMouseWheel(){
  var idx = 0;
/*
  if(event.type == "mousewheel"){
    for(t=0; t<objSelectBox.length; t++){
      if(event.srcElement == sTD[t]) idx = t;
      sTD[t].style.color = normal_color;
      sTD[t].style.background = normal_bgcolor;
    }

    for(i=0; i<event.wheelDelta; i+=120) idx--;
    for(i=0; i>event.wheelDelta; i-=120) idx++;
    idx = Math.max(idx, 0);
    idx = Math.min(idx, objSelectBox.length - 1);

    sTD[idx].style.color = active_color;
    sTD[idx].style.background = active_bgcolor;
  }
*/
}

function setupColor(color_list){
  var color_array = color_list.split(",");
  var color = new Array();

  for(i=0; i<color_array.length; i++){
    color[i] = color_array[i];
  }

  if(color[0]) normal_color = color[0];
  if(color[1]) normal_bgcolor = color[1];
  if(color[2]) active_color = color[2];
  if(color[3]) active_bgcolor = color[3];
  if(color[4]) normal_border_tag = "1 solid "+color[4];
  if(color[5]) active_border_tag = "1 solid "+color[5];
}

function setupImage(image_file){
  if(image_file) arrow_image = image_file;
}

function getStringLength(string){
  var i, j=0;

  for(i=0;i<string.length;i++) {
    lengthString = escape(string.charAt(i)).length;
    if(lengthString > 4) j++;
    j++;
  }

  return j;
}

function getStringPixelWidth(string_value){
  var ascii_code;
  var string_value_length = string_value.length;
  var character;
  var character_width;
  var character_length;
  var total_width = 0;
  var total_length = 0;

  var special_char_size = 6;
  var multibyte_char_size = 12;
  var base_char_start = 32;
  var base_char_end =  127;
  var ascii_char_size = Array(4,4,4,6,6,10,8,4,5,5,6,6,4,6,4,6,6,6,6,6,6,6,6,6,6,6,4,4,8,6,8,6,12,8,8,9,8,8,7,9,8,3,6,8,7,11,9,9,8,9,8,8,8,8,8,10,8,8,8,6,11,6,6,6,4,7,7,7,7,7,3,7,7,3,3,6,3,11,7,7,7,7,4,7,3,7,6,10,7,7,7,6,6,6,9,6);

  for(i=0; i<string_value_length; i++){
    character = string_value.substring(i,(i+1));
    ascii_code = character.charCodeAt(0);
    
    if(ascii_code < base_char_start){
      character_width = special_char_size;
    }else if(ascii_code <= base_char_end){
      idx = ascii_code - base_char_start;
      character_width = ascii_char_size[idx];
    }else if(ascii_code > base_char_end){
      character_width = multibyte_char_size;
    }
    total_width += character_width;
  }

  return total_width;
}

function initializeSize(){
  topMT = 0;
  heightMT = 19;

  heightST = objSelectBox.length * 20 + 2 + 2;

  if(objSelectBox.style.width){
    widthObject = parseInt(objSelectBox.style.width);
  }else{
    lengthMax = 0;
    for(i=0; i<objSelectBox.length; i++){
      lengthOption = getStringLength(objSelectBox.options[i].text);
      if(lengthMax < lengthOption){
        lengthMax = lengthOption;
        stringLong = objSelectBox.options[i].text;
      }
    }
    widthObject = getStringPixelWidth(stringLong) + 12 + 12 + 2;
  }
  heightObject = heightMT + heightST;

}

function convertSelectBox(){
  var textDefault = objSelectBox.options[objSelectBox.selectedIndex].text;

  initializeSize();

  fDiv = document.createElement("SPAN");
  fDiv.style.width = widthObject;
  fDiv.style.position = "relative";
  fDiv.style.zIndex = 10;
  fDiv.onmouseover = mouseoverFD;
  fDiv.onmouseout = mouseoutFD;

  mDiv = document.createElement("DIV");
  mDiv.style.width = widthObject;
  mDiv.style.height = heightMT;
  mDiv.style.position = "relative";
  mDiv.onblur = blurTitle;
  mDiv.onmousewheel = eventMouseWheel;

  sDiv = document.createElement("DIV");
  sDiv.style.top = 0;
  sDiv.style.left = 0;
  sDiv.style.width = widthObject;
  sDiv.style.height = 0;
  sDiv.style.display = "none";
  sDiv.style.position = "absolute";
  sDiv.style.scrollbarFaceColor = "#FFFFFF";
  sDiv.style.scrollbarHighlightColor = "#FFFFFF";
  sDiv.style.scrollbarShadowColor = "#E7E7E7";
  sDiv.style.scrollbar3dLightColor = "#C7C7C7";
  sDiv.style.scrollbarArrowColor = "#797979";
  sDiv.style.scrollbarTrackColor = "#C7C7C7";
  sDiv.style.scrollbarDarkshadowColor = "#C7C7C7";
  sDiv.style.scrollbarBaseColor = "#FFFFFF";
  sDiv.onmousewheel = eventMouseWheel;

  mTable = document.createElement("TABLE");
  mTable.border = 0;
  mTable.cellSpacing = 1;
  mTable.cellPadding = 0;
  mTable.style.width = widthObject;
  mTable.style.height = heightMT;
  mTable.style.color = normal_color;
  mTable.style.background = normal_bgcolor;
  mTable.style.border = normal_border_tag;
  mTable.onmouseover = mouseoutMT;
  mTable.onmouseout = mouseoutMT;

  mTBody = document.createElement("TBODY");
  mTable.appendChild(mTBody);

  mTR = document.createElement("TR");
  mTR.onclick = changeSubLayerDisplay;
  mTD_title = document.createElement("TD");
  mTD_title.width = widthObject - 14;
  mTD_title.valign = "baseline";
  mTD_title.innerHTML = " " + textDefault;
  mTD_title.onselectstart = function(){return false;};
  mTD_title.style.font = font_tag;
  mTD_title.style.color = normal_color
  mTD_title.style.background = normal_bgcolor;
  mTD_title.style.cursor = "default";
  mTR.appendChild(mTD_title);
  mTD = document.createElement("TD");
  mTD.width = "14";
  mTD.align = "center";
  mTD.onselectstart = function(){return false;};
    arrowImage = document.createElement("IMG");
    arrowImage.src = arrow_image;
	arrowImage.width=13;
	arrowImage.height=13;
    arrowImage.valign = "bottom";
    arrowImage.style.filter = "gray()";
  mTD.appendChild(arrowImage);
  mTR.appendChild(mTD);
  mTBody.appendChild(mTR);
  mDiv.appendChild(mTable);

  sTable = document.createElement("TABLE");
  sTable.style.width = widthObject;
  sTable.style.color = normal_color;
  sTable.style.background = normal_bgcolor;
  sTable.style.border = normal_border_tag;
  sTBody = document.createElement("TBODY");
  sTable.appendChild(sTBody);

  sTR = new Array();
  sTD = new Array();
  for(i=0; i<objSelectBox.length; i++){
    textSelectBox = objSelectBox.options[i].text;
    valueSelectBox = objSelectBox.options[i].value;

    sTR = document.createElement("TR");
    sTD[i] = document.createElement("TD");
    sTD[i].height = "18";
    sTD[i].onmouseover = mouseoverST;
    sTD[i].onmouseout = mouseoutST;
    sTD[i].onclick = selectOption;
    sTD[i].onselectstart = function(){return false;};
    sTD[i].style.font = font_tag;
    sTD[i].style.color = normal_color;
    sTD[i].style.background = normal_bgcolor;
    sTD[i].style.cursor = "default";
    sTD[i].innerHTML = " " + textSelectBox;
    sTR.appendChild(sTD[i]);
    sTBody.appendChild(sTR);
  }
  sDiv.appendChild(sTable);

  fDiv.appendChild(mDiv);
  fDiv.appendChild(sDiv);

  insertAdjacentElement("afterEnd",fDiv);
}

function changeSubLayerDisplay(){
  if(sDiv.style.display == "none"){
    openSubLayer();
  }else{
    closeSubLayer();
  }
}

function openSubLayer(){
  var yDocumentClient = window.event.clientY;
  var heightDocumentClient = parent.document.body.clientHeight;
  var yMT = window.event.offsetY + 5;
  var upSpace = yDocumentClient - yMT;
  var downSpace = heightDocumentClient - yDocumentClient - (heightMT - yMT);

  if((objSelectBox.length < 11 && (objSelectBox.length * 20 + 4) > downSpace) || (objSelectBox.length > 10 && downSpace < 204)){
    sDiv.style.top = 0 - heightST;
    makeScroll("up",upSpace);
  }else{
    sDiv.style.top = heightMT;
    makeScroll("down",downSpace);
  }
  sTD[objSelectBox.options.selectedIndex].style.color = active_color;
  sTD[objSelectBox.options.selectedIndex].style.background = active_bgcolor;
  sDiv.style.display = "block";
  fDiv.style.zIndex = 100;
}

function closeSubLayer(){
  if(sDiv.style.display != "none"){
    mTD_title.innerHTML = " "+objSelectBox.options[objSelectBox.selectedIndex].text;
    mTD_title.style.color = active_color;
    mTD_title.style.background = active_bgcolor;
    mDiv.focus();

    for(i=0; i<objSelectBox.length; i++){
      sTD[i].style.color = normal_color;
      sTD[i].style.background = normal_bgcolor;
    }
    sDiv.style.display = "none";
    sDiv.style.height = 0;
    fDiv.style.zIndex = 10;
    removeScroll();
  }
}

function makeScroll(type,space){
  if(heightST > space){
    countMaxOption = parseInt((space - 4) / 20);
    heightTmp = 20 * countMaxOption + 4;

    if(type=="up") sDiv.style.top = 0 - heightTmp;

    sTable.style.border = "";
    sTable.style.width = widthObject - 18;

    sDiv.style.height = heightTmp;
    sDiv.style.border = normal_border_tag;
    
    sDiv.style.overflowY = "scroll";
  }
}

function removeScroll(){
  if(sDiv.style.overflowY == "scroll"){
    sDiv.style.top = 0;
    sDiv.style.height = 0;
    sDiv.style.border = "";
    sDiv.style.overflowY = "";
    sTable.style.width = widthObject;
    sTable.style.border = normal_border_tag;
  }
}

function selectOption(){
  obj = window.event.srcElement;
  for(i=0; i<objSelectBox.length; i++){
    if(sTD[i] == obj){
      objSelectBox.options[i].selected = true;
    }else{
      objSelectBox.options[i].selected = false;
    }
  }

  closeSubLayer();
}

// fDiv Mouse Over
function mouseoverFD(){
  close_check = 0;
}

// fDiv Mouse Out
function mouseoutFD(){
  close_check = 1;
}

// Mouse Over
function mouseoverMT(){
  mTable.style.border = active_border_tag;
  arrowImage.style.filter = '';
}

// Mouse Out
function mouseoutMT(){
  mTable.style.border = normal_border_tag;
  arrowImage.style.filter = 'gray()';
}

// Mouse Over
function mouseoverST(){
  obj = window.event.srcElement;
  for(i=0; i<objSelectBox.length; i++){
    if(obj == sTD[i]){
      sTD[i].style.color = active_color;
      sTD[i].style.background = active_bgcolor;
    }else{
      sTD[i].style.color = normal_color;
      sTD[i].style.background = normal_bgcolor;
    }
  }
}

// Mouse Out
function mouseoutST(){
  obj = window.event.srcElement.parentElement;
  obj.style.color = normal_color;
  obj.style.background = normal_bgcolor;
}

// onBlur
function blurTitle(){
  mTD_title.style.color = normal_color;
  mTD_title.style.background = normal_bgcolor;
}

function initializeSelectBox(){
  var browser_version = new Number(((window.navigator.appVersion.split('; '))[1].split(' '))[1]);

  if(tagName!="SELECT"){
    alert("");return;
  }else if(navigator.appName != "Microsoft Internet Explorer" || browser_version < 5.0){
    return;
  }else{
    objSelectBox.style.display = "none";
    if(objSelectBox.length) convertSelectBox();
  }
}
</script>
</public:component>
