/* jseyes.js

Usage:
  1. Include this file from the head of your page
  2. Define parameters or accept the defaults
  3. Insert the image


1. Include jseyes.js from the head of your page
Insert the following line into the head of your page:
  <script src="jseyes.js"></script>


2. Define parameters
You can accept the defaults or assign new values to these variables:

jseyes= { img:"jseyes.gif", w:150, h:150, link:"http://www.propix.hu" };
  The main image (img), size (w, h), and onclick link (link).</p>

jseye1= { img:"jseyeblue.gif", w:21, h:29, x:46,  y:58, xr:7, yr:17 };
jseye2= { img:"jseyeblue.gif", w:21, h:29, x:102, y:58, xr:7, yr:17 };
  The eyes image (img), size (w, h), position (x, y), radius (xr, yr).
  Other images in this package:
    jseyegreen.gif, jseyebrown.gif,
    jseyegrey.gif, jseyeblack.gif, jseyerainbow.gif.

jseyesdeltat= 40;
  Refresh rate in ms. You do not normally edit it.

jseyesfollow= 100;
  Mouse trailing speed in percents (1..199). 
  180%=crazy, 100%=fast, 50%=nice, 10%=slow, 5%=sleepy.

4. Insert the image
Call jseyeswr() where you want to see the image:
  <script>
    jseyeswr();
  </script>

Or call jseyeswr(x, y) to show the image at absolute position:
  <script>
    jseyeswr(100,100);
  </script>



Example: http://www.propix.hu/www/jseyes/jseyes.html

*/




// Defaults
var jseyes= { img:"http://media.headwayweb.com/themes/jestmurdermystery_1.0/icon_eyes_portrait.png", w:28, h:22, link: "" };
var jseye1= { img:"http://media.headwayweb.com/themes/jestmurdermystery_1.0/icon_eyes.png", w:3, h:3, x:6,  y:5, xr:1, yr:1 };
var jseye2= { img:"http://media.headwayweb.com/themes/jestmurdermystery_1.0/icon_eyes.png", w:3, h:3, x:22, y:-3, xr:1, yr:1 };
var jseyesdeltat= 40; // ms
var jseyesfollow= 100; // %

// Browser detection

// Private global variables
var browserversion= 0.0;
var browsertype= 0; // 0: unknown; 1:MSIE; 2:NN
var mousex= 0, mousey= 0;
var followx= 0, followy= 0;

// Return true if MSIE or NN detected
function browserdetect() {
  var agt= navigator.userAgent.toLowerCase();
  var appVer= navigator.appVersion.toLowerCase();
  browserversion= parseFloat(appVer);
  var iePos= appVer.indexOf('msie');
  if (iePos!=-1) browserversion= parseFloat(appVer.substring(iePos+5, appVer.indexOf(';',iePos)));
  var nav6Pos = agt.indexOf('netscape6');
  if (nav6Pos!=-1) browserversion= parseFloat(agt.substring(nav6Pos+10))
  browsertype= (iePos!=-1) ? 1 : (agt.indexOf('mozilla')!=-1) ? 2 : 0;
  return(browsertype>0);
}

browserdetect();



// General utils

// Find object by name or id
function jseyesobj(id) {
  var i, x;
  x= document[id];
  if (!x && document.all) x= document.all[id];
  for (i=0; !x && i<document.forms.length; i++) x= document.forms[i][id];
  if (!x && document.getElementById) x= document.getElementById(id);
  return(x);
}


// Move eyes
function jseyesmove() {
  var ex, ey, dx, dy;
  dx= mousex-followx;
  dy= mousey-followy;
  followx+= dx*jseyesfollow/100;
  followy+= dy*jseyesfollow/100;
  if (jseyes.o && jseye1.o && jseye2.o && jseyes.o.style) {
    dx= followx-jseyes.o.offsetLeft-jseye1.x;
    dy= followy-jseyes.o.offsetTop- jseye1.y;
    r= Math.sqrt(dx*dx/(jseye1.xr*jseye1.xr)+dy*dy/(jseye1.yr*jseye1.yr));
    if (r<1) r=1;
    jseye1.o.style.left= (dx/r+jseye1.x-jseye1.w/2)+"px";
    jseye1.o.style.top=  (dy/r+jseye1.y-jseye1.h/2)+"px";
    dx= followx-jseyes.o.offsetLeft-jseye2.x;
    dy= followy-jseyes.o.offsetTop- jseye2.y;
    r= Math.sqrt(dx*dx/(jseye2.xr*jseye2.xr)+dy*dy/(jseye2.yr*jseye2.yr));
    if (r<1) r=1;
    jseye2.o.style.left= (dx/r+jseye2.x-jseye2.w/2)+"px";
    jseye2.o.style.top=  (dy/r+jseye2.y-jseye2.h/2)+"px";
  }
}



// Main
function jseyeswr() {
  var img;
  var x, y, a=false;

  // Relative or abslute position
  if (arguments.length==2) {
    x= arguments[0];
    y= arguments[1];
    a= true;
  }

  // Create image
  if (browsertype>0 && browserversion>=5) {
    img=
      "<div id='jseyeso' style='position:"+
	 (a ? "absolute; left:"+x+"px; top:"+y+"px" : "relative")+
	 "; z-index:5; overflow:hidden; "+
	 "width:"+jseyes.w+"px; height:"+jseyes.h+"px'>\n"+

	 "<div id='jseye1o' style='position:absolute; z-index:6; "+
	   "left:"+(jseye1.x-jseye1.w/2)+"px; top:"+(jseye1.y-jseye1.h/2)+"px; "+
	   "width:"+jseye1.w+"px; height:"+jseye1.h+"px'>\n"+
	   "<img src='"+jseye1.img+"' "+
	     "width='"+jseye1.w+"px' height='"+jseye1.h+"px' "+
	     "onClick=\"location.href='"+jseyes.link+"'\">\n"+
	 "</div>\n"+

	 "<div id='jseye2o' style='position:absolute; z-index:6; "+
	   "left:"+(jseye2.x-jseye2.w/2)+"px; top:"+(jseye2.y-jseye2.h/2)+"px; "+
	   "width:"+jseye2.w+"px; height:"+jseye2.h+"px'>\n"+
	   "<img src='"+jseye2.img+"' "+
	     "width='"+jseye2.w+"px' height='"+jseye2.h+"px' "+
	     "onClick=\"location.href='"+jseyes.link+"'\">\n"+
	 "</div>\n"+

	 "<img src='"+jseyes.img+"' "+
	   "width='"+jseyes.w+"px' height='"+jseyes.h+"px' "+
	   "onClick=\"location.href='"+jseyes.link+"'\">\n"+

       "</div>\n";
    document.write(img);
    jseyes.o= jseyesobj('jseyeso');
    jseye1.o= jseyesobj('jseye1o');
    jseye2.o= jseyesobj('jseye2o');

    // Install capture mouse position handler
    switch (browsertype) {
      case 1:
        document.onmousemove= mousemoveIE;
	break;
      case 2:
        document.captureEvents(Event.MOUSEMOVE);
	document.onmousemove= mousemoveNS;
	break;
    }

    // Animate
    setInterval("jseyesmove()", jseyesdeltat);
  }
}


// Capture mouse position
function mousemoveNS(e) {
  mousex= e.pageX;
  mousey= e.pageY;
  return(true);
}
function mousemoveIE() {
  mousex= window.event.clientX + document.body.scrollLeft;
  mousey= window.event.clientY + document.body.scrollTop;
}