/*******************************	DEFAULT CONFIGS		************************

	var menuView = loadMenu({
		menuGlobalContainer:'carousselCarnet', 	===> 	IDENTIFIANT DU BLOC PRINCIPALE
		menuJsonSrc:'json/menuJson.json', 	===>	URL DU JSON A INTEROGER
		autoStart:true, 			===>	DEMARAGE AUTOMATIQUE
		menuSelectedKey:0, 			===>	PREMIER ELEMENT A AFFICHER
		delayWanted:6000, 			===>	DELAIS ENTRE LES ANIMATION DANS UN DEMARAGE AUTO
		delayTransition:2000 			===>	DUREE D'ANIMATION
	});

							BY MALEK AKA RADOK THE ROOXXOR :D

****************************************************************************************/

var loadMenu = function (menuObj) {
	// INSTANTIATION DE L'OBJET RECU
	// VALEURS PAR DEFAUT
	var defaultConfigs = {
		menuGlobalContainer:'',
		menuJson:{},
		//menuJsonSrc:'',
		//menuTypeRubrique:'accueil',
		autoStart:true,
		menuSelectedKey:0,
		delayWanted:10000,
		delayTransition:2000
	};
	// EXTENSION DE L4OBJET RECU PAR LES VALEUR PAR DEFAUT
	if (!menuObj) menuObj = {};
	$extend(defaultConfigs, menuObj);
	menuObj = defaultConfigs;

	if (menuObj.menuGlobalContainer == '') console.error('menuObj.menuGlobalContainer : Veuillez indiquer CONTENAIRE PRINCIPAL A CIBLER');
	//if (menuObj.menuJsonSrc == '') console.error('menuObj.menuJsonSrc : Veuillez indiquer le fichier JSON A CIBLER');

	var menuView = this;
	menuView.menuGlobalContainer = $(menuObj.menuGlobalContainer);
	//menuView.menuJsonSrc = menuObj.menuJsonSrc;
	menuView.autoStart = menuObj.autoStart;
	menuView.menuSelectedKey = menuObj.menuSelectedKey;
	menuView.delayWanted = menuObj.delayWanted;
	menuView.delayTransition = menuObj.delayTransition;
    menuView.menuTypeRubrique = menuObj.menuTypeRubrique;
    menuView.menuJson = menuObj.menuJson;
	menuView.arrayImg = new Array();
	this.init = function () {
		// INIATILSATEUR CREATION DES NODE QUI CONTIENDRONS LES ELEMENTS
		var divNav = new Element('div',{'id':'menuLeft'});
		var divShow = new Element('div',{'id':'menuRight'});

		// REQUETE JSON QUI IRA PIOCHER LES ELEMENT DE MENU ANS L'ORDRE D'AFFICHAGE
		var reqUrl = menuView.menuJsonSrc;
		var menuObj;
		//var jsonReq = new Request.JSON({
		//	url:reqUrl,
		//	onSuccess:function(responseJSON, responseText) {
		//		menuObj = responseJSON.menu;
		//		menuView.menuObj = menuObj;
		//		// FONCTION D'APPEL DES ELEMENTS A AFFICHER
		//		// !IMPORTANT LE PARAMETRE "menuSelectedKey" DEFINI DANS L'OBJET
		//		// PERMET D'AFFICHER UN ELEMENT AUTRE QUE LE PREMIER DE LA LISTE
		//		// PAR DEFAUT VALEUR 0
		//		menuView.showFirstPict();
		//		// !IMPORTANT LE PARAMETRE AUTOSTART DEFINI DANS L'OBJET APELANT
		//		// DEFINI SI LE CAROUSSEL TOURNE AUTOMATIQUEMENT
		//		if (menuView.autoStart != false ) {
		//			menuView.startTimer();
		//			var globalContainer = menuView.menuGlobalContainer;
		//			globalContainer.addEvents({
		//				'mouseover':function(){$clear(menuView.counter);},
		//				'mouseout':function(){menuView.startTimer();}
		//			});
		//		}
		//	}
        //}).send('type_rubrique='+menuView.menuTypeRubrique
        //        );

		// AFFICHAGE PROGRESSIVE DES ELEMENT DE MENU
		divNav.setStyle('margin-left', '-215px');
		var transition = new Fx.Tween(divNav,{
			duration:800,
			onStart:function(){
				//jsonReq.send();
			}

		});
		transition.start('margin-left', '-215px', '0px');
		menuView.menuGlobalContainer.adopt(divNav);

		// MISE EN PLACE DES DIV DANS LE DOM
		menuView.menuGlobalContainer.adopt(divShow);
		menuView.menuNavBar = $(divNav);
		menuView.menuViewBlock = $(divShow);

        menuObj = menuView.menuJson.menu;
        menuView.menuObj = menuObj;
        menuView.showFirstPict();
        if (menuView.autoStart != false ) {
            menuView.startTimer();
            var globalContainer = menuView.menuGlobalContainer;
            globalContainer.addEvents({
                    'mouseover':function(){$clear(menuView.counter);},
                    'mouseout':function(){menuView.startTimer();}
                    });
        }

	}
	this.showFirstPict = function () {
		// CONTRUCTION DES ELEMENTS DU MENU ET TEXTES
		// ET DES ACTIONS A EFFECTUEES SUR LES LIENS MENU
		var menuObj = menuView.menuObj;
		menuObj.each(function(item, key) {
			var a = new Element('a',{
				'href':'#',
				'text':item.titre,
				'title':item.titre,
				'class':(key==menuView.menuSelectedKey)?'selectedMenu':''
			});
			a.addEvent('click',function(event){
				event.stop();
				menuView.setPicture(key);
			});
			menuView.menuNavBar.adopt(a);
			var div = new Element ('div',{
				'class':'menuRightContent',
				'style':'background-image:url('+menuObj[key].img+');height:'+menuView.menuViewBlock.getStyle('height')+';width:'+menuView.menuViewBlock.getStyle('width')+';visibility:hidden;opacity:0;'
			});
			var chapeau = new Element('div',{
				'class':'menuRightChapeau',
				'html':menuObj[key].chapeau
			});
			div.adopt(chapeau);
			menuView.arrayImg[key] = div;

		});
		// AFFICHAGE DE L'ELEMENT DEFINIT DANS L'OBJET
		menuView.arrayImg.each(function(item, key){
			menuView.menuViewBlock.adopt(item);
			if (key == menuSelectedKey) {
				item.setStyles({'opacity':'0','visibility':'visible'});
				var myFx = new Fx.Tween(item,{
					duration:menuView.delayTransition,
					onStart:function() {
					},
					onComplete:function(){
					}
				});
				myFx.start('opacity', '0', '1');
			}
		});
		// ON SUPRIME LA CLASSE LOADER ET ENRICHI L'OBJET DE LA LISTE DES ELEMENTS
		menuView.menuGlobalContainer.removeClass('loadData');
		menuView.currentItemKey = menuView.menuSelectedKey;
		menuView.menuList = menuView.menuNavBar.getChildren('a');
	}
	this.hideCurrentItem = function () {
		// LE PARAMETRE "currentItemKey" DEFINI L'ELEMENT COURANT
		// LE PARAMETRE "delayTransition" DEFINIT LE TEMPS D'EXECTION POUR LE MORPHING
		var currentItem = menuView.arrayImg[menuView.currentItemKey];
		var myFx = new Fx.Tween(currentItem,{
			duration:menuView.delayTransition,
			onStart:function() {
				// AU DEBUT DE L'EFFET
				// ON ENLEVE LA CLASS SELECTED
				menuView.menuList[menuView.currentItemKey].set('class','');
			},
			onComplete:function() {
				// A LA FIN DE L"EFFET
				// ON DISSIMULE L'ELEMENT
				currentItem.setStyle('visibility','hidden');
			}
		});
		myFx.start('opacity', '1', '0');
	}
	this.showNewItem = function () {
		var menuObj = menuView.menuObj;

		// ON VERIFI QUE L'ELEMENT N'EST PAS LE DERNIER DE LA LISTE
		// SI C'EST LE CAS ON BOUCLE :)
		if (menuView.currentItemKey == menuObj.length-1) menuView.currentItemKey = 0;
		else menuView.currentItemKey = menuView.currentItemKey+1;
		var myFx = new Fx.Tween(menuView.arrayImg[menuView.currentItemKey],{
			duration:menuView.delayTransition,
			onStart:function() {
				menuView.arrayImg[menuView.currentItemKey].setStyles({'opacity':'0','visibility':'visible'});
				menuView.menuList[menuView.currentItemKey].set('class','selectedMenu');
			},
			onComplete:function(){
				//menuView.arrayImg[menuView.currentItemKey].setStyle('visibilty','hidden');
			}
		});
		myFx.start('opacity', '0', '1');
	}
	this.setPicture = function (key) {
		// FONCTION D'AFFICHAGE DES CONTENU CORRESPONDANT AU LIEN CLIQUE
		// FAIS LA MEME CHOSE QUE hideCurrentItem et showNewItem AVEC UN IDENTIFIANT
		// HORS DU CHRONO
		var menuObj = menuView.menuObj;
		if (menuView.menuList[key].get('class') != 'selectedMenu' ) {
			menuView.menuList.each(function(item, key){
				item.set('class', '');
			});
			menuView.menuList[key].set('class','selectedMenu');
			menuView.currentItemKey = key;
			menuView.menuViewBlock.adopt(menuView.arrayImg[key]);
			var myFx2 = new Fx.Tween(menuView.arrayImg[key],{
				duration:menuView.delayTransition/2,
				onStart:function(){
					menuView.arrayImg[key].setStyles({'opacity':'0','visibility':'visible'});
				}

			});
			// Suppression de l'ancien element
			var currentItem = menuViewBlock.getChildren('div');
			var myFx = new Fx.Tween(currentItem[0],{
				duration:menuView.delayTransition/2,
				onStart:function() {
					myFx2.start('opacity', '0', '1');
				},
				onComplete:function() {
					currentItem[0].setStyles({'opacity':'0','visibilty':'hidden'});
				}
			});
			myFx.start('opacity', '1', '0');
		}else console.log('menuSelected');
	}
	this.startTimer = function () {
		// CHRONO QUI PREND EN PARAMETRE "delayWanted" ici 6 seconces
		var Site = { counter: 0 };
		var addCount = function(){
			// A CHAQUE ROULEMENT
			// ON CACHE L'ANCIEN ELEMENT
			menuView.hideCurrentItem();
			// ON AFFICHE LE NOUVEAU
			menuView.showNewItem();
		};
		menuView.counter = addCount.periodical(menuView.delayWanted);
	}
	this.init();
}