// JavaScript Document
opCard =function()
{
 this.bind = new Array();
 this.index = 0;  //默认显示哪个选项卡，从0开始
 
 this.style = new Array();  //["","",""]
 this.overStyle = false;  //选项是否有over, out变换样式事件，样式为this.style[2]
 this.overChange = false;  //内容是否用over, out直接激活
 this.menu = false;    //菜单类型
 this.nesting = [false,false,"",""];  //是否嵌套，后面2个参数是指定menu,info的子集深度所用id
 
 this.auto = [false, 1000];  //自动滚动[true,2000]
 this.timerID = null;   //自动播放的
 this.menutimerID = null;  //菜单延时的
 
 this.creat = function(func)
 {
  var _arrMenu = document.getElementById(this.bind[0]).getElementsByTagName(this.bind[1]);
  var _arrInfo = document.getElementById(this.bind[2]).getElementsByTagName(this.bind[3]);
  var my = this, i;
  var argLen = arguments.length;
  var arrM = new Array();
  
  if(this.nesting[0] || this.nesting[1]) // 有选项卡嵌套
  { // 过滤出需要的数据
   var arrMenu = this.nesting[0]?getChilds(_arrMenu,this.bind[0],2):_arrMenu;
   var arrInfo = this.nesting[1]?getChilds(_arrInfo,this.bind[2],3):_arrInfo;
  }
  else
  {
   var arrMenu = _arrMenu;
   var arrInfo = _arrInfo;
  }
  
  var l = arrMenu.length;
  if(l!=arrInfo.length){alert("菜单和内容必须拥有相同的数量\n如果需要，你可以放一个空的在那占位。")}
  
  // 修正
  if(this.menu){this.auto=false;this.overChange=true;} //如果是菜单，则没有自动运行，有over, out直接激活
  
  // 循环添加各个事件等
  for(i=0;i<l;i++)
  {
   arrMenu[i].cName = arrMenu[i].className;
   arrMenu[i].className = (i!=this.index || this.menu)?getClass(arrMenu[i],this.style[0]):getClass(arrMenu[i],this.style[1]);  //加载样式，菜单的话统一样式
   
   if(arrMenu[i].getAttribute("skip")) // 需要跳过的容器
   {
    if(this.overStyle || this.overChange) // 有over, out 改变样式 或者 激活
    {
     arrMenu[i].onmouseover = function(){changeTitle(this, 2);autoStop(this, 0);}
     arrMenu[i].onmouseout = function(){changeTitle(this, 0);autoStop(this, 1);}
    }
    arrMenu[i].onclick = function(){if(argLen==1){func()}}
    arrInfo[i].style.display = "none";
    continue;
   }
   
   if(i!=this.index || this.menu){arrInfo[i].style.display="none"}; //隐藏初始化，菜单的话全部隐藏
   arrMenu[i].index = i; //记录自己激活值[序号]
   arrInfo[i].index = i;
   
   
   if(this.overChange) //有鼠标over, out事件
   {
    arrMenu[i].onmouseover = function(){changeOption(this);my.menu?changeMenu(1):autoStop(this, 0);}
    arrMenu[i].onmouseout = function(){changeOption(this);my.menu?changeMenu(0):autoStop(this, 1);}
   }
   else //onclick触发
   {
    arrMenu[i].onclick = function(){changeOption(this);autoStop(this, 0);if(argLen==1){func()}}
    if(this.overStyle) // 有over, out 改变样式
    {
     arrMenu[i].onmouseover = function(){changeTitle(this, 2);autoStop(this, 0);}
     arrMenu[i].onmouseout = function(){changeTitle(this, 0);autoStop(this, 1);}
    }
    else // 没有over, out 改变样式
    {
     if(this.auto[0]) // 有自动运行
     {
      arrMenu[i].onmouseover = function(){autoStop(this, 0);}
      arrMenu[i].onmouseout = function(){autoStop(this, 1);}
     }
    }
   }
   
   if(this.auto[0] || this.menu) //arrinfo 控制自动播放
   {
    arrInfo[i].onmouseover = function(){my.menu?changeMenu(1):autoStop(this, 0);}
    arrInfo[i].onmouseout = function(){my.menu?changeMenu(0):autoStop(this, 1);}
   }
  } //for结束
  
  if(this.auto[0])
  {
   this.timerID = setTimeout(autoMove,this.auto[1])
  }
  
  // 自动播放
  function autoMove()
  {
   var n;
   n = my.index + 1;
   if(n==l){n=0};
   while(arrMenu[n].getAttribute("skip"))  // 需要跳过的容器
   {
    n += 1;
    if(n==l){n=0};
   }
   changeOption(arrMenu[n]);
   my.timerID = setTimeout(autoMove,my.auto[1]);
  }
  
  // onmouseover时，自动播放停止。num：0为over，1为out。 obj暂时无用。 -_-!!
  function autoStop(obj, num)
  {
   if(!my.auto[0]){return;}
   //if(obj.index==my.index)
   num == 0 ? clearTimeout(my.timerID) : my.timerID = setTimeout(autoMove,my.auto[1]);
  }
  
  // 改变选项卡
  function changeOption(obj)
  {
   arrMenu[my.index].className = getClass(arrMenu[my.index],my.style[0]); //修改旧内容
   arrInfo[my.index].style.display = "none"; //隐藏旧内容
   
   obj.className = getClass(obj,my.style[1]);  //修改为新样式
   arrInfo[obj.index].style.display = ""; //显示新内容
   
   my.index = obj.index; //更新当前选择的index
  }
  
  /*  
   只有onclick时，overStyle的onmouseover,onmouseout事件。用来预激活
   obj：目标对象。 num：1为over，0为out
  */
  function changeTitle(obj, num)
  {
   if(!my.overStyle){return;};
   if(obj.index!=my.index){obj.className = getClass(obj,my.style[num])}
  }
  
  /*  
   菜单类型时用
   obj：目标对象。 num：1为over，0为out
  */
  function changeMenu(num)
  {
   if(!my.menu){return;}
   num==0?my.menutimerID = setTimeout(menuClose,1000):clearTimeout(my.menutimerID)
  }
  
  //关闭菜单
  function menuClose()
  {
   arrInfo[my.index].style.display = "none";
   arrMenu[my.index].className = my.style[0];
  }
  
  // 得到className（防止将原有样式覆盖）
  function getClass(o, s)
  {
   if(o.cName==""){return s}
   else{return o.cName + " " + s}
  }
  
  //嵌套情况下得到真正的子集
  function getChilds(arrObj, id, num)
  {
   var depth = 0;
   var firstObj = my.nesting[num]==""?arrObj[0]:document.getElementById(my.nesting[num]);  //得到第一个子集
   do //计算深度
   {
    if(firstObj.parentNode.getAttribute("id")==id){break}else{depth+=1}
    firstObj = firstObj.parentNode;
   }
   while(firstObj.tagName.toLowerCase()!="body") // body强制退出。
   
   var t;
   var arr = new Array();
   for(i=0;i<arrObj.length;i++) //过滤出需要的数据
   {
    t = arrObj[i], d = 0;
    do
    {
     if(t.parentNode.getAttribute("id")==id && d == depth)
     { 
      arr.push(arrObj[i]);break;  //得到数据
     }
     else
     {
      if(d==depth){break};d+=1;
     }
     t = t.parentNode;
    }
    while(t.tagName.toLowerCase()!="body") // body强制退出
   }
   return arr;
  }
 }
}