// JavaScript Document

var ani=new Array();
					  var j=0;
					function Fish(ownName) {
					
		/* .1 */		this.fishType = Math.round(Math.random() * 5) + 1;					// choose fish type (1-3) (question? Where, the first number or the second number)
		/* .2 */		//this.positionX = Math.round(Math.random() * 530);						// choose random start X co-ordinate
		/* .3 */		//this.positionY = Math.round(Math.random() * 425);						// choose random start Y co-ordinate
						var startX=420;
						var startY=30;
		/* .2 */		this.positionX = Math.round(Math.random() * startX);						// choose random start X co-ordinate
		/* .3 */		this.positionY = Math.round(Math.random() * startY);						// choose random start Y co-ordinate

						this.positionZ = Math.round(Math.random() * 1);						
		/* .4 */		while (!(this.directionX = Math.round(Math.random() * 2) - 1));			// choose random X direction (left or right)
		/* .5 */		while (!(this.directionY = Math.round(Math.random() * 2) - 1));			// choose random Y direction (up or down)
		
						
						var obj = document.createElement('DIV')
						document.getElementById('OceanBK').appendChild(obj);
						obj.setAttribute("id",ownName+"div");
						
						obj.style.position="absolute";
						obj.style.left=this.positionX + 'px';
						obj.style.top=this.positionY + 'px';
						obj.style.zIndex=this.positionZ;
						//alert("divid=="+ownName+'div');						
						document.getElementById(ownName+"div").appendChild(this.canvas = document.createElement('img'));
		/* .7 */		this.canvas.style.left = this.positionX + 'px';
		/* .8 */		this.canvas.style.top = this.positionY + 'px';
		
						//setCordinate( this.positionX, this.positionY);

//*****************						
//Added by SDC 020108
//detect iphone
var WebKitDetect = {
        isWebKit : function() {
                return new RegExp(" AppleWebKit/").test(navigator.userAgent);
        },
        isMobile : function() {
                return WebKitDetect.isWebKit() && new RegExp("Mobile/").test(navigator.userAgent);
        },
        mobileDevice : function() {
                if (!WebKitDetect.isMobile()) {
                        return null;
                }
                var fields = new RegExp("(Mozilla/5.0 \\()([^;]+)").exec(navigator.userAgent);
                if (!fields || fields.length < 3) {
                        return null;
                }
                return fields[2];
        }

}; 

if (WebKitDetect.mobileDevice()) {
    //set speed for iphone
	var iphspeed=3;       //set variable for iphone speed fish animation 
	ani[j]=setInterval('window[\'' + ownName + '\'].animate();', (Math.round(Math.random() * 4) + 3) * iphspeed);	// to incrase speed of fish decrese the last value i.e. insted of 5 put 4 or 3 
						//alert(j);
						j++;
			
		}
		else{
		var pcspeed=10;      //set variable for pc speed fish animation 
			//not iphone
	ani[j]=setInterval('window[\'' + ownName + '\'].animate();', (Math.round(Math.random() * 4) + 3) * pcspeed);	// to incrase speed of fish decrese the last value i.e. insted of 5 put 4 or 3 
						//alert(123);
						j++;
			
		}
//end detect

//End Added
//*********************
							
						//ani[j]=setInterval('window[\'' + ownName + '\'].animate();', (Math.round(Math.random() * 4) + 3) * 1);	// to incrase speed of fish decrese the last value i.e. insted of 5 put 4 or 3 
						//alert(j);
						//j++;
		
		/* .. */	}
		/* 10 */	Fish.prototype.animate = FishAnimate;

		/* .. */	function FishAnimate() {

		/* 11 */		if ((newImageName = 'fish' + this.fishType + (this.directionX > 0 ? '_flipped' : '') + '.gif') != this.canvas.src.substr(this.canvas.src.lastIndexOf('/') + 1)) this.canvas.src =newImageName;
						
										
		/* 12 */		xPos = parseInt(this.canvas.style.left, 10) + this.directionX;
		/* 13 */		yPos = parseInt(this.canvas.style.top, 10) + this.directionY;
		/* 13 */		
		/* 14 */		if (xPos > 610 || Math.round(Math.random() * 200) > 199) this.directionX = 0-(Math.round(Math.random()) + 1);
		/* 15 */		if (xPos < -75 || Math.round(Math.random() * 200) > 199) this.directionX = Math.round(Math.random()) + 1;
		/* 16 */		if (yPos > 290 || Math.round(Math.random() * 200) > 199) this.directionY = -1;
		/* 17 */		if (yPos < 10 || Math.round(Math.random() * 200) > 199) this.directionY = 1;
						
		/* 18 */		this.canvas.style.left = xPos + 'px';
		/* 19 */		this.canvas.style.top = yPos + 'px';
						
												
					}
					
					function setCordinate(xid,yid){
					
					//alert("x=="+xid +" y=="+yid);
						var arra = new Array();
						var st,subst
						var i=0
						var mydivs=document.getElementsByTagName("div");
						var cnt=mydivs.length;
						//for( var k=0; k<ani.length;k++)
					//{
						//clearInterval(ani[k]);
					//}
						for (var di=0; di<cnt; di++){
											
							st =mydivs.item(di).id.substr(0,4);
							
							subst=st.substr(0,4);
							if(st=='fish')
							{
								arra[i]=mydivs.item(di).id;
								
								//alert("xid=="+xid +"yid=="+yid);
								clearInterval(ani[i]);
								document.getElementById(arra[i]).style.left = xid + 'px';
								document.getElementById(arra[i]).style.top = yid + 'px';
								//document.getElementById(arra[i]).style.zIndex =1;
								
								//alert(document.getElementById(arra[i]).style.left);
								//alert(document.getElementById(arra[i]).style.top);
								i++;
								
							}
							
						}					
						
						
						
					}
		
		/* .. */	function createFish() {
		
		/* .. */		// The loop count below changes the number of fish
		/* 20 */		for (var loop=0; loop<21; loop++) window['fish' + loop] = new Fish('fish' + loop);
		/* .. */	}
		
		
		function getAbsolutePosition(element) {
 		 var r = { x: element.offsetLeft, y: element.offsetTop };
  		if (element.offsetParent) {
    	var tmp = getAbsolutePosition(element.offsetParent);
  		  r.x += tmp.x;
   		 r.y += tmp.y;
 	 }
  return r;
};
function getRelativeCoordinates(event, reference) {
  var x, y;
  event = event || window.event;
  var el = event.target || event.srcElement;

  if (!window.opera && typeof event.offsetX != 'undefined') {
    // Use offset coordinates and find common offsetParent
    var pos = { x: event.offsetX, y: event.offsetY };

    // Send the coordinates upwards through the offsetParent chain.
    var e = el;
    while (e) {
      e.mouseX = pos.x;
      e.mouseY = pos.y;
      pos.x += e.offsetLeft;
      pos.y += e.offsetTop;
      e = e.offsetParent;
    }

    // Look for the coordinates starting from the reference element.
    var e = reference;
    var offset = { x: 0, y: 0 }
    while (e) {
      if (typeof e.mouseX != 'undefined') {
        x = e.mouseX - offset.x;
        y = e.mouseY - offset.y;
        break;
      }
      offset.x += e.offsetLeft;
      offset.y += e.offsetTop;
      e = e.offsetParent;
    }

    // Reset stored coordinates
    e = el;
    while (e) {
      e.mouseX = undefined;
      e.mouseY = undefined;
      e = e.offsetParent;
    }
  }
  else {
    // Use absolute coordinates
    var pos = getAbsolutePosition(reference);
    x = event.pageX  - pos.x;
    y = event.pageY - pos.y;
  }
  // Subtract distance to middle
  
  return { x: x, y: y };
}

window.onclick = function () {
	  document.getElementById('OceanBK').onmousedown =
	  document.getElementById('Reef').onmousedown =  function (event) {
		var e = event || window.event;
		var pos = getRelativeCoordinates(event, document.getElementById('reference'));
		//var m = document.getElementById('tmp');
    	//m.style.left = pos.x +'px';
   		 //m.style.top = pos.y +'px';
	
	setCordinate(pos.x ,pos.y);
   
  }
}