//用户变量
var oWhere = document.getElementById("sel");
//显示文字
var OptionText = new Array();
var OptionValue = new Array();

OptionText[0] = "-New Products-";
OptionValue[0] = "48";

OptionText[1] = "-Valentine's Day-";
OptionValue[1] = "49";

OptionText[2] = "-Mardi Gras-";
OptionValue[2] = "50";

OptionText[3] = "-St.Patrick-";
OptionValue[3] = "51";

OptionText[4] = "-Easter-";
OptionValue[4] = "52";

OptionText[5] = "-July 4<sup>th</sup>-";
OptionValue[5] = "53";

OptionText[6] = "-Halloween-";
OptionValue[6] = "54";

OptionText[7] = "-Thanksgiving-";
OptionValue[7] = "55";

OptionText[8] = "-X'mas-";
OptionValue[8] = "56";

OptionText[9] = "-Party-";
OptionValue[9] = "57";

OptionText[10] = "-Every Day-";
OptionValue[10] = "58";

OptionText[11] = "-Others-";
OptionValue[11] = "59";


var selectedOver = false;
var selectedValue = 0;
//下拉菜单主体
var selectDiv = document.createElement("table");
var selectDivTR = selectDiv.insertRow();
var defaultValueTD = selectDivTR.insertCell();
var arrow = selectDivTR.insertCell();
with(selectDiv)cellSpacing=0,cellPadding=0,border=0,className="selectDiv";
with(defaultValueTD)innerHTML = OptionText[0],className="defaultSelect";
with(arrow)innerText=6,className="arrow";
oWhere.appendChild(selectDiv);
//外层Div
var optionDiv = document.createElement("div");
//设置下拉菜单选项的坐标和宽度
with(optionDiv.style) {
 var select = selectDiv;
 var xy = getSelectPosition(select);
 pixelLeft = xy[0];
 pixelTop = xy[1]+select.offsetHeight;
 optionDiv.className = "optionDiv";
}
//下拉菜单内容
var Options = new Array();
for (var i=0;i<OptionText.length;i++) {
 Options[i] = optionDiv.appendChild(document.createElement("div"));
}
for (i=0;i<Options.length;i++) {
 Options[i].innerHTML =OptionText[i];
 Options[i].index = i;
}
oWhere.appendChild(optionDiv);
//列表宽度自适应
//var SelectWidth = Options[0].offsetWidth+arrow.offsetWidth+8;
//selectDiv.style.width=SelectWidth;;
//optionDiv.style.width=SelectWidth;
/*事件*/
//禁止选择文本
selectDiv.onselectstart = function() {return false;}
optionDiv.onselectstart = function() {return false;}
//下拉菜单的箭头
arrow.onmousedown = function() {
 this.setCapture();
 this.style.borderStyle="inset";
}
arrow.onmouseup = function() {
 event.cancelBubble = true;
 this.style.borderStyle="outset";
 this.releaseCapture();
 showHide();
}
document.onmouseup = function() {
 optionDiv.style.clip="rect(auto auto 0% auto)";
 if(selectedOver) {
  with(defaultValueTD.style)background="",color="";
  selectedOver=false;
 }
}
defaultValueTD.onmouseup = function() {
 event.cancelBubble = true;
 showHide();
}
//移动Option时的动态效果
for (i=0;i<Options.length;i++) {
 Options[i].attachEvent("onmouseover",function(){moveWithOptions("highlight","white")});
 Options[i].attachEvent("onmouseout",function(){moveWithOptions("","")});
 Options[i].attachEvent("onmouseup",selectedText);
}
function moveWithOptions(bg,color) {
 with(event.srcElement) {
  style.backgroundColor = bg;
  style.color = color;
 }
}
function selectedText() {
 event.cancelBubble=true;



 with(defaultValueTD.style)background="highlight",color="white";
 optionDiv.style.clip="rect(auto auto 0% auto)";
 selectedOver = true;
 if (event.srcElement.tagName!= "SUP")
 selectedValue = event.srcElement.index;
 else
 {//alert(event.srcElement.tagName);
 selectedValue = event.srcElement.parentElement.index;
 }
 //document.myform.BigClassId.value=OptionValue[selectedValue];
 document.myform.BigClassId.value=OptionValue[selectedValue];
 
  defaultValueTD.innerHTML = OptionText[selectedValue];
}

i = 0;
/*通用函数*/
//获取对象坐标
function getSelectPosition(obj) {
 var objLeft = obj.offsetLeft;
 var objTop = obj.offsetTop;
 var objParent = obj.offsetParent;
 while (objParent.tagName != "BODY") {
  objLeft += objParent.offsetLeft;
  objTop += objParent.offsetTop;
  objParent = objParent.offsetParent;
 }
 return([objLeft,objTop]);
}

function dynamicOptions() {
 optionDiv.style.clip="rect(auto auto "+i+"% auto)",i=i+20;
 if(i<101)
  setTimeout("dynamicOptions()",1);
 else
  i=0;
}
function showHide() {
 with(optionDiv.style) {
  if (clip=="rect(auto auto 0% auto)"||clip=="")
  optionDiv.style.clip="rect(auto auto 100% auto)"
   //dynamicOptions();
  else
   clip="rect(auto auto 0% auto)";
 }
}
function putValue() {
 var url = OptionValue[selectedValue];
 if (url) window.open(url)
}