var BASE_DIV = 'pfmenu';
var IMG_DIV = 'pfimage';
var NUM_MENU_THUMBS = 4;

document.write('<script type="text/javascript" src="js/scriptaculous/prototype.js"><\/script>');
document.write('<script type="text/javascript" src="js/scriptaculous/scriptaculous.js"><\/script>');

function advanceImage(direction)
{
	var activeItem = null;
	var listMenu = document.getElementById(BASE_DIV).getElementsByTagName("li");
	if (direction == "prev")
	{		
		for (var i = listMenu.length-1; i > 0; i--)
		{
			//alert(listMenu[i].className);
			if ((listMenu[i].className.indexOf('active'))!=-1)
			{
				
				listMenu[i].className=listMenu[i].className.replace("active", "");
				i--;
				if (i>-1)
				{
					listMenu[i].className+=" active";
					activeItem = listMenu[i];
					if (i > -1 && i < listMenu.length - NUM_MENU_THUMBS)
					{
						listMenu[i].className=listMenu[i].className.replace("hide", "");
						if ((listMenu[i + NUM_MENU_THUMBS].className.indexOf('hide'))==-1)
						{
							listMenu[i + NUM_MENU_THUMBS].className+=" hide";
						}
					}
				}
			}
		}
	}
	else
	{
		for (var x=0; x<listMenu.length-1; x++)
		{
			
			if ((listMenu[x].className.indexOf('active'))!=-1)
			{
				
				listMenu[x].className=listMenu[x].className.replace("active", "");
				x++;
				if (x<listMenu.length)
				{
					listMenu[x].className+=" active";
					activeItem = listMenu[x];
					if (x > NUM_MENU_THUMBS-1 && x < listMenu.length)
					{
						listMenu[x].className = listMenu[x].className.replace("hide", "");
						if ((listMenu[x - NUM_MENU_THUMBS].className.indexOf('hide'))==-1)
						{
							listMenu[x - NUM_MENU_THUMBS].className+=" hide";
						}
					}
				}
			}
		}

	}
	imageClick(activeItem);
}

/** Slides the image window (i.e. the number of viewable images) by NUM_MENU_THUMBS.
	When one of the double-arrows is clicked, all the images in the current thumbnail strip are hidden,
	and then next ones are shown. Stops at the end.
	
	P.S. Prototype 1.6 is extremely pleasant to work with. A BIG "Thank You" to the Prototype developers! Keep up the good work!  
**/
function advanceGroupOfImages(direction)
{
	//Find the first element without the hide class name. The next NUM_MENU_THUMBS all do not have a hide class name
	var listMenu = $(BASE_DIV).select('li');
	
	//alert(activeArr);
	for (var i = 0; i < listMenu.length; i++)
	{
		//find the first element without the hide class. Only work on it if its index + NUM_MENU_THUMBS is less than the listMenu size
		//because, if it is not less than the listMenu size, we could potentially hit "next jump" and hide EVERY image. Similar for prev
		if (!listMenu[i].hasClassName('hide') && 
			((i + NUM_MENU_THUMBS < listMenu.length && direction=="next") ||
			(i - NUM_MENU_THUMBS >= 0 && direction=="prev"))	)
		{
			//iterate through all of the next NUM_MENU_THUMBS, set the class to hide
			for (var j = i; j < listMenu.length && j-i < NUM_MENU_THUMBS; j++)
			{
				listMenu[j].addClassName('hide');
			}

			
			if (direction=="next")
			{
				//iterate through the NEXT set of thumbnails and unhide them
				for (var j = i + NUM_MENU_THUMBS; j < listMenu.length && j < i + NUM_MENU_THUMBS * 2; j++)
				{
					listMenu[j].removeClassName('hide');
				}
				newActiveImage = i + NUM_MENU_THUMBS;
				
				
				//set the active picture
				if (i+NUM_MENU_THUMBS < listMenu.length)
				{
					$(BASE_DIV).select('li.active')[0].removeClassName('active');
					listMenu[i+NUM_MENU_THUMBS].addClassName('active');
					imageClick(listMenu[i+NUM_MENU_THUMBS]);
				}
				
			}
			else
			{
				//iterate through the NEXT set of thumbnails and unhide them
				for (var j = i - NUM_MENU_THUMBS; j >=0 && j < i; j++)
				{
					listMenu[j].removeClassName('hide');
				}

				//set the active picture
				if (i -1 > 0)
				{
					$(BASE_DIV).select('li.active')[0].removeClassName('active');
					listMenu[i-1].addClassName('active');
					imageClick(listMenu[i-1]);
				}
			}
			break;
		}
	}		  
}

/** Function imageclick displays the ajax page and highlights the image currently selected
	Parameter obj is the list menu item (li)
**/
function imageClick(obj)
{
	if (obj == null)
		return false;
	var listMenu = document.getElementsByTagName("LI");
	for (var i = 0; i < listMenu.length; i++)
	{
		listMenu[i].className = listMenu[i].className.replace("active", "");
	}
	obj.className += " active";
	
	var imgDiv = document.getElementById(IMG_DIV);
	//imgDiv.style.display = 'none';
	var linkColl = obj.getElementsByTagName("A");
	
	var strLink = "";
	if (linkColl.length > 0)
	{
		var href = linkColl[0].href;
		//displays image with description through ajax call
		ajaxFunction(href, imgDiv);
		imgDiv.style.display = 'none';
		new Effect.Appear(IMG_DIV);
		//this just displayst the image, no ajax required
		/*var img = new Image();
		img.src = href;
		
		var h = img.height;
		var w = img.width;
		
		strLink = "<img src=\"" + href + "\" height=\"" + h + "\" width=\"" + w + "\" />";
		*/
	}
	//imgDiv.innerHTML = strLink;
	//alert(strLink);
}

function start() 
{
	//assign navigational clicks for the arrow keys (left and right)
	$('next').setStyle({display: 'block'});
	Event.observe('next', 'click', function() { advanceImage("next") }); 
	$('prev').setStyle({display:'block'});
	Event.observe('prev', 'click', function(){ advanceImage("prev") });
	
	$('fnext').setStyle({display: 'block'});
	Event.observe('fnext', 'click', function() { advanceGroupOfImages("next") });
	$('fprev').setStyle({display: 'block'});
	Event.observe('fprev', 'click', function() { advanceGroupOfImages("prev") });

	//anchor.onclick=function() { advanceImage("prev"); }  

	//"show" the first NUM_MENU_THUMBS images, by hiding the rest
	var listMenu = document.getElementById(BASE_DIV).getElementsByTagName("LI");
	
	for (var i = 0; i < listMenu.length; i++)
	{
		var link = listMenu[i].getElementsByTagName("A");
		//alert(link[0].href);
		for (var j = 0; j < link.length; j++)
		{
			//link[j].href = "#";
		} 
		if (i >= NUM_MENU_THUMBS)
			listMenu[i].className += " hide";
		if (listMenu[i].className.indexOf("active") != -1)
		{
			var linkColl = listMenu[i].getElementsByTagName("A");
	
			var strLink = "";
			if (linkColl.length > 0)
			{
				var href = linkColl[0].href;
				ajaxFunction(href, document.getElementById(IMG_DIV));
			}
			
		}
		listMenu[i].onclick = function() { imageClick(this);  return false;}
		
	}
}

function ajaxFunction(link, destElement)
{
	var xmlHttp;
	try
 	{
		// Firefox, Opera 8.0+, Safari
		xmlHttp=new XMLHttpRequest();
	}
	catch (e)
	{
	  	// Internet Explorer
	  	try
	    {
	    	xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
	    }
	  	catch (e)
	    {
	    	try
	      	{
				xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	      	}
			catch (e)
	      	{
		      	alert("Your browser does not support AJAX!");
		      	return false;
			}
		}
	}
	xmlHttp.onreadystatechange=function()
	{
		if(xmlHttp.readyState==4)
		{
			destElement.innerHTML = xmlHttp.responseText;
	    }
	}
	xmlHttp.open("GET", link, true);
	xmlHttp.send(null);
}