var showCatCar = new Class(
{
	/*************************************************************************************************************************
	 * Variable
	 *************************************************************************************************************************/
	clone: '',
	
	
	
	/*************************************************************************************************************************
	 * Constructor
	 *************************************************************************************************************************/
	initialize: function()
	{
		this.load();
	},
	
	
	
	/*************************************************************************************************************************
	 * Evenements
	 *************************************************************************************************************************/
	load: function()
	{
		//evenement pour la selection de la categorie de vehicule
		if ( $('ribbon_combo') != undefined )
		$('ribbon_combo').addEvent('click', this.showCar_Cat.pass([], this));
		
		//quitter l'overlay lors du click
		if ( $('deliamask') != undefined )
		$('deliamask').addEvent('click', this.deliamaskClick.pass([], this));
	},
	
	
	
	/*************************************************************************************************************************
	 * Functions
	 *************************************************************************************************************************/
	//montrer le menu deroulant des categorie de vehicule
	showCar_Cat: function(f)
	{
		if ( $('deliamask').getStyle('opacity') == 0 || $('deliamask').getStyle('opacity') == 1)//pour eviter de refaire lanimation lorqu'elle est deja faite et eviter un bug d'affichage
		{
			var map = $('ribbon_border').getCoordinates();
			this.clone = $('ribbon_border').clone(true,true).injectAfter('deliamask');
			this.clone.set({
				'styles': {
					'z-index': '302',
					'position': 'absolute',
					'display': 'block',
					'top': map.top-$('ribbon_border').getStyle('margin-top').toInt(),
					'left': map.left-$('ribbon_border').getStyle('margin-left').toInt()
			}
			});
			this.clone.getFirst().getLast().setStyle('display','block');
			$('ribbon_border').setStyle('visibility','hidden');
			this.clone.addEvent('click', this.deliamaskClick.pass([], this));
			
			this.cancel_layer = true;
			this.show_Overlay();
		}
	},
	
	//on montre progressivement l'overlay
	show_Overlay: function(f)
	{
		//$("deliamask").setStyle("visibility", "visible"); /* no need */
		$("deliamask").setStyle('height',$(window).getScrollSize().y+$(window).getScroll().y);
		this.overlay_timer = new Fx.Tween("deliamask", 
		{
			property: 'opacity',
			duration: 'normal'
			//onComplete:f?f:function(){}
		}).start(0,0.6);
	},
	
	//lorqu'on clik sur le mask overlay
	deliamaskClick: function()
	{
		if ( this.cancel_layer )
		{
			//on detruit le clone et on affiche loriginal
			$('ribbon_border').setStyle('visibility','visible');
			$('ribbon_border').getFirst().getLast().setStyle('display','none');
			this.clone.dispose();
			//on cache l'overlay
			this.hide_Overlay();
		}
	},
	
	//on enleve progressivement l'overlay
	hide_Overlay: function()
	{
		//$('ribbon_combo').setStyle('z-index','20');//on remet le z-index pour l'overlay
		//$('topRightMenu').setStyle('z-index','20');//on remet le z-index pour l'overlay
		new Fx.Tween("deliamask", 
		{
			property: 'opacity',
			duration: 'normal'
		}).start($('deliamask').getStyle('opacity'),0);//0.6 -> 0
	}
	
	
	
	
});//fin class
	
	
	
//dom ready
window.addEvent('domready', function() {
	showCat = new showCatCar();
});