// SB JQuery

$ = jQuery.noConflict();
$(document).ready(function() {
	
	$('#right_scroll').center();
	$('#left_scroll').center();
	$('#right_scroll').rightx();
	$('#left_scroll').leftx();
	
	//fade content in
	$("body").css("display", "none");
    $("body").fadeIn(1000);
	
	//set the first image to have the portfolio selected class on loading
	$('#carousel_ul li:nth-child(2)').addClass('portfolio-selected');
	
	//move he last list item before the first item. The purpose of this is if the user clicks to slide left he will be able to see the last item.
	$('#carousel_ul li:first').before($('#carousel_ul li:last')); 
	
	
	//when user clicks the image for sliding right        
	$('#right_scroll img').click(function(){ 
		
		//get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) if you add margin then need to + that too.
		var item_width = $('#carousel_ul li').outerWidth();
		
		//calculae the new left indent of the unordered list
		var left_indent = parseInt($('#carousel_ul').css('left')) - item_width;
		
		//update: close item first and change [-] to [+]
		if ( $("#carousel_inner").height() > 150 )
		{	
			$(".portfolio-more").slideUp("slow");
			$(".portfolio-more-btn").text('VIEW MORE [+]');
		}
		
		//make the sliding effect using jquery's anumate function '
		$('#carousel_ul:not(:animated)').animate({'left' : left_indent},500,function(){    
			
			//get the first list item and put it after the last list item (that's how the infinite effects is made) '
			$('#carousel_ul li:last').after($('#carousel_ul li:first')); 
			
			//and get the left indent to the default -210px
			$('#carousel_ul').css({'left' : '-1720px'});
		});
		
		/*fade out images when they're not in the central position*/
		$('#carousel_ul li').removeClass('portfolio-selected');
		$('#carousel_ul li:nth-child(4)').addClass('portfolio-selected');
		$('.portfolio-selected img').fadeTo('fast', 1.0);
		$('#carousel_ul li[class!="portfolio-selected"] img').fadeTo('fast', 0.5);
		 
	});
	
	//when user clicks the image for sliding left
	$('#left_scroll img').click(function(){
		
		
		var item_width = $('#carousel_ul li').outerWidth();
		
		/* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */
		var left_indent = parseInt($('#carousel_ul').css('left')) + item_width;
		
		  //update: close item first and change [-] to [+]
		if ( $("#carousel_inner").height() > 150 )
		{	
			$(".portfolio-more").slideUp("slow");
			$(".portfolio-more-btn").text('VIEW MORE [+]');
		}
		
		$('#carousel_ul:not(:animated)').animate({'left' : left_indent},500,function(){    
		
		/* when sliding to left we are moving the last item before the first list item */            
		$('#carousel_ul li:first').before($('#carousel_ul li:last')); 
		
		/* and again, when we make that change we are setting the left indent of our unordered list to the default -210px */
		$('#carousel_ul').css({'left' : '-1720px'});
		});
		
		/*fade out images when they're not in the central position*/
		$('#carousel_ul li').removeClass('portfolio-selected');
		$('#carousel_ul li:nth-child(2)').addClass('portfolio-selected');
		$('.portfolio-selected img').fadeTo('fast', 1.0);
		$('#carousel_ul li[class!="portfolio-selected"] img').fadeTo('fast', 0.5);
	});
	
	/*portfolio toggles*/
	//get the id of the portfolio button that was clicked (1, 2, 3 etc) and append this to #portfolio-more to make the id of the div to b toggled
	$(".portfolio-more-btn").click(function(){
		var portfoliono = this.id;
		var portfoliomore = '#portfolio-more' + portfoliono;
		var btntext = this.text;
		$(portfoliomore).slideToggle("slow", function(){
			var seemore = '#see-more-' + portfoliono; 
    		$.scrollTo( seemore, {speed:800} );
		});
		if (btntext == 'VIEW MORE [+]')
		{ btntext = 'VIEW LESS [-]';  }
		else
		{ btntext = 'VIEW MORE [+]'; }
		$(this).text(btntext);
		$(this).toggleClass("active"); return false;
	});
	
	/*share toggles*/
	/*share*/
	//toggle the div when the share button is clicked and change the [+]/[-] sign to the correct one
	$("#sb-share-share").click(function(){
		$("#sb-share-share-more").slideToggle("fast");
		if ($("#sb-share-share").text() =='Share [-]')
		{ $("#sb-share-share").text('Share [+]'); }
		else
		{ $("#sb-share-share").text('Share [-]'); }
		$("#sb-share-share").css("background","none");
		$(this).toggleClass("active"); return false;
	});
	//close the div and change the [-] sign back to [+]
	$("#sb-share-share-more-close").click(function(){
		$("#sb-share-share-more").slideToggle("fast");
		$("#sb-share-share").text('Share [+]');
		$("#sb-share-share").css("background","none");
		$(this).toggleClass("active"); return false;
	});
	/*share - bottom of portfolio*/
	//toggle the div when the share button is clicked and change the [+]/[-] sign to the correct one
	$(".share-link").click(function(){
		$("#sb-share-share-more").slideToggle("fast");
		if ($("#sb-share-share").text() =='Share [-]')
		{ $("#sb-share-share").text('Share [+]'); }
		else
		{ $("#sb-share-share").text('Share [-]'); }
		event.preventDefault();
		$.scrollTo( '#top', {speed:800} );
		$("#sb-share-share").css("background-color","#FFFF00");
		$(this).toggleClass("active"); return false;
	});
	/*follow*/
	$("#sb-share-follow").click(function(){
		$("#sb-share-follow-more").slideToggle("fast");
		if ($("#sb-share-follow").text() =='Follow [-]')
		{ $("#sb-share-follow").text('Follow [+]'); }
		else
		{ $("#sb-share-follow").text('Follow [-]'); }
		$(this).toggleClass("active"); return false;
	});
	$("#sb-share-follow-more-close").click(function(){
		$("#sb-share-follow-more").slideToggle("fast");
		$("#sb-share-follow").text('Follow [+]');
		$(this).toggleClass("active"); return false;
	});
	
	/*close project link*/
	$(".close-link").click(function(){
		$(".portfolio-more").slideUp("slow", function(){
    		$.scrollTo( '#top', {speed:800} );
		});
		$(".portfolio-more-btn").text('VIEW MORE [+]');
	});
	
	/*animate the to top link*/
	$('.top-link').click(function(){
    	$.scrollTo( '#top', {speed:800} );
	});
	
	/*Overview Toggle*/
	$("#sb-intro-btn").click(function(){
		$("#overview-panel-inside").fadeIn(500);
		$("#sb-intro-btn").text('We believe that design is about connecting you to your customers [+]');
		$(this).toggleClass("active"); return false;
	});
	
});

//center function
jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
    return this;
}

//funcations to fix x pos of arrows
jQuery.fn.leftx = function () {
	/*this.css("left", ((( $(window).width() - this.width() ) / 2+$(window).scrollLeft()) - 480) + "px");*/
	var gap = (($(window).width() - this.width()) - 880) / 2;
	if ((gap / 2) > 0)
	{
		this.css("left", (gap / 2) + "px");
	}
	else
	{
		this.css("left", 0 + "px");
	}
	return this;
}

jQuery.fn.rightx = function () {
	/*this.css("left", ((( $(window).width() - this.width() ) / 2+$(window).scrollLeft()) + 450) + "px");*/
	var gap = (($(window).width() - this.width()) - 880) / 2;
	if ((gap / 2) > 0)
	{
		this.css("right", (gap / 2) + "px");
	}
	else
	{
		this.css("right", 0 + "px");
	}
	return this;
}

$(window).resize(function() {
	$('#right_scroll').center();
	$('#left_scroll').center();
	$('#right_scroll').rightx();
	$('#left_scroll').leftx();
});

$(window).scroll(function() {
	$('#right_scroll').center();
	$('#left_scroll').center();
});