var showWaitingUntilSectionLoaded = function(destinationPhoto) {
	if (Photos.allLoaded(Sections.currentSection())) {
		visiblePhoto().src = destinationPhoto;
		tlPhoto.showNavigation();
	} else {
		setTimeout(function() {
			showWaitingUntilSectionLoaded(destinationPhoto);
		}, 1000);
	}
};

var closeAndOpenToReveal = function(destinationPhoto, onClose, onDone) {
	active = true;
	var vContainer = visibleContainer();
	var hContainer = hiddenContainer();
	var galleryDimensions = $('gallery').getDimensions();
	var navigationWidth = $('navigation').getWidth();
	
	/* Step Zero: set style specific to this transition */
	$('gallery').setStyle({
		overflow: 'hidden'
	});
	tlPhoto.hideNavigation();
	
	/* Step One: close door */
	var options = Object.extend(wipeOptions(), {
		scaleFrom: 100, 
		sync: false , 
		scaleMode: {
			originalHeight: galleryDimensions.height, 
			originalWidth:  galleryDimensions.width	
		} ,
		afterFinish: function() {  
			visiblePhoto().src = 'images/loading.gif'
			onClose();
			openDoor();
		}
	});
	
	/* Step Two: swap images, then open door */
	var openDoor = function() {
		showWaitingUntilSectionLoaded(destinationPhoto);
		
		var photoDimensions = visiblePhoto().getDimensions();
		// $('right-image-container').hide();
		options['scaleFrom'] = 0;
		options['afterFinish'] = function() {
			if(typeof(onDone) != 'undefined') onDone();
			resetStyle();
		};
		options['scaleMode'] = {
			originalHeight: galleryDimensions.height, 
			originalWidth: photoDimensions.width + navigationWidth + 7
		};
		
		$('picture-frame').setStyle({ width: (photoDimensions.width + 1) + 'px' });
		$('right-image-container', 'left-image-container').each(function(el) {
			el.setStyle({ width: photoDimensions.width + 'px' });
		});
		new Effect.Scale('gallery', 100, options);
	};
	
	/* Step Three: reset styles */
	var resetStyle = function() {  
		var newWidth = visiblePhoto().getWidth();
								
		$('picture-frame').setStyle({
			width: (newWidth + 2) + 'px'
		});
		$('left-image-container', 'right-image-container').each(function(container) {
			container.setStyle({
				width: ''
			});
		});
		$('left-image', 'right-image').each(function(container) {
			container.setStyle({
				width: '',
				overflow: '' 
			});
		});
		$('gallery').setStyle({
			overflow: 'visible'
		});
		
		active = false;
	};
	
	/* Ok, go! */
	clearImgOnLoad();
	$('gallery').setStyle({ overflow: 'hidden' });
	new Effect.Scale('gallery', 0, options);
}

var wipeOptions = function() {
	return { 
		sync: true,
		scaleContent: false, 
		scaleY: false,
		restoreAfterFinish: false,
		duration: 1 ,
		afterSetup: function(effect) {
			effect.element.makeClipping().show(); 
		}
	};
};

var hiddenContainer = function() {
	return $('left-image-container', 'right-image-container').find(function(container) {return !container.visible();});
};

var visibleContainer = function() {
	if ($('left-image-container') && $('right-image-container')){
		return $('left-image-container', 'right-image-container').find(function(container) {return container.visible();});		
	} else if ($('left-image-container')){ 
		return $('left-image-container');
	} else {
		return $('right-image-container');
	}
};

var hiddenPhoto = function() {	
	return hiddenContainer().descendants().first();
};

var visiblePhoto = function() {	
	return visibleContainer().descendants().first();
};

Effect.WipeRight = function(image, callback) {	
	var triggered = false;
	clearImgOnLoad();
	var options = Object.extend(wipeOptions(), {
		scaleFrom: 0, 
		scaleMode: {
			originalHeight: 432, 
			originalWidth: visiblePhoto().getWidth()
		} 
	});
	var onDone = function() {
		vContainer.hide();
		hContainer.show();
		clearImgOnLoad();
		callback();
	};
	var hContainer = hiddenContainer();
	var vContainer = visibleContainer();
	
	hContainer.remove();
	$('picture-frame').appendChild(hContainer);
	hiddenPhoto().onload = function() {
		if (triggered) return;
		var opening = new Effect.Scale(hContainer, 100, options);
		var closing = new Effect.Scale(vContainer, 0, Object.extend(options, {scaleFrom : 100}));

		return new Effect.Parallel([opening, closing], {afterFinish: onDone});
	};
	hiddenPhoto().src = image;
	if(is_safari){
		hiddenPhoto().onload();
		triggered = true;
	}
};

Effect.WipeLeft = function(image, callback) {
	clearImgOnLoad();
	var triggered = false;
	var options = Object.extend(wipeOptions(), {
		scaleFrom: 0, 
		scaleMode: {
			originalHeight: 432, 
			originalWidth: visiblePhoto().getWidth()
		} 
	});
	var onDone = function() {
		vContainer.hide();
		hContainer.show();
		clearImgOnLoad();
		callback();
	};
	var hContainer = hiddenContainer();
	var vContainer = visibleContainer();
	
	hContainer.remove();
	$('picture-frame').insertBefore(hContainer, vContainer);
	hiddenPhoto().onload = function() {	
		if (triggered) return;	
		var opening = new Effect.Scale(hContainer, 100, options);
		var closing = new Effect.Scale(vContainer, 0, Object.extend(options, {scaleFrom : 100}));

		return new Effect.Parallel([opening, closing], {afterFinish: onDone});
	};
	hiddenPhoto().src = image;
	if(is_safari){
		hiddenPhoto().onload();
		triggered = true;
	}
};

var clearImgOnLoad = function() {
	// for the love of god, remember: if you are assigning events to a photo.onload this will run every time src changed!
	$$('img').each(function(i) {i.onload = null;});
};

// borrowed code
Prototype.Browser = {
  getWidth: function() {
    return self.innerWidth || (document.documentElement.clientWidth || document.body.clientWidth);
  },

  getHeight: function() {
    return self.innerHeight || (document.documentElement.clientHeight || document.body.clientHeight);
  },
  
  getDimensions: function() {
    return { width: this.viewportWidth(), height: this.viewportHeight() };
  }
};