/*
jQuery(document).ready(function(){
	resizeBgImage();
	scrollableSlide();
});
*/
jQuery(window).load( function() {
	setContentHeight();
	resizeBgImage();
	scrollableSlide();
	toggleContent();
		
	contentLock = 'false'
	navigationLock = 'false'
		
});

// WINDOW RESIZE
jQuery(window).resize( function() {
	setContentHeight();
	resizeBgImage();
});

function closeContent() {
	
	if (contentLock == 'false') {
		
		contentLock = 'true'
		
		jQuery('#page-content').animate({
			width: '30px'
		  }, 1500, function() {
	
			jQuery('#page-content a#switch').addClass('open').removeClass('close');
			
		});
		
		contentLock = 'false'
	}
	
};

function showNavigation(){
	jQuery('#main-navigation').animate({
		left: '32px'
	  }, 1500, function() {
		
		jQuery('#page-content a#switch').addClass('close').removeClass('open');

	});
	
};

function hideNavigation(){
	
	jQuery('#main-navigation').animate({
		left: '-322px'
	  }, 1500, function() {

		jQuery('#page-content a#switch').addClass('open').removeClass('close');
		
	});
	
};

function openContent(){
	
	if (contentLock == 'false') {
		
		contentLock = 'true'
		
		jQuery('#page-content').animate({
			width: '610px'
		  }, 1500, function() {
			
			jQuery('#page-content a#switch').addClass('close').removeClass('open');
	
		});
		
		contentLock = 'false'
	}	
	
};

function resizeBgImage () {
	
	windowSizeX = parseInt(jQuery(window).width()-40);
	windowSizeY = jQuery(window).height();
	windowRatio = windowSizeX / windowSizeY;	
	
	jQuery('.bg-image').each(function(){
				
		imageSizeX = jQuery(this).width();
		imageSizeY = jQuery(this).height();
		imageRatio = imageSizeX / imageSizeY;
				
		if (windowRatio > imageRatio) {
			// NACH BREITE SKALIEREN
			resizeImageX = windowSizeX;
			resizeImageY = resizeImageX / imageRatio;
			offsetX = 0;
			offsetY = (windowSizeY - resizeImageY) / 2;
			
		} else {
			// NACH HOEHE SKALIEREN
			resizeImageY = windowSizeY;
			resizeImageX = resizeImageY * imageRatio;
			offsetX = (windowSizeX - resizeImageX) / 2;
			offsetY = 0;
		}
		
		jQuery(this).attr({
			width: resizeImageX,
			height: resizeImageY
		}).css({
			margin: ''+offsetY +'px 0 0 ' + offsetX + 'px'
		});
		
	});
	
	jQuery('.header-image').each(function(){
			
		jQuery(this).attr({
			width: resizeImageX
		}).css({
			margin: '0 0 0 ' + offsetX + 'px'
		});
		
	});
	
	jQuery('#bg-image-container .slider .item').width(windowSizeX);
	
	jQuery('.wrap').each(function(){
		jQuery(this).width(windowSizeX);
	});
	
}

function scrollPane () {
	jQuery('.jspContainer').height(jQuery('.jspPane').height());
	
	jQuery('#content').jScrollPane({
		showArrows: true,
		arrowScrollOnHover:true
	});
	
}


// SLIDER GALLERY / BACKGROUND
// MORE CLONES
jQuery.fn.scrollableAddClones = function(addItems) {
  // grab scrollable plugin
  var scrollable;
  if (!(scrollable = $(this).data('scrollable')) || !scrollable.getConf().circular)
	return;
  // grab scrollable elements and remember it's count
  var nodes = scrollable.getItems();
  var length = nodes.length;
  // grab class for the nodes
  var clonedClass = scrollable.getConf().clonedClass;
  // get wrap object to append the clones to
  var wrap = scrollable.getItemWrap();
  // fill as much nodes as needed for 500 pixels
  if (!addItems) addItems = Math.ceil(500 / nodes.eq(1).width());
  // create fake container to add the clones to (max 15 clones)
  var newNodesAppend = $('<span />');
  for (var i = 1; i <= (addItems < 15 ? addItems : 15); i++)
	nodes.eq(i % length).clone().addClass(clonedClass).appendTo(newNodesAppend);
  // insert HTML
  newNodesAppend.children().appendTo(wrap);
}

function scrollableSlide(){
	
	imageCount = 0;
	
	jQuery('div#bg-image-container div.slider div.item:first').addClass('act');
	/*
	jQuery('div#bg-image-container div.slider div')has.css({
		'opacity': 0   
	});
	jQuery('div#bg-image-container div.slider div.act').css({
		'opacity': 1
	});
	*/
	// Schleife
	jQuery('div#bg-image-container > div.slider > div.item').each(function (index, domEle){
		// Bild in die Variable "newsSingleImage" speichern
		
		jQuery('#slider-navigation .items').append('<div class="item"><div class="'+index+'"></div></div>');
						
		sliderImage = jQuery(domEle).find('img').attr("src");			
		
		jQuery('#slider-navigation .item div.'+index).html('<img src="'+sliderImage+'" />');		
		
		if (jQuery('#slider-navigation .item div.'+index+' img').width() > jQuery('#slider-navigation .item div.'+index+' img').height()) {
			//jQuery('#slider-navigation .item a.'+index+' img').height(75)
			jQuery('#slider-navigation .item div.'+index+' img').attr("height", 75)
			jQuery('#slider-navigation .item div img').removeAttr("width").css('margin', 0);
			
		} else {
			//jQuery('#slider-navigation .item a.'+index+' img').width(75)	
			jQuery('#slider-navigation .item div.'+index+' img').attr("width", 75)
			jQuery('#slider-navigation .item div img').removeAttr("height").css('margin', 0);
		}
				
		imageCount = index + 1;
		
	});
		
	if(imageCount <= 1) {		
		jQuery('#slider-navigation-arrows').css("display", "none");
		
	} else if(imageCount > 6) {
		jQuery("#slider-navigation").scrollable({
				// der Slider hat kein Ende und kein Anfang
				circular: true,			
				// es kann nicht mit der Tastatur navigiert werden
				keyboard: true,			
				speed: 1000,
				next: ".next",
				prev: ".prev",
				api: true
	
	
		});
		
		jQuery('#slider-navigation').scrollableAddClones();
		
		navigationWidth = 7 * 76
		jQuery('#slider-navigation').width(navigationWidth);
	
	} else {
		jQuery('#slider-navigation-arrows a.next').css("display", "none");
		jQuery('#slider-navigation-arrows a.prev').css("display", "none");
		
		navigationWidth = imageCount * 76
		
		jQuery('#slider-navigation').width(navigationWidth);
	}
	
	
	jQuery('#slider-navigation .items div.item div.0').parent('.item').addClass('act');
	
	jQuery('#slider-navigation .items .item div').click(function () {
		
		if (jQuery(this).parent().hasClass('act')) {
			
			if (jQuery('#page-content a#switch').hasClass('close')) {
				
				closeContent();
				hideNavigation();
				
			} else {
			
				openContent();
				showNavigation();
			
			}
			
		} else {
			
			actClass = jQuery(this).attr("class");
		
			jQuery('#slider-navigation .items .act').removeClass('act');
			jQuery('#slider-navigation .items .item div.' + actClass).parent('.item').addClass('act');
					
			jQuery('div#bg-image-container div.slider div.item').each(function (index, domEle){
				
				if (index == actClass) {
					jQuery(this).animate({
						'opacity': 1
					}, 1000 );
					
					jQuery('div#bg-image-container div.slider div.act').animate({
						'opacity': 0
					}, 1000 );
					
					jQuery('div#bg-image-container div.slider div.act').removeClass('act');
					jQuery(this).addClass('act');	
										
				}
			
			});
			
			if (jQuery('#page-content a#switch').hasClass('close')) {
				
				closeContent();
				hideNavigation();
				
			}
			
		}
	
	});
	
	jQuery('#bg-image-container .slider .item').click(function () {
		if (jQuery('#page-content a#switch').hasClass('open')) {
			openContent();
			showNavigation();
		}
	});
			
}

function setContentHeight(){
	otherHeights = 322			
	windowSizeY = jQuery(window).height();
	maxHeight = windowSizeY - otherHeights
	
	if(maxHeight < 50) {
		maxHeight = 50;
	}
	
	jQuery('#content').css({
		'max-height': maxHeight + 'px'
	});
	
	scrollPane();
		
	startCol1Height = jQuery('#start_col_1').height();
	startCol2Height = jQuery('#start_col_2').height();
	mainNavigation = jQuery('#main-navigation').height()+177;
	
	if (startCol1Height > startCol2Height) {
		
		minHeight = mainNavigation + startCol1Height +54;
		
	} else {
		
		minHeight = mainNavigation + startCol2Height +54;
		
	}
	if(minHeight > jQuery(window).height()) {
		
		jQuery('#page').css({
				'height': minHeight + 'px'
		});
		
	} else {
			minHeight = jQuery(window).height();
		jQuery('#page').css({
				'height': minHeight + 'px'
		});		
	}	
}


function toggleContent(){
	
	jQuery('#page-content a#switch').click(function() {
		if (jQuery(this).hasClass('close')) {
			
			closeContent();
			hideNavigation();

		} else {
			
			openContent();
			showNavigation();
			
		}
	});	
}