function resetLink(element) {
    if(element) element.morph('a.mainNavigationLink');
}

function setCurrent(element) { 
    if(element) element.morph('a.currentLink');
}
var visibleDiv = $('div1');


function toggle(newSrc){

  
  //Decide which div to hide and which to show.
  if(visibleDiv == $("div1")){
	  //change the hidden image's source
	  $("image2").src = newSrc;
	  //fade the visible out and the hidden in.
	  $("div1").fade(0);
	  $("div2").fade(1);
	  //Set which div is visible.
	  visibleDiv = $("div2");
  }else{
	  //change the hidden image's source
	  $("image1").src = newSrc;
	  //fade the visible out and the hidden in.
	  $("div1").fade(1);
	  $("div2").fade(0);
	  //Set which div is visible
	  visibleDiv = $("div1");
  }
}

function loadImages(images){
	for(picture in images) { 
		var image = new Element('img',{ src:picture, style:'margin:0;' });
	
	}            
}

window.addEvent('domready', function() {
    loadImages(images);
	$('div2').opacity = 0;		

    toggle(images[0]);
	//var anotherEl = $('anotherElement');
	var firstPicture = $('firstPicture');
	var secondPicture = $('secondPicture');
	var thirdPicture = $('thirdPicture');
	var fourthPicture = $('fourthPicture');
	var fifthPicture = $('fifthPicture');
	
	if(firstPicture)
		firstPicture.morph('a.currentLink');
	// Or we just use Element.morph
	//$('CSSmorphEffect').addEvent('click', function(e) {
		//e.stop();
		// Changes the element's style to .myClass defined in the CSS
		//anotherEl.morph('.myClass');
	//});
	
	if(firstPicture)
	firstPicture.addEvent('click', function(e) {
		e.stop();
		setCurrent(firstPicture);
		resetLink(secondPicture);
		resetLink(thirdPicture);
	    resetLink(fourthPicture);
	    resetLink(fifthPicture);
		toggle(images[0]);
		//alert("first");
	});
	
	if(secondPicture)
	secondPicture.addEvent('click', function(e) {
		e.stop();
		resetLink(firstPicture);
		setCurrent(secondPicture);
		resetLink(thirdPicture);
	    resetLink(fourthPicture);
	    resetLink(fifthPicture);
		toggle(images[1]);
		//alert("second");
	});

    if(thirdPicture)
	thirdPicture.addEvent('click', function(e) {
		e.stop();
		resetLink(firstPicture);
		resetLink(secondPicture);
		setCurrent(thirdPicture);
	    resetLink(fourthPicture);
	    resetLink(fifthPicture);
		toggle(images[2]);
		//alert("third");
	});
	
	if(fourthPicture)
	fourthPicture.addEvent('click', function(e) {
		e.stop();
		resetLink(firstPicture);
		resetLink(secondPicture);
		resetLink(thirdPicture);
	    setCurrent(fourthPicture);
	    resetLink(fifthPicture);
		toggle(images[3]);
		//alert("fourth");
	});
	
	if(fifthPicture)
	fifthPicture.addEvent('click', function(e) {
		e.stop();
		resetLink(firstPicture);
		resetLink(secondPicture);
		resetLink(thirdPicture);
	    resetLink(fourthPicture);
	    setCurrent(fifthPicture);
		toggle(images[4]);
		//alert("fifth");
	});
	
/*	var status = {
		'true': 'open',
		'false': 'close'
	};

	//--horizontal
	var myHorizontalSlide = new Fx.Slide('horizontal_slide', {mode: 'horizontal'});

	$('$('firstPicture')').addEvent('click', function(e){
		e.stop();
		myHorizontalSlide.slideIn();
	});

	$('$('secondPicture')').addEvent('click', function(e){
		e.stop();
		myHorizontalSlide.slideOut();
	});

	$('h_toggle').addEvent('click', function(e){
		e.stop();
		myHorizontalSlide.toggle();
	});

	$('h_hide').addEvent('click', function(e){
		e.stop();
		myHorizontalSlide.hide();
		$('horizontal_status').set('html', status[myHorizontalSlide.open]);
	});
	
	$('h_show').addEvent('click', function(e){
		e.stop();
		myHorizontalSlide.show();
		$('horizontal_status').set('html', status[myHorizontalSlide.open]);
	});
	
	// When Horizontal Slide ends its transition, we check for its status
	// note that complete will not affect 'hide' and 'show' methods
	myHorizontalSlide.addEvent('complete', function() {
		$('horizontal_status').set('html', status[myHorizontalSlide.open]);
	});*/
});