/**
 * config.window   window
 * config.thumb
 * config.width   video/image width
 * config.height  video/image height
 * config.time    
 */
VimeoCategorized = function(config) {
	var _config = config;
	var _playlist = null;
	var _window = $(document.getElementById(_config.window));
	var _vimeoThumb = $(document.getElementById(_config.thumb));
	var _container;
	var _imageContainer;
	var _vimeoPlayer;
	var _iframex;
	var _currIndex = 0;
	var _bigImg = [];
	var _titlex;

	var windowInit = function() {
		_container = $(document.createElement('div'));
		_imageContainer = $(document.createElement('div'));
		_vimeoPlayer = $(document.createElement('div'));
		$(_window).css('position', 'relative');
		$(_window).css('width', _config.width);
		$(_window).css('height', _config.height);
		$(_container).css('overflow', 'hidden');
		$(_container).css('position', 'absolute');
		$(_container).css('width', _config.width);
		$(_container).css('height', _config.height);
		$(_imageContainer).css('position', 'relative');
		$(_imageContainer).css('left', 0);
		$(_imageContainer).css('top', 0);
		$(_imageContainer).css('z-index', 5);
		$(_vimeoPlayer).css('position', 'absolute');
		$(_vimeoPlayer).css('z-index', 1);
		$(_vimeoPlayer).css('top', 0);
		$(_vimeoPlayer).css('left', 0);
		$(_container).append(_imageContainer);
		$(_container).append(_vimeoPlayer);
		$(_window).append(_container);
	}
	var playlistCallback = function(playlist, status) {
		var divx;
		var titlex;
		var pos = 0;

		_playlist = playlist;
		for (var i=0;i<_playlist.length;i++) {
			divx = createThumbnail(i);
			$(divx).css('left', pos);
			if (i == 0) {
				$(divx).css('z-index', 10);
			} else {
				$(divx).css('z-index', 1);
			}
			$(_imageContainer).append(divx);
			//pos += _config.width;
			_bigImg.push(divx);
		}
		createTitleDiv();
		createSmallThumb();
		$(_titlex).html(_playlist[0].title);
		//loadPlayer();
	}
	var loadPlayer = function(urlx) {
		_iframex = document.createElement('iframe');
		$(_iframex).attr('id', 'player_1');
		$(_iframex).attr('src', urlx);
		//$(_iframex).attr('src', 'http://player.vimeo.com/video/17425721?js_api=1&js_swf_id=player_1');
		$(_iframex).attr('width', _config.width);
		$(_iframex).attr('height', _config.height);
		$(_iframex).attr('frameborder', 0);
		$(_vimeoPlayer).append(_iframex);

		new Froogaloop().init(_iframex);

		_iframex.addEvent('onLoad', playerLoaded);

		//........$(document).ready(playerInit);
	}
	var playerInit = function() {
		_iframex.addEvent('onLoad', playerLoaded);
	}
	var playerCallback = function(playerId) {
	}
	var playerLoaded = function() {
		_iframex.addEvent('onPlay', playerCallback);
		_iframex.addEvent('onPause', playerCallback);
		_iframex.addEvent('onSeek', playerCallback);
		_iframex.addEvent('onProgress', playerCallback);
		_iframex.api('api_play', null);
		//_iframex.api('api_unload', null);
	}
	var playMovie = function(index) {
		var urlx = 'http://player.vimeo.com/video/' + _playlist[index].id + '?js_api=1&js_swf_id=player_1'
	
		if (! _iframex) {
			$(_vimeoPlayer).css('z-index', 20);
			loadPlayer(urlx);
		} else {
			$(_iframex).attr('src', urlx);
			$(_vimeoPlayer).css('z-index', 20);
			_iframex.api('api_play', null);
		}
	}
	var pushUp = function(index) {
		if (index != _currIndex) {
			$(_bigImg[index]).css('z-index', 10);
			$(_bigImg[_currIndex]).css('z-index', 1);
			$(_titlex).html(_playlist[index].title);
			_currIndex = index;
		}
	}
	var createSmallThumb = function() {
		var divx;
		var imgx;
		var anch;
		var clearx;

		$(_vimeoThumb).css('padding-left', 40);

		for (var i=0;i<_playlist.length;i++) {
			divx = $(document.createElement('div'));
			imgx = $(document.createElement('img'));
			anch = $(document.createElement('a'));
			$(divx).css('float', 'left');
			$(divx).css('margin', 2);
			$(imgx).attr('src', _playlist[i].thumbnail_small);
			$(anch).attr('href', '#');
			$(anch).attr('idx', i);
			$(imgx).css('text-decoration', 'none');
			$(imgx).css('border', '0 none');
			$(imgx).attr('idx', i);
			$(anch).mouseover({index: i},
				function(e) {
					//debug(e.data.index);
					pushUp(e.data.index);
				}
			);
			$(anch).click({index: i},
				function(e) {
					//debug(e.data.index);
					playMovie(e.data.index);
				}
			);
			$(anch).append(imgx);
			$(divx).append(anch);
			$(_vimeoThumb).append(divx);
			if ((i + 1) % 4 == 0) {
				clearx = $(document.createElement('div'));
				$(clearx).css('clear', 'both');
				$(_vimeoThumb).append(clearx);
			}
		}
	}
	var createTitleDiv = function() {
		var titleDiv = $(document.createElement('div'));
		var topx = _config.height - 40;

		_titlex = $(document.createElement('div'));
		$(titleDiv).css('width', '100%');
		$(titleDiv).css('height', 40);
		$(titleDiv).css('background-color', '#000000');
		$(titleDiv).css('opacity', 0.50);
		$(titleDiv).css('position', 'absolute');
		$(titleDiv).css('top', topx);
		$(titleDiv).css('z-index', 15);
		$(_titlex).css('width', '100%');
		$(_titlex).css('color', '#ffffff');
		$(_titlex).css('z-index', 16);
		$(_titlex).css('position', 'absolute');
		$(_titlex).css('top', topx);
		$(_titlex).css('text-align', 'center');
		$(_titlex).css('padding-top', 10);
		$(_titlex).css('font-family', 'verdana');
		$(_titlex).css('font-size', 12);
		$(_titlex).html('title');
		$(_imageContainer).append(_titlex);
		$(_imageContainer).append(titleDiv);
	}
	var loadPlayList = function() {
		jQuery.getJSON("http://vimeo.com/api/v2/jeffcavins/videos.json?callback=?", playlistCallback);
	}
	/*
	var loadPlayListxx = function() {
		//$(document).ajaxError(function() {
			//alert('ajax error');
		//});
		$.ajax({
			url: 'http://vimeo.com/api/v2/jeffcavins/videos.json',
			//type: 'get',
			dataType: 'jsonp',
			crossDomain: true,
			cache: false,
			success : playlistCallback,
			error : function(x, msg, e) {
				alert('error: ' + msg);
			}
		});
	}
	*/
	var createThumbnail = function(index) {
		var divx = $(document.createElement('div'));
		var divy = $(document.createElement('div'));
		var imgx = $(document.createElement('img'));

		$(imgx).attr('width', _config.width);
		$(divx).css('position', 'absolute');
		$(divx).css('top', '0');
		$(divx).css('left', '0');
		$(imgx).attr('src', _playlist[index].thumbnail_large);
		$(imgx).attr('idx', index);
		$(imgx).click(
			function() {
				var urlx = 'http://player.vimeo.com/video/' + _playlist[index].id + '?js_api=1&js_swf_id=player_1'
				$(_vimeoPlayer).css('z-index', 10);
				$(_iframex).attr('src', urlx);
				_iframex.api('api_play', null);
			}
		);
		$(divy).append(imgx);
		$(divx).append(divy);
		return divx;
	}
	this.load = function() {
		$(document).ready(function() {
			windowInit();
			loadPlayList();
		});
	}
}

debug = function(text) {
	var db = document.getElementById('debug');
	if (db) db.innerHTML = db.innerHTML + ' ' + text;
}