// JScript 文件

function ChangePicture(imgName)
{
    document.getElementById("smallpic").src="./product_img_detail/"+imgName;
//    document.getElementById("linkImage").href="detailimage.aspx?src="+imgName;
       document.getElementById("bigpic").src="./product_img_ori/"+imgName;
       
}


//var smallX = 195; //缩略图宽度
//var bigX = 300; //预览窗大小,可以任意设置
//var bigY =300;
//var srcX = -1; //原图大小,可以任意设置. 如有一个为-1将使用图片原始大小
//var srcY = -1;
//var border = 1; //边框
//var smallY,viewX,viewY,bl,isIE,vX,vY,imgo;
//window.onload=function (){  //初始化数据
// bigpic=document.getElementById("bigpic");
// document.getElementById("bigbox").style.display="none";
// 
// isIE=window.event?1:0; //由于IE和FF对盒模型解释的差异,获取浏览器标记以便修正差异
// if (srcX==-1 || srcY==-1){srcX=bigpic.width;srcY=bigpic.height;} // 如果有一个为-1,则使用原图大小

// else{bigpic.width=srcX;bigpic.height=srcY;}
// smallY=srcY*smallX/srcX; //按比例计算出缩略图的高
// viewX=bigX/srcX*smallX; //计算缩略图的预览窗口大小
// viewY=bigY/srcY*smallY;
// bl=srcX/smallX; //得到缩放比例
// bigbox.style.borderWidth=border; //初始化预览窗
// bigbox.style.width=bigX+border*2*isIE;
// bigbox.style.height=bigY+border*2*isIE;
// view.style.borderWidth=border; //初始化小预览窗
// view.style.width=viewX-!isIE*border*2;
// view.style.height=viewY-!isIE*border*2;
// loading.style.left=bigX/2+bigbox.offsetLeft*!isIE-loading.offsetWidth/2; //初始化loading
// loading.style.top=bigY/2+bigbox.offsetTop*!isIE-loading.offsetHeight/2;
// var imga=document.body.getElementsByTagName("img") //初始化所有缩略图
// for (m=0;m<imga.length;m++)
//  if (imga[m].className=="imgDetail"){
//   imga[m].style.borderWidth=border;
//   imga[m].width=smallX;
//   imga[m].height=smallY;
//   imga[m].onmouseout=function(){if (isIE) view.style.display='none'}
//  }
//}
//function move(e,o){

//if(document.readyState =="complete"){ 


//  bigpic=document.getElementById("bigpic");
//   document.getElementById("bigbox").style.display="block";
//  
// if (imgo!=o){ //如果切换图片
//////   bigpic.style.display = 'none';
//   bigpic.src=o.lowsrc; //载入新图片
//   imgo=o; //imgo作为标记,避免重复载入相同图片
// }else{
//  var e = window.event?window.event:e; //得到IE或FF的event
//  if (!isIE){vX=e.pageX-border-o.offsetLeft;vY=e.pageY-border-o.offsetTop}
//  else{vX=e.offsetX;vY=e.offsetY} //分别在FF与IE下获得相对坐标
//  vX+=-viewX/2; vY+=-viewY/2; //得到缩略图的预览窗位置
//  if (vX < 0) vX = 0; //边界判断,不能超出缩略图的范围
//  if (vY < 0) vY = 0;
//  if (vX > smallX - viewX) vX = smallX - viewX;
//  if (vY > smallY - viewY) vY = smallY - viewY;
//  bigpic.style.marginLeft = - vX * bl; //刷新预览窗口
//  bigpic.style.marginTop = - vY * bl;
//  view.style.display = 'block'; //刷新缩略图中预览窗口
//  view.style.left = vX + o.offsetLeft;
//  view.style.top = vY + o.offsetTop;
// }
// 
// }
//}



//function displayImgContent()
//{
//     document.getElementById("bigbox").style.display="none";
//}

var srcX = 500; //原图大小,可以任意设置
var srcY = 667;
var bigX = 300; //预览窗大小,可以任意设置
var bigY = 300;
var smallX = 196 //缩略图宽度
var smallY = srcY * smallX / srcX;
var viewX = bigX / srcX * smallX; //预览范围
var viewY = bigY / srcY * smallY;
var bl = srcX / smallX;//缩小比例
var border = 1; //边框
window.onload=function (){
//head.innerHTML="图片载入";
document.getElementById("smallpic").width=smallX;
document.getElementById("smallpic").height=smallY;
document.getElementById("bigpic").width=srcX;
document.getElementById("bigpic").height=srcY;
document.getElementById("view").style.width=viewX;
document.getElementById("view").style.height=viewY;
document.getElementById("smallbox").style.borderWidth=border;
document.getElementById("bigbox").style.borderWidth=border;
if (window.event){
document.getElementById("smallbox").style.width=document.getElementById("smallpic").offsetWidth+border*2;
document.getElementById("smallbox").style.height=document.getElementById("smallpic").offsetHeight+border*2;
document.getElementById("bigbox").style.width=bigX+border*2;
document.getElementById("bigbox").style.height=bigY+border*2;
}else{
document.getElementById("smallbox").style.width=document.getElementById("smallpic").offsetWidth;
document.getElementById("smallbox").style.height=document.getElementById("smallpic").offsetHeight;
document.getElementById("bigbox").style.width=bigX;
document.getElementById("bigbox").style.height=bigY;
}
move(event);
}
function move(e){

var e = window.event?window.event:e;
var iebug = 0;
if (window.event){
var vX = e.offsetX - viewX/2;
var vY = e.offsetY - viewY/2;
}else{
var vX = e.pageX - viewX/2 - document.getElementById("smallbox").offsetLeft - border;
var vY = e.pageY - viewY/2 - document.getElementById("smallbox").offsetTop - border;
iebug = 2;
}

if (vX  < 0){vX = 0;}
if (vY  < 0) {vY = 0;}
if (vX > smallX - viewX - iebug) {vX = smallX - viewX - iebug;}
if (vY > smallY - viewY - iebug) {vY = smallY - viewY - iebug;}
document.getElementById("bigpico").style.marginLeft = - vX * bl +"px";
document.getElementById("bigpico").style.marginTop = - vY * bl+"px"; 
document.getElementById("view").style.left = vX +document.getElementById("smallbox").offsetLeft + border+"px";
document.getElementById("view").style.top = vY + document.getElementById("smallbox").offsetTop + border+"px"; 

}

function aa(){

document.getElementById('bigbox').style.display="none";
document.getElementById('view').style.border="none";
}
function bb(){
 document.getElementById('bigbox').style.display="block";
 document.getElementById('view').style.border="1px solid #FF9900";
 //document.getElementById('view').style.background="#009999";
 //document.getElementById('view').style.filter="alpha(opacity=40)";
}