// JavaScript Document
/************************************************************************************
This is created by Puchu ...... RentACoder 
For more information please visit : http://www.rentacoder.com/RentACoder/DotNet/SoftwareCoders/ShowBioInfo.aspx?lngAuthorId=7234186
*************************************************************************************/

var globalImageId = 0;
var Orbit = new function()
      {
        var eAnim = document.getElementById('orbit'); // animation element
        var imgs = eAnim.getElementsByTagName('img'); // images to space evenly in a circle
        var il = imgs.length; // cached number of images for speed
        var da = Math.PI * 2 / il; // difference in angle between images
        var ca = 0; // current angle
        var oc = [40,40]; // orbit centre[x,y] (anim width / 2 + anim left, anim height / 2 + anim top)
        var or = 90; // orbit radius
        var os = .15; // orbit speed .02 = slow, .15 = fast (negative for anti-clockwise)
 		var timer ;	
		var prevImgId = 0;
		
		
        function render(imgId) // position all images
        {
			
          for(var i = 0; i < il; i++)
          {
            var ang = i * da + ca; // angle of this image
			 
			
			imgs[i].style.left = Math.cos(ang) * or + oc[0] - imgs[i].width / 2 + 'px'; //set the image top
           	imgs[i].style.top = Math.sin(ang) * or + oc[1] - imgs[i].height / 2 + 'px';	//set the image left
          }
        }
       
		var counter = 0;
        this.animate = function(imgId) //this will create the rotation
        {
		  ca += os;
		  if(counter == 1) //make sure that this loops only for once.
		  {
		  	var imgs = eAnim.getElementsByTagName('img'); 
			var imgPath = imgs[prevImgId].src; //this is the bigger image path
			//var chngePath = imgPath.replace(/_highres/g,""); //this is the smaller image path
			 
			//imgs[prevImgId].src = chngePath; //let's change the source of te orbit image from bigger to smaller one.
			imgs[prevImgId].width = 60;	//set the width for smaller image
			imgs[prevImgId].height = 60;	//set the height for smaller image
			
			imgs[prevImgId].style.marginTop="5px";	//set the top margin for smaller image
			setOnClick(prevImgId); //reset the onclick function
		    imgs[prevImgId].style.cursor="pointer"; //set the cursor
			 counter --;	//reduce the counter to make sure that this loops only once
		  }
		  render(imgId);	// render the images
		  if(!closeEnough(imgId))	// check if the image in question has reached the desired position, if not keep looping
	          timer = setTimeout("Orbit.animate(" + imgId + ")",50);
		  else	// the image has reached the desired position, lets make it big
		  {
			  clearInterval(timer);	 // first clear the loop
			  showTexts(imgId,prevImgId);		// display the corresponding text	
			  counter = 1;  //increase the counter so to mark a image has been changed from small to big
			  prevImgId = imgId;	//just rotate the image id
			  globalImageId = imgId - 1;	//set globalImageId to make sure that when rotating again, next image will get the focus. 
											//this is in case someone has clicked a image and broken the normal flow.
		   }
        }

		//reset the onclick function..need to add a case if a new image is added.
		function setOnClick(prevImgId)
		{
			switch (prevImgId)
			{
			case 0:
			  imgs[prevImgId].onclick= function(){Orbit.animate(0);}
			  break;
			case 1:
			  imgs[prevImgId].onclick=function(){Orbit.animate(1);}
			  break;
			case 2:
			  imgs[prevImgId].onclick=function(){Orbit.animate(2);}
			  break;
			case 3:
			  imgs[prevImgId].onclick=function(){Orbit.animate(3);}
			  break;
			//case 4:
			 // imgs[prevImgId].onclick=function(){Orbit.animate(4);}
			 // break;
			//case 5:
			 // imgs[prevImgId].onclick=function(){Orbit.animate(5);}
			 // break; 
			default:
			  imgs[prevImgId].onclick=Orbit.animate(0);
			}
		}

		/**
		* Funcition to check if the image is close enough to desired location
		**/
		function closeEnough(imgId)
		{
			 
			if(imgId != null && imgId != 'undefined')
			{
				var imgs = eAnim.getElementsByTagName('img'); // images to space evenly in a circle
				//we are asuming the image will be fxed at an agle 30 degree.
				// hence the left co-ordinate imgs[imgId].offsetLeft = center[x] + radius*(cos30)
				//and the top co-ordinate imgs[imgId].offsetTop = center[y] + radius *(sin30)
				 
				// it is impossible to get every image at the exact position of 30 degree. 
				// So let's  give it a buffer..10 pixel is the buffer range here
				if((imgs[imgId].offsetTop < -30 && imgs[imgId].offsetTop > -40 ) && (imgs[imgId].offsetLeft < 95 && imgs[imgId].offsetLeft > 75))
				{
					return true;
				}
				else 
					return false;
			}
			else
				return false;
		}	
		//this.animate(0);
      }

		/**
		* Funcition to display the correcsponding text for the bigger image
		**/
	  function showTexts(imgId,prevImgId)
	  {
	  	  var textDivShow = document.getElementById('textDiv' + imgId); 
		  var textDivHide = document.getElementById('textDiv' + prevImgId); 
		  //alert(imgId + " :: " +  prevImgId)
		 if(imgId == 0 && prevImgId == 0)
		  {
			  textDivShow.style.display="block";
		  }
		  else
		  {
			  textDivShow.style.display="block";
			  textDivHide.style.display="none";
		  }
		  //well i have experienced a weired behavior for the first image only. may be due so problem with the styling. not sure.
		  //so here is the hack
		  if(imgId == 0 )
		  {
				 textDivShow.style.left="180px";
				  textDivShow.style.top="35px";
		  }

		  //let's try to make the image fixed and bigger
		  var eAnim = document.getElementById('orbit'); // animation element
		  var imgs = eAnim.getElementsByTagName('img'); // images to space evenly in a circle
		  
		  var imgPath = imgs[imgId].src;
		  var imgExtn = imgPath.substring(imgPath.lastIndexOf("."),imgPath.length);
		  //var chngePath = imgPath.substring(0,imgPath.lastIndexOf(".")) + "_highres" + imgExtn; //this is the src for bigger image
		 
		  //imgs[imgId].src = chngePath;	//set the src to bigger path
		  imgs[imgId].width = 60;	//set the bigger width
		  imgs[imgId].height = 60;	//set the bigger height
		  //imgs[imgId].style.marginTop="-50px";  //let's lift it a bit a make it look like center aligned
		  imgs[imgId].onclick = null;	//remove the onlcikc event
		  imgs[imgId].style.cursor="default"; //set the cursor to default.
		  clearInterval(autoTimer); //stop the auto timer
		  autoTimer = setTimeout("autoRotate()",15000);//restart the auto timer
	  }
	  
	  /**
	  * this is functiona to rotate the images automatically
	  **/
	  
	  function autoRotate()
	  {
		  var eAnim = document.getElementById('orbit'); // animation element
		  var imgs = eAnim.getElementsByTagName('img'); // images to space evenly in a circle
		  var il = imgs.length;
		  
		  if(globalImageId == -1) //if it has reached the end, let re-set the image id
		  	globalImageId = il - 1;
		  Orbit.animate(globalImageId); // make the animation
		  //globalImageId --;
		  autoTimer = setTimeout("autoRotate()",15000); //this makes sure that this is called after every 15 senconds.
	  }
	  window.onload = autoRotate;