var diaphaneity = 60 ;   //透明度 100 为不透明
var margintop = 60 ;     //图片容器框离顶部的距离
var marginleft = 20 ;    //如果图片宽很大
var picpadding = 20 ; //图片容器空白
var shadowspeed = 10 ;    //透明渐变速度 
var OpacityValue = 0 ;  //透明度初始
var showmessage = "click  and view the original image";  //图片上显示的提示信息

var MB_STR = '<style type="text/css"><!--' +
            '.msgbox_mask{position:absolute;left:0px;top:0px;z-index:99999;background-color:#333333;width:100%;height:100%;}' +
            '.msgbox{background-color: #EFFAFE;position: absolute;height:auto; width:800px;z-index:1000000;font-size:12px;top:10px;border:1px solid #999999;}' +
            '.pic{padding: 6px 0px;border: 1px solid #CCC;background-color: #FFF;}' +
            '--></style>' +
            '<div id="msgBoxMask" class="msgbox_mask" style="filter: alpha(opacity=0);display:none;" onclick="MBMethod()"></div>' +
            '<div id="msbox" class="msgbox" style="display:none;" ><div id="movediv"  style="width:100%;height:20px;background-color:#666666;text-align:right;padding-top:4px;cursor:move;"><a href="#" style="margin-right:4px;" onclick="MBMethod();return false;" ><img style="border:0px;" src="img/closes.gif" /></a></div>'+
            '<div id="picbox" style="width:100%;overflow:auto;text-align:center;padding-top:'+picpadding+'px;padding-bottom:'+ picpadding +'px;" ><div style="width:200px;" ><img src="img/loading.gif" /></div></div></div>';
     
document.write(MB_STR);
 
function MessageBox(ImgObj){

  
//   ScrollTop = GetBrowserDocument().scrollTop; 
//   ScrollLeft = GetBrowserDocument().scrollLeft; 
//   GetBrowserDocument().style.overflow = "hidden";
//   GetBrowserDocument().scrollTop = ScrollTop;   
//   GetBrowserDocument().scrollLeft = ScrollLeft; 
      
//   this.$("msgBoxTitle").innerHTML = _title;
//   this.$("msgBoxIcon").innerHTML = _iconStr.toFormatString(_icon);
//   this.$("msgBoxContent").innerHTML = _content; 
//   this.$("msgBoxControl").innerHTML = _btnStr;
   
    
   
   try{document.getElementById("msgBoxMask").filters("alpha").opacity = 0;}catch(e){};
   document.getElementById("msgBoxMask").style.opacity = 0;
   document.getElementById("msgBoxMask").style.display = "";
   document.getElementById("msgBoxMask").style.height = GetBrowserDocument().scrollHeight + "px";
   document.getElementById("msgBoxMask").style.width = GetBrowserDocument().scrollWidth + "px";
   
  
  // this.$("msbox").style.height = GetBrowsrDocument().scrollHeight +"px";
  var pmsbox = document.getElementById("msbox");  //装img 的容器
  pmsbox.style.display = ""
  pmsbox.style.top=GetScrollTop() + margintop + "px" ;
  //pmsbox.style.left = "80px";
  
  //<div style='width:200px;top:100px;' ><img src='img/loading.gif' /></div>
  pmsbox.style.width = "400px" ;
  pmsbox.style.left =( document.body.offsetWidth - 400 )/2 +"px";
  //this.$("picbox").innerHTML = "";
  //alert(this.$("picbox").innerHTML);
  var picimg=new Image();   //图像载体
  picimg.src=ImgObj.alt;
  
  //alert(document.body.offsetWidth);
  //--------------设置显示位置
  //this.$("msbox").style.width=picimg.width + "px";
  
  //pmsbox.style.width = "200px";
  //pmsbox.style.top = "100px";
  
  if(picimg.width != null)   //IE,Opera 中onload事件的 bug
  {
     
     var countwidth = CountWidth(picimg.width);
     
     pmsbox.style.width = countwidth[1] + "px";
     pmsbox.style.left = countwidth[0] + "px";
     document.getElementById("picbox").innerHTML="<div class='pic'  style='margin-left;"+(picpadding - 6)+"px;width:"+(countwidth[1]- 2*picpadding +12  )+"px;' ><img  src='" + picimg.src + "' onmousewheel = 'bbimg(this)' width = '"+ (countwidth[1]- 2*picpadding  ) +"px'   /></div>";
    
     //Timer = setInterval("DoAlpha()",1);
    // return;
    //alert(this.$("picbox").innerHTML);
  }
  picimg.onload =function(){
    
    var countwidth = CountWidth(picimg.width);
     pmsbox.style.width = countwidth[1] + "px";
     pmsbox.style.left = countwidth[0] + "px";
     document.getElementById("picbox").innerHTML="<div class='pic' style='margin-left:"+(picpadding - 6)+"px;width:"+(countwidth[1]- 2*picpadding +12  )+"px;' ><img  src='" + picimg.src + "' onmousewheel = 'bbimg(this)' width = '"+ (countwidth[1] - 2*picpadding ) +"px'   /></div>";
     
     
     //alert(this.$("picbox").innerHTML);
    // return;
  }
  
   //this.$("picbox").innerHTML='<img src="img/1.jpg" />';
  OpacityValue = 0;
  Timer = setInterval("DoAlpha()",1);
  
}//<input type="button" onclick="MBMethod()" value="消除" />

function CountWidth(picwidth)
{
    var returnarray = new Array();
    var bodywidth = document.body.offsetWidth ;
    if(( 2 * marginleft + picwidth ) < bodywidth )
    {
        returnarray.push( (bodywidth - picwidth ) / 2 +picpadding ); //左空白边
        returnarray.push( picwidth + 2* picpadding);
    }
    else
    {
        returnarray.push( marginleft );
        returnarray.push( bodywidth - 2 * marginleft ); 
    }
    
    return returnarray ;
}
function bbimg(o){
var zoom=parseInt(o.style.zoom,10)||100;zoom+=event.wheelDelta/12;
if(zoom>0) o.style.zoom=zoom+'%';
return false;}

var OpacityValue = 0;
var ScrollTop = 0;
var ScrollLeft = 0;
function GetBrowserDocument()
{
   var _dcw = document.documentElement.clientHeight;
   var _dow = document.documentElement.offsetHeight;
   var _bcw = document.body.clientHeight;
   var _bow = document.body.offsetHeight;
   
   if(_dcw == 0) return document.body;
   if(_dcw == _dow) return document.documentElement;
   
   if(_bcw == _bow && _dcw != 0) 
     return document.documentElement;
   else
     return document.body;
}
function SetOpacity(obj,opacity){
        if(opacity >=1 ) opacity = opacity / 100;    
            
        try{obj.style.opacity = opacity; }catch(e){}
        
        try{ 
            if(obj.filters){
                obj.filters("alpha").opacity = opacity * 100;
            }
            
        }catch(e){}
        if (OpacityValue == diaphaneity )
            clearTimeout(Timer);
}
    
function DoAlpha(){
    if (OpacityValue > diaphaneity){clearInterval(Timer);return 0;}
    OpacityValue += shadowspeed ;    
    if(OpacityValue > diaphaneity )
        OpacityValue = diaphaneity ;
    
    SetOpacity(this.$("msgBoxMask"),OpacityValue);
}
function MBMethod(obj)
{   

   document.getElementById("msgBoxMask").style.display = "none";
   document.getElementById("msbox").style.display = "none";     
//   GetBrowserDocument().style.overflow = ""; 
//   GetBrowserDocument().scrollTop = ScrollTop;
//   GetBrowserDocument().scrollLeft = ScrollLeft; 
}



var agt=navigator.userAgent.toLowerCase();
var ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1) && (agt.indexOf("omniweb") == -1));

function IeTrueBody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}

function GetScrollTop(){
 return ie ? IeTrueBody().scrollTop : window.pageYOffset;
}

function AddEvent(oTarget, sEventType, fnHandler)
{
    

    if (oTarget.addEventListener) {
        oTarget.addEventListener(sEventType, fnHandler, false);
    } else if (oTarget.attachEvent) {
        oTarget.attachEvent("on" + sEventType, fnHandler);
    } else {
        oTarget["on" + sEventType] = fnHandler;
    }

}

function PageUnload()
 {
    var images=document.body.getElementsByTagName("img");
    for( i=0 ; i< images.length; i++)
    {
        
        if(images[i].alt != "" )
        {
            if(ie)
                images[i].onclick=function() { MessageBox(this);}
            else
               // images[i].addEventListener("click",function(){MessageBox(images[i]);},false);
            //this.$("div").click(function(){alert("dfdf");});
            AddEvent(images[i],"click",function(){MessageBox(this);});
            
            images[i].style.cursor = "pointer" ;
            images[i].title = showmessage ;
        }
    }
    //this.$("i1").addEventListener("click",function(){MessageBox(this.$("i1"))},false);
 }

    
      
      
/*
    Copyright Robert Nyman, http://www.robertnyman.com
    Free to use if this text is included
    // modified slightly based on Prototype
*/
function getStyle(oElm, strCssRule){
    var strValue = "";
    if(document.defaultView && document.defaultView.getComputedStyle){
        var css = document.defaultView.getComputedStyle(oElm, null);
        strValue = css ? css.getPropertyValue(strCssRule) : null;
    }
    else if(oElm.currentStyle){
        strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
            return p1.toUpperCase();
        });
        strValue = oElm.currentStyle[strCssRule];
    }
    return strValue;
}
function Draggable(el,elbox)
{
var xDelta = 0, yDelta = 0;
var xStart = 0, yStart = 0;

function enddrag()
{
    document.onmouseup = null;
    document.onmousemove = null;
}

function drag(e)
{
    e = e || window.event;
    xDelta = xStart - parseInt(e.clientX);
    yDelta = yStart - parseInt(e.clientY);
    xStart = parseInt(e.clientX);
    yStart = parseInt(e.clientY);
    el.style.top = (parseInt(el.style.top) - yDelta) + 'px';
    el.style.left = (parseInt(el.style.left) - xDelta) + 'px';
}

function md(e)
{
    e = e || window.event;
    xStart = parseInt(e.clientX);
    yStart = parseInt(e.clientY);
    debug(xStart+"--"+yStart);
    el.style.top = parseInt(getStyle(el,'top')) + 'px';
    el.style.left = parseInt(getStyle(el,'left')) + 'px';
    debug(el.style.top);
    document.onmouseup = enddrag;
    document.onmousemove = drag;
    return false;
}

elbox.onmousedown = md;

}
//window.onload = function()
//{


//}
function debug(msg)
{
   //alert(msg);
}