$(document).ready(function(){
	var pages=0;
	if(picNumb%pagenumbs == 0){
		pages=parseInt(picNumb/pagenumbs);
	}
	else{
		pages=parseInt(picNumb/pagenumbs)+1;
	}
	var page=1
	var altArray=altStr.split("^");
	$(".icon").toggle(
		function(){$(this).parent(".rank").siblings(".rankBox").show();},
		function(){$(this).parent(".rank").siblings(".rankBox").hide();}
	);
	$("#weatherLoad").hide();
	
	var timer = null;
	var offset = 3000;
	var index = 0;
	var flog = 0;

		//´óÍ¼½»ÌæÂÖ»»
	function slideImage(i)
	{
		if(i==page*pagenumbs)
		{
			ulReWrite(page+1);
			page++;
		}
		if(i==0)
		{
			if(picNumb>pagenumbs)
			{
				ulReWrite(1);
			}
			page=1;
		}
		var curt=$('.cityPicL .currentImg');
		var id = 'img'+ i;
		$('#'+ id).removeClass('Img');
		$('#'+ id).addClass('currentImg');
		curt.removeClass('currentImg');
		curt.addClass('Img');
		document.getElementById("txtalt").innerHTML=altArray[i];
	}
	function pageupdown(s)
	{
		if(s==1)
		{
			if(page<pages)
			{
				ulReWrite(page+1);
				page++;
			}
		}
		if(s==0)
		{
			if(page>1)
			{
				ulReWrite(page-1);
				page--;
			}
		}
	}
	//bind citypicN a
	function hookThumb(){    
		$('#cityPicN li a')
		.bind('click', function(){
			if (timer) {
				clearTimeout(timer);
			}                
			var id = this.id; 
			var oldindex=index;
			index = getIndex(id.substr(3));
			if(oldindex!=index)
			{
				rechange(index);
				slideImage(index); 
				timer = window.setTimeout(auto, offset);
				//this.blur();            
				return false;
			}
		});
		$('#leftpt').bind('click',function() {pageupdown(0);});
		$('#rightpt').bind('click',function() {pageupdown(1);});
	}
	function ulReWrite(j)
	{
		var ul=document.getElementById("cityPicN");
		var str="";
		var crtpic="";
		if(ul)
		{
			if(j<=pages)
			{
				str += '<li id="leftpt">';
				if(j==pages)
				{
					for(var k=pagenumbs;k>0;k--)
					{
						if(index==(picNumb-k))
						{
							crtpic='class="current"';
						}
						else
						{
							crtpic="";
						}
						str += '<li id="li'+(picNumb-k)+'" '+crtpic+'><a id="num'+(picNumb-k)+'" href="javascript:;">'+(picNumb-k+1)+'</a></li>';
					}
				}
				else
				{
					for(var k=0;k<pagenumbs;k++)
					{
						if(index==((j-1)*pagenumbs+k))
						{
							crtpic='class="current"';
						}
						else
						{
							crtpic="";
						}
						str += '<li id="li'+((j-1)*pagenumbs+k)+'" '+crtpic+'><a id="num'+((j-1)*pagenumbs+k)+'" href="javascript:;">'+((j-1)*pagenumbs+k+1)+'</a></li>';
					}
				}
				str += '<li id="rightpt"></li>'
			}
			ul.innerHTML=str;
			 hookThumb();
		}
	}
		//get index
	function getIndex(v){
		for(var i=0; i < picNumb; i++){
			if (i == v) return i;
		}
	}
	function rechange(loop){
		var id = 'li'+ loop;
		$('#cityPicN li.current').removeClass('current');
		$('#'+ id).addClass('current');
	}
	function auto(){
		if(flog!=0)
		{
			index++;
			if (index > (picNumb-1)){
				index = 0;
			}
				rechange(index);
				slideImage(index);
		}
		flog++;
		if (flog > 4){
			flog = 1;
		}
		timer = window.setTimeout(auto, offset);
	}
	if(picNumb>1) 
	{
		auto();  
		hookThumb();
	}
});

