//<![CDATA[

hs.graphicsDir = 'highslide/v4/highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
hs.dimmingOpacity = 1;
hs.outlineType = null;
hs.wrapperClassName = 'borderless floating-caption';
hs.marginBottom = 100;

// Don't close the image when clicking the dimmed background
hs.onDimmerClick = function () {
    return false;
};

// Heading with button - this example uses the same heading for all images
hs.headingId = 'my-heading';
hs.dragByHeading = false;
hs.headingOverlay = {
    position: 'bottom right',
    fade: false,
    relativeTo: 'viewport',
    offsetY: -100,
    offsetX: -10,
    zIndex: 5
};

// Use thumbnails alt attribute and title attribute in the caption
hs.captionId = 'dummy';
hs.Expander.prototype.onAfterGetCaption = function (sender) {
    if (sender.caption) {
        sender.caption.innerHTML = sender.caption.innerHTML.replace('text', this.thumb.title) + '<br />' + this.thumb.alt;
    }
};
hs.numberPosition = 'caption';
hs.captionOverlay = {
    position: 'bottom left',
    fade: false,
    relativeTo: 'viewport',
    offsetY: -100,
    offsetX: 10
};

// Add the slideshow providing the controlbar and the thumbstrip
hs.addSlideshow({
    //slideshowGroup: 'group1',
    interval: 5000,
    repeat: false,
    useControls: false,
    fixedControls: false,
    overlayOptions: {
        position: 'top',
        relativeTo: 'viewport',
        //offsetY: -60,
        width: '100%'
    },
    thumbstrip: {
        position: 'bottom center',
        mode: 'horizontal',
        relativeTo: 'viewport'
    }
});

// Controls
hs.registerOverlay({
    html: '<div class="controls prev"><a href="javascript:;" onclick="return hs.previous(this)" title="Previous (left arrow key)"></a></div>',
    position: 'middle left',
    relativeTo: 'viewport',
    fade: false
});

hs.registerOverlay({
    html: '<div class="controls next"><a href="javascript:;" onclick="return hs.next(this)" title="Next (right arrow key)"></a></div>',
    position: 'middle right',
    relativeTo: 'viewport',
    fade: false
});

hs.registerOverlay({
    html: '<div class="controls close"><a href="javascript:;" onclick="hs.close(this)"></a></div>',
    position: 'top right',
    relativeTo: 'viewport',
    fade: false
});

// Keep the position after window resize
hs.addEventListener(window, 'resize', function () {
    var i, exp;
    hs.getPageSize();

    for (i = 0; i < hs.expanders.length; i++) {
        exp = hs.expanders[i];
        if (exp) {
            var x = exp.x,
				y = exp.y;

            // get new thumb positions
            exp.tpos = hs.getPosition(exp.el);
            x.calcThumb();
            y.calcThumb();

            // calculate new popup position
            x.pos = x.tpos - x.cb + x.tb;
            x.scroll = hs.page.scrollLeft;
            x.clientSize = hs.page.width;
            y.pos = y.tpos - y.cb + y.tb;
            y.scroll = hs.page.scrollTop;
            y.clientSize = hs.page.height;
            exp.justify(x, true);
            exp.justify(y, true);

            // set new left and top to wrapper and outline
            exp.moveTo(x.pos, y.pos);
        }
    }
});

//]]>