{if $fcv_unique != ''}

	<div id="picker{$fcv_unique}" class="pt-colview" style="height:{$fcv_rows*25}px;">
	
		<div class="list-container" style="left:0px; width:303px;">
			
			<ul>
			
			{section name="fcv" loop=$fcv_title}
				<li class="{cycle values='li1,li2'}" rel="{$fcv_url[fcv]}"><span rel="{$fcv_data[fcv]}">{$fcv_title[fcv]}</span></li>
			{/section}
			
			</ul>
			
		</div>
		
		<input type="hidden" name="{$fcv_input_name}" id="{$fcv_input_name}" value="" />
			
	</div>
	
	<script language="JavaScript" type="text/javascript">
	{literal}
	var finderColumnPicker{/literal}{$fcv_unique}{literal} = Class.create ({
		
		initialize: function (colview) {
			
			this.colview = $(colview);
			
			this.setActiveColumnIndex(1);
			
			this.colview.down().writeAttribute('rel',1);
			
			columnList = this.colview.down().down().childElements();
			
			// Hide next arrows on items with no children
			columnList.each(function (e) {
				
				if (e.readAttribute('rel') == '') {
					e.addClassName('next');
				}
				
			});
			
			columnList.invoke('observe','click',function(e) { finColPicl{/literal}{$fcv_unique}{literal}.getNextColumn(this, 1); });
			
		},
		
		getNextColumn: function (el, parentIndex) {
			
			// First make sure that the input for this column has a value
			$('{/literal}{$fcv_input_name}{literal}').value = el.down().readAttribute('rel');
				
			el.siblings().each(function (e) { e.removeClassName('active'); e.setStyle({'fontWeight':'normal'}) });
			
			el.setStyle({'fontWeight':'bold'}).addClassName('active');
	
			// Now if there is a URL for the data in the next column, load it
			if (el.readAttribute('rel') != '') {
			
				var newActiveColumnIndex = parentIndex + 1;
				
				this.setActiveColumnIndex(newActiveColumnIndex);
				
				this.clearColumns(parentIndex);
				
				var newPosition = ( this.activeColumnIndex - 1 ) * 303;
				
				var newDiv = Builder.node ('div', {
				
					className: 'list-container',
					rel: this.activeColumnIndex,
					style: 'left:'+newPosition+'px;'
					
				});
				
				this.colview.insert(newDiv, {position:'top'});
				
				this.colview.scrollLeft = newPosition;
				
				var clickedRelObject = el.readAttribute('rel');
				
				this.updateColumn(newDiv, clickedRelObject, newActiveColumnIndex);
			
			} else {
				
				// We still need to clear the other columns
				this.clearColumns(parentIndex);
				
			}
			
		},
		
		updateColumn: function (objColumn, strQuery, newActiveColumnIndex) {
			
			new Ajax.Updater (objColumn, strQuery, {
				method: 'post',
				onComplete: function () {
					objColumn.down().childElements().invoke('observe','click',function(e) { finColPicl{/literal}{$fcv_unique}{literal}.getNextColumn(this, newActiveColumnIndex); });
					
					// Hide next arrows on items with no children
					objColumn.down().childElements().each(function (e) {
						
						if (e.readAttribute('rel') == '') {
							e.addClassName('next');
						}
						
					});
					
				}
			});
			
		},
		
		clearColumns: function (index) {
			
			this.colview.childElements().each(function (el) {
				
				if (parseInt(el.readAttribute('rel')) > index) {
					el.remove();
				}
			
			});
		
		},
		
		setActiveColumnIndex: function (val) {
			this.activeColumnIndex 	= val;
		}
			
	});
	
	finColPicl{/literal}{$fcv_unique}{literal} = new finderColumnPicker{/literal}{$fcv_unique}{literal} ('picker{/literal}{$fcv_unique}{literal}');
	{/literal}
	</script>

{else}

	<ul>
	
	{section name="fcv" loop=$fcv_title}
		<li class="{cycle values='li1,li2'}" rel="{$fcv_url[fcv]}"><span rel="{$fcv_data[fcv]}">{$fcv_title[fcv]}</span></li>
	{/section}
	
	</ul>

{/if}