// JavaScript Document
<!-- jscript thumbnail homepage bawah -->

$(document).ready(function(){

//Larger thumbnail preview 


$(".thumb1").hover(function() {
	$(this).css({'z-index' : '10'});
	$(this).find('img').addClass("hover").stop().animate({
			top: '50%', left: '50%', width: '130px', height: '58px'}, 200);
	} , function() {
	$(this).css({'z-index' : '0'});
	$(this).find('img').removeClass("hover").stop().animate({
			marginTop: '0', marginLeft: '0', top: '0', left: '0', width: '116px', height: '52px', padding: '5px'}, 400);
});
$(".thumb2").hover(function() {
	$(this).css({'z-index' : '10'});
	$(this).find('img').addClass("hover").stop().animate({
			top: '50%', left: '50%', width: '70px', height: '92'}, 200);
	} , function() {
	$(this).css({'z-index' : '0'});
	$(this).find('img').removeClass("hover").stop().animate({
			marginTop: '0', marginLeft: '0', top: '0', left: '0', width: '55px', height: '73px', padding: '5px'}, 400);
});
$(".thumb3").hover(function() {
	$(this).css({'z-index' : '10'});
	$(this).find('img').addClass("hover").stop().animate({
			top: '50%', left: '50%', width: '138px', height: '118px'}, 200);
	} , function() {
	$(this).css({'z-index' : '0'});
	$(this).find('img').removeClass("hover").stop().animate({
			marginTop: '0', marginLeft: '0', top: '0', left: '0', width: '123px', height: '105px', padding: '5px'}, 400);
});
$(".thumb4").hover(function() {
	$(this).css({'z-index' : '10'});
	$(this).find('img').addClass("hover").stop().animate({
			top: '50%', left: '50%', width: '99px', height: '84'}, 200);
	} , function() {
	$(this).css({'z-index' : '0'});
	$(this).find('img').removeClass("hover").stop().animate({
			marginTop: '0', marginLeft: '0', top: '0', left: '0', width: '84px', height: '72px', padding: '5px'}, 400);
});
$(".thumb5").hover(function() {
	$(this).css({'z-index' : '10'});
	$(this).find('img').addClass("hover").stop().animate({
			top: '50%', left: '50%', width: '227px', height: '120px'}, 200);
	} , function() {
	$(this).css({'z-index' : '0'});
	$(this).find('img').removeClass("hover").stop().animate({
			marginTop: '0', marginLeft: '0', top: '0', left: '0', width: '212px', height: '112px', padding: '5px'}, 400);
});
$(".thumb6").hover(function() {
	$(this).css({'z-index' : '10'});
	$(this).find('img').addClass("hover").stop().animate({
			top: '50%', left: '50%', width: '87px', height: '283'}, 200);
	} , function() {
	$(this).css({'z-index' : '0'});
	$(this).find('img').removeClass("hover").stop().animate({
			marginTop: '0', marginLeft: '0', top: '0', left: '0', width: '72px', height: '234px', padding: '5px'}, 400);
});
$(".thumb7").hover(function() {
	$(this).css({'z-index' : '10'});
	$(this).find('img').addClass("hover").stop().animate({
			top: '50%', left: '50%', width: '142px', height: '130px'}, 200);
	} , function() {
	$(this).css({'z-index' : '0'});
	$(this).find('img').removeClass("hover").stop().animate({
			marginTop: '0', marginLeft: '0', top: '0', left: '0', width: '120px', height: '110px', padding: '5px'}, 400);
});
$(".thumb8").hover(function() {
	$(this).css({'z-index' : '10'});
	$(this).find('img').addClass("hover").stop().animate({
			top: '50%', left: '50%', width: '71px', height: '89'}, 200);
	} , function() {
	$(this).css({'z-index' : '0'});
	$(this).find('img').removeClass("hover").stop().animate({
			marginTop: '0', marginLeft: '0', top: '0', left: '0', width: '56px', height: '74px', padding: '5px'}, 400);
});
$(".thumb9").hover(function() {
	$(this).css({'z-index' : '10'});
	$(this).find('img').addClass("hover").stop().animate({
			top: '50%', left: '50%', width: '97px', height: '83px'}, 200);
	} , function() {
	$(this).css({'z-index' : '0'});
	$(this).find('img').removeClass("hover").stop().animate({
			marginTop: '0', marginLeft: '0', top: '0', left: '0', width: '82px', height: '71px', padding: '5px'}, 400);
});
$(".thumb10").hover(function() {
	$(this).css({'z-index' : '10'});
	$(this).find('img').addClass("hover").stop().animate({
			top: '50%', left: '50%', width: '183px', height: '114'}, 200);
	} , function() {
	$(this).css({'z-index' : '0'});
	$(this).find('img').removeClass("hover").stop().animate({
			marginTop: '0', marginLeft: '0', top: '0', left: '0', width: '168px', height: '99px', padding: '5px'}, 400);
});
$(".thumb11").hover(function() {
	$(this).css({'z-index' : '10'});
	$(this).find('img').addClass("hover").stop().animate({
			top: '50%', left: '50%', width: '89px', height: '75'}, 200);
	} , function() {
	$(this).css({'z-index' : '0'});
	$(this).find('img').removeClass("hover").stop().animate({
			marginTop: '0', marginLeft: '0', top: '0', left: '0', width: '74px', height: '60px', padding: '5px'}, 400);
});
$(".thumb12").hover(function() {
	$(this).css({'z-index' : '10'});
	$(this).find('img').addClass("hover").stop().animate({
			top: '50%', left: '50%', width: '94px', height: '101'}, 200);
	} , function() {
	$(this).css({'z-index' : '0'});
	$(this).find('img').removeClass("hover").stop().animate({
			marginTop: '0', marginLeft: '0', top: '0', left: '0', width: '79px', height: '86px', padding: '5px'}, 400);
});

//Swap Image on Click
	$(".thumb1 a").click(function() {
		$(".info_prod1").css({ 'visibility': 'visible' });
		$(".info_prod2").css({ 'visibility': 'hidden' });
		$(".info_prod3").css({ 'visibility': 'hidden' });
		$(".info_prod4").css({ 'visibility': 'hidden' });
		$(".info_prod5").css({ 'visibility': 'hidden' });
		$(".info_prod6").css({ 'visibility': 'hidden' });
		$(".info_prod7").css({ 'visibility': 'hidden' });
		$(".info_prod8").css({ 'visibility': 'hidden' });
		$(".info_prod9").css({ 'visibility': 'hidden' });
		$(".info_prod10").css({ 'visibility': 'hidden' });
		$(".info_prod11").css({ 'visibility': 'hidden' });	
		$(".info_prod12").css({ 'visibility': 'hidden' });
	});
		$(".thumb2 a").click(function() {
		$(".info_prod2").css({ 'visibility': 'visible' });
		$(".info_prod1").css({ 'visibility': 'hidden' });
		$(".info_prod3").css({ 'visibility': 'hidden' });
		$(".info_prod4").css({ 'visibility': 'hidden' });
		$(".info_prod5").css({ 'visibility': 'hidden' });
		$(".info_prod6").css({ 'visibility': 'hidden' });
		$(".info_prod7").css({ 'visibility': 'hidden' });
		$(".info_prod8").css({ 'visibility': 'hidden' });
		$(".info_prod9").css({ 'visibility': 'hidden' });
		$(".info_prod10").css({ 'visibility': 'hidden' });
		$(".info_prod11").css({ 'visibility': 'hidden' });
		$(".info_prod12").css({ 'visibility': 'hidden' });
	});
	$(".thumb3 a").click(function() {
		$(".info_prod3").css({ 'visibility': 'visible' });
		$(".info_prod1").css({ 'visibility': 'hidden' });
		$(".info_prod2").css({ 'visibility': 'hidden' });
		$(".info_prod4").css({ 'visibility': 'hidden' });
		$(".info_prod5").css({ 'visibility': 'hidden' });
		$(".info_prod6").css({ 'visibility': 'hidden' });
		$(".info_prod7").css({ 'visibility': 'hidden' });
		$(".info_prod8").css({ 'visibility': 'hidden' });
		$(".info_prod9").css({ 'visibility': 'hidden' });
		$(".info_prod10").css({ 'visibility': 'hidden' });
		$(".info_prod11").css({ 'visibility': 'hidden' });
		$(".info_prod12").css({ 'visibility': 'hidden' });
	});
	$(".thumb4 a").click(function() {
		$(".info_prod4").css({ 'visibility': 'visible' });
		$(".info_prod1").css({ 'visibility': 'hidden' });
		$(".info_prod2").css({ 'visibility': 'hidden' });
		$(".info_prod3").css({ 'visibility': 'hidden' });
		$(".info_prod5").css({ 'visibility': 'hidden' });
		$(".info_prod6").css({ 'visibility': 'hidden' });
		$(".info_prod7").css({ 'visibility': 'hidden' });
		$(".info_prod8").css({ 'visibility': 'hidden' });
		$(".info_prod9").css({ 'visibility': 'hidden' });
		$(".info_prod10").css({ 'visibility': 'hidden' });
		$(".info_prod11").css({ 'visibility': 'hidden' });
		$(".info_prod12").css({ 'visibility': 'hidden' });
	});
	$(".thumb5 a").click(function() {
		$(".info_prod5").css({ 'visibility': 'visible' });
		$(".info_prod1").css({ 'visibility': 'hidden' });
		$(".info_prod2").css({ 'visibility': 'hidden' });
		$(".info_prod3").css({ 'visibility': 'hidden' });	
		$(".info_prod4").css({ 'visibility': 'hidden' });
		$(".info_prod6").css({ 'visibility': 'hidden' });
		$(".info_prod7").css({ 'visibility': 'hidden' });
		$(".info_prod8").css({ 'visibility': 'hidden' });
		$(".info_prod9").css({ 'visibility': 'hidden' });
		$(".info_prod10").css({ 'visibility': 'hidden' });
		$(".info_prod11").css({ 'visibility': 'hidden' });
		$(".info_prod12").css({ 'visibility': 'hidden' });
	});
	$(".thumb6 a").click(function() {
		$(".info_prod6").css({ 'visibility': 'visible' });
		$(".info_prod1").css({ 'visibility': 'hidden' });
		$(".info_prod2").css({ 'visibility': 'hidden' });
		$(".info_prod3").css({ 'visibility': 'hidden' });	
		$(".info_prod4").css({ 'visibility': 'hidden' });
		$(".info_prod5").css({ 'visibility': 'hidden' });
		$(".info_prod7").css({ 'visibility': 'hidden' });
		$(".info_prod8").css({ 'visibility': 'hidden' });
		$(".info_prod9").css({ 'visibility': 'hidden' });
		$(".info_prod10").css({ 'visibility': 'hidden' });
		$(".info_prod11").css({ 'visibility': 'hidden' });
		$(".info_prod12").css({ 'visibility': 'hidden' });
	});
	$(".thumb7 a").click(function() {
		$(".info_prod7").css({ 'visibility': 'visible' });
		$(".info_prod1").css({ 'visibility': 'hidden' });
		$(".info_prod2").css({ 'visibility': 'hidden' });
		$(".info_prod3").css({ 'visibility': 'hidden' });	
		$(".info_prod4").css({ 'visibility': 'hidden' });
		$(".info_prod5").css({ 'visibility': 'hidden' });
		$(".info_prod6").css({ 'visibility': 'hidden' });
		$(".info_prod8").css({ 'visibility': 'hidden' });
		$(".info_prod9").css({ 'visibility': 'hidden' });
		$(".info_prod10").css({ 'visibility': 'hidden' });
		$(".info_prod11").css({ 'visibility': 'hidden' });
		$(".info_prod12").css({ 'visibility': 'hidden' });
	});
	$(".thumb8 a").click(function() {
		$(".info_prod8").css({ 'visibility': 'visible' });
		$(".info_prod1").css({ 'visibility': 'hidden' });
		$(".info_prod2").css({ 'visibility': 'hidden' });
		$(".info_prod3").css({ 'visibility': 'hidden' });	
		$(".info_prod4").css({ 'visibility': 'hidden' });
		$(".info_prod5").css({ 'visibility': 'hidden' });
		$(".info_prod6").css({ 'visibility': 'hidden' });
		$(".info_prod7").css({ 'visibility': 'hidden' });
		$(".info_prod9").css({ 'visibility': 'hidden' });
		$(".info_prod10").css({ 'visibility': 'hidden' });
		$(".info_prod11").css({ 'visibility': 'hidden' });
		$(".info_prod12").css({ 'visibility': 'hidden' });
	});
	$(".thumb9 a").click(function() {
		$(".info_prod9").css({ 'visibility': 'visible' });
		$(".info_prod1").css({ 'visibility': 'hidden' });
		$(".info_prod2").css({ 'visibility': 'hidden' });
		$(".info_prod3").css({ 'visibility': 'hidden' });	
		$(".info_prod4").css({ 'visibility': 'hidden' });
		$(".info_prod5").css({ 'visibility': 'hidden' });
		$(".info_prod6").css({ 'visibility': 'hidden' });
		$(".info_prod7").css({ 'visibility': 'hidden' });
		$(".info_prod8").css({ 'visibility': 'hidden' });
		$(".info_prod10").css({ 'visibility': 'hidden' });
		$(".info_prod11").css({ 'visibility': 'hidden' });
		$(".info_prod12").css({ 'visibility': 'hidden' });
	});
	$(".thumb10 a").click(function() {
		$(".info_prod10").css({ 'visibility': 'visible' });
		$(".info_prod1").css({ 'visibility': 'hidden' });
		$(".info_prod2").css({ 'visibility': 'hidden' });
		$(".info_prod3").css({ 'visibility': 'hidden' });	
		$(".info_prod4").css({ 'visibility': 'hidden' });
		$(".info_prod5").css({ 'visibility': 'hidden' });
		$(".info_prod6").css({ 'visibility': 'hidden' });
		$(".info_prod7").css({ 'visibility': 'hidden' });
		$(".info_prod8").css({ 'visibility': 'hidden' });
		$(".info_prod9").css({ 'visibility': 'hidden' });
		$(".info_prod11").css({ 'visibility': 'hidden' });
		$(".info_prod12").css({ 'visibility': 'hidden' });
	});
	$(".thumb11 a").click(function() {
		$(".info_prod11").css({ 'visibility': 'visible' });
		$(".info_prod1").css({ 'visibility': 'hidden' });
		$(".info_prod2").css({ 'visibility': 'hidden' });
		$(".info_prod3").css({ 'visibility': 'hidden' });	
		$(".info_prod4").css({ 'visibility': 'hidden' });
		$(".info_prod5").css({ 'visibility': 'hidden' });
		$(".info_prod6").css({ 'visibility': 'hidden' });
		$(".info_prod7").css({ 'visibility': 'hidden' });
		$(".info_prod8").css({ 'visibility': 'hidden' });
		$(".info_prod9").css({ 'visibility': 'hidden' });
		$(".info_prod10").css({ 'visibility': 'hidden' });
		$(".info_prod12").css({ 'visibility': 'hidden' });
	});
 $(".thumb12 a").click(function() {
		$(".info_prod12").css({ 'visibility': 'visible' });
		$(".info_prod1").css({ 'visibility': 'hidden' });
		$(".info_prod2").css({ 'visibility': 'hidden' });
		$(".info_prod3").css({ 'visibility': 'hidden' });	
		$(".info_prod4").css({ 'visibility': 'hidden' });
		$(".info_prod5").css({ 'visibility': 'hidden' });
		$(".info_prod6").css({ 'visibility': 'hidden' });
		$(".info_prod7").css({ 'visibility': 'hidden' });
		$(".info_prod8").css({ 'visibility': 'hidden' });
		$(".info_prod9").css({ 'visibility': 'hidden' });
		$(".info_prod10").css({ 'visibility': 'hidden' });
		$(".info_prod11").css({ 'visibility': 'hidden' });
	});
 
		$(".get_img_5").click(function() {
			$(".top_a").css({ 'visibility': 'visible' });
			$(".top_b").css({ 'visibility': 'hidden' });
				
		});
		
		$(".tmbl_a").click(function() {
			$(".top_b").css({ 'visibility': 'hidden' });
			$(".top_a").css({ 'visibility': 'visible' });
				
		});
		
		$(".tmbl_b").click(function() {
			$(".top_b").css({ 'visibility': 'visible' });
			$(".top_a").css({ 'visibility': 'hidden' });
				
		});
		
		
		
		
		$(".get_img_2").click(function() {
			$(".top_c").css({ 'visibility': 'visible' });
			$(".top_d").css({ 'visibility': 'hidden' });
			
		});
		
		$(".tmbl_c").click(function() {
			$(".top_d").css({ 'visibility': 'hidden' });
			$(".top_c").css({ 'visibility': 'visible' });
				
		});
		
		$(".tmbl_d").click(function() {
			$(".top_d").css({ 'visibility': 'visible' });
			$(".top_c").css({ 'visibility': 'hidden' });
				
		});
		
	 
 		$(".get_img_4").click(function() {
			$(".top_e").css({ 'visibility': 'visible' });
			$(".top_f").css({ 'visibility': 'hidden' });
				
		});
		
		$(".tmbl_e").click(function() {
			$(".top_f").css({ 'visibility': 'hidden' });
			$(".top_e").css({ 'visibility': 'visible' });
				
		});
		
		$(".tmbl_f").click(function() {
			$(".top_f").css({ 'visibility': 'visible' });
			$(".top_e").css({ 'visibility': 'hidden' });
				
		});
 
 		
		
		$(".get_img_7").click(function() {
			$(".top_g").css({ 'visibility': 'visible' });
			$(".top_h").css({ 'visibility': 'hidden' });
				
		});
		
		$(".tmbl_g").click(function() {
			$(".top_h").css({ 'visibility': 'hidden' });
			$(".top_g").css({ 'visibility': 'visible' });
				
		});
		
		$(".tmbl_h").click(function() {
			$(".top_h").css({ 'visibility': 'visible' });
			$(".top_g").css({ 'visibility': 'hidden' });
				
		});
		
		
		$(".get_img_8").click(function() {
			$(".top_i").css({ 'visibility': 'visible' });
			$(".top_j").css({ 'visibility': 'hidden' });
				
		});
		
		$(".tmbl_i").click(function() {
			$(".top_j").css({ 'visibility': 'hidden' });
			$(".top_i").css({ 'visibility': 'visible' });
				
		});
		
		$(".tmbl_j").click(function() {
			$(".top_j").css({ 'visibility': 'visible' });
			$(".top_i").css({ 'visibility': 'hidden' });
				
		});
		
 
});