JAME.Package('JAME.Components.Pulldown');

JAME.Components.Pulldown = function (json,title,selected) {

	this.container = JAME.DOM.createNode('div');
	this.container.className='pulldown';

	JAME.CSS.setStyles(this.container,{
		overflow:'hidden'
	})

	JAME.extend(this,new JAME.Events.EventDispatcher());

	if(json.tagName){
		if(json.tagName.toLowerCase()!='select') return;

		var elem = json;
		json	 = [];
		var options = elem.getElementsByTagName('option');
		for(var i =1,ln=options.length;i<ln;i++)
			json.push({id:options[i].value,value:options[i].innerHTML});
		JAME.CSS.setStyles(this.container,{
			width:parseInt(JAME.CSS.getStyle(elem,'width'))+2,
			height:JAME.CSS.getStyle(elem,'height')	
		});
		elem.parentNode.replaceChild(this.container, elem);
	}



	var firstchild = JAME.DOM.createNode('span');
	firstchild.className='default';
	firstchild.innerHTML=title;
	this.container.appendChild(firstchild);

	for(var i=0,ln=json.length;i<ln;i++){
		var child = JAME.DOM.createNode('span');
		child.className= selected ==i ? 'element selected' : 'element';
		child.id="element"+json[i].id;
		child.innerHTML=json[i].value;
		this.container.appendChild(child);
	}
	this.setUpPullDownListeners();
}

JAME.Components.Pulldown.prototype = {

	setUpPullDownListeners: function() {
		var self      = this;
		var container = this.container;

		this.isClosed=true;

		var children  = container.children;
		this.height    = 0;
		this.originalHeight = JAME.CSS.getStyle(container,'height','-padding');

		for(var i=0,ln=children.length;i<ln;i++)
			this.height+=parseInt(JAME.CSS.getStyle(children[i],'height'));

		container.firstChild.onclick=function(e) {	
			e = JAME.Events.Normalize(e);
			e.stopPropagation();
			self.togglePulldown();
		};

		var timer = undefined;
		JAME.Events.addListener(self.container,'mouseleave',function(e) {	

			if(timer) clearTimeout(timer);

			timer = setTimeout(function() {
				new JAME.FX({duration:200}).Tween(self.container,{height:[self.originalHeight]}).queue(function() {
					self.isClosed=true;
					timer=undefined;
				})
			},400);
		});

		JAME.Events.addListener(container,'mouseenter',function(e) {	

			if(timer) clearTimeout(timer);

			timer = setTimeout(function() {
				new JAME.FX({duration:200}).Tween(self.container,{height:[self.height]}).queue(function() {
					self.isClosed=false;
					timer=undefined;
				})
			},400);

		});


		JAME.Events.addListener(self.container,'mouseover', function(e) {	

			if(e.target.tagName.toLowerCase()!='span') return;
			if(e.target===self.container.firstChild) return;
			for(var i=0,ln=children.length;i<ln;i++)
				JAME.DOM.removeClass(children[i],'selected');

			JAME.DOM.toggleClass(e.target,'selected');
		});


		container.onclick = function(e) {	
			e = JAME.Events.Normalize(e);

			for(var i=0,ln=children.length;i<ln;i++)
				JAME.DOM.removeClass(children[i],'selected');

			if(e.target.tagName.toLowerCase()=='span'){
				JAME.DOM.toggleClass(e.target,'selected');
			}
			new JAME.FX({duration:200}).Tween(container,{height:[self.originalHeight]}).queue(function() {
				self.isClosed=true;
				container.firstChild.innerHTML=e.target.innerHTML.replace(/&nbsp;/g,'');
				self.dispatch('onChange',e.target,container);
			})
		}
	},

	togglePulldown : function() {
		var self = this;
		new JAME.FX({duration:200}).Tween(this.container,{height:this.isClosed? [this.height]:[this.originalHeight]}).queue(function() {
			self.isClosed=!self.isClosed;
		})
	}
};