function $(o){ return document.getElementById(o);}
function TabPanel(title, content, status) {
	this.titleContainer = title;
	this.contentContainer = content;
	this.collapseStatus = status;
	this.tabPanelCollection = null;
	this.ChangeArrowStatus = function (container, iconSrc) {
		// change arrow status of current panel into open status
		var arrowArr = container.getElementsByTagName ("img");
		for(var i=0; i <arrowArr.length; i++) {
			if(arrowArr[i].name == "arrow_action")
			{
				arrowArr[i].src = iconSrc;
			}
		}	
	}
}

TabPanel.prototype.Collapse = function () {}

function TabPanelCollections() {
	this.self = this;
	this.tabPanels = new Array();
	this.tabTitleGroupName = "$tabTitlePanel"; 
	this.tabContentGroupName = "$tabContentPanel";
	this.ClosedIcon = new Image();
	this.ClosedIcon.src = "/images/arrow_close.gif";
	this.OpenedIcon = new Image();
	this.OpenedIcon.src = "/images/arrow_open.gif";
	this.isCollapse = false;
}
// change status of arrow, param is element that is choosen to open.
// and close all
TabPanelCollections.prototype.ExpandItem = function(itemExpansed) {
	if(itemExpansed) {
		for(var i=0; i<this.tabPanels.length; i++) {
			if(this.tabPanels[i].titleContainer.id == itemExpansed) {
				this.tabPanels[i].contentContainer.style.display = "block";
				this.tabPanels[i].collapseStatus = false;
				this.tabPanels[i].ChangeArrowStatus(this.tabPanels[i].titleContainer, this.OpenedIcon.src);
			}
		}
	}
}

TabPanelCollections.prototype.AddItem = function(titleId, contentId, status) {
 	var title = $(titleId);
	var content = $(contentId);
	status = (status)? status :  true;	
	var tabObj = new TabPanel(title, content, status);
	tabObj.tabPanelCollection = this;
	this.tabPanels[this.tabPanels.length] = tabObj;	
	//tabObj.titleContainer.setAttribute("name", this.tabGroupName);
	var tabPanel = this;
	//alert(tabObj.contentContainer.id);
	tabObj.titleContainer.onclick = function(evt) {
		// get node | element that user click
		var curTab = Container.DOM.GetCurrentElementFireEvent (evt);
		re = /panel\d?/; // regex for find id
		if(curTab.id == "" || !re.test(curTab.id)) {
			//find node of table which contain id
			while(!re.test(curTab.id)) {
				curTab = curTab.parentNode;
			}
		}
		// save id of element that was clicked
		myCookie.add("RIGHTTABID="+curTab.id);
		//alert(curTab);
		if(tabObj.tabPanelCollection) {
			parentContainer = tabObj.tabPanelCollection;
			tabCollection = tabObj.tabPanelCollection.tabPanels;
			for(var i=0; i<tabCollection.length; i++) {
				tabCollection[i].contentContainer.style.display = "none";
				tabObj.ChangeArrowStatus(tabCollection[i].titleContainer, parentContainer.ClosedIcon.src);
				if(curTab.id == tabCollection[i].titleContainer.id) {
					if(tabCollection[i].collapseStatus == true) {
						tabCollection[i].contentContainer.style.display = "block";
						tabCollection[i].collapseStatus = false;
						tabObj.ChangeArrowStatus(curTab, parentContainer.OpenedIcon.src);
					} else {
						tabCollection[i].contentContainer.style.display = "none";
						tabCollection[i].collapseStatus = true;
						tabObj.ChangeArrowStatus(curTab, parentContainer.ClosedIcon.src);
					}
				} else {

					tabCollection[i].collapseStatus = true;
				}
			} 
		}
	}
}

function PagingSection(sections, navigate, navListener) {
	var self = this;
	this.current = 0;
	this.sections = sections;
	this.navigate = navigate;
	this.gotoPage = function(page) {
		for(var i=0; i <this.sections.length; i++) {
			var elem = document.getElementById(this.sections[i]) ;
			if(page == this.sections[i]) {
				Container.DOM.SetVisibleRow (elem, 1);
			}
			else {
				Container.DOM.SetVisibleRow (elem, 0);
			 }
		}		
	}
	if(this.navigate) {
		this.navigate.onclick = function(evt) {
			if(self.sections.length-1 == self.current) self.current = 0;
			else self.current++;
			//var curElem = Container.DOM.GetCurrentElementFireEvent (evt);
			self.gotoPage(self.sections[self.current] ) ;
		}	
	}
}