/**
 * ImageRotation class
 *
 * Creates a rotating image div based on a list of images.
 * @requires script.aculo.us
 * @author John Bell
 * @version 1.3 adds fade effects
 */
ImageRotation = new Object();

//Config options (these are defaults, can be overridden with ir_config.js)
//Array of paths to the images in this rotation
ImageRotation.srcs = new Array();

//Array of hrefs to use if the images should be clickable.  If not, makeLinks should be false
ImageRotation.makeLinks = true;
ImageRotation.hrefs = new Array();

//Arrays for the text that goes on top of each image
ImageRotation.titles = new Array();
ImageRotation.texts = new Array();

//Transition effect to use.  Can be 'exchange', 'slide', 'hide', 'reveal', or 'swap'
ImageRotation.effect = 'slide';

//ID of the image tag the rotation will replace
ImageRotation.imageTagID = 'ir_default';

//Amount of time to show each image (in seconds)
ImageRotation.delay = 5;

//Amount of time it takes to run the transition between images (in seconds)
ImageRotation.speed = 1;

//Show links that allow the user to manually transition
ImageRotation.showLinks = true;

//CSS class of the manual transition links (if they are on)
ImageRotation.linkClass = 'ir_link';

//CSS classes of the text overlay div
ImageRotation.shadeClass = 'ir_shade';
ImageRotation.titleClass = 'ir_title';
ImageRotation.textClass = 'ir_text';

//Overlay dimensions.  These should be the same as what's in CSS, but Safari needs it to be defined
ImageRotation.width = 450;
ImageRotation.padding = 10;

//CSS styles of the text overlay div
ImageRotation.textColor = 'white';
ImageRotation.shadeColor = 'black';

//Spacing options for the manual links (if they are on)
ImageRotation.linkBottomOffset = 5;
ImageRotation.linkRightOffset = 5;
ImageRotation.linkSpacing = 20;

//Send init errors to the firebug console
ImageRotation.debug = false;

/***** No changes should be necessary beyond this line *****/

//Class vars (mostly placeholders)
ImageRotation.imageElements = new Array();
ImageRotation.imageTag = false;
ImageRotation.container = false;
ImageRotation.queuePosition = 0;
ImageRotation.rotation = false;
ImageRotation.linkElements = new Array();
ImageRotation.transition = false;
ImageRotation.fallbackUpdater = false;

ImageRotation.init = function(){
	if(!(ImageRotation.imageTag = $(ImageRotation.imageTagID))){
		ImageRotation.error('Could not find DOM Element with ID: '+ImageRotation.imageTagID);
		return false;
	};
	if(ImageRotation.srcs.length == 0){
		ImageRotation.error('No source images for image rotation');
		return false;
	};
	if(ImageRotation.makeLinks && ImageRotation.srcs.length != ImageRotation.hrefs.length){
		ImageRotation.error('src length and href length are unequal');
	};
	ImageRotation.container = ImageRotation.imageTag.up('#ir_portal');
	ImageRotation.firstChild = ImageRotation.container.down();	//Added in case first image is not immediate child
	ImageRotation.srcs.each(function(imgSrc, idx){
		var imgNode = $(document.createElement('div'));
		imgNode.className = "rotationNode";
		
		var imgNodeActual = $(document.createElement('img'));
		imgNodeActual.src = imgSrc;
		imgNode.appendChild(imgNodeActual);
		
		if(ImageRotation.titles[idx] != '' || ImageRotation.texts[idx] != ''){
			var bgNode = $(document.createElement('div'));
			bgNode.className = ImageRotation.shadeClass;
			bgNode.setStyle({backgroundColor: ImageRotation.shadeColor});
			if(ImageRotation.titles[idx] != ''){
				titleNode = $(document.createElement('span'));
				titleNode.className = ImageRotation.titleClass;
				titleNode.update(ImageRotation.titles[idx] + "<br />");
				bgNode.appendChild(titleNode);
			}
			if(ImageRotation.texts[idx] != ''){
				textNode = $(document.createElement('span'));
				textNode.className = ImageRotation.textClass;
				textNode.update(ImageRotation.texts[idx] + "<br />");
				bgNode.appendChild(textNode);
			}
			bgNode.setOpacity(0.5);
			if(ImageRotation.showLinks){
				var padSpace = (ImageRotation.srcs.length * 15) + 30;
				var newWidth = ImageRotation.width - (padSpace + ImageRotation.padding );
				bgNode.setStyle({paddingRight: padSpace + "px", width: newWidth + "px"});
			};			
			var readNode = bgNode.cloneNode(true);
			readNode.setOpacity(1);
			readNode.setStyle({color: ImageRotation.textColor, backgroundColor: 'transparent'});
			imgNode.appendChild(bgNode);
			imgNode.appendChild(readNode);		
		};
		
		if(ImageRotation.hrefs[idx] != ''){
			imgNode.setStyle({cursor: 'pointer'});
			imgNode.observe('click', function(event){document.location = ImageRotation.hrefs[idx]});
		};
		imgNode.setStyle({zIndex: 0, position: 'absolute'});
		ImageRotation.imageElements.push(imgNode);
	});
	ImageRotation.imageElements[0].observe('load', function(event){ 
		ImageRotation.fallbackUpdater.stop();
		if(ImageRotation.showLinks) ImageRotation.createLinks();
		ImageRotation.container.removeChild(ImageRotation.firstChild);
		ImageRotation.container.appendChild(ImageRotation.imageElements[ImageRotation.queuePosition]);		
		ImageRotation.rotation = new PeriodicalExecuter(ImageRotation.rotate, ImageRotation.delay);
	});	
};

ImageRotation.createLinks = function(){
	$R(0,ImageRotation.srcs.length-1).each(function(i){
		var newLink = $(document.createElement('div'));
		newLink.className = ImageRotation.linkClass;
		newLink.appendChild(document.createTextNode(String(i+1)));
		newLink.observe('click', function() {ImageRotation.setImage(i);});
		var order = ImageRotation.srcs.length - 1 - i;
		newLink.setStyle({right: ((ImageRotation.linkSpacing*order) + ImageRotation.linkRightOffset) + 'px', bottom: ImageRotation.linkBottomOffset + 'px'});
		ImageRotation.linkElements.push(newLink);
		ImageRotation.container.appendChild(newLink);
	});
};

ImageRotation.rotate = function(){
	if(!ImageRotation.transition){
		ImageRotation.queuePosition++;
		if(ImageRotation.queuePosition >= ImageRotation.srcs.length) ImageRotation.queuePosition = 0;		
		switch(ImageRotation.effect){
			case 'exchange':	ImageRotation.exchange();	break;
			case 'slide':		ImageRotation.slide();		break;
			case 'hide':		ImageRotation.hide();		break;
			case 'reveal': 		ImageRotation.reveal();		break;
			case 'swap':		ImageRotation.swap();		break;
			case 'fade':		ImageRotation.fade();		break;
			default: ImageRotation.exchange();
		};
	};
};

ImageRotation.exchange = function(){
	var currentImage = ImageRotation.container.down('div.rotationNode');
	if(!ImageRotation.container.down('div') || !ImageRotation.imageElements[ImageRotation.queuePosition]) return false;	
	ImageRotation.container.removeChild(currentImage);
	ImageRotation.container.appendChild(ImageRotation.imageElements[ImageRotation.queuePosition]);
};

ImageRotation.slide = function(){
	var currentImage = ImageRotation.container.down('div.rotationNode');
	var nextImage = ImageRotation.imageElements[ImageRotation.queuePosition];
	if(!currentImage || !nextImage) return false;
	currentImage.setStyle({left: '0px', top:'0px'});
	nextImage.setStyle({left: ImageRotation.container.getWidth() + 'px', top:'0px'});
	ImageRotation.container.appendChild(nextImage);
	ImageRotation.transition = new Effect.Parallel([
		new Effect.Move(currentImage, {sync: true, x: ImageRotation.container.getWidth() * -1, mode: 'absolute', duration: ImageRotation.speed, effect: 'sinoidal'}),
		new Effect.Move(nextImage, {sync: true, x: 0, mode: 'absolute', duration: ImageRotation.speed, effect: 'sinoidal'})
	], {afterFinish: function(){ImageRotation.container.removeChild(currentImage); ImageRotation.transition=false;}});
};

ImageRotation.swap = function(){
	var currentImage = ImageRotation.container.down('div.rotationNode');
	var nextImage = ImageRotation.imageElements[ImageRotation.queuePosition];
	if(!currentImage || !nextImage) return false;
	currentImage.setStyle({left: '0px', top:'0px'});
	nextImage.setStyle({left: '0px', top:'0px'});
	currentImage.insert({'before': nextImage});
	ImageRotation.transition = new Effect.Parallel([
		new Effect.Move(currentImage, {sync: true, x: ImageRotation.container.getWidth() * .5, mode: 'absolute', duration: ImageRotation.speed/2, effect: 'sinoidal'}),
		new Effect.Move(nextImage, {sync: true, x: ImageRotation.container.getWidth() * -.5, mode: 'absolute', duration: ImageRotation.speed/2, effect: 'sinoidal'})
	], {afterFinish: function(){
			nextImage.insert({'before': currentImage});
			ImageRotation.transition = new Effect.Parallel([
				new Effect.Move(currentImage, {sync: true, x: 0, mode: 'absolute', duration: ImageRotation.speed/2, effect: 'sinoidal'}),
				new Effect.Move(nextImage, {sync: true, x: 0, mode: 'absolute', duration: ImageRotation.speed/2, effect: 'sinoidal'})
	], {afterFinish: function(){ImageRotation.container.removeChild(currentImage); ImageRotation.transition=false;}})}});
};

ImageRotation.hide = function(){
	var currentImage = ImageRotation.container.down('div.rotationNode');
	var nextImage = ImageRotation.imageElements[ImageRotation.queuePosition];
	if(!currentImage || !nextImage) return false;	
	currentImage.setStyle({left: '0px', top:'0px'});
	nextImage.setStyle({left: ImageRotation.container.getWidth() + 'px', top:'0px'});
	ImageRotation.container.appendChild(nextImage);
	ImageRotation.transition = new Effect.Move(nextImage, {x: 0, mode: 'absolute', duration: ImageRotation.speed, effect: 'sinoidal', afterFinish:  function(){ImageRotation.container.removeChild(currentImage); ImageRotation.transition=false;}});
};

ImageRotation.reveal = function(){
	var currentImage = ImageRotation.container.down('div.rotationNode');
	var nextImage = ImageRotation.imageElements[ImageRotation.queuePosition];
	if(!currentImage || !nextImage) return false;	
	currentImage.setStyle({left: '0px', top:'0px'});
	nextImage.setStyle({left: '0px', top:'0px'});
	currentImage.insert({'before': nextImage});
	ImageRotation.transition = new Effect.Move(currentImage, {x: ImageRotation.container.getWidth() * -1, mode: 'absolute', duration: ImageRotation.speed, effect: 'sinoidal', afterFinish:  function(){ImageRotation.container.removeChild(currentImage); ImageRotation.transition=false;}});
};

ImageRotation.fade = function(){
	var currentImage = ImageRotation.container.down('div.rotationNode');
	var nextImage = ImageRotation.imageElements[ImageRotation.queuePosition];
	if(!currentImage || !nextImage) return false;	
	currentImage.setStyle({left: '0px', top:'0px', zIndex: 10});
	nextImage.setStyle({left: '0px', top:'0px', zIndex: 0, opacity: 1.0, display: "block"});
	currentImage.insert({'before': nextImage});
	ImageRotation.transition = new Effect.Fade(currentImage, 
			{duration: ImageRotation.speed, from: 1, to: 0, afterFinish:  function(){nextImage.setStyle({zIndex: 10}); currentImage.setStyle({zIndex: 0}); ImageRotation.container.removeChild(currentImage); ImageRotation.transition=false;}});
};

ImageRotation.setImage = function(pos){
	if(ImageRotation.queuePosition == pos) return false;
	ImageRotation.rotation.stop();
	ImageRotation.queuePosition = pos == 0 ? ImageRotation.srcs.length - 1 : pos - 1;
	ImageRotation.rotate();
	ImageRotation.rotation = new PeriodicalExecuter(ImageRotation.rotate, ImageRotation.delay);	
};

ImageRotation.error = function(message){
	if(ImageRotation.debug){
		try{
			console.log(message);
		} catch(e){
			return false;
		};
	};
};


//This shouldn't be necessary...thanks IE
ImageRotation.fallbackUpdater = new PeriodicalExecuter(function(event){
	if(ImageRotation.rotation) ImageRotation.fallbackUpdater.stop();
	if(ImageRotation.container && !ImageRotation.rotation){
		if(ImageRotation.showLinks) ImageRotation.createLinks();
		ImageRotation.container.removeChild(ImageRotation.firstChild);
		ImageRotation.container.appendChild(ImageRotation.imageElements[ImageRotation.queuePosition]);					
		ImageRotation.rotation = new PeriodicalExecuter(ImageRotation.rotate, ImageRotation.delay);	
		ImageRotation.fallbackUpdater.stop();
	};
}, 1);

document.observe("dom:loaded", function() { ImageRotation.init(); });