$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 92;
  var slides = $('#thumnailContainer .thumnail');
  var numberOfSlides = slides.length;

  $('.GallaryContent #thumnailContainer').css('overflow', 'hidden');

  slides
    .wrapAll('<div id="slideInner"></div>')
	.css({
      'float' : 'left',
      'width' : slideWidth
    });

  $('#slideInner').css('width', slideWidth * numberOfSlides);

 /* $('#thumnailContainer')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');*/

  manageControls(currentPosition);

  $('.GallaryContent .control').bind('click', function(){
		currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    	manageControls(currentPosition);
    	
		$('#slideInner').animate({
      		'marginLeft' : slideWidth*(-currentPosition)
    	});
  });

  function manageControls(position){
	  	//count length all thumnail 
	  	var all_length = $("#thumnailContainer").find(".thumnail").length;
		
		if(position==0){ 
			$('.GallaryContent #leftControl').hide();
		} 
		else{ 
			$('.GallaryContent #leftControl').show();
		}
    	if(position==numberOfSlides-1 || currentPosition == (all_length-5) || all_length <= 5){ 
			$('.GallaryContent #rightControl').hide();
		} 
		else{ 
			$('.GallaryContent #rightControl').show();
		}
  }	
  
  
});