var timerInterval=null;
$(document).ready(function() {  
	if (!jQuery.support.objectAll) {
		//IE browser
		$(".slideMenuContent").css({'display':'inline'});
		$(".imageSliderBottom").css({'bottom':'-8px'});
	}
	$('#imageSlideshow').css({opacity: 0.0});
	$('#imageSlideshow').css({visibility: 'visible'});
	jQuery.post( "/fileadmin/banners/getbanners.txt",{action:"getImages"},
			    function(data)
					{
	    		    	createSlideshow(data);
				  	}, 
				"json"
			   );
			   
	$('#arrowRight').click(
		function ()
		{
			galleryNext();
			clearInterval(timerInterval);
			timerInterval=setInterval('galleryNext()',10000);  
		}
	);
	$('#arrowLeft').click(
		function ()
		{
			galleryPrevious();
			clearInterval(timerInterval);
			timerInterval=setInterval('galleryNext()',10000);  
		}
	);
	$('.footerMenu li:last').css({'border':'none'});
	
	
});  

function createSlideshow(data)
{

	var path=data.path;
	var container=$("#gallery");
	var pages=$("#slideMenuPages");
	for (var i = 0; i < data.images.length; i++) 
	{
		var number=i+1;
		container.append('<a href="'+data.link[i]+'" alt="'+data.alt[i]+'" ><img src="/fileadmin/banners/'+data.images[i]+'"/></a>');
		pages.append('<a href="#"  class="slideMenuPagesLink">'+number+'</a>');
	}
	
	$('#gallery a:first').addClass('show');
	$("#gallery .show img").load(
	function ()
	{
			$('#imageSlideshow').animate({opacity: 1.0}, 2000);
	}
	);
	var number = $('#slideMenuPages a').eq(0);
	number.addClass('selectedMenuPage');
	
	$('#slideMenuPages a').click(
		function ()
		{
			$('#slideMenuPages .selectedMenuPage').removeClass('selectedMenuPage');
			$(this).addClass('selectedMenuPage');
			//if no IMGs have the show class, grab the first image  
		    var current = ($('#gallery a.show')?  $('#gallery a.show') : $('#gallery a:first'));  
		  
		    //Get next image, if it reached the end of the slideshow, rotate it back to the first image  
			var index=$('#slideMenuPages a').index(this);
		    var next = $('#gallery a').eq(index);
		      
		    //Set the fade in effect for the next image, show class has higher z-index  
		    next.css({opacity: 0.0}) 
		    .css({zIndex: 10000}) 
		    .addClass('show')  
		    .animate({opacity: 1.0}, 2000);  
		  
		    //Hide the current image  
		    current.animate({opacity: 0.0}, 1000)
		    
		  .css({zIndex: 10})  
		    .removeClass('show');  
	
			clearInterval(timerInterval);
			timerInterval=setInterval('galleryNext()',10000);  
		}
	);
    slideShow();
}

function slideShow() {  
    //Set the opacity of all images to 0  
    $('#gallery a').css({opacity: 0.0})  
	.css({zIndex: 10});  
      
    //Get the first image and display it (set it to full opacity)  
    $('#gallery a:first').css({opacity: 1.0})  
     .css({zIndex: 10000});  
	
	$('#slideshowMenu').css({opacity: 0.7});  
      
    //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds  
    timerInterval=setInterval('galleryNext()',10000);  
      
}  
  
function galleryNext() {  

    
    $('#gallery a').css({zIndex: 10});  
      
	//if no IMGs have the show class, grab the first image  
    var current = ($('#gallery a.show')?  $('#gallery a.show') : $('#gallery a:first'));  
  
    //Get next image, if it reached the end of the slideshow, rotate it back to the first image  
    var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));     
      
	markNumber(next);
	  
    //Set the fade in effect for the next image, show class has higher z-index  
    next.css({opacity: 0.0})  
	.css({zIndex: 10000})  
    .addClass('show')  
    .animate({opacity: 1.0}, 2000);  
  
    //Hide the current image  
    current.animate({opacity: 0.0}, 1000).removeClass('show');  
          
}  

function galleryPrevious() {  
      
    
    $('#gallery a').css({zIndex: 10});    
    //if no IMGs have the show class, grab the first image  
    var current = ($('#gallery a.show')?  $('#gallery a.show') : $('#gallery a:last'));  
  
    //Get next image, if it reached the end of the slideshow, rotate it back to the first image  
    var prev = ((current.prev().length) ? ((current.prev().hasClass('caption'))? $('#gallery a:last') :current.prev()) : $('#gallery a:last'));     
      
	markNumber(prev);
	
    //Set the fade in effect for the next image, show class has higher z-index  
    prev.css({opacity: 0.0})  
	.css({zIndex: 10000})
    .addClass('show')  
    .animate({opacity: 1.0}, 2000);  
  
    //Hide the current image  
    current.animate({opacity: 0.0}, 1000).removeClass('show');
          
}  

function markNumber(current)
{
	$('#slideMenuPages .selectedMenuPage').removeClass('selectedMenuPage');
	var index= $('#gallery a').index(current);
    var number = $('#slideMenuPages a').eq(index);
	number.addClass('selectedMenuPage');  
}