/***********************************************************
	Please find the target divs at the bottom of this page 
	just before the body ends. Value of n should directly
	corresponds to the total no. of divs excluding the
	parent containerDiv. Also hotspot for each div should
	also be specified beforehand. Coordinates of hotspots
	are relative to image not the browser window.
	
	Changes to the formation of this page, i.e. shifting
	this image by any no. of pixel will result in anamolies.
	i.e. hard-coded values in update function would require
	recalculation. However, the coordinates specified in
	accordance with image will need no modification unless
	the size of image changes.
	
	For testing purposes two hotspots have been created,
	you can move the mouse over Rockville or Arlington's top
	most icon. 
***********************************************************/

		var n=6;							// this should correspond to the no. of divs
		var i;								// a temp index variable

		var coordinates = new Array(n);		// array of mouseover small rectangular hotspots within the image

		for (i = 0; i < n; i++)
		{
			coordinates[i] = new Array(4); //[i][0] = x1 , [i][1] = y1 , [i][2] = x2 , [i][3] = y2 -- diagnol coordinates top-left & bottom-right
		}

		coordinates[0][0] = 220;			//must enter these values manually
		coordinates[0][1] = 220;		  
		coordinates[0][2] = 260;
		coordinates[0][3] = 260;
		  
		  
		coordinates[1][0] = 445;
		coordinates[1][1] = 245;		  
		coordinates[1][2] = 465;
		coordinates[1][3] = 270;
		  
		coordinates[2][0] = 467;
		coordinates[2][1] = 265;
		coordinates[2][2] = 485;
		coordinates[2][3] = 285;
		
		coordinates[3][0] = 440;
		coordinates[3][1] = 270;		
		coordinates[3][2] = 458;
		coordinates[3][3] = 290;
		
		coordinates[4][0] = 451;
		coordinates[4][1] = 325;		
		coordinates[4][2] = 471;
		coordinates[4][3] = 345;
		
		coordinates[5][0] = 480;
		coordinates[5][1] = 334;		
		coordinates[5][2] = 500;
		coordinates[5][3] = 354;
		
		/*coordinates[6][0] = ;
		coordinates[6][1] = ;		
		coordinates[6][2] = ;
		coordinates[6][3] = ;
		
		coordinates[7][0] = ;
		coordinates[7][1] = ;		
		coordinates[7][2] = ;
		coordinates[7][3] = ;
		
		coordinates[8][0] = ;
		coordinates[8][1] = ;		
		coordinates[8][2] = ;
		coordinates[8][3] = ;
		
		coordinates[9][0] = ;
		coordinates[9][1] = ;		
		coordinates[9][2] = ;
		coordinates[9][3] = ;
		
		coordinates[][] = ;
		coordinates[][] = ;		
		coordinates[][] = ;
		coordinates[][] = ;*/
		var secs
        var timerID = null
        var timerRunning = false
        var delay = 2000
        var lastDiv = -2;
        
		function init()						//
		{
			//targetImage.onclick = showDiv; // update(event) implied on NS, update(null) implied on IE
			window.onresize= message;
			//InitializeTimer();						
		}

        function InitializeTimer()
        {            
            secs = 1;   // increase or decrease the seconds value to ur liking.
            StopTheClock();
            StartTheTimer();
            //alert("hello");
        }
        
        function StopTheClock()
        {
            if(timerRunning)
                clearTimeout(timerID);
            timerRunning = false;
            //alert("hello1");
        }

        function StartTheTimer()
        {
        //alert("hello2");
            if (secs==0)
            {
                StopTheClock();
                // Here's where you put something useful that's
                // supposed to happen after the allotted time.
                // For example, you could display a message:
                hidePrevDiv(-1);
          //      alert("hello3");
            }
            else
            {
            
                self.status = secs;
                secs = secs - 1;
                timerRunning = true;
                timerID = self.setTimeout("StartTheTimer()", delay);
            //    alert("hello4");
            }
        }
        
        function message()
        {
            hidePrevDiv(-1);
        }
		function getDivID(x,y)
		{
			for (i = 0; i < n; i++)			//check all hotspots
			{
				if(coordinates[i][0] <= x && coordinates[i][2] >= x && coordinates[i][1] <= y && coordinates[i][3] >= y)
				{	
										//boundary check
			        //StopTheTimer();
					return i;
					
				}
			}
			return -1;
//			StartTheTimer();
		}
		
		function noPrevDiv()
		{						
			var divObj = document.getElementById("containerDiv");
			
//			for(i = 0; i < containerDiv.childNodes.length; i++)
			for(i = 0; i < divObj.childNodes.length; i++)
			{

				if (divObj.childNodes[i].nodeType == 1)
				{
					if (containerDiv.childNodes[i].style.visibility == "visible")
						return 0;
				}

			}
			return 1;
		}
		
		function hidePrevDiv(divID)
		{
			for(i = 0; i < containerDiv.childNodes.length; i++)
			{								//hide all divs just incase
				if(i != divID && containerDiv.childNodes[i].nodeType == 1)				//except for the one requested for now
					containerDiv.childNodes[i].style.visibility = "hidden";
			}
		}		

		function showDiv(e, divID) // works on IE6,FF,Moz,Opera7
		{
				hideDivAll();
				
			if ( noPrevDiv())
			{

				var mousex = 0;
				var mousey = 0;
				if (!e)
					var e = window.event;
				if (e)
				{
					if (divID.screenX)
					{
						mousex = divID.screenX;
						mousey = divID.screenY;
					}
					if (e.pageX || e.pageY) // this doesn't work on IE6!! (works on FF,Moz,Opera7)
					{
						mousex = e.pageX;
						mousey = e.pageY;
					}
					else if (e.clientX || e.clientY) // works on IE6,FF,Moz,Opera7
					{ 
						mousex = e.clientX + document.body.scrollLeft;		//adjust mouse for scrolled window
						mousey = e.clientY + document.body.scrollTop;
					}  
				}

				var relX, orgX;
				if(document.body.scrollWidth <= 792)	//Hard-coded value for this particular page only (smallest possible unscrollable width)
				{
					orgX = 36;							//Hard-coded value for this particular page only (the minimum distance from left)
				}
				else									//If body width is greater than minimum unscrollable width then simply consider the image centered
				{
					orgX = window.document.body.clientWidth/2 - targetImage.width/2;
				}

				relX = mousex - orgX;
				  
				var relY, orgY = 215;
				relY = mousey - orgY;

				var div = document.getElementById(divID);
				div.style.left = mousex + 3;// set display position for the block HERE --- coordinates[divID][2] + orgX-90;	//set its top-left corner to bottom-right corner of hotspot
				div.style.top = mousey-20;//coordinates[divID][3] + orgY+1;
				div.style.visibility = "visible";				
			}
		}
		
		function hideDiv(divID)
		{
			var div = document.getElementById(divID);
			div.style.visibility = "hidden";
		}
		
		function hideDivAll() 
		{
			var div = document.getElementById('pDiv1');
			div.style.visibility = "hidden";
			var div = document.getElementById('pDiv2');
			div.style.visibility = "hidden";
			var div = document.getElementById('pDiv3');
			div.style.visibility = "hidden";
			var div = document.getElementById('pDiv4');
			div.style.visibility = "hidden";
			var div = document.getElementById('pDiv5');
			div.style.visibility = "hidden";
			var div = document.getElementById('pDiv6');
			div.style.visibility = "hidden";
			
			}