Ext.onReady(function(){
	
	//Create the search box
	if(Ext.get('performer-search') != null){
		var performerStore = new Ext.data.JsonStore({
		    autoDestroy: true,
		    url: '/ajax/performers/public/get/',
		    root: 'performers',
		    totalProperty: 'total',
		    remoteSort: true,
		    sortInfo: { field: 'performers.title', direction: 'asc' },
		    fields: ['performerId', 'title', 'safeTitle', 'html']
		});
		var performerTpl = new Ext.XTemplate(
		    '<tpl for=".">',
		    	'{html}',
		    '</tpl>'
		);
		var performerSearch = new Ext.form.ComboBox({
		    store: performerStore,
		    displayField:'title',
		    hiddenName: 'performerId',
		    valueField: 'performerId',
		    typeAhead: false,
		    lazyInit: false,
		    width:200,
		    maxHeight:250,
		    listWidth:200,
		    minChars: 0,
		    queryDelay: 50,
		    listClass: 'performer-search',
		    loadingText: 'Searching...',
		    emptyText: 'Search Artists...',
		    //pageSize:10,
		    //hideTrigger:true,
		    tpl: performerTpl,
		    renderTo: 'performer-search',
		    itemSelector: 'div.search-item',
			onSelect: function(record){
	        	location.href = String.format('/pages/artists/{0}', record.data.safeTitle);
	    	},
	    	listeners: {
				focus: function(combo){
					//combo.doQuery('', true);
	    		}
	    	}
		});
	}
	
	//Create the group box
	if(Ext.get('performer-group')){
		var groupBox = new Ext.form.ComboBox({
		    store: [
		    	['artist','Artist']
		    	,['date','Date']
		    	,['stage','Stage']
		    ],
	        typeAhead: true,
	        mode: 'local',
	        value: 'Artist',
	        forceSelection: true,
	        triggerAction: 'all',
	        selectOnFocus:true,
		    emptyText: 'Group Artists...',
		    renderTo: 'performer-group',
		    listClass: 'performer-group',
			listeners: {
				select: function(combo, record, index){
					//Show the loader
					Ext.get('performer-list-loading').show();
					
					//Request the data
					Ext.Ajax.request({
						url: '/ajax/performers/public/list/',
						params: { group : record.data.field1 },
						success: function(r){
							var response = Ext.util.JSON.decode(r.responseText);
							
							//Replace the html
							Ext.get('performer-list-container').dom.innerHTML = response.html;
							
							//Hide the loader
							Ext.get('performer-list-loading').hide();
							
							//Flir
							FLIR.replace( '.flir-replace-gunplay' , new FLIRStyle({ cFont:'gunplay' }) );
							
							//Create the tips
							//createTips();
						}
					});
				}
			}
		});
		if(Ext.isIE){
			groupBox.listClass = '';
		}
	}
	
	//Create initial tips
	//createTips();
	
	
	function createTips(){
		var selector = '.performer-tip';
		/*
		 * <div id="performer-tooltip" class="performer-tooltip" style="display:none">
				<a id="add-itinerary-button" class="add-itinerary-button" href="javascript:;"></a>
				<div id="add-itinerary-complete" style="display: none; width: 148px;">Added</div>
			</div>
		 */
		var tip = Ext.get(Ext.DomHelper.createDom({
			tag: 'div'
			,id: 'performer-tooltip'
			,cls: 'performer-tooltip'
			,style:{
				display: 'none'
			}
		}));
		var addButton = Ext.get(Ext.DomHelper.append(tip, {
			tag: 'a'
			,id: 'add-itinerary-button'
			,cls: 'add-itinerary-button'
			,href: 'javascript:;'
		}));
		
		tip.setVisibilityMode(Ext.Element.DISPLAY);
		addButton.on('click', addToItinerary);
		
		//Add the mouse events to show the tip
		Ext.select(selector).each(function(el){
			el.on('mouseover', function(event, element, obj){
				//get the element and set the performanceId
				var el = Ext.get(event.getTarget(selector));
				var performanceId = el.dom.value;
				tip.performanceId = performanceId;
		
		
				//Append the element
				el.appendChild(tip);
		
				//Show the element
				tip.show();
				
		
				//Position the element
				var elBox = el.getBox();
				elBox.width -= 20;
				var tipBox = tip.getBox();
		
				if(tipBox.width >= elBox.width){
					var left = (tipBox.width - elBox.width) / 2;
					tip.setLeft(-left + "px");
				}
		
				if(tipBox.width <= elBox.width){
					var left = (elBox.width - tipBox.width) / 2;
					tip.setLeft(left + "px");
				}
		
			});
			
			el.on('mouseout', function(){
				tip.hide();
			});
		});
	}
	
	
	function addToItinerary(event, el){
		//add request
		Ext.Ajax.request({
			url: '/ajax/performance/public/add-itinerary/',
			params: { performanceId: tip.performanceId },
			success: function(r){
						
			}
		});
	}
	
});