var EditLive = {
	
	load: function() {
		if ((typeof Event != 'undefined') && (typeof Event.observe != 'undefined')) {
			Event.observe(window, 'load', EditLive.createRotatingBanners);
		} else {
			$(document).ready(EditLive.createRotatingBanners);
		}
	},
	
	rotatingCounter: 1,
	
	createRotatingBanners: function() {
		var images = document.getElementsByTagName('img');
		for (var i = images.length - 1; i >= 0; i--) {
			var image = images[i];
			if (!image.getAttribute("data-rotatingBanner")) {
				continue;
			}
			EditLive.RotatingBanner(image.getAttribute("data-rotatingBanner"), image);
		}
	},
	
	RotatingBanner: function(imageDetails, image) {
		// imageDetails must be a JSON object containing the attribute 'id' which selects the image that will be rotated,
		// optionally a 'period' attribute to set how long each image should be shown for,
		// and the attribute 'images' which is a JSON array of the images to rotate (excluding the first one which should already be displayed).
		// Each image is a JSON object containing whatever attributes should be added to the img tag (src and alt are strongly recommended, height and width are ignored).
		if (typeof(imageDetails) == 'string') {
			if (imageDetails.evalJSON) {
				imageDetails = imageDetails.evalJSON(true);
			} else {
				imageDetails = eval('(' + imageDetails + ')');
			}
		}
		if (!image) {
			image = $(imageDetails.id);
		}
		var width = image.width;
		var height = image.height;
		var imageList = document.createElement('ul');
		imageList.style.width = width + "px";
		imageList.style.height = height + "px";
		EditLive.clearMarginsAndPadding(imageList);
		imageList.style.position = 'relative';
		var images = imageDetails.images;
		var currentAttributes = {};
		for (var i = image.attributes.length - 1; i >= 0; i--) {
			currentAttributes[image.attributes[i].name] = image.attributes[i].value;
		}
		images.push(currentAttributes);
		image.parentNode.insertBefore(imageList, image);
		image.parentNode.removeChild(image);
		var currentImageItem;
		for (var i = 0; i < images.length; i++) {
			var newImage = images[i];
			var imageListItem = document.createElement('li');
			var imageElement = document.createElement('img');
			imageListItem.appendChild(imageElement);
			EditLive.clearMarginsAndPadding(imageListItem);
			imageList.appendChild(imageListItem);
			imageElement.setAttribute('width', width);
			imageElement.setAttribute('height', height);
			for (var attrName in newImage) {
				imageElement.setAttribute(attrName, newImage[attrName]);
			}
			imageElement.src = newImage.src;
			
			imageListItem.style.position = 'absolute';
			imageListItem.style.display = 'block';
			imageListItem.style.top = 0;
			imageListItem.style.zIndex = 0;
			if (i != images.length - 1) {
				EditLive.changeOpacity(imageListItem, 1, 0, 0);
			} else {
				currentImageItem = imageListItem;
			}
		}
		
		var period = 30;
		if (imageDetails.period) {
			period = Math.max(2, imageDetails.period);
		}
		EditLive.executeRepeatedly(function(executor) {
			var nextImageItem = currentImageItem.nextSibling;
			while (!nextImageItem || nextImageItem.nodeType != 1) {
				if (nextImageItem) {
					nextImageItem = nextImageItem.nextSibling;
				} else {
					nextImageItem = imageList.firstChild;
				}
			}
			currentImageItem.style.zIndex = 0;
			nextImageItem.style.zIndex = 100;
			EditLive.changeOpacity(nextImageItem, 0, 1, 1, function() {
				EditLive.changeOpacity(currentImageItem, 1, 0, 0);
				currentImageItem = nextImageItem;
			});
		}, period);
	},
	
	clearMarginsAndPadding: function(imageList) {
		imageList.style.marginTop = 0;
		imageList.style.marginLeft = 0;
		imageList.style.marginBottom = 0;
		imageList.style.marginRight = 0;
		imageList.style.paddingTop = 0;
		imageList.style.paddingLeft = 0;
		imageList.style.paddingBottom = 0;
		imageList.style.paddingRight = 0;
	},
	
	executeRepeatedly: function(func, period) {
		if ((typeof PeriodicalExecuter != 'undefined')) {
			new PeriodicalExecuter(func, period);
		} else {
			$.timer(period * 1000, func);
		}
	},
	
	changeOpacity: function(element, start, end, duration, thenDo) {
		if((typeof Effect!='undefined') &&
			       (typeof Effect.Opacity == 'undefined')) {
			new Effect.Opacity(element, { "from": start, "to": end, "duration": duration, "afterFinish": thenDo });
		} else {
			$(element).fadeTo(duration * 1000, end, thenDo);
		}
	}
};


EditLive.load();