var Interface = {}

Interface.Dropdown = Class.create({
	initialize: function(element, options) {
		this.element = typeof element == 'object' ? element : $(element);
		this.opened = false;
		this.opener = null;
		this.item_container = null;
		this.opener_buffer = '';
		this.items = new Array();

		this.options = options || { };
		this.options.type = this.options.type || 'first';
		this.options.height = this.options.height || 'auto';
		this.options.keepparent = this.options.keepparent || false;
		this.options.fixwidth = this.options.fixwidth || 0;
				
		var li = this.element.getElementsByTagName('li');

		for(var i=0;i<li.length;i++){
			this.opener = li[i].getElementsByTagName('a')[0];
			
			if(li[i].getElementsByTagName('ul')[0]){
				this.item_container = li[i].getElementsByTagName('ul')[0];
				
				if(!this.options.fixwidth){
					this.item_container.style.width = Element.getWidth(this.opener.parentNode)+'px';
				}
				break;
			}
		}
		
		if(this.item_container){
			// hide selector-items
			Element.hide(this.item_container);
			this.item_container.style.position = 'absolute';
			this.item_container.style.height = this.options.height;
			this.item_container.style.overflowY = 'auto';
			this.item_container.style.overflowX = 'hidden';
			this.items = this.item_container.getElementsByTagName('a');
			
			// add observers
			Event.observe(document.body, 'click', this.onBodyClicked.bindAsEventListener(this));
	    	Event.observe(this.element, 'keydown', this.onKeyPress.bindAsEventListener(this));
	    }

	   	Event.observe(this.opener, 'click', this.onClickOpener.bindAsEventListener(this,this.opener));
	},
	
	getSubItems: function() {
		for(var i=0;i<this.items.length;i++){
    		Event.observe(this.items[i], 'click', this.onItemClick.bindAsEventListener(this,this.items[i]));
    	}
	},
	
	show: function() {
		this.getSubItems();
		
		Effect.Appear(this.item_container,{duration:0.15});
		
		if(!this.options.keepparent){
			this.opener_buffer = this.opener.innerHTML;
			this.opener.innerHTML = '&nbsp;';
		}
	},
	
	hide: function() {
		Effect.Fade(this.item_container,{duration:0.15});
		
		if(!this.options.keepparent){
			this.opener.innerHTML = this.opener_buffer;
		}
	},
		
	onKeyPress: function(event) {
		if(this.opened){
			switch(event.keyCode) {
				case Event.KEY_ESC:
         			this.opened = false;
					this.hide();
					return;
			}
		}
	},
	
	onBodyClicked: function(event) {
		if(this.opened){
			this.opened = false;
			this.hide();
		}
	},
		
	onClickOpener: function(event) {
		if(typeof(this.opener.up('ul.off'))=='undefined') {
			if(this.opened){
				this.opened = false;
				this.hide();
			}else{
				if(this.item_container){
					this.opened = true;
					this.show();
				}
			}
	
			var data = $A(arguments);
			data[1].blur();
		}
		Event.stop(event);
	},
	
	onItemClick: function(event) {
		var data = $A(arguments);
		this.opener_buffer = data[1].innerHTML;
		
		if(this.options.type=='first') {
			globalThis = this;
			var myAjax = new Ajax.Request('/html/ajax_productgroups_by_os.php',{method:'get',parameters:'os='+data[1].parentNode.id.substr(3),onComplete:function(Req){globalThis.showSubItems(Req, 'second');}});
			$('form').down('ul.second').removeClassName('off');
			$('ul_products').down('li a').innerHTML = "Bitte ein Produkt wählen";
			$('product').value = "-1";
		} else if(this.options.type=='second') {
			
		}
	},
	
	showSubItems: function(Req, Class) {
		$('form').down('ul.'+Class+' li ul').innerHTML = Req.responseText;
	}
});


Interface.BeautySelect = Class.create({
	initialize: function(select, options) {
		this.select = $(select);
		this.items = new Array();
		this.hidden = '';
		this.newselect = null;
		this.dropdown = null;
		
		// optionen uebertragen
		for(var i=0;i<this.select.options.length;i++){
			this.items.push(this.select.options[i]);
		}
		
		// hidden feld rein
		this.select.insert({ before: '<input type="hidden" id="'+this.select.id+'" name="'+this.select.name+'" value="'+this.items[this.select.selectedIndex].value+'" class="nodisplay" />' });
		this.hidden = this.select.id;
		
		// html fuer dropdown
		var ul = '<ul class="dropdown" id="bsu-'+this.select.id+'"><li><a href="#">'+this.items[this.select.selectedIndex].text+'</a><ul>';
		for(i=0;i<this.items.length;i++){
			ul += '<li id="bs-'+this.items[i].value+'"><a href="#" onclick="$(\''+this.hidden+'\').value = this.parentNode.id.substr(3); return false;">'+this.items[i].text+'</a></li>';
		}
		ul += '</ul></li>';
		
		this.select.insert({ before: ul });
		this.newselect = $('bsu-'+this.select.id);
		this.select.parentNode.removeChild(this.select);
		
		// dropdown anlegen
		this.dropdown = new Interface.Dropdown(this.newselect, { height: '15em' });
	}
});