$(document).ready( function()
	{
	var currentPosition = 0;
	var slides = $('.slide');
	var slideWidth = 119;  					 /* ------------change image size (same size in css)--------------*/
	var totalSlide = slides.length;	
	
	
	// remove scroller 	
	$('#slideCon').css('overflow', 'hidden');
	// wrape all slide	
	slides.wrapAll('<div id="slideInner"></div>');
	$('#slideInner').css( {'float' : 'left', 'width' : slideWidth * totalSlide});
	$(slides).css('float', 'left');	
	
	
	// insert left aero and right aero
	$('#slideContainer').prepend('<span id="left" class="control" > &nbsp; </span> <span id="leftdis" class="controldis"  > &nbsp; </span>')
	$('#slideContainer').append('<span id="right" class="control" > &nbsp; </span> <span id="rightdis" class="controldis" > &nbsp; </span>');
	
			
	
	
	
	manageControl(currentPosition);	
	
	$('.control').click(function()
		{
			currentPosition = ($(this).attr('id') == 'right') ? currentPosition-1 : currentPosition+1;			
			$('#slideInner').animate({'marginLeft': slideWidth * currentPosition});			
			manageControl(currentPosition);			
		});
		
	function manageControl(position)
		{
			if (position == 0)	
				{					
					$('#left').fadeOut("fast");	
					$('#leftdis').fadeIn("slow");	
					$('#leftdis').attr("disabled", true); 
									
				}
			else{
					$('#leftdis').fadeOut("slow");
					$('#left').fadeIn("fast");		
				}
				
			if (position == -(totalSlide)+6 )	/* ------------  slide show imges show  --------------*/
				{				
					$('#right').fadeOut("fast");
					$('#rightdis').fadeIn("slow");
					$('#rightdis').attr("disabled", true); 						
					return false;	
				}
				
			else {
					$('#rightdis').fadeOut("fast");
					$('#right').fadeIn("fast");		
				}		
			
			
			if (totalSlide == 6)	/* ------------  slide show imges show  --------------*/
				{					
					$('#right').fadeOut("fast");
					$('#rightdis').fadeIn("slow");						
				}
			else{
					$('#rightdis').fadeOut("slow");
					$('#right').fadeIn("fast");		
				}
			
			
			}
			
		$("#slideInner img").click( function()
					{
					$('#slideInner').find('img').removeClass('active' );
					$(this).addClass('active');
					var imgPathBig = $(this).attr('src');	
								
					$("#productBigPic").html(' <span> <img src=\''+imgPathBig+'\'> <span>')
					
					});
	
	})