SF.Modul.Media= function(){
	var templates=
	{
		img : '<img  border="0"  src="{href}" alt="" style="position:absolute;top:0px;left:0px;display:none;"/>'
		,toolbar : '<div style="position:absolute;bottom:0;right:0">xx</div>'
        ,nav:{
                close:  '<div id="shadowbox_nav_close">' +
                            '<a href="javascript:Shadowbox.close();"><span class="shortcut">C</span>lose</a>' +
                        '</div>',
                next:   '<div id="shadowbox_nav_next">' +
                            '<a href="javascript:Shadowbox.next();"><span class="shortcut">N</span>ext</a>' +
                        '</div>',
                prev:   '<div id="shadowbox_nav_previous" >' +
                            '<a href="javascript:Shadowbox.previous();"><span class="shortcut">P</span>revious</a>' +
                        '</div>'
		}
		,swf:'<div style="position:absolute;top:0px;left:0px;width:100%;height:100%;display:none;">'+
            '<object id="flash-{id}" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="{swfWidth}" height="{swfHeight}">'+
            '<param name="movie" value="{href}" />'+
            '<param name="quality" value="high" />'+
            '<param name="wmode" value="transparent" />'+
            '<param name="flashvars" value="{computedflashvars}" />'+
            '<param name="allowScriptAccess" value="domain" />'+
            '<param name="align" value="t" />'+
            '<param name="salign" value="TL" />'+
            '<param name="swliveconnect" value="true" />'+
            '<param name="scale" value="showall" />'+
            '<embed name="flash-{id}" src="{href}" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="{computedflashvars}" type="application/x-shockwave-flash" width="{swfWidth}" height="{swfHeight}" wmode="transparent" allowScriptAccess="always" swliveconnect="true" align="t" salign="TL" scale="showall"></embed>'+
            '</object>'+
            '</div>'
/**		
		,wmv:"<object classid='CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95'  codebase='http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701' type='application/x-oleobject' width='320' height='285' standby='einen Moment bitte ...' id='mediaPlayer'>"
			+"<param name='fileName' value='images/alexandra_1_trailer.wmv' />"
	        +"<param name='animationatStart' value='false' />"
			+"<param name='transparentatStart' value='true' />"
			+"<param name='autoStart' value='true' />"
			+"<param name='showControls' value='true' />"
			+"<param name="ShowStatusBar" value='false' />"
			+"<param name='loop' value='0' />"
			+"<embed src='images/alexandra_1_trailer.wmv' width='320' height='285' autostart='true' loop='0' type='application/x-mplayer2' 
           pluginspage='http://microsoft.com/windows/mediaplayer/en/download/'
           displaysize='4'
           autosize='0'
           bgcolor='black'
           showcontrols="true"
           showtracker='1'
           showstatusbar='false'
           showdisplay='0'
           videoborder3d='0'  
           designtimesp='5311' filename="images/alexandra_1_trailer.wmv" animationatstart="false" transparentatstart="true"> </embed>
      </object>
		
		'
*/		
	};                        
	var Gallery=function(opt)
	{
		opt = opt ||{};
		Ext.apply(this,opt);
		var r = Ext.getDom(opt.rootID) || document;
		var as = Ext.DomQuery.select('a[@sfmedia]',r);
		var p;
		this.data=[];
		Ext.each(as,function(e)
		{
			this.data[this.data.length]=
				{
					href:e.href,
					a:e
					,id:'SWFX'
					,swfWidth:'100%'
					,swfHeight:'100%'					
					,computedflashvars:''
				}
			Ext.fly(e).on('click',this.imageClick,this);
		},this);
		this.tBox = Ext.get(opt.target);
		this.hideBox = Ext.get(opt.tohide);
		//this.tBox.setStyle("position","relative");
	}
	Gallery.prototype={
		imageClick:function(e)
		{
			e.stopEvent();
			var x1 = e.getTarget('a[@sfmedia]');
			for ( var i=0,l=this.data.length;i<l;i++)
			{
				if ( this.data[i].a == x1 )
				{
					this.show(this.data[i]);
					return;
				}
			}
			
		}
		,start:function()
		{
			this.show(this.data[0]);	
		}
		,getTmpl:function(el)
		{
			if ( this.use_template )
				return new Ext.Template(templates[this.use_template]);
			return new Ext.Template(templates.img);
		}
		,show:function(el)
		{
			if ( !el ) return;
			var tmpl = this.getTmpl(el);
			if ( this.hideBox) this.hideBox.setVisible(false);
			this.tBox.setVisible(true);
			if ( this.contentBody )
			{
				var oel = this.contentBody;
				Ext.fly(this.contentBody).setVisible(false,{
					duration:2
					,callback:function()
					{
						Ext.fly(oel).remove();	
					//	this.contentBody = tmpl.append(this.tBox, el);
					//	this.tBox.setVisible(true,true);
					}
					,scope:this
				});
				this.contentBody = tmpl.append(this.tBox, el);
				Ext.fly(this.contentBody).setVisible(true,{
					duration:2
				});
			}else {
				this.contentBody = tmpl.append(this.tBox, el);
				Ext.fly(this.contentBody).setVisible(true,{
					duration:2
				});
			}
		}
	};
	
	var targetBox=null;
	function imageClick(e)
	{
		e.stopEvent();
		var x1 = e.getTarget('a[@sfmedia]');
		if ( x1 && x1.href )
		Ext.Ajax.request({
			url: x1.href,
			success: function(a)
			{
				var h= a.getResponseHeader['Content-Type'];
/*				<span class="objectBox objectBox-string">application/x-shockwave-flash2-preview</span>
*/
				alert ( h );
			},
			failure: function(a)
			{
				alert ( "Failed" );
			}
		});
		
		return false;
	}
	return {
		initGallery:function(opt) 
		{
			Ext.onReady(function(){
				var g = new Gallery(opt);
				if ( opt.autoStart )
					g.start();
			//	toEl.setVisible(true,true);
			});
		}
		,init:function(opt) 
		{
			opt = opt ||{};
			var r = Ext.getDom(opt.rootID) || document;
			var as = Ext.DomQuery.select('a[@sfmedia]',r);
			Ext.each(as,function(e){
				Ext.fly(e).on('click',imageClick);
			},this);
		}
		,showBox:function() 
		{
			return new Ext.ux.GUID();
		}
	}
}();