var tx_zwexmediathek_pi1_instance;
var tx_zwexmediathek_pi1_setProgress = function(percent) { tx_zwexmediathek_pi1_instance.setProgress(percent); };
var tx_zwexmediathek_pi1_totalProgress = function(duration) { tx_zwexmediathek_pi1_instance.totalProgress(duration); };
var tx_zwexmediathek_pi1_clipComplete = function() { tx_zwexmediathek_pi1_instance.clipComplete(); };
var tx_zwexmediathek_pi1_class = new Class({
	cObj: false,
	oDark: false,
	oWait: false,
	oBox: false,
	oTopMiddle: false,
	oMiddleRight: false,
	oBottomMiddle: false,
	oRel: false,
	oDesc: false,
	oVideo: false,
	oBacklink: false,
	body: false,
	media_filter: false,
	flObj: false,
	playing: true,
	sound: true,
	hq: false,
	buttons: {
		wrapper: false,
		playpause: false,
		'stop': false,
		sound: false,
		hq: false
	},
	progress: {
		width: false,
		el1: false,
		el2: false,
		dragActive: false,
		dragEl: false
	},
	infobar: {
		duration: 0,
		curEl: false,
		durEl: false
	},

	initialize: function() {
		/*
		 * Zuverlässige Browserweiche für IE 6+7+8
		 */
		if(Browser.Engine.trident) {
			Browser.Engine.trident4 = false;
			Browser.Engine.trident5 = false;
			Browser.Engine.trident6 = false;
			var engine = document.createElement('div');
    		engine.innerHTML = '<!--[if IE 6]>4<![endif]--><!--[if IE 7]>5<![endif]--><!--[if IE 8]>6<![endif]-->';
    		var engine = engine.innerHTML.charCodeAt(0) == 60 ? false : parseInt(engine.innerHTML);
    		if(engine) eval('Browser.Engine.trident'+engine+' = true;');
		};
		var _this = this;
		this.body = $$('body')[0];
		this.media_filter = $('media_filter');
		var forms = this.media_filter.getElements('form');
		if($chk(forms)) {
			forms.each(function(form,i) {
				var selects = form.getElements('select');
				if($chk(selects)) {
					selects.each(function(select,i) {
						select.addEvent('change',function(e) {
							form.submit();
						});
					});
				};
			});
		};
		var medias = $$('#media_index a');
		if($chk(medias)) {
			medias.each(function(media,i) {
				if($chk(media.href)) {
					if(media.href.match(/\.(?:jpe|jpeg|jpg|gif|png)$/i)) { //Bilder
						media.addEvent('click',function(e) {
							new Event(e).preventDefault();
							this.blur();
							var loaded = false;
							_this.createPreloader();
							new Asset.image(this.href,{onload: function() {
								if(!loaded) {
									loaded = true;
									_this.destroyPreloader();
									_this.createOverlay(this).setOverlaySize({
										width: this.width,
										height: this.height
									});
								};
							}});
						});
					} else if(media.href.match(/\.flv$/i)) { //Filme
						//rel-Attribut auslesen
						var rel = media.getProperty('rel');
						//JSON im rel-Attribut evaluieren
						if($chk(rel) && rel.match(/tx_zwexmediathek_pi2\[uid\]=[0-9]+/i)) {
							media.addEvent('click',function(e) {
								new Event(e).preventDefault();
								this.blur();
								_this.loadClip(rel);
							});
						};
					};
				};
			});
		};
	},

	createPreloader: function() {
		var dimensions = this.getDimensions();
		this.oDark = new Element('div',{
			id: 'media_overlay_dark',
			styles: {
				width: dimensions.document.width,
				height: dimensions.document.height
			}
		});
		this.oWait = new Element('div',{
			id: 'media_overlay_wait',
			styles: {
				left: (((dimensions.viewport.width-128)/2)+dimensions.scrollOffset.left), //128 Pixel Breite
				top: (((dimensions.viewport.height-15)/2)+dimensions.scrollOffset.top) //15 Pixel Höhe
			}
		});
		//Fix für den Internet Explorer 6
		if(Browser.Engine.trident4) this.media_filter.addClass('hide-select');
		this.body.adopt(
			this.oDark,
			this.oWait
		);
	},

	destroyPreloader: function() {
		this.oDark.destroy();
		this.oWait.destroy();
	},

	createOverlay: function(content) {
		var _this = this;
		this.cObj = new Element('div',{id: 'media_overlay_content'}).adopt(content);
		this.oDark = new Element('div',{id: 'media_overlay_dark'});
		this.oTopMiddle = new Element('div',{id: 'media_overlay_top_middle'});
		this.oMiddleRight = new Element('div',{id: 'media_overlay_middle_right'});
		this.oBottomMiddle = new Element('div',{id: 'media_overlay_bottom_middle'});
		this.oBox = new Element('div',{id: 'media_overlay_box'}).adopt(
			new Element('div',{id: 'media_overlay_top_left'}),
			this.oTopMiddle,
			new Element('div',{id: 'media_overlay_top_right'}),
			this.oMiddleRight,
			new Element('div',{id: 'media_overlay_bottom_left'}),
			this.oBottomMiddle,
			new Element('div',{id: 'media_overlay_bottom_right'}),
			this.cObj,
			new Element('div',{id: 'media_overlay_close'}).adopt(
				new Element('a',{
					href: '#',
					events: {
						'click': function(e) {
							new Event(e).preventDefault();
							this.blur();
							_this.destroyOverlay();
						}
					}
				})
			)
		);
		this.body.adopt(
			this.oDark,
			this.oBox
		);
		/*
		 * IE7 hat total ein Rad ab. Erst einmal muss man das Element mit Gewalt "aktivieren", wegen
		 * irgendwelcher Lizenzeinsparungen bei M$. Dann muss man das Element erneut mit nativen
		 * DOM-Methoden abfragen. Ansonsten hat man keine ExternalInterface-Funktionalitäten.
		 *
		 * Update 29.03.2010: IE8 macht auf bestimmten Maschinen das gleiche Theater!
		 */
		if((Browser.Engine.trident5 || Browser.Engine.trident6) && this.flObj) {
			var params = this.flObj.getElementsByTagName('param');
			var innerHTML = '';
			if($chk(params)) {
				$A(params).each(function(param) { innerHTML += param.outerHTML; });
			};
			this.flObj.outerHTML = this.flObj.outerHTML.replace('>','>'+innerHTML);
			this.flObj = document.getElementById('media_overlay_player_flobj');
		};
		return this;
	},

	setOverlaySize: function(args) {
		var dimensions = this.getDimensions();

		//Komplette Maße mit allem
		var cWidth = args.width+29+52+18; //29 Pixel links, 52 Pixel rechts, 18 Pixel Schatten rechts
		var cHeight = args.height+50+41+18; //50 Pixel oben, 41 Pixel unten, 18 Pixel Schatten unten

		//Fix für den Internet Explorer 6
		if(Browser.Engine.trident4) {
			this.cObj.setStyles({
				width: args.width+29+38, //29 und 38 Pixel padding links und rechts
				height: args.height+36+27 //36 und 27 Pixel padding oben und unten
			});
		} else {
			this.cObj.setStyles({
				width: args.width,
				height: args.height
			});
		};

		this.oDark.setStyles({
			width: Math.max(dimensions.document.width,cWidth),
			height: Math.max(dimensions.document.height,cHeight)
		});

		this.oBox.setStyles({
			width: cWidth,
			height: cHeight,
			top: Math.max(0,(((dimensions.viewport.height-cHeight)/2)+dimensions.scrollOffset.top)),
			left: Math.max(0,(((dimensions.viewport.width-cWidth)/2)+dimensions.scrollOffset.left))
		});

		this.oTopMiddle.setStyle('width',cWidth-14-32); //14 Pixel links, 32 Pixel rechts
		this.oMiddleRight.setStyle('height',cHeight-28-46); //14 Pixel oben, 42 Pixel unten
		this.oBottomMiddle.setStyle('width',cWidth-28-46); //28 Pixel links, 46 Pixel rechts

		return this;
	},

	destroyOverlay: function() {
		this.oDark.destroy();
		this.oBox.destroy();
		//Fix für den Internet Explorer 6
		if(Browser.Engine.trident4) this.media_filter.removeClass('hide-select');
		this.playing = true;
		this.sound = true;
		this.hq = false;
		this.progress.dragActive = false;
		if(this.progress.dragEl) this.progress.dragEl.stop();
		return this;
	},

	loadClip: function(url) {
		var _this = this;
		this.createPreloader();
		new Request({
			url: url,
			method: 'get',
			onSuccess: function(response) {
				_this.destroyPreloader();
				var json = false
				try {
					eval('json = '+response+';');
				} catch(exception) {};
				if(json) {
					_this.
						createOverlay(_this.buildPlayer(json)).
						setOverlaySize(
							_this.videoOverlaySize(json.width,json.height)
						).
						setPlayerSize(json.width,json.height,json.related.length);
				}
			},
			onFailure: function() {
				_this.destroyPreloader();
			}
		}).send();
		return this;
	},

	buildPlayer: function(json) {
		var _this = this;
		/*
		 * Wir müssen hier zuerst einmal eine feste Höhe und Breite vergeben. Diese müssen später
		 * getrennt geändert werden.
		 */
		this.flObj = $(new Swiff('typo3conf/ext/zwex_mediathek/pi1/tx_zwexmediathek_pi1.swf',{
			id: 'media_overlay_player_flobj',
			width: json.width,
			height: json.height,
			vars: {
				media: this.httpLocation(json.media_local),
				width: json.width,
				height: json.height,
				cbprefix: 'tx_zwexmediathek_pi1'
			}
		}));
		this.oRel = new Element('div',{id: 'media_overlay_player_related'});
		var relEvent = function(e,url) {
			new Event(e).preventDefault();
			this.blur();
			_this.destroyOverlay();
			_this.loadClip(url);
		};
		for(var i=0;i<json.related.length;i++) {
			var relLink = new Element('a',{href: '#'}).set('text',json.related[i].fe_title);
			relLink.addEvent('click',relEvent.create({
				arguments: [json.related[i].url],
				event: true,
				bind: relLink
			}));
			this.oRel.adopt(new Element('div',{
				'class': 'media_overlay_player_related_wrapper1 '+((i==(json.related.length-1)) ? 'last' : '')
			}).adopt(
				new Element('div',{
					'class': 'media_overlay_player_related_wrapper2'
				}).adopt(
					new Element('img',{
						src: json.related[i].thumbnail
					})
				),
				new Element('h2').adopt(relLink),
				new Element('div',{
					'class': 'clear'
				})
			));
		};
		this.infobar.curEl = new Element('div',{id: 'media_overlay_player_current'}).set('text','00:00');
		this.infobar.durEl = new Element('div',{id: 'media_overlay_player_total'}).set('text','00:00');
		this.progress.el2 = new Element('div',{id: 'media_overlay_player_handle'});
		this.progress.dragEl = new Drag(this.progress.el2,{
			modifiers: {x: 'left', y: false},
			limit: {x: [0,this.progress.width], y: false},
			onComplete: function(drag,e) {
				Swiff.remote(_this.flObj,'seekClipPercent',(drag.getStyle('left').toInt()/(_this.progress.width/100)),_this.playing);
				_this.progress.dragActive = false;
			},
			onDrag: function(drag,e) {
				_this.progress.el1.setStyle(
					'background-position',
					(0-(1920-drag.getStyle('left').toInt()))+'px 7px'
				);
			},
			onStart: function() { _this.progress.dragActive = true; },
			onCancel: function() { _this.progress.dragActive = false; }
		});
		this.progress.dragEl.attach();
		this.progress.el1 = new Element('div',{
			id: 'media_overlay_player_bar',
			events: {
				'click': function(e) {
					var percent = ((new Event(e).page.x-this.getPosition().x)/(_this.progress.width/100));
					_this.setProgress(percent);
					Swiff.remote(_this.flObj,'seekClipPercent',percent,_this.playing);
				}
			}
		}).adopt(this.progress.el2);
		this.buttons.stop = new Element('div',{
			id: 'media_overlay_player_stop'
		}).adopt(
			new Element('a',{
				href: '#',
				events: {
					'click': function(e) {
						this.blur();
						new Event(e).preventDefault();
						Swiff.remote(_this.flObj,'stopClip');
						_this.playing = false;
						_this.togglePlayPause();
						_this.setProgress(0);
					}
				}
			})
		);
		this.buttons.playpause = new Element('div',{
			id: 'media_overlay_player_playpause',
			'class': 'pause'
		}).adopt(
			new Element('a',{
				href: '#',
				events: {
					'click': function(e) {
						this.blur();
						new Event(e).preventDefault();
						if(_this.playing) {
							Swiff.remote(_this.flObj,'pauseClip');
							_this.playing = false;
						} else {
							Swiff.remote(_this.flObj,'playClip');
							_this.playing = true;
						};
						_this.togglePlayPause();
					}
				}
			})
		);
		this.buttons.sound = new Element('div',{
			id: 'media_overlay_player_sound',
			'class': 'mute',
			'styles': {
				right: 50
			}
		}).adopt(
			new Element('a',{
				href: '#',
				events: {
					'click': function(e) {
						this.blur();
						new Event(e).preventDefault();
						_this.toggleSound();
					}
				}
			})
		);
		if($chk(json.media_local_hq) && $chk(json.hq_width) && $chk(json.hq_height)) {
			this.buttons.sound.setStyle('right',72);
			this.buttons.hq = new Element('div',{
				id: 'media_overlay_player_hq',
				'class': 'hq'
			}).adopt(
				new Element('a',{
					href: '#',
					events: {
						'click': function(e) {
							this.blur();
							new Event(e).preventDefault();
							_this.toggleHQ(json);
						}
					}
				})
			);
		} else {
			this.buttons.hq = new Element('div');
		};
		this.oVideo = new Element('div',{id: 'media_overlay_player_video'}).adopt(this.flObj);
		this.oDesc = new Element('div',{id: 'media_overlay_player_description'}).
			set('html','<h2>'+json.fe_title+'</h2>'+json.description);
		this.oBacklink = new Element('div',{id: 'media_overlay_player_backlink'}).adopt(
			new Element('a',{
				href: json.backlink
			}).set('text','zur Mediathek') //@todo: Hier eventuell internationalisieren
		);
		this.buttons.wrapper = new Element('div',{id: 'media_overlay_player_buttons_wrapper'}).adopt(
			this.buttons.playpause,
			this.buttons.stop,
			this.buttons.sound,
			this.buttons.hq
		);
		return new Element('div',{
			id: 'media_overlay_player_wrapper'
		}).adopt(
			this.oVideo,
			this.oDesc,
			this.oRel,
			this.oBacklink,
			this.infobar.curEl,
			this.infobar.durEl,
			this.progress.el1,
			this.buttons.wrapper
		);
	},

	setPlayerSize: function(width,height,related) {
		var rHeight = Math.min(((related*70)-5),(height-105));
		this.oRel.setStyles({
			left: width+20,
			top: height-rHeight+5,
			height: rHeight-5
		});
		this.infobar.curEl.setStyle('top',height+9);
		this.infobar.durEl.setStyles({
			top: height+9,
			left: width-50
		});
		this.progress.width = width-100;
		this.progress.el1.setStyles({
			top: height+5,
			width: this.progress.width
		});
		this.oVideo.setStyles({
			width: width,
			height: height
		});
		this.oDesc.setStyles({
			left: width+20,
			height: height-rHeight-5
		});
		this.oBacklink.setStyles({
			top: height+31,
			left: width+20
		});
		this.buttons.wrapper.setStyles({
			top: height+27,
			width: width
		});
		return this;
	},

	clipComplete: function() {
		Swiff.remote(this.flObj,'stopClip');
		this.playing = false;
		this.togglePlayPause();
		this.setProgress(0);
	},

	setProgress: function(percent) {
		if(!this.progress.dragActive) {
			var progress = ((this.progress.width/100)*percent);
			this.progress.el2.setStyle('left',progress);
			this.progress.el1.setStyle('background-position',(0-(1920-progress))+'px 7px');
			if(this.infobar.duration > 0) {
				this.infobar.curEl.set('html',this.time2str(((this.infobar.duration/100)*percent)));
			};
		};
	},

	totalProgress: function(duration) {
		this.infobar.duration = duration;
		this.infobar.durEl.set('html',this.time2str(duration));
	},

	time2str: function(seconds) {
		seconds = parseInt(seconds);
		var minStr = String(parseInt(seconds/60));
		var secStr = String(parseInt(seconds%60));
		return ((minStr.length == 1) ? '0' : '')+minStr+':'+((secStr.length == 1) ? '0' : '')+secStr;
	},

	togglePlayPause: function() {
		if(this.playing) {
			this.buttons.playpause.removeClass('play');
			this.buttons.playpause.addClass('pause');
		} else {
			this.buttons.playpause.addClass('play');
			this.buttons.playpause.removeClass('pause');
		};
	},

	toggleSound: function() {
		if(this.sound) {
			Swiff.remote(this.flObj,'setVolPercent',0);
			this.buttons.sound.removeClass('mute');
			this.buttons.sound.addClass('play');
			this.sound = false;
		} else {
			Swiff.remote(this.flObj,'setVolPercent',100);
			this.buttons.sound.addClass('mute');
			this.buttons.sound.removeClass('play');
			this.sound = true;
		};
	},

	toggleHQ: function(json) {
		if(this.hq) {
			this.setOverlaySize(this.videoOverlaySize(json.width,json.height));
			this.setPlayerSize(json.width,json.height,json.related.length);
			this.resizeSwiffObject(json.width,json.height);
			Swiff.remote(this.flObj,'loadClip',this.httpLocation(json.media_local),json.width,json.height);
			this.buttons.hq.removeClass('lq');
			this.buttons.hq.addClass('hq');
			this.hq = false;
		} else {
			this.setOverlaySize(this.videoOverlaySize(json.hq_width,json.hq_height));
			this.setPlayerSize(json.hq_width,json.hq_height,json.related.length);
			this.resizeSwiffObject(json.hq_width,json.hq_height);
			Swiff.remote(this.flObj,'loadClip',this.httpLocation(json.media_local_hq),json.hq_width,json.hq_height);
			this.buttons.hq.addClass('lq');
			this.buttons.hq.removeClass('hq');
			this.hq = true;
		};
		this.buttons.playpause.removeClass('play');
		this.buttons.playpause.addClass('pause');
		this.playing = true;
	},

	resizeSwiffObject: function(width,height) {
		/*
		 * Der Internet Explorer kann die Höhe und Breite von FLASH nicht per mooTools-Erweiterungen
		 * ändern. Wir müssen hier mit nativen Methoden arbeiten.
		 */
		if(!Browser.Engine.trident) {
			this.flObj.setStyles({
				width: width,
				height: height
			});
		} else {
			this.flObj.setAttribute('width',width);
			this.flObj.setAttribute('height',height);
		};
		return this;
	},

	videoOverlaySize: function(width,height) {
		return {
			width: width+314, //314 Pixel für Beschreibung und Teaser
			height: height+47 //47 Pixel für Player-Knöpfe
		};
	},

	httpLocation: function(url) {
		return 'http://'+location.host+'/uploads/tx_zwexmediathek/'+url;
	},

	getDimensions: function() {
		//Für folgendes "liebe" ich JavaScript!
		var aaa = 0;
		var aab = 0;
		var aba = 0;
		var abb = 0;
		var aca = 0;
		var acb = 0;
		var b=window;
		var c;
		var d;
		try {
			c=document.body;
			d=document.documentElement;
		} catch(ex){};

		//Hier wird jetzt mit allen möglichen Werten versucht, maximale Größen zu ermitteln
		try {
			if(c.clientWidth) {
				if(aaa<c.clientWidth) aaa=c.clientWidth;
				if(c.clientWidth > 0 && (aba == 0 || aba>c.clientWidth)) aba=c.clientWidth;
			};
		} catch(ex){};
		try {
			if(c.scrollWidth && aaa<c.scrollWidth) aaa=c.scrollWidth;
		} catch(ex){};
		try {
			if(d.scrollWidth && aaa<d.scrollWidth) aaa=d.scrollWidth;
		} catch(ex){};
		try {
			if(d.clientWidth) {
				if(aaa<d.clientWidth) aaa=d.clientWidth;
				if(d.clientWidth > 0 && (aba == 0 || aba>d.clientWidth)) aba=d.clientWidth;
			};
		} catch(ex){};
		try {
			if(d.offsetWidth) {
				if(aaa<d.offsetWidth) aaa=d.offsetWidth;
				if(d.offsetWidth > 0 && (aba == 0 || aba>d.offsetWidth)) aba=d.offsetWidth;
			};
		} catch(ex){};
		try {
			if(c.offsetWidth) {
				if(aaa<c.offsetWidth) aaa=c.offsetWidth;
				if(c.offsetWidth > 0 && (aba == 0 || aba>c.offsetWidth)) aba=c.offsetWidth;
			};
		} catch(ex){};
		try {
			if(b.innerWidth) {
				if(aaa<b.innerWidth) aaa=b.innerWidth;
				if(b.innerWidth > 0 && (aba == 0 || aba>b.innerWidth)) aba=b.innerWidth;
			};
		} catch(ex){};
		try {
			if(c.clientHeight) {
				if(aab<c.clientHeight) aab=c.clientHeight;
				if(c.clientHeight > 0 && (abb == 0 || abb>c.clientHeight)) abb=c.clientHeight;
			};
		} catch(ex){};
		try {
			if(c.scrollHeight && aab<c.scrollHeight) aab=c.scrollHeight;
		} catch(ex){};
		try {
			if(d.scrollHeight && aab<d.scrollHeight) aab=d.scrollHeight;
		} catch(ex){};
		try {
			if(d.clientHeight) {
				if(aab<d.clientHeight) aab=d.clientHeight;
				if(abb>d.clientHeight > 0 && (abb == 0 || abb>d.clientHeight)) abb=d.clientHeight;
			};
		} catch(ex){};
		try {
			if(d.offsetHeight) {
				if(aab<d.offsetHeight) aab=d.offsetHeight;
				if(d.offsetHeight > 0 && (abb == 0 || abb>d.offsetHeight)) abb=d.offsetHeight;
			};
		} catch(ex){};
		try {
			if(c.offsetHeight) {
				if(aab<c.offsetHeight) aab=c.offsetHeight;
				if(c.offsetHeight > 0 && (abb == 0 || abb>c.offsetHeight)) abb=c.offsetHeight;
			}
		} catch(ex){};
		try {
			if(b.innerHeight) {
				if(aab<b.innerHeight) aab=b.innerHeight;
				if(b.innerHeight > 0 && (abb == 0 || abb>b.innerHeight)) abb=b.innerHeight;
			};
		} catch(ex){};
		try {
			if(b.pageXOffset && aca<b.pageXOffset) aca=b.pageXOffset;
		} catch(ex){};
		try {
			if(d.scrollLeft && aca<d.scrollLeft) aca=d.scrollLeft;
		} catch(ex){};
		try {
			if(c.scrollLeft && aca<c.scrollLeft) aca=c.scrollLeft;
		} catch(ex){};
		try {
			if(b.pageYOffset && acb<b.pageYOffset) acb=b.pageYOffset;
		} catch(ex){};
		try {
			if(d.scrollTop && acb<d.scrollTop) acb=d.scrollTop;
		} catch(ex){};
		try {
			if(c.scrollTop && acb<c.scrollTop) acb=c.scrollTop;
		} catch(ex){};

		//Leserlich zurückgeben
		return {
			'document':{'width':aaa,'height':aab},
			'viewport':{'width':aba,'height':abb},
			'scrollOffset':{'left':aca,'top':acb}
		};
	}
});

window.addEvent('domready',function() {
	tx_zwexmediathek_pi1_instance = new tx_zwexmediathek_pi1_class();
});