window.emh = (function ($) {
	function OverlayVideoPlayer(video_name, title) {
		this.el = $('<div id="video-player">\
			<div id="jquery_jplayer_1" class="jp-jplayer"></div>\
			<div id="jp_interface_1" class="jp-interface">\
				<div class="jp-video-play"></div>\
				<ul class="jp-controls">\
					<li><a href="#" class="jp-play" tabindex="1">play</a></li>\
					<li><a href="#" class="jp-pause" tabindex="1">pause</a></li>\
					<li><a href="#" class="jp-stop" tabindex="1">stop</a></li>\
					<li><a href="#" class="jp-mute" tabindex="1">mute</a></li>\
					<li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>\
				</ul>\
				<div class="jp-progress">\
					<div class="jp-seek-bar">\
						<div class="jp-play-bar"></div>\
					</div>\
				</div>\
				<div class="jp-volume-bar">\
					<div class="jp-volume-bar-value"></div>\
				</div>\
				<div class="jp-current-time"></div>\
				<div class="jp-duration"></div>\
			</div>\
		</div>');
		this.overlay = new Overlay(title);
		this.overlay.el.append(this.el);
		$('#jquery_jplayer_1').jPlayer({
			ready: function () {
				$(this).jPlayer('setMedia', {
					m4v: video_name + '.m4v',
					ogv: video_name + '.ogv',
					webm: video_name + '.webm'
				}).jPlayer('play');
			},
			swfPath: 'static/js',
			supplied: 'm4v,ogv,webm',
			preload: 'auto',
			/*cssSelector: {
			play: '',
			pause: '',
			stop: '',
			videoPlay: '',
			seekBar: '',
			playBar: '',
			mute: '',
			unmute: '',
			volumeBar: '',
			volumeBarValue: '',
			currentTime: '',
			duration: ''
			},*/
			errorAlerts: false,
			warningAlerts: false
		});
	}
	function Overlay(title) {
		var self = this;
		// constructor
		this.el = $('<div id="overlay" class="overlay"><div id="overlay-title">' + title + '</div><button id="overlay-close">close</button></div>');
		$('body').append(this.el);
		this.el.fadeOut(0).removeClass('overlay').fadeIn(100);
		// methods
		function click_handler(event) {
			if (event.target && $(event.target).attr('id') == self.el.attr('id')
				|| $(event.target).attr('id') == 'overlay-close') {
				self.el.fadeOut(100, function () {
					self.el.empty().detach();
				});
			}
		}
		
		// events
		this.el.click(click_handler);
		$('overlay-close').click(click_handler);
	}
	function EventTimer() {
		var self = this;
		this.el = $('#event-timer');
		this.date = new Date(2011, 4, 28, 13, 0, 0, 0);
		this.today = new Date();
		this.left = this.date - this.today;
		this.days = $('#event-timer-days');
		this.days_text = $('#event-timer-days-text');
		this.hours = $('#event-timer-hours-int');
		this.hours_text = $('#event-timer-hours-text');
		this.minutes = $('#event-timer-minutes-int');
		this.minutes_text = $('#event-timer-minutes-text');
		this.tick = $('#event-timer-tick > span');
		update_timer();
		setInterval(function () {
			self.left -= 1000;
			self.tick.toggleClass('hidden');
		}, 1000);
		setInterval(function () {
			update_timer();
		}, 60000);
		function update_timer() {
			self.days_int = parseInt(self.left / 1000 / 60 / 60 / 24);
			self.hours_int = parseInt(self.left / 1000 / 60 / 60 - 24 * self.days_int);
			self.minutes_int = parseInt(self.left / 1000 / 60 - 60 * self.hours_int - 24 * 60 * self.days_int);
			self.days.text(self.days_int);
			self.hours.text(self.hours_int);
			self.minutes.text(self.minutes_int);
			
			self.days_text.text(self.days_int == 1 ? 'day' : 'days');
			self.hours_text.text(self.hours_int == 1 ? 'hour' : 'hours');
			self.minutes_text.text(self.minutes_int == 1 ? 'min': 'mins');
		}
	}
	function init() {
		if ($('#event-timer')) {
			//var et = new EventTimer();
		}
	}
	$(function () {
		init();
	});
	
	return {
		show_video: function (event) {
			event.preventDefault();
			var video = new OverlayVideoPlayer('http://d2h54nyud9ln1i.cloudfront.net/the-5-phases-of-human-relationships',
				'The Five Phases of Human Relationships');
			return false;
		},
		show_qa_video: function (event) {
			event.preventDefault();
			var video = new OverlayVideoPlayer('http://d2h54nyud9ln1i.cloudfront.net/emh-qa', 'Errol Michael Henry Q&A March 2011')
		},
	}
})($);