//初始化变量
var defaultSmallPic = "http://img.ifeng.com/tres/TemplateRes/pic70.jpg";//默认空白小图
var currentImgIndex=0;//当前显示的图片索引号-大图片
var currentSmallImgIndex=1;//当前显示的图片索引号-小图片

var bigImage = $("bigImage");
var photoList1 = $("photoList1");
var photoList2 = $("photoList2");
var photoList3 = $("photoList3");
var photoList4 = $("photoList4");
var picMemo = $("picMemo");
var picCount = $("picCount");
var picIndex = $("picIndex");
var picCount2 = $("picCount2");
var picIndex2 = $("picIndex2");
var preButton = $("pre");
var nextButton = $("next");
var preButton2 = $("pre2");
var nextButton2 = $("next2");

var preli = $("preli");
var nextli = $("nextli");
var preli2 = $("preli2");
var nextli2 = $("nextli2");


//关于图片的方法
function imageonmousemove(evnt)
{
	var photopos = getpos($("bigImage"));

	if (evnt)
	{
		//nx = (parseInt(evnt.clientX)-photopos2.left) / $("bigImage").width;
		nx = (parseInt(evnt.clientX)-photopos.left) / $("bigImage").width;
		if(nextli.childNodes[0] && nx>0.5)
		{
			bigImage.style.cursor = "url("+"http://img.ifeng.com/tres/TemplateRes/right.cur"+"),auto";
			bigImage.title = "点击跳到下一张>>";
		}
		
		if (preli.childNodes[0] && nx<=0.5)
		{
			bigImage.style.cursor = "url("+"http://img.ifeng.com/tres/TemplateRes/left.cur"+"),auto";
			bigImage.title = "<<点击跳到上一张";
		}
	}
}
function imageonclick(evnt)
{
	var photopos = getpos($("bigImage"));

	if (evnt)
	{
		nx = (parseInt(evnt.clientX)-photopos.left) / $("bigImage").width;
	}
	if(nextli.childNodes[0] && nx>0.5)
	{
		var href= $("next").href;
		window.location.href = href;
		//nextPic();
	}
	
	if (preli.childNodes[0] && nx<=0.5)
	{
		var href= $("pre").href;
		window.location.href = href;
		//prePic();
	}
}
/*
切换图片时图片幻灯展示的效果
*/
function ChangeImg(){
	var transition = 12;//图片切换时渐变方式 1－－23
	var tranSpeed = 0.5;//图片切换渐变速度。 值越小速度越快
	
	var oImg = bigImage;
	if(!oImg) return;
	if (document.all){ 
		oImg.filters.revealTrans.apply();
	}
	if (document.all)
	{
		if(!this.tranRandom) oImg.filters.revealTrans.transition = transition;
		oImg.style.visibility = "";
		oImg.style.display ="block";
		oImg.filters.revealTrans.play(tranSpeed);
	}
	else
	{
		oImg.style.visibility = "";
	}
}

//获取元素的位置
function getpos(element)
{
        if ( arguments.length != 1 || element == null )
        {
               return null;
        }
        var elmt = element;
        var offsetTop = elmt.offsetTop;
        var offsetLeft = elmt.offsetLeft;
        var offsetWidth = elmt.offsetWidth;
        var offsetHeight = elmt.offsetHeight;
        while( elmt = elmt.offsetParent )
        {
                // add this judge
                if ( elmt.style.position == 'absolute'
//              || elmt.style.position == 'relative'
                || ( elmt.style.overflow != 'visible' && elmt.style.overflow != '' ) )
                {
                        break;
                }
                offsetTop += elmt.offsetTop;
                offsetLeft += elmt.offsetLeft;
        }
        return {top:offsetTop, left:offsetLeft, right:offsetWidth+offsetLeft, bottom:offsetHeight+offsetTop };
}



<!--图片所需参数的封装-->
function ImgItem() {
	this.title="";
	this.url="";
	this.pic="";
	this.smallpic="";
	this.memo="";
	this.width=0;
	this.height=0;	
}
ImgItem.prototype = {           
	toImgHTML:function()
	{
		//todo...
	},
	toAHTML:function()
	{
		//todo...
	}
}

function ImgItems(){
	
	this.Imgs = new Array();
	
	this.add = addImg;
	this.get = getImg;
	this.picCount = picCount;
	this.toLiHtml = toLiHtml;
	this.doDivHtml = doDivHtml;
	
	function addImg(item){
		this.Imgs[this.Imgs.length] = item;
	}
	
	function getImg(i){
		if(i<this.Imgs.length) return this.Imgs[i];
		else return null;
	}
	
	function picCount()
	{
		return this.Imgs.length;
	}
		   
	function toLiHtml(){
		//todo...
	}
	
	function doDivHtml(){
		//todo...
	}
}

//其他方法
/* 
 *函数功能:从href获得参数 
 *sArgName:arg1, arg2 
 *return: the value of arg. d, re 
 */ 
function GetArgsFromHref(sHref, sArgName) 
 { 
　　        var args = sHref.split("?"); 
　　        var retval = ""; 
　　        if(args[0] == sHref) /*参数为空*/ 
　　        { 
　　            return retval; /*无需做任何处理*/ 
　　        } 
　　        var str = args[1]; 
　　        args = str.split("&"); 
　　        for(var i = 0; i < args.length; i ++) 
　　        { 
　　            str = args[i]; 
　　            var arg = str.split("="); 
　　            if(arg.length <= 1) continue; 
　　            if(arg[0] == sArgName) retval = arg[1]; 
　　        } 
　　        return retval; 
 }


//////////////////////////功能和方法////////////////////////////////////
function nextPic()
{
	currentImgIndex++;
	ResetImage();
}
function prePic()
{
	currentImgIndex--;
	ResetImage();
}
function nextPic2()
{
	currentSmallImgIndex++;
	ResetSmallImage();
}
function prePic2()
{
	currentSmallImgIndex--;
	ResetSmallImage();
}
function clickSmallPic(index)
{
	currentImgIndex = currentSmallImgIndex + index;
	ResetImage();
}

function ResetImage()
{
	currentImgIndex = GetArgsFromHref(document.location.href,"id");
	if(currentImgIndex=="") currentImgIndex=0;
	currentImgIndex = parseInt(currentImgIndex);

	if(currentImgIndex>=imgs.picCount() || currentImgIndex<0) return;
	
	var picItem = imgs.get(currentImgIndex);
	
	bigImage.src = picItem.pic;
	ChangeImg();//图片展示效果
	picMemo.innerHTML = picItem.memo;
	picCount.innerHTML = imgs.picCount();
	picIndex.innerHTML = currentImgIndex+1;
	
	var curHref = document.location.href;
	var preHref = curHref.split("?")[0] + "?id=" + (currentImgIndex-1);
	var nextHref = curHref.split("?")[0] + "?id=" + (currentImgIndex+1);
	
	if(currentImgIndex==0)//第一张
	{
		//preli.innerHTML = '<span>上一页 <img src="http://img.ifeng.com/tres/TemplateRes/scrollLeft.gif" align="absmiddle" /></span>';
		preli.innerHTML = '';
	}
	else
	{
		preli.innerHTML = '<a  id="pre" href="' + preHref +'"> 上一页<img src="http://img.ifeng.com/tres/TemplateRes/scrollLeft.gif" align="absmiddle" /></a></li>';
	}
	
	if(currentImgIndex == imgs.picCount()-1)//最后一张
	{
		currentSmallImgIndex=0;
		//nextli.innerHTML = '<span>下一页 <img src="http://img.ifeng.com/tres/TemplateRes/scrollRight.gif" align="absmiddle" /></span>';
		nextli.innerHTML = '';
	}
	else
	{
		currentSmallImgIndex=currentImgIndex+1;
		nextli.innerHTML = '<a id="next" href="' + nextHref +'">下一页 <img src="http://img.ifeng.com/tres/TemplateRes/scrollRight.gif" align="absmiddle" /></a>';
	}

	ResetSmallImage();
}
function ResetSmallImage()
{
	if(currentSmallImgIndex>=imgs.picCount()) return;
	picCount2.innerHTML = imgs.picCount();
	picIndex2.innerHTML = currentSmallImgIndex+1;

	var curHref = document.location.href;
	var href = curHref.split("?")[0] + "?id=";

	photoList1.src = imgs.get(currentSmallImgIndex)==null?defaultSmallPic:imgs.get(currentSmallImgIndex).smallpic;
	photoList2.src = imgs.get(currentSmallImgIndex+1)==null?defaultSmallPic:imgs.get(currentSmallImgIndex+1).smallpic;
	photoList3.src = imgs.get(currentSmallImgIndex+2)==null?defaultSmallPic:imgs.get(currentSmallImgIndex+2).smallpic;
	photoList4.src = imgs.get(currentSmallImgIndex+3)==null?defaultSmallPic:imgs.get(currentSmallImgIndex+3).smallpic;
	
	photoList1.parentNode.href =  imgs.get(currentSmallImgIndex)==null?"javascript:void(0);": href + currentSmallImgIndex.toString();
	photoList2.parentNode.href =  imgs.get(currentSmallImgIndex+1)==null?"javascript:void(0);": href + (currentSmallImgIndex+1).toString();
	photoList3.parentNode.href =  imgs.get(currentSmallImgIndex+2)==null?"javascript:void(0);": href + (currentSmallImgIndex+2).toString();
	photoList4.parentNode.href =  imgs.get(currentSmallImgIndex+3)==null?"javascript:void(0);": href + (currentSmallImgIndex+3).toString();
	
	if(currentSmallImgIndex==0)//第一张
	{
		//preli2.innerHTML = '<span>上一页 <img src="http://img.ifeng.com/tres/TemplateRes/scrollLeft.gif" align="absmiddle" /></span>';
		preli2.innerHTML = '';
	}
	else
	{
		preli2.innerHTML = '<a  id="pre" href="javascript:prePic2();"><img src="http://img.ifeng.com/tres/TemplateRes/scrollLeft.gif" align="absmiddle" /> 上一页</a></li>';
	}

	
	if(currentSmallImgIndex == imgs.picCount()-1)//最后一张
	{
		//nextli2.innerHTML = '<span>下一页 <img src="http://img.ifeng.com/tres/TemplateRes/scrollRight.gif" align="absmiddle" /></span>';
		nextli2.innerHTML = '';
	}
	else
	{
		nextli2.innerHTML = '<a id="next" href="javascript:nextPic2();">下一页 <img src="http://img.ifeng.com/tres/TemplateRes/scrollRight.gif" align="absmiddle" /></a>';
	}	
}


//初始化图片集
var picsData = picList_json.data;
var imgs = new ImgItems();
var img;

for(var i=0; i < picsData.length; i++)
{
	img = new ImgItem();
	img.pic = picsData[i].url;
	
	var smallimg;
	var str= new Array(); 
	str=picsData[i].url.split("/"); 
	if(str.length>0)
	{
		//smallimg = picsData[i].url.replace(str[str.length-1],"small_" + str[str.length-1]);
		smallimg = "http://img.ifeng.com/res/small/" + "small_" + str[str.length-1];
		img.smallpic = smallimg; 
	}
	img.memo =picsData[i].memo;
	imgs.add(img);	
}

function $(id)
{
	return document.getElementById(id);
}


//初始化页面
window.onload=ResetImage;