$(document).ready(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.stop().animate({'left':'0px'},500);
		},
		1000);
		resize();
	}).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 finalW 			= $thumbs.find('img').length * 103;
			$thumbs.css('width',finalW + 'px');
			$thumbs_wrapper.hide();
			//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_link').live('click',function(){
		if($(this).hasClass("abrir")){
			var $this = $(this);
			$this.removeClass("abrir");
			hideThumbs();
			$this.children().addClass('st_arrow_up').removeClass('st_arrow_down');
			var imagens = $this.siblings('div').children('div').children('img');
			var altura = 160+'px';
			var $elem = $this.closest('li');
			$elem.addClass('current').stop().animate({'height':altura},200);
			var $thumbs_wrapper = $this.next();
			$thumbs_wrapper.show(0);
		}else{
			var $this = $(this);
			$this.addClass("abrir");
			$this.children().addClass('st_arrow_down').removeClass('st_arrow_up');
			hideThumbs();
		}
	});

	// abrir contatos
	
	$('#contatos').live('click',function(){
		var $this = $(this);
		if($(this).hasClass("abrir")){
			$this.removeClass("abrir");
			$this.animate({'bottom':'0px'},200);
		}else{
			$this.animate({'bottom':'-41px'},200);
			$this.addClass("abrir");
			
		}
	});
	
	
	//clicking on a thumb, replaces the large image
	$list.find('.st_thumbs img').bind('click',function(){
		$("#descricao").fadeOut(200);
		var $this = $(this);
		$loader.show();
		var descricao = $this.attr('rel');
		$('<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();
			});
			resize();
			
			// descricao;
			
			if(descricao!==""){
				$.ajax({
					url:descricao,
					success:function(data){
						$("#descricao").html(data);
						$("#descricao").fadeIn(data);
					},
					error:function(){
						$("#descricao").fadeOut(200);
					}
				});
			}else{
				$("#descricao").fadeOut(200);
			};
				
		}).attr('src',$this.attr('alt'));
		
		
		
	}).bind('mouseenter',function(){
		$(this).stop().animate({'opacity':'1'});
	}).bind('mouseleave',function(){
		$(this).stop().animate({'opacity':'0.7'});
	});
	
	//function to hide the current opened menu
	function hideThumbs(){
		$list.find('li.current')
			 .stop()
			 .animate({'height':'50px'},400,function(){
				$(this).removeClass('current');
			 })
			 .find('.st_thumbs_wrapper')
			 .fadeOut(200)
			 .andSelf()
			 .find('.st_link span')
			 .addClass('st_arrow_down')
			 .removeClass('st_arrow_up');
	}

	//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.length>0)?lastElem[0].offsetLeft + lastElem.outerWidth() + 2*extra:0;
			var left = (e.pageX - $outer.offset().left) * (containerWidth-divWidth) / divWidth - extra;
			$outer.scrollLeft(left);
		});
	}
	
	$(window).resize(resize);
});
	
function resize(){
	//imagem
	var image = $('img.st_preview');
	if (image.length > 0)
	{
		var originalImageHeight = 1066;
		var originalImageWidth = 1600;
		var stageHeight = $(window).height();
		var stageWidth = $(window).width();
		var scale;
		if (originalImageHeight/originalImageWidth < stageHeight/stageWidth)
		scale = stageHeight/originalImageHeight;
	else
		scale = stageWidth/originalImageWidth;
		var imageHeight = originalImageHeight * scale;
		var imageWidth = originalImageWidth * scale;
		image.css({
			'width': imageWidth,
			'height': imageHeight,
			'top': -(imageHeight - stageHeight)/2,
			'left': -(imageWidth - stageWidth)/2,
		});
	}
}