/*------------------------------------------------->>
--->>----->>----->> imD-Tips ----->>----->>-->>
--------------------------------------------------->>
*/
var img_infox = new Class({
	ci:{
		root_el: null,
		content_el: null,
		add_el: null,
		Fx:null
	},
	vi:{
		w_root: null,
		h_root:null
	},
	initialize: function(){
		this.set_markup();
	},
	set_markup: function(){
		if(!$('imd_infox')){
			this.ci.root_el = new Element('div', { 'id': 'img_infox' });
			this.ci.content_el = new Element('div', { 'id': 'infox_content' }).inject(this.ci.root_el, 'top');
			this.ci.add_el = new Element('div', { 'id': 'infox_add' }).inject(this.ci.root_el, 'bottom');
			this.ci.root_el.inject(document.body, 'bottom');
			this.ci.root_el.setStyle('opacity', 0)
			this.Fx = new Fx.Morph(this.ci.root_el, {duration:500, wait:false});
		}
	},
	show_info: function(el){
		
		if(el.get('title') && el.get('title') != ''){
			if(window.ie){
				var eTop = el.getElement('img').getTop()-40;
			}else{
				var eTop = el.getElement('img').getTop();
			}
			el.addEvent('mousemove', function(event){
				this.ci.root_el.setStyle('left', (event.page.x - this.ci.root_el.getSize().x / 2));				
			}.bind(this));
			this.ci.content_el.set('html', el.get('title'));
			this.ci.root_el.setStyle('top', (eTop - this.ci.root_el.getSize().y - 10))
			this.Fx.start({ 'opacity': '0.85' });
		}
	},
	hide_info: function(){
		this.Fx.start({ 'opacity': '0' });
	}
});

/*------------------------------------------------->>
--->>----->>----->> Scroll-x Class ----->>----->>-->>
--------------------------------------------------->>
*/
var imd_scrollx = new Class({
	c:{
		rootobj:null,
		moveobj:null, // moveobj is the Block that will be moved horizontal and contains all the images
		kids: null, // an Array with all images inside scrollx-block
		w_root: null, // width of the scrollx-Bloc
		w_area_add: 20, // cutting the mousesensitive area (i.e. 50px at the beginning (xpos:0) and at the end)
		w_kids: null, // width of all kids (100% scale)
		size_hi: [], // width and height of every single image with 100% scale
		size_lo: [],	// width and height of every single image with scaled sizes
		kids_x_add: null, // if the a-tag containing the image is bigger
		maskmode: null // Not implemented yet - should show a Mask effect instead of the default scale effect
	},
	v:{
		mousex: null,
		frames_hi: 15,
		counter: 0,
		state: null,
		interval: null
	},
	initialize: function(el){
		this.prepare_obj(el);
		this.set_preloop_props(el);
		this.set_loop_props();
		this.set_postloop_props(el);
		this.set_events(el);
	},
	prepare_obj: function(el){
		this.c.rootobj = el;
		this.c.moveobj = el.getElement('div');
		this.c.kids = el.getElements('img');
	},
	set_preloop_props: function(el){
		this.c.w_root = el.getSize().x;
		
	},
	set_loop_props: function(){
		this.c.kids.each(function(element, i){
			if(i == 0){
				this.c.kids_x_add = element.getParent().getSize().x - element.getSize().x;
			}
			this.c.w_kids += element.getSize().x + this.c.kids_x_add;
			this.c.size_hi[i] = {
				w: element.getSize().x,
				h: element.getSize().y
			}
// implement infobox Events
			if($('img_infox')){
				element.addEvent('mouseenter', function(event){
					img_info_x.show_info(element.getParent());
				});
				element.addEvent('mouseleave', function(event){
					img_info_x.hide_info();
				});
			}
// end infobox
		}, this);
	},
	set_postloop_props: function(el){
		el.addClass( 'js_scrollx_obj' );
		for(i = 0; i < this.c.kids.length; i++){
			this.c.size_lo[i] = {
				w: this.c.size_hi[i].w * (this.c.w_root / this.c.w_kids),
				h: this.c.size_hi[i].h * (this.c.w_root / this.c.w_kids)
			}
			this.c.kids[i].setStyles({
				width: this.c.size_lo[i].w,
				height: this.c.size_lo[i].h
			});
		}
		this.c.moveobj.setStyle( 'width', this.c.w_kids+50 );
	},
	set_events: function(el){
		el.addEvent('mouseenter', function(event){
			this.v.state = 'in';
			if(!this.v.interval){
				this.v.interval = this.move_interval.periodical(30, null, this);
			}
		}.bind(this));
		el.addEvent('mouseleave', function(event){
			this.v.state = 'out';
		}.bind(this));
		el.addEvent('mousemove', function(event){
			this.v.mousex = event.client.x;
		}.bind(this));
	},
// Element move Methods
	move_interval: function(me){
		me.move_obj(me);
	},
	move_params: function(me){
		// returns needed vars
		var robj = {
			w_area: me.c.w_root - 2 * me.c.w_area_add,
			xposnow: me.c.moveobj.getPosition().x - me.c.rootobj.getPosition().x,
			mousex: me.v.mousex - me.c.rootobj.getPosition().x - me.c.w_area_add,
			framex: -Math.pow(me.v.counter / me.v.frames_hi - 1, 2) + 1
		};
		if(robj.mousex > robj.w_area){
			robj.mousex = robj.w_area;
		}else if(robj.mousex < 0){
			robj.mousex = 0;
		}
		return robj;
	},
	move_obj: function(me){
		if(me.v.state == 'in'){						
			if(me.v.frames_hi >= me.v.counter){
				me.v.counter++;
				var v = me.move_params(me);
				me.scale_imgs(me, v);							
				me.obj_mover(me, v, false);
			}else{
				var v = me.move_params(me);
				v.framex = 1;
				me.obj_mover(me, v, true);
			}						
		}else if(me.v.state == 'out'){
			if(me.v.counter > 0){
				me.v.counter-- ;
				var v = me.move_params(me);				
				me.scale_imgs(me, v);
				me.obj_mover(me, v, false);
			}else{
				me.v.state = 'off';
				me.v.interval = $clear( me.v.interval );
				me.v.counter = 0;
			}
		}
	},
	scale_imgs: function(me, v){
		for(i = 0; i < me.c.kids.length; i++){
			me.c.kids[i].setStyles({
				width: (me.c.size_hi[i].w - me.c.size_lo[i].w) * v.framex + me.c.size_lo[i].w,
				height: (me.c.size_hi[i].h - me.c.size_lo[i].h) * v.framex + me.c.size_lo[i].h
			});
		}
	},
	obj_mover: function(me, v, fademode){
		var zielx = (v.mousex / v.w_area) * (me.c.w_root - me.c.w_kids ) * v.framex;
		if(!fademode){
			me.c.moveobj.setStyle('left', zielx);
		}else{
			me.c.moveobj.setStyle('left', (v.xposnow - (-zielx+v.xposnow)/8) );
		}
	}
});



/*------------------------------------------------->>
--->>----->>----->> Slide-X Class ----->>----->>-->>
--------------------------------------------------->>
*/
var imd_slidex = new Class({
	c:{
		rootobj:null,
		w_root: null,
		h_root:null,
		kids: null,
		size_lo: null,
		Fx:null
	},
	v:{
		Fx_props: {}
	},
	initialize: function(el){
		this.set_vars(el);
		this.set_Styles(el);
		this.prepare_kids(el);
	},
	set_vars: function(el){
		this.c.rootobj = el;
		this.c.w_root = el.getSize().x;
		this.c.kids = el.getElements('a');
		this.c.size_lo = this.c.w_root / this.c.kids.length;
		this.c.Fx = new Fx.Elements(this.c.kids, { wait: false, duration: 400, transition: Fx.Transitions.Quad.easeOut} );
	},
	set_Styles: function(el){
		el.addClass( 'js_slidex_obj' );
		el.getElement('div').setStyle('height', this.c.kids[0].getSize().y);
	},
	prepare_kids: function(el){
		for(i = 0; i < this.c.kids.length; i++){
			this.v.Fx_props[i] = { left: i * this.c.size_lo }
			this.set_mouseenter(this.c.kids[i], i);
			this.set_mouseleave(this.c.kids[i], i);
		}
		this.c.Fx.set(this.v.Fx_props);
	},
	set_mouseenter: function(el, el_i){
		el.addEvent('mouseenter', function(){
// implement infobox Events
			if($('img_infox')){
				img_info_x.show_info(el);
			}
// end infobox
			for(i = 0; i < this.c.kids.length; i++){
				var allw = (this.c.w_root - el.getDimensions().x) / (this.c.kids.length - 1);
				if(i < el_i){
					this.v.Fx_props[i] = { left: i * allw };
				}else if(i > el_i){
					this.v.Fx_props[i] = { left: (i-1) * allw + el.getDimensions().x };
				}else{
					this.v.Fx_props[i] = { left: i * allw };
				}
			}										
			this.c.Fx.start(this.v.Fx_props);
		}.bind(this));
	},
	set_mouseleave: function(el, el_i){
		el.addEvent('mouseleave', function(){
// implement infobox Events
			if($('img_infox')){
				img_info_x.hide_info();
			}
// end infobox
			for(i = 0; i < this.c.kids.length; i++){
				this.v.Fx_props[i] = { left: i * this.c.size_lo };
			}
			this.c.Fx.start(this.v.Fx_props);
		}.bind(this));
	}
	
});

/*------------------------------------------------->>
--->>----->>----->> Gallery Wall ----->>----->>-->>
--------------------------------------------------->>
*/
var imd_imagewall = new Class({
	c:{
		rootobj:null,
		w_root: null,
		h_root:null,
		kids: null,
		w_kid: [],
		h_kid: [],
		grid:null,
		Fx:null
	},
	v:{
		Fx_props: {}
	},
	initialize: function(el, grid){
		this.set_vars(el);
		
	},
	set_vars: function(el){
		this.c.rootobj = el;
		this.c.w_root = el.getSize().x;
		this.c.kids = el.getElements('img');
		this.c.Fx = new Fx.Elements(this.c.kids, { wait: false, duration: 500, transition: Fx.Transitions.Quad.easeOut} );
		for(i = 0; i < this.c.kids.length; i++){
			this.c.w_kid[i] = this.c.kids[i].getSize().x;
			this.c.h_kid[i] = this.c.kids[i].getSize().y;
		}
	},
	set_Styles: function(el){
		el.addClass( 'js_imagewall' );
	}
});
/*------------------------------------------------->>
--->>----->>----->> Dock-X Class ----->>----->>-->>
--------------------------------------------------->>
*/
var imd_dockx = new Class({
	c:{
		rootobj:null,
		w_root: null,
		h_root:null,
		kids: null,
		kids_addx:null, // add measure of parent element
		w_kids: 0,
		w_kid_hi: [],
		faktor_lo: null, // als Faktor
		Fx:null,
		alpha: [1, 0.75, 0.5]
	},
	v:{
		Fx_props: {}
	},
	initialize: function(el){
		this.set_vars(el);
		this.set_Styles(el);
		this.prepare_kids(el);
	},
	set_vars: function(el){
		this.c.rootobj = el;
		this.c.w_root = el.getSize().x;
		this.c.kids = el.getElements('img');
		this.c.kids_addx = this.c.kids[0].getParent().getSize().x - this.c.kids[0].getSize().x;
		this.c.Fx = new Fx.Elements(this.c.kids, { wait: false, duration: 500, transition: Fx.Transitions.Quad.easeOut} );
		for(i = 0; i < this.c.kids.length; i++){
			this.c.w_kid_hi[i] = this.c.kids[i].getSize().x;
			this.c.w_kids += this.c.w_kid_hi[i] + this.c.kids_addx;
		}
		this.c.faktor_lo = this.c.w_root / this.c.w_kids;
	},
	set_Styles: function(el){
		el.addClass( 'js_dockx_obj' );
		el.setStyle('height', this.c.kids[0].getSize().y);
		el.getElement('div').setStyles({
			position:'absolute',
			height: this.c.kids[0].getSize().y,
			width: this.c.w_root+400,
			left: -200,
			backgroundPosition:-200
		});
	},
	prepare_kids: function(el){		
		for(i = 0; i < this.c.kids.length; i++){
			this.v.Fx_props[i] = { width:  this.c.w_kid_hi[i] * this.c.faktor_lo};
			this.set_mouseenter(this.c.kids[i], i);
			this.set_mouseleave(this.c.kids[i], i);
		}
		if(this.c.w_kids > this.c.w_root){
			if(Browser.Engine.trident){
				this.c.Fx.start(this.v.Fx_props);
			}else{
				this.c.Fx.set(this.v.Fx_props);
			}
		}
	},
	set_mouseenter: function(el, el_i){
		el.addEvent('mouseenter', function(){
// implement infobox Events
			if($('img_infox')){
				img_info_x.show_info(el.getParent());
			}
// end infobox
/*
Aktuelles Bild 100% - Faktor = 1
	davon abhängig alle anderen Werte errechnen
	zuerst Highlight-Element
	dann seine 2 Nachbarn (wenn vorhanden)
	zum Schluss den Rest berechnen
*/

			if(this.c.w_kids > this.c.w_root){
	// Highlight-Element
				this.v.Fx_props[el_i] = { width: this.c.w_kid_hi[el_i], opacity: 1 };				
				var n_props = [this.c.w_kid_hi[el_i], 1, this.c.w_kids - this.c.w_kid_hi[el_i]];
	// seine 2 Nachbarn (wenn vorhanden)
				var w_restfaktor = (this.c.w_root - n_props[0]) / (this.c.kids.length - 1);
				if(el_i > 0){
					this.v.Fx_props[el_i-1] = { width: this.c.w_kid_hi[el_i-1] * this.c.alpha[1], opacity: this.c.alpha[1] };
					n_props[0] += this.v.Fx_props[el_i-1].width;
					n_props[2] -= this.v.Fx_props[el_i-1].width;
					n_props[1]++;
				}
				if(el_i < this.c.kids.length - 2){
					this.v.Fx_props[el_i+1] = { width: this.c.w_kid_hi[el_i+1] * this.c.alpha[1], opacity: this.c.alpha[1] };
					n_props[0] += this.v.Fx_props[el_i+1].width;
					n_props[2] -= this.v.Fx_props[el_i+1].width;
					n_props[1]++;
				}
	// zum Schluss den Rest berechnen			
				var faktor = (this.c.w_root - n_props[0]) / n_props[2];
				// Falls die Bildergallerie kleiner als der verfügbare Platz...
				// if(faktor > this.c.alpha[2]){ faktor = this.c.alpha[2]; }
				for(i = 0; i < this.c.kids.length; i++){
					if(i < el_i-1 || i > el_i+1){
						this.v.Fx_props[i] = { width:  this.c.w_kid_hi[i] * faktor, opacity: this.c.alpha[2] };
						n_props[0] += this.v.Fx_props[i].width;
					}
				}

	// Animation starten
				this.c.Fx.start(this.v.Fx_props);
			}else{
				for(i = 0; i < this.c.kids.length; i++){
					if(i != el_i){
						this.v.Fx_props[i] = { opacity: this.c.alpha[2] };
					}else{
						this.v.Fx_props[i] = { opacity: 1 };
					}
				}
				this.c.Fx.start(this.v.Fx_props);
			}
		}.bind(this));
	},
	set_mouseleave: function(el, el_i){
		el.addEvent('mouseleave', function(){
			if(this.c.w_kids > this.c.w_root){
				for(i = 0; i < this.c.kids.length; i++){
					this.v.Fx_props[i] = { width:  this.c.w_kid_hi[i] * this.c.faktor_lo, opacity: 1};
				}
			}else{
				for(i = 0; i < this.c.kids.length; i++){
					this.v.Fx_props[i] = { opacity: 1 };
				}
				this.c.Fx.start(this.v.Fx_props);
			}
			this.c.Fx.start(this.v.Fx_props);
// implement infobox Events
			if($('img_infox')){
				img_info_x.hide_info();
			}
// end infobox
		}.bind(this));
	}
	
});


/*------------------------------------------------->>
--->>----->>----->> Slide-X HEADER Class ----->>----->>-->>
--------------------------------------------------->>
*/
var imd_slidex_header = new Class({
	c:{
		wrapper: null,
		w_root: 980,
		kids: null,
		h_kid:167,
		w_kid_hi: [],
		w_kid_lo: null,
		Fx_props_lo: {},
		thumbs: null,
		Fx:null
	},
	v:{
		Fx_props: {}
	},
	initialize: function(el){
		this.set_vars(el);
		this.set_Styles(el);
		this.prepare_kids(el);
	},
	set_vars: function(el){
		this.c.wrapper = el.getElement('div');
		this.c.kids = el.getElements('div.slidecontent');
		this.c.thumbs = el.getElements('div.thumb');
		this.c.Fx = new Fx.Elements(this.c.kids, {wait: false, duration: 700, transition: Fx.Transitions.Quad.easeOut});
		this.c.w_kid_lo = this.c.w_root / this.c.kids.length;
	},
	set_Styles: function(el){
		el.setStyles({
			overflow:'hidden',
			height: this.c.h_root
		});
		if(this.c.wrapper.hasClass('slidewrapper')){
			this.c.wrapper.removeClass('slidewrapper');
			this.c.wrapper.addClass('js_slidewrapper');
		}		
	},
	prepare_kids: function(el){
		for( i=0; i < this.c.kids.length; i++ ){
			this.c.w_kid_hi[i] = this.c.kids[i].getElement('div.banner img').getSize().x;
			this.c.Fx_props_lo[i] = { width: this.c.w_kid_lo };
			this.c.kids[i].setStyle('width', this.c.w_kid_lo);
			this.set_mouseenter(this.c.kids[i], i);
			this.set_mouseleave(this.c.kids[i], i);
			this.c.kids[i].addEvent('click', function(){
				window.location.href = this.getElement('a.projektlink').get('href');
			});
		}		
	},
	set_mouseenter: function(el, el_i){
		el.addEvent('mouseenter', function(){
			this.c.thumbs[el_i].fade(0);
			var w_lo = (this.c.w_root - this.c.w_kid_hi[el_i]) / (this.c.kids.length -1);
			for( i=0; i < this.c.kids.length; i++ ){
				if(i != el_i){
					this.v.Fx_props[i] = { width: w_lo }
				}else{
					this.v.Fx_props[i] = { width: this.c.w_kid_hi[i] }
				}
			}
			this.c.Fx.start(this.v.Fx_props)
		}.bind(this));
	},
	set_mouseleave: function(el, el_i){
		el.addEvent('mouseleave', function(){
			this.c.thumbs[el_i].fade(1);
			this.c.Fx.start(this.c.Fx_props_lo);
		}.bind(this));
	}
	
});

/*------------------------------------------------->>
>>----->>----->> imd-Reiterinhalte ----->>----->>-->>
--------------------------------------------------->>
*/
var imd_reiterinhalt = new Class({
	c:{
		rootobj: null,
		reiter: null,
		inhalte:null,
		h_inhalt:[],
		y_inhalt:5, // Abstand zum letzten Reiter
		Fx_inhalte:[],
		zst:null
	},
	v:{
		aktiv:null
	},
	initialize: function(el){
		this.set_startcontent(el);
		this.prepare_elements(el);
	},
	set_startcontent: function(el){
// collect Elements
		this.c.rootobj = el;
		this.c.reiter = el.getElements('.toggler');
		this.c.inhalte = el.getElements('div.inhalt');
		if(this.c.reiter.length<=1 || this.c.inhalte.length <=1){ return; }
// set Classes
		if( el.hasClass('reiterinhalt') ){
			el.removeClass('reiterinhalt');
			el.addClass('js_reiterinhalt');
		}
		if( this.c.inhalte[0].hasClass('inhalt') ){
			this.c.inhalte[0].removeClass('inhalt');
			this.c.inhalte[0].addClass('inhalt_hi');
		}
		if( this.c.reiter[0].hasClass('toggler') ){
			this.c.reiter[0].removeClass('toggler');
			this.c.reiter[0].addClass('toggler_hi');
		}
		this.c.zst = 1; // -1 um die 0 zu vermeiden
	},
// get Sizes, set Events of all Elements
	prepare_elements: function(el){
		if(this.c.reiter.length<=1 || this.c.inhalte.length <=1){ return; }
		this.c.y_inhalt += this.c.reiter[this.c.reiter.length-1].getPosition(el).y + this.c.reiter[this.c.reiter.length-1].getSize().y;
		for( i=0; i<this.c.inhalte.length; i++){
			this.c.h_inhalt[i] = this.c.inhalte[i].getSize().y;
			this.c.Fx_inhalte[i] = new Fx.Morph(this.c.inhalte[i]);
			this.c.reiter[i].store('id', i);
			this.c.inhalte[i].setStyle('top',this.c.y_inhalt);
			if(i>0){
				this.c.Fx_inhalte[i].set({ opacity:0, width: this.c.inhalte[0].getSize().x})
			}else{
				this.c.Fx_inhalte[i].set({ opacity:1, width: this.c.inhalte[0].getSize().x, left:0})
			}
			this.set_events(i);
		}
		// set Wrapper height
		el.setStyle('height', this.c.y_inhalt+this.c.inhalte[0].getSize().y)
	},
	set_events: function(i){
		this.c.reiter[i].addEvent('click', function(){
			this.show_content(i);
		}.bind(this));
	},
	show_content:function(i){
		if(i != this.c.zst-1){
			if(i > this.c.zst-1){
				var xmove = this.c.rootobj.getSize().x;
			}else{
				var xmove = -this.c.rootobj.getSize().x;
			}
			this.c.Fx_inhalte[i].cancel();
			this.c.Fx_inhalte[this.c.zst-1].cancel();
			
			this.c.Fx_inhalte[this.c.zst-1].start({ opacity: 0, left:-xmove});
			this.c.Fx_inhalte[i].set({ left:xmove});
			this.c.Fx_inhalte[i].start({ opacity: 1, left:0});
		
			this.c.reiter[this.c.zst-1].removeClass('toggler_hi');
			this.c.reiter[this.c.zst-1].addClass('toggler');
			this.c.reiter[i].removeClass('toggler');
			this.c.reiter[i].addClass('toggler_hi');
		
			this.c.zst = i+1;
			this.c.rootobj.tween( 'height', this.c.y_inhalt + this.c.inhalte[i].getSize().y );
		}
	}
});