/**
 * oee-free-tools-slideshows.js
 */

//---------------------------------------------------------------------	
// Global HighSlide settings
//---------------------------------------------------------------------	
// 884d1774d3276333676c05c016a1db98
hs.graphicsDir = 'highslide/graphics/';
hs.showCredits = false;  // disable "powered by HighSlide credits" (this is legally allowable)
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;

// override default control text labels to not reference keys
hs.lang.playTitle = 'Play'; //'Play slideshow (spacebar)'
hs.lang.pauseTitle = 'Pause';  //'Pause slideshow (spacebar)'
hs.lang.previousTitle = 'Previous'; //'Previous (arrow left)'
hs.lang.nextTitle = 'Next'; //'Next (arrow right)'

	
//---------------------------------------------------------------------	
// FreeOEETools slideshow group settings
//---------------------------------------------------------------------	
var freeOEEToolsOptions = {
	slideshowGroup: 'free-oee-tools-group',
	captionOverlay: {position: 'leftpanel', width: '150px'}
};

// add close button
hs.registerOverlay({
	html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
	position: 'top right',
	fade: 2,
	slideshowGroup: 'free-oee-tools-group'
});


//---------------------------------------------------------------------	
// small-slideshow group settings
//---------------------------------------------------------------------	

// small-slideshow image options
var smallSlideshowOptions = {
	slideshowGroup: 'small-slideshow-group',
	outlineType: null,
	allowSizeReduction: true,
	wrapperClassName: 'small-slideshow',
	useBox: true,
	width: 300,
	height: 217,
	targetX: 'oee-slideshow',
	targetY: 'oee-slideshow',
	autoplay: true
};

// 'small-slideshow' slideshow and control bar options
hs.addSlideshow({
	slideshowGroup: 'small-slideshow-group',
	interval: 3000,
	repeat: true,
	useControls: true,
    fixedControls: 'fit',
	overlayOptions: {
		position: 'bottom center',
		hideOnMouseOut: true,
        opacity: 0.7, 
        offsetY: 8.0 
	}
});


//---------------------------------------------------------------------	
// large-slideshow group settings
//---------------------------------------------------------------------	

// Options for the expanded (large) images
var largeSlideshowOptions = {
	slideshowGroup: 'large-slideshow-group',
	wrapperClassName: 'large-slideshow',
	outlineType: 'drop-shadow',
	allowSizeReduction: true,
    dimmingOpacity: 0.8,
	align: 'center',
	autoplay: true,
    thumbnailId: 'first-small-slide'  // tells expanded image the screen locations to zoom back to
};

// large-slideshow image options
hs.addSlideshow({
	slideshowGroup: 'large-slideshow-group',
	interval: 3000,
	repeat: true,
	useControls: true,
    fixedControls: 'fit',

	overlayOptions: {
		position: 'bottom center',
		hideOnMouseOut: true,
        opacity: 0.8,
        offsetY: 9.0
	}
});

// add close button
hs.registerOverlay({
	html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
	position: 'top right',
	fade: 2,
	slideshowGroup: 'large-slideshow-group'
});


//---------------------------------------------------------------------	
// Global HighSlide Overrides
//---------------------------------------------------------------------	

// On page load, display the first slide of the small slideshow
hs.addEventListener(window, 'load', function() {
	document.getElementById('first-small-slide').onclick();
});


var last_small_expander;

// Handle image clicks for all highslide images
hs.Expander.prototype.onImageClick = function(expander) {
		
	if (expander.slideshowGroup === 'small-slideshow-group') {
		// Clicked on the small slideshow.
		
		// save the current expander for use after we return from the large slideshow
		last_small_expander = expander;
		
        // Pause the small slide show.
        expander.slideshow.pause();
        
		// launch large slideshow
		// change 'small' to 'large' in the image file name to get the large version
        hs.expand(expander.content, hs.extend({src: expander.content.src.replace('small', 'large')}, largeSlideshowOptions));
		            
        hs.restoreCursor = 'zoomout.cur';
        hs.lang.restoreTitle = 'Click to close. Click arrows for next and previous.';
        return false;
    }
};

hs.Expander.prototype.onAfterClose = function (expander) {
	if (expander.slideshowGroup === 'large-slideshow-group') {
        // after closing the large slide show,
		//  we need to resume the small slideshow
		
		// First, get the expander associated with the small slideshow.
		var small_expander = last_small_expander; 
		
		if (small_expander && small_expander !== expander) {
			var ss = small_expander.slideshow;
			if (ss) {
				// resume the small slideshow
				ss.play(true);
				
				// ...and now fix what appears to be a bug in the HighSlide library.
				// Calling play() does not reset the timer for the next slide, so do it here.
				if (ss.autoplay) {
					ss.autoplay = setTimeout(function() {
						hs.next(small_expander.a);  // hs.next() uses the arg to pass to hs.getExpander()
					}, (ss.interval || 500));
				}
			}
		}
        hs.restoreCursor = 'zoomin.cur';
        hs.lang.restoreTitle = 'Click to enlarge. Click arrows for next and previous.';
    }
};

// Only one transition can exist at a time, so set the small slideshow's
// transition duration to zero, to avoid overlapped transitions (which crash the browser)
 hs.Expander.prototype.onInit = function (expander) {
	if (this.slideshowGroup === 'small-slideshow-group') {
		hs.transitionDuration = 0;
	}
	else {
		hs.transitionDuration = 500;
	}
};

// prevent small slideshow focus above other expanders
hs.Expander.prototype.onAfterExpand = function(expander) {
    if (expander.slideshowGroup === 'small-slideshow-group' && expander.slideshow && expander.slideshow.zIndex === undefined) 
		expander.slideshow.zIndex = expander.wrapper.style.zIndex;	
};

hs.Expander.prototype.onFocus = function(expander) {
    if (expander.slideshowGroup === 'small-slideshow-group') {
        expander.wrapper.style.zIndex = expander.slideshow.zIndex || 0;
        if (expander.outline) expander.outline.table.style.zIndex = expander.slideshow.zIndex - 1;
    }
	else if (expander.slideshowGroup === 'free-oee-tools-group') {
		hs.lang.restoreTitle = "Click to close image.";
		hs.restoreCursor = "zoomout.cur";		
	}
};

hs.Expander.prototype.onMouseOver = function (expander, event) {
	if (expander.slideshowGroup === 'small-slideshow-group') {
		// if the mouse cursor is over the small slideshow, change the cursor
		hs.restoreCursor = 'zoomin.cur';
		hs.lang.restoreTitle = 'Click to enlarge. Click arrows for next and previous.';
	}
	expander.focus();
};

hs.Expander.prototype.onBeforeExpand = function(expander) {
	if (expander.slideshowGroup === 'small-slideshow-group') {
		// about to "expand" the small slideshow.
		// Force it's position -- even if it has scrolled out of the content window.
		// (normally highslide will move the slideshow so that it is within the viewable window.)
		setSlideshowPosition(expander);
	}
}

// Ignore drag attempts
hs.Expander.prototype.onDrag = function () {
	return false;
};

// Ignore clicks on dimmed area
hs.onDimmerClick = function () {
    return false;
};

// Ignore key commands
hs.onKeyDown = function (sender, e) {
   return false;
};

setSlideshowPosition = function (exp) {
	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);
	}
};

// Keep the expanded image 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];
		setSlideshowPosition(exp);
	}
});

// Dynamic dimmer zIndex mod:
// Not completely sure of all this does or where it was borrowed from -- 
//  but it does cause the small slideshow to be dimmed with the rest of the screen
hs.dim = function(exp) {
    if (!hs.dimmer) {
        hs.dimmer = hs.createElement ('div',
            {
                className: 'highslide-dimming highslide-viewport-size',
                owner: '',
                onclick: function() {
                    if (hs.fireEvent(hs, 'onDimmerClick')) {
                        hs.close();
                    }
                }
            }, {
                visibility: 'visible',
                opacity: 0
            }, hs.container, true);
    }
    hs.dimmer.style.zIndex = exp.wrapper.style.zIndex - 2;
    hs.dimmer.style.display = '';
    hs.dimmer.owner += '|'+ exp.key;
    if (hs.geckoMac && hs.dimmingGeckoFix) {
        hs.setStyles(hs.dimmer, {
            background: 'url('+ hs.graphicsDir + 'geckodimmer.png)',
            opacity: 1
        });
    }
    else {
        hs.animate(hs.dimmer, { opacity: exp.dimmingOpacity }, hs.dimmingDuration);
    }
};