home *** CD-ROM | disk | FTP | other *** search
/ Chip 2009 November / Chip_2009.11_CD.iso / Chip_WPI / WPIScripts / dhtmlXTabBar.js < prev    next >
Encoding:
JavaScript  |  2006-09-04  |  38.3 KB  |  1,151 lines
  1. /*
  2. Copyright Scand LLC http://www.scbr.com
  3. To use this component please contact info@scbr.com to obtain license
  4. */
  5.  
  6. /*_TOPICS_
  7. @0:Initialization
  8. @1:Visual appearence
  9. @3:Event Handlers
  10. */
  11.  
  12.  
  13. /**
  14. *   @desc:  TabBar Object
  15. *   @param: parentObject - parent html object or id of parent html object
  16. *   @param: mode - tabbar mode - top.bottom,left,right; top is default
  17. *   @param: height - height of tab (basis size)
  18. *   @type: public
  19. *   @topic: 0
  20. */
  21. function dhtmlXTabBar(parentObject,mode,height)
  22. {
  23.         mode=mode||"top";
  24.         this._mode=mode+"/";
  25.  
  26.  
  27.         //get parent object
  28.         if (typeof(parentObject)!="object")
  29.             this.entBox=document.getElementById(parentObject);
  30.         else
  31.             this.entBox=parentObject;
  32.  
  33.         this.width  = this.entBox.getAttribute("width") ||   (window.getComputedStyle?window.getComputedStyle(this.entBox,null)["width"]:(this.entBox.currentStyle?this.entBox.currentStyle["width"]:0));
  34.         if ((!this.width)||(this.width=="auto")||(this.width.indexOf("%")!=-1)||(parseInt(this.width)==0))
  35.                 this.width=this.entBox.offsetWidth+"px";
  36.  
  37.         this.height = this.entBox.getAttribute("height") || (window.getComputedStyle?window.getComputedStyle(this.entBox,null)["height"]:(this.entBox.currentStyle?this.entBox.currentStyle["height"]:0));
  38.             if ((!this.height)||(this.height.indexOf("%")!=-1)||(this.height=="auto")) this.height=this.entBox.offsetHeight+"px";
  39.  
  40.         this.activeTab = null;          //initialize activeTab
  41.         this.tabsId = new Object();
  42.  
  43.         this._align="left";
  44.         this._offset=5;
  45.         this._margin=1;
  46.         this._height=parseInt(height||20);
  47.         this._bMode=(mode=="right"||mode=="bottom");
  48.         this._tabSize='150px';
  49.         this._content=new Array();
  50.         this._tbst="win_text";
  51.         this._styles={
  52.             winDflt:["p_left.gif","p_middle.gif","p_right.gif","a_left.gif","a_middle.gif","a_right.gif","a_middle.gif",3,3,6,"#F4F3EE","#F0F8FF",false],
  53.             winScarf:["with_bg/p_left.gif","with_bg/p_middle.gif","with_bg/p_right_skos.gif","with_bg/a_left.gif","with_bg/a_middle.gif","with_bg/a_right_skos.gif","with_bg/p_middle_over.gif",3,18,6,false,false,false],
  54.             winBiScarf:["with_bg/p_left_skos.gif","with_bg/p_middle.gif","with_bg/p_right_skos.gif","with_bg/a_left_skos.gif","with_bg/a_middle.gif","with_bg/a_right_skos.gif","with_bg/p_middle_over.gif",18,18,6,false,false,false],
  55.             winRound:["circuses/p_left.gif","circuses/p_middle.gif","circuses/p_right.gif","circuses/a_left.gif","circuses/a_middle.gif","circuses/a_right.gif","circuses/p_middle_over.gif",10,10,6,false,false,false]
  56.  
  57.         };
  58.         this._createSelf(mode=="right"||mode=="left");            //generate TabBar DOM structure
  59.         this.setStyle("winDflt");
  60.         return this;
  61. }
  62.  
  63. /**
  64. *   @desc:  set offset before first tab on tabbar
  65. *   @param: offset - offset value
  66. *   @type: public
  67. *   @topic: 1
  68. */
  69. dhtmlXTabBar.prototype.setOffset = function(offset){
  70.         this._offset=offset;
  71. }
  72. /**
  73. *   @desc:  set align of tabs on tabbar
  74. *   @param: align - left/right for gorizontal tabbar, top/bottom for vertical tabbar
  75. *   @type: public
  76. *   @topic: 1
  77. */
  78. dhtmlXTabBar.prototype.setAlign = function(align){
  79.         if (align=="top") align="left";
  80.         if (align=="bottom") align="right";
  81.         this._align=align;
  82. }
  83. /**
  84. *   @desc:  set distance between tabs
  85. *   @param: margin - margin value
  86. *   @type: public
  87. *   @topic: 1
  88. */
  89. dhtmlXTabBar.prototype.setMargin = function(margin){
  90.         this._margin=margin;
  91. }
  92.  
  93.  
  94.  
  95.  
  96.  
  97. /**
  98. *   @desc: create DOM Structure
  99. *   @type: private
  100. *   @topic: 0
  101. */
  102. dhtmlXTabBar.prototype._createSelf = function(vMode)
  103. {
  104.         this._tabAll=document.createElement("DIV");
  105.         this._tabZone=document.createElement("DIV");
  106.         this._conZone=document.createElement("DIV");
  107.  
  108.  
  109.         this.entBox.appendChild(this._tabAll);
  110. //#4DTabs:23052006{
  111. if (this._bMode){
  112.         this._tabAll.appendChild(this._conZone);
  113.         this._tabAll.appendChild(this._tabZone);
  114.         }
  115.         else
  116. //#}
  117.         {
  118.         this._tabAll.appendChild(this._tabZone);
  119.         this._tabAll.appendChild(this._conZone);
  120.         }
  121.  
  122.  
  123.         this._vMode=vMode;
  124. //#4DTabs:23052006{
  125.         if (vMode){
  126.             this._tabAll.className='dhx_tabbar_zoneV';
  127.             this._setSizes=this._setSizesV;
  128.             this._redrawRow=this._redrawRowV;
  129.  
  130.             }
  131.         else
  132. //#}
  133.             this._tabAll.className='dhx_tabbar_zone';
  134.  
  135. //#4DTabs:23052006{
  136.         if (this._bMode)
  137.             this._tabAll.className+='B';
  138. //#}
  139.         this._tabZone.className='dhx_tablist_zone';
  140.         this._conZone.className='dhx_tabcontent_zone';
  141.  
  142.         this._tabZone.onselectstart = function(){ return false; };
  143.         this._tabAll.onclick = this._onClickHandler;
  144.         this._tabAll.onmouseover = this._onMouseOverHandler;
  145.         if (_isFF)
  146.             this._tabZone.onmouseout = this._onMouseOutHandler;
  147.         else
  148.             this._tabZone.onmouseleave = this._onMouseOutHandler;
  149.         this._tabAll.tabbar=this;
  150.  
  151.         this._lineA=document.createElement("div");
  152.         this._lineA.className="dhx_tablist_line";
  153.  
  154.         this._lineA.style[vMode?"left":"top"]=(this._bMode?0:(this._height+2))+"px";
  155.         this._lineA.style[vMode?"height":"width"]=this[vMode?"height":"width"];
  156. //#4DTabs:23052006{
  157.         if(vMode)
  158.             this._conZone.style.height=this.height;
  159.         else
  160. //#}
  161.             this._conZone.style.width=this.width;
  162.  
  163.         this.rows=new Array();
  164.         this.rowscount=1;
  165.         this._createRow();
  166.         this._setSizes();
  167. }
  168.  
  169. /**
  170. *   @desc:  create DOM structures of tabbar row
  171. *   @type: private
  172. *   @topic: 0
  173. */
  174. dhtmlXTabBar.prototype._createRow = function(){
  175.     var z=document.createElement("DIV");
  176.     z.className='dhx_tabbar_row';
  177.     this._tabZone.appendChild(z);
  178.         z._rowScroller=document.createElement('DIV');
  179.         z._rowScroller.style.display="none";
  180.         z.appendChild(z._rowScroller);
  181.     this.rows[this.rows.length]=z;
  182. //#4DTabs:23052006{
  183.     if (this._vMode){
  184.         z.style.width=this._height+3+"px";
  185.         z.style.height=parseInt(this.height)+"px";
  186.         if (!this._bMode)
  187.             this.setRowSizesA();
  188.         else
  189.             this.setRowSizesB();
  190.      }
  191.      else
  192. //#}
  193.      {
  194.      z.style.height=this._height+3+"px";
  195.      z.style.width=parseInt(this.width)+"px";
  196.      }
  197.  
  198.      z.appendChild(this._lineA);
  199. }
  200. /**
  201. *   @desc: fix sizes of tabbar, can be used after changing size of tabbar parent node
  202. *   @type: private
  203. *   @topic: 0
  204. */
  205. dhtmlXTabBar.prototype._setSizes = function(){
  206.         this._tabAll.height=this.height;
  207.         this._tabAll.width=this.width;
  208.  
  209.         if (this._tabZone.childNodes.length)
  210.             var z=this._tabZone.lastChild.offsetTop-this._tabZone.firstChild.offsetTop+this._height+(_isIE?5:0);
  211.         else
  212.             var z=this._height+(_isIE?5:0);
  213.  
  214.         var a=z-2;
  215.         this._tabZone.style.height=(a>0?a:0)+"px";
  216.         a=parseInt(this.height)-z-4;
  217.         this._conZone.style.height=(a>0?a:0)+"px";
  218. }
  219. //#4DTabs:23052006{
  220. /**
  221. *   @desc: fix sizes of tabbar, version for vertical toolbar
  222. *   @type: private
  223. *   @topic: 0
  224. */
  225. dhtmlXTabBar.prototype._setSizesV = function(){
  226.         this._tabAll.height=this.height;
  227.         this._tabAll.width=this.width;
  228.  
  229.         var z=this._height*this.rows.length;
  230.  
  231.         if (!this._bMode){
  232.         this._tabZone.style.width=z+3+"px";
  233.         this._conZone.style.width=parseInt(this.width)-z+"px";
  234.         this._conZone.style.left= z+3+"px";
  235.         }
  236.         else{
  237.         this._tabZone.style.width=z+3+"px";
  238.         this._conZone.style.width=parseInt(this.width)-z+"px";
  239.         this._tabZone.style.left=parseInt(this.width)-z+"px";
  240.         }
  241.  
  242.         this._conZone.style.height=this.height;
  243.         this._tabZone.style.height=this.height;
  244. }
  245.  
  246.  
  247. /**
  248. *   @desc: redraw row in tabbar, version for vertical tabbar
  249. *   @param: row - row in question
  250. *   @type: private
  251. *   @topic: 0
  252. */
  253. dhtmlXTabBar.prototype._redrawRowV=function(row){
  254.         var talign=this._align=="left"?"top":"bottom";
  255.         var count=parseInt(this._offset);
  256.         for (var i=0; i<row.tabCount; i++){
  257.             row.childNodes[i]._cInd=i;
  258.             row.childNodes[i].style[talign]=count+"px";
  259.             count+=row.childNodes[i]._offsetSize+parseInt(this._margin);
  260.         }
  261.  
  262.  
  263. };
  264.  
  265.  
  266.  
  267. /**
  268. *   @desc: set row positions for left mode
  269. *   @param: tab - tab object
  270. *   @type: private
  271. *   @topic: 0
  272. */
  273. dhtmlXTabBar.prototype.setRowSizesA=function(){
  274.      for (var i=0; i<this.rows.length; i++){
  275.         this.rows[i].style.left=i*this._height+"px";
  276.         this.rows[i].style.zIndex=5+i;
  277.         }
  278. }
  279. /**
  280. *   @desc: set row positions for right
  281. *   @param: tab - tab object
  282. *   @type: private
  283. *   @topic: 0
  284. */
  285. dhtmlXTabBar.prototype.setRowSizesB=function(){
  286.      for (var i=this.rows.length-1; i>=0; i--){
  287.         this.rows[i].style.left=i*this._height+"px";
  288.         this.rows[i].style.zIndex=15-i;
  289.         }
  290. }
  291. /**
  292. *   @desc: fix zIndex of rows in right mode (is it still necessary???)
  293. *   @param: tab - tab object
  294. *   @type: private
  295. *   @topic: 0
  296. */
  297. dhtmlXTabBar.prototype.setRowSizesC=function(){
  298.      for (var i=this.rows.length-1; i>=0; i--){
  299.         this.rows[i].style.zIndex=15-i;
  300.         }
  301. }
  302.  
  303. //#}
  304.  
  305.  
  306. /**
  307. *   @desc: onTab mouse over handler
  308. *   @type: private
  309. *   @topic: 0
  310. */
  311. dhtmlXTabBar.prototype._onMouseOverHandler=function(e)
  312. {
  313.         if (_isIE)
  314.             var target = event.srcElement;
  315.         else
  316.             var target = e.target;
  317.  
  318.         target=this.tabbar._getTabTarget(target);
  319.         if (!target)   {
  320.             this.tabbar._hideHover(target); return;
  321.             }
  322.  
  323.         this.tabbar._showHover(target);
  324.  
  325.         (e||event).cancelBubble=true;
  326. }
  327. /**
  328. *   @desc: onTab mouse out handler
  329. *   @type: private
  330. *   @topic: 0
  331. */
  332. dhtmlXTabBar.prototype._onMouseOutHandler=function(e)
  333. {
  334.     this.parentNode.tabbar._hideHover(null); return;
  335. }
  336.  
  337.  
  338.  
  339.  
  340. /**
  341. *   @desc: onTab Click handler
  342. *   @type: private
  343. *   @topic: 0
  344. */
  345. dhtmlXTabBar.prototype._onClickHandler=function(e)
  346. {
  347.         if (_isIE)
  348.             var target = event.srcElement;
  349.         else
  350.             var target = e.target;
  351.  
  352.         (e||event).cancelBubble=true;
  353.  
  354.         target=this.tabbar._getTabTarget(target);
  355.         if (!target) return;
  356.  
  357.         this.tabbar._setTabActive(target);
  358.         return false;
  359. }
  360.  
  361. /**
  362. *   @desc: return tab object from parentNode collections
  363. *   @param: t - some child node
  364. *   @type: private
  365. *   @topic: 0
  366. */
  367. dhtmlXTabBar.prototype._getTabTarget=function(t){
  368.     while ((t)&&((!t.className)||(t.className.indexOf("dhx_tab_element")==-1))){
  369.         if ((t.className)&&(t.className.indexOf("dhx_tabbar_zone")!=-1)) return null;
  370.         t=t.parentNode;
  371.         }
  372.     return t;
  373. }
  374.  
  375. /**
  376. *   @desc: redraw row in tabbar
  377. *   @param: row - row in question
  378. *   @type: private
  379. *   @topic: 0
  380. */
  381. dhtmlXTabBar.prototype._redrawRow=function(row){
  382.         var count=parseInt(this._offset);
  383.         for (var i=0; i<row.tabCount; i++){
  384.             row.childNodes[i]._cInd=i;
  385.             row.childNodes[i].style[this._align]=count+"px";
  386.             count+=row.childNodes[i]._offsetSize+parseInt(this._margin);
  387.         }
  388.  
  389.     };
  390.  
  391.  
  392. /**
  393. *   @desc: add tab to TabBar
  394. *   @param: id - tab id
  395. *   @param: text - tab content
  396. *   @param: size - width(height) of tab
  397. *   @param: position - tab index , optional
  398. *   @param: row - index of row, optional  [only in PRO version]
  399. *   @type: public
  400. *   @topic: 1
  401. */
  402. dhtmlXTabBar.prototype.addTab = function(id, text, size, position, row){    // return 0;
  403.     row=row||0;
  404.  
  405.     var z=this.rows[row].tabCount||0;
  406.     if ((!position)&&(position!==0))
  407.         position=z;
  408.  
  409.     var tab=this._createTab(text, size);
  410.     tab.idd=id;
  411.     this.tabsId[id] = tab;
  412.  
  413.     this.rows[row].insertBefore(tab,this.rows[row].childNodes[position]);
  414.  
  415.     this.rows[row].tabCount=z+1;
  416.     this._redrawRow(this.rows[row]);
  417.     this._setSizes();
  418. }
  419.  
  420. /**
  421. *   @desc: showing hover over tab
  422. *   @param: tab - tab in question
  423. *   @type: private
  424. *   @topic: 0
  425. */
  426. dhtmlXTabBar.prototype._showHover=function(tab){
  427.     this._hideHover(tab);
  428.     if (tab==this._lastActive) return;
  429.     switch (this._tbst){
  430.         case "win_text":
  431.            tab._lChild.style.backgroundImage='url('+this._imgPath+this._mode+this._styles[this._cstyle][6]+')';
  432.         break;
  433.     }
  434.     this._lastHower=tab;
  435. }
  436. /**
  437. *   @desc: hiding hover over tab
  438. *   @param: tab - tab in question
  439. *   @type: private
  440. *   @topic: 0
  441. */
  442. dhtmlXTabBar.prototype._hideHover=function(tab){
  443.     if ((!this._lastHower)||(this._lastHower==tab)||(this._lastHower==this._lastActive))
  444.         return;
  445.     switch (this._tbst){
  446.         case "win_text":
  447.                this._lastHower._lChild.style.backgroundImage='url('+this._imgPath+this._mode+this._styles[this._cstyle][1]+')';
  448.         break;
  449.     }
  450.     this._lastHower=null;
  451. }
  452.  
  453. /**
  454. *   @desc: return tab by it's id
  455. *   @param: tabId - id of searced tab
  456. *   @type: private
  457. *   @topic: 1
  458. */
  459. dhtmlXTabBar.prototype._getTabById=function(tabId){
  460.     return this.tabsId[tabId];
  461. }
  462.  
  463. /**
  464. *   @desc: switch tab to active state
  465. *   @param: tabId - id of tab
  466. *   @type: public
  467. *   @topic: 1
  468. */
  469. dhtmlXTabBar.prototype.setTabActive=function(tabId){
  470.     var tab=this._getTabById(tabId);
  471.     if (tab) this._setTabActive(tab);
  472. }
  473. /**
  474. *   @desc: switch tab to active state
  475. *   @param: tab - tab object
  476. *   @type: private
  477. *   @topic: 0
  478. */
  479. dhtmlXTabBar.prototype._setTabActive=function(tab){
  480.     if ((this._onsel)&&(!this._onsel(tab.idd,this._lastActive?this._lastActive.idd:null))) return;
  481.     if (this._lastActive)
  482.         this._lastActive.className=this._lastActive.className.replace(/dhx_tab_element_active/g,"dhx_tab_element_inactive");
  483.     tab.className=tab.className.replace(/dhx_tab_element_inactive/g,"dhx_tab_element_active");
  484.     if  ((this._lastActive)&&(this._styles[this._cstyle][10]))
  485.         this._lastActive.style.backgroundColor=this._styles[this._cstyle][10];
  486.     if  (this._styles[this._cstyle][11])
  487.         tab.style.backgroundColor=this._styles[this._cstyle][11];
  488.  
  489. //#4DTabs:23052006{
  490.     if (this._vMode){
  491.       switch (this._tbst){
  492.           case "win_text":
  493.               if (this._lastActive){
  494.               this._lastActive._lChild.style.backgroundImage='url('+this._imgPath+this._mode+this._styles[this._cstyle][1]+')';
  495.               this._lastActive.childNodes[0].childNodes[0].src=this._imgPath+this._mode+this._styles[this._cstyle][0];
  496.               this._lastActive.childNodes[1].childNodes[0].src=this._imgPath+this._mode+this._styles[this._cstyle][2];
  497.               this._lastActive.style.height=parseInt(this._lastActive.style.height)-this._styles[this._cstyle][9]+"px";
  498.               this._lastActive._lChild.style.height=parseInt(this._lastActive._lChild.style.height)-this._styles[this._cstyle][9]+"px";
  499.               this._lastActive.style[this._align=="right"?"marginBottom":"marginTop"]="0px"
  500.               this._lastActive.style.width=this._height+1+"px";
  501.               if (this._bMode)
  502.                   this._lastActive._lChild.style.width=this._height+1+"px";
  503.               }
  504.  
  505.               tab._lChild.style.backgroundImage='url('+this._imgPath+this._mode+this._styles[this._cstyle][4]+')';
  506.               tab.childNodes[0].childNodes[0].src=this._imgPath+this._mode+this._styles[this._cstyle][3];
  507.               tab.childNodes[1].childNodes[0].src=this._imgPath+this._mode+this._styles[this._cstyle][5];
  508.               tab.style.height=parseInt(tab.style.height)+this._styles[this._cstyle][9]+"px";
  509.               tab._lChild.style.height=parseInt(tab._lChild.style.height)+this._styles[this._cstyle][9]+"px";
  510.               tab.style[this._align=="right"?"marginBottom":"marginTop"]="-3px"
  511.               tab.style.width=this._height+3+"px";
  512.               if (this._bMode)
  513.                   tab._lChild.style.width=this._height+3+"px";
  514.           break;
  515.       }
  516.     }
  517.     else
  518. //#}
  519.     {
  520.       switch (this._tbst){
  521.           case "win_text":
  522.               if (this._lastActive){
  523.               this._lastActive._lChild.style.backgroundImage='url('+this._imgPath+this._mode+this._styles[this._cstyle][1]+')';
  524.               this._lastActive.childNodes[0].childNodes[0].src=this._imgPath+this._mode+this._styles[this._cstyle][0];
  525.               this._lastActive.childNodes[1].childNodes[0].src=this._imgPath+this._mode+this._styles[this._cstyle][2];
  526.               this._lastActive.style.width=parseInt(this._lastActive.style.width)-this._styles[this._cstyle][9]+"px";
  527.               this._lastActive._lChild.style.width=parseInt(this._lastActive._lChild.style.width)-this._styles[this._cstyle][9]+"px";
  528.               this._lastActive.style[this._align=="left"?"marginLeft":"marginRight"]="0px"
  529.               this._lastActive.style.height=this._height+1+"px";
  530. //#4DTabs:23052006{
  531.               if (this._bMode)
  532.                   this._lastActive._lChild.style.height=this._height+1+"px";
  533. //#}
  534.               }
  535.  
  536.               tab._lChild.style.backgroundImage='url('+this._imgPath+this._mode+this._styles[this._cstyle][4]+')';
  537.               tab.childNodes[0].childNodes[0].src=this._imgPath+this._mode+this._styles[this._cstyle][3];
  538.               tab.childNodes[1].childNodes[0].src=this._imgPath+this._mode+this._styles[this._cstyle][5];
  539.               tab.style.width=parseInt(tab.style.width)+this._styles[this._cstyle][9]+"px";
  540.               tab._lChild.style.width=parseInt(tab._lChild.style.width)+this._styles[this._cstyle][9]+"px";
  541.               tab.style[this._align=="left"?"marginLeft":"marginRight"]="-3px"
  542.               tab.style.height=this._height+3+"px";
  543. //#4DTabs:23052006{
  544.               if (this._bMode)
  545.                   tab._lChild.style.height=this._height+3+"px";
  546. //#}
  547.           break;
  548.       }
  549.     }
  550.  
  551.  
  552.  
  553.  
  554.     this._setContent(tab);
  555.  
  556.  
  557.     this._lastActive=tab;
  558. }
  559.  
  560.  
  561.  
  562.  
  563.  
  564. /**
  565. *   @desc: create DOM structures of tab
  566. *   @param: text - tab content
  567. *   @param: type - type of tab
  568. *   @param: size - width (height) of the tab
  569. *   @type: private
  570. *   @topic: 0
  571. */
  572. dhtmlXTabBar.prototype._createTab = function(text,size){
  573.     var tab=document.createElement("DIV");
  574.     tab.className='dhx_tab_element dhx_tab_element_inactive';
  575.     var thml="";
  576.  
  577.     switch (this._tbst){
  578.         case 'text':
  579.             thml=text;
  580.         break;
  581.         case 'win_text':
  582. //#4DTabs:23052006{
  583.             if (this._vMode)
  584.             {
  585.             thml='<div style="position:absolute; '+(this._bMode?"right":"left")+':0px; top:0px; height:'+this._styles[this._cstyle][7]+'px; width:'+(this._height+3)+'px;"><img src="'+this._imgPath+this._mode+this._styles[this._cstyle][0]+((this._bMode&&(_isFF||_isOpera))?'" style="position:absolute; right:1px;"':'"')+'></div>';
  586.             thml+='<div style="position:absolute; '+(this._bMode?"right":"left")+':0px; bottom:0px; height:'+this._styles[this._cstyle][8]+'px; width:'+(this._height+3)+'px;"><img src="'+this._imgPath+this._mode+this._styles[this._cstyle][2]+((this._bMode&&(_isFF||_isOpera))?'" style="position:absolute; right:1px;"':'"')+'></div>';
  587.             thml+='<div style="position:absolute; background-repeat: repeat-y; background-image:url('+this._imgPath+this._mode+this._styles[this._cstyle][1]+'); width:'+(this._height)+'px; left:0px; top:'+this._styles[this._cstyle][7]+'px; height:'+(parseInt(size||this._tabSize)-this._styles[this._cstyle][8]-this._styles[this._cstyle][7]+"px")+'">'+text+'</div>';
  588.             }
  589.             else
  590. //#}
  591.             {
  592.             thml='<div style="position:absolute; '+(this._bMode?"bottom":"top")+':0px; left:0px; width:'+this._styles[this._cstyle][7]+'px; height:'+(this._height+3)+'px;"><img src="'+this._imgPath+this._mode+this._styles[this._cstyle][0]+((this._bMode&&_isFF)?'" style="position:absolute; bottom:0px;"':'"')+'></div>';
  593.             thml+='<div style="position:absolute; '+(this._bMode?"bottom":"top")+':0px; right:0px; width:'+this._styles[this._cstyle][8]+'px; height:'+(this._height+3)+'px;"><img src="'+this._imgPath+this._mode+this._styles[this._cstyle][2]+((this._bMode&&_isFF)?'" style="position:absolute; bottom:0px; left:0px;"':'"')+'></div>';
  594.             thml+='<div style="position:absolute; background-repeat: repeat-x; background-image:url('+this._imgPath+this._mode+this._styles[this._cstyle][1]+'); height:'+(this._height+(this._bMode?1:3))+'px; top:0px; left:'+this._styles[this._cstyle][7]+'px; width:'+(parseInt(size||this._tabSize)-this._styles[this._cstyle][8]-this._styles[this._cstyle][7]+"px")+';"><div style="padding-top:3px;">'+text+'<div></div>';
  595.             }
  596.             if (!this._styles[this._cstyle][10]) tab.style.backgroundColor='transparent';
  597.             else tab.style.backgroundColor=this._styles[this._cstyle][10];
  598.         break;
  599.         }
  600.     tab.innerHTML=thml;
  601.     tab._lChild=tab.childNodes[tab.childNodes.length-1];
  602.  
  603.  
  604. //#4DTabs:23052006{
  605.    if (this._vMode)
  606.         {
  607.         tab.style.height=size||this._tabSize;
  608.         tab.style.width=this._height+1+"px";
  609.         }
  610.     else
  611. //#}
  612.         {
  613.         tab.style.width=size||this._tabSize;
  614.         tab.style.height=this._height+1+"px";
  615.         }
  616.  
  617.     tab._offsetSize=parseInt(size||this._tabSize);
  618.     return tab;
  619. }
  620.  
  621. /**
  622. *   @desc: reinitialize  tabbar
  623. *   @type: public
  624. *   @topic: 0
  625. */
  626. dhtmlXTabBar.prototype.clearAll = function(){
  627.     this.tabsId=new Array();
  628.     this.rows=new Array();
  629.     this._lastActive=null;
  630.     this._lastHower=null;
  631.     this.entBox.innerHTML="";
  632.     this._createSelf();
  633.     this.setStyle(this._cstyle);
  634. }
  635.  
  636.  
  637.  
  638. /**
  639. *   @desc: reinitialize  tabbar
  640. *   @param: path - path to image folder
  641. *   @type: public
  642. *   @topic: 0
  643. */
  644. dhtmlXTabBar.prototype.setImagePath = function(path){
  645.     this._imgPath=path;
  646. }
  647.  
  648.  
  649.  
  650.  
  651. /**
  652. *     @desc: load tabbar from xml string
  653. *     @type: public
  654. *     @param: xmlString - XML string
  655. *      @param: afterCall - function which will be called after xml loading
  656. *     @topic: 0
  657. */
  658. dhtmlXTabBar.prototype.loadXMLString=function(xmlString,afterCall){
  659.         this.XMLLoader=new dtmlXMLLoaderObject(this._parseXML,this);
  660.         this.waitCall=afterCall||0;
  661.         this.XMLLoader.loadXMLString(xmlString);
  662.         };
  663. /**
  664. *     @desc: load tabbar from xml file
  665. *     @type: public
  666. *     @param: file - link too XML file
  667. *      @param: afterCall - function which will be called after xml loading
  668. *     @topic: 0
  669. */
  670.     dhtmlXTabBar.prototype.loadXML=function(file,afterCall){
  671.         this.XMLLoader=new dtmlXMLLoaderObject(this._parseXML,this);
  672.         this.waitCall=afterCall||0;
  673.         this.XMLLoader.loadXML(file);
  674.     }
  675.  
  676.  
  677.     dhtmlXTabBar.prototype._getXMLContent=function(node){
  678.        var text="";
  679.        for (var i=0; i<node.childNodes.length; i++)
  680.             {
  681.                 var z=node.childNodes[i];
  682.                 text+=(z.nodeValue===null?"":z.nodeValue);
  683.             }
  684.        return text;
  685.     }
  686. /**
  687. *     @desc: parse xml of tabbar
  688. *     @type: private
  689. *     @param: that - tabbar object
  690. *      @param: obj - xmlLoader object
  691. *     @topic: 0
  692. */
  693.     dhtmlXTabBar.prototype._parseXML=function(that,a,b,c,obj){
  694.         var selected="";
  695.         if (!obj) obj=that.XMLLoader;
  696.  
  697.             var atop=obj.getXMLTopNode("tabbar");
  698.             var arows = obj.doXPath("//row",atop);
  699. //#href_support:24052006{
  700.             that._hrfmode=atop.getAttribute("hrefmode")||that._hrfmode;
  701. //#}
  702. //#xml_config:24052006{
  703.             that._margin =atop.getAttribute("margin")||that._margin;
  704.             that._align  =atop.getAttribute("align") ||that._align;
  705.             that._offset =atop.getAttribute("offset")||that._offset;
  706.  
  707.             var acs=atop.getAttribute("tabstyle");
  708.             if (acs) that.setStyle(acs);
  709.  
  710.             acs=atop.getAttribute("skinColors");
  711.             if (acs) that.setSkinColors(acs.split(",")[0],acs.split(",")[1]);
  712. //#}
  713.             for (var i=0; i<arows.length; i++){
  714.                 var atabs = obj.doXPath("./tab",arows[i]);
  715.                 for (var j=0; j<atabs.length; j++){
  716.                     var width=atabs[j].getAttribute("width");
  717.                     var name=that._getXMLContent(atabs[j]);
  718.                     var id=atabs[j].getAttribute("id");
  719.                     that.addTab(id,name,width,"",i);
  720.                     if (atabs[j].getAttribute("selected")) selected=id;
  721.  
  722. //#href_support:24052006{
  723.                     if (that._hrfmode)
  724.                         that.setContentHref(id,atabs[j].getAttribute("href"));
  725.                     else
  726. //#}
  727. //#content_from_xml:24052006{
  728.                     for (var k=0; k<atabs[j].childNodes.length; k++)
  729.                         if (atabs[j].childNodes[k].tagName=="content")
  730.                             that.setContentHTML(id,that._getXMLContent(atabs[j].childNodes[k]));
  731. //#}
  732.  
  733.  
  734.                 }
  735.             }
  736.         if (selected) that.setTabActive(selected);
  737.         if (that.dhx_xml_end) that.dhx_xml_end(that);
  738.     }
  739.  
  740.     /**
  741.     *     @desc: set function called after xml loading/parsing ended
  742.     *     @param: func - event handling function
  743.     *     @type: public
  744.     *     @edition: Professional
  745.     *     @topic: 2
  746.     *     @event:  onXMLLoadingEnd
  747.     *     @eventdesc: event fired simultaneously with ending XML parsing, new items already available in tabbar
  748.     *     @eventparam: tabbar object
  749.     */
  750.     dhtmlXTabBar.prototype.setOnLoadingEnd=function(func){
  751.         if (typeof(func)=="function")
  752.                 this.dhx_xml_end=func;
  753.             else
  754.                 this.dhx_xml_end=eval(func);
  755.     };
  756.  
  757. //#href_support:24052006{
  758. /**
  759. *     @desc: set mode of loading external content
  760. *     @type: public
  761. *     @param: mode - href mode - ifram/iframes/ajax
  762. *     @topic: 0
  763. */
  764.           dhtmlXTabBar.prototype.setHrefMode=function(mode){
  765.             this._hrfmode=mode;
  766.         }
  767. /**
  768. *     @desc: set content as a href to an external file
  769. *     @type: public
  770. *     @param: href - link too external file
  771. *     @topic: 1
  772. */
  773.           dhtmlXTabBar.prototype.setContentHref=function(id,href){
  774.             if (!this._hrefs)   this._hrefs=new Array();
  775.             this._hrefs[id]=href;
  776.  
  777.             switch(this._hrfmode){
  778.                 case "iframe":
  779.                         if (!this._glframe){
  780.                             var z=document.createElement("DIV");
  781.                             z.style.width='100%';
  782.                             z.style.height='100%';
  783.                             z.innerHTML="<iframe frameborder='0' width='100%' height='100%' src='about:blank'></iframe>";
  784.                             this._glframe=z.childNodes[0];
  785.                             this._conZone.appendChild(this._glframe);
  786.                             }
  787.                     break;
  788.                 case "iframes":
  789.                             var z=document.createElement("DIV");
  790.                             z.style.width='100%';
  791.                             z.style.height='100%';
  792.                             z.style.display='none';
  793.                             z.innerHTML="<iframe frameborder='0' width='100%' height='100%' src='about:blank'></iframe>";
  794.                             z.childNodes[0].src=href;
  795.                             this.setContent(id,z);
  796.                             this._conZone.appendChild(z);
  797.                     break;
  798.                 case "ajax":
  799.                             var z=document.createElement("DIV");
  800.                             z.style.width='100%';
  801.                             z.style.height='100%';
  802.                             this.setContent(id,z);
  803.                     break;
  804.             }
  805.         }
  806.  
  807. /**
  808. *     @desc: return window of tab content for iframe based tabbar
  809. *     @type: public
  810. *     @param: tab_id - tab id
  811. *     @topic: 1
  812. */
  813.         dhtmlXTabBar.prototype.tabWindow=function(tab_id){
  814.             if  ((this._hrfmode=="iframes")||(this._hrfmode=="iframe"))
  815.                 return (this._content[tab_id]?this._content[tab_id].childNodes[0].contentWindow:null);
  816.         }
  817.  
  818.           dhtmlXTabBar.prototype._ajaxOnLoad=function(obj,a,b,c,loader){
  819.             var z=loader.getXMLTopNode("content");
  820.             var id=z.getAttribute("tab");
  821.             obj._content[id].innerHTML= obj._getXMLContent(z);
  822.  
  823.             //#size_adjust:18072006{
  824.                 obj.adjustSize();
  825.             //#}
  826.         }
  827.  
  828. //#}
  829.  
  830.  
  831. /**
  832. *     @desc: set content of tab
  833. *     @type: public
  834. *     @param: id - id of tab
  835. *     @param: nodeId - id of container, or container object
  836. *     @topic: 3
  837. *     @event: onClick
  838. *     @eventdesc: event called when any tab selected
  839. *     @eventparam: id - id of tab
  840. *     @eventreturn: if false returned the selection aborted
  841. *     @event: onClick
  842. */
  843.     dhtmlXTabBar.prototype.setOnSelectHandler=function(func){
  844.         if (typeof(func)=="function")
  845.                 this._onsel=func;
  846.             else
  847.                 this._onsel=eval(func);
  848.     }
  849. /**
  850. *     @desc: set content of tab
  851. *     @type: public
  852. *     @param: id - id of tab
  853. *     @param: nodeId - id of container, or container object
  854. *     @topic: 1
  855. */
  856.     dhtmlXTabBar.prototype.setContent=function(id,nodeId){
  857.         if (typeof(nodeId)=="string")
  858.             nodeId=document.getElementById(nodeId);
  859.  
  860.         if (!nodeId) return;
  861.  
  862.         this._content[id]=nodeId;
  863.         if (nodeId.parentNode) nodeId.parentNode.removeChild(nodeId);
  864.         nodeId.style.position="absolute";
  865.         nodeId.style.visibility="hidden";
  866.         nodeId.style.display="block";
  867.         nodeId.style.top="0px";        nodeId.style.top="0px";
  868.         this._conZone.appendChild(nodeId);
  869.         if ((this._lastActive)&&(this._lastActive.idd==id)) this._setContent(this._lastActive);
  870.     }
  871. /**
  872. *     @desc: set content of tab
  873. *     @type: private
  874. *     @param: tab - tab in question
  875. *     @topic: 0
  876. */
  877.     dhtmlXTabBar.prototype._setContent=function(tab){
  878. //#href_support:24052006{
  879.         if (this._hrfmode)
  880.            switch(this._hrfmode){
  881.                 case "iframe":
  882.                     this._glframe.src=this._hrefs[tab.idd];
  883.                     return;
  884.                 break;
  885.                 case "iframes":
  886.                     if (this._lastIframe)
  887.                         this._lastIframe.style.visibility="hidden";
  888.                     this._content[tab.idd].style.visibility="";
  889.                     this._lastIframe=this._content[tab.idd];
  890.                     return;
  891.                 break;
  892.                 case "ajax":
  893.                     var z=this._content[tab.idd];
  894.                     if (!z._loaded) {
  895.                         z.innerHTML="<div class='dhx_ajax_loader'><img src='"+this._imgPath+"loading.gif' /> Loading...</div>";
  896.                         (new dtmlXMLLoaderObject(this._ajaxOnLoad,this,true)).loadXML(this._hrefs[tab.idd]);
  897.                         z._loaded=true;
  898.                         }
  899.                 break;
  900.            }
  901. //#}
  902.  
  903.  
  904.         if ((this._lastActive)&&(this._content[this._lastActive.idd]))
  905.             this._content[this._lastActive.idd].style.visibility='hidden';
  906.  
  907.         if (this._content[tab.idd])
  908.             this._content[tab.idd].style.visibility='';
  909.  
  910.         //#size_adjust:18072006{
  911.             this.adjustSize();
  912.         //#}
  913.     }
  914. /**
  915. *     @desc: set content of tab, as HTML string
  916. *     @type: public
  917. *     @param: id - id of tab
  918. *     @param: html - html string
  919. *     @topic: 1
  920. */
  921.     dhtmlXTabBar.prototype.setContentHTML=function(id,html){
  922.         var z=document.createElement("DIV");
  923.         z.style.width="100%";
  924.         z.style.height="100%";
  925.         z.style.overflow="auto";
  926.         z.innerHTML=html;
  927.         this.setContent(id,z);
  928.     }
  929.  
  930. /**
  931. *     @desc: set style used for tabbar
  932. *     @type: public
  933. *     @param: name - any valid style name
  934. *     @topic: 0
  935. */
  936.     dhtmlXTabBar.prototype.setStyle=function(name){
  937.         if (this._styles[name]){
  938.                 this._cstyle=name;
  939.                 if(this._styles[this._cstyle][12])
  940.                     this._conZone.style.backgroundColor=this._styles[this._cstyle][12];
  941.             }
  942.     }
  943.  
  944.  
  945. //#trash:19052006{
  946.     dhtmlXTabBar.prototype.allignToContainer=function(id,mode){
  947.         if (id)
  948.             this._conZone.style.display='none';
  949.  
  950.         if (typeof(id)!="object")
  951.             id=document.getElementById(id);
  952.         if (!id) return;
  953.  
  954.         this.entBox.style.position='absolute';
  955.         document.body.appendChild(this.entBox);
  956.  
  957.         switch(mode){
  958.             case "t":
  959.                 this.entBox.style.top=getAbsoluteTop(id)-this.entBox.offsetHeight+"px";
  960.                 this.entBox.style.left=getAbsoluteLeft(id)-this.entBox.offsetWidth+"px";
  961.             break;
  962.         }
  963.         }
  964.  
  965. dhtmlXTabBar.prototype.setTabBarStyle = function(name){
  966.     this._tbst=name;
  967. }
  968. //#}
  969.  
  970. /**
  971. *     @desc: enable/disable content zone (enabled by default)
  972. *     @type: public
  973. *     @param: mode - true/false
  974. *     @topic: 0
  975. */
  976.     dhtmlXTabBar.prototype.enableContentZone=function(mode){
  977.         this._conZone.style.display=convertStringToBoolean(mode)?"":'none';
  978.         }
  979.  
  980. /**
  981. *     @desc: allow to set skin specific color, must be used AFTER selecting skin
  982. *     @type: public
  983. *     @param: a_tab - color of activ tab
  984. *     @param: p_tab - color of passive tab
  985. *     @param: c_zone - color of content zone  (optional)
  986. *     @topic: 0
  987. */
  988.     dhtmlXTabBar.prototype.setSkinColors=function(a_tab,p_tab,c_zone){
  989.         this._styles[this._cstyle][10]=p_tab;
  990.         this._styles[this._cstyle][11]=a_tab;
  991.         this._conZone.style.backgroundColor=c_zone||a_tab;
  992.     }
  993.  
  994. /**
  995. *     @desc: get id of current active tab
  996. *     @type: public
  997. *     @return: id of current active tab
  998. *     @topic: 0
  999. */
  1000. dhtmlXTabBar.prototype.getActiveTab=function(){
  1001.     if (this._lastActive) return this._lastActive.idd;
  1002.     return null;
  1003. }
  1004. /**
  1005. *     @desc: select tab next to active
  1006. *     @type: public
  1007. *     @return: id of current active tab
  1008. *     @topic: 0
  1009. */
  1010. dhtmlXTabBar.prototype.goToNextTab=function(){
  1011.     if (this._lastActive){
  1012.         if (this._lastActive.nextSibling.idd){
  1013.             this._setTabActive(this._lastActive.nextSibling);
  1014.             return this._lastActive.nextSibling.idd;
  1015.             }
  1016.         else
  1017.             if (this._lastActive.parentNode.nextSibling){
  1018.                 var arow=this._lastActive.parentNode.nextSibling;
  1019.                 this._setTabActive(arow.childNodes[0]);
  1020.                 return arow.childNodes[0].idd;
  1021.                 }
  1022.         }
  1023.     return null;
  1024. }
  1025. /**
  1026. *     @desc: select tab previous to active
  1027. *     @type: public
  1028. *     @return: id of current active tab
  1029. *     @topic: 0
  1030. */
  1031. dhtmlXTabBar.prototype.goToPrevTab=function(){
  1032.     if (this._lastActive){
  1033.         if (this._lastActive.previousSibling){
  1034.             this._setTabActive(this._lastActive.previousSibling);
  1035.             return this._lastActive.idd;
  1036.             }
  1037.         else
  1038.             if (this._lastActive.parentNode.previousSibling){
  1039.                 var arow=this._lastActive.parentNode.previousSibling;
  1040.                 this._setTabActive(arow.childNodes[arow.tabCount-1]);
  1041.                 return this._lastActive.idd;
  1042.                 }
  1043.         }
  1044.     return null;
  1045. }
  1046.  
  1047. //#size_adjust:18072006{
  1048. /**
  1049. *     @desc: enable disable auto adjusting height and width   to inner content
  1050. *     @type: public
  1051. *     @param: autoWidth - enable/disable auto adjusting width
  1052. *     @param: autoHeight - enable/disable auto adjusting height
  1053. *     @topic: 0
  1054. */
  1055. dhtmlXTabBar.prototype.enableAutoSize=function(autoWidth,autoHeight){
  1056.     this._ahdj=convertStringToBoolean(autoHeight);
  1057.     this._awdj=convertStringToBoolean(autoWidth);
  1058. }
  1059.  
  1060.  
  1061. /**
  1062. *     @desc: enable / disable auto adjusting height and width   to outer conteiner
  1063. *     @type: public
  1064. *     @param: mode - enable/disable
  1065. *     @topic: 0
  1066. */
  1067. dhtmlXTabBar.prototype.enableAutoReSize=function(mode){
  1068.     if (convertStringToBoolean(mode)){
  1069.     var self=this;
  1070.     if(this.entBox.addEventListener){
  1071.        if ((_isFF)&&(_FFrv<1.8))
  1072.           window.addEventListener("resize",function (){
  1073.                         window.setTimeout(function(){ self.adjustOuterSize(); },10);
  1074.                         },false);
  1075.                 else
  1076.                     window.addEventListener("resize",function (){ if (self.adjustOuterSize) self.adjustOuterSize(); },false);
  1077.        }
  1078.     else if (window.attachEvent)
  1079.                 window.attachEvent("onresize",function(){
  1080.                     if (self._resize_timer) window.clearTimeout(self._resize_timer);
  1081.                     if (self.adjustOuterSize)
  1082.                         self._resize_timer=window.setTimeout(function(){ self.adjustOuterSize(); },500);
  1083.                 });
  1084.  
  1085.         }
  1086. }
  1087.  
  1088. /**
  1089. *     @desc: set control size
  1090. *     @type: public
  1091. *     @param: width - new width
  1092. *     @param: height - new height
  1093. *     @param: contentZone - if set to true, than width and height set only to content zone
  1094. *     @topic: 0
  1095. */
  1096. dhtmlXTabBar.prototype.setSize=function(width,height,contentZone){
  1097.     if (contentZone){
  1098.         //#4DTabs:23052006{
  1099.             if(!this._vMode)
  1100.                 height+=20;
  1101.             else
  1102.         //#}
  1103.                 width+=20;
  1104.     }
  1105.  
  1106.         this.height=height+"px";
  1107.         this.width=width+"px";
  1108.  
  1109.         this._lineA.style[this._vMode?"left":"top"]=(this._bMode?0:(this._height+2))+"px";
  1110.         this._lineA.style[this._vMode?"height":"width"]=this[this._vMode?"height":"width"];
  1111.  
  1112. //#4DTabs:23052006{
  1113.         if(this._vMode){
  1114.             for (var i=0; i<this.rows.length; i++)
  1115.                 this.rows[i].style.height=parseInt(this.height)+"px";
  1116.  
  1117.             this._conZone.style.height=height;
  1118.             }
  1119.         else
  1120. //#}
  1121.            {
  1122.             this._conZone.style.width=this.width;
  1123.             for (var i=0; i<this.rows.length; i++)
  1124.                 this.rows[i].style.width=parseInt(this.width)+"px";
  1125.             }
  1126.             for (var i=0; i<this.rows.length; i++)
  1127.                 this._redrawRow(this.rows[i]);
  1128.             this._setSizes();
  1129.  
  1130. }
  1131.  
  1132. dhtmlXTabBar.prototype.adjustOuterSize=function(){
  1133.     this.setSize(this.entBox.offsetWidth,this.entBox.offsetHeight,false);
  1134. }
  1135.  
  1136. dhtmlXTabBar.prototype.adjustSize=function(){
  1137.             var flag=false; var x=this._conZone.offsetWidth; var y=this._conZone.offsetHeight;
  1138.             if ((this._ahdj)&&(this._conZone.scrollHeight>this._conZone.offsetHeight)){
  1139.                 y=this._conZone.scrollHeight;
  1140.                 flag=true;
  1141.             }
  1142.  
  1143.             if ((this._awdj)&&(this._conZone.scrollWidth>this._conZone.offsetWidth)){
  1144.                 x=this._conZone.scrollWidth;
  1145.                 flag=true;
  1146.             }
  1147.             if (flag) this.setSize(x,y,true);
  1148. }
  1149. //#}
  1150.  
  1151.