document.observe('dom:loaded', function() {
	FormStyle.work();
});

var FormStyle = {
		
	work: function() {
		$$('.j-formstyle').each(function (el) {
			var select = el.down('select');
			//vytvorim potrebne elementy
			input = new Element('span', {'class': 'formstyle-input'}).insert(new Element('input', {
				'id'   : select.id,
				'name' : select.name,
				'value': select.value,
				'type' : 'hidden',
				'class' : 'h'
			})).insert(new Element('span', {'class': 'formstyle-data'}).update(select.options[select.selectedIndex].text));
			var button = new Element('span', {'class': 'formstyle-button'});
			//vytvorim list ktory bude v tipe
			var list = new Element('span', {'class': 'formstyle-list '+el.classNames().toArray().last() });
			$w(select.className).each(function (className) {list.addClassName(className)});
			
			select.childElements().each(function (opt) {
				var option = new Element('span').update(opt.innerHTML);
				if (opt.selected) option.addClassName('formstyle-selected');
				$w(opt.className).each(function (className) {option.addClassName(className)});
				
				// nastavenie hoveru
				option.observe('mouseover', function (e) {
					e.stop();
					this.addClassName('formstyle-active');
				}.bindAsEventListener(option));
				option.observe('mouseout', function (e) {
					e.stop();
					this.removeClassName('formstyle-active');
				}.bindAsEventListener(option));
				option.onclick = opt.ondblclick;

				option.observe('mouseover', function(e){
					t = e.element();
					t.up().childElements().invoke('removeClassName', 'formstyle-selected');
					t.addClassName('formstyle-selected');
				});
				
				// nastavenie clicku -> skrytie tipu, nastavenie hodnoty inputu
				option.observe('click', function (e, value) {
					e.stop();
					Tips.hideAll();
					if(e.element().up('.formstyle-list').hasClassName('j-ajax')) {
						pl = $('slider');
						new Ajax.Request('ajax-slider.html', {
							method: 'post',
							parameters: { link: value },
							onCreate: function() { pl.addClassName('spell-in-progress'); }, 
							onFailure: function() { pl.removeClassName('spell-in-progress'); },
							onSuccess: function (rq) { pl.update(rq.responseText).removeClassName('spell-in-progress'); }
						});
					} 
					else {
						location.replace(value);
					}
					/*var target = e.element();
					this.prototip.hide();
					document.stopObserving('click', this.prototip.fx);
					this.down('span.formstyle-input').down('input').value = value;
					this.down('span.formstyle-input').down('span.formstyle-data').update(target.innerHTML);
					target.up().childElements().invoke('removeClassName', 'formstyle-selected');
					target.addClassName('formstyle-selected');*/
				}.bindAsEventListener(el, opt.value));
				
				list.insert(option);
			});
			
			list.insert('<b></b>');
			
			Element.remove(select);
			el.insert(input).insert(button);
			new Tip(el, list, {
				hook: {target: 'bottomLeft', tip: 'topLeft'},
				showOn: 'mouseover',
				hideOn: false,
				hideAfter: 2,
				hideOthers: true,
				width: 'auto',
				offset: { x: 5, y: 4}
			});

			input.observe('mouseover', function(e){
				e.element().addClassName('formstyle-hover'); 
			});			
			
			input.observe('mouseout', function(e){
				e.element().removeClassName('formstyle-hover');
			});			
			
			el.observe('prototip:shown', function(e){
				e.element().down('.formstyle-data').addClassName('formstyle-hover2');
			});			
			
			el.observe('prototip:hidden', function(e){
				e.element().down('.formstyle-data').removeClassName('formstyle-hover2');
			});			
			
			el.prototip.combobox = true;
			
			el.removeClassName('.j-formstyle');
			
		});
	}
}