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

	options: {
		'controlsContainer': 	'videoControls',
		'height':				'242px',
		'videoContainer': 		'videoPlayer',
		'width':				'430px',
		'textContainer': 'videoDescription'
	},
	
	container: null,
	
	videoPlayer: null,
	
	initialize: function(container, options) {
		this.setOptions(options);
		this.container = $(container);
				
		this._setupVideoContainer();
		this._loadVideos();
	},
	
	_loadVideos: function() {
		// retreive videos
		new Request.JSON({
			'url': '/ajax/brightcove-video.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': '#',
							'onclick': 'addPlayer(\'' + data[i].id + '\', \'430\', \'242\')',
							'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');
																			
									var loadingIcon = $('loader');
									
								    if (!loadingIcon) {
								    	new Element('div', {
											id: 'loader'
										}).inject(this.options.videoContainer);	
								    }
								    
								}.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);
		}
	}
});