// effects for envis-precisely.com

// Copyright (c) 2009 Philipp E Sackl for :envis precisely
// http://www.envis-precisely.com




// Load the slideshow ======================================================================================






// Move slider =============================================================================================
var slidenumber = 0;

function slideTo(num) {
	if (Element.childElements('slideshow_inner').length > num && num >= 0 && num != slidenumber) {
		//if somewhere in the middle
		new Effect.Move('slideshow_inner', {x: num*-595, y: 0, mode: 'absolute', transition: Effect.Transitions.spring});
		makeActive(num);
		slidenumber = num;
	} else if (Element.childElements('slideshow_inner').length <= num) {
		// if at the end
		elasticEnd('slideshow_inner', 1);
	} else if (num <0) {
		elasticEnd('slideshow_inner', -1);
	}
	

	Element.removeClassName('fb', 'slideshowbuttonactive');
	Element.removeClassName('ff', 'slideshowbuttonactive');
	
	if (num <= 0) {
		Element.addClassName('fb', 'slideshowbuttonactive');
	} else if (num >= Element.childElements('slideshow_inner').length-1) {
		Element.addClassName('ff', 'slideshowbuttonactive');
	}
	
	return false;
}

// Make an indicator active or inactive ====================================================================
function makeActive(num) {
	for (var i=0; i < Element.childElements('slideshow_inner').length; i++) {
		Element.removeClassName(Element.childElements('slideshowcontroller_inner')[i], 'slideshowbuttonactive');
	}
	
	Element.addClassName('sb_'+num, 'slideshowbuttonactive');
	
	return false;
}


// Bounce back! ============================================================================================
function elasticEnd(elem, m) {
	new Effect.Move(elem, {x:-60*m, y:0, duration:0.15, afterFinishInternal: function(effect) {
		new Effect.Move(elem, {x:90*m, y:0, duration:0.2, afterFinishInternal: function(effect) {
			new Effect.Move(elem, {x:-40*m, y:0, duration:0.2, afterFinishInternal: function(effect) {
				new Effect.Move(elem, {x:15*m, y:0, duration:0.2, afterFinishInternal:function(effect) {
					new Effect.Move(elem, {x:-5*m, y:0, duration:0.2});
				}});
			}});
		}});
	}});
}



// The Slide Class =========================================================================================
var allImageNames = undefined;
var theImagePath = undefined;
var slideshowImagesTotal = 0;
var slideshowImagesLoaded = 0;
var theContainer = undefined;
var slides = [];

function SlideshowImage() {
	this.HTMLElement = undefined;
	this.loaded = false;
	this.preloader = new Image;
	this.imagepath = undefined;
	this.largeImagePath = undefined;
}

// takes an img-Element and a full image path as input
function displayImagePreview(slide) {
	slides[slide].HTMLElement.src = slides[slide].imagepath;
}

// when an Image has finished loading
function imageLoaded() {
	slideshowImagesLoaded++;
	
	// if all images have been successfully loaded
	if (slideshowImagesLoaded == slideshowImagesTotal) {
		for (var i=0; i<slideshowImagesTotal; i++) {
			displayImagePreview(i);
		}
		Element.removeClassName('the_slideshow', 'hidden');
		Element.removeClassName('slideshowcontainer', 'loaderbackground');
	}
}



// Load Images for the Slideshow preview ===================================================================
function loadSlideshowImages(container, images, imagedir) { // images is n array with all the image names; imagedir ends with /
	// set number of total images
	slideshowImagesTotal = images.length;
	theContainer = container;
	
	// add the overlay code
	addOverlay();
	
	// build the structure
	for (var i=0; i<images.length; i++) {
		slides.push(new SlideshowImage());
		slides[i].HTMLElement = container.appendChild(Builder.node('img', {id:'img'+i, alt:'slideshow image'}));
	// Disable Hand cursor for the moment
		//slides[i].HTMLElement.addClassName('clickable');
		slides[i].imagepath = imagedir+'/medium/'+images[i];
		slides[i].largeImagePath = imagedir+'/large/'+images[i];
		slides[i].preloader.onload = imageLoaded;
		slides[i].preloader.src = slides[i].imagepath;
		
		// Disable big images for the moment
		//Element.observe(slides[i].HTMLElement, 'click', (function() {showOverlay(null)}));
	}
	
}



// Load one of the large Images ============================================================================
SlideshowImage.prototype.loadLargeImage = function() {
	window.alert(SlideshowImage.largeImagePath);              // <<------- CONTINUE HERE!!!
}



// Add the overlay-code to the body ========================================================================
function addOverlay() {
	var objBody = $$('body')[0];
	
	// add the dark overlay
	objBody.appendChild(Builder.node('div', {id:'sl_overlay'}));
	$('sl_overlay').addClassName('hidden');
	
	// scale to window dimensions
	var arrayPageSize = Element.getDimensions(objBody);
	//$('sl_overlay').setStyle({width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' });
	//$('sl_overlay').style = 'width:'+arrayPageSize[0]+'px; height:'+arrayPageSize[1]+'px;';
	
	objBody.appendChild(Builder.node('div', {id:'sl_outer_container'}, [
		Builder.node('div', {id:'sl_image_container'})
	]));
	$('sl_outer_container').addClassName('hidden');
	$('sl_image_container').addClassName('loaderbackground');
	
	
	Element.observe('sl_overlay', 'click', (function() {hideOverlay(null);}));
}


// Show the image overlay and load the large image =========================================================
// some vars
var closedX = 235;
var closedY = 80;
var openedX = 110;
var openedY = 50;
var closedW = 595;
var closedH = 270;
var openedW = 850;
var openedH = 500;

function showOverlay(image) {
	
	new Effect.Opacity('sl_overlay', {from:0.0, to:0.0, duration:0.0, afterFinishInternal: function() {
		$('sl_overlay').removeClassName('hidden');
		new Effect.Opacity('sl_overlay', {from:0.0, to:0.8, duration:0.3});
	}});
	
	// move the container to the right position
	var newpos = Element.cumulativeOffset('slideshow_inner');
	$('sl_outer_container').setStyle({left: closedX+'px', top: closedY+'px'}); // <--- GO ON FROM HERE, BUDDY! ###############
	
	// effects for the viewer
	new Effect.Opacity('sl_outer_container', {from:0.0, to:0.0, duration:0.0, afterFinishInternal: function() {
		$('sl_outer_container').removeClassName('hidden');
		new Effect.Opacity('sl_outer_container', {from:0.0, to:1.0, duration:0.6});
		$('sl_outer_container').morph('width:'+openedW+'px; height:'+openedH+'px; left:'+openedX+'px; top:'+openedY+'px;');
	}});
}



// Hide the image overlay ==================================================================================
function hideOverlay(image) {
	// hide the overlay
	new Effect.Opacity('sl_overlay', {from:0.8, to:0.0, duration:0.3, afterFinishInternal: function() {
		$('sl_overlay').addClassName('hidden');
	}});
	
	// hide the image
	new Effect.Opacity('sl_outer_container', {from:1.0, to:0.0, duration:1.0, afterFinishInternal: function() {
		$('sl_outer_container').addClassName('hidden');
	}});
	$('sl_outer_container').morph('width:'+closedW+'px; height:'+closedH+'px; left:'+closedX+'px; top:'+closedY+'px;');
	
}




// Get the actual page size ================================================================================
// Taken from lightbox.js by Lokesh Dhakar - http://www.lokeshdhakar.com
function getPageSize() {
        
     var xScroll, yScroll;
	
	if (window.innerHeight && window.scrollMaxY) {	
		xScroll = window.innerWidth + window.scrollMaxX;
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}
	
	var windowWidth, windowHeight;
	
	if (self.innerHeight) {	// all except Explorer
		if(document.documentElement.clientWidth){
			windowWidth = document.documentElement.clientWidth; 
		} else {
			windowWidth = self.innerWidth;
		}
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) { // other Explorers
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}	
	
	// for small pages with total height less then height of the viewport
	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	} else { 
		pageHeight = yScroll;
	}

	// for small pages with total width less then width of the viewport
	if(xScroll < windowWidth){	
		pageWidth = xScroll;		
	} else {
		pageWidth = windowWidth;
	}

	return [pageWidth,pageHeight];
}