var VenueBrowser = new Class({

	Implements: [Chain, Options],
	
	options: {
		background: "#FFFFFF",
		color: "#000000",
		activeBackground: "#000000",
		activeColor: "#FFFFFF",
		duration: 1000,
		transition: Fx.Transitions.Sine.easeOut
	},
	
	listElement: null,
	
	currentNode: null,

	initialize: function(listElement, options)
	{
		this.setOptions(options);
		this.listElement = listElement;
		this.preloadedImages = new Hash();
		this.preloadImages();
		this.venueName = $("venueName");
		this.venueAddress = $("venueAddress");
		this.prismClass = $("prismClass");
		this.country = $("country");
		this.outletType = $("outletType");
		this.photo = $("photo");
		this.processLinks();
		this.cachedImages = new Hash();
		this.resize();
		VenueBrowser.instance = this;
	},

	run: function()
	{
		switch (this.direction)
		{
			default:
			case 1:
				this.timerID = this.moveNext.periodical(4000, this);
				break;
			case -1:
				this.timerID = this.movePrevious.periodical(4000, this);
				break;
		}
		
	},

	stop: function()
	{
		this.pause();
		this.deselectNode(this.currentItem);
		this.currentItem = null;
		scrollbar.set(0);
	},
	
	pause: function()
	{
		$clear(this.timerID);
	},

	movePrevious: function()
	{
		// make sure there is a previous node
		if (this.currentItem && this.currentItem.getPrevious("li"))
		{
			// ok to move backwards
			// deselect hte current item
			this.deselectNode(this.currentItem);
			this.currentItem = this.currentItem.getPrevious("li");
			this.selectNode(this.currentItem);
			this.showItem(this.currentItem);
		} // otherwise there are no previous nodes
		else if (!this.currentItem)
		{
			this.currentItem = this.listElement.getFirst("li");
			this.showItem(this.currentItem);
		}
		if (scrollbar.slider.step > 0)
		{
			scrollbar.set(scrollbar.slider.step  - this.currentItem.offsetHeight);
		}
		else
		{
			scrollbar.slider.step++;
		}
	},
	
	moveNext: function()
	{
		if (this.currentItem && this.currentItem.getNext("li"))
		{
			this.deselectNode(this.currentItem);
			this.currentItem = this.currentItem.getNext("li");
			this.selectNode(this.currentItem);
			this.showItem(this.currentItem);
		}
		else if (!this.currentItem)
		{
			this.currentItem = this.listElement.getFirst("li");
			this.selectNode(this.currentItem);
			this.showItem(this.currentItem);
		}
		if (scrollbar.slider.step > 0)
		{
			scrollbar.set(scrollbar.slider.step  + this.currentItem.offsetHeight);
		}
		else
		{
			scrollbar.slider.step++;
		}
	},

	showItem: function(node)
	{
		this.data = this.getDataFromNode(node);
		// load the image in case they skipped ahead
		this.nextPhoto = new Element("img");
		this.nextPhoto.set("src", this.data.photo);
		this.nextPhoto.set("border", "0");
		// display the data
		this.venueName.erase("text");
		this.venueName.appendText(this.data.name);
		this.venueAddress.erase("text");
		this.venueAddress.set("html", this.data.address1 + "<br/>" + this.data.address2 + "<br/>" + this.data.address3);
		this.country.erase("text");
		this.country.appendText(this.data.country);
		this.prismClass.erase("text");
		this.prismClass.appendText(this.data.prism_class);
		// display the photo
		this.chain(
			function()
			{
				var tween = new Fx.Tween(this.photo, {property: "opacity"});
				tween.addEvent("complete", function(){
					VenueBrowser.instance.callChain();
				});
				tween.start(1, 0);
			},
			function()
			{
				this.photo.set("src", this.data.photo);
				tween = new Fx.Tween(this.photo, {property: "opacity"});
				tween.start(0, 1);
				this.clearChain();
			}
		);
		this.callChain();
	},

	/**
	 * Selects a node, morphs its background to black
	 */
	selectNode: function(node)
	{
		// fade in its backround colour
		var morph = new Fx.Morph(node, {duration: this.options.duration, transition: this.options.transition});
		morph.start({
			backgroundColor: "#000000"
		});
	},

	/**
	 * Deselects a node, morphs its background back to white
	 */
	deselectNode: function(node)
	{
		// fade in its backround colour
		var morph = new Fx.Morph(node, {duration: this.options.duration, transition: this.options.transition});
		morph.start({
			backgroundColor: "#FFFFFF"
		});
	},

	/**
	 * Handle the venue items being clicked
	 */
	clickEvent: function(event)
	{
		// stop processing
		this.pause();
		// find the source
		var source = event.target;
		if (source.nodeName.toUpperCase() != "LI")
		{
			source = source.getParent("li");
		}
		// deselect the current item
		if (this.currentItem)
		{
			this.deselectNode(this.currentItem);
		}
		// show the new data
		this.currentItem = source;
		this.selectNode(this.currentItem);
		this.showItem(this.currentItem);
		this.run();
	},

	/**
	 * Retrieve the data stored in a node
	 */
	getDataFromNode: function(node)
	{
		var dataNode = node.getLast("span.dataNode");
		var dataString = dataNode.get("text");
		var data = eval("(" + dataString + ")");
		return data;
	},

	/**
	 * process the links and adds click events to them
	 */
	processLinks: function()
	{
		var list = $$("ul.scrollable li");
		list.each(function(element) {
			//var data = this.getDataFromNode(element);
			//var img = new Element("img");
			//img.set("src", data.photo);
			// now add a stop event to the list
			var link = element.getFirst("a");
			link.addEvent("click", this.clickEvent.bindWithEvent(this));
		}, this);
	},

	/**
	 * Preloads five images
	 */
	preloadImages: function()
	{
		if (!this.preloadPoint)
		{
			this.preloadPoint = this.listElement.getFirst("li");
		}
		for (var i = 0; i < 5; i++)
		{
			if ((this.preloadPoint != undefined) && (this.preloadPoint = this.preloadPoint.getNext("li")))
			{
				var data = this.getDataFromNode(this.preloadPoint);
				this.preloadedImages[data.photo] = new Element("img");
				this.preloadedImages[data.photo].set("src", data.photo);
			}
		}
		this.preloadImages.delay(5000, this);
	},

	resize: function()
	{
		// resize the image display area depending on the screens width
		if (screen.width <= 800)
		{
			this.photo.setStyle("width", "320px");
			$("photoContainer").setStyle("width", "320px");
			this.photo.setStyle("height", "240px");
			$("photoContainer").setStyle("height", "240px");
		}
		else if (screen.width <= 1024)
		{
			// resize so its all visible in thw browser
			this.photo.setStyle("width", "450px");
			$("photoContainer").setStyle("width", "450px");
			this.photo.setStyle("height", "338px");
			$("photoContainer").setStyle("height", "338px");
		}
		else if (screen.width <= 1280)
		{
			// resize so its all visible in thw browser
			this.photo.setStyle("width", "490px");
			$("photoContainer").setStyle("width", "490px");
			this.photo.setStyle("height", "368px");
			$("photoContainer").setStyle("height", "368px");
		}
	}

	
});