// Fade swapper
var FadeSwap = Class.create();
Object.extend(Object.extend(FadeSwap.prototype, AC.ContentSwap.prototype), {
	cs1IsAnimating: false,
	cs2IsAnimating: false,

	initialize: function(selectorClass, contentClass, eventStr) {
		Element.addClassName('inner', 'hasjs');

		this.eventStr = eventStr;
		
		// get lists of selectors and content in order
		this.selectorList = document.getElementsByClassName(selectorClass);
		this.contentList = document.getElementsByClassName(contentClass);
		for (var i=0; i<this.contentList.length; i++) {
			if (Element.hasClassName(this.contentList[i], 'active')) {
				this.lastSelectorIndex = i;
			} else {
				this.contentList[i].style.display = 'none';
			}
			
		}
		
		this.setMouseover();
	},

	swapContent: function(selectorIndex) {
		if(this.cs1IsAnimating == false && this.cs2IsAnimating == false) {
		
			this.cs1IsAnimating = true;
			this.cs2IsAnimating = true;
			
			var selector = this.selectorList[selectorIndex];
			var content = this.contentList[selectorIndex];
		
			// add 'on' class
			if(!Element.hasClassName(selector, 'active')) Element.addClassName(selector, 'active');
			// remove 'on' class from all other selectors and content areas
			for(var i=this.selectorList.length-1; i >= 0; i--) {
				if(i != selectorIndex) {
					if(Element.hasClassName(this.selectorList[i], 'active')) Element.removeClassName(this.selectorList[i], 'active');
				}
			}
		
			if(selectorIndex != this.lastSelectorIndex) {
				var lastContent = this.contentList[this.lastSelectorIndex];
		
				new Effect.Fade(lastContent, { duration:.25, queue:{position:'end', scope:'cs1'},
					afterFinish:this.afterFade.bind(this, lastContent, content)
				});
				
				//new Effect.BlindUp(lastContent, { duration:.75, queue:{position:'end', scope:'cs1'},
				//	afterFinish:this.afterFade.bind(this, lastContent, content)
				//});
				
				this.lastSelectorIndex = selectorIndex;
				
			} else {
				this.resetFlag('cs1IsAnimating');
				this.resetFlag('cs2IsAnimating');
			}
		}
		
		return false;
	},

	afterFade: function(lastContent, content) {
		this.resetFlag('cs1IsAnimating');

		new Effect.Appear(content, { duration:.25, queue:{position:'end', scope:'cs2'},
			afterFinish:this.afterAppear.bind(this, content)
		});
		//new Effect.BlindDown(content, { duration:.75, queue:{position:'end', scope:'cs2'},
		//	afterFinish:this.afterAppear.bind(this, content)
		//});
	},

	afterAppear: function(content) {
		this.resetFlag('cs2IsAnimating');
	},

	resetFlag: function(flagName) {
		if(flagName == 'cs1IsAnimating') this.cs1IsAnimating = false;
		if(flagName == 'cs2IsAnimating') this.cs2IsAnimating = false;
	}
});

Event.observe(window, 'load', function() {
	new FadeSwap('swapnav', 'swapcontent', 'click');
	
}, false);


function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function readMap ()
 {
     var map, i, nav_home, mapnav;
     mapnav = document.getElementById('navigatie');
     nav_home = document.getElementById('nav');
     mapnav.className = nav_home.className;
     // get array of map area tags
     map = document.getElementsByTagName('area');
     for(i=0;i<map.length;i++)
     {
     map[i].onmouseover=function(){shift(this);};
     map[i].onmouseout=function(){shift(this);};
     }
 }
 
 function shift (o)
 {
     var mapnav, id, nav_home;
     id = o.id;
     mapnav = document.getElementById('navigatie');
     nav_home = document.getElementById('nav');
     if (id == mapnav.className){
     	mapnav.className = nav_home.className;
     } else {
     	mapnav.className = id;
     }
 }


 window.onload=function(){
  readMap();
  MM_preloadImages('i/c/nav_home.png','i/c/nav_info.png','i/c/nav_leiding.png','i/c/nav_activiteiten.png','i/c/nav_evenementen.png','i/c/nav_fotos.png','i/c/nav_extra.png');
 }