// JavaScript Document

		function head(sId, iX, iY, iWidth, iHeight, sImage, oLeftEye, oRightEye, oContainer, sEyeBgColor){
			this.id = sId;
			this.x = parseInt(iX);
			this.y = parseInt(iY);
			this.width = parseInt(iWidth);
			this.height = parseInt(iHeight);
			this.image = sImage;
			this.container = oContainer;
			this.leftEye = oLeftEye;
			this.rightEye = oRightEye;
			this.update = head_update;
			
			this.leftEye.id = this.id+'_leftEye';
			this.leftEye.myHead = this;
			this.rightEye.id = this.id+'_rightEye';
			this.rightEye.myHead = this;
			this.rightEye.isRightEye = true;

			this.eyeArea = new rectangle(oLeftEye.point.x-oLeftEye.radius(), oLeftEye.point.y-oLeftEye.radius(), (oRightEye.point.x-oLeftEye.point.x)+oRightEye.diameter,  oRightEye.diameter);
			this.eyeArea.x -= this.leftEye.diameter;
			this.eyeArea.width += (this.leftEye.diameter * 2);
			this.eyeArea.y -= this.leftEye.diameter;
			this.eyeArea.height += (this.leftEye.diameter * 2);
			
			var sBgCss = 'background-image:url('+this.image+');';
			if(isIE6()){
				sBgCss = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+this.image+'\');';
			}
			this.container.innerHTML += '<div id="head_'+this.id+'" class="head" style="left:'+this.x+'px; top:'+this.y+'px; width:'+this.width+'px; height:'+this.height+'px;"><div id="face_'+this.id+'" class="face" style="'+sBgCss+' width:'+this.width+'px; height:'+this.height+'px;"></div>'+'<div style="position:absolute; background-color:'+sEyeBgColor+'; z-index:250; top:'+this.eyeArea.y+'px; left:'+this.eyeArea.x+'px; width:'+this.eyeArea.width+'px; height:'+this.eyeArea.height+'px;"></div>'+this.leftEye.getHTML()+this.rightEye.getHTML()+'</div>';
		}
		function head_update(){
			this.leftEye.update();
			this.rightEye.update();
		}
		function eye(iDiameter, sImage, oPoint){
			this.id = '';
			this.diameter = iDiameter;
			this.image = sImage;
			this.isRightEye = false;
			this.point = oPoint;
			this.myHead = null;
			
			this.getHTML = eye_getHTML;
			this.update = eye_update;
			this.radius = eye_radius;
			this.element = eye_element;
			
			this.socket = new rectangle(this.point.x, this.point.y, this.radius(), this.radius());
		}
		function eye_getHTML(){
			return '<div id="'+this.id+'" class="eye" style="width:'+this.diameter+'px; height:'+this.diameter+'px; left:'+(this.point.x-this.radius())+'px; top:'+(this.point.y-this.radius())+'px; background-image:url('+this.image+');'+(this.isRightEye?' background-position:-'+this.diameter+'px 0px;':'')+'"></div>';
		}
		function eye_update(){
				var dDegreesOffset = 0;
				var dDestination = new point(0,0);
				var pRelativePoint = new point(currentPoint.x + this.radius() - this.myHead.x, currentPoint.y + this.radius() - this.myHead.y);
				
				if((pRelativePoint.x-this.radius() > this.myHead.eyeArea.x && pRelativePoint.x-this.radius() < this.myHead.eyeArea.x+this.myHead.eyeArea.width) && (pRelativePoint.y-this.radius() > this.myHead.eyeArea.y && pRelativePoint.y-this.radius() < this.myHead.eyeArea.y+this.myHead.eyeArea.height)){
					this.element().style.left = this.point.x - this.radius() + 'px';
					this.element().style.top = Math.floor(this.point.y - this.radius()) + 'px';
				} else {
					if(pRelativePoint.x < this.socket.x + this.radius()){ //if the cursor is to the left of the eye
						dDegreesOffset = (pRelativePoint.y - (this.socket.y + this.radius())) / ((this.socket.x + this.radius()) - pRelativePoint.x);
						dDegreesOffset = Math.atan(dDegreesOffset);
						dDestination.x = (this.socket.x + this.radius()) - ((this.radius() / 2) * Math.cos(dDegreesOffset));
						dDestination.y = ((this.radius() / 3) * Math.sin(dDegreesOffset)) + (this.socket.y + this.radius());
					}else{ //the cursor is to the right of the eye
						dDegreesOffset = (pRelativePoint.y - (this.socket.y + this.radius())) / (pRelativePoint.x - (this.socket.x + this.radius()));
						dDegreesOffset = Math.atan(dDegreesOffset);
						dDestination.x = ((this.radius() / 2) * Math.cos(dDegreesOffset)) + (this.socket.x + this.radius());
						dDestination.y = ((this.radius() / 3) * Math.sin(dDegreesOffset)) + (this.socket.y + this.radius());
					}
					dDestination.x -= (this.radius());
					dDestination.y -= (this.radius());
	
					this.element().style.left = dDestination.x - this.radius() + 'px';
					this.element().style.top = Math.floor(dDestination.y - this.radius()) + 'px';
				}
		}
		function eye_radius(){
			return this.diameter / 2;
		}
		function eye_element(){
			if(!this._element){this._element = document.getElementById(this.id);}
			return this._element;
		}
		
		function getEventPageCoords(e){
			if (!e) e = window.event;    
			if (typeof e.pageY == 'number'){
				y = e.pageY;
				x = e.pageX;
			}
			else{
				y = (e.clientY) + document.documentElement.scrollTop;
				x = (e.clientX);
			}
			return new point(x, y);
		}
		
		function rectangle(iX, iY, iWidth, iHeight){
			this.x = parseInt(iX);
			this.y = parseInt(iY);
			this.width = parseInt(iWidth);
			this.height = parseInt(iHeight);
		}
		function point(iX, iY){
			this.x = parseInt(iX);
			this.y = parseInt(iY);
		}
		
		var currentPoint = new point(0,0);
		var heads = new Array();

		function updateHeads(e){
			currentPoint = getEventPageCoords(e);
			for(i=0;i<heads.length;i++){
				heads[i].update();
			}
		}
		
		document.onmousemove = updateHeads;
		
		function isIE6(){
			var rv = -1; // Return value assumes failure
			if (navigator.appName == 'Microsoft Internet Explorer'){
				var ua = navigator.userAgent;
				var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
				if (re.exec(ua) != null)
				  rv = parseFloat( RegExp.$1 );
			}
			return (rv == 6.0?true:false);
		}