/*!
 * Expo Z - Internationale standenbouw - Westmalle - België
 * JavaScript voor selectie menu en verwisselen schermvullende achtergrond
 * 12-12-2011
*/
 
$(function() {
	//the loading image
	var $loader		= $('#st_loading');
	//the ul element 
	var $list		= $('#st_nav');
	//the current image being shown
	var $currImage 	= $('#st_main').children('img:first');
	
	//let's load the current image 
	//and just then display the navigation menu
	$('<img>').load(function(){
		$loader.hide();
		$currImage.fadeIn(3000);
		//slide out the menu
		setTimeout(function(){
			$list.animate({'left':'0px'},300);
		},
		1000);
	}).attr('src',$currImage.attr('src'));
	
	
	//clicking on the menu items (up and down arrow)
	//makes the thumbs div appear, and hides the current 
	//opened menu (if any)
	$list.find('.st_arrow_down').live('click',function(){
		var $this = $(this);
		hideThumbs();
		$this.addClass('st_arrow_up').removeClass('st_arrow_down');
		var $elem = $this.closest('li');
		$elem.addClass('current').animate({'height':'1000px'},200);
		var $thumbs_wrapper = $this.parent().next();
		$thumbs_wrapper.show(200);
	});
	$list.find('.st_arrow_up').live('click',function(){
		var $this = $(this);
		$this.addClass('st_arrow_down').removeClass('st_arrow_up');
		hideThumbs();
	});

	//clicking on a thumb, replaces the large image
	$list.find('.st_thumbs img').bind('click',function(){
		var $this = $(this);
		$loader.show();
		$('<img class="st_preview"/>').load(function(){
			var $this = $(this);
			var $currImage = $('#st_main').children('img:first');
			$this.insertBefore($currImage);
			$loader.hide();
			$currImage.fadeOut(1000,function(){
				$(this).remove();
			});
		})
		.attr('src',$this.attr('alt'));
	})
	.bind('mouseenter',function(){
		$(this).stop().animate({'opacity':'1'});
	})
	.bind('mouseleave',function(){
		$(this).stop().animate({'opacity':'0.5'});
	});
	
	//function to hide the current opened menu
	function hideThumbs(){
		$list.find('li.current')
			 .animate({'height':'50px'},400,function(){
				$(this).removeClass('current');
			 })
			 .find('.kleurbalk, .st_thumbs_wrapper')
			 .hide(200)
			 .andSelf()
			 .find('.st_link span')
			 .addClass('st_arrow_down')
			 .removeClass('st_arrow_up');
	}
});