var projector = Class.create({
	initialize: function(element){
		if(element.vars){
			element.vars.callback = this.projectorLoadedAjax.bind(this);
			element.vars.element = element;
			alAjaxRequest(element.vars);
		} else{
			
			/*Projektcontainer*/
			this.project		= element;
			
			this.resultDom	= new Element('div', {'class':'project-container'}).update(element.innerHTML);
			this.elements	= {
				heading:	this.resultDom.down('h1.replaced'),
				projektor:	this.resultDom.select('div.projektor')
			};
			
			this.projectorLoaded();
		}
	},
	
	slideImage: function(picPos){
		if(this.pics[picPos].section != this.currentSec){
			this.changeSection(this.pics[picPos].section);
		}
		this.imageLinkDiv.select('a').each(function(link){
			link.removeClassName('active');
		});
		this.pics[picPos].link.addClassName('active');
		new Effect.Move(this.imageDiv, {x: (870 * picPos) * -1, y: 0, mode: 'absolute', duration: 0.5});
		this.currentImg	= picPos;
	},
	
	changeSection: function(sectionNum){
		if(this.sections.length){
			this.naviDiv.select('a').each(function(link){
				link.removeClassName('active');
			});
			this.sections[sectionNum].link.addClassName('active');
			
			this.currentSec	= sectionNum;
			new Effect.Opacity(this.sectionTextDiv,{
				from: 1.0,
				to: 0,
				duration: 0.5,
				afterFinish: function(){
					
					var origHeight = this.textDiv.getHeight() - 15;
					this.sectionTextDiv.update(this.sections[this.currentSec].text);
					
					targetHeight = this.textDiv.getHeight() - 15;
					this.textDiv.setStyle({height: origHeight+'px', overflow: 'hidden'});
					
					new Effect.Morph(this.textDiv,{
						style: {
							height: targetHeight+'px'
						},
						duration: 0.3,
						afterFinish: function(){
							this.textDiv.setStyle({height: 'auto'});
							new Effect.Opacity(this.sectionTextDiv,{
								from: 0,
								to: 1.0,
								duration: 0.5
							});
						}.bind(this)
					});
				}.bind(this)
			});
		}
	},
	
	projectorLoadedAjax: function(returnParams){
		/*Projektcontainer*/
		this.project		= returnParams.element.next('div.accordion-content');
		
		this.resultDom	= new Element('div', {'class':'project-container'}).update(returnParams.res.result);
		this.elements	= {
			heading:	this.resultDom.down('h1.replaced'),
			projektor:	this.resultDom.select('div.projektor')
		};
		
		this.projectorLoaded();
	},	
		
	projectorLoaded: function(){
		/*Projektnavigation*/
		this.navi			= '';
		
		/*sektionen*/
		this.sections		= [];
		
		/*bilder*/
		this.pics			= [];
		
		/*momentanes bild*/
		this.currentImg		= 0;
		
		/*momentane sektion*/
		this.currentSec		= 0;
		
		this.containerDiv	= new Element('div', {'class': 'projects-container'});
		this.imageDiv		= new Element('div', {'class': 'projects-images'});
		this.imageContDiv	= new Element('div', {'class': 'projects-images-container'});
		this.imageLinkDiv	= new Element('div', {'class': 'projects-images-links'});
		this.textDiv		= new Element('div', {'class': 'projects-text'});
		this.toggleTextDiv	= new Element('div', {'class': 'projects-text-toggle'});
		this.naviDiv		= new Element('div', {'class': 'projects-navi'});
		this.sectionTextDiv	= new Element('div', {'class': 'projects-section-text'}).update(' ');
		
		this.heading				= this.elements.heading;
		
		/*set the next and previous image navigation links*/
		this.nextLink			= new Element('a', {'class': 'image-navi-next'}).update('»');
		this.nextLink.onclick	= function(){if(this.pics.length > this.currentImg + 1){this.slideImage(this.currentImg + 1);}return false;}.bind(this);
		this.prevLink			= new Element('a', {'class': 'image-navi-prev'}).update('«');
		this.prevLink.onclick	= function(){if(this.currentImg - 1 >= 0){this.slideImage(this.currentImg - 1);}return false;}.bind(this)
		this.imageLinkDiv.appendChild(this.prevLink);
		
		/*build the slideshow*/
		for (var projektor = 0; projektor < this.elements.projektor.length; ++projektor) {
			var tmp				= {};
			tmp.sectionIndex	= index;
			tmp.text			= '<div class="projektor-text">' + (this.elements.projektor[projektor].down('div.projektor-text') ? this.elements.projektor[projektor].down('div.projektor-text').innerHTML : '') + '</div>';
			tmp.headline		= this.elements.projektor[projektor].down('h2') ? this.elements.projektor[projektor].down('h2').innerHTML : '';
			tmp.pics			= this.elements.projektor[projektor].select('img');
			this.sections.push(tmp);
		}
		
		for (var index = 0; index < this.sections.length; ++index) {
			var tmp				= this.sections[index];
			for (var p = 0; p < tmp.pics.length; ++p) {
				var tmpPic		= tmp.pics[p];
				var picsPos		= this.pics.length;
				tmp.pics[p]		= picsPos;
				
				/*build the wraps and the links*/
				var imgWrap		= new Element('div', {'class': 'projektor-image-wrap'}).update(tmpPic);
				var imgLink		= new Element('a', {'class': 'image-navi'}).update(picsPos);
				imgLink.onclick = function(picsPos){this.slideImage(picsPos);return false;}.bind(this, picsPos);
				this.imageDiv.appendChild(imgWrap);
				this.imageLinkDiv.appendChild(imgLink);
						
				/*push the image in the pics array*/
				this.pics.push({image: tmpPic, section: index, link: imgLink});
			}
			
			/*build the section navi*/
			if(tmp.headline.length){
				var tmpA			= new Element('a', {'href': 'javascript:;'}).update(tmp.headline);
				tmpA.onclick		= function(ind){
					this.slideImage(this.sections[ind].pics[0]);return false;
				}.bind(this, index);
				tmp.link			= tmpA;
				this.naviDiv.appendChild(tmpA);
			}
		}
		
		/*init the first section*/
		this.slideImage(0);
		this.changeSection(0);
		

		/*toggle description*/
		this.toggle				= new Element('a', {'class': 'projector-toggle'}).update('x');
		if(this.toggleTextDiv.getStyle('display') == 'none'){
			this.textDiv.addClassName('active');
		}
		this.toggle.onclick			= function(){
			if(this.textDiv.hasClassName('active')){
				this.textDiv.removeClassName('active');
			} else{
				this.textDiv.addClassName('active');
			}
			Effect.toggle(this.toggleTextDiv, 'blind', {duration: 0.4});
			return false;
		}.bind(this);
		
		/*glue everything together*/
		this.imageLinkDiv.appendChild(this.nextLink);
		this.toggleTextDiv.appendChild(this.naviDiv);
		this.toggleTextDiv.appendChild(this.sectionTextDiv);
		this.textDiv.appendChild(this.heading);
		this.textDiv.appendChild(this.toggle);
		this.textDiv.appendChild(this.toggleTextDiv);
		this.imageDiv.setStyle({width: this.pics.length * 870+'px'});
		this.imageContDiv.appendChild(this.imageDiv);
		this.imageContDiv.appendChild(this.imageLinkDiv);
		this.containerDiv.appendChild(this.imageContDiv);
		this.containerDiv.appendChild(this.textDiv);
		this.project.update(this.containerDiv);
		
		
			
		this.imageLinkDiv.setStyle({marginLeft: '-'+(this.imageLinkDiv.getWidth()/2)+'px'});
		
		/*fade the whole thing in*/
		new Effect.Opacity(this.project,{
			duration: 0.2,
			from: 0,
			to: 1.0
		});
	}
});

function init(){
	projects	= $$('div.ce-projektor');
	accNavi		= $$('ul.csc-menu-1')[0];
	if(accNavi && $('ce-accordion')){
		$(accNavi).select('a').each(function(el){
			tmpDiv = new Element('div', {'class': 'accordion-content'});
			tmpDiv.setStyle({height: '430px'});
			tmpH1 = new Element('h1', {'class': 'replaced accordion-toggle'});
			tmpH1.vars = {
				url: el.href,
				method: 'get',
				adParams: '',
				type: 667,
				extract: '',
				extractById: 'content',
				container: tmpDiv
			}
			tmpH1.update(el.innerHTML);
			tmpH1.setStyle({
				backgroundImage: el.getStyle('background-image'),
				height: '33px'
			});
			$('ce-accordion').appendChild(tmpH1);
			$('ce-accordion').appendChild(tmpDiv);
		});
		accNavi.remove();
	} else if(projects.length){
		projects.each(function(el){
			new projector(el);
		});
	}
	if($$('div.accordion-content').length > 0){
		buildAccordion();
	}
	teaserMenu	= $$('div.teaser-menu-item');
	if(teaserMenu.length > 0){
		teaserMenu.each(function(el){
			el.onclick = function(){
				window.location = el.down('a').href;
			}
//			alert(el.down('a').innerHTML);
		});
	}
}

/*start the whole js-terror*/
document.observe('dom:loaded', init);

function buildAccordion(){
	accordion = new Accordion("ce-accordion", 1, {toggleClass: "accordion-toggle", toggleActive: "active", contentClass: "accordion-content"});
}