/**
 * Main UB program class
 */
UB.TabbedEventsGrid = new Class({
	Extends: UB,
	
	data: null,
	element: null,
	elements: {
		tabs: null,
		tabsContainer: null,
		events: null,
		pager: null,
		pagerContainer: null
	},
	
	groupId: null,
	
	eventsGrid: null,
	pager: null,
	
	options: {
		dontUseTabs: false,
		pager: {},
		tabs: {
			
		},
		useSpin: false
	},
	
	initialize: function (data, element, options) {
		// eventuids grouped by tab
		this.data = data? data : {};
		
		// set options
		this.parent(options);
	
		// elements
		this.element = $(element);
		this.elements.events = this.element.getElement('.events');
		this.elements.pagerContainer = this.element.getElement('.pagerContainer');
		this.elements.pager = this.elements.pagerContainer.getElement('.pager');
		
		// changer
		this.tabChanger = new MTAnimatedContentChanger(this.elements.events);
		
		// tabs
		this.initTabs();

		// make the grid
		this.eventsGrid = new UB.EventsGrid(
			[],
			this.elements.events,
			this.elements.pager,
			{pager: this.options.pager}
		);
	},
	
	initTabs: function (checkEmptyTabs) {
		// when tabs are disabled
		this.elements.tabsContainer = this.element.getElement('.tabs');
		if (! this.elements.tabsContainer) {
			this.elements.tabs = null;
			return;
		}
		
		// clean old
		this.elements.tabs = new $H({});
		this.elements.tabsContainer.empty();

		// build & add
		var itemsFound = false;
		$each(this.options.tabs, function (groupTitle, groupId) {
			//console.log("title "+groupTitle);
			var html = $('tab_template').get('html').substitute({
				title: groupTitle,
				count: this.data[groupId]? this.data[groupId].length : 0
			});
			//var tabElement = new Element(html);
			var tmpElement = new Element('div', {html: html});
			var tabElement = tmpElement.getFirst();
			
			tabElement.addEvent('click', function (e) {
				e.stop();
				e.target.blur();
				this.showTab(groupId);
			}.bind(this));
			
			tabElement.inject(this.elements.tabsContainer);
			
			//console.log("groupId "+groupId+" - "+groupTitle);
			if (!itemsFound) {
				c = this.data[groupId]? this.data[groupId].length : 0;
				//console.log("c: "+c);
				if (c) {
					itemsFound = groupId;
				}
			}
			
			this.elements.tabs[groupId] = tabElement;
		}, this);

		var loadFirstTabWithContent = function() {
				this.showTab(itemsFound, 0);
/*
var fireOnThis = this.elements.tabs[itemsFound];
var evt = 'click';

if (document.createEvent) {
    //alert("FF");
    var evtObj = document.createEvent('MouseEvents');
    evtObj.initEvent(evt, true, false);
    fireOnThis.dispatchEvent(evtObj);
}  

else if (document.createEventObject) {
    //alert("IE");
    var evtObj = document.createEventObject();
    fireOnThis._fireEvent('on'+evt, evtObj);
}
*/


		}
		//var requestedParams = new URI(document.location.href).get('data');
		//if (!requestedParams.event) {
			if (checkEmptyTabs)
				loadFirstTabWithContent.delay(500, this);
		//}
	},
	

	changeData: function (data, checkEmptyTabs) {
		
		this.data = data;
		this.groupId = null;
		if (this.eventsGrid) {
			this.eventsGrid.build();
		}
		
		this.initTabs(checkEmptyTabs);
	},
	
	showTab: function (tab, page, onComplete) {
		//TODO isReady check
		
		// default - the 1st 
		if (! tab && this.elements.tabs) {
			tab = this.elements.tabs.getKeys().shift();
		}
		
		if (tab && tab == this.groupId) {
			return;
		}
		
		this.groupId = tab;
		
		// change active tab
		if (this.elements.tabs) {
			$each(this.elements.tabs, function (tabElement) {
				tabElement.removeClass('active');
			})
			this.elements.tabs[this.groupId].addClass('active');
		}
		
		// hide old tab (grid & pager)
		
		// make new grid
		var oThis = this;
		this.options.useSpin && this.elements.events.spin();
		this.tabChanger.change(function () {
			var tabData = [];
			// tabbed
			if (this.groupId) {
				tabData = this.data[this.groupId];
			}
			// no tabs - flattern
			else {
				tabData = [];
				$each(this.data, function (event_uids, groupId) {
					tabData.combine(event_uids);
				});
			}
			
			// on complete
			if (onComplete) {
				this.tabChanger.chain(onComplete);
			}
			
			// new tab events
			if (tabData && tabData.length > 0) {
				this.eventsGrid.build(tabData);
				
				if ($type(page) == "function") {
					page = page.run([], this); 
				} 
				if (! page) {
					page = 1;
				}
				
				this.eventsGrid.showPage(page, function () {
					// handle new pager container
					this.elements.pagerContainer.setStyle('display', (this.eventsGrid.getPagesCount() <= 1)? 'none' : '');
					
					//this.eventsGrid.changer.callChain();
					this.tabChanger.callChain();
					
					this.options.useSpin && this.elements.events.unspin();
					
				}.bind(this));
				
				
				return false;
			}
			
			// no events
			else {
				this.eventsGrid.build();
				this.elements.events.set({html: this.elements.tabs? $('noevents_template').get('html') : ''});
				this.elements.pagerContainer.setStyle('display', 'none');
				this.options.useSpin && this.elements.events.unspin();
				this.tabChanger.callChain();
			}
		}.bind(this));

	},

	getGroupId: function () {
		return this.groupId;
	},
	
	showEvent: function (uid) {
		var eventGroupId = false;
		$each(this.data, function (event_uids, groupId) {
			if (event_uids.contains(uid)) {
				eventGroupId = groupId;
			}
		});
		if (eventGroupId === false) {
			return;
		}
		
		var page = function () {
			return this.eventsGrid.pager.findPageNum(uid, true);
		}.bind(this);
		
		var viewEvent = function () {
			var event = this.eventsGrid.events[uid];
			event.showDetails(false, function () {
				new Fx.Scroll(window, {duration: 1000, wheelStops:true, transition: 'quad:in:out'}).toElement(event.element).chain(function(){
					// show details
					//event.showDetails();
				});
			});
		}.bind(this);
		
		this.showTab(eventGroupId, page, viewEvent);
	},
	
	hasEvent: function (uid) {
		var result = false;
		$each(this.data, function (event_uids) {
			if (event_uids.contains(uid)) {
				result = true;
			}
		});
		return result;
	}
});

// static
UB.TabbedEventsGrid.extend({
	
});