Event.implement({
    /**
     * For performance reasons Event.target is not extended with $.  Here we provide a way to get the extened target when need.
     */
    getTarget: function(){
        if (!this.extendedTarget) 
            this.extendedTarget = $(this.target);
        
        return this.extendedTarget;
    },
    /**
     * This method is a helper for a common pattern.  Since attaching an event to element can also mean that this event is fired for
     * child elements we often have to find the parent by tag name.  Here we check if the target is the element we want.  If not, we
     * check the parents.
     *
     * @param {Object} tagName lower case tag name
     */
    getTargetByTag: function(tagName){
        return this.getTarget().get('tag') == tagName ? this.getTarget() : this.getTarget().getParent(tagName);
    },
    /**
     * Similar to geTargetByTag except it uses a class name as the selector.
     *
     * @param {Object} className the class name
     */
    getTargetByClass: function(className){
        return this.getTarget().hasClass(className) ? this.getTarget() : this.getTarget().getParent('.' + className);
    }
});

var LightBox = new Class({
	initialize: function(url) {
		this.url = url;
		var _this = this;
		new Request({
			method: 'get',
			url: url,
			onSuccess: function(response) {
				_this.container = new Element('div');
				$$('body')[0].adopt(_this.container);
				_this.container.set('html', response);
				$('close_button').addEvent('click', function(event) {
					event.stop();
					_this.hide();
				});
				$$('.lightbox')[0].setStyle('top', window.getScroll().y + 'px')
			}
		}).send();
	},
	hide: function() {
		this.container.destroy();
		this.overlay.hide();
	}
});

var Episodic = {
	initialize: function(event) {
		var _this = this;
		$$('.lightbox-src').addEvent('click', function(event) {
			event.stop();
			new LightBox(event.getTargetByClass('lightbox-src').get('rel'));
		});
		
		this.hookupCommentButton();
		setTimeout(this.loadConfig, 300);
		playerEventHandler = this.playerEventHandler;
		
		$$('.buttons li').addEvent('click', function(event) {
			_this.playVideo(event);
		})
	},
	playVideo: function(event) {
		event.stop();
		var parentTag = event.getTargetByTag('li');
		$$('.buttons li img').set('src', $('hidden_play_url').value);
		
		if (parentTag == this.activeVideo && $('ep_player').isVideoPlaying()) {
			$('ep_player').pauseVideo();
			return;
		}
		else if (parentTag == this.activeVideo) {
			$('ep_player').playVideo();
			parentTag.getElement('img').set('src', $('hidden_pause_url').value);
			return;
		}
		
		this.activeVideo = parentTag;
		var url = parentTag.getElement('a').get('configurl');
		parentTag.getElement('img').set('src', $('hidden_pause_url').value);
		$('ep_player').loadConfiguration(url);
		setTimeout(function() { $('ep_player').playVideo(); }, 1000);
	},
	hookupCommentButton: function() {
	  $$('.comment-submit-btn').addEvent('click', function(event) {
		event.stop();
	    var commentForm = $('commentform');
	    if (commentForm) {
	    	commentForm.submit();
      	}
		});
	},
	playerEventHandler: function(event) {
		if (event.name = 'playerAvailable') {
			this.loadConfig();
			this.playerLoaded = true;
			playerEventHandler = null;
		}
	},
	loadConfig: function(event) {
		if (!this.playerLoaded && $('ep_player')) {
			$('ep_player').loadConfiguration($('hidden_config_url').value, true);
		}
	}
}

window.addEvent('domready', function(event) {
	Episodic.initialize(event);
});