// JavaScript Document

var total_pic=0;
var all_pic_info=new Array ();
var dir_name='';

var XMLHttpRequestObject = false;
			
if(window.XMLHttpRequest)
{
	XMLHttpRequestObject= new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
	XMLHttpRequestObject=new ActiveXObject("Microsoft.XMLHTTP");
}

//---------------------------------------Show/Hide Div--------------------------------------//

function show(id)	// Show specific DIV
{
	document.getElementById(id).style.display='inline';
}

function hide(id)	// Hide specific DIV
{
	document.getElementById(id).style.display='none';
}

//---------------------------------------Show/Hide Div--------------------------------------//

//---------------------------------------Loading Function----------------------------------//

function show_loading() // Show Loaging Image
{
	var loading='';
	loading=loading+'<table align="center" class="info_table2" border="0" cellspacing="0" cellpadding="0">';
	loading=loading+'<tr>';
	loading=loading+'<td align="center">';
	loading=loading+'<img align="absmiddle" src="/Gallery/img/loading.gif" width="32" height="32" />';
	loading=loading+'</td>';
	loading=loading+'</tr>';
	loading=loading+'</table><br>';	
	
	try
	{
		document.getElementById('tr_show_gallery').style.display='table-row';			
	}
	catch(eIE)
	{
		document.getElementById('tr_show_gallery').style.display='block';						
	}
	
	document.getElementById('show_gallery').innerHTML=loading;	
}

//---------------------------------------Loading Function----------------------------------//

//---------------------------------------Show Image Function----------------------------------//

function saveXML(x_main) // create table with directory images with HTML
{
	show_loading();	// Show Loading 
	
	// Reset Variables
	total_pic=0;
	all_pic_info=[];
	dir_name='';
	
	dir_name=x_main.getElementsByTagName('Directory_Name')[0].firstChild.nodeValue;
	var x = x_main.getElementsByTagName('Image_File');	
	
	total_pic=x.length;
			
	for (var i=0;i<total_pic;i++)
	{
		all_pic_info[i]=new Array (12); // Total 12 elements in XML file
		
		// assign values
		all_pic_info[i][0]=x[i].getElementsByTagName("Id")[0].firstChild.nodeValue;				// ID
		all_pic_info[i][1]=x[i].getElementsByTagName("Title")[0].firstChild.nodeValue;			// Title
		all_pic_info[i][2]=x[i].getElementsByTagName("Description")[0].firstChild.nodeValue;	// Description
		all_pic_info[i][3]=x[i].getElementsByTagName("Key_Tags")[0].firstChild.nodeValue;		// Key Tags
		all_pic_info[i][4]=x[i].getElementsByTagName("Link")[0].firstChild.nodeValue;			// Link
		all_pic_info[i][5]=x[i].getElementsByTagName("Image_Location")[0].firstChild.nodeValue;	// Background Img link
		all_pic_info[i][6]=x[i].getElementsByTagName("Thumbnail")[0].firstChild.nodeValue;		// Thumbnail
		all_pic_info[i][7]=x[i].getElementsByTagName("Date_Added")[0].firstChild.nodeValue;		// Date Added
		all_pic_info[i][8]=x[i].getElementsByTagName("Img_Width")[0].firstChild.nodeValue;		// Image Width
		all_pic_info[i][9]=x[i].getElementsByTagName("Img_Height")[0].firstChild.nodeValue;		// Image Height
		all_pic_info[i][10]=x[i].getElementsByTagName("Tn_Width")[0].firstChild.nodeValue;		// Thumbnail Width
		all_pic_info[i][11]=x[i].getElementsByTagName("Tn_Height")[0].firstChild.nodeValue;		// Thumbnail Height								
	}	
	
	createTable(0); // Show First Pic	
}

function createTable(k) // create table with directory images with HTML
{
	var main_table='';
	var show_img_no='';
	
	show_img_no=show_img_no+(k+1)+'/'+total_pic+'&nbsp;';
	
	if(total_pic>1)
		show_img_no=show_img_no+'Photos';
	else
		show_img_no=show_img_no+'Photo';
	
	main_table=main_table+'<div id="show_img" align="left">';
	main_table=main_table+'<table align="left" width="100%" border="0" cellspacing="0" cellpadding="0">';

	// ROW 1
	
	// ROW 1
	
	// ROW 2
	main_table=main_table+'<tr><td align="center" style="background-position:center; background-image:url(/Gallery/img/loading.gif); background-repeat:no-repeat;">';
	main_table=main_table+'<table align="center" class="info_table2" style="background-image:url(\'/Gallery/'+all_pic_info[k][5]+'\'); background-repeat:no-repeat; width:'+all_pic_info[k][8]+'px; height:'+all_pic_info[k][9]+'px;" border="0" cellspacing="0" cellpadding="0">';
	main_table=main_table+'<tr>';
	main_table=main_table+'<td height="85%" valign="middle" width="100" align="left" >';
	main_table=main_table+'<div id="left" style="display:none">';		
				
	if(k!=0) // Show Previous Button
	{
		main_table=main_table+'<table border="0" cellspacing="0" cellpadding="0" class="img_border" style="background-image:url(\'/Gallery/'+all_pic_info[k-1][6]+'\'); background-repeat:no-repeat; width:'+all_pic_info[k-1][10]+'px; height:'+all_pic_info[k-1][11]+'px;">';
		main_table=main_table+'<tr>';
		main_table=main_table+'<td align="left">';
		main_table=main_table+'<a href="javascript:createTable('+(k-1)+')"><img align="left" src="/Gallery/img/left.png" width="38" height="48" alt="Previous" title="Previous" /></a>';
		main_table=main_table+'</td>';
		main_table=main_table+'</tr>';
		main_table=main_table+'</table>';					
	}
	
	main_table=main_table+'</div>';
	main_table=main_table+'</td>';
	main_table=main_table+'<td height="85%" align="center"><img style="display:none;" src="/Gallery/img/open.png" width="26" height="42" alt="'+all_pic_info[k][3]+'" title="'+all_pic_info[k][3]+'" /></td>';
	main_table=main_table+'<td height="85%" valign="middle" width="100" align="right" >';
	main_table=main_table+'<div id="right" style="display:none">';		
				
	if((k+1)!=total_pic) // Show Next Button
	{					
		main_table=main_table+'<table border="0" cellspacing="0" cellpadding="0" class="img_border" style="background-image:url(\'/Gallery/'+all_pic_info[k+1][6]+'\'); background-repeat:no-repeat; width:'+all_pic_info[k+1][10]+'px; height:'+all_pic_info[k+1][11]+'px;">';
		main_table=main_table+'<tr>';
		main_table=main_table+'<td align="right">';
		main_table=main_table+'<a href="javascript:createTable('+(k+1)+')"><img align="right" src="/Gallery/img/right.png" width="38" height="48" alt="Next" title="Next" /></a>';
		main_table=main_table+'</td>';
		main_table=main_table+'</tr>';
		main_table=main_table+'</table>';		
	}
	
	main_table=main_table+'</div>';
	main_table=main_table+'</td>';
	main_table=main_table+'</tr>';
	
	main_table=main_table+'<tr>';
	main_table=main_table+'<td class="img_border2" style="padding-left:15px;" height="15%" valign="middle" colspan="3" align="left" >';
	
	if(all_pic_info[k][1]!='Image Title')
	{
		main_table=main_table+'<div id="bottom" style="color: #FFFFFF;">'+all_pic_info[k][1]+'<br /><font class="file_date">Picture Added: '+all_pic_info[k][7]+'</font></div>';
	}
	else
	{
		main_table=main_table+'<div id="bottom" style=" color: #FFFFFF;">&nbsp;<br /><font class="file_date">Picture Added: '+all_pic_info[k][7]+'</font></div>';
	}
	
	main_table=main_table+'</td>';
	main_table=main_table+'</tr>';
	main_table=main_table+'</table>';
	main_table=main_table+'</td></tr>';
	// ROW 2
	
	// ROW 3
	main_table=main_table+'<tr><td align="center">';
	main_table=main_table+'<table style="width:'+all_pic_info[k][8]+'px;" border="0" cellspacing="0" cellpadding="0">';
	main_table=main_table+'<tr><td colspan="2">&nbsp;</td></tr>';
	main_table=main_table+'<tr>';
	main_table=main_table+'<td width="50%" align="left">&nbsp;&nbsp;'+show_img_no+'</td>';
	main_table=main_table+'<td width="50%" align="right" class="selected">';
	
	if(k!=0) // Show Previous Button
	{
		main_table=main_table+'<< <a class="link_desc" href="javascript:createTable('+(k-1)+')">Previous</a>';
	}
	
	if((k+1)!=total_pic) // Show Next Button
	{
		main_table=main_table+' | <a class="link_desc" href="javascript:createTable('+(k+1)+')">Next</a> >>';
	}
	main_table=main_table+'</td>';
	main_table=main_table+'</tr>';
	main_table=main_table+'</table>';
	main_table=main_table+'</td></tr>';	
	// ROW 3
	
	// ROW 4
	main_table=main_table+'<tr><td valign="top">';
	main_table=main_table+'<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0">';
	
	if(all_pic_info[k][2]!='Image Description') // Description
	{
		main_table=main_table+'<tr><td align="center">'+all_pic_info[k][2]+'</td></tr>';		
	}
	
	if(all_pic_info[k][4]!='http://' && all_pic_info[k][4]!='' )
	{
		main_table=main_table+'<tr><td align="center">For more information <a class="link_desc" href="'+all_pic_info[k][4]+'">Click Here</a></td></tr>';
	}
	
	// print last empty row
	main_table=main_table+'<tr><td>&nbsp;</td></tr></table>';
	
	main_table=main_table+'</td></tr></table>';
	main_table=main_table+'</div>';
	// ROW 4		
			
	document.getElementById('show_gallery').innerHTML='';	
	document.getElementById('show_gallery').innerHTML=main_table;
}

function getDirectory(myDir) // Pick Directory & save image information in an XML file 'write_images.xml' 
{
	show_loading();	// Show Loading 	
	
	if(XMLHttpRequestObject)
	{
		XMLHttpRequestObject.open("GET","/Gallery/write_images_both.php?dir_name="+myDir,true);
				
		XMLHttpRequestObject.onreadystatechange= function()
		{
			if(XMLHttpRequestObject.readyState==4 && XMLHttpRequestObject.status==200)
			{				
				var xmlDocument=XMLHttpRequestObject.responseXML;
				saveXML(xmlDocument); // Create Table & Show				
			}
		}
		XMLHttpRequestObject.send(null);		
	}
}

//---------------------------------------Show Image Function----------------------------------//