/* jseyes.js


The classic Xeyes in JavaScript
Written by Pint�r G�bor
Am Stra�acker 34/2/3
Sch�tzen am Gebirge
A-7081, Austria 
Tel: +43 676 4235888, +36 20 4331532
Email: pinter.gabor@freemail.hu
Web: http://www.pic18.eu

Revisions:
  V1.0  2001-10-14  Original release
  V1.1  2001-12-08  NS6.1
  V1.2  2001-12-17  More parameters
  V1.3  2002-08-14  Adjustable speed
  V1.31 2002-08-26  Improved adjustable speed
  V1.4  2010-11-26  IE7, IE8, absolute position


This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 3
of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

http://www.gnu.org/copyleft/gpl.html

For commercial license, and for other professional
JavaScript and Java components please contact the author.





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

This script works with all modern browsers.



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


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

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

The eyes image (img), size (w, h), position (x, y), radius (xr, yr).
  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 };

Other images in this package:
  jseyegreen.gif, jseyebrown.gif,
  jseyegrey.gif, jseyeblack.gif, jseyerainbow.gif.

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

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

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

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



Example: http://www.pic18.eu/en/www/jseyes/

*/




// Defaults
var jseyes= { img:"jseyes.gif", w:150, h:150, link: "http://ghoets68.jw.lt/daftar-isi" };
var jseye1= { img:"jseyeblue.gif", w:21, h:29, x:46,  y:58, xr:7, yr:17 };
var jseye2= { img:"jseyeblue.gif", w:21, h:29, x:102, y:58, xr:7, yr:17 };
var jseyesdeltat= 40; // ms
var jseyesfollow= 100; // %

// Browser detection

// Private global variables
var mouse= { x:0, y:0 };
var follow= { x:0, y:0 };



// 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() {
	follow.x+= (mouse.x-follow.x)*jseyesfollow/100;
	follow.y+= (mouse.y-follow.y)*jseyesfollow/100;
	if (jseyes.o && jseye1.o && jseye2.o && jseyes.o.style) {
		var p= { o:jseyes.o, x:0, y:0 };
		do {
			p.x+= p.o.offsetLeft;
			p.y+= p.o.offsetTop;
			p.o= p.o.offsetParent;
		} while (p.o);
		var d= { x:0, y:0 };
		d.x= follow.x-p.x-jseye1.x;
		d.y= follow.y-p.y-jseye1.y;
		r= Math.sqrt(d.x*d.x/(jseye1.xr*jseye1.xr)+d.y*d.y/(jseye1.yr*jseye1.yr));
		if (r<1) r=1;
		jseye1.o.style.left= (d.x/r+jseye1.x-jseye1.w/2)+"px";
		jseye1.o.style.top=  (d.y/r+jseye1.y-jseye1.h/2)+"px";
		d.x= follow.x-p.x-jseye2.x;
		d.y= follow.y-p.y-jseye2.y;
		r= Math.sqrt(d.x*d.x/(jseye2.xr*jseye2.xr)+d.y*d.y/(jseye2.yr*jseye2.yr));
		if (r<1) r=1;
		jseye2.o.style.left= (d.x/r+jseye2.x-jseye2.w/2)+"px";
		jseye2.o.style.top=  (d.y/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
	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; overflow:visible; "+
			"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; overflow:visible; "+
			"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
	if (document.captureEvents) {
		document.captureEvents(Event.MOUSEMOVE);
	}
	document.onmousemove= mousemove;

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



// Capture mouse position
function mousemove(e) {
	if (!e) var e= window.event;
	if (e.pageX || e.pageY) {
		mouse.x= e.pageX;
		mouse.y= e.pageY;
	} else if (e.clientX || e.clientY) {
		if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
			mouse.x= e.clientX + document.body.scrollLeft;
			mouse.y= e.clientY + document.body.scrollTop;
		} else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
			mouse.x= e.clientX + document.documentElement.scrollLeft;
			mouse.y= e.clientY + document.documentElement.scrollTop;
		} else {
			mouse.x= e.clientX;
			mouse.y= e.clientY;
		}
	} else {
		mouse.x= 0;
		mouse.y= 0;
	}
}