function showarrow( id )
	{
		elm = document.getElementById( id + 'arrow' );	
		elm.style.visibility = "visible"
	}
	function hidearrow( id )
	{
		elm = document.getElementById( id + 'arrow' );	
		elm.style.visibility = "hidden"
	}
	
	var slideshow = false;
	var mainid = null;
	
	function startshow()
	{
		slideshow = true;
		elm = document.getElementById("slideshow");
		elm.innerHTML = '<img src="resources/stop.gif" alt="Stop slideshow" />';
		elm.onclick  = function() { stopshow(); }
		showphoto( mainid );
	}
	
	function stopshow()
	{
		slideshow = false;
		elm = document.getElementById("slideshow");
		elm.innerHTML = '<img src="resources/start.gif" alt="Start slideshow" />';
		elm.onclick  = function() { startshow(); }
	}
	
	function slide( id )
	{
		if(slideshow == true)
		{
			if(id == parseInt(mainid + 1) || id == 0 )
			{
				showphoto( id );
			}
		}
	}
	
	function showphoto( id )				
	{	
						elm = document.getElementById("preload");
						elm.innerHTML = '<img onload="renderphoto( ' + id + ' );" src="' + photo[id] + '"  border="0"  alt="">';
	}

	function renderphoto( id )				
	{	
						
						mainid = id;
						var preloadvar = '';
						var html= '<img src="' + photo[id] + '"  border="0"  alt="">';
						elm = document.getElementById("photoscontent");
						elm.innerHTML = html;	
						imageheight = elm.style.height
						elm = document.getElementById("text");
						elm.innerHTML = comment[id]; 
						
						if(id != '0')
						{
							elm = document.getElementById("past");
							elm.style.height = imageheight;
							elm.style.cursor = 'pointer';
							elm.onmouseover = function() { showarrow('past'); }
							elm.onmouseout = function() { hidearrow('past'); }
							elm.onclick  = function() { showphoto( ( parseInt(id) - 1) ) }
							preloadvar = '<img src="' + photo[ parseInt(id) - 1] + '" alt="" height="1" width="1" class="display: none;" />';
						}
						else
						{
							
							elm = document.getElementById("past");
							elm.style.cursor = 'default';
							elm.onmouseover = null;
							elm.onclick  = null;
							elm = document.getElementById( 'pastarrow' );	
							elm.style.visibility = "hidden"
						}
						if(id != (photo.length - 1))
						{
							elm = document.getElementById("next");
							elm.style.height = imageheight;
							elm.style.cursor = 'pointer';
							elm.onmouseover = function() { showarrow('next'); }
							elm.onmouseout = function() { hidearrow('next'); }
							elm.onclick  = function() { showphoto( ( parseInt(id) + 1) ) }
							preloadvar = preloadvar + '<img src="' + photo[ parseInt(id) + 1] + '" alt="" height="1" width="1" class="display: none;" />';
							setTimeout( "slide(" + ( parseInt(id) + 1) + ");" , 3000 );
							
						}
						else
						{
							elm = document.getElementById("next");
							elm.style.cursor = 'default';
							elm.onmouseover = null;
							elm.onclick  = null;
							elm = document.getElementById( 'nextarrow' );	
							elm.style.visibility = "hidden"
							preloadvar = preloadvar + '<img src="' + photo[ 0 ] + '" alt="" height="1" width="1" class="display: none;" />';
							setTimeout( "slide(" + parseInt( 0 ) + ");" , 3000 );
						}
						
						elm = document.getElementById("bottom");
						
						if (window.innerHeight) {
								theHeight=window.innerHeight;
						}
						else if (document.documentElement && document.documentElement.clientHeight) {
							theHeight=document.documentElement.clientHeight;
						}
						else if (document.body) {
							theHeight=document.body.clientHeight;
						}
						
						var height = elm.offsetTop
						if( height < theHeight )
						{
							height = (theHeight - 0);
						}
						elm = document.getElementById("black");
						elm.style.opacity = 0.5;
						elm.style.filter = 'alpha(opacity=' + 50 + ')';
						elm.style.height = ( height + 0 ) + "px";
						elm.style.visibility = "visible"
						
						elm = document.getElementById("photos");
						
						/*
						if (!e) e = window.event;
						if(e)
						{
							if (e.pageX || e.pageY)
							{
							  mousex = e.clientX; // e.pageX;
							  mousey = e.clientY; //e.pageY;
							}
							else if (e.clientX || e.clientY)
							{ 
							  mousex = e.clientX;
							  mousey = e.clientY;
							} 

						}
						alert( 'wetwetq');
						*/
						
						
						var valueY = getScrollXY();
						var height = elm.offsetHeight;
						var realy = ((theHeight - height) - 20) / 2;
						elm.style.top= parseInt(realy + valueY) + 'px';					
						
						if (window.innerWidth) {
							theWidth=window.innerWidth;
						}
						else if (document.documentElement && document.documentElement.clientWidth) {
							theWidth=document.documentElement.clientWidth;
						}
						else if (document.body) {
							theWidth=document.body.clientWidth;
						}
						
						var width = elm.offsetWidth;
						var realx = ((theWidth - width) - 20) / 2;
						elm.style.left= parseInt(realx) + 'px';	
						
						//elm.style.width = (size + 20) + 'px';
						//alert( mousex + ' - ' + mousey);
						elm.style.visibility = "visible"
						
						elm = document.getElementById("preload");
						elm.innerHTML = preloadvar;	
						
						
						//var coords = { x: 0, y: 0};
						//coords.x += elm.offsetLeft;
						//coords.y += elm.offsetTop;
						
						//alert(coords.x + ':' + coords.y + ' >>> ' );
						
						
					}		

					
					function getScrollXY() {
					  var scrOfX = 0, scrOfY = 0;
					  if( typeof( window.pageYOffset ) == 'number' ) {
					    //Netscape compliant
					    scrOfY = window.pageYOffset;
					    scrOfX = window.pageXOffset;
					  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
					    //DOM compliant
					    scrOfY = document.body.scrollTop;
					    scrOfX = document.body.scrollLeft;
					  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
					    //IE6 standards compliant mode
					    scrOfY = document.documentElement.scrollTop;
					    scrOfX = document.documentElement.scrollLeft;
					  }
					  return scrOfY;
					}
					
					function hidephoto()
					{
						elm = document.getElementById("photos");	
						elm.style.visibility = "hidden"
						elm = document.getElementById("black");	
						elm.style.visibility = "hidden"
						mainid = null;
					}