/**
 * Class to handle deister media buttons
 * 
 */

// Create instance when page is ready
var dm;
document.observe('dom:loaded', function(){
	dm = new DeisterMedia();
});

var DeisterMedia = Class.create();
Object.extend(DeisterMedia.prototype, {

	containerIds: [],
	
	/**
	 * Initializes instance
	 * 
	 */
	initialize: function(){
		var _this = this;
		
		// tell trigger links to show the list of links
		$$('.deistermedia-buttons ul li a.button-trigger').each(function(elm, i){
			Event.observe(elm, 'click', function(evt){
				// stop click event
				Event.stop(evt);

				var listObj = $(elm).next('dl'),
					descendantAnchors = listObj.getElementsBySelector('dd a');
				
				// if there is only one link contained
				// directly fire a click on it and do not show the list
				if (1 == descendantAnchors.length && $(elm).up('li.videos') && $(elm).onclick) {
					var firstAndOnlyAnchor = descendantAnchors.first();
					firstAndOnlyAnchor.onclick();
					return;
				}
				
				// Now there seem to be more than one link in the list.
				// Toggle visibility of list and hide others
				listObj.absolutize();
				listObj.toggle();
				$$('.deistermedia-buttons dl').each(function(otherListObj, i){
					if( otherListObj != listObj ){
						otherListObj.hide();
					}
				});
			});
		});
		
		// tell video trigger links to hide video list on double click
		// and call onDblClickVideoTrigger (which hides all video players used)
		$$('.deistermedia-buttons ul li.videos a.button-trigger').each(function(elm, i){
			Event.observe(elm, 'dblclick', function(evt){
				Event.stop(evt);
				$(elm).next('dl').hide();
				_this.onDblClickVideoTrigger();
			});
		});
		
		// tell each video link to hide dl when clicked
		$$('.deistermedia-buttons ul li.videos dl dd a').each(function(elm, i){
			Event.observe(elm, 'click', function(evt){
				$(elm).up('dl').hide();
			});
		});
		
	},
	
	
	/**
	 * Remebers a containers id
	 * 
	 * @param id string 
	 */
	addContainerId: function(id){
		if( this.containerIds.indexOf(id) >= 0 ){
			return;
		}
		
		this.containerIds.push(id);
	},
	
	
	/**
	 * Called when a video link has been clicked
	 * 
	 * @param conf array see doc of DeisterMedia.showVideoPlayer
	 * @return false 
	 */
	onClickVideoLink: function(conf){
		this.addContainerId(conf.id);
		//this.onDblClickVideoTrigger();
		
		if( !$(conf.id).visible() ){
			new Effect.Appear(conf.id, {
				'duration' : .5,
				'afterFinish' : function(){
					// load video
					$(conf.id).show();
					dm.showVideoPlayer(conf);
				}
			});			
		} else {
			dm.showVideoPlayer(conf);
		}
		
		return false;
	},

	
	/**
	 * Called on double click on video trigger links. Hides all
	 * used video containers.
	 * 
	 */
	onDblClickVideoTrigger: function(){
		this.containerIds.each(function(containerId){
			$(containerId).innerHTML = '';
			new Effect.Fade(containerId, {
				'duration' : .5
			});

		});
	},
	
	
	/**
	 * Shows a videoplayer
	 * 
	 * @param conf array Configuration array. Must contain
	 * 					 id 		DOM id of element to display player in
	 * 					 swf 		path to video player swf file (flowplayer)
	 * 					 playlist	playlist 
	 * 					 width		width of that container
	 * 					 height		height of that container
	 * 
	 */
	showVideoPlayer: function(conf){
		try {
			// format container to desired size
			$(conf.id).setStyle({
				'height' : conf.height + 'px',
				'width' : conf.width + 'px'
			});
			// prepare api configuration
			var swfConf = {
				'src' : conf.swf,
				'wmode' : 'opaque'
			};
			var fpConf = {
				'playlist' : [conf.playlist],
				'clip' : {
					'autoPlay' : true,
					'scaling' : '1',
					'onFinish' : dm.onDblClickVideoTrigger.bind(this)
				},
				'plugins' : {
					'controls' : {
						'autoHide': 'never',
						'playlist': true
					}
				}
			};
			// add key if present
			if( undefined != conf.key ){
				fpConf.key = conf.key;
			}
			// run flowplayer api function
			flowplayer(conf.id, swfConf, fpConf); 
		} catch(x) {}
	}
	
	
	
});