// JavaScript Document
var Slider = new Class ({
						   
	'initialize' : function(_idNavigation, _idContenu) {
		this.elementsNav = $(_idNavigation).getElement('ul').getElements('li');
		this.elementNavActived = null;		
		
		this.isLoad = false;
		this.load(_idContenu);
		
		this.elementsNav.each(function(element) {
			element.addEvent('click', function() {	
											   
				if ( this.isLoad ) {					
					if ( element != this.elementNavActived )
				 		this.afficherVue(element);
				}
				
				return false;
				 
			}.bind(this));
		}.bind(this));
	},
	
	'load' : function(_divContenu) {
		$('slider_vue_loading').setStyle('z-index', '3');
		
		var request = new Request.HTML().get('./accueil/slider');
		request.addEvent('onFailure', function(xml) {
			console.log(xml);
		}.bind(this));
		
		request.addEvent('onSuccess', function(responseTree, responseElements, responseHTML, responseJavascript) {		
			this.vues = responseElements;
			this.vues.each(function(element) {
				if ( element.hasClass('slider_vue') ) {
					element.setStyles({
						'visibility' : 'hidden',
						'opacity' : 0
					});
				}
			});
			$('slider_loading').dispose();
			$(_divContenu).adopt(responseTree);
			this.isLoad = true;
			this.transition(this.vues[0], $('slider_vue_loading'));
			this.elementNavActived = this.elementsNav[0];
			new FormContact();
			//this.loadJavascript(responseJavascript);
		}.bind(this));
	},
	
	'loadJavascript' : function(_javascript) {
		var script = new Element('script', {
			'type' : 'text/javascript'						 
		});
		script.set('text', _javascript);
		
		document.head.adopt(script);
	},
	
	'afficherVue' : function(_elementNav) {
		var newClass = _elementNav.getProperty('class');
		var oldClass = this.elementNavActived.getProperty('class');
		var vueToHide = null;
		var vueToShow = null;
		
		this.vues.each(function(vue) {
			if ( vue.hasClass(oldClass) )
				vueToHide = vue;
		}.bind(this));
		
		this.vues.each(function(vue) {
			if ( vue.hasClass(newClass) )
				vueToShow = vue;
		}.bind(this));
		
		this.transition(vueToShow, vueToHide);
		this.activer(_elementNav);
	},
	
	'activer' : function(_elementNav) {
		this.elementNavActived = _elementNav;
		this.elementNavActived.getFirst('a').addClass('actived');
		
		this.elementsNav.each(function(element) {										   
			if ( element != this.elementNavActived ){
				if ( element.getFirst('a').hasClass('actived') )
					element.getFirst('a').removeClass('actived');
			}
		}.bind(this));
	},
	
	'transition' : function(_elementToShow, _elementToHide) {
		/**
		 * Transition entre les 2 vues :
		 */
		_elementToHide.setStyle('z-index', '3');
		
		_elementToShow.setStyles({
			'z-index' : '2', 
			'visibility' : 'visible',
			'opacity' : '1'
		});
		
		
		// Cas particulier du player :
		if ( _elementToHide.getProperty('id') == 'slider_vue_images' )
			$$('div#player embed').setStyle('display', 'none');
		/*if ( _elementToShow.getProperty('id') == 'slider_vue_images' )
			$('slider_player_loading').setStyle('display', 'block');*/
			
		// Cas particulier du google map :
		if ( _elementToHide.getProperty('id') == 'slider_vue_acces' )
			$$('div#google_map iframe').setStyle('display', 'none');
		if ( _elementToShow.getProperty('id') == 'slider_vue_acces' )
			$('slider_google_map_loading').setStyle('display', 'block');
		
		var fxVue = new Fx.Tween(_elementToHide, {
			onComplete: function() {
				_elementToHide.setStyles({
					'z-index' : '1', 
					'visibility' : 'hidden'
				});
				
				// Cas particulier du player :
				if ( _elementToShow.getProperty('id') == 'slider_vue_images' ) {
					$$('div#player embed').setStyle('display', 'block');
					//$('slider_player_loading').setStyle('display', 'none');
				}
				
				// Cas particulier du google map :
				if ( _elementToShow.getProperty('id') == 'slider_vue_acces' ) {
					$$('div#google_map iframe').setStyle('display', 'block');
					$('slider_google_map_loading').setStyle('display', 'none');
				}
			}.bind(this)							  
		});
		fxVue.start('opacity', '0');
				
		/**
		 * Transition entre les 2 couleurs du fond :
		 */
		var fxFond = new Fx.Morph('slider', {
			duration: 600,
			transition: Fx.Transitions.Sine.easeOut
		});
		
		var el = 'div#slider.' + (_elementToShow.getProperty('class').split(' ')[0]);
		fxFond.start(el);

	}


});