var url = '/sites/neura.edu.au/themes/powmri_2009/slider.php';
var imagesRoot = "/sites/neura.edu.au/themes/powmri_2009/images/";

slider();

function slider () {
	
	// Build DOM elements on page and set up behaviours via lowpro
	Event.addBehavior({
		'body': function () {
			new Ajax.Request(url, { 
				method: 'get',
				onSuccess: function(response) {
					var json = response.responseText.evalJSON();
					json.images.image.each(function (item) {
						var thumb = $a({href: item.link}, $img({src: item.thumbnail.source, width: item.thumbnail.width, height: item.thumbnail.height, alt: item.thumbnail.altText }));
						$('thumbnail').appendChild(thumb);
					});
				}
			});
		},
		'div#slider': function () {
			var gradientBar = $div({id: 'gradientBar'},
										$img({src: imagesRoot + 'gradientBar.png', width: '740', height: '4', alt: 'GradientBar'}),
										$div({id: 'marker'}, 
											$img({src: imagesRoot + 'marker.png', width: '14', height: '8', alt: 'Marker'})
										)
									);
			var thumbnail = $div({id: 'thumbnail'});
			$('slider').appendChild(gradientBar);
			$('slider').appendChild(thumbnail);
		},
		'div#thumbnail:mouseover': function (e) {
			var elm = Event.element(e);
			Event.stop(e);
			if (elm) {
				slider_transition(elm);
			}

		}
	});

	// Wait for full poplution of the DOM and set up periodical execution task for auto sliding
	document.observe("dom:loaded", function() {
		// Grab copy of current tile
		var currentImg = $('image').getElementsBySelector('img')[0].src;
		// Run task every 5 seconds to detect user interaction
		new PeriodicalExecuter(function(pe) {
			newImg = $('image').getElementsBySelector('img')[0].src;
			if (currentImg == newImg) {
				auto_slide(newImg);
			}
			currentImg = newImg;
		}, 5);
		
	});
	
}

function auto_slide (imgUrl) {
	// Get current image number
	imgArray = imgUrl.toArray();
	// The number is always the 5th last element in the array ... grrr magic numbers!
	imgNum = parseInt(imgArray[imgArray.length-5]);
	// Test to see if the marker is at the 9th image element and reset if necessary
	if (imgNum == 9) {
		altText = 'thumbnail1';
	}
	else {
		altText = 'thumbnail' + (imgNum + 1);
	}
	newThumbObj = $$('img').detect(function(n){ return n.readAttribute('alt') == altText;});
	
	slider_transition(newThumbObj);

}

function slider_transition (slide) {
	// Move the marker by the distance offset between two thumbnails
	var delta = (slide.viewportOffset().left - $('marker').viewportOffset().left) + 34;
	new Effect.Move($('marker').identify(), {
		x: delta, y: 0, mode: 'relative',
		transition: Effect.Transitions.sinoidal
	}, { queue: { position: 'end', scope: 'markerscope', limit: 1}}
	);
	
	// Make ajax call to request xml contents so that we can get the url for story
	new Ajax.Request(url, { 
		method: 'get',
		onSuccess: function(response) {
			var json = response.responseText.evalJSON();
			// Find the thumbnail we are operating on and then enumerate from json
			var thumbName = slide.readAttribute('alt');
			var node = json.images.image.find(function(n){ return n.thumbnail.altText == thumbName });
	
			// Update link information
			$('layout_link').writeAttribute('href', node.link);
		}
	});
	
	// Update main slider image and perform transition
	if (slide.nodeName == "IMG") {
		var targetUrl = imagesRoot + slide.readAttribute('alt').gsub('thumbnail','layout') + '.png';
		var currentImage = $('layout_link').firstDescendant();
		var canvas = $('image').firstDescendant();
		var newImage = $img({src: targetUrl, width: '740', height: '306', alt: 'slider_image', style: 'display: none'});
		canvas.insertBefore(newImage,currentImage);
		new Effect.Fade(currentImage.identify(), 
			{ duration:3, from:1.0, to:0.0 }, 
			{ queue: { position: 'end', scope: 'canvas', limit: 1}}
		);
		new Effect.Appear(newImage.identify(), 
			{ duration:2, from:0.0, to:1.0 }, 
			{ queue: { position: 'end', scope: 'canvas', limit: 1}}
		);
		currentImage.remove();
	}
}