var VideoPlayer = new Class({
	
	Implements: [Options,  Events],

	options: {
		'controlsContainer': 	'videoControls',
		'flashVideo': 			'homeVideo.swf',
		'height':				'322.5px',
		'videoContainer': 		'videoPlayer',
		'width':				'430px',
		'textContainer': 'videoDescription'
	},
	
	container: null,
	
	paused: false,

	playDelay: 500,

	videoPlayer: null,
	
	initialize: function(container, options) {
		this.setOptions(options);
		this.container = $(container);
				
		this._setupVideoContainer();
		this._loadVideos();
	},
	
	playVideo: function(videoId) {	
		if (null != this.videoPlayer) {
			$('videoPlayer').empty();
			this.videoPlayer = null;
		}
		return this._setupVideoPlayer(videoId);
	},

	_loadVideos: function() {
		// retreive videos
		new Request.JSON({
			'url': '/ajax/video-player.php',
			'onSuccess': this._processResponse.bindWithEvent(this)
		}).get();
	},
	
	_processResponse: function(data) {

		if (data.length > 0) {
			var videoOptions = $(this.options.controlsContainer).getElement('ul');

			for (i = 0; i < data.length; i++) {

				videoOptions.adopt(
					new Element('li').adopt(
						new Element('a', {
							'href': data[i].video,
							'events': {
								'click': (function(e) {
									e.stop();

									var link = $(e.target).getParent();
									var textContainerId = 'videoDescription' + link.get('id');
									$(this.options.textContainer).getChildren().each(function(el) {el.setStyle('display', 'none')});
									$(this.options.textContainer). getElementById(textContainerId).setStyle('display', 'block');
																			
									// this.playVideo($(e.target).getParent().href);
									this.playVideo($(e.target).getParent().id);
								}).bindWithEvent(this)
							},
							'title': data[i].title,
							'id': data[i].id
						}).adopt(
							new Element('img', {
								'src': data[i].image,
								'alt': data[i].title,
								'width': data[i].width,
								'height': data[i].height
							})
						)
					)
				);

				// add text description
				$(this.options.textContainer).grab(
					new Element ('div',{
						'id': 'videoDescription' + data[i].id,
						styles: {
							'display': 'none'
						}
					}).adopt(
						new Element('h3', {
							html: data[i].title
						}),
						new Element('div', {
							html: data[i].description
						})
					)
				);
			}

			this.fireEvent('onComplete', this);

		}
	},

	_setupVideoContainer: function() {
		// set up basic structure
		this.container.adopt(
			new Element('div', {
				'id': this.options.videoContainer
			}),

			new Element('div', {
				'id': this.options.controlsContainer
			}).adopt(
				new Element('div', {
					'id': 'videoClips'
				}).adopt(
					new Element('ul')
				)
			),

			new Element('div', {
				'id': this.options.textContainer
			})
		);
	},

	_setupVideoPlayer: function(videoId) {
		if (null == this.videoPlayer) {
			// set up flash video
			var videoContainer = $(this.options.videoContainer);
			this.videoPlayer = new Swiff(this.options.flashVideo, {
				'id': 'flashplayer',
				'container': videoContainer,
				'height': this.options.height,
				'params': {
					allowScriptAccess: 'always',
					wmode: 'opaque'
				},
				'vars': {
					'videoId': videoId
				},
				'width': this.options.width
			});
		}
	}
});