/**
	* Prototype toolbarItem
	*
	* @version 1.61
	* @requires wps-namespace 
	* @param icon string custom classname for the item
	* @param text string the name of the item
	* @param htmlChild string HTML-string with contents of item (instead of using a name)
	* @param callBack function a function (with context!!!) which is called on click, usually : function(){window.location.href="URI")}
	* @param children array a collection of child-toolbar-items (IMPLEMENTATION MAY BE BUGGY!)
	* @param containerEleme string the kind of element you want to create (defaults to li-node)
	* @author Ivo Toby, Internet Voor Ondernemers (I-V-O), www.i-v-o.nl / blog.i-v-o.nl
	* @copyright I-V-O 2008
	* 
	* 
	*/
	
	wps.toolbar.item = function(icon, text, htmlChild, callBack, children, containerElem){
		this.instID = 'wps.toolbar.item.' + parseInt(Math.random()*1000000);
		if (htmlChild) this.htmlChild = htmlChild;
		if (children) this.items = children;
		if (!containerElem) {
			this.containerElem = "li";
		}else{
			this.containerElem = containerElem;
		}
		this.init(icon, text, callBack);
		this.customEvents = [];
		this.name = text;
		this.li = '';
	}
	
	wps.toolbar.item = wps.toolbar.item.extendsFrom(wps.toolbar);
	
	wps.toolbar.item.prototype.init = function(icon, text, callBack){
		if (this.htmlChild){
			this.link = this.htmlChild;
			//this.link.setAttribute('id', 'htmlChild_'+ this.instID);
			this.link.isCustom = true;
			var li = Builder.node(this.containerElem,[this.link]);
			li.style.display = 'none';
			this.outputNode = li;
		}else{
			this.link = Builder.node('a', {className:icon, id:this.instID}, [text]);
			if (this.items.length){
				Event.observe(this.link, 'click', this.openChildren.bind(this));
				this.drawChildren();
			}else if (callBack) {
				this.link.setAttribute('href', '#');
				this.addEvent(this.link, 'click', callBack);
			}else{
				this.link.setAttribute('href', this.text);
			}
			var li = Builder.node(this.containerElem,[this.link]);
			li.style.display = 'none';
			this.outputNode = li;
		}
	}
	
	wps.toolbar.item.prototype.drawChildren = function(){
		if (!this.items.length) return;
		// make up a container to put childNodes into:
		this.childContainer = Builder.node('div', {id:'ChildrenOf' + this.instID, className:'menuChildContainer', style:'display:none;'}); 
		this.items.each(
			(function(item){
				item.draw(this.childContainer);
			}).bind(this)
		)
		this.outputNode.setAttribute('id', 'parent' + this.instID);
		this.outputNode.appendChild(this.childContainer);
	}
	
	wps.toolbar.item.prototype.openChildren = function(){
		// set Left on IE:
		if (!this.childContainer) return;
		if (this.is_ie()){
			this.childContainer.style.left =  Position.cumulativeOffset(this.outputNode)[0] +'px';
		}

		// add event on the whole document:
		var body = document.getElementsByTagName('body').item(0);
		this.func = this.closeChildren.bindAsEventListener(this);
		Event.observe(body, 'mousedown', this.func);
		Event.stopObserving(this.link, 'click', this.openChildFunc);
		new Effect.PhaseIn(this.childContainer, {duration:'0.2'});
	}

	wps.toolbar.item.prototype.closeChildren = function(e){
		// remove the event on the bodyNode
		var elem = Event.element(e);
		// check whether the parent was clicked again;
		var myParentID = this.outputNode.id.replace('parent', '');
		if ( (myParentID == elem.id ) || (elem.cancelClose) ) return;

		setTimeout(
			(function(){new Effect.PhaseOut(this.childContainer, {duration:'0.20'})}).bind(this),
			500
			);		
		var body = document.getElementsByTagName('body').item(0);
		Event.stopObserving(body, 'mousedown', this.func); // stop observing the mousedown
		Event.observe(this.link, 'click', this.openChildFunc); // reassign the event to my parent
		try{
			this.closeFunc();
		}catch(e){}
	}
	
	wps.toolbar.item.prototype.show = function(){
		new Effect.PhaseIn(this.outputNode, {duration:'0.2'});
	}

	wps.toolbar.item.prototype.hide = function(){
		new Effect.PhaseOut(this.outputNode, {duration:'0.2'});
	}

	wps.toolbar.item.prototype.draw = function(container){
		container.appendChild(this.outputNode);
		this.outputNode.objID = this.instID;
		new Effect.PhaseIn(this.outputNode, {duration:'0.2'});
		// set some styling:
		var dim = Element.getDimensions(this.outputNode);
		if ( (dim) && (this.childContainer) ){
			// set width
			var parentWidth = dim.width;
			this.childContainer.style.width = parentWidth;
			
		}

	}