var scroll_timer;
var t1;	
window.onload=InitializePage;

function InitializePage()
{ 
  	var index;
	if (ImageArray!=null)
	{
	   for (index=0; index<ImageArray.length; index++)
	   {
		  TDElement=document.createElement("TD");
		  TDElement.innerHTML= "<img border='0' id='" + (index +1) + "' src='Images/"+ImageArray[index]+"' onMouseOver='DisplayImageInfo(event)' onmouseout='t1.Hide(event)'>"
		  TDElement.innerHTML+= "<div class='clsImageTitle'>" + ImageTitleArray[index] + "</div>" 
		  document.getElementById('ImageContainer').appendChild(TDElement)		
		}
	}
	setIDs();
	attachEventhandlers();
	ScrollLeft();
}


// Attach event handlers to all images within container
function attachEventhandlers()
{
ContainerElement=document.getElementById('ImageContainer')
TDCol=ContainerElement.getElementsByTagName('TD');

if (TDCol!=null)
	{for (l=0; l<TDCol.length; l++)
		{
		IMGCol=TDCol.item(l).getElementsByTagName("IMG");
		IMGCol.item(0).style.cursor="pointer"
//		IMGCol.item(0).onclick=onclickHandler;
		}
	}
}

// Set ID's for all table cells
function setIDs()
{
ContainerElement=document.getElementById('ImageContainer')
TDCol=ContainerElement.getElementsByTagName('TD');
if (TDCol!=null)
	{	for (i=0; i<TDCol.length; i++)
			{TDCol.item(i).setAttribute('id','cell'+i)}
	}
}

// :::::::::::::::::::::::::
// ::: Scroll Functions ::
// :::::::::::::::::::::::::

function moveLeft()
{
	ContainerElement=document.getElementById("ImageContainer");
	firstTD=document.getElementById("cell0");
	dupfirstTD=firstTD.cloneNode(false)
	dupfirstTD.innerHTML=firstTD.innerHTML
	ContainerElement.removeChild(firstTD);
	ContainerElement.appendChild(dupfirstTD);
	setIDs();
	attachEventhandlers();
}

function moveRight()
{
 	var index = TDCol.length-1;
	lastTD=document.getElementById('cell' + index);
	duplastTD=lastTD.cloneNode(false)
	duplastTD.innerHTML=lastTD.innerHTML
	firstTD=document.getElementById("cell0");
	ContainerElement=document.getElementById("ImageContainer");
	ContainerElement.insertBefore(duplastTD,firstTD);
	ContainerElement.removeChild(lastTD);
	setIDs();
	attachEventhandlers();
}

function ScrollLeft()
{
 	moveLeft();
	scroll_timer = setTimeout(ScrollLeft, 1500);
}


function ScrollRight()
{
 	moveRight();
	scroll_timer = setTimeout(ScrollRight, 1500);
}

function ScrollStop()
{
 	clearTimeout(scroll_timer);
}

function DisplayImageInfo(e)
{
 	ScrollStop();
	var targ, id;
	if (!e){var e = window.event;}
	
	if (e.target)
	{	
		targ = e.target;
	}
	else if (e.srcElement)
	{	
		targ = e.srcElement;
	}
	
	id = targ.getAttribute('id');
	 
//alert("id: " + id + "  info: " + InfoArray[id]);
	
// 	t1.Show(e, InfoArray[id]);
	
	t1.Show(e, document.getElementById("ScrollingImageInfo" + id).innerHTML);
}


/////////////////////////////////////////// FOMR TOOLTOP ///////////////////////////////
// Free for any type of use so long as original notice remains unchanged.
// Report errors to feedback@ashishware.com
//Copyrights 2006, Ashish Patil , ashishware.com
//////////////////////////////////////////////////////////////////////////
function ImageInfo(id,isAnimated,aniSpeed)
{ 
  var isInit = -1;  
  var div,divWidth,divHeight;  
  var xincr=10,yincr=10;  
  var animateToolTip =false;  
  var html;    

  function Init(id)  
  {   
  	  div = document.getElementById(id);   
	  if(div==null) 
	  {
	   	  alert("Div is Null");
	  	  return;      
	  }
	  if((div.style.width=="" || div.style.height==""))   
	  {
	   	  alert("Both width and height must be set");
		  return;
	  }
	  
	  divWidth = parseInt(div.style.width);   
	  divHeight= parseInt(div.style.height);   
	  if(div.style.overflow!="hidden")
	  	  div.style.overflow="hidden";   
	  if(div.style.display!="none")
	      div.style.display="none";   
	  if(div.style.position!="absolute")
	      div.style.position="absolute";      
	  if(isAnimated && aniSpeed>0)   
	  {
	   	  xincr = parseInt(divWidth/aniSpeed);    
		  yincr = parseInt(divHeight/aniSpeed);    
		  animateToolTip = true;    
	  }
	  isInit++;      
   }
   
   this.Show =  function(e,strHTML)
   {    
       if(isInit<0)
	      return;
       var newPosx,newPosy,height,width;    
	   if(typeof( document.documentElement.clientWidth ) == 'number' )
	   {
	       width = document.body.clientWidth;    
		   height = document.body.clientHeight;
	    }
		else
	    {    
		   width = parseInt(window.innerWidth);    
		   height = parseInt(window.innerHeight);        
		}    
		
		var curPosx = (e.x)?parseInt(e.x):parseInt(e.clientX);    
		var curPosy = (e.y)?parseInt(e.y):parseInt(e.clientY);   
//alert("curPosx: " + curPosx + "  curPosy: " + curPosy);	     
		if(strHTML!=null)    
		{
		 	html = strHTML;     
			div.innerHTML=html;
		}
		
		if((curPosx+divWidth+10)< width)
		    newPosx= curPosx+10;
	    else
		    newPosx = curPosx-divWidth;   
			
		if (isNaN(divHeight) || ((curPosy+divHeight)< height))   
			newPosy= curPosy;    
		else    
			newPosy = curPosy-divHeight-10;
//alert("curPosx: " + curPosx + "  curPosy: " + curPosy);	     
			
		if(window.pageYOffset)   
		{ 
		  	newPosy= newPosy+ window.pageYOffset;     
			newPosx = newPosx + window.pageXOffset;
		}   
		else
		{ 
		  	newPosy= newPosy+ document.body.scrollTop;     
			newPosx = newPosx + document.body.scrollLeft;
		}    
		div.style.display='block';    
		//debugger;    
		//alert(document.body.scrollTop);    
//alert("newPosx: " + newPosx + "  newPosy: " + newPosy);	     
		
		div.style.top= newPosy + "px";    
		div.style.left= newPosx+ "px";    
		div.focus();    
		if(animateToolTip)
		{    
			 div.style.height= "0px";    
			 div.style.width= "0px";    
			 ImageInfo.animate(div.id,divHeight,divWidth);
		}              
	}       
	
	this.Hide= function(e)    
	{
	 	div.style.display='none';    
		if(!animateToolTip)
			return;    
		div.style.height= "0px";    
		div.style.width= "0px";}       
		this.SetHTML = function(strHTML)   
		{
		 	html = strHTML;    
			div.innerHTML=html;
		}         
		ImageInfo.animate = function(a,iHeight,iWidth)  
		{ 
		  a = document.getElementById(a);            
		  var i = parseInt(a.style.width)+xincr ;   
		  var j = parseInt(a.style.height)+yincr;        
		  if(i <= iWidth)   
		  {
		     a.style.width = i+"px";
		  }   
		  else   
		  {
		     a.style.width = iWidth+"px";
		  }      
		  if(j <= iHeight)   
		  {
		     a.style.height = j+"px";
		  }   
		  else   
		  {
		   	a.style.height = iHeight+"px";
		  }
		  if(!((i > iWidth) && (j > iHeight)))         
		    setTimeout( "ImageInfo.animate('"+a.id+"',"+iHeight+","+iWidth+")",1);    
	}
	Init(id);
}