/**
 * This helper will use prototype and scriptaculous to make select-boxes
 * grow and shrink in IE, other browsers will create oversized dropdowns
 * when needed and have no need for this, while IE will either screw up
 * the layout of the page, or never show the extra text in options that
 * are too wide for the select-box.
 * The direction of the growth can be influenced using the classname of
 * the select, class="ie_grow[Left|Right|Any], where Any tells the helper
 * to grow in whatever direction the flow of the document causes.
 * 
 * @constructor
 * @param {Node} sb The Select-element for wich to initialize
 * @param {String} dir The direction in which to expand the box
 */
var SelectboxHelper = function(sb,dir) {
	this.sb = sb;
	this.dir = dir;
	//Gather some evidence
	this.sbwidth = sb.offsetWidth;
	this.sbparentwidth = sb.parentNode.offsetWidth;
	//Set the select up for a fall
	this.sb.style.width = "auto";
	this.init();
}

SelectboxHelper.prototype = {
	/**
	 * Constants for the direction Strings.
	 */
	dirs:{
		left:"Left",
		right:"Right",
		any:"Any"
	},
	/**
	 * The initialization routine, the real constructor ;).
	 */
	init:function() {
		var self = this;//Circular reverences aren't bad, just dangerous ;)
		this.sbmaxwidth = this.sb.offsetWidth;//If things go bump this will proof it
		if (this.sbmaxwidth > this.sbwidth) {
			//Revert to original values
			this.sb.style.width = this.sbwidth + "px";
			//this.sb.parentNode.style.width = this.sbparentwidth + "px";
			this.sb.parentNode.style.position = "relative";

			//Lift it out of the flow if so needed
			if (this.sb.getStyle('position')!='absolute'&&this.dir&&this.dir!=this.dirs.any) this.substitute();
			
			//Setup the handlers to make it grow and shrink
			Event.observe(this.sb, 'focus', function() {
				self.hasFocus = true;
				self.grow();
			});
			Event.observe(this.sb, 'mouseover', function() {
				if (!self.hasFocus) self.grow();;
			});
			Event.observe(this.sb, 'blur', function() {
				self.hasFocus = false;
				self.shrink();
			});
			Event.observe(this.sb, 'mouseout', function() {
				if (!self.hasFocus) self.shrink();
			});
		}
	},
	substitute:function() {
		//var sub = this.sb.cloneNode(true);//This screws up IE.
		var sub = document.createElement("select");
		Element.extend(sub);
		sub.className = "selectReplacement";
		sub.setStyle({
			'float':this.sb.getStyle('float'),
			'position':this.sb.getStyle('position'),
			'left':this.sb.getStyle('left'),
			'right':this.sb.getStyle('right'),
			'top':this.sb.getStyle('top'),
			'bottom':this.sb.getStyle('bottom'),
			'width':this.sb.offsetWidth + "px",
			'height':this.sb.offsetHeight + "px",
			'visibility':'hidden'
		});
		sub.id = this.sb.id + "_selectReplacement";
		this.sb.parentNode.replaceChild(sub, this.sb);
		//Lift it out of the flow
		this.sb.setStyle({'position':'absolute'});
		this.sb.style.top = sub.offsetTop + "px";
		if (this.dir == this.dirs.left) {
			this.sb.style.right = (sub.parentNode.offsetWidth - (sub.offsetLeft + sub.offsetWidth)) + "px";
		}
		if (this.dir == this.dirs.right) {
			this.sb.style.left = sub.offsetLeft + "px";
		}
		sub.parentNode.appendChild(this.sb);
		
	},
	grow:function() {
		if (!this.isGrowing) {
			if (this.isShrinking) this.isShrinking.cancel();
			this.isShrinking = false;
			this.isGrowing = new Effect.Morph(this.sb,{style:'width:' + this.sbmaxwidth + 'px;',duration:0.5});
		}
	},
	shrink:function() {
		if (!this.isShrinking) {
			if (this.isGrowing) this.isGrowing.cancel();
			this.isGrowing = false;
			this.isShrinking = new Effect.Morph(this.sb,{style:'width:'+this.sbwidth+'px;'});
		}
	}
}

$$("select").each(function(sb){
	var re = /.*\bie_grow([\w]+)\b.*/i
	var direction = re.test(sb.className)?sb.className.replace(re, "$1"):"";
	if (direction=="Right"||direction=="Left"||direction=="Any") var sh = new SelectboxHelper(sb,direction); //Only apply to 'special' selects ;)
});