mClient = function(container, productID){
		this.instID = 'mClient' + parseInt(Math.random()*1000000);
		this.timeoutCounter = 0;
		if (productID) {
			this.productID = productID ;
			this.container = container;
		}else{
			this.productID = 1;
			this.container = $(container);
		}
		this.myOutput = Builder.node('div', {id:this.instID});
	}

	mClient = mClient.extendsFrom(wps.base);
	
	mClient.prototype.init = function(productID){
		if (!productID) productID = this.productID;
		this.ready = false;
		this.waiter();
		var wpsRPC = new wps.rpc;
		//wpsRPC.debug = true;
		wpsRPC.createCall('mollenhagenClient', this.createBars.bind(this), this);
		wpsRPC.call('getChildObjects', 'parentObjectID=' + productID);			
		this.draw();
	}
	
	mClient.prototype.createBars = function(req, parentNode){
		if (!parentNode){
			this.barsDOM = req.responseXML.getElementsByTagName('product').item(0);
		}else{
			this.barsDOM = parentNode; 
		}
		$A(this.barsDOM.childNodes).each(
			(function(aNode){
				if (aNode.nodeName == 'product'){
					this.createBar(aNode);	
				}
			}).bind(this)
		);
		this.ready = true;
	}

	mClient.prototype.createBar = function(productNode){
		var productID = this.getProductProperty(productNode, 'product_id')
		var productName = this.getProductProperty(productNode, 'name');
		var bgColor = this.getProductProperty(productNode, 'BGColor');
		var fgColor = this.getProductProperty(productNode, 'FGColor');
		var contentBGColor = this.getProductProperty(productNode, 'contentBGColor');
		var contentFGColor = this.getProductProperty(productNode, 'contentFGColor');
		var arrowType = this.getProductProperty(productNode, 'Arrowtype');

		var contentContainer =  Builder.node('div', {className:'barContent'});
		if (contentFGColor.replace("#", '')) {
			contentContainer.style.color = contentFGColor;
		}
		if (contentBGColor.replace("#", '')) {
			contentContainer.style.backgroundColor = contentBGColor;
		}

		contentContainer.style.display = 'none';
		contentContainer.productID = productID;
		contentContainer.isOpen = false;

		if (!arrowType) arrowType = 'white';
		var arrow = Builder.node('img', {src:'images/arrow_' + arrowType + '_horiz.gif', className:'arrow'});
		arrow.productID = productID;
		arrow.contentContainer = contentContainer;
		contentContainer.arrow = arrow;

		var arrowContainer = Builder.node('div', {className:'arrowContainer'}, [arrow]);
		arrowContainer.productID = productID;
		arrowContainer.contentContainer = contentContainer;
		
		/*var leftEnd = Builder.node('div', {className:'barLeft'});
		leftEnd.style.color = fgColor;
		leftEnd.style.backgroundColor = bgColor;
		leftEnd.productID = productID;
		leftEnd.contentContainer = contentContainer;
		*/

		var textNode = Builder.node('div', {className:'midTitle'}, [document.createTextNode(productName)])
		textNode.style.color = fgColor;
		textNode.productID = productID;
		textNode.contentContainer = contentContainer;

		var contentMid = Builder.node('div', {className:'barMid'}, [ arrowContainer, textNode]);
		//var contentMid = Builder.node('div', {className:'barMid'}, [textNode]);
		contentMid.style.color = fgColor;
		contentMid.style.backgroundColor = bgColor;
		contentMid.productID = productID;
		contentMid.contentContainer = contentContainer;

		/*var rightEnd = Builder.node('div', {className:'barRight'});
		rightEnd.style.color = fgColor;
		rightEnd.style.backgroundColor = bgColor;
		rightEnd.productID = productID;
		rightEnd.contentContainer = contentContainer;
		*/
		
		//var container = Builder.node('div', {className:'barContainer'}, [leftEnd, rightEnd, contentMid]);
		var container = Builder.node('div', {className:'barContainer'}, [contentMid]);
		container.style.color = fgColor;
		container.style.backgroundColor = bgColor;
		container.productID = productID;
		container.contentContainer = contentContainer;

		this.addEvent(container, 'click', this.openBar.bind(this));
		this.myOutput.appendChild(container);
		this.myOutput.appendChild(contentContainer);
	}

	mClient.prototype.draw = function(){
		if (!this.ready){
			setTimeout(this.draw.bind(this), 500);
			return;
		}
		//new Effect.SlideDown(container.parentNode);
		if (this.productID > 1){
			this.openContainer(this.container.parentNode);
		}
		this.container.appendChild(this.myOutput);
		this.unWaiter();
	}
	
	mClient.prototype.openBar = function(e){
		/* order of business:
		 * - retrieve the container into which the content will be put
		 * - retrieve the ProductID which was clicked.
		 * - create a container (on top) to hold new products
		 * - create a container for content
		 * - create clients in object for child-products
		 * - append the content in properties for this object
		*/
		var elem = Event.element(e);
		var productID = elem.productID;
		var container = elem.contentContainer;
		var arrow = container.arrow;
		
		if (container.isOpen){
			this.closeContainer(container);
			container.isOpen = false;
			var newImgSrc = arrow.getAttribute('src').replace('vert', 'horiz');			 
			arrow.setAttribute('src', newImgSrc);
		}else{
			container.isOpen = true;
			var newImgSrc = arrow.getAttribute('src').replace('horiz', 'vert');
			arrow.setAttribute('src', newImgSrc);
			if (!container.hasContent){
				var newProductContainer = Builder.node('div');
				container.appendChild(newProductContainer);
				var obj = new mClient(newProductContainer, productID);
				obj.init();
				var newContentContainer = Builder.node('div');
				container.appendChild(newContentContainer);
				this.getContentAtProduct(productID, newContentContainer)
				container.hasContent = true;
			}else{
				this.openContainer(container);
			}
		}
		
	}
	
	mClient.prototype.getContentAtProduct = function(productID, container){
		var func = (function(req){this.setContent(req, container)}).bind(this)
		var wpsRPC = new wps.rpc;
		//wpsRPC.debug = true;
		wpsRPC.createCall('mollenhagenClient', func, this);
		wpsRPC.call('getContent', 'objectID=' + productID);		
	}

	mClient.prototype.setContent = function(req, container){
		container.innerHTML = req.responseText;	
	}

	// HELPERS
	
	mClient.prototype.closeContainer = function(container){
		new Effect.SlideUp(container, {duration:'0.3'});
	}

	mClient.prototype.openContainer = function(container){
		new Effect.SlideDown(container, {duration:'0.3'});
	}
	
	mClient.prototype.waiter = function(){
	 	if ($('pageLoader')){
	    	$('pageLoader').style.display='block';
	    }else{
    		//var loaderDiv = document.createElement('div');
    		//loaderDiv.setAttribute('id', 'mClientLoader');
			//loaderDiv.style.zIndex = '999';
			var img = document.createElement('img');
			img.setAttribute('src', 'images/waiter.gif');
			img.setAttribute('id', 'mClientLoader');
			img.style.zIndex = '999';
			img.style.float="left";
			img.align = "left";
			img.valign = "top";
			//loaderDiv.appendChild(img);
			var firstChild = document.getElementsByTagName('body').item(0).childNodes.item(0);
			document.getElementsByTagName('body').item(0).insertBefore(img,firstChild);
	    }	
	}
	
	mClient.prototype.unWaiter = function(){
	    if ($('pageLoader')){
	    	Try.these(
	    		function(){new Effect.Fade($('pageLoader'));},
	    		function(){$('pageLoader').style.display='none';}
	    	)
	    }
	}
	
	mClient.prototype.getProductProperty = function(productNode, propKey){
		var returnValue;
		if (propKey == 'product_id'){
			var ret = $A(productNode.childNodes).findAll(
				(function(aChildNode){
					if (aChildNode.nodeName == 'product_id'){
						returnValue = wps.dom.getElementValue(aChildNode);
						return;
					}
				}).bind(this)
			)
		}else{
			var ret = $A(productNode.childNodes).findAll(
				(function(aChildNode){
					if (aChildNode.nodeName == 'property'){
						if (wps.dom.getNodeValue(aChildNode.getElementsByTagName('key')) == propKey){
							returnValue = wps.dom.getNodeValue(aChildNode.getElementsByTagName('value'));
							return;
						}
						
					}
				}).bind(this)
			)
		}
		return returnValue;
	}