/**
 * @author Markus
 */
var colors = {
	'firma' : '#1B3D81',
	'team' : '#273B61',
	'guertel' : '#4E74C0',
	'schals' : '#092254',
	'shop' : '#1B3D81',
	'vw' : '#6D89C0', 
	'kontakt' : '#362A64',
	'impressum' : '#1E5955'
};

var subClosedPos = 22;
var subOpenedPos = 0;

var subActive = false;

function naviAnim(node, forward) {
	var myEffect = new Fx.Morph(node + '_link', {
		duration: 100, 
		transition: Fx.Transitions.Sine.easeOut
	});
  	if (forward) {
		myEffect.start({
    		'background-color': ['#000000', colors[node]]
		});
		getSubNavi(node);
	} else {
		resetNavi();
		myEffect.start({
    		'background-color': [colors[node], '#000000']
		});
	}
}

function getSubNavi(node) {
	subActive = true;
	resetNavi();
	var openEffect = new Fx.Morph(node + '_sub', {
		duration: 200, 
		transition: Fx.Transitions.Sine.easeInOut
	});
	openEffect.start({
		'padding-top': [0, 4],
		'height': [0, 18],
		'top' : [subClosedPos, subOpenedPos],
		'opacity' : [0, 1]
	});	
}

function resetNavi() {
	$$('.subnavi_wrapper').each(function(el) {
		if (el.getStyle('height') == '18px') {
			var closeEffect = new Fx.Morph(el.id, {
				duration: 200, 
				transition: Fx.Transitions.Sine.easeInOut
			});
			closeEffect.start({
				'padding-top': [4, 0],
	    		'height': [18, 0],
				'top' : [subOpenedPos, subClosedPos],
				'opacity' : [1, 0]
			});	
		}
	});
	subActive = false;
}

var currentImage = 0;

var imageLoop = function(pictures, layer, texts) {
	var nextImage = currentImage + 1 >= pictures.length ? 0 : currentImage + 1;
	
	var i = $(layer);
	var m = $('middle');
	var t = $('movebox');
	
	i.setStyle('background-image', 'url(galerie/galleries/' + pictures[nextImage] + ')');
	
	var imageEffect = new Fx.Morph(layer,
	{
		duration: 2000,
		transition: Fx.Transitions.Sine.easeInOut,
		onComplete: function() {
			m.setStyle('background-image', 'url(galerie/galleries/' + pictures[nextImage] + ')');
			i.setStyle('width', 0);
			i.setStyle('right', 0);
			if (texts.length == pictures.length) {
				t.innerHTML = texts[nextImage];
			}
			currentImage = nextImage;		
		}
	});
	
	imageEffect.start({
		'width' : [0, 960],
		'left' : [960, 0],
		'opacity' : [0, 1]
	});
};

var myScroller;

var imageScroller = new Class({
	Implements: [Options],
	options: {
		layer: null,
		speed: 0,
		left: true
	},
	offset : 0,
	images: [],
	controlLayers : [],
	moveTimer : null,
	initialize : function(options) {
		this.setOptions(options);
		this.options.layer = $(this.options.layer);
		this.controlLayers = $$('.controllayers');
		
		this.images = $$('.sliderpics');
		while (this.images.length < 4) {
			this.images.each(function(el) {
				el.clone().inject(this.options.layer);
			}, this);
			this.images = $$('.sliderpics');
		}
		var imgNum = this.images.length; 
		this.images[imgNum - 1].inject(this.options.layer, 'top');
		this.images[imgNum - 2].inject(this.options.layer, 'top');
		this.images = $$('.sliderpics');
		this.offset = -1920;
		this.options.layer.setStyle('left',  -1920);
		
		this.controlLayers.each(function(el) {
			el.addEvents({
				mouseover : function() {
					myScroller.changeSpeed(el.get('data-scrolldir').split(','));
				},
				mouseout : function() {
					myScroller.changeSpeed(['left', 1]);
				}
			});
		});
		this.options.layer.setStyle('width', (this.images.length * 960) + 'px');
		this.moveTimer = this.move.periodical(1, this);
	},
	move : function() {
		if (this.options.left) {
			this.options.layer.setStyle('left', this.options.layer.getStyle('left').replace('px','').toInt() - this.options.speed);
			this.offset -= this.options.speed;
			if (this.offset <= -1920) {
				this.images[0].inject(this.options.layer);
				this.options.layer.setStyle('left',  this.options.layer.getStyle('left').replace('px','').toInt() + 960);
				this.offset += 960;
				this.images = $$('.sliderpics');
			}
		} else {
			this.options.layer.setStyle('left', this.options.layer.getStyle('left').replace('px','').toInt() + this.options.speed);
			this.offset += this.options.speed;
			if (this.offset >= 0) {
				this.images[this.images.length - 1].inject(this.options.layer, 'top');
				this.options.layer.setStyle('left', this.options.layer.getStyle('left').replace('px','').toInt() - 960);
				this.offset -= 960;
				this.images = $$('.sliderpics');
			}
		}
	},
	changeSpeed : function(params) {
		this.options.left = params[0] == 'left' ? true : false;
		this.options.speed = params[1].toInt();
		this.moveTimer = $clear(this.moveTimer);
		this.moveTimer = params[1] != 0 ? this.move.periodical(1, this) : null;
	}
});

var imageTimer;

window.addEvent('domready', function(){
	if ($('indexlayer') != undefined) {
		
		var m = $('middle');
		var i = $('indexlayer');
		
		var startEffect = new Fx.Morph('indexlayer', {
			duration: 2000,
			transition: Fx.Transitions.Sine.easeInOut,
			onComplete: function() { 
				m.setStyle('background-image', i.getStyle('background-image'));
				i.setStyle('width', 0);
				i.setStyle('left', 960);
				i.setStyle('height', 452);
				imageTimer = imageLoop.periodical(4000, document, new Array(index , 'indexlayer', {}));
			}
		});
		startEffect.start({
			'height' : [0, 452],
			'top' : [226, 0]
		});
	}
	
	if ($('firmalayer') != undefined) {
		imageTimer = imageLoop.periodical(4000, document, new Array(firma , 'firmalayer', {}));
	}
	
	if($('guertel') != undefined) {
		myScroller = new imageScroller({
			layer: 'picslider',
			speed: 1
		});
	}
	
	if ($('schals') != undefined) {
		myScroller = new imageScroller({
			layer: 'picslider',
			speed: 1
		});
	}
	
	if ($('vwlayer') != undefined) {
		imageTimer = imageLoop.periodical(4000, document, new Array(vw , 'vwlayer', vwText));
		$('middle').addEvents({
			mouseover: function() {
				 imageTimer = $clear(imageTimer); 
			},
			mouseout: function() {
				imageTimer = imageLoop.periodical(4000, document, new Array(vw , 'vwlayer', vwText));
			}
		});
		/*
		$('olcontrol').addEvents({
			mouseenter: function() {
				imageLoop(vw , 'vwlayer', vwText);
			}
		});
		*/
	}
	
	if($('movebox') != undefined) {
		var moveBox = new Drag.Move('movebox', { 
			container : 'middle',
			snap: 3
		});
		/*
		var box = $('movebox');
		box.set('opacity', '0.8');
		*/
	}
	
	if($('team') != undefined) {
		var images = $$('#upperteamscroller .scrollpic');
		var imgNum = images.length;
		var scroller = $('upperteamscroller');
		scroller.setStyle('width', (imgNum * 320) + 'px');
		
		var loopEffect = new Fx.Morph('upperteamscroller', {
			duration: 5000,
			transition: Fx.Transitions.Linear,
			onComplete: function() {
				images[0].inject(scroller);
				scroller.setStyle('left', 0);
				images = $$('#upperteamscroller .scrollpic');
				loopEffect.start({
					'left' : [scroller.getStyle('left').replace('px',''), scroller.getStyle('left').replace('px','') - 320]
				});
			}
		});
		
		loopEffect.start({
			'left' : [scroller.getStyle('left').replace('px',''), scroller.getStyle('left').replace('px','') - 320]
		});
		
		var images2 = $$('#lowerteamscroller .scrollpic');
		var imgNum2 = images2.length;
		var scroller2 = $('lowerteamscroller');
		scroller2.setStyle('width', (imgNum2 * 320) + 'px');
		
		var loopEffect2 = new Fx.Morph('lowerteamscroller', {
			duration: 5000,
			transition: Fx.Transitions.Sine.easeInOut,
			onComplete: function() {
				images2[imgNum2 - 1].inject(scroller2, 'top');
				scroller2.setStyle('right', 0);
				images2 = $$('#lowerteamscroller .scrollpic');
				loopEffect2.start({
					'right' : [scroller2.getStyle('right').replace('px',''), scroller2.getStyle('right').replace('px','') - 320]
				});
			}
		});
		
		loopEffect2.start({
			'right' : [scroller2.getStyle('right').replace('px',''), scroller2.getStyle('right').replace('px','') - 320]
		});
	}
	
	
	
	$('bottom').addEvents({
		mouseleave: function() {
			resetNavi();
		}
	});
	
	$('middle').addEvents({
		mouseenter: function() {
			resetNavi();
		},
		mouseover: function() {
			resetNavi();
		},
		mousemove: function() {
			resetNavi();
		}
	});
	
	$$('.navilink').each(function(el) {
		el.addEvents( {
			mouseenter: function() {
				naviAnim(el.get('rel'), true);
			},
			mouseout: function() {
				naviAnim(el.get('rel'), false);
				resetNavi();
			},
			mouseleave: function() {
				naviAnim(el.get('rel'), false);
				resetNavi();
			}
		});
	});
		
});