var jmPlaylistsXHtml = new Class({
	
	initialize: function(jmPlaylistsX){
	    this.playlist = jmPlaylistsX;
	    this.__toString();
		this.hideInfos();
	},
	
	hideInfos: function()
	{
	   var counter = 0;
	   var self = this;
	   this.infotexte = new Array();
		$$('.videoinfos').each(function(single){
			if (single.getProperty('id') == 'videoinfos_')
			{
		    	single.removeProperty('id');
		   	single.setProperty('id', 'videoinfos_'+counter);
		   }
			single.setStyle('float', 'left');
			single.setStyle('display', 'none');
			self.infotexte.include(single);
			counter++;
		});
		this.showInfos(0);
	},
	showInfos: function(key)
	{
		if ($type(key) == 'object')	    key = key.index;
		$$('.videoinfos').each(function(single){
		    if (single.getProperty('id') != 'videoinfos_'+key)
				single.setStyle('display', 'none');
		});
	    if ($('videoinfos_'+key) != null)
			$('videoinfos_'+key).setStyle('display', 'block');
		else if ($('intro_standard') != null)
			$('intro_standard').setStyle('display', 'block');
	},
	__toString: function(){
	    //console.log(this.playlist);
	    var parent = $('video');
	    var self = this;
	    var wrapper = new Element('div');
	        wrapper.addClass('playlist');
		wrapper.inject(parent, 'after');

		var headline = new Element('h2');
		    headline.addClass('homepage_article_title2');
		    headline.innerHTML = this.playlist.options.title;
		wrapper.adopt(headline);

		var innerWrapper = new Element('div');
		    innerWrapper.addClass('inner');
		    wrapper.adopt(innerWrapper);
		    
		//console.log(this.playlist.groups);
		this.playlist.groups.each(function(group){
			var headline = new Element('h3');
			    headline.addClass('list_headline');
			    headline.setStyle('margin', '4px 0 0')
			        .setStyle('color', '#fff')
			        .setStyle('background', '#000')
			        .setStyle('padding', '2px 4px')
			        .setStyle('text-align','left');
			    headline.innerHTML = group.options.title;
			innerWrapper.adopt(headline);

			var listWrapper = new Element('div');
			    listWrapper.setStyle('clear','both')
			        .setStyle('float', 'left')
			        .setStyle('background', '#fff')
			    innerWrapper.adopt(listWrapper);
			    
			group.items.each(function(item){
			    //console.log(item)
				itemHtml = item.writeHtml();
				listWrapper.adopt(itemHtml);
				itemHtml.addEvent('click', function(){self.showVideo(item)});
			});
   		})
	},
	showVideo: function(item){
		//console.log('play '+item.key);
		this.playlist.player.sendEvent('ITEM',item.key);
		this.playlist.player.sendEvent("PLAY","false");
		this.showInfos(item.key);
	}

})

var jmPlaylistsX = new Class({
	options: {
		title: 'More',
		maxItems: '100'
	},
	initialize: function(player, options){
		this.setOptions(options);
		this.player = player;
		this.groups = new Hash({});
		this.parsePlaylist();
	},
	parsePlaylist: function(){
	    //console.log('start parsing');
		var self = this;
		var single;
		var group;
	    playlist = this.player.getPlaylist();
		playlist.each(function(item, key){
		    group = self.getGroup(item);
			single = new jmPlaylistItem(item, key);
			group.addItem(single);
		});
		//console.log('end parsing');
		//console.log(this.groups);
		new jmPlaylistsXHtml(this);
	},
	getGroup: function(item)
	{
		var groupId = this.getGroupId(item);
		if (!this.groups.hasKey(groupId))
		{
			this.groups.set(groupId, new jmPlaylistX({'title':item.author}));
		}
		return this.groups.get(groupId);
	},
	getGroupId: function(item){
		var id = item.author;
		id = id.clean();
		id = id.toLowerCase();
		id = id.camelCase();
		id = id.replace(/ /g, '');
		return id;
	}
})
jmPlaylistsX.implement(new Options);

var jmPlaylistX = new Class({
	options: {
		title: '',
		maxItems: '100'
	},
	initialize: function(options){
		this.setOptions(options);
		this.items = new Array();
	},
	addItem: function(item){
		this.items.include(item);
	},
	addItems: function(list){}
})
jmPlaylistX.implement(new Options);

var jmPlaylists = new Class({
	options: {
		title: 'More',
		maxItems: '100'
	},
	initialize: function(player, options){
		this.hideInfos();
		this.currentVideo = 0;
		this.player = player;
		this.setOptions(options);
		this.items = new Array();
		this.loadPlaylist();
		this.writeHtml();
		var self = this;
		//player.addControllerListener("ITEM", "self.showInfos");
	},
	hideInfos: function()
	{
	    var counter = 0;
	    var self = this;
	    this.infotexte = new Array();
	    //var videoinfosWrapper = new Element('div').injectAfter(this.player);
	        //videoinfosWrapper.setText('test');
		$$('.videoinfos').each(function(single){
		    single.removeProperty('id');
		    single.setProperty('id', 'videoinfos_'+counter);
			single.setStyle('float', 'left');
			single.setStyle('display', 'none');
			self.infotexte.include(single);
			//single.slider =  new Fx.Slide(single, {duration: 500});
			//single.slider.hide();
			//single.hide()
			counter++;
		});
		this.showInfos(0);
	},
	showInfos: function(key)
	{
	    //alert ('test');
		if ($type(key) == 'object')	    key = key.index;
		$$('.videoinfos').each(function(single){
		    if (single.getProperty('id') != 'videoinfos_'+key)
				single.setStyle('display', 'none');
			//	single.slider.hide();
		});
	    if ($('videoinfos_'+key) != null)
			$('videoinfos_'+key).setStyle('display', 'block');
			//$('videoinfos_'+key).slider.show();
	},
	loadPlaylist: function(){
	    var self = this;
	    playlist = this.player.getPlaylist();
		counter = this.options.maxItems;
		playlist.each(function(item, key){
		    if (counter-- > 0) {
				single = new jmPlaylistItem(item, key);
				self.items.include(single);
			}
		});
	},
	writeHtml: function ()
	{
	    var self = this;
	    var parent = $('video');
	    var wrapper = new Element('div');
	        wrapper.addClass('playlist');
		wrapper.inject(parent, 'after');
		
		    
		var headline = new Element('h2');
		    headline.addClass('homepage_article_title2');
		    headline.innerHTML = this.options.title;
		//wrapper.adopt(new Element('h2').addClass('homepage_article_title2').setText(this.options.title));
		wrapper.adopt(headline);
		
		var innerWrapper = new Element('div');
		    innerWrapper.addClass('inner');
		    wrapper.adopt(innerWrapper);
		    
		this.items.each(function(item){
			itemHtml = item.writeHtml();
			innerWrapper.adopt(itemHtml);
			itemHtml.addEvent('click', function(){self.showVideo(item)});
		});
		var wrapperInfos = new Element('div');
		    wrapperInfos.addClass('infowrapper');
		    wrapperInfos.inject(wrapper, 'after');
		this.infotexte.each(function(item){
			wrapperInfos.adopt(item);
		});
	},
	showVideo: function(item){
		this.player.sendEvent('ITEM',item.key);
		this.player.sendEvent("PLAY","false");
		this.showInfos(item.key);
	}
});
jmPlaylists.implement(new Options);

var jmPlaylistItem = new Class({
	initialize: function (item, key)
	{
	    this.item = item;
	    this.key = key;
	},
	getImage: function()
	{
	    var imgSrc = '';
		if (this.item.image != '') imgSrc = this.item.image;

		img = new Element('img');
		img.setProperty('src', imgSrc);
		img.setProperty('width', '90');
		img.setProperty('height', '50');
		img.setStyle('border', '1px solid #000');
		img.setProperty('alt', 'test');
		return img;
	},
	writeHtml: function()
	{
	    var title = new Element('dd');
	        title.addClass('title');
	        title.innerHTML = this.item.title;
	    var desc = new Element('dd');
	        desc.addClass('desc');
	        desc.innerHTML = this.item.description;
	        
		var wrapper = new Element('dl');
			wrapper.setStyle('background','#fff');
		wrapper.adopt(new Element('dt').adopt(this.getImage()));
		wrapper.adopt(title);
		wrapper.adopt(desc);
		wrapper.addEvent('mouseenter', function(){
			wrapper.addClass('hover');
				new Fx.Style(wrapper, 'opacity', {duration:200}).start(1);
				var img = wrapper.getElement('img');
				new Fx.Style(img, 'opacity', {duration:200}).start(1);
		});
		wrapper.addEvent('mouseleave', function(){
			wrapper.removeClass('hover');
				new Fx.Style(wrapper, 'opacity', {duration:500}).start(0.6);
				var img = wrapper.getElement('img');
				new Fx.Style(img, 'opacity', {duration:200}).start(0.6);

		});
		wrapper.setStyle('cursor', 'pointer');
		new Fx.Style(wrapper, 'opacity', {duration:500}).start(0.6);
				var img = wrapper.getElement('img');
				new Fx.Style(img, 'opacity', {duration:200}).start(0.6);
		return wrapper;
	}
});


function playerReady(thePlayer) {
	if (thePlayer.id == 'player')
	{
		//player = $(thePlayer.id);
		var boundPlaylist = createPlaylist.bind(thePlayer);
		boundPlaylist();
	}
}
var createPlaylist = function () {
	playerX = $(this.id);
	this.refreshCounter = 1;
	if (playerX != null && playerX.getPlaylist().length != 0) {
			new jmPlaylistsX(playerX, {'title': 'More Videos'});
	} else {
	    if (this.refreshCounter <10)
		{
		    this.refreshCounter++;
			createPlaylist.delay(50, this);
		}
	}
}