// JavaScript Document


            $(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');
				var $goUp 		= $('.btn_overlay');
				
				//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'},500);
					},
					1000);
				}).attr('src',$currImage.attr('src'));
				
				//calculates the width of the div element 
				//where the thumbs are going to be displayed
				buildThumbs();
				
				function buildThumbs(){
					$list.children('li.album').each(function(){
						var $elem 			= $(this);
						var $thumbs_wrapper = $elem.find('.st_thumbs_wrapper');
						var $thumbs 		= $thumbs_wrapper.children(':first');
						//each thumb has 180px and we add 3 of margin
						var imgNumber		= $thumbs.find('img').length - 1;
						var finalW 			= $thumbs.find('img').length * 183;
						var finalWnew		= 0 ;
						var i=0
						for (i=0;i<=imgNumber;i++)
						{
							var $tempImg = $thumbs.find('img').eq(i);
							var imgSrc = $tempImg.attr("src");
							var imgWidthtemp = $tempImg.attr("width");
							var imgWidth = Number(imgWidthtemp);
							//alert( 'i:' + i + ',imgSrc:' + imgSrc + ',imgWidthtemp:'+imgWidthtemp +',imgWidth:'+imgWidth );
							finalWnew = finalWnew + imgWidth;
						}
						
						if (finalWnew !== '' ){
							$thumbs.css('width',finalW + 'px');
						}else {
							$thumbs.css('width',finalW + 'px');
						}
						
						//make this element scrollable
						makeScrollable($thumbs_wrapper,$thumbs);
					});
				}
				
				//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();
					$(".st_navigation").removeClass('makeScrollable');
					$this.addClass('st_arrow_up').removeClass('st_arrow_down');
					buildThumbs();
					var $elem = $this.closest('li');
					$elem.addClass('current').animate({'height':'152px'},200);
					var $thumbs_wrapper = $this.parent().next();
					$thumbs_wrapper.show(200);
				});
				
				$list.find('.st_link cufon').live('click',function(){
					var $this = $(this);
					hideThumbs();
					var $thumbs = $this.parents('li').find('div.st_wrapper');
					var displayer = $thumbs.css('display');
					//alert('thumbs:' + displayer  );
					if ( displayer == 'none' ){
						$(".st_navigation").removeClass('makeScrollable');
						$this.next(".st_arrow_down").addClass('st_arrow_up').removeClass('st_arrow_down');
						buildThumbs();
						var $elem = $this.closest('li');
						$elem.addClass('current').animate({'height':'152px'},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();
				});
				//
				var eventtimes = null;
				$('.st_thumbs_wrapper').bind('mouseleave', function() {
					if ( $('li.current').length >0) {
						eventtimes = setTimeout(function(){
							hideThumbs();
						},500);
					}
				}).bind('mouseenter',function(){
					if(eventtimes){
                    	clearTimeout(eventtimes);
            		}
				})

				//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(2000,function(){
							$(this).remove();
						});
					}).attr('src',$this.attr('alt'));
				}).bind('mouseenter',function(){
					$(this).stop().animate({'opacity':'1'});
				}).bind('mouseleave',function(){
					$(this).stop().animate({'opacity':'0.7'});
				});
				
				//
				//ratio about img with page

				$goUp.unbind('mousemove').bind('mousemove',function(e){
					var windowHeight	= $(window).height();
					var fullBgImgHeight = $('img.st_preview').height();
					var fullBgImgratio 	= windowHeight / fullBgImgHeight;
					//alert('windowHeight:' + windowHeight + ', fullBgImgHeight:' + fullBgImgHeight + ', fullBgImgratio:' + fullBgImgratio );
					if ( fullBgImgratio < 0.76 ) {
						var top = (e.pageY - $(document).scrollTop()/2) ;
						$(document).scrollTop(top);
					}
				});
				//function to hide the current opened menu
				function hideThumbs(){
					$list.find('li.current')
						 .animate({'height':'32px'},400,function(){
							$(this).removeClass('current');
						 })
						 .find('.st_thumbs_wrapper')
						 .hide(200)
						 .andSelf()
						 .find('.st_link span')
						 .addClass('st_arrow_down')
						 .removeClass('st_arrow_up');
					$(".st_navigation").addClass('makeScrollable');
				}

				//makes the thumbs div scrollable
				//on mouse move the div scrolls automatically
				function makeScrollable($outer, $inner){
					var extra 			= 800;
					//Get menu width
					var divWidth = $outer.width();
					//Remove scrollbars
					$outer.css({
						overflow: 'hidden'
					});
					//Find last image in container
					var lastElem = $inner.find('img:last');
					$outer.scrollLeft(0);
					//When user move mouse over menu
					$outer.unbind('mousemove').bind('mousemove',function(e){
						var containerWidth = lastElem[0].offsetLeft + lastElem.outerWidth() + 2*extra;
						var left = (e.pageX - $outer.offset().left) * (containerWidth-divWidth) / divWidth - extra;
						$outer.scrollLeft(left);
					});
				}
            });