$(document).ready(function() {
	
	
	$('.bg').fadeIn(1000);
	
	$('#nav').delay(1000).animate({ left: 0}, 600, 'easeInOutQuad', function() {
			$('#logo').animate({ top: 15}, 500, 'easeInOutQuad', function()  {
				$('.social').fadeIn(500);
			});
	});
	
	$('.social').hover(function() {
		$(this).fadeTo(500, 0.73);
	}, function() {
		$(this).fadeTo(500, 1.0);
	});

	$('#street-link').click(function() {
		$('#street-team').slideDown(700, 'easeInCubic', function() {
			$('#who-we-are').slideUp(700, 'easeInCubic');
			$('#pricing').slideUp(700, 'easeInCubic');
			$('#contact').slideUp(700, 'easeInCubic');
		});
	});
	
	$('#who').click(function() {
		$('#who-we-are').slideDown(700, 'easeInCubic', function() {
			$('#contact').slideUp(700, 'easeInCubic');
			$('#pricing').slideUp(700, 'easeInCubic');
		});
	});
	
	$('#pricing-link').click(function() {
		$('#pricing').slideDown(700, 'easeInCubic', function() {
			$('#who-we-are').slideUp(700, 'easeInCubic');
			$('#contact').slideUp(700, 'easeInCubic');
		});
	});
	
	$('#contact-link').click(function() {
		$('#contact').slideDown(700, 'easeInCubic', function() {
			$('#who-we-are').slideUp(700, 'easeInCubic');
			$('#street-team').slideUp(700, 'easeInCubic');
		});
	});

	$('#info').click(function() {
		$(this).children('ul').slideToggle(600);
	});
	
	$('#portfolio').click(function() {
		startSlideshow();
	});
	
});



function startSlideshow() {
				//the loading image
				$('#street-team').slideUp(700, 'easeInCubic');
				$('#who-we-are').slideUp(700, 'easeInCubic');
				$('#pricing').slideUp(700, 'easeInCubic');
				$('#contact').slideUp(700, 'easeInCubic');
			//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'},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 finalW 			= $thumbs.find('img').length * 103;
						$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();
					$this.addClass('st_arrow_up').removeClass('st_arrow_down');
					var $elem = $this.closest('li');
					$elem.addClass('current').animate({'height':'100px'},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(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.5'});
				});
				
				//function to hide the current opened menu
				function hideThumbs(){
					$list.find('li.current')
						 .animate({'height':'50px'},400,function(){
							$(this).removeClass('current');
						 })
						 .find('.st_thumbs_wrapper')
						 .hide(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[0].offsetLeft + lastElem.outerWidth() + 2*extra;
						var left = (e.pageX - $outer.offset().left) * (containerWidth-divWidth) / divWidth - extra;
						$outer.scrollLeft(left);
					});
				}
}