var CJDSlide = new Class({
	
	// Constructor
	initialize: function(ContainerName, Options){
		
		this.Visible = false;
		this.Name = ContainerName;
		this.Background = null;
		
		try{
			this.Options = Options;
		}catch(e)
		{
			this.Options = null;
		}
		if(this.Options == null){
			// Standardeinstellungen
			this.Options = {};
			this.Options.Image = null;
			this.Options.ImageClass = '';
			this.Options.Content = ' ';
			this.Options.ContentClass = '';
			this.Options.Draggable = false;
			this.Options.Height = 0;
			this.Options.Title = ' ';
			this.Options.TitleClass = '';
			this.Options.Duration = 1;
			this.Options.EndPos = this.Options.Height;
			this.Options.WhiteBack = false;
		}
	},
	
	Display: function(Position){
		// Standard: bottom
		var Pos = Position==null ? 'bottom' : Position;
		
		// nur wenn noch nicht visible
		if(!this.Visible){

			// Bild laden
			var img = null;
			var imgWidth = null;
			var imgHeight = null;
			
			if(this.Options.Image != null){
				img = new Image();
				img.src = this.Options.Image;
				imgWidth = img.width.toInt();
				imgHeight = img.height.toInt();
			}
			
			// Alter noch da, nicht richtig beendet?
			if($(this.Name) != null){
				$(this.Name).remove();
			}

			var cTop = 0;
			var cHeight = 0;
			var eBegin = 0;
			var eEnd = 0;
						
			// Höhe des Containers c
			if(this.Options.Image != null){
				cHeight = imgHeight + 30;
			}else{
				cHeight = this.Options.Height == null ? 200 : this.Options.Height;
			}
			
			if(Pos == 'bottom'){
				if(this.Options.EndPos == null || this.Options.EndPos == 0){
					cTop = window.getScrollTop().toInt() + window.getHeight();
					eBegin = cTop;
					eEnd = cTop - cHeight;	
				}
			}
			
			if(Pos == 'top'){
				if(this.Options.EndPos == null || this.Options.EndPos == 0){
					cTop = 0;				// endet oben an 0
					eBegin = cHeight * -1;	// ani fängt bei -Länge an 
					eEnd = cTop;				// ani endet bei 0
				}else{
					cTop = 0 + this.Options.EndPos;
					eBegin = cHeight * -1;
					eEnd = cTop;
				}
			}
						
			this.eBegin = eBegin;
			this.eEnd = eEnd;
			
			
									
			// Container erstellen
			this.c = new Element('div',{
				styles:
				{
					display: 'block',
					//visibility: 'hidden',
					width: window.getWidth() + 'px',
					height: cHeight + 'px',
					//'border-top':'1px solid #caad35',
					//background: '#ec9104',
					'background-image':'url('+ CJImagePath + 'templates/basic/images/lay/bground.jpg)',
					padding: '25px 0 0 0',
					left: '0px',
					margin: '0 auto',
					position: 'absolute',
					top: (cHeight*2)*-1 + 'px'
				}
			});
						
			// id
			this.c.setAttribute('id', this.Name);
			
			// Image?
			var i = null;
			if(img != null){
				i = new Element('img', {
					styles:
					{
						border: '3px solid #fff',
						display: 'block',
						visibility: 'hidden',
						float: 'left',
						'margin-top': '20px',
						'margin-left': '20px',
						margin: '0 auto',
						height: imgHeight + 'px',
						width: '300px',
						'z-index': '1000'
					}
				});
				
				if(this.Options.ImageClass == null)
					this.Options.ImageClass = '';
				
				i.src = img.src;
				i.setAttribute('class', this.Options.ImageClass)
			}
			
			var dWidth = 0;
			if(i != null){
				dWidth = window.getWidth() - 2 - imgWidth;
			}else{
				dWidth = window.getWidth() - 2;
			}
			dWidth = dWidth - 70;
			
			// INFO Whiteback aktivieren
			var wb = null;
			var aniWhiteBack = null;
			
			if(this.Options.WhiteBack != null && this.Options.WhiteBack != false){
				wb = new Element('div', {
					styles:
					{
						display: 'block',
						position: 'absolute',
						top: 0,
						left: 0,
						'background-color': '#fff',
						height: window.getHeight(),
						width: window.getWidth()
					}
				});
				wb.innerHTML = ' ';
				
				// Opacity setzen
				wb.setOpacity(0)
				
				// einfügen
				wb.injectInside(document.body);
				
				aniWhiteBack = function(wb, onC){
					wb.effect('opacity', {
						duration: 500,
						transition: Fx.Transitions.linear,
						wait: false,
						onComplete: function(){
							// INFO Delay des büdelüms bei wb
							var fn = onC.delay(200);
						}
					}).start(0, 0.6);
				};
					
				
				/*
				aniWhiteBack = wb.effect('opacity', {
					duration: 500,
					transition: Fx.Transitions.linear,
					wait: false,
					onComplete: function(){
						alert('Whiteback fertig');
					}
				});*/
				
				wb.setAttribute('id', this.Name + '_wb');
			}

			var div = new Element('div', {
			    styles:
				{
					//float: 'left',
					//width: dWidth + 'px',
					width: '630px',
					//height: '100%',
					height: cHeight-40 + 'px',
					'text-align': 'left',
					//'border-bottom':'1px solid #caad35',
					display: 'block',
					padding:'15px 10px 0% 10px',
					margin: '0 auto',
					color: 'black',
					'background-image':'url('+ CJImagePath +'templates/basic/images/oth/tut_bg.jpg)'					
				}
			});
			
			div.setAttribute('id', this.Name + '_info');	
			
			
			if(this.Options.Title == null)
				this.Options.Title = '';
			
			if(this.Options.Content == null)
				this.Options.Content = ' ';
			
			if(this.Options.TitleClass == null)
				this.Options.TitleClass = '';
			
			if(this.Options.ContentClass == null)
				this.Options.ContentClass = '';
			
			div.innerHTML = '<img src="'+ CJImagePath +'templates/basic/images/oth/cj_tut_logo.jpg" width="250" height="250" alt="cachejudge :: Tutorial" style="float:left;margin-right:8px;"/><h1 class="'+ this.Options.TitleClass  +'">' + this.Options.Title + '</h1><br /><p class="'+ this.Options.ContentClass +'">' + this.Options.Content + '</p>';
			
						  
			if(this.Options.Duration == null)
				this.Options.Duration = 1;
			
			// hinzufügen
			this.c.injectInside(document.body);
			
			// Holder für animation
			var aniImage = null;
			var aniContainer = null;
			var aniContainerTop = null;
			
			
			if(i != null){
				i.injectInside(c);
				
				// effekt hinzufügen (bild)
				aniImage = i.effect('opacity', {
					duration: Math.round(200 / this.Options.Duration),
					transition: Fx.Transitions.linear,
					wait: false
				});//.start(0, 1);
				
			}
			
			// weitere effekte
			aniContainer = this.c.effect('opacity', {
				duration: Math.round(500 / this.Options.Duration),
				transition: Fx.Transitions.linear,
				wait: false
			});//.start(0, 0.9);
			
			aniContainerTop = this.c.effect('top', {
				duration: Math.round(1700 / this.Options.Duration),
				transition: Fx.Transitions.Bounce.easeOut,
				wait: false
			});//.start(eBegin, eEnd)
			
			var t = function(obj){
				alert(obj);
			}
			
			// INFO Funktion zum Beginnen von Allem ;)
			var StartAll = function(){
				// Wb aktiviert?
				
				if(wb != null && aniWhiteBack != null){
					// wb da, also erst den einblenden
					var fnk = function(){
						if(aniImage != null)
							aniImage.start(0, 1);
						/*if(aniContainer != null)
							aniContainer.start(0, 0.9);*/
						if(aniContainerTop != null)
							aniContainerTop.start(eBegin, eEnd);
					};
					
					aniWhiteBack(wb, fnk);
				}else{
					if(aniImage != null)
						aniImage.start(0, 1);
					if(aniContainer != null)
						aniContainer.start(0, 0.9);
					if(aniContainerTop != null)
						aniContainerTop.start(eBegin, eEnd);
				}
			};
			
			StartAll();
			
			
						
			if(i != null){
				div.injectAfter(i);
			}else{
				div.injectInside(this.c);
			}			
			
			if(this.Options.Draggable){
				this.c.makeDraggable();
			}
			
			this.Visible = true;
			return false;
		}
	},
	
	Hide: function(){
		if(this.Visible){		
			this.c.effect('top', {
				duration: Math.round(1100 * this.Options.Duration),
				transition: Fx.Transitions.Quad.easeOut,
				wait: false,
				onComplete: function(obj){
					var n = obj.getAttribute('id');
					if($(n + '_wb') != null){
						$(n + '_wb').effect('opacity', {
							duration: 500,
							wait: false,
							transition: Fx.Transitions.linear,
							onComplete: function(wb){
								wb.remove();
							}
						}).start(0.6, 0);
					}
					obj.remove();
				}
			}).start(this.eEnd, this.eBegin);
			this.Visible = false;
		}
	}
	
});