var DropdownGroups = {};

var Dropdown = Class.create();
Dropdown.prototype = {
	initialize: function(name,options) {
		this.setOptions(options);
		this.container = $(name);
		this.grip = $(this.container.id+'_grip');
		this.menu = $(this.container.id+'_menu');

		this.status = 0;

		this.menu.style.position = 'absolute';
		this.menu.style.top = Element.getHeight(this.container)+'px';
		this.menu.style.width = (this.options.width || Element.getDimensions(this.container).width)+'px';
		this.menu.style.margin = '0px';
		this.menu.style.padding = '0px';
		this.menu.style.listStyle = 'none';
		this.menu.style.overflow = 'hidden';
		this.menu.style.zIndex = 25000;

		if(this.options.set_child_width) this.container.style.width = (+this.options.set_child_width + Element.getDimensions($(this.container.id+'_child')).width) +'px';

		this.grip.style.position = 'absolute';
		this.grip.style.top = '0px';
		this.grip.style.height = Element.getHeight(this.container)+'px';
		this.grip.style.width = Element.getDimensions(this.container).width+'px';

		this.shim();

		var e_list = $(this.container.id+'_menu').select('div.label');
		e_list.each( function(element){
			var handle = element.innerHTML.replace(/\W/g,'').toLowerCase();
			if(!this.top_submenu) this.top_submenu = handle;
			this.init_submenu(element,handle);
		}.bind(this));

		if(this.options.display_trigger == 'click')
		{
			Event.observe(this.grip,this.options.display_trigger,this.toggle.bind(this));
		}
		else
		{
			Event.observe(this.grip,this.options.display_trigger,this.show.bind(this));
		}

		if(this.top_submenu) this.display_submenu(this.top_submenu);
	},

	init_submenu: function(element,handle) {

		if(this.options.use_submenu)
		{
			Event.observe(element,'mouseover',this.display_submenu.bind(this,handle));
			Element.hide(handle);
		}
		$(handle).style.margin = '0px';
		$(handle).style.padding = '0px';
		$(handle).style.listStyle = 'none';
		$(handle).style.width = Element.getDimensions(this.menu).width+'px';
	},

	display_submenu: function(handle) {
			if(!this.submenu || (handle != this.submenu))
			{
				if(this.submenu) Element.hide(this.submenu);
				Element.show(handle);
				if(this.use_shim) this.shim.style.height = Element.getHeight(this.menu)+'px';
				this.submenu = handle;
			}
	},

	hide: function() {
		if(this.options.group) DropdownGroups[this.options.group] = false;

		this.status = 0;
		if(this.use_shim) Element.hide(this.shim);
		Element.hide(this.menu);

		Event.stopObserving(document,'click',this.clickObserver);
		Event.stopObserving(document,'keypress',this.keypressObserver);
	},

	show: function() {

		if(this.options.group)
		{
			if(DropdownGroups[this.options.group]) DropdownGroups[this.options.group].hide();
			DropdownGroups[this.options.group] = this;
		}

		this.status = 1;
		Element.show(this.menu);

		if(this.use_shim)
		{
			Element.show(this.shim);
			this.shim.style.height = Element.getHeight(this.menu)+'px';
		}
		this.clickObserver = this.click_listener.bind(this);
		this.keypressObserver = this.keypress_listener.bind(this);
		Event.observe(document,'click',this.clickObserver);
		Event.observe(document,'keypress',this.keypressObserver);
	},

	toggle: function() {
		if(this.status)
		{
			this.hide();
		}
		else
		{
			this.show();
		}
	},

	click_listener: function(event) {
		x = Event.pointerX(event);
		y = Event.pointerY(event);

		if(!(Position.within(this.menu,x,y) || Position.within(this.grip,x,y)))
		{
			this.hide();
		}
	},

	keypress_listener: function(event) {
		if(event.keyCode == Event.KEY_ESC) this.hide();
	},

	shim: function() {
		if((document.all) && (navigator.userAgent.indexOf("Opera") == -1))
		{
			new Insertion.Before(this.menu,'<iframe src="javascript:false;" id="'+this.container.id+'_shim" class="shim" scrolling="no" frameborder="0" style="display: none;"></iframe>');
			this.shim = $(this.container.id+'_shim');
			this.shim.style.position = 'absolute';
			this.shim.style.top = Element.getHeight(this.container)+'px';
			this.shim.style.left = '0px';
			this.shim.style.width = Element.getDimensions(this.menu).width+'px';
			this.use_shim = 1;
		}
		else
		{
			this.use_shim = 0;
		}
	},

	setOptions: function(options) {
		this.options = {
			display_trigger: 'click',
			group: 0,
			set_child_width: 0,
			use_submenu: 1
		}
		Object.extend(this.options, options || {});
	}
}