$(function()
{
    var ZSEPictureChange=$(".ZSEPictureChange");
    for(var i=0;i<ZSEPictureChange.length;i++)
    {
        var width=ZSEPictureChange.eq(i).width();
        var height=ZSEPictureChange.eq(i).height();
        var imgInfoArray=ZSEPictureChange.eq(i).attr("imgInfo").split("|");
        var urlInfoArray=ZSEPictureChange.eq(i).attr("urlInfo").split("|");
        var titleInfoArray=ZSEPictureChange.eq(i).attr("titleInfo").split("|");
        var html="";
        var n=imgInfoArray.length;
        if(n>0)
        {
            html+="<div index=\"0\" selected=\"true\"  class=\"ZSEPictureChange_titleDiv\" style=\"width:100%;height:30px;cursor:default;position:absolute;z-index:5;filter:alpha(opacity=10);opacity:0.1;left:0px;top:0px;text-align:left;overflow:hidden;line-height:35px;background-color:#000000;\"></div>\r\n";
            for(var j=0;j<n;j++)
            {
                var right=j*21;
                var bottom=$.browser.msie?-1:0;
                if(j<(n-1))
                {
                    html+="<div index=\""+(n-j-1)+"\" selected=\"false\"  class=\"ZSEPictureChange_picBig\" style=\"display:none;width:"+width+"px;height:"+height+"px;position:absolute;left:0px;top:0px;overflow:hidden\"><a href=\""+urlInfoArray[(n-j-1)]+"\" target='_blank'><img src=\""+imgInfoArray[(n-j-1)]+"\" style=\"width:"+width+"px;height:"+height+"px;border-width:0px\"/></a></div>\r\n";
                    html+="<div index=\""+(n-j-1)+"\" selected=\"false\"  class=\"ZSEPictureChange_title\" style=\"display:none;cursor:default;position:absolute;z-index:6;height:30px;line-height:30px;left:5px;top:0px;text-align:left;color:#ffffff;font-family: 黑体;font-size: 10pt;font-weight:bold;\">"+ZSEPictureChange_titleCutString(titleInfoArray[j],width)+"</div>\r\n";
                    html+="<div index=\""+(n-j-1)+"\" selected=\"false\"  class=\"ZSEPictureChange_num\" style=\"width:20px;height:15px;position:absolute;z-index:10;bottom:"+bottom+";right:"+right+"px;background-color: #000000;filter: alpha(opacity=50);opacity: 0.5;font-family: 黑体,宋体, Arial, Helvetica, sans-serif;font-size: 9pt;color: #FFFFFF;text-align:center;line-height:15px;overflow:hidden;cursor:pointer;\">"+(n-j)+"</div>\r\n";
                }
                else
                {
                    html+="<div index=\"0\" selected=\"true\"  class=\"ZSEPictureChange_picBig\" style=\"width:"+width+"px;height:"+height+"px;position:absolute;left:0px;top:0px;overflow:hidden\" urlInfo=\""+urlInfoArray[0]+"\"><a href=\""+urlInfoArray[0]+"\" target='_blank'><img src=\""+imgInfoArray[0]+"\" style=\"width:"+width+"px;height:"+height+"px;border-width:0px\"/></a></div>\r\n";
                    html+="<div index=\"0\" selected=\"true\"  class=\"ZSEPictureChange_title\" style=\"cursor:default;position:absolute;z-index:6;height:30px;line-height:30px;left:5px;top:0px;text-align:left;color:#ffffff;font-family: 黑体;font-size: 10pt;font-weight:bold;\">"+ZSEPictureChange_titleCutString(titleInfoArray[0],width)+"</div>\r\n";
                    
                    html+="<div index=\"0\" selected=\"true\" class=\"ZSEPictureChange_num\" style=\"width:20px;height:15px;position:absolute;bottom:"+bottom+";right:"+right+"px;background-color:red;filter: alpha(opacity=100);opacity:1;font-family: 黑体,宋体, Arial, Helvetica, sans-serif;font-size: 9pt;color: #FFFFFF;text-align:center;line-height:15px;overflow:hidden;cursor:pointer;\">1</div>\r\n";
                }
            }
        }
        ZSEPictureChange.eq(i).html(html);
    }
    ZSEPictureChange_Style();
    ZSEPictureChange_CreateTimer();
});

//样式
function ZSEPictureChange_Style()
{
    var num=$(".ZSEPictureChange_num");
    num.hover
    (
        function()
        {
           $(this).css({"background-color":"red","color":"#ffffff","filter":"alpha(opacity=100)","opacity":"1"});            
        },
        function()
        {
            if($(this).attr("selected")=="false")
                $(this).css({"background-color":"#000000","color":"#FFFFFF","filter":"alpha(opacity=50)","opacity":"0.5"});
        }
    );
    num.bind("click",function()
    {
       var index=$(this).attr("index");
       ZSEPictureChange_Show($(this));
    });
}

//开辟监视器
function ZSEPictureChange_CreateTimer()
{
    var Timer=setInterval(function()
    {
        var ZSEPictureChange=$(".ZSEPictureChange");
        for(var i=0;i<ZSEPictureChange.length;i++)
        {
            var imgInfoArray=ZSEPictureChange.eq(i).attr("imgInfo").split("|");
            var index=parseInt(ZSEPictureChange.eq(i).find(".ZSEPictureChange_num[selected='true']").attr("index"),10);
            var n=imgInfoArray.length-1;
            if(index==n)
            {
                index=-1;
            }
            var numJQ=ZSEPictureChange.eq(i).find(".ZSEPictureChange_num[index='"+(index+1)+"']");
            ZSEPictureChange_resetNum(numJQ);
            ZSEPictureChange_Show(numJQ);
        }
    },5000);
}

function ZSEPictureChange_Show(numJQ)
{
    var index=numJQ.attr("index");
    ZSEPictureChange_resetNum(numJQ);
    numJQ.parents(".ZSEPictureChange").find(".ZSEPictureChange_titleDiv").hide().slideDown(500);
    numJQ.parents(".ZSEPictureChange").find(".ZSEPictureChange_title[selected='true']").hide().attr("selected","false");
    numJQ.parents(".ZSEPictureChange").find(".ZSEPictureChange_title[index='"+index+"']").show().attr("selected","true");
    numJQ.parents(".ZSEPictureChange").find(".ZSEPictureChange_picBig[selected='true']").fadeOut(500).attr("selected","false");
    numJQ.parents(".ZSEPictureChange").find(".ZSEPictureChange_picBig[index='"+index+"']").fadeIn(500).attr("selected","true");
}

function ZSEPictureChange_resetNum(numJQ)
{
    numJQ.parents(".ZSEPictureChange").find(".ZSEPictureChange_num").attr("selected","false").css({"background-color":"#000000","color":"#FFFFFF","filter":"alpha(opacity=50)","opacity":"0.5"});
    numJQ.attr("selected","true").css({"background-color":"red","color":"#ffffff","filter":"alpha(opacity=100)","opacity":"1"});
}


function ZSEPictureChange_titleCutString(title,width)
{
   var len=title.length;
   var isCut=false;
   if(len*18>width)
   {
       len=width/18;
       isCut=true;
   }
   if(isCut)
       return title.substr(0,len)+"..";
   return title.substr(0,len);
}