// JavaScript Document

var SlideShow = {
		
		items: [],
		title: [],
		links: [],
		current: 0,
		balken: null,
		textWrapper: null,
		linkTag: null,
		duration: 8000,
		nav: [],
		to: null,
		first: null,
		container: null,
		bg_container: null,
		newImage: null,
		
		init: function(container, bg_container) {
			
			this.container = container;
			$(this.container).getParent().removeClass("csc-default");
			
			this.bg_container = bg_container;
	
			//Erstelle Navigation
			var nav = new Element('div', { id: 'slideshow-nav', styles: {
				position: 'absolute',
				right: 	0,
				bottom: 30
			}}).injectInside( $(container).setStyle('width', 960) );
			
			// Erstelle den Text Wrapper
			this.textWrapper = new Element('div', {
				styles: {
					position: 'absolute',
					left: 0,
					height: 150,
					width: 900,
					bottom: 120
				},
				'class': 'img-text'
			}).injectInside( $(container) );
			
			//Erstelle Elemente
			$(container).getChildren().each(function(item, index) {
				
				if (item.tagName.toLowerCase() != 'img') return;
				if(this.first == null) {
					this.first = index;
				}
				
				this.items.push(item.src);
				/*
				this.items.push( 
						new Fx.Style(
							new Element('img', {
								src: item.getProperty('src'),
							}).injectInside( $(bg_container) ),
							'opacity',
							{ duration: 300 }
						)
				);
				*/
				
				if(item.title) {
					texte = item.title.split('|');
					for(run=0 ; run < texte.length ; run++) {
						if(run == 0) {
							Text = '<div class="slide-art">' + texte[run] + '</div><div class="clear"></div>';
						}
						else if(run == 1) {
							Text += '<div class="slide-title">' + texte[run] + '</div><div class="clear"></div>';							
						}
						else{
							Text += '<div class="slide-option">' + texte[run] + '</div><div class="clear"></div>';						
						}
					}

					if(item.alt) {
						linkParts = item.alt.split("||");
						if (!linkParts[1]) {
							linkParts[1] = '_top';
						}
						Text = '<a href="' + linkParts[0] + '" target="' + linkParts[1] + '">' + Text + '</a>';
					}
					
//					if(item.alt) {					
//						LinkTag = new Element('a', {
//							href:  item.alt,
//							target: '_top',
//						}).injectInside(this.textWrapper);
//						LinkTag.innerHTML = Text;
//
//						TextWrapper = new Element('div', {
//							styles:{
//								position:"absolute", 
//								top:0, 
//								left:0
//							}
//						});
//						TextWrapper.adopt(LinkTag);
//						
//						this.linkTag = TextWrapper.injectInside(this.textWrapper);
//					}
//					else {
						TextWrapper = new Element('div', {
							styles:{
								position:"absolute", 
								top:0, 
								left:0
							}
						});
						TextWrapper.innerHTML = Text;
						this.linkTag = TextWrapper.injectInside(this.textWrapper);						
//					}
				}
				else {
					this.linkTag = new Element('div');
				}
				
				// Erstelle Bild, Text und Link
				this.links.push(item.alt);
//				this.title.push(item.getProperty('title'));
				
				this.title.push(
						new Fx.Style(
								this.linkTag,
								'opacity',
								{duration: 1000}
						).set(0)
				);
				
				// Erstelle Navigationspunkt fur das Bild
				this.nav[index] = new Element('img', {
					'src': 'fileadmin/templates/images/slide-no.png',
					styles: {
						cursor: 'pointer',
						padding: '3px 2px'
					}
				}).injectInside($('slideshow-nav')).addEvents({
					'click': function() {
						this.setFromNav(index);
					}.bind(this),
					mouseover: function() {
						
						this.setStyles({
							border: ((index != SlideShow.current) ? '1px solid #ccc' : '1px solid #f60'),
							padding: '2px 1px'
						});
					},
					mouseout: function() {
						this.setStyles({
							border: '0',
							padding: '3px 2px'
						});
					}
				});
				
				
				item.remove();
			}, this);
			//this.items[ this.first ].set(1);
			
			//Errstelle Balken
			this.balken = new Fx.Style(new Element('div', {
				styles: {
					position: 'absolute',
					left: 0,
					height: 1,
					width: 0,
					bottom: 10,
					background: '#f60'
				},
				'class': 'clearing'
			}).injectInside( $(container) ), 'width', {duration: this.duration}).set(0);

			this.current = -1;
			Background.onInit(this.slide.bind(this));
		},
		
		setFromNav: function(i) {
			$clear(this.to);
			this.current = i-1;
			this.slide();
		},

		slide: function() {
			if (this.current+1 >= this.items.length) this.current = 0;
			else this.current++;
			this.set();
			this.startCountdown();
			$clear(this.to);
			Background.fadeImage(this.items[this.current]);
			
			this.to = this.slide.delay(this.duration, this);
		},
		
		startCountdown: function() {
			this.balken.stop().set(0).start(960);
		},
		
		set: function() {

			this.newImage = new Element('img');
			this.newImage.src = this.items[this.current]

			this.imageHeight();

			this.items.each(function(item, i) {
				if(this.items[i].now > 0 && i != this.current) this.items[i].cancel().start(0);
				if (i != this.current) this.nav[i].src = 'fileadmin/templates/images/slide-no.png';
				else this.nav[i].src = 'fileadmin/templates/images/slide-act.png';
			}, this);

			num = this.current;

			for (i=0; i < this.title.length; i++) {
				this.title[i].stop().start(i == num ? 1 : 0);
			}
		},

		imageHeight: function() {

			var winSize = window.getSize().size;
			var removeAfter = false;

			if (!this.newImage.parentNode) {
				this.newImage.injectInside(document.body);
				removeAfter = true;
			}

			var imgSize = this.newImage.getSize().size,
			imgRatio = imgSize.x / imgSize.y,
			imgWidth = winSize.x,
			imgHeight = imgWidth / imgRatio;

			if (removeAfter) {
				this.newImage.remove();
			}

			if (imgHeight < winSize.y) {
				imgHeight = winSize.y;
				imgWidth = imgHeight * imgRatio;
			}

			this.newImage.setStyles({
				height: imgHeight,
				width: imgWidth,
				position: "absolute",
				top: 0,
				left: 0
			});
		}
}