Ext.onReady(function() {
	// Setup quicktips
	Ext.QuickTips.init();
	Ext.each(Ext.DomQuery.select('.qtip'), function(el) {
		el = Ext.get(el);
		var text = el.dom.alt;
		new Ext.ToolTip({
			target: el.id,
			anchor: 'top',
			anchorOffset: -4, // center the anchor on the tooltip
			html: '<strong>' + text.replace(/\|/g, '<br />') + '</strong>'
		});
	});
	
	// Setup tabs
	Ext.each(Ext.DomQuery.select('#tab-container #tabs > div'), function(el) {
		el = Ext.get(el);
		el.addListener('click', function() {
			// If there are any videos playing, stop them
			Ext.each(Ext.DomQuery.select('#tab-container embed, #tab-container object'), function(videoEl) {
				videoEl = Ext.getDom(videoEl.id);
				if (videoEl.sendEvent) {
					videoEl.sendEvent('PLAY', 'false');
				}
			});
			var activeTab = Ext.get(Ext.DomQuery.selectNode('#tabs > div.active'));
			if (activeTab) {
				activeTab.removeClass('active');
				Ext.fly(activeTab.id.replace('-tab', '-content')).removeClass('active');
			}
			el.addClass('active');
			Ext.fly(el.id.replace('-tab', '-content')).addClass('active');
		});
	});
	
	// Setup view buttons for home page
	if (Ext.fly('view-buttons')) {
		var contentContainer = Ext.get('content-container');
		var viewButtonsEl = Ext.get('view-buttons');
		var viewRanchoLasPalmasEl = Ext.get('view-rancho-las-palmas');
		var viewLaCostaEl = Ext.get('view-la-costa');
		viewButtonsEl.moveTo(contentContainer.getRight() - contentContainer.getPadding('r') - viewButtonsEl.getWidth() + 1, contentContainer.getBottom() - viewButtonsEl.getHeight());
		viewButtonsEl.show();
		
		viewRanchoLasPalmasEl.addListener('click', function() {
			viewRanchoLasPalmasEl.addClass('active');
			viewLaCostaEl.removeClass('active');
			Ext.fly('rancho-loop').addClass('active');
			Ext.fly('la-costa-loop').removeClass('active');
			
			Ext.getDom('rancho-loop-video').sendEvent('PLAY', 'true');
			Ext.getDom('la-costa-loop-video').sendEvent('PLAY', 'false');
		});
		
		viewLaCostaEl.addListener('click', function() {
			viewRanchoLasPalmasEl.removeClass('active');
			viewLaCostaEl.addClass('active');
			Ext.fly('rancho-loop').removeClass('active');
			Ext.fly('la-costa-loop').addClass('active');
			
			Ext.getDom('rancho-loop-video').sendEvent('PLAY', 'false');
			Ext.getDom('la-costa-loop-video').sendEvent('PLAY', 'true');
		});
		
		// Play the video after the window is loaded
		Ext.EventManager.addListener(window, 'load', function() {
			Ext.getDom('rancho-loop-video').sendEvent('PLAY', 'true');
		});
	}
	
	// Setup scrollable containers
	if (Ext.fly('scrollable-container')) {
		var contentEl = Ext.get('content');
		var prevButtonEl = Ext.get('previous-button');
		var nextButtonEl = Ext.get('next-button');
		
		prevButtonEl.addListener('click', function() {
			var contentScroll = contentEl.getScroll();
			contentEl.scrollTo('top', contentScroll.top - contentEl.getHeight(), {callback: showHideButtons});
		});
		
		nextButtonEl.addListener('click', function() {
			var contentScroll = contentEl.getScroll();
			contentEl.scrollTo('top', contentScroll.top + contentEl.getHeight(), {callback: showHideButtons});
		});
		
		function showHideButtons() {
			var contentEl = Ext.get('content');
			var prevButtonEl = Ext.get('previous-button');
			var nextButtonEl = Ext.get('next-button');
			var contentScroll = contentEl.getScroll();
			
			if (contentScroll.top == 0) {
				prevButtonEl.hide();
			} else {
				prevButtonEl.show();
			}
			
			if (contentScroll.top + contentEl.getHeight() >= contentEl.dom.scrollHeight) {
				nextButtonEl.hide();
			} else {
				nextButtonEl.show();
			}
		}
		
		showHideButtons();
	}
	
	// Setup counter for times and records
	if (Ext.fly('counter')) {
		Ext.TaskMgr.start({
			run: function() {
				var nowDate = new Date();
				var endDate = new Date();
				endDate.setFullYear(2010);
				endDate.setMonth(5);
				endDate.setDate(17);
				endDate.setHours(17);
				endDate.setMinutes(0);
				endDate.setSeconds(0);
				var diff = endDate.getTime() - nowDate.getTime();
				var msPerDay = 24 * 60 * 60 * 1000;
				var msPerHour = 60 * 60 * 1000;
				var msPerMinute = 60 * 1000;
				var msPerSecond = 1000;
				var dd = Math.floor(diff / msPerDay);
				var tmp_dd = Math.floor(diff / msPerDay);
				diff = diff - (dd * msPerDay);
				var hh = Math.floor(diff / msPerHour);
				diff = diff - (hh * msPerHour);
				var mm = Math.floor(diff / msPerMinute);
				diff = diff - (mm * msPerMinute);
				var ss = Math.floor(diff / msPerSecond);
				dd = (dd >= 10 ? dd : "0" + dd);
				hh = (hh >= 10 ? hh : "0" + hh);
				mm = (mm >= 10 ? mm : "0" + mm);
				ss = (ss >= 10 ? ss : "0" + ss);
				if(tmp_dd < 0){
					var str = "00:00:00:00";
				} else {
					var str = dd + ":" + hh + ":" + mm + ":" + ss;
				}
				
				Ext.fly('counter').update(str);
			},
			interval: 1000 //1 second
		});
	}
});