$(document).ready(function() {  
						   
						   $('html').append("<div class='tooltip' id='tooltip'><img src='../img/triangle.gif' class='triangle' /><span id='tooltip-text'></span></div>");
						   $('#tooltip').hide();
						   $("#slider").slider( { max: 25000, 
												handle: '.slider_handle',
												minValue: 0,
												maxValue: 25,
												step: 100,
												handle: '.handle',
												slide: function(event, ui) {
													$("#budget").val('$'+ui.value);
													}
											   } );
						   
				 $('.grey-version').live('mouseenter', function()	{
											 $(this).next('.color-version').fadeIn(500).css('background-color', '');				
											 });
				 $('.color-version').live('mouseout', function()	{
											 $(this).fadeOut(500);
											 });


		$('.product_features li').hover(function()	{
												var x = $(this).offset().left;
												var y = $(this).offset().top;
												var ystart = y - 75;
												var yfin = ystart - 11;
												var title = $(this).attr('title');
												$('#tooltip-text').text(title);

												$('#tooltip').stop().css({
																	opacity: 1,
																	left: x,
																	top: ystart
																  });
												$('#tooltip').stop().animate({
																	opacity: 1,
																	left: x,
																	top: yfin
																  }, 150).fadeIn(100);
																}, function() {
																	$('#tooltip').fadeOut(200);
																	});

					   
					   $('#bg-interactive').delay(1500).fadeIn(6000);	
					    
						$('#previews').draggable({ axis: 'x', containment: '#preview-container', scrollSensitivity: 15000, scrollSpeed: 4000, /*drag: function(e, ui) {    },*/
												 stop: function() {
												 		var pos = $("#previews").position();
														
						if(pos.left <= 250)						{ var snapTo = -1581; 		var bgNumber = 4; }
						if(pos.left >= 251 && pos.left < 770)	{ var snapTo = -1054; 		var bgNumber = 3; }
						if(pos.left >= 771 && pos.left < 1280) 	{ var snapTo = -527; 		var bgNumber = 2; }
						if(pos.left >= 1281) 					{ var snapTo = 0; 			var bgNumber = 1; }
														
														
														
														$(this).animate( { top: "0px", left: snapTo + 15 + "px" }, 100)
														.animate( { top: "0px", left: snapTo - 15 + "px" }, 100)
														.animate( { top: "0px", left: snapTo + "px" }, 150,
														 function() { $("#ui-impact");
														 $("#clickanddrag").stop(true).stopTime().fadeOut(1000);}
														 
														 );
														/*$('#value').text(pos.left + "px");
														$('#value2').text(snapTo + "px");*/
														
														$('#bg-interactive').html("<img src='img/top_bg_" + bgNumber + ".jpg' />").fadeIn(5000);	
														}
					   });
						
						$('#portfolio-content').hide().load("what-we-have-done-content.html #websites").delay(300).slideDown(1500);
						$('#portfolio-select a:first').addClass('selected');
						
						
						$('#portfolio-select a').click(function() {
							var section = $(this).attr('title');
							$('#portfolio-select a').removeClass('selected');
							$('#portfolio-select a[title=' + section +']').addClass('selected');
							$('#portfolio-content').slideUp(250, function(){
									$('#portfolio-content').load("what-we-have-done-content.html #"+ section, function() {
											$('#portfolio-content').slideDown(500);
											});
									});
						});
						
				//defines where to start and end the bounce
				var bouncefrom = $('.instruction-bounce').css("margin-left").replace("px", "");
				var bounceto = parseFloat(bouncefrom) + 20;
				 $( ".instruction-bounce") .everyTime ( 780, function (){
					 	$(".instruction-bounce") .animate ({marginLeft:'+' + bouncefrom }, 400 ).animate ({marginLeft:'+' + bounceto }, 370 );
				 		});
				 $('#slider').hover(function()	{
											 $(".instruction-bounce").fadeOut(1000);
											 });
				 
				 
     });