// JavaScript Document
C.SelectDD = Class.create();
C.SelectDD_ID = 1;

C.SelectDD.prototype =
{
	initialize : function( config )
	{
		this.id = 'custom-dd' + C.SelectDD_ID++
		this.menuEl;
		this.textEl;
		this.menuVisible = false;
		this.containerEl = false;
		this.inputName = false
		this.width = 200;
		this.clsPrefix = 'custom-dd'
		this.options = false
		this.onSelectCallback = false;
		this.fireCallbackOnSetup = true;
		Object.extend(this,config);
		

	},
	
	setup : function()
	{
		var markup = new Element('table', { cellpadding:0 , cellspacing:0 , width:this.width} );
		
		markup.insert("<td class='"+this.clsPrefix+"-left'></td><td id='"+this.id+"-center' class='"+this.clsPrefix+"-center'>&nbsp;</td><td class='"+this.clsPrefix+"-select'></td><td class='"+this.clsPrefix+"-right'></td>");
		$(this.containerEl).update(markup);
		$(this.containerEl).setStyle({position:'relative', width: this.width + "px"});

		var selectWidget = 	$$("." + this.clsPrefix +"-select",this.containerEl);
		
		var menu = new Element('div')
		var clsPrefix = this.clsPrefix;
		menu.setStyle({zIndex:114});
		menu.addClassName( this.clsPrefix + "-menu" );
		menu.hide();
		this.options.each( function(e,idx){
			var mi = new Element('div').update(e.text) ;
			mi.observe('mouseover',this.onMenuItemOver.bindAsEventListener(this));
			mi.observe('mouseout',this.onMenuItemOut.bindAsEventListener(this));			
			mi.observe('click',this.onMenuItemSelect.bindAsEventListener(this));						
			mi.addClassName( clsPrefix + "-menuitem" );
			if ( idx % 2 == 0 ) mi.addClassName('menu-odd');
			menu.insert( mi );																	
		}.bind(this));
		
		
		var containerOffset = $(this.containerEl).cumulativeOffset();

		
		menu.setStyle({
			position:'absolute',
			top: containerOffset.top + 20 +  "px",
			left: containerOffset.left + "px",
			width: this.width-2 + "px"
			
		});
		
		
		
//		$(this.containerEl).insert(menu);
		$(document.body).insert(menu);


		markup.observe('click', this.onMenuToggle.bindAsEventListener(this) );

		this.menuEl = menu;
		
		if ( this.selected ) this.setSelected( this.selected , false, this.fireCallbackOnSetup );
		
	},
	
	
	onMenuItemOver : function(evt)
	{
		var s =	Event.findElement(evt);
		s.addClassName( "menu-over");
	},
	
	onMenuItemOut : function(evt)
	{
		var s =	Event.findElement(evt);
		s.removeClassName( "menu-over");
	},
	
	onMenuItemSelect : function(evt)
	{
		this.menuEl.hide();		
		var s =	Event.findElement(evt);
		this.setSelected( s.innerHTML ,false, true );
//		$( this.id + "-center" ).update(s.innerHTML);

	},

	setSelected  : function( v , k , triggerCB)
	{
		$( this.id + "-center" ).update(v);
		if ( this.onSelectCallback && triggerCB ) this.onSelectCallback(v,k);
	},
	
	
	onMenuToggle : function()
	{
		this.menuEl.toggle();
	}
	
	
	
	
	
	
	
}