/**
*
* egPropertySheet Class
*/

function egPropertySheet(id, posX, posY, width, height, container) {
	 this.objName = 'propertySheet_'+id;
	 this.id = id;

	 this.x = posX;
	 this.y = posY;
	 this.tabs = 0;

	 this.tabsContainers = new Array();

	 this.activeTab = null;
	 this.selectedTab = null;
	 this.selectedTabIndex = null;

	 this.width = width;
	 this.height = height;

	 this.getHeight = egWindow_getHeight;
	 this.getWidth  = egWindow_getWidth;

	 this.show = egWindow_show;
	 this.hide = egWindow_hide;
	 this.moveTo = egWindow_moveTo;
	 this.displayAt = egWindow_displayAt;

	 this.selectTab = egPropertySheet_selectTab;
	 this.onTab = egPropertySheet_onTab;
	 this.offTab = egPropertySheet_offTab;

	 this.addPage = egPropertySheet_addPage;

   if (!container) {
      container = 'easy-GUI_mainLayer';
   }

	 divRoot = document.getElementById(container);

	 divRoot.innerHTML += '<div id="'+this.id+'" style="position: absolute;">'
+'	<div id="'+this.id+'_tabs" style="height: 21px; margin-left: 2px;"></div>'
+'	<div id="'+this.id+'_panes" class="egPanesFrame" style="height: '+height+'px;"></div>'
+'</div>';

	 div = document.getElementById(this.id);
	 div.style.width  = width + 'px';
	 div.style.height = height + 'px';
	 div.style.left = posX + 'px';
	 div.style.top  = posY + 'px';
}


function egPropertySheet_addPage(title, container) {
	this.tabsContainers[this.tabs] = container;
        
	divTabs = document.getElementById(this.id+'_tabs');

	var tabTemp = '<div style="float: left;">'
		+ ' <div class="egPropertySheetTab" id="'+this.id+'_tab_'+this.tabs+'_on" onmouseover="javascript:cancelBubble(arguments[0]);" style="position: absolute; margin-left: -2px; display: none; z-index: 100;">'
		+ '   <div id="'+this.id+'_tab_'+this.tabs+'_on_title" class="egPropertySheetTabTitleOn">'+ title +'</div><div id="'+this.id+'_tab_'+this.tabs+'_on_separator" class="egPropertySheetTabSeparatorOn">&nbsp;</div>'
		+ ' </div>'
		+ ' <div class="egPropertySheetTab" id="'+this.id+'_tab_'+this.tabs+'" onmouseover="javascript:cancelBubble(arguments[0]);' + this.objName + '.onTab(this);" onmouseout="javascript:cancelBubble(arguments[0]);' + this.objName + '.offTab();" onclick="javascript:' + this.objName + '.selectTab(this, ' + this.tabs + ');">'
		+ '   <div id="'+this.id+'_tab_'+this.tabs+'_title" class="egPropertySheetTabTitle">'+ title +'</div><div id="'+this.id+'_tab_'+this.tabs+'_separator" class="egPropertySheetTabSeparator">&nbsp;</div>'
		+ ' </div>'
		+ '</div>';

		divTabs.innerHTML += tabTemp;

		this.tabs++;
}


function egPropertySheet_selectTab(elem, index) {
	var id = elem.id;

	var onId = id + "_on";
	var onTitleId = id + "_on_title";
	var tabPane = id + "_pane";

	if(this.selectedTab) {
    var egSelectedTabOnId = this.selectedTab.id + "_on";
    var egSelectedTabPane = this.selectedTab.id + "_pane";
		document.getElementById(egSelectedTabOnId).style.display = 'none';
		if(this.tabsContainers[this.selectedTabIndex]) {
			document.getElementById(this.tabsContainers[this.selectedTabIndex]).style.display = 'none';
		}
	}

	this.onTab(elem);
	this.selectedTabIndex = index;
	this.selectedTab = elem;

	if (document.all) {
    /*IE*/
    document.getElementById(onId).style.marginLeft = -(elem.offsetWidth+2);
    document.getElementById(onTitleId).style.width = (elem.offsetWidth+2)+'px';
	}
	else {
    document.getElementById(onTitleId).style.width = (elem.offsetWidth-4)+'px';
	}
	document.getElementById(onId).style.display = 'block';

	if(this.tabsContainers[index]) {
		document.getElementById(this.tabsContainers[index]).style.display = 'block';
	}
}

function egPropertySheet_onTab(elem) {
	if(elem != this.activeTab) {
      this.offTab();
      this.activeTab = elem;
      var id = elem.id;
      var idTitle = id + "_title";

      var idSeparator = id + "_separator";
      document.getElementById(idTitle).className = 'egPropertySheetTabTitleHover';
      document.getElementById(idSeparator).className = 'egPropertySheetTabSeparatorHover';
	}
}

function egPropertySheet_offTab() {
	if(this.activeTab) {
    var id = this.activeTab.id;
    var idTitle = id + "_title";
    var idSeparator = id + "_separator";
		document.getElementById(idTitle).className = 'egPropertySheetTabTitle';
		document.getElementById(idSeparator).className = 'egPropertySheetTabSeparator';
		this.activeTab = null;
	}
}
