$(document).ready(function(){
	
	MM_preloadImages('images/work-menu/item-application-select.gif', 'images/work-menu/item-mobile-select.gif', 'images/showcase/thumb-apps-select.gif','images/showcase/thumb-mobile-select.gif');
	
	/* This code is executed after the DOM has been completely loaded */
	
	var totWidth=0;
	var positions = new Array();
	
	$('#slides .slide').each(function(i){
		
		/* Traverse through all the slides and store their accumulative widths in totWidth */
		
		positions[i]= totWidth;
		totWidth += $(this).width();
		
		/* The positions array contains each slide's commulutative offset from the left part of the container */
		
		if(!$(this).width())
		{
			alert("Please, fill in width & height for all your images!");
			return false;
		}
		
	});
	
	$('#slides').width(totWidth);

	/* Change the cotnainer div's width to the exact width of all the slides combined */

	$('#showcase #menu ul li a').click(function(e){

			/* On a thumbnail click */

			
			/* modif du li actif : act => inact , modif src image en PAS _select */
			var li1 = $('#showcase #menu li.act');
			var src = li1.find('img').attr("src").replace("-select", "");
			li1.removeClass('act').addClass('inact');
			li1.find('img').attr("src", src);
			
			/* modif du li cliqué : l'image est déjà en "select" puisque hover aveant de cliquer */
			var li2 = $(this).parent();
			li2.addClass('act').removeClass('inact');
			
			var pos = $(this).parent().prevAll('.menuItem').length;
			
			$('#slides').stop().animate({marginLeft:-positions[pos]+'px'},650);
			/* Start the sliding animation */	
	
		
			e.preventDefault();
				/* Prevent the default action of the link */
	});
	
	
	$('#showcase #menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
	/* On page load, mark the first thumbnail as active */
	
	
	$("#showcase #menu li")
		.mouseover(function() { 
			var src = $(this).find('img').attr("src");
			if ( $(this).hasClass('inact') ) {
				src = src.replace(".gif", "-select.gif");
				$(this).find('img').attr("src", src);
			}
		})
		.mouseout(function() {
			var src = $(this).find('img').attr("src");
			if ( $(this).hasClass('inact') ) {
				src = src.replace("-select", "");
				$(this).find('img').attr("src", src);
			}
	});
		
	
	/* main menu */
	
	$('.main-menu ul li a').click(function(e){

			var targetId = $(this).parent().attr("title");
			$.scrollTo('#'+targetId, 1000 );
			//$.scrollTo('#'+targetId, 4000, {easing:'elasout'} );
			
			
			e.preventDefault();
				/* Prevent the default action of the link */
	});
		
		
		
		
	/* work menu */
	
	$('#work-menu ul li a').click(function(e){

			/* On a thumbnail click */

			/* modif du li actif : act => inact , modif src image en PAS _select */
			var li1 = $('#work-menu li.act');
			var src = li1.find('img').attr("src").replace("-select", "");
			li1.removeClass('act').addClass('inact');
			li1.find('img').attr("src", src);
			
			/* modif du li cliqué : l'image est déjà en "select" puisque hover aveant de cliquer */
			var li2 = $(this).parent();
			li2.addClass('act').removeClass('inact');
				

			/* hides the old  */
			var idToHide = li1.attr("title");
			/*$('#'+idToHide).css("display","none");*/
			$('#'+idToHide).hide();
			
			/* show the new  */
			var idToShow = li2.attr("title");
			/*$('#'+idToShow).css("display", "block");*/
			$('#'+idToShow).show("slow");
	
		
			e.preventDefault();
				/* Prevent the default action of the link */
	});
	
	
	$('#work-menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
	/* On page load, mark the first thumbnail as active */
	
	
	$("#work-menu li")
		.mouseover(function() { 
			var src = $(this).find('img').attr("src");
			if ( $(this).hasClass('inact') ) {
				src = src.replace(".gif", "-select.gif");
				$(this).find('img').attr("src", src);
			}
		})
		.mouseout(function() {
			var src = $(this).find('img').attr("src");
			if ( $(this).hasClass('inact') ) {
				src = src.replace("-select", "");
				$(this).find('img').attr("src", src);
			}
	});
		



	
});