$(document).ready(function(){
	/* 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 */

	$('#thumbs ul li a').click(function(e)
  { /* ========================On a thumbnail click */

			$('li.thumbsItem').removeClass('act').addClass('inact');
			$(this).parent().removeClass('inact').addClass('act');
			
			var pos = $(this).parent().prevAll('.thumbsItem').length;
			/*------------mycreatif*/
      
      scrollpos=pos/totWidth*1000;
      posThumb=-900*scrollpos;
      /*posThumb=parseInt($('#thumbs').css("margin-left").substring(0,$('#thumbs').css('margin-left').indexOf("px")))-100*scrollpos;*/
      
			$('#thumbs').stop().animate({marginLeft:posThumb+'px'},600);
			/*------------*/
			
			$('#slides').stop().animate({marginLeft:-positions[pos]+'px'},600); /* Start the sliding animation */
			
			e.preventDefault(); /* Prevent the default action of the link */
			
	});
	
	$('#thumbs ul li.menuItem:first').addClass('act').siblings().addClass('inact');
	/* On page load, mark the first thumbnail as active */



  $("#gallery").hover(
		function(){
      			        
			$(this).parent().find("span").attr({
				"style": 'display:inline'
			});
			$(this).parent().find("span").animate({opacity: 1, top: "0"}, {queue:false, duration:100});
			$("#goprev").animate({opacity: 1}, {queue:false, duration:100});
			$("#gonext").animate({opacity: 1}, {queue:false, duration:100});
		
    });
		$("#gallery").mouseleave(function(){
			        
			
			$(this).parent().find("span").animate({opacity: 0, top: "0"}, {queue:false, duration:300});
			$("#goprev").animate({opacity: 0.0}, {queue:false, duration:100});
			$("#gonext").animate({opacity: 0.0}, {queue:false, duration:100});
		});

    $('#goprev').click(function(e)
  { /* ========================PREVIOUS */

			
			
      var ps=$('#thumbs').css("margin-left").substring(0,$('#thumbs').css('margin-left').indexOf("px"));
      var slides_margin=$('#slides').css("margin-left").substring(0,$('#slides').css('margin-left').indexOf("px"));
      
      
      ps=-1*Math.round(ps/100);
      var currentpos=0;
			var pos = currentpos;
			
      
      position=Math.round(slides_margin)+920;
			
      if(position<=0)
      {
       if(Math.round(position/920)==position/920)
       {
       $("#thumbs li[class~='act']").prev().addClass('act');
			 $("#thumbs li[class~='act']").next().removeClass('act');
      
       scrollpos=pos/totWidth*900;
       posThumb=-900*scrollpos;
       posThumb=parseInt($('#thumbs').css("margin-left").substring(0,$('#thumbs').css('margin-left').indexOf("px")))+100;
      
			 $('#thumbs').stop().animate({marginLeft:posThumb+'px'},200);
			/*------------*/
			
			 $('#slides').stop().animate({marginLeft:position+'px'},200); /* Start the sliding animation */
			
			 e.preventDefault(); /* Prevent the default action of the link */
			 }
			}
	});

    $('#gonext').click(function(e)
  { /* ========================NEXT */

			
			
      var ps=$('#thumbs').css("margin-left").substring(0,$('#thumbs').css('margin-left').indexOf("px"));
      var slides_margin=$('#slides').css("margin-left").substring(0,$('#slides').css('margin-left').indexOf("px"));
      
      
      ps=-1*Math.round(ps/100);
      var currentpos=0;
			var pos = currentpos;
			position=Math.round(slides_margin)-920;
			
			
			if(Math.round(position/920)==position/920){ // кратная позиция картинки, не в промежут. положении
      if(Math.abs(position)<totWidth)
      {
       //alert('position:'+position+'totwidth:'+totWidth);
       $("#thumbs li[class~='act']").next().addClass('act');
			 $("#thumbs li[class~='act']").prev().removeClass('act');
      
       scrollpos=pos/totWidth*900;
       posThumb=-900*scrollpos;
       posThumb=parseInt($('#thumbs').css("margin-left").substring(0,$('#thumbs').css('margin-left').indexOf("px")))-100;
       
      
			 $('#thumbs').stop().animate({marginLeft:posThumb+'px'},200);
			
			
			 $('#slides').stop().animate({marginLeft:position+'px'},200); /* Start the sliding animation */
			
			 e.preventDefault(); /* Prevent the default action of the link */
       }
      }
      
      
      
			
	});






	
});