// Ottmann FX
// v1.0
// 2010-02-02 Florian Voegel, Studio Mausblau

// 'nojs' Body-Klasse entfernen
//$('body').removeClass('nojs');
//$('html').removeClass('nojs');

// Cufon verwenden?
var cufon = true;

// BrowseBox

// ID des Navigationscontaiers
var browseNavId = 'browse';
// ID des Markers
var browseMarkerId = 'marker3';
// Pixelversatz des Markers
var browseMarkerOffset = 3;
// Klasse der Hover-Elemente
var browseHoverClass = 'over';
// ID des Vorwärts-/Zurück-Menüs
var prevnextId = 'prevnext';
// ID des Zurück-Buttons
var prevId = 'prev';
// Text des Zurück-Buttons
var prevText = '';
// ID des Vor-Buttons
var nextId = 'next';
// Text des Vor-Buttons
var nextText = '';
// Breite eines Nummern-Buttons
var buttonWidth = 25;
// ID der Box des scrollenden Inhalts
var windowId = 'scrollbox';
// ID des scrollenden Inhalts
var contentId = 'pages';
// Fade In/Out Geschwindigkeit
var fadeSpeed = 700;
// Breite des Content-Fensters
//var windowWidth = 600;
// Scroll-Geschwindigkeit des Contents
var boxSpeed = 800;

// Diese Variablen werden erst in der DOM-geladen-Phase befüllt
var pages;
var activePage;
// Breite des Content-Fensters
var windowWidth;

// ImageBox

// Konfigurationsvariablen
var imageBoxId = 'imagebox';
var imageBoxOverlayClass = 'overlay';
var imageBoxMarkerId = 'marker4';
var imageBoxMarkerOffset = 9;
//var imageBoxMarkerSpeed = 1500;
var imageBoxMarkerSpeed = 300;
var imageBoxThumbWidth = 75;
var imageBoxFadeInSpeed = 1000;
var imageBoxFadeOutSpeed = 1000;

// Hilfsvariablen
//var imgCount;
var imageBoxActiveImg = 1;
var imageBoxClicked = false;
// var playAnimations = true;

// Hover-Element ein-, oder ausblenden
function hoverFadeInOut(object,value,speed,effect) {
	$('.hover', object)
		//.stop().animate({'opacity': value}, speed)
		.stop().animate({'opacity': value}, speed, effect)
	;
}

function foobarOld() {
	// Alle Links des Navigationsmenüs…
	$('#nav1 li a')
		// …einzeln durchgehen…
		.each(function(index) {
			// …Linktext jeweils zwischenspeichern
			linkText = $(this).html();
			// …und jeweils einen Span mit dem selben Linktext bauen (<a href="#">foo<span class="hover"><em>foo</em></span></a>)
			$(this).append('<span class="hover"><em>'+linkText+'</em></span>');
		})
	// Mouse-Triggers
		// Hover:
		.hover(function() {
			// Den erstellten Span einblenden, d.h. Opacity auf 1 animieren.
			foobarFadeInOut(this, 1, 2000, 'easeOutExpo');
		// Out:	
		},function() {
			// Wieder zurückblenden (Opacity auf 0 animieren).
			foobarFadeInOut(this, 0, 2000, 'easeOutQuint');
		})
	;	
}

function foobar() {
	// Alle Links des Navigationsmenüs…
	$('#nav1 li a')
		// …einzeln durchgehen…
		.each(function(index) {
			// Hover-Span erstellen und…
			makeHoverSpan(this);
		})
		// …Mouse-Triggers setzen
		// Hover:
		.hover(function() {
			// Den erstellten Span einblenden, d.h. Opacity auf 1 animieren.
			hoverFadeInOut(this, 1, 2000, 'easeOutExpo');
		// Out:	
		},function() {
			// Wieder zurückblenden (Opacity auf 0 animieren).
			hoverFadeInOut(this, 0, 2000, 'easeOutQuint');
		})
	;
	
	// Alle .button-Links…
	$('#content a.button')
		// …einzeln durchgehen…
		.each(function(index) {
			// Hover-Span erstellen und…
			makeHoverSpan(this);
		})
		// …Mouse-Triggers setzen
		// Hover:
		.hover(function() {
			// Den erstellten Span einblenden, d.h. Opacity auf 1 animieren.
			hoverFadeInOut(this, 1, 2000, 'easeOutExpo');
		// Out:	
		},function() {
			// Wieder zurückblenden (Opacity auf 0 animieren).
			hoverFadeInOut(this, 0, 2000, 'easeOutQuint');
		})
	;	
}

function makeHoverSpan(aHref) {
	// …Linktext jeweils zwischenspeichern
	linkText = $(aHref).html();
	// …und jeweils einen Span mit dem selben Linktext bauen (<a href="#">foo<span class="hover"><em>foo</em></span></a>)
	$(aHref).append('<span class="hover"><em>'+linkText+'</em></span>');
}

function centerIt() {
	
	centerItAll();
	
	$(window).resize(function() {
		//$('#log').append('<div>Handler for .resize() called.</div>');
		
		
		centerItAll();
		
	});


	
	
}

function centerItAll () {
	//var docHeight = $(document).height();
	var windowHeight = $(window).height();
	
	var ottmannHeight = 628;
	var spareHeight = windowHeight - ottmannHeight;
	var space = (spareHeight/3);
	//var spaceBottom = (spareHeight/3)*2;
	//var footerHeight = spaceBottom - 50;
	//alert ('windowHeight: '+windowHeight+' / spaceTop: '+spaceTop);
	
	//
	$('body').css({'overflow':'hidden'});
	$('#contentwrapper').height(413+space);
	
	
	if (spareHeight >= 0) {
		$('#header').css({'margin-top':space});
		// $('#shim')
		// 			.css({'margin-top':0})
		// 			.height(space);
		$('#footer').height(space);
		if ($('#footer').height()<27) {
			$('#footer')
				.height(5)
				.click(function(){
					//alert('clicked!');
					if ($(this).height()==5) {
						//alert('Height = 5');
						$(this).height(60);
					} else {
						$(this).height(5);
					}
					
				})
			;
		} else {
			$('#footer')
				.unbind('click');
		}
	}
	
	
	
}

function vertCenter() {
	
	//$('#'+windowId).css({'background-color':'orange'});
	
	windowHeight = $('#'+windowId).height();
	//alert(windowHeight);
	
	// Alle Textbox-DIVs…
	$('#'+windowId+' #'+contentId+'.text div')
		// …durchgehen…
		.each(function(index) {
			// …und vertikal zentrieren 
			//vertCenter($this);
			// alert('floggg');
			
			//alert($(this).height());
			
			//$(this).css({'background-color':'green'});
			futz = (windowHeight - $(this).height()) / 2 - 10;
			
			//alert(futz);
			
			
			//alert($(this).css('padding-top'));
			
			$(this).css({'margin-top' : futz});
	
			
		})
	
}


// 
function navFxInit() {
	// Nav1 Active-Marker erstellen und setzen
	active = $('div#navigation ul#nav1 li a.active:first');
	activeText = active.text();
	active.after('<span id="marker1">'+activeText+'</span>');
	
	// Nav2 Active-Marker erstellen und setzen
	nav2Active = $('div#navigation ul#nav2 li a.active');
	nav2ActiveText = nav2Active.text();
	nav2Active.after('<span id="marker2">'+nav2ActiveText+'</span>');
	
	// Login-Link einige Pixel nach oben verschieben und aus der UL lösen
	loginLink = $('#loginbutton');
	loginLink.css("left","0");
	loginLink.css("top","-43px");
	loginLink.remove().appendTo("#footer");
	
	// Admin-Menü verschieben und aus der normalen Nav lösen
	adminHead = $('#header ul#admin');
	adminHead.css("position","relative");
	adminHead.css("top","81px");
	adminHead.css("left","10px");
	//adminHead.css("margin","0 auto");
	adminHead.remove().appendTo("#title");
}

function niceTypo () {
	// 'nojs' Body-Klasse entfernen
	$('html').removeClass('nojs');
	
	// Cufon-Ersetzungen
	Cufon.replace('#content h3', {
		textShadow: '#000 0px 1px'
	});
	// $('#nav1 li a').css();
	Cufon.replace('#nav1 li a', {
		//textShadow: '#1c3d4f 0px 1px'
	});
	Cufon.replace('#browse a', {
		//textShadow: '#666 0px 1px'
	});
	Cufon.replace('#marker1', {
		textShadow: '#fff 0px 1px'
	});
	Cufon.replace('#marker2', {
		textShadow: '#fff 0px 1px'
	});
	Cufon.replace('#marker3', {
		textShadow: '#fff 0px 1px'
	});
	Cufon.replace('#imagebox #gallerybutton');
	Cufon.replace('#gig a');
	Cufon.replace('.submit');
	Cufon.replace('#footer a', { hover: true });
	Cufon.replace('#content.thumbnails #scrollbox #pages div div span');
	Cufon.replace('#content.thumbnails #description h4');
	Cufon.replace('#content h4', {
		textShadow: '#000 0px 1px'
	});
	Cufon.replace('#content .button', {
		textShadow: '#000 0px 1px'
	});
	Cufon.replace('form .submit input');
	Cufon.replace('#flashMessage');
}

// 
function flashMessageStuff() {
	// Alle Flash-Messages nach Klick ausfaden
	$('#flashMessage')
		.click(function(){
			// $(this).parent().fadeOut();
			$(this).fadeOut();
			return false;
		});
	// Positive Flash-Message nach 3 Sekunden automatisch ausfaden
	$('#flashMessage.flash_good').animate({opacity: 1.0}, 3000).fadeOut();
}

// Erstellt und initialisiert Elemente des Browsemenüs
function browseInit () {
	//alert('HOLLA');
	// Gesamtseitenanzahl ermitteln
	pages = $('#'+contentId).children().size();
	// Aktive Seite auf 1 setzen
	activePage = 1;

	// Scrollfensterbreite ermitteln
	windowWidth = $('#'+windowId).width();
	//alert(windowWidth);
	
	// Den Fenster-Overflow verstecken
	$('#'+windowId).css('overflow','hidden');
	// Buttons bauen
	buildButtons();
	// Optik der Vorwärts-/Zurück-Buttons anpassen
	setPrevnextDisplay();
	
	// Alle Links des Navigationsmenüs…
	$('#'+browseNavId+' li a')
		// …einzeln durchgehen…
		.each(function(index) {
			// …Linktext jeweils zwischenspeichern
			linkText = $(this).html();
			// …und jeweils einen Span mit dem selben Linktext bauen (<a href="#">foo<span class="over">foo</span></a>)
			$(this).append('<span class="'+browseHoverClass+'">'+linkText+'</span>');
		})	
	// Den Text des aktiven Spans holen, um ihn für den Marker zu verwenden
	markerText = getText(activePage);
	// Marker zum Navigationsmenü hinzufügen
	$('#'+browseNavId)
		.append('<div id="'+browseMarkerId+'">'+markerText+'</div>')
	;
	// Mouse-Trigger setzen
	browseMouseTriggers();
}

// Holt den Text des Spans des soundsovielten Li-Elementes
function getText(elementNumber) {
	text = $('#'+browseNavId+' li:nth-child('+elementNumber+') span').text();
	return text;
}

// Hover-Element ein-, oder ausblenden
function browseFadeInOut(object,value) {
	$('.'+browseHoverClass, object)
		.stop().animate({'opacity': value}, fadeSpeed)
	;
}

// Nach Mausklick auf Nummern-Button
function clickedNavbarButton(clickedElement) {
	// Nummer des geklickten Buttons ermitteln. (Wieviele Siblings vor dem Geklickten? Plus eins und wir haben den geklickten Wicht.)
	clickedNumber = $(clickedElement).parent().prevAll().size()+1;
	// Content scrollen
	scrollContent(clickedNumber);
	// Marker bewegen
	moveMarker(clickedNumber,70);
	// Aktive Seite auf geklickte Zahl setzen
	activePage = clickedNumber;
	// Look der Vor-/Zurück-Buttons anpassen
	setPrevnextDisplay();	
}

// Nach Mausklick auf Vor-, bzw. Zurück-Button
function clickedPrevnextButton(goToPage) {	
	// Content scrollen
	scrollContent(goToPage);
	// Marker bewegen
	moveMarker(activePage,340);
	// Look der Vor-/Zurück-Buttons anpassen
	setPrevnextDisplay();	
}

function moveMarker (number,speed) {
	// Verschiebezielposition des Markers (Beispiel: clickedNumber: 3 -> markerGo: 60px)
	moveMarkerTo = (number-1) * buttonWidth + browseMarkerOffset;
	// Text des Spans für Marker holen
	markerText = getText(number);
	// Marker bewegen und neuen Text setzen
	$('#'+browseMarkerId)
		.animate({'left': moveMarkerTo}, speed)
		.html(markerText)
	;
	// u.U. Cufon-Replace ausführen
	if (cufon === true) {
		//Cufon.replace('#'+browseMarkerId);
		
		Cufon.replace('#'+browseMarkerId, {
			textShadow: '#fff 0px 1px'
		});
	}	
}


function scrollContent(goToPage) {
	// Pixelposition (des linken Randes des Inhalts-Wrappers) bauen
	pixelPosition = '-'+((goToPage-1) * windowWidth);
	// Content dorthin scrollen
	$('#'+contentId)
	 	.animate({'left':pixelPosition}, boxSpeed, 'easeInOutExpo')
	 ;
}

function setPrevnextDisplay() {
	// PrevNext-Links ein-, oder ausblenden
	speed = boxSpeed/2;
	$('#'+prevId+' a')
		.stop().animate({'opacity': 1}, speed)
		.css('cursor','pointer')
	;
	$('#'+nextId+' a')
		.stop().animate({'opacity': 1}, speed)
		.css('cursor','pointer')
	;
	if (activePage === pages) {
		$('#'+nextId+' a')
			.stop().animate({'opacity': 0}, speed)
			.css('cursor','default')
		;
	}
	if (activePage === 1) {
		$('#'+prevId+' a')
			.stop().animate({'opacity': 0}, speed)
			.css('cursor','default')
		;
		$('#'+nextId+' a')
			.stop().animate({'opacity': 1}, speed)
			.css('cursor','pointer')
		;
	}
}

function buildButtons() {
	// Falls es gar nicht mehr als eine Seite gibt, weg!
	if(pages<=1) {
		return;
	}
	// Vor-/Zurück-Menü bauen und direkt vor Navigationsmenü ins DOM hängen
	// Alle Navigationsbuttons bauen…
	buttons = '<ul id="'+prevnextId
					+'"><li id="'+prevId+'"><a href="#">'+prevText+'<span class="'
					+browseHoverClass+'">'+prevText+'</span></a></li><li id="'
					+nextId+'"><a href="#">'+nextText+'<span class="'+browseHoverClass+'">'
					+nextText+'</span></a></li></ul>'
					+'<ul id="'+browseNavId+'">';
	for (i=1; i<=pages; i++) {
		buttons += '<li><a href="#">'+i+'</a></li>';
	}
	buttons += '</ul>';
	// …und nach dem "Textfenster" ins DOM hängen
	$('#'+windowId).after(buttons);
	
	// Admin: Edit-All-Button platzieren
	pos = $('#'+browseNavId).find('li:last').position().left;
	$('#editall').css({'left': pos+60});
	//alert(pos);
}

function browseMouseTriggers() {
	// Nummern-Button
	$('#'+browseNavId+' li a')
		// Hover:
		.hover(function() {
			// Den erstellten Span einblenden, d.h. Opacity auf 1 animieren.
			browseFadeInOut(this, 1);
		// Out:	
		},function() {
			// Wieder zurückblenden (Opacity auf 0 animieren).
			browseFadeInOut(this, 0);
		})
		// Click:
		.click(function() {
			//	clickedNavbarButton-Funktion ausführen
			clickedNavbarButton(this);
			// Standard Anchor-Verhalten aushebeln
			return false;
		})
	;	
	// Vor-Button
	$('#'+nextId+' a')
		// Hover:
		.hover(function() {
			// Span einblenden, d.h. Opacity auf 1 animieren.
			browseFadeInOut(this, 1);	
		// Out:	
		},function() {
			// Wieder zurückblenden (Opacity auf 0 animieren).
			browseFadeInOut(this, 0);
		})	
		// Click:
		.click(function(){
			// Die aktive Seite um eins erhöhen
			activePage += 1;
			// Falls die aktive Seite größer ist als die Gesamtseitenzahl, diese als aktive Seite setzen
			if (activePage > pages) { 
				activePage = pages;
			}
			// clickedPrevnext-Funktion ausführen
			clickedPrevnextButton(activePage);
			// Standard Anchor-Verhalten aushebeln
			return false;
		})
	;
	// Zurück-Button
	$('#'+prevId+' a')
		// Hover:
		.hover(function() {
			// Span einblenden, d.h. Opacity auf 1 animieren.
			browseFadeInOut(this, 1);	
		// Out:	
		},function() {
			// Wieder zurückblenden (Opacity auf 0 animieren).
			browseFadeInOut(this, 0);
		})
		// Click:
		.click(function(){
			// Aktive Seite eins runter
			activePage -= 1;
			// Falls die aktive Seite kleiner/gleich 0 ist, auf 1 setzen
			if (activePage <= 0) { 
				activePage = 1;
			}
			// clickedPrevnext-Funktion ausführen
			clickedPrevnextButton(activePage);
			// Standard Anchor-Verhalten aushebeln
			return false;
		})
	;
}









// ImageBox Startfunktion
function imageBoxInit() {
	
	// Für jeden Bilderlink…
	$('#'+imageBoxId+' ul li a')
		.each(function(index) {
			
			// …das SRC aud dem IMG-Kindchen zutzeln…
			thumbSrc = $(this).children().attr('src');
			
			// …und den Bilderlink schließlich mit dem Overlay-Span versehen
			$(this).append('<span class="'+imageBoxOverlayClass+'" style="background-image: url('+thumbSrc+');"></span>');
		})
	;
	// Pixelversatz mit 0 starten
	offset = 0;
	// Alle Overlay durchgehen,…
	$('.overlay')
		.each(function(index) {
			// …jeweils beim Pixelversatz platzieren und
			$(this).css('left',offset);
			// …und diesen um die Thumbnailbreite erhöhen
			offset += imageBoxThumbWidth;
		})
	;
	
	//imageBoxActiveImg = Math.floor(Math.random()*4)+1;
	
	// Aktives Bild ermitteln
	targetImagePath = $('#'+imageBoxId+' p img').attr("src");
	activeThumbLink = $('#'+imageBoxId+' ul li a[href='+targetImagePath+']');
	
	// Ziel-Pixelposition für den Marker ermitteln
	pixelPosition = activeThumbLink.position().left - imageBoxMarkerOffset;
	
	// Marker generieren und an richtige Stelle setzen
	$('#'+imageBoxId+' ul').append('<div id="'+imageBoxMarkerId+'" style="left:'+pixelPosition+'px"></div>');
	
	// Den unter dem Marker liegenden Overlay durchsichtig machen
	activeThumbLink.find(".overlay").css('opacity',1);
	
	// Loading-Div generieren
	$('#'+imageBoxId).append('<div id="loading" style="opacity: 0"></div>');
	
	// Moue-Trigger setzen
	imageBoxMouseTriggers();
}

// Maus-Aktionen
function imageBoxMouseTriggers () {
	// Thumbnails
	$('#'+imageBoxId+' li a')
		// Hover:
		.hover(function() {
			// 
			fadeInOut(this, 1, imageBoxFadeInSpeed, 'easeOutQuint');
			
		// Out:	
		},function() {
			// 
			if(imageBoxClicked == false) {
				fadeInOut(this, 0, imageBoxFadeOutSpeed, 'easeOutExpo');
			} else {
				imageBoxClicked = false;
			}
		})
		// Klick:
		.click(function(){
			// Weitere Aktionen ausführen und Bild wechseln
			clickActions(this);
			imageChange(this);
			
			// Das standard Anchor-Verhalten aushebeln
			return false;
		})
	;
}

// Overlay ein-, oder ausblenden
function fadeInOut(object,value,speed,effect) {
	// Wenn das Übergabeobjekt gestoppt wurde, nicht faden.
	// if ($('span',object).attr('id')=='stayput') {
	// 		return false;
	// 	}
	// Ansonsten, faden.
	hurz = $('.'+imageBoxOverlayClass, object);
	// alert (hurz.css());
	
	
	hurz
		.stop().animate({'opacity': value}, speed, effect)
	;
}

// Nach Klick auf Thumbnail
function clickActions(clickedObject) {
	
	// 
	imageBoxClicked = true;
	
	// Ziel-Pixelposition ermitteln
	pixelPosition = $('.overlay', clickedObject).position().left - imageBoxMarkerOffset;

	// Marker dorthin bewegen
	$('#'+imageBoxMarkerId).stop().animate({'left': pixelPosition}, imageBoxMarkerSpeed, 'easeOutExpo');	

	//Overlays aller anderen Thumbnails ausblenden, das geklickte Overlay einblenden
	$('#imagebox ul li a span').not('#stayput')
		.stop().animate({'opacity': 0}, 300);
	$('.overlay', clickedObject)
		.stop().animate({'opacity': 1}, 300);
}

// Bildtausch
function imageChange(clickedObject) {
	// 
	// playAnimations = false;
	
	
	// Ein Blocker-Div über die Thumbnail-Links legen (Um wildes Thumbnailgeklicke zu unterdrücken. Kann sonst zu üblen Hängern führen.)
	// Die leere Background-Image-URL wird für Opera benötigt. Nimmt man nämlich einfach "nur" ein transparentes Div ohne Pseudo-Background, 
	// blockt dieses im Opera die darunterliegenden Links _nicht_!
	blocker = '<div id="blocker" style="position: absolute; top: 0; left: 0;'+
				' width: 300px; height: 75px; background-color: transparent;'+
				' background-image: url(/img/layout/content_stripedtile.gif); z-index: 3; opacity: 0"></div>';
	$('#'+imageBoxId+' ul').append(blocker);
	
	// Blocker einblenden
	$('#blocker').stop().animate({'opacity': 1}, 2000);
	
	// Loading-Div einblenden
	$('#'+imageBoxId+' #loading').stop().animate({'opacity': 1}, 500);
	
	// Dateiquelle für das neue Bild bauen
	thumbSrc = $('img', clickedObject).attr('src');
	// Das "_thumb.jpg" vom Pfadende schneiden
	newImgSrc = thumbSrc.slice(0,-10)+'.jpg';
	// Das Bild der Imagebox duplizieren, mit den notwendigen CSS versehen und direkt hinter dem Original einfügen
	fadeDummy = $('#'+imageBoxId+' p img')
		.clone()
		.css({'position':'absolute', 'top':'0', 'left':'0', 'opacity':'1'})
		.insertAfter('#'+imageBoxId+' p img')
	;
	// Dem untenliegenden Bild die neue Quelle verpassen
	//$('#'+imageBoxId+' p img:first-child').attr('src',newImgSrc);
	
	
	
	// Callback nachdem das Bild geladen wurde
	$('#'+imageBoxId+' p img:first-child').attr('src',newImgSrc)
		.load(function(){
			
			//alert('Geladen!');
			
			// Loading-Div ausblenden
			$('#'+imageBoxId+' #loading').stop().animate({'opacity': 0}, 500);
			
			// Fader ausblenden
			$(fadeDummy)
				.stop()
				.animate({'opacity': 0}, 1400, 'easeInExpo', function() {
					// Nach Animationsabschluss:
					// Fade-Dummy löschen und
					$(this).remove();
					
					
					
					// Blocker-Div ausblenden
					$('#blocker').stop().animate({'opacity': 0}, 600, function() {
						// Blocker-Div löschen
						$('#blocker').remove();
					});


					//
					// playAnimations = true;
				})
			;
			
			
			
	    });
	
	
	

	
}










// Und los!
$(function(){
	// 
	browseInit();
	
	// Wenn ImageBox vorhanden, Code/Funktionen für selbige initialisieren
	if ($('#'+imageBoxId).html()!=null) {
		imageBoxInit();
	}
	
	navFxInit();
	
	// Focus auf erstes Input-Element (Form)
	// error = $('.form-error');
	// 	alert (error.children());
	// 	if (!error.children()) {
	// 		$('input:visible:enabled:first').focus();
	// 	}
	
	
	
	
	
	
	//vertCenter ($('#'+windowId+' #'+contentId+' div'));
	
	
	vertCenter();
	
	foobar();
	centerIt();
	
	flashMessageStuff();
	
	niceTypo();
});