$(document).ready(function(){
	fancySelectBox('select.selectboulevard');
	fancySelectBox('select.selectboulevard02');
	fancySelectBox('select.selectboulevard03');
	fancySelectBox('select.selectboulevard04');
});

function fancySelectBox(alvo_select){
	
	var select = $(alvo_select);
	var selectBoxContainer = $('<div>',{
		width		: select.outerWidth(),
		className	: 'tzSelect',
		html		: '<div class="selectBox"></div>'
	});
	var dropDown = $('<ul>',{className:'dropDown'});
	var selectBox = selectBoxContainer.find('.selectBox');
	select.find('option').each(function(i){
		var option = $(this);
		if(i==select.attr('selectedIndex')){
			selectBox.html(option.text());
		}
		if(option.data('skip')){return true;}
		var li = $('<li>',{html:	'<a href="javascript:void(0);"><span>'+option.text()+'</span></a>'});
		li.click(function(){
			selectBox.html(option.text());
			dropDown.trigger('hide');
			select.val(option.val());
			select.trigger('change')
			//return false;
		});
		dropDown.append(li);
	});
	selectBoxContainer.append(dropDown.hide());
	select.hide().after(selectBoxContainer);
	dropDown.bind('show',function(){
		if(dropDown.is(':animated')){return false;}
		selectBox.addClass('expanded');
		dropDown.show();
	}).bind('hide',function(){
		if(dropDown.is(':animated')){
			return false;
		}
		selectBox.removeClass('expanded');
		dropDown.hide();
	}).bind('toggle',function(){
		if(selectBox.hasClass('expanded')){
			dropDown.trigger('hide');
		}
		else dropDown.trigger('show');
	});
	selectBox.click(function(){
		dropDown.trigger('toggle');
		return false;
		
	});

	// If we click anywhere on the page, while the
	// dropdown is shown, it is going to be hidden:
	$("jspVerticalBar").click(function(e){
		e.stopPropagation();
	});
	$(document).click(function(){
		dropDown.trigger('hide');
	});
}