var JSelect=Class.create({
	//inicialitzam la classe
	initialize: function(elem, opt) {
		opt = opt || {};
		
		this.options = {
			width: 100,
			height: 100,
			text: "Seleccione una población de la lista",
			onmouseover: null,
			onshowlist: null,
			onhidelist: null,
			onclick: null
		};
		
		Object.extend(this.options, opt);
		
		this.elem=$(elem);
		
		if (!this.elem)
			return;
			
		this.show=false;	
		
		this.poblesStack = this.elem.select('a');
		
		
		var dCont=new Element('div', { 'class': 'selCont' });
		var dLeft=new Element('div', { 'class': 'selL' });
		var dMid=new Element('div', {'class': 'selM' }).update(this.options.text);
		dMid.style.width=this.options.width+"px";
		var dRight=new Element('div', { 'class': 'selR' });
		
		dRight.onmouseover=function() {
			this.className="selROver";
		}
		
		dRight.onmouseout=function() {
			this.className="selR";
		}
		
		dRight.observe('click', this.handleClick.bind(this));
		
		var dbr=new Element('div', { style: 'clear: both' });
		
		this.elem.appendChild(dCont);
		dCont.appendChild(dLeft);
		dCont.appendChild(dMid);
		dCont.appendChild(dRight);
		dCont.appendChild(dbr);
		
		var wTotal=dLeft.getWidth()+dMid.getWidth()+dRight.getWidth();
		
		dCont.style.width=wTotal+"px";
		
		this.dContList=new Element('div', { 'class': 'clear' });
		dCont.appendChild(this.dContList);
		var tl=new Element('div', { 'class': 'tl' });
		var tr=new Element('div', { 'class': 'tr' });
		
		this.dContList.appendChild(tl);
		this.dContList.appendChild(tr);
		
		var wL=tl.getWidth();
		var wR=tr.getWidth();
		var wTot=wTotal-wL-wR;
		
		var t=new Element('div', { 'class': 't' });
		t.style.width=wTot+"px";
		var l=new Element('div', { 'class': 'l' });
		l.style.height=this.options.height+"px";
		this.c=new Element('div', { 'class': 'c' });
		this.c.style.width=wTot+"px";
		this.c.style.height=this.options.height+"px";
		var r=new Element('div', { 'class': 'r' });
		r.style.height=this.options.height+"px";
		var bl=new Element('div', { 'class': 'bl' });
		var b=new Element('div', { 'class': 'b' });
		b.style.width=wTot+"px";
		var br=new Element('div', { 'class': 'br' });
		
		this.dContList.appendChild(t);
		this.dContList.appendChild(l);
		this.dContList.appendChild(this.c);
		this.dContList.appendChild(r);
		this.dContList.appendChild(bl);
		this.dContList.appendChild(b);
		this.dContList.appendChild(br);
		
		this.dContList.style.position="absolute";
		this.dContList.style.width=wTotal+"px";
		this.dContList.style.display='none';
		
		//A partir d'aquest punt posam tots els pobles dins el div central
		this.poblesStack.each(function(elem){
			this.c.appendChild(elem);
			
			elem.observe('mouseover', this.mouseOver.bind(this, elem));
			
			elem.firstChild.onmouseout=function() {
				this.className="lstPob";
			}
			
		}.bind(this));
	},
	
	mouseOver: function(elem) {
		elem.firstChild.className="lstPobOver";
		
		if (this.options.onmouseover) {
			this.options.onmouseover.call(elem);
		}
	},
	
	handleClick: function(e) {
		if (this.show==false) {
			Effect.BlindDown(this.dContList);
			//this.dContList.style.display='block';
			this.show=true;
			
			if (this.options.onshowlist) {
				this.options.onshowlist.call();
			}
		} else {
			Effect.BlindUp(this.dContList);
			//this.dContList.style.display='none';
			this.show=false;
			
			if (this.options.onhidelist) {
				this.options.onhidelist.call();
			}
		}
	}
});