<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Clickdummy Gabriel</title>
	<link rel="stylesheet" href="css/screen.css">
	<script src="js/libs/jquery-1.11.1.min.js"></script>
</head>
<body>

	<header>
		<div class="wrapper">
			<ul class="navMeta">
				<li><a href="#">Bosch United Kingdom</a></li>
				<li><a href="#">Bosch Power Tools</a></li>
				<li><a href="#">Bosch Garden Tools</a></li>
				<li><a href="#">Bosch trade / industry </a></li>
				<li class="last"><a href="#" class="relatedLnk lightbox">Contact</a></li>
			</ul>	
			<img class="logo" src="http://www.bosch-do-it.de/media/media/diy/logos/bosch-logo_gb-en.png">
		</div>
	</header>
	
	<?php 

		$data = json_decode(file_get_contents("data/data.json"));


		foreach ($data as $item) {
			// echo $item->name."<br>";
		}


	?>

	<section>
		
		<a href="clickdummy_2D_Detail.html" class="item">
			<img src="data/pps_7_s/overview/thumb1.png" height="100" width="178">
			<span><b>Lorem Ipsum</b><br>Dolor Seo Decorelum</span>
		</a>
		<a href="clickdummy_2D_Detail.html" class="item">
			<img src="data/pps_7_s/overview/thumb1.png">
			<span><b>Lorem Ipsum</b><br>Dolor Seo Decorelum</span>
		</a>
		<a href="clickdummy_2D_Detail.html" class="item">
			<img src="data/pps_7_s/overview/thumb1.png">
			<span><b>Lorem Ipsum</b><br>Dolor Seo Decorelum</span>
		</a>
		<a href="clickdummy_2D_Detail.html" class="item">
			<img src="data/pps_7_s/overview/thumb1.png">
			<span><b>Lorem Ipsum</b><br>Dolor Seo Decorelum</span>
		</a>
		<a href="clickdummy_2D_Detail.html" class="item">
			<img src="data/pps_7_s/overview/thumb1.png">
			<span><b>Lorem Ipsum</b><br>Dolor Seo Decorelum</span>
		</a>
		<a href="clickdummy_2D_Detail.html" class="item">
			<img src="data/pps_7_s/overview/thumb1.png">
			<span><b>Lorem Ipsum</b><br>Dolor Seo Decorelum</span>
		</a>
		<a href="clickdummy_2D_Detail.html" class="item">
			<img src="data/pps_7_s/overview/thumb1.png">
			<span><b>Lorem Ipsum</b><br>Dolor Seo Decorelum</span>
		</a>
		<a href="clickdummy_2D_Detail.html" class="item">
			<img src="data/pps_7_s/overview/thumb1.png">
			<span><b>Lorem Ipsum</b><br>Dolor Seo Decorelum</span>
		</a>
		<a href="clickdummy_2D_Detail.html" class="item">
			<img src="data/pps_7_s/overview/thumb1.png">
			<span><b>Lorem Ipsum</b><br>Dolor Seo Decorelum</span>
		</a>
		
	</section>






	<script>
	
	var timer = 0;
	var interval;


	$(".item").mouseover(function(index){
		var targetIndex = $(this).index() +1;
		timer = 0;
		loop();

		interval = window.setInterval(function(){
			loop()
		}, 500)

		function loop(){
			timer++
			if(timer > 3) timer = 1;


			$(".item:nth-child("+targetIndex+")")
				.find("img").attr("src", "imgs/thumb"+timer+".png")
		}
	})

	$(".item").mouseout(function(index){
		window.clearInterval(interval);
	})





	</script>


	

	
	
</body>
</html>