From b784a5229b319d7ac6045c2e0172707a8495d9c1 Mon Sep 17 00:00:00 2001
From: Valvin <git@valvin.fr>
Date: Thu, 14 Sep 2017 22:21:22 +0200
Subject: [PATCH] add focus on hover

---
 comicgen.js | 28 ++++++++++++++++++++++++++--
 gege.css    |  7 +++++++
 index.php   |  2 +-
 3 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/comicgen.js b/comicgen.js
index 91562ec..ffb6c1d 100644
--- a/comicgen.js
+++ b/comicgen.js
@@ -67,20 +67,44 @@ d.onmousewheel = function(mw){
 	}
 };
 
+cg.hoverdiv = function(e,divid){
+
+    var left  = e.clientX  + "px";
+    var top  = e.clientY  + "px";
+
+    
+    var div = document.getElementById(divid);
+    div.style.left = left;
+    div.style.top = top;
+
+    $("#"+divid).toggle();
+    return false;
+}
+cg.sourceSwap = function (e) {
+    var img_mini = $(this);
+    var img_id = parseInt(img_mini.data('src-id'));
+    var img_url = toonUrls[img_id];
+    console.log(img_url)
+    $("#bigImg").attr('src','toons/' + img_url);
+    cg.hoverdiv(e,"focusImg")
+}
 cg.buildMinis = function(){
 	var buffer = '';
-	var imgString = "<img src='toons/IMG_URL' class='rc mini' alt='toons'></img>";
+	var imgString = "<img src='toons/IMG_URL' data-src-id='IMG_ID' class='rc mini' alt='toons'></img>";
 	var link = "<a href=\"javascript:cg.createImage('toons/IMG_URL')\">";
 
 	for(var i=0; i < miniUrls.length; i++){
 		buffer += link.replace(/IMG_URL/, toonUrls[i]);
-		buffer += imgString.replace(/IMG_URL/, miniUrls[i]) + '</a>';
+		buffer += imgString.replace(/IMG_URL/, miniUrls[i]).replace(/IMG_ID/, i) + '</a>';
 	}
 
 	lib.append(buffer);
 
 	//lib.append( $('#textTool').clone() );
 	$('#menuContainer').append( $('#instructs').clone() );
+        $(function () {
+          $('img.rc').hover(cg.sourceSwap, cg.sourceSwap);
+        });
 }
 
 cg.buildMinis();
diff --git a/gege.css b/gege.css
index 8643dfb..8c04fc6 100644
--- a/gege.css
+++ b/gege.css
@@ -236,3 +236,10 @@ footer a:hover
 {
 text-decoration: underline;
 }
+
+#focusImg
+{
+  background-color:white;
+  position: fixed;
+
+}
diff --git a/index.php b/index.php
index 155a909..87973c8 100644
--- a/index.php
+++ b/index.php
@@ -9,7 +9,7 @@
 
 <!-- ajout conteneur global -->
 <div id="wrapper">
-
+  <div id="focusImg" style="display:none;"><img id="bigImg"/></div>
 <!-- tableau de bord -->
 
 	<div id="tableauDeBord">