
var Slideshow = {
	listId:"slideShow_menu",
	imageId:"slideShow_img",
	imageFade:null,
	imageToChange:null,
	listImage: [],
	
	
	start: function () {
		Slideshow.initMenu();
	},
	
	initMenu: function () {
		var slideshow_menu = $$('#'+Slideshow.listId+' li');
		var selectedMenu = null;
		
		slideshow_menu.each(function(li, i){				
			var a = li.getElementsByTagName('a')[0];
			var fadeMe = [];
				fadeMe[i] = new Fx.Style(li, 'opacity', {
					duration: 200
				}); 
				fadeMe[i].set(0.3);	
				
			Slideshow.listImage[i] = a.href;
			a.href = 'javascript://';
			
			a.onmouseover = function() {
				fadeMe[i].stop();
				fadeMe[i].start(1);
			}
			a.onmouseout = function() {
				if(fadeMe[i]!=selectedMenu) {
					fadeMe[i].stop();
					fadeMe[i].start(0.3);
				}
			}
			
			a.onclick = function() {
				if(fadeMe[i]!=selectedMenu) {
					if(selectedMenu) {
						selectedMenu.stop();
						selectedMenu.start(0.5);
					}
					selectedMenu = fadeMe[i]
					
					Slideshow.imageToChange = Slideshow.listImage[i];
											
					
					if(Slideshow.imageFade) Slideshow.imageFade.stop();
					Slideshow.imageFade = new Fx.Style($(Slideshow.imageId), "opacity", {duration: 500, fps:30, transition: Fx.Transitions.linear, onComplete:Slideshow.imageChange}).start(0);
					Slideshow.changeDesc(this.title, this.rel);
					
				}
				
			}

			if(i==0) {
				a.onclick();
				fadeMe[i].stop();
				fadeMe[i].start(1);
				selectedMenu = fadeMe[i]
				
			}
								 
		});
		
	},

	imageChange: function(href) {
		new Asset.image(Slideshow.imageToChange, {id:'newImageLoaded', title:'image', onload:Slideshow.imageFadeIn});
	},
	
	imageFadeIn: function(href) {
		$('slideShow_img').src = Slideshow.imageToChange;
		
		Slideshow.imageFade.stop();
		Slideshow.imageFade = new Fx.Style($(Slideshow.imageId), "opacity", {duration: 500, fps:30, transition:Fx.Transitions.linear, onComplete:null}).start(1);
				
	},
	
	changeDesc: function(title, desc) {
		$('slideshow_desc').innerHTML = "<strong>"+title+"</strong><br />"+desc;
	}

};


window.addEvent('load', Slideshow.start);