$(document).ready(
	function(){
		var divCount=8;
		var currentDiv=1;
		for(var i=0;i<divCount;i++)
		{
			$('<div id="div'+i+'"></div>').appendTo("#images")
			//.css({position:'absolute',display:'none'});
			.css({position:'absolute',display:'none'});
			if (i != getPrevious()) {
				drawImage(i);
			}
		}
		//$('<a id="refresh" href="#">Refresh</a>').appendTo('#images')
		//.css({position:'relative',left:'400px',top:'200px',fontSize:'12px',fontWeight:'bold'});
		//.css({position:'relative',left:'40px',bottom:'-10px',fontSize:'12px',fontWeight:'normal'});
		
		function drawImage(idx){
			$.get('/flickr/getimg.php',{},onGet);
			
			function plot(divAddr,src){
				$(divAddr).empty();
					if(idx==currentDiv)
					{
					$(divAddr).css({display:'block'});
					}
				$("<img src='"+src+"'></img><!--span>"+idx+'</span-->').appendTo(divAddr);
			}
	
			function onGet(data){
				plot("#div"+idx,data);
			}
		}
		
		function getNext(){
			if(currentDiv < (divCount-1))
			{
				return currentDiv + 1;
			}
			else{return 0;}
		}
		
		function getPrevious()
		{
			if(currentDiv>0)
			{
				return currentDiv-1;
			}
			else
			{
				return divCount-1;
			}
		}
		
		function drawNext()
		{
			//$('#refresh').empty();
			//$('#refresh').text('reshreĝèì');
			//$('<img src="Xom13.gif"></img>').appendTo('#refresh').css({border:0});
			drawImage(getPrevious());
			$('#div'+currentDiv).fadeOut(2000);
			$('#div'+getNext()).fadeIn(2000,function()
			{
				//$('#refresh').text('refresh');
			});
			currentDiv=getNext();
		}
	
		$("#refresh").click(
			function()
			{
				drawNext();
			}
		);
	}
);