(function(){
    if(!window.zzc){window['zzc'] = {} };
    function isIE(){ return (document.all) ? true : false;};
    window['zzc']['isIE'] = isIE;
    function $(id){return typeof id == 'string' ? document.getElementById(id) : id};
    window['zzc']['$'] = $;
    function $$(id,tag){return $(id).getElementsByTagName(tag);}
    window['zzc']['$$'] = $$;
    function getElementsByClassName(name,type){
    var r=[];
    var re=new RegExp("(^|\\s)"+name+"(\\s|$)");
    var elem=document.getElementsByTagName(type||"*");
    for(var i=0;i<elem.length;i++){
    if(re.test(elem[i].className)) r.push(elem[i]);
    }
    return r;
    }
    window['zzc']['getElementsByClassName'] = getElementsByClassName;
    function addEvent(eventTarget,eventType,fnHandler){
    if(eventTarget.addEventListener){//for FF
    eventTarget.addEventListener (eventType,fnHandler,false);
    } else if(eventTarget.attachEvent){//for IE
    eventTarget.attachEvent("on" + eventType,fnHandler);
    } else{//for other
    eventTarget["on" + eventType] = fnHandler;
    }
    };
    window['zzc']['addEvent'] = addEvent;
    function removeEvent(eventTarget,eventType,fnHandler){
    if(eventTarget.removeEventListener){//for FF
    eventTarget.removeEventListener (eventType,fnHandler,false);
    } else if(eventTarget.detachEvent){//for IE
    eventTarget.detachEvent("on" + eventType,fnHandler);
    } else{//for other
    eventTarget["on" + eventType] = null;
    }
    };
    window['zzc']['removeEvent'] = removeEvent;
    function getBrowerWindowSize(){
    var de = document.documentElement;
    return{
    'width':(self.innerWidth||( de && de.offsetWidth )||document.body.offsetWidth),
    'height':(self.innerHeight||(de && de.offsetHeight)||document.body.offsetHeight)
    }
    };
    window['zzc']['getBrowerWindowSize'] = getBrowerWindowSize;
    function getPageSize(){
    var de=document.documentElement;
    return{
    'width':(document.body.scrollWidth||(de&&de.scrollWidth)),
    'height':(document.body.scrollHeight||(de&&de.scrollHeight))
    }
    };
    window['zzc']['getPageSize'] = getPageSize;
    function pageX(elem){
    return elem.offsetParent?(elem.offsetLeft+pageX(elem.offsetParent)):elem.offsetLeft;
    }
    window['zzc']['pageX'] = pageX;
    function pageY(elem){
    return elem.offsetParent?(elem.offsetTop+pageY(elem.offsetParent)):elem.offsetTop;
    }
    window['zzc']['pageY'] = pageY;
    })();
    function Drag(activeObj,dragObj,options){
    var aObj = zzc.$(activeObj);//激活元素
    var dObj = zzc.$(dragObj);//拖动元素
    var iDiffX = 0;
    var iDiffY = 0;
    var Options = options || {};
    var Limit = Options.Limit||false;
    var mxLeft = parseInt(Options.mxLeft)||0;//左边限制
    var mxRight = parseInt(Options.mxRight)||0;//右边限制
    var mxTop = parseInt(Options.mxTop)||0;//上边限制
    var mxBottom = parseInt(Options.mxBottom)||0;//下边限制
    var onMove = Options.onMove||function(){};//移动时执行
    (function start(){
    zzc.addEvent(aObj,'mousedown',handleMouseDown);
    })();
    function handleMouseMove(oEvent){
    var oEvent = window.event || arguments[0];
    var iLeft = oEvent.clientX - iDiffX, iTop = oEvent.clientY - iDiffY;
    if(Limit){
    var iRight = iLeft + dObj.offsetWidth - mxRight, iBottom = iTop + dObj.offsetHeight - mxBottom;
    if(iRight > 0) iLeft -= iRight;
    if(iBottom > 0) iTop -= iBottom;
    if(mxLeft > iLeft) iLeft = mxLeft;
    if(mxTop > iTop) iTop = mxTop;
    }
    dObj.style.left = iLeft + 'px';
    dObj.style.top = iTop + 'px';
    onMove();
    };
    function handleMouseDown(oEvent){
    //清除选择(ie设置捕获后默认带这个)
    window.getSelection && window.getSelection().removeAllRanges();
    var oEvent = window.event || arguments[0];
    dObj.style.position = "absolute";
    iDiffX = oEvent.clientX - dObj.offsetLeft;
    iDiffY = oEvent.clientY - dObj.offsetTop;
    zzc.addEvent(document,'mousemove',handleMouseMove);
    zzc.addEvent(document,'mouseup',handleMouseUp);
    if(zzc.isIE()){
    zzc.addEvent(dObj, "losecapture", handleMouseUp);
    dObj.setCapture();
    }else{
    zzc.addEvent(window, "blur", handleMouseUp);
    }
    };
    function handleMouseUp(){
    zzc.removeEvent(document,'mousemove',handleMouseMove);
    zzc.removeEvent(document,'mouseup',handleMouseUp);
    if(zzc.isIE()){
    zzc.removeEvent(dObj, "losecapture", handleMouseUp);
    dObj.releaseCapture();
    }else{
    zzc.removeEvent(window, "blur", handleMouseUp);
    }
    };
    }
    //使图片滚动。
    function picSlideByDrag(picBox,picList,dragObj,options){
    var Options = options || {};
    var mxLeft = parseInt(Options.mxLeft)||0;//左边限制
    var mxRight = parseInt(Options.mxRight)||0;//右边限制
    var mxTop = parseInt(Options.mxTop)||0;//上边限制
    var mxBottom = mxTop + dragObj.clientHeight;//下边限制
    function init(){
    var picListChild = zzc.$$(picList,'li');
    var picListWidth = picListChild.length * picListChild[0].offsetWidth;
    picList.style.width = picListWidth + 'px';
    if(picListWidth <= picBox.clientWidth){
    dragObj.style.display = "none";
    }
    };
    function picSlide(){
    picList.style.left = -(((zzc.pageX(dragObj) - mxLeft)/(mxRight-mxLeft-dragObj.clientWidth))*(picList.clientWidth-picBox.clientWidth)) + "px";
    };
    init();
    Drag(dragObj,dragObj,{Limit:true,mxTop:mxTop,mxRight:mxRight,mxBottom:mxBottom,mxLeft:mxLeft,onMove:picSlide});
    };
    window.onload = function(){
    var picBox = zzc.$("picBox");
    var picList = zzc.$("picList");
    var scrollBar = zzc.$("scrollBar");
    var dragObj = zzc.$("dragObj");
    var initTop = zzc.pageY(scrollBar) + 1;
    var initLeft = zzc.pageX(scrollBar) + 1;
    var initRight = initLeft + scrollBar.clientWidth;
    picSlideByDrag(picBox,picList,dragObj,{mxTop:initTop,mxLeft:initLeft,mxRight:initRight});
    }