Highslide JS

/******************************************************************************
Name:    Highslide JS
Version: 3.1.0 （March 1 2007）
Author:  Torstein H鴑si
Support: http://vikjavev.no/highslide/forum
Email:   See http://vikjavev.no/megsjol

Licence:
Highslide JS is licensed under a Creative Commons Attribution-NonCommercial 2.5
License （http://creativecommons.org/licenses/by-nc/2.5/）.

You are free:
    * to copy, distribute, display, and perform the work
    * to make derivative works

Under the following conditions:
    * Attribution. You must attribute the work in the manner  specified by  the
      author or licensor.
    * Noncommercial. You may not use this work for commercial purposes.

* For  any  reuse  or  distribution, you  must make clear to others the license
  terms of this work.
* Any  of  these  conditions  can  be  waived  if  you  get permission from the
  copyright holder.

Your fair use and other rights are in no way affected by the above.
******************************************************************************/

var hs = {

// Apply your own settings here, or override them in the html file.
graphicsDir : "highslide/graphics/",
restoreCursor : "zoomout.cur", // necessary for preload
fullExpandIcon : "fullexpand.gif",
expandSteps : 10, // number of steps in zoom. Each step lasts for duration/step milliseconds.
expandDuration : 250, // milliseconds
restoreSteps : 10,
restoreDuration : 250,
allowMultipleInstances: true,
hideThumbOnExpand : true,
captionSlideSpeed : 1, // set to 0 to disable slide in effect
outlineWhileAnimating : 0, // not recommended, animation gets jaggy on slow systems.
outlineStartOffset : 3, // ends at 10
marginLeft : 10,
marginRight : 35, // leave room for scrollbars + outline
marginTop : 10,
marginBottom : 35, // leave room for scrollbars + outline
zIndexCounter : 1001, // adjust to other absolutely positioned elements
fullExpandTitle : "放大到实际尺寸",
restoreTitle : "单击可关闭图片, 本窗口可拖动。使用←→键察看上一图或下一图片。",
focusTitle : "切换到这幅图片",
loadingText : "loading...",
loadingTitle : "点击关闭",
loadingOpacity : 0.75,
showCredits : false, // you can set this to false if you want
creditsText : "Powered by <i>Highslide JS</i>",
creditsHref : "http://vikjavev.no/highslide/？user=1",
creditsTitle : "Go to the Highslide JS homepage",

// These settings can also be overridden inline for each image
anchor : "auto", // where the image expands from
align : "auto", // position in the client （overrides anchor）
captionId : null,
captionTemplateId : null,
slideshowGroup : null, // defines groups for next/previous links and keystrokes
spaceForCaption : 30, // leaves space below images with captions
minWidth: 200,
minHeight: 200,
allowSizeReduction: true, // allow the image to reduce to fit client size. If false, this overrides minWidth and minHeight
outlineType : "drop-shadow", // set null to disable outlines
wrapperClassName : null, // for enhanced css-control
enableKeyListener : true,


// END OF YOUR SETTINGS

// declare internal properties
preloadTheseImages : new Array（）,
continuePreloading: true,
expandedImagesCounter : 0,
expanders : new Array（）,
overrides : new Array（
    "anchor",
    "align",
    "outlineType",
    "outlineWhileAnimating",
    "spaceForCaption",
    "wrapperClassName",
    "minWidth",
    "minHeight",
    "captionId",
    "captionTemplateId",
    "allowSizeReduction",
    "slideshowGroup",
    "enableKeyListener"
）,
overlays : new Array（）,
toggleImagesGroup : null,
pendingOutlines : new Array（）,

// drag functionality
ie : （document.all && ！window.opera）,
safari : navigator.userAgent.indexOf（"Safari"）！= -1,
hasFocused : false,

$ : function （id） {
    return document.getElementById（id）;
},

push : function （arr, val） {
    arr[arr.length] = val;
},

createElement : function （tag, attribs, styles, parent） {
    var el = document.createElement（tag）;
    if （attribs） hs.setAttribs（el, attribs）;
    if （styles） hs.setStyles（el, styles）;
    if （parent） parent.appendChild（el）;
    return el;
},

setAttribs : function （el, attribs） {
    for （var x in attribs） {
        el[x] = attribs[x];
    }
},

setStyles : function （el, styles） {
    for （var x in styles） {
        try { el.style[x] = styles[x]; }
        catch （e） {}
    }
},

ieVersion : function （） {
    arr = navigator.appVersion.split（"MSIE"）;
    return parseFloat（arr[1]）;
},

clientInfo : function （）    {
    var iebody = （document.compatMode && document.compatMode ！= "BackCompat"）
        ？ document.documentElement : document.body;

    this.width = hs.ie ？ iebody.clientWidth : self.innerWidth;
    this.height = hs.ie ？ iebody.clientHeight : self.innerHeight;
    this.scrollLeft = hs.ie ？ iebody.scrollLeft : pageXOffset;
    this.scrollTop = hs.ie ？ iebody.scrollTop : pageYOffset;
} ,

position : function（el）    {
    var parent = el;
    var p = Array（）;
    p.x = parent.offsetLeft;
    p.y = parent.offsetTop;
    while （parent.offsetParent）    {
        parent = parent.offsetParent;
        p.x += parent.offsetLeft;
        p.y += parent.offsetTop;
    }
    return p;
},

expand : function（a, params, contentType） {
    try {
        new HsExpander（a, params, contentType）;
        return false;

    } catch （e） {
        return true;
    }

},

focusTopmost : function（） {
    var topZ = 0;
    var topmostKey = -1;
    for （i = 0; i < hs.expanders.length; i++） {
        if （hs.expanders[i]） {
            if （hs.expanders[i].wrapper.style.zIndex && hs.expanders[i].wrapper.style.zIndex > topZ） {
                topZ = hs.expanders[i].wrapper.style.zIndex;

                topmostKey = i;
            }
        }
    }
    if （topmostKey == -1） hs.focusKey = -1;
    else hs.expanders[topmostKey].focus（）;
},

closeId : function（elId） { // for text links
    for （i = 0; i < hs.expanders.length; i++） {
        if （hs.expanders[i] && （hs.expanders[i].thumb.id == elId || hs.expanders[i].a.id == elId）） {
            hs.expanders[i].doClose（）;
            return;
        }
    }
},

close : function（el） {
    var key = hs.getWrapperKey（el）;
    if （hs.expanders[key]） hs.expanders[key].doClose（）;
    return false;
},

toggleImages : function（closeId, expandEl） {
    if （closeId） hs.closeId（closeId）;
    if （hs.ie） expandEl.href = expandEl.href.replace（"about:（blank）？", ""）; // mysterious IE thing
    hs.toggleImagesExpandEl = expandEl;
    return false;
},

getAdjacentAnchor : function（key, op） {
    var aAr = document.getElementsByTagName（"A"）;
    var hsAr = new Array;
    var activeI = -1;
    var j = 0;
    for （i = 0; i < aAr.length; i++） {
        if （hs.isHsAnchor（aAr[i]） && （（hs.expanders[key].slideshowGroup == hs.getParam（aAr[i], "slideshowGroup"）））） {
            hsAr[j] = aAr[i];
            if （hs.expanders[key] && aAr[i] == hs.expanders[key].a） {
                activeI = j;
            }
            j++;
        }
    }
    return hsAr[activeI + op];

},

getParam : function （a, param） {
    try {
        var s = a.onclick.toString（）;
        var oneLine = s.replace（/s/g, " "）;
        var sParams = oneLine.replace（/.*？hs.（htmlE|e）xpands*？（s*？thiss*？,s*？{（.*？）}.*？$/, "$2"）;
        if （hs.safari） { // stupid bug
            for （var i = 0; i < hs.overrides.length; i++） {
                sParams = sParams.replace（hs.overrides[i] +":", ","+ hs.overrides[i] +":"）.replace（/^s*？,/, ""）;
            }
        }
        if （oneLine == sParams） return null;
        eval（"var arr = {"+ sParams +"};"）;
        for （var x in arr） {
            if （x == param） return arr[x];
        }
    } catch （e） {
        return null;
    }
},

getSrc : function （a） {
    var src = hs.getParam（a, "src"）;
    if （src） return src;
    return a.rel.replace（/_slash_/g, "/"） || a.href;
},

previousOrNext : function （el, op） {
    if （typeof el == "object"） var activeKey = hs.getWrapperKey（el）;
    else if （typeof el == "number"） var activeKey = el;
    if （hs.expanders[activeKey]） {
        hs.toggleImagesExpandEl = hs.getAdjacentAnchor（activeKey, op）;
        hs.expanders[activeKey].doClose（）;
    }

    return false;
},

previous : function （el） {
    return hs.previousOrNext（el, -1）;
},

next : function （el） {
    return hs.previousOrNext（el, 1）;
},

keyHandler : function（e） {
    if （！e） e = window.event;
    if （！e.target） e.target = e.srcElement; // ie
    if （e.target.form） return; // form element has focus

    var op = null;
    switch （e.keyCode） {
        case 34: // Page Down
        case 39: // Arrow right
        case 40: // Arrow left
            op = 1;
            break;
        case 33: // Page Up
        case 37: // Arrow left
        case 38: // Arrow down
            op = -1;
            break;
        case 27: // Escape
        case 13: // Enter
            if （hs.expanders[hs.focusKey]） hs.expanders[hs.focusKey].doClose（）;
            return false;
    }
    if （op ！= null） {
        hs.removeEventListener（document, "keydown", hs.keyHandler）;
        if （hs.expanders[hs.focusKey] && ！hs.expanders[hs.focusKey].enableKeyListener） return true;
        return hs.previousOrNext（hs.focusKey, op）;
    }
    else return true;
},

registerOverlay : function （overlay） {
    hs.push（hs.overlays, overlay）;
},

getWrapperKey : function （el） {
    var key = -1;
    while （el.parentNode）    {
        el = el.parentNode;
        if （el.id && el.id.match（/^highslide-wrapper-[0-9]+$/）） {
            key = el.id.replace（/^highslide-wrapper-（[0-9]+）$/, "$1"）;
            break;
        }
    }
    return key;
},

cleanUp : function （） {
    if （hs.toggleImagesExpandEl） {
        hs.toggleImagesExpandEl.onclick（）;
        hs.toggleImagesExpandEl = null;
    } else {
        for （i = 0; i < hs.expanders.length; i++） {
            if （hs.expanders[i] && hs.expanders[i].isExpanded） hs.focusTopmost（）;
        }
    }
},

mouseClickHandler : function（e）
{
    if （！e） e = window.event;
    if （e.button > 1） return true;
    if （！e.target） e.target = e.srcElement;


    var fobj = e.target;

    while （fobj.parentNode
        && ！（fobj.className && fobj.className.match（/highslide-（image|move|html）/）））
    {
        fobj = fobj.parentNode;
    }

    if （！fobj.parentNode） return;

    hs.dragKey = hs.getWrapperKey（fobj）;
    if （fobj.className.match（/highslide-（image|move）/）） {
        var isDraggable = true;
        var wLeft = parseInt（hs.expanders[hs.dragKey].wrapper.style.left）;
        var wTop = parseInt（hs.expanders[hs.dragKey].wrapper.style.top）;
    }

    if （e.type == "mousedown"） {
        if （isDraggable） // drag or focus
        {
            hs.dragObj = hs.expanders[hs.dragKey].content;

            if （fobj.className.match（"highslide-image"）） hs.dragObj.style.cursor = "move";

            hs.leftBeforeDrag = wLeft;
            hs.topBeforeDrag = wTop;

            hs.dragX = e.clientX;
            hs.dragY = e.clientY;
            hs.addEventListener（document, "mousemove", hs.mouseMoveHandler）;
            if （e.preventDefault） e.preventDefault（）; // FF

            if （hs.dragObj.className.match（/highslide-（image|html）-blur/）） {
                hs.expanders[hs.dragKey].focus（）;
                hs.hasFocused = true;
            }
            return false;
        }
        else if （fobj.className.match（/highslide-html/）） { // just focus
            hs.expanders[hs.dragKey].focus（）;
            hs.expanders[hs.dragKey].redoShowHide（）;
            hs.hasFocused = false; // why？？
        }

    } else if （e.type == "mouseup"） {
        hs.removeEventListener（document, "mousemove", hs.mouseMoveHandler）;
        if （isDraggable && hs.expanders[hs.dragKey]） {
            if （fobj.className.match（"highslide-image"）） {
                fobj.style.cursor = hs.styleRestoreCursor;
            }
            var hasMoved = wLeft ！= hs.leftBeforeDrag || wTop ！= hs.topBeforeDrag;
            if （！hasMoved && ！hs.hasFocused && ！fobj.className.match（/highslide-move/）） {
                hs.expanders[hs.dragKey].doClose（）;
            } else if （hasMoved || （！hasMoved && hs.hasHtmlExpanders）） {
                hs.expanders[hs.dragKey].redoShowHide（）;
            }
            hs.hasFocused = false;

        } else if （fobj.className.match（"highslide-image-blur"）） {
            fobj.style.cursor = hs.styleRestoreCursor;
        }
    }
},

mouseMoveHandler : function（e）
{
    if （！hs.expanders[hs.dragKey] || ！hs.expanders[hs.dragKey].wrapper） return;
    if （！e） e = window.event;

    var exp = hs.expanders[hs.dragKey];
    var w = exp.wrapper;
    w.style.left = hs.leftBeforeDrag + e.clientX - hs.dragX +"px";
    w.style.top  = hs.topBeforeDrag + e.clientY - hs.dragY +"px";

    if （exp.objOutline） {
        var o = exp.objOutline;
        o.outer.style.left = （parseInt（w.style.left） - o.offset） +"px";
        o.outer.style.top = （parseInt（w.style.top） - o.offset） +"px";
    }

    return false;
},

addEventListener : function （el, event, func） {
    if （document.addEventListener） el.addEventListener（event, func, false）;
    else if （document.attachEvent） el.attachEvent（"on"+ event, func）;
    else el[event] = func;
},

removeEventListener : function （el, event, func） {
    if （document.removeEventListener） el.removeEventListener（event, func, false）;
    else if （document.detachEvent） el.detachEvent（"on"+ event, func）;
    else el[event] = null;
},

isHsAnchor : function （a） {
    return （a.className && （a.className.match（"highslide$"） || a.className.match（"highslide "）））;
},

preloadFullImage : function （i） {
    if （hs.continuePreloading && hs.preloadTheseImages[i] && hs.preloadTheseImages[i] ！= "undefined"） {
        var img = document.createElement（"img"）;
        img.onload = function（） { hs.preloadFullImage（i + 1）; };
        img.src = hs.preloadTheseImages[i];
    }
},

preloadImages : function （number） {
    if （number） this.numberOfImagesToPreload = number;

    var j = 0;

    var aTags = document.getElementsByTagName（"A"）;
    for （i = 0; i < aTags.length; i++） {
        a = aTags[i];
        if （hs.isHsAnchor（a）） {
            if （j < this.numberOfImagesToPreload） {
                hs.preloadTheseImages[j] = hs.getSrc（a）;
                j++;
            }
        }
    }

    // preload outlines
    new HsOutline（hs.outlineType, function （） { hs.preloadFullImage（0）} ）;

    // preload cursor
    var cur = document.createElement（"img"）;
    cur.src = hs.graphicsDir + hs.restoreCursor;
},

genContainer : function （） {
    if （！hs.container） {
        hs.container = hs.createElement（"div",
            null,
            { position: "absolute", left: 0, top: 0, width: "100%", zIndex: hs.zIndexCounter },
            document.body
        ）;
    }
}
}; // end hs object

//-----------------------------------------------------------------------------
HsOutline = function （outlineType, onLoad） {
    if （！outlineType） return;
    if （onLoad） this.onLoad = onLoad;
    this.outlineType = outlineType;
    this.outline = new Array（）;
    var v = hs.ieVersion（）;

    hs.genContainer（）;

    this.hasAlphaImageLoader = hs.ie && v >= 5.5 && v < 8;
    this.hasPngSupport = ！hs.ie || （hs.ie && v >= 8）;
    this.hasOutline = this.outlineType && （this.hasAlphaImageLoader || this.hasPngSupport）;

    this.outer = hs.createElement（
        "table",
        {
            cellSpacing: 0 // saf
        },
        {
            visibility: "hidden",
            position: "absolute",
            zIndex: hs.zIndexCounter++,
            borderCollapse: "collapse"
        },
        hs.container
    ）;
    this.tbody = hs.createElement（"tbody", null, null, this.outer）;

    this.preloadOutlineElement（1）; // recursive
};

HsOutline.prototype.preloadOutlineElement = function （i） {
    if （this.outline[i] && this.outline[i].onload） { // Gecko multiple onloads bug
        this.outline[i].onload = null;
        return;
    }

    this.offset = this.hasOutline ？ 10 : 0;
    if （i == 1 || i == 4 || i == 6） this.tr = hs.createElement（"tr", null, null, this.tbody）;
    if （i == 5） this.inner = hs.createElement（"td", null, { padding: 0, margin: 0, border: 0, position: "relative" }, this.tr）;

    var files = Array （0,8,1,2,7,3,6,5,4）;
    var src = hs.graphicsDir + "outlines/"+ this.outlineType +"/"+ files[i] +".png";

    if （this.hasAlphaImageLoader） {
        var bgKey = "filter";
        var bgValue = "progid:DXImageTransform.Microsoft.AlphaImageLoader（"
                    + "enabled=true, sizingMethod=scale src=""+ src + ""） ";
    } else if （this.hasPngSupport || this.hasIe7Bug） {
        var bgKey = "background";
        var bgValue = "url（"+ src +"）";
    }
    var styles = { lineHeight: 0, fontSize: 0, padding: 0, margin: 0, border: 0 };
    if （this.hasOutline） styles[bgKey] = bgValue;

    var td = hs.createElement（"td", null, styles）;

    var img = hs.createElement（"img", null, { visibility: "hidden", display: "block" }, td）; // for onload trigger

    var dim = 2 * this.offset;
    hs.setStyles （td, { height: dim +"px", width: dim +"px"} ）;

    var pThis = this;
    if （i < 8） img.onload = function（） { pThis.preloadOutlineElement（i + 1）; };
    else img.onload = function（） {
        hs.pendingOutlines[pThis.outlineType] = pThis;
        if （pThis.onLoad） pThis.onLoad（）;
    };

    this.tr.appendChild（td）;
    if （this.hasOutline） img.src = src;
    else img.onload（）;
};

HsOutline.prototype.destroy = function（） {
    this.outer.parentNode.removeChild（this.outer）;
};

//-----------------------------------------------------------------------------
// The expander object
HsExpander = function（a, params, contentType） {
    hs.continuePreloading = false;

    // override inline parameters
    for （i = 0; i < hs.overrides.length; i++） {
        var name = hs.overrides[i];
        if （params && typeof params[name] ！= "undefined"） this[name] = params[name];
        else this[name] = hs[name];
    }

    if （params && params.thumbnailId） {
        var el = hs.$（params.thumbnailId）;

    } else { // first img within anchor
        for （i = 0; i < a.childNodes.length; i++） {
            if （a.childNodes[i].tagName && a.childNodes[i].tagName == "IMG"） {
                var el = a.childNodes[i];
                break;
            }
        }
    }
    if （！el） el = a;


    // cancel other
    for （i = 0; i < hs.expanders.length; i++） {
        if （hs.expanders[i] && hs.expanders[i].thumb ！= el && ！hs.expanders[i].onLoadStarted） {
            hs.expanders[i].cancelLoading（）;
        }
    }
    // check if already open
    for （i = 0; i < hs.expanders.length; i++） {
        if （hs.expanders[i] && hs.expanders[i].thumb == el） {
            hs.expanders[i].focus（）;
            return false;
        }

        else if （hs.expanders[i] && ！hs.allowMultipleInstances） {
            hs.expanders[i].doClose（）;
        }

    }

    this.key = hs.expandedImagesCounter++;
    hs.expanders[this.key] = this;
    if （contentType == "html"） {
        this.isHtml = true;
        this.contentType = "html";
    } else {
        this.isImage = true;
        this.contentType = "image";
    }

    this.a = a;

    this.thumbsUserSetId = el.id || a.id;
    this.thumb = el;

    this.overlays = new Array（）;

    var pos = hs.position（el）;

    // instanciate the wrapper
    this.wrapper = hs.createElement（
        "div",
        {
            id: "highslide-wrapper-"+ this.key,
            className: this.wrapperClassName
        },
        {
            visibility: "hidden",
            position: "absolute",
            zIndex: hs.zIndexCounter++
        }
    ）;

    // store properties of thumbnail
    this.thumbWidth = el.width ？ el.width : el.offsetWidth;
    this.thumbHeight = el.height ？ el.height : el.offsetHeight;
    this.thumbLeft = pos.x;
    this.thumbTop = pos.y;
    this.thumbClass = el.className;

    // thumb borders
    this.thumbOffsetBorderW = （this.thumb.offsetWidth - this.thumbWidth） / 2;
    this.thumbOffsetBorderH = （this.thumb.offsetHeight - this.thumbHeight） / 2;

        // get the wrapper
    if （hs.pendingOutlines[this.outlineType]） {
        this.connectOutline（）;
        this[this.contentType +"Create"]（）;
    } else if （！this.outlineType） {
        hs.genContainer（）;
        this[this.contentType +"Create"]（）;
    } else {
        this.displayLoading（）;
        var pThis = this;
        new HsOutline（this.outlineType,
            function （） {
                pThis.connectOutline（）;
                pThis[pThis.contentType +"Create"]（）;
            }
        ）;
    }

};

HsExpander.prototype.connectOutline = function（x, y） {
    var w = hs.pendingOutlines[this.outlineType];
    this.objOutline = w;
    hs.pendingOutlines[this.outlineType] = null;
};

HsExpander.prototype.displayLoading = function（） {
    if （this.onLoadStarted || this.loading） return;

    this.originalCursor = this.a.style.cursor;
    this.a.style.cursor = "wait";

    if （！hs.loading） {
        hs.loading = hs.createElement（"a",
            {
                className: "highslide-loading",
                title: hs.loadingTitle,
                innerHTML: hs.loadingText
            },
            {
                position: "absolute"
            }, hs.container
        ）;
        if （hs.ie） hs.loading.style.filter = "alpha（opacity="+ （100*hs.loadingOpacity） +"）";
        else hs.loading.style.opacity = hs.loadingOpacity;
    }

    this.loading = hs.loading;
    this.loading.href = "javascript:hs.expanders["+ this.key +"].cancelLoading（）";
    this.loading.visibility = "visible";

    this.loading.style.left = （this.thumbLeft + this.thumbOffsetBorderW
        + （this.thumbWidth - this.loading.offsetWidth） / 2） +"px";
    this.loading.style.top = （this.thumbTop
        + （this.thumbHeight - this.loading.offsetHeight） / 2） +"px";
    setTimeout（
        "if （hs.expanders["+ this.key +"] && hs.expanders["+ this.key +"].loading） "
        + "hs.expanders["+ this.key +"].loading.style.visibility = "visible";",
        100
    ）;
};

HsExpander.prototype.imageCreate = function（） {
    var img = document.createElement（"img"）;
    var key = this.key;

    var img = document.createElement（"img"）;
    this.content = img;
    img.onload = function （） { if （hs.expanders[key]） hs.expanders[key].onLoad（）;  };
    img.className = "highslide-image "+ this.thumbClass;
    img.style.visibility = "hidden"; // prevent flickering in IE
    img.style.display = "block";
    img.style.position = "absolute";
    img.style.zIndex = 3;
    img.title = hs.restoreTitle;
    img.onmouseover = function （） {
        if （hs.expanders[key]） hs.expanders[key].onMouseOver（）;
    };
    img.onmouseout = function （e） {
        var rel = e ？ e.relatedTarget : event.toElement;
        if （hs.expanders[key]） hs.expanders[key].onMouseOut（rel）;
    };
    if （hs.safari） hs.container.appendChild（img）;
    img.src = hs.getSrc（this.a）;

    this.displayLoading（）;
};

HsExpander.prototype.onLoad = function（） {
    try {

        if （！this.content） return;
        if （this.onLoadStarted） return; // old Gecko loop
        else this.onLoadStarted = true;


        if （this.loading） {
            this.loading.style.visibility = "hidden";
            this.loading = null;
            this.a.style.cursor = this.originalCursor || "";
        }

        if （this.isImage） {
            this.newWidth = this.content.width;
            this.newHeight = this.content.height;
            this.fullExpandWidth = this.newWidth;
            this.fullExpandHeight = this.newHeight;

            this.content.width = this.thumbWidth;
            this.content.height = this.thumbHeight;
        }

        // identify caption div
        var modMarginBottom = hs.marginBottom;
        if （！this.captionId && this.thumbsUserSetId）  this.captionId = "caption-for-"+ this.thumbsUserSetId;
        if （this.captionId && （hs.$（this.captionId） || hs.$（this.captionId +"-taken"））） {
            this.origCaption = hs.$（this.captionId +"-taken"）？ hs.$（this.captionId +"-taken"） : hs.$（this.captionId）;
            this.caption = this.origCaption.cloneNode（1）;
            modMarginBottom += this.spaceForCaption;
            if （！hs.$（this.captionId +"-taken"）） this.origCaption.id = this.captionId +"-taken";
            if （！hs.$（this.captionId）） this.caption.id = this.captionId;
            else this.caption.id = null;
            if （this.captionTemplateId && hs.$（this.captionTemplateId）） {
                this.origCapTpl = hs.$（this.captionTemplateId）;
                this.capTpl = this.origCapTpl.cloneNode（1）;
                this.capTpl.innerHTML
                    = this.capTpl.innerHTML.replace（/s/g, " "）.replace（"{caption}", this.caption.innerHTML）;
                this.caption = this.capTpl;

            }
        }

        this.wrapper.appendChild（this.content）;
        this.content.style.position = "relative"; // Saf
        if （this.caption） this.wrapper.appendChild（this.caption）;
        this.wrapper.style.left = this.thumbLeft +"px";
        this.wrapper.style.top = this.thumbTop +"px";
        hs.container.appendChild（this.wrapper）;

        // correct for borders
        this.offsetBorderW = （this.content.offsetWidth - this.thumbWidth） / 2;
        this.offsetBorderH = （this.content.offsetHeight - this.thumbHeight） / 2;
        var modMarginRight = hs.marginRight + 2 * this.offsetBorderW;
        modMarginBottom += 2 * this.offsetBorderH;

        var ratio = this.newWidth / this.newHeight;
        var minWidth = this.allowSizeReduction ？ this.minWidth : this.newWidth;
        var minHeight = this.allowSizeReduction ？ this.minHeight : this.newHeight;

        var justify = { x: "auto", y: "auto" };
        if （this.align == "center"） {
            justify.x = "center";
            justify.y = "center";
        } else {
            if （this.anchor.match（/^top/）） justify.y = null;
            if （this.anchor.match（/right$/）） justify.x = "max";
            if （this.anchor.match（/^bottom/）） justify.y = "max";
            if （this.anchor.match（/left$/）） justify.x = null;
        }

        client = new hs.clientInfo（）;

        // justify
        this.x = {
            min: parseInt（this.thumbLeft） - this.offsetBorderW + this.thumbOffsetBorderW,
            span: this.newWidth,
            minSpan: this.newWidth < minWidth ？ this.newWidth : minWidth,
            justify: justify.x,
            marginMin: hs.marginLeft,
            marginMax: modMarginRight,
            scroll: client.scrollLeft,
            clientSpan: client.width,
            thumbSpan: this.thumbWidth
        };
        var oldRight = this.x.min + parseInt（this.thumbWidth）;
        this.x = this.justify（this.x）;

        this.y = {
            min: parseInt（this.thumbTop） - this.offsetBorderH + this.thumbOffsetBorderH,
            span: this.newHeight,
            minSpan: this.newHeight < minHeight ？ this.newHeight : minHeight,
            justify: justify.y,
            marginMin: hs.marginTop,
            marginMax: modMarginBottom,
            scroll: client.scrollTop,
            clientSpan: client.height,
            thumbSpan: this.thumbHeight
        };
        var oldBottom = this.y.min + parseInt（this.thumbHeight）;
        this.y = this.justify（this.y）;

        if （this.isHtml） this.htmlSizeOperations（）;
        if （this.isImage） this.correctRatio（ratio）;

        var x = this.x;
        var y = this.y;

        // Selectbox bug
        var imgPos = {x: x.min - 20, y: y.min - 20, w: x.span + 40, h: y.span + 40 + this.spaceForCaption};
        hs.hideSelects = （hs.ie && hs.ieVersion（） < 7）;
        if （hs.hideSelects） this.showHideElements（"SELECT", "hidden", imgPos）;
        // Iframes bug
        hs.hideIframes = （window.opera || navigator.vendor == "KDE" || （hs.ie && hs.ieVersion（