// JavaScript Document
$(function() {
                var d=500;
				var g=500;
                $('#navigation a').each(function(){
                    $(this).stop().animate({
                        'marginTop':'-40px'
                    },d+=150);
                });
				
						
				

                $('#navigation > li').hover(
                function () {
                    $('a',$(this)).stop().animate({
                        'marginTop':'-15px'
                    },200);
                },
                function () {
                    $('a',$(this)).stop().animate({
                        'marginTop':'-40px'
                    },200);
                }
				
				
				
            );
		
		
		
		//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');*/
				var $currImage 	= $('#st_main').children('img:first');
				
				//current thumb's index being viewed
				var current			= -1;

				var $btn_hideNav		= $('#fp_hide');
				var $btn_showNav		= $('#fp_show');
				//make the document scrollable
				//when the the mouse is moved up/down
				//the user will be able to see the full image
				//makeBG_Scrollable();
				
				//let's load the current image 
				//and just then display the navigation menu
				$('<img>').load(function(){
					$loader.hide();
					FullScreenBackground('.st_main img.st_preview');
			        FullScreenBackground("#bgimg"); //scale bg image

					$currImage.fadeIn(1500);
					
					//slide out the menu
					setTimeout(function(){
						$btn_hideNav.stop().animate({'left':'0px'},500);
						$list.animate({'left':'0px'},500);
						FullScreenBackground(this);
					},
					1000);
					
				
				}).attr('src',$currImage.attr('src'));
		
		
		
			//Image scale function

				function FullScreenBackground(theItem){
				var winWidth=$(window).width();
				var winHeight=$(window).height();
				var imageWidth=$(theItem).width();
				var imageHeight=$(theItem).height();
				var picHeight = imageHeight / imageWidth;
				var picWidth = imageWidth / imageHeight;
				if ((winHeight / winWidth) < picHeight) {
				$(theItem).css("width",winWidth);
				$(theItem).css("height",picHeight*winWidth);
				} else {
				$(theItem).css("height",winHeight);
				$(theItem).css("width",picWidth*winHeight);
				};
				$(theItem).css("margin-left",winWidth / 2 - $(theItem).width() / 2);
				$(theItem).css("margin-top",winHeight / 2 - $(theItem).height() / 2);
				}
			
			
			//resize browser window functions

			    $(window).resize(function() {
					FullScreenBackground('.st_main img.st_preview');
			        FullScreenBackground("#bgimg"); //scale bg image
			        $dragger.css("top",0); //reset content scroll
			        $customScrollBox_container.css("top",0);
			       // $customScrollBox.unbind("mousewheel");
			      //CustomScroller();
			    });
		
		
		
			
			
}
);