$(document).ready(function(){

	// ============================= GLOBALE VARIABLEN
	// Statuskontrolle des Popups
	popupStatus = 0;
	// Initialisierung einer leeren Variablen
	popupName = "";
	
	// ============================= SLIDEBAR FUNKTIONEN
	container = $('div.slidebar');
	ul = $('ul.items');
	slidePosition = 0;
	
	// EinfŸgen der Buttons
	container.append('<div id="btn_left" class="slidebutton" />').prepend('<div id="btn_right" class="slidebutton" />');
	
	// function zum Verschieben
	function slideLeft () {
		if (slidePosition > 0) {
			ul.animate({left : '+=179px'}, 'slow');
			slidePosition--;
		}
	};
	function slideRight () {
		if (slidePosition < 4) {
			ul.animate({left : '-=179px'}, 'slow');
			slidePosition++;
		}
	};
	
	// Verschiebe ul bei klicken auf Button
	$('.slidebutton').click(function (){
		$(this).attr('id') == 'btn_left' ? slideLeft() : slideRight();
	});	
	
	// ============================= POPUP SPEZIFISCHE FUNKTIONEN
	// Laden des Popups, dessen ID = der Variablen popupName ist
	function loadPopup(){
		if (popupStatus == 0){
			$('#popup_background').css({
				'opacity':'0.6'
			});
			$('#popup_background').fadeIn('slow');
			$('.popup[id =' + popupName + ']').fadeIn('slow');
			popupStatus = 1;
		} 
	}	
	
	// Ausblenden des Popup
	function disablePopup(){
		if (popupStatus == 1){
			$('#popup_background').fadeOut('slow');
			$('.popup[id =' + popupName + ']').fadeOut('slow');
			popupStatus = 0;
		}	
	}
	
	// Um das Popup zu zentrieren
	function centeringPopup(){
		// Bestimmen der Groessenverhaeltnisse
		var windowWidth = document.documentElement.clientWidth;
		var windowHeight = document.documentElement.clientHeight;
		var popupWidth = $('.popup').width();
		var popupHeight = $('.popup').height();
		// Zentrieren des Popups
		$('.popup').css({
			'top' : (windowHeight/2)-(popupHeight/1.7),
			'left' : (windowWidth/2)-(popupWidth/1.8)
		});
		$('#popup_background').css({
			'height' : windowHeight
		});
	}
	
	// Oeffnet das Popup
	$('.popuploader').click(function(){
		// Der Variablen popupName den Wert der ID des geklickten Elements übergeben
		popupName = $(this).attr('id');
		centeringPopup();
		loadPopup();
	});
	// Schliessen des Popup
	$('.popup_close').click(function(){
		disablePopup();
	});
	// Schliessen mit ESC
	$(document).keypress(function(e){
		if(e.keyCode==27 && popupStatus==1){
			disablePopup();
		};
	});

// ============================= BILDWECHSEL HALBTRANSPARENT NACH NICHT TRANSPARENT	

$('.popuploader').hover(function(){
	$thisID = $(this).attr('id');
	$(this).attr('src', 'bilder/' + $thisID + '.png');
}, function(){
	$(this).attr('src', 'bilder/' + $thisID + '_hover.png');
});

});