var tgmSelectboxClass = Class.create({

	className:'tgmSelectboxClass',
	visible:false,
	selectboxEl:null,
	selectboxId:null,
	linkEl:null,
	foldoutEl:null,
	selectEl:null,
	hiddenField:null,
	formEl:null,
	autosubmit:false,
	maxHeightWithoutScrolling:200,
	scrollbarWidth:24,

	initialize:function(mainObject, selectboxEl, autosubmit)
	{
		if (mainObject == null) {
			mainObject = tgmMain;
		}
		mainObject.log('tgmSelectbox initialized');

		if(autosubmit) {
			this.autosubmit = autosubmit;
		}
		this.selectboxEl = selectboxEl;
		this.selectboxId = selectboxEl.id;
		this.formEl = selectboxEl.up('form');
		var foldoutEl = this.selectboxEl.down('span.selectbox_options');
		if (foldoutEl != null) {
			this.foldoutEl 	= foldoutEl;
			this.linkEl 	= selectboxEl; // now it's the same, there has been a link before
			var type		= foldoutEl.title;
			var hiddenField = this.formEl.down('input[name='+this.selectboxId+'_selectHiddenField]');
			if (hiddenField == null) {
				tgmMain.error('['+this.className+'] Hidden field '+this.selectboxId+'_selectHiddenField not found in form, unable to set value');
			} else {
				this.hiddenField = hiddenField;
			}
			// Find the corresponding "input" element
			this.selectEl = this.selectboxEl.down('span.selected_option');
			this.selectEl.addClassName('pulldown');
			this.formEl.down('span.selectbox').addClassName('pulldown'); // added to solve css-multi-cascade-bug in msie6

			// Event listener for toggle element
			this.linkEl.observe('click', this.toggle.bindAsEventListener(this));

			// Event listeners for all options
			var links = this.foldoutEl.select('li a, li a img');
			if (links.length > 0) {
				links.each(function(link) {
					link.observe('click', this.handleOptionClick.bindAsEventListener(this));
				}.bind(this));
			}
		}
		mainObject.observeEvent('onDocumentClick', this.handleDocumentClick.bindAsEventListener(this));
		mainObject.observeEvent('onBeforeSuggestOpen', this.close.bindAsEventListener(this));
	},

	handleDocumentClick:function(e)
	{
		this.close();
	},

	handleOptionClick:function(e)
	{
		var el = Event.element(e);
		Event.stop(e);

		var title;
		var value;
		if(el.tagName.toLowerCase() == 'a') {
			title = el.innerHTML; // getAttribute('title');//el.href.replace(/(.*)#/, ''); // a
			value = el.id;
		} else if(el.tagName.toLowerCase() == 'img') {
			var refA = el.up('a');
			title = refA.innerHTML; // getAttribute('title');//el.href.replace(/(.*)#/, ''); // a
			value = refA.id;
		} else { // li
			//var value = el.innerHTML.match(/\S+$/); // li
		}

		// Set hidden element value
		this.selectEl.update(title); // setValue(el.getAttribute('title'));
		this.hiddenField.setValue(value);
		this.close();

		if (this.autosubmit) {
			this.formEl.submit();
		}
	},

	open:function(e, callback)
	{
		// Calculate foldout width, if it's smaller than the whole field enlarge
		// it to the field width, if it's larger add the class "wide"
		var dropdownDims  = this.foldoutEl.getDimensions();
		var dropdownWidth = dropdownDims.width;
		var fieldWidth    = this.selectEl.up('span.selectbox').getWidth();

		// HEIGHT
		var tooHigh = false;
		if (dropdownDims.height > this.maxHeightWithoutScrolling) {
			this.foldoutEl.setStyle({
				overflowX:'hidden',
				height:this.maxHeightWithoutScrolling+'px',
				width:(dropdownWidth+this.scrollbarWidth)+'px'
			});
			// tooHigh = true;
			var dropdownDims  = this.foldoutEl.getDimensions();
			var dropdownWidth = dropdownDims.width;
		}

		// WIDTH
		var hasWideClass = false;
		/*if (dropdownWidth > fieldWidth) {
			this.foldoutEl.addClassName('wide');
			hasWideClass = true;
		} else if (dropdownWidth < fieldWidth) {
			this.foldoutEl.setStyle({
				width:(fieldWidth)+'px'
			});
		}*/
		//this.foldoutEl.setStyle({width:+'343px'});



		tgmMain.elementAppear(this.foldoutEl, function() {
			tgmMain.fireEvent('onBeforeSelectboxOpen');
			if (callback != null) {
				callback();
			}
			this.visible = true;
			tgmMain.fireEvent('onSelectboxOpen');
		}.bindAsEventListener(this));
	},

	close:function(e, callback)
	{
		if (!this.visible) return;
		tgmMain.elementFade(this.foldoutEl, function() {
			tgmMain.fireEvent('onBeforeSelectboxClose');
			if (callback != null) {
				callback();
			}
			this.foldoutEl.hide();
			this.visible = false;
			tgmMain.fireEvent('onSelectboxClose');
		}.bindAsEventListener(this));
	},

	toggle:function(e)
	{
		Event.stop(e);
		if (this.visible == true) {
			this.close(e);
		} else {
			this.open(e);
		}
	}
});