var events_store = "";
var date_field = "";

Ext.override(Ext.ToolTip, {
    onTargetOver : function(e){
        if(this.disabled || e.within(this.target.dom, true)){
            return;
        }
        var t = e.getTarget(this.delegate);
        if (t) {
            this.triggerElement = t;
            this.clearTimer('hide');
            this.targetXY = e.getXY();
            this.delayShow();
        }
    },
    onMouseMove : function(e){
        var t = e.getTarget(this.delegate);
        if (t) {
            this.targetXY = e.getXY();
            if (t === this.triggerElement) {
                if(!this.hidden && this.trackMouse){
                    this.setPagePosition(this.getTargetXY());
                }
            } else {
                this.hide();
                this.lastActive = new Date(0);
                this.onTargetOver(e);
            }
        } else if (!this.closable && this.isVisible()) {
            this.hide();
        }
    },
    hide: function(){
        this.clearTimer('dismiss');
        this.lastActive = new Date();
        delete this.triggerElement;
        Ext.ToolTip.superclass.hide.call(this);
    }
});

Ext.onReady(function(){
	Ext.QuickTips.init();
	
	Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
	var events_tpl = new Ext.XTemplate(
		'<tpl for=".">',
		'{ev_this_date}',
		'<div class="event_div">',
			'<div class="event{ev_stuck}" id="event_{ev_id}">',
				'<div class="event_picture">',
					'<img src="{ev_picture}">',
				'</div>',
				'<div class="event_text">',
					'<div class="events_title">',
						'<tpl if="ev_type_1">',
							'<img src="' + g_params["static_media_domain"] + '/public/comm/events/ea.png" alt="Event Announcement" ext:qtip="Event Announcement" />&nbsp;',
						'</tpl>',
						'<a href="{ev_link}" ext:qtip="{ev_title}<br /><br />{ev_description}" ext:hide="user">{ev_title}</a>',
					'</div>',
					'<div class="events_info">',
						'{ev_event_date}',
						/*'<tpl if="ev_place">',
							'{ev_place}, ',
						'</tpl>',*/
						'<tpl if="ev_city">',
							' in {ev_city}',
						'</tpl>',
					'</div>',
					'<div class="events_poster">',
						'Posted by: {ev_poster}',
						'&nbsp;&nbsp;|&nbsp;&nbsp;',
						'<span>{ev_views}</span> Views',
						'<tpl if="ev_attending">',
							',  <a href="javascript:display_attending(\'non_friends\',{ev_id},\'{ev_title}\',{ev_attending_count},{ev_friends})">{ev_attending}</a>',
						'</tpl>',
						'<tpl if="ev_friends &gt; 0">',
							' <a href="javascript:display_attending(\'friends\',{ev_id},\'{ev_title}\',{ev_attending_count},{ev_friends})">(<span>{ev_friends}</span> {ev_friends_label})</a>',
						'</tpl>',
					'</div>',
					'<tpl if="ev_type_2 || ev_type_3">',
						'<div class="events_type">',
							'{ev_type_2}',
							'{ev_type_3}',
						'</div>',
					'</tpl>',
				'</div>',
			'</div>',
		'</div>',
		'</tpl>'
	);
	
	events_store = new Ext.data.JsonStore({
		url: location.href+'&get_events',
		root: 'events',
		totalProperty: 'totalCount',
		fields:[
			'ev_id',
			'ev_stuck',
			'ev_picture',
			'ev_title',
			'ev_description',
			'ev_link',
			'ev_event_date',
			//'ev_place',
			'ev_city',
			'ev_poster',
			'ev_views',
			'ev_attending',
			'ev_attending_count',
			'ev_friends',
			'ev_friends_label',
			'ev_type_1',
			'ev_type_2',
			'ev_type_3',
			'ev_this_date'
		],
		baseParams:{
				'member_filter':member_filter,
				'member_id':member_id,
				'group_id':group_id,
				'show_filter':show_filter,
				'form[cal_calc_id]':category_id,
				'form[mem_network]':network,
				'form[event_type]':event_type,
				'form[text]':text,
				'date':date
		},
		listeners: { //select the first picture when finish loading the album
			load:function(){
				//save to cookies
				/*alert(this.reader.jsonData.events);
				if (this.reader.jsonData.events=="refresh")
					window.location=location.href;*/
				var state = Ext.state.Manager.getProvider();
				state.set('startStoreAdmin_events_baseParams',events_store.baseParams);
				state.set('startStoreAdmin_events_params',events_store.lastOptions.params);
			}
		}
	});

	if (last_post){
		var state = Ext.state.Manager.getProvider();
		var base_params = state.get('startStoreAdmin_events_baseParams');
		var last_params = state.get('startStoreAdmin_events_params');
		events_store.baseParams = base_params;
		if (last_params) {
			events_store.load({params: {
				'limit':last_params.limit,
				'start':last_params.start
			}});
		}
		else {
			events_store.load({params: {
				'limit':g_params["extjs_limit"],
				'start':0
			}});
		}
	}
	else {
		events_store.load();
	}
	
	var events_panel = new Ext.Panel({
		id:'events_view',
		frame: false,
		border: false,
		width: 561,
		autHeight: true,
		collapsible: false,
		layout: 'fit',
		tbar: new Ext.PagingToolbar({
			cls: 'paging_bar',
			id: 'paging_top',
			pageSize: g_params["extjs_limit"],
		    displayMsg : '{0}-{1} of {2}',
		    displayInfo: true,
		    emptyMsg: 'No events to display',
			store: events_store
		}),
		bbar: new Ext.PagingToolbar({
			cls: 'paging_bar',
			id: 'paging_bottom',
			pageSize: g_params["extjs_limit"],
		    displayMsg : '{0}-{1} of {2}',
		    displayInfo: true,
		    emptyMsg: 'No events to display',
			store: events_store
		}),
		items: new Ext.DataView({
			store: events_store,
			autoHeight:true,
			tpl: events_tpl,
			id: 'main_dataview',
			multiSelect: false,
			overClass:'event-over',
			itemSelector: 'div.event',
			emptyText: 'No events to display',
			loadingText: 'Loading... Please wait...'
		})
	});

	events_panel.on({
	    actioncomplete: function(form, action){
	        if(action.type == 'load'){
	            events_panel.syncSize(); 
	        }
	    }
	});
   	events_panel.render('event_list');
   	
	date_field = new Ext.DatePicker({
	    renderTo: 'time_middle_date',
	    format: 'Y-m-d',
	    listeners: {
	    	'select':{fn:function(){
    			date = date_field.value;
    			check_events_search_form(this, 'search', '');
				date_field.hide();
	    	}}
	    }
	});
	date_field.hide();
});