var jmPlaylist = 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);
	}
});
jmPlaylist.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;

		//return '<img src="'+imgSrc+'" width="90" height="50" style="border:1px solid #000;" alt="test" />';
		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(new Element('dd').addClass('title').setText('test'+this.item.title));
		wrapper.adopt(title);
		//wrapper.adopt(new Element('dd').addClass('desc').setText(this.item.description));
		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);
					//img.setStyle('position', 'relative');

				//var myEffects = new Fx.Styles(img, {duration: 100, transition: Fx.Transitions.linear});
				//height from 10 to 100 and width from 900 to 300
				//myEffects.start({'width':98, 'left':  '-4px'});
		});
		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);
					//img.setStyle('position', 'inherit')
				//var myEffects = new Fx.Styles(img, {duration: 120, transition: Fx.Transitions.linear});
				//height from 10 to 100 and width from 900 to 300
				//myEffects.start({'width':90,'left':  '0px'});

		});
		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) {
	    window.addEvent('domready', function(){
			new jmPlaylist(playerX, {'title': 'More Videos'});
        });
	} else {
	    if (this.refreshCounter <10)
		{
		    this.refreshCounter++;
			createPlaylist.delay(50, this);
		}
	}
}