iClientPage = function(node, pob){
		this.instID = 'iClientPage' + parseInt(Math.random()*1000000);
		this.node = node;
		this.pob = pob;
		this.queue = pob.queue;
		if (pob instanceof iClientMainBar){
			this.mainBar = pob;
		}else{
			this.mainBar = pob.mainBar;
		}
		this.isOpen = false;
		this.children = new Hash();
		this.inialized = false;
		this.hasNavigation = false;
		this.closedWidth = 0; // base width of mainBar
		this.width = this.closedWidth;
		this.childContainers = new Hash();
		this.debug = this.mainBar.debug;
	}	
	
	iClientPage = iClientPage.extendsFrom(iClientBase);

	iClientPage.prototype.init = function(){
		if (!this.initialized){
			this.objInit();
			// create container		
			//var container = Builder.node('div', {className:'child'}); // create container
			var container = this.createContainer();
			container.className = 'child';
			container.style.display = 'none';
			this.output = container;
			this.initialized = true;
			this.setChildren();
		}
		return this.output;		
	}
	
	
	iClientPage.prototype.setTitle = function(){}
	
	iClientPage.prototype.setNavigation = function(){
		//create navigational bar at the right of current cotainer (append it to parent?), and add the width of nav. to setWidth, so it will slide open further
		if (this.children.keys().length > 0){
			if (!$('navigationOf' + this.instID) ){
				this.hasNavigation = true;
				var div = Builder.node('div', {className:'pageNavigation', id:'childNavigationOf' + this.instID, style:'display:block'});
				Element.setStyle(div, {left:(this.getWidth() - this.navWidth), top:'0px'});
				//append container to output of parentObject
				this.output.appendChild(div);
				// create navigationNodes:
				this.children.each(
					(function(child){
						child = child.value;
						div.appendChild(this.createNavItem(child));
					}).bind(this)
				)
			}else{
				Element.setStyle(div, {left:(this.getWidth() - this.navWidth), top:'0px'});
			}
		}
	}

	iClientPage.prototype.getParentLink = function(){
		return this.pob.getParentLink() + "&" + this.options.get('productName').toString().replace(' ', '_');
	}	
	
	iClientPage.prototype.createNavItem = function(child){
		child.init();
		var childName = child.options.get('productName');
		var productID = child.productID;
		var linkName = '#' + this.getParentLink() + '&' + childName.replace(' ' , "_");
		var arrow = Builder.node('span', {className:'subNavArrow', id:'subNavArrow' + child.productID}, " > ");
		var spanner = Builder.node('a', {href:linkName,className:'childNavItem', style:'display:block;', id:child.instID+"_link"},[childName, arrow]);
		spanner.productID = productID;
		arrow.productID = productID;
		this.addEvent(spanner, 'mouseover', function(){spanner.style.backgroundColor='red'});
		this.addEvent(spanner, 'mouseout', function(){spanner.style.backgroundColor=''});
		this.addEvent(spanner, 'click', this.goTo.bind(this));
		this.addEvent(arrow, 'click', this.goTo.bind(this));
		return spanner;
	}

	iClientPage.prototype.goTo = function(event, elem){
		if (!elem) var elem = Event.element(event);
		var localChildren = new Array();
		var childProductID = elem.productID;
		
		if (!this.isOpen){
			//this.toggle('', true);// this should not happen.. should it?
		}
		this.children.each(
			(function(child){
				var productID = child.key;
				child = child.value;
				if (productID != childProductID) {
					child.isOpen = false;
					child.hide();
				}else{
					var childContainer = this.childContainers.get(childProductID);
					if (child.isOpen) return;
					var node = child.init();
					childContainer.appendChild(node);
					child.draw();
					localChildren.push(child);
				}
			}).bind(this)			
		)
		$A(localChildren).each(
			(function(child){
				child.show();
			}).bind(this)
		)
		this.setSize();
	}
	
	iClientPage.prototype.show = function(){
		this.isOpen = true;
		this._show();
		setTimeout((function(){this.resizeContent()}).bind(this), 300);
		this.setWidth();
		//this.resortChildren();
	}