window.addEvent('load', function() {
	initDom();
});

function initDom() {

	copyMp3Player();
	initImageSlide();
	observeBgLeft();

	window.addEvent('resize', function() {
		setBigImg();
	});
}



function copyMp3Player() {

	if ($$('.tx-dcdmp3player-pi1')) {
		$$('.tx-dcdmp3player-pi1').inject($('contentBox'), 'after');
		$$('.tx-dcdmp3player-pi1').setStyle('display', 'block');
	}
}



var imgScroller;
var iImgTotal = 0;

Event.Keys.left = 37;
Event.Keys.right = 39;
Event.Keys.up = 38;
Event.Keys.esc = 27;

function initImageSlide() {

	if ($('imageWrap') && $('imageBox') && $('imageShadow')) {

		$('imageWrap').inject($('contentBox'), 'after');
		$('imageShadow').inject($('contentBox'), 'after');
		$('imageShadow').setStyle('display', 'block');
		$('imageWrap').setStyle('display', 'block');
		$('imageBox').setStyle('opacity', 0);

		imgScroller = new Scroller($('imageWrap'), { 'area': Math.round($('imageWrap').getWidth() / 3), 'velocity': '0.1' });

		var arImg = $$('.image');
		var fx = new Fx.Elements(arImg, { wait: false, duration: 300, transition: Fx.Transitions.Expo.easeOut });

		var iWidthTotal = 0;
		arImg.each(function(obj, i) {
			obj.setProperty('id', i);
			obj.addEvent('click', function() {
				initBig(this, false);
			});
			obj.addEvent('mouseover', function() {
				thumbOvr(this);
			});
			obj.addEvent('mouseout', function() {
				thumbOut(this);
			});
			iWidthTotal = iWidthTotal + obj.getFirst().getStyle('width').toInt();
		});

		iImgTotal = arImg.length;

		if (iWidthTotal < $('imageWrap').getSize().x) {

			var iCount = 0;

			while (iWidthTotal < $('imageWrap').getSize().x) {

				var imgCopy = $$('.image')[iCount].clone();

				imgCopy.setProperty('id', iImgTotal);
				imgCopy.addEvent('click', function() {
					initBig(this, false);
				});
				imgCopy.addEvent('mouseover', function() {
					thumbOvr(this);
				});
				imgCopy.addEvent('mouseout', function() {
					thumbOut(this);
				});
				
				imgCopy.inject($('imageBox'), 'bottom');

				iWidthTotal = iWidthTotal + imgCopy.getFirst().getStyle('width').toInt();

				iImgTotal++;
				iCount++;
			}
		}

		$('imageBox').setStyle('width', (iWidthTotal + 20) + 'px');

		$('imageBox').addEvent('mouseenter', function() {
			imgScroller.start();
		});
		$('imageBox').addEvent('mouseleave', function() {
			imgScroller.stop();
		});

		$('imageBox').fireEvent('mouseleave');
		$('imageBox').fade('in');
	}

	$('bigBoxBtnMid').addEvent('click', closeBig);
	/*$('bigBoxBtnMid').addEvent('mouseover', function() {
		this.setStyle('background-image', 'url(/fileadmin/gr/img/btn-big-stop.png)');
	});
	$('bigBoxBtnMid').addEvent('mouseout', function() {
		this.setStyle('background-image', '');
	});*/

	document.addEvent('keydown', function(event) {
		if (bKeysActive) {
			if (event.key == 'left') {
				prevImg();
				$('bigBoxBtnLftImg').fade(1);
				var fadeOutDelayLft = function() { this.fade(0); };
				fadeOutDelayLft.delay(1500, $('bigBoxBtnLftImg'));
			}
			else if (event.key == 'right') {
				nextImg();
				$('bigBoxBtnRgtImg').fade(1);
				var fadeOutDelayRgt = function() { this.fade(0); };
				fadeOutDelayRgt.delay(1500, $('bigBoxBtnRgtImg'));
			}
			else if (event.key == 'up' || event.key == 'esc') {
				closeBig();
			}
		}
	});
}



var curImg = '';
var bKeysActive = false;
function initBig(obj, bScroll) {

	imgScroller.stop();
	bKeysActive = false;

	curImg = obj.getProperty('id');

	$('loader').setStyles({
		'display': 'block',
		'top': ((window.getSize().y / 2) - 12) + 'px',
		'left': ((window.getSize().x / 2) - 12) + 'px'
	});
	
	if (!bScroll) {

		$('bigBoxBtnLftImg').set('opacity', 0);
		$('bigBoxBtnRgtImg').set('opacity', 0);

		var catSelHtml = '<a href="http://' + window.location.hostname + '/" class="catSel">Startseite</a>';
		$('menuportfolio').getElements('a').each(function(obj) {
			catSelHtml = catSelHtml + '<a href="' + obj.getProperty('href') + '" class="catSel">' + obj.get('text') + '</a>';
		});

		$('bigBoxCat').set('html', '<a href="#" id="catSelector" class="catSel" title="Andere Portfolio-Kategorie wählen">Menü</a>');

		$('catSelector').addEvent('click', function(e) {

			e.stop();

			var fadeCatSel = new Fx.Elements($$('#bigBoxCat'));

			fadeCatSel.chain(
				function() {
					this.start({
						0 : { opacity: 0 }
					});
				},
				function() {
					$('bigBoxCat').set('html', catSelHtml);
					this.start();
				},
				function() {
					this.start({
						0 : { opacity: 1 }
					});
				}
			);
			fadeCatSel.callChain();
		});

		var infoCookie = Cookie.read('grinfoaboutimgscroll');
		if (!infoCookie) {

			$('infokeys').setStyles({
				'display': 'block',
				'top': ((window.getSize().y / 2) - 177) + 'px',
				'left': ((window.getSize().x / 2) - 284) + 'px'
			});
			$('infokeysClose').addEvent('click', function() { $('infokeys').fade(0); });

			var fadeInDelayInfo = function() { this.fade(1); };
			fadeInDelayInfo.delay(2000, $('infokeys'));

			var fadeOutDelayInfo = function() { this.fade(0); };
			fadeOutDelayInfo.delay(45000, $('infokeys'));

			var infoCookie = Cookie.write('grinfoaboutimgscroll', '1', { path: '/', duration: 0 });
		}
	}

	$('bigBoxBtnLft').removeEvents();
	$('bigBoxBtnRgt').removeEvents();

	if (curImg == 0) {
		$('bigBoxBtnLft').setStyle('cursor', 'default');
		$('bigBoxBtnLftImg').fade(0);
	}
	else {
		$('bigBoxBtnLft').setStyle('cursor', 'pointer');
		$('bigBoxBtnLft').addEvent('click', prevImg);
		$('bigBoxBtnLft').addEvent('mouseover', function() {
			$('bigBoxBtnLftImg').fade(1);
			var fadeOutDelayLft = function() { this.fade(0); };
			fadeOutDelayLft.delay(1500, $('bigBoxBtnLftImg'));
		});
		$('bigBoxBtnLft').addEvent('mouseout', function() {
			$('bigBoxBtnLftImg').fade(0);
		});
	}

	if (curImg == (iImgTotal - 1)) {
		$('bigBoxBtnRgt').setStyle('cursor', 'default');
		$('bigBoxBtnRgtImg').fade(0);
	}
	else {
		$('bigBoxBtnRgt').setStyle('cursor', 'pointer');
		$('bigBoxBtnRgt').addEvent('click', nextImg);
		$('bigBoxBtnRgt').addEvent('mouseover', function() {
			$('bigBoxBtnRgtImg').fade(1);
			var fadeOutDelayRgt = function() { this.fade(0); };
			fadeOutDelayRgt.delay(1500, $('bigBoxBtnRgtImg'));
		});
		$('bigBoxBtnRgt').addEvent('mouseout', function() {
			$('bigBoxBtnRgtImg').fade(0);
		});
	}

	if (!bScroll) {
		new Asset.image(obj.getLast().getProperty('value'), {
			onload: showBig
		});
	}
	else {
		new Asset.image(obj.getLast().getProperty('value'), {
			onload: scrollBig
		});
	}

}

function showBig(obj) {

	$$('#bigBox', '#bigBoxSubBox').setStyles({
		'display': 'block',
		'opacity': 0
	});

	$('loader').setStyle('display', 'none');

	setBigImg();

	var fadeBig = new Fx.Elements($$('#logoBox', '#contentBox', '#imageShadow', '#imageWrap', '#leftBox', '#menuWrap', '#bgleft', '#bigBox', '#bigBoxSubBox'));

	fadeBig.chain(
		function() {
			this.start({
				0 : { opacity: 0 },
				1 : { opacity: 0 },
				2 : { opacity: 0 },
				3 : { opacity: 0 },
				4 : { opacity: 0 },
				5 : { opacity: 0 }
			});
		},
		function() {
			this.set({
				0 : { display: 'none' },
				1 : { display: 'none' },
				2 : { display: 'none' },
				3 : { display: 'none' },
				4 : { display: 'none' },
				5 : { display: 'none' }
			});
			this.start({
				6 : {
					'width': window.getScrollSize().x,
					'background-color': '#131313'
				}
			});
			$('bigBoxImg').setProperty('src', obj.src);
			$('bigBoxImgNb').set('text', (parseInt(curImg) + 1) + '/' + iImgTotal);
			$('bigBoxSub').set('text', $(curImg).getFirst().getNext().get('text'));
		},
		function() {
			this.start({
				6 : { 'background-image': 'url(/fileadmin/gr/img/bg-guido-rottmann.gif)' },
				7 : { opacity: 1 },
				8 : { opacity: 1 }
			});
			$('bgleft').setStyle('width', '100%');
			$('bigBoxBtns').setStyle('display', 'block');
			bKeysActive = true;
		}
	);

	fadeBig.callChain();
}

function closeBig() {

	bKeysActive = false;
	$('bigBoxBtns').setStyle('display', 'none');
	$('bigBoxBtnLft').removeEvents();
	$('bigBoxBtnRgt').removeEvents();

	var fadeSmall = new Fx.Elements($$('#bigBox', '#bigBoxSubBox', '#bgleft', '#logoBox', '#contentBox', '#imageShadow', '#imageWrap', '#leftBox', '#menuWrap'));

	fadeSmall.chain(
		function() {
			this.start({
				0 : { opacity: 0 },
				1 : { opacity: 0 }
			});
		},
		function() {
			this.set({
				0 : { display: 'none' },
				1 : { display: 'none' },
				2 : { 'background-image': 'none' }
			});
			this.start({
				2 : {
					'width': [window.getScrollSize().x, 250],
					'background-color': '#262626'
				}
			});
		},
		function() {
			this.set({
				3 : { display: 'block' },
				4 : { display: 'block' },
				5 : { display: 'block' },
				6 : { display: 'block' },
				7 : { display: 'block' },
				8 : { display: 'block' }
			});
			this.start({
				3 : { opacity: 1 },
				4 : { opacity: 1 },
				5 : { opacity: 1 },
				6 : { opacity: 1 },
				7 : { opacity: 1 },
				8 : { opacity: 1 }
			});
		},
		function () {
			imgScroller.start();
			this.start();
		}
	);

	fadeSmall.callChain();
}

function prevImg() {

	if ($(curImg).getPrevious()) {
		initBig($(curImg).getPrevious(), true);
	}
}
function nextImg() {

	if ($(curImg).getNext()) {
		initBig($(curImg).getNext(), true);
	}
}

function scrollBig(obj) {

	$('loader').setStyle('display', 'none');

	setBigImg();

	var scrollBig = new Fx.Elements($$('#bigBox'));

	scrollBig.chain(
		function() {
			this.start({
				0 : { opacity: 0 }
			});
			$('bigBoxSub').set('text', '');
		},
		function() {
			$('bigBoxImg').setProperty('src', obj.src);
			$('bigBoxImgNb').set('text', (parseInt(curImg) + 1) + '/' + iImgTotal);
			this.start({
				0 : { opacity: 1 }
			});
		},
		function() {
			$('bigBoxSub').set('text', $(curImg).getFirst().getNext().get('text'));
			bKeysActive = true;
			this.start();
		}
	);

	scrollBig.callChain();
}

function setBigImg() {
	$('bigBoxImg').setStyle('height', (window.getSize().y - 121) + 'px');
}

function thumbOvr(sel) {

	$$('.image').each(function(obj) {
		if (sel.id != obj.id) {
			obj.getFirst().fade(0.5);
		}
	});
}

function thumbOut(sel) {

	$$('.image').each(function(obj) {
		if (sel.id != obj.id) {
			obj.getFirst().fade(1);
		}
	});
}

function observeBgLeft() {

	if ($('bgleft')) {
		setBgLeft();
		window.addEvent('resize', setBgLeft);
	}
}

function setBgLeft() {
	$('bgleft').setStyle('height', window.getScrollSize().y + 'px');
}




Scroller.implement({
	scroll: function() {

		var size = this.element.getSize(), scroll = this.element.getScroll(),
		pos = this.element.getOffsets(), scrollSize = this.element.getScrollSize(), change = {'x': 0, 'y': 0};

		for (var z in this.page) {

			if (this.page[z] < (this.options.area + pos[z]) && scroll[z] != 0)
				change[z] = (this.page[z] - this.options.area - pos[z]) * this.options.velocity;
			else if (this.page[z] + this.options.area > (size[z] + pos[z]) && scroll[z] + size[z] != scrollSize[z])
				change[z] = (this.page[z] - size[z] + this.options.area - pos[z]) * this.options.velocity;
			}

			if (change.y || change.x)
				this.fireEvent('change', [scroll.x + change.x, scroll.y + change.y]);
	}
});

Fx.implement({
	setChain: function(chain) {
		this.$chain = chain.$chain;
		return this;
	}
});