/*
*
*	MODULE FRISE / ACCORDEON : CDC
*	@Autor : jkelly <jimi.kelly@fr.nurun.com>
*	@Date : 07/2008
*	@Import JS : prototype.js (v1.6.0.2)
*
*/




/*
*
	Aplication : point d'entrée de l'application
*/
var trace;
var sApp;
var SliderApp = Class.create();
SliderApp.prototype = {
	
	/* point d'entrée de l'application */
	initialize: function(scope, sourceData, debugMode) {
		sApp			= this;
		this.scope		= scope;
		this.sourceData = sourceData;
		this.debugMode	= debugMode;

		this.initializeManagers();
		
		return this;
	}, 
	
	/* */
	initializeManagers: function(){
		/* Fenetre de Debug */
		this.debug			= new DebugManager(this.debugMode);
		document.DBW		= this.debug;
		/* Modele : gère l'accès aux données */
		this.dataManager	= new DataManager(this.sourceData);
		/* Vue : gère l'affichage des gros visuels */
		this.visuManager	= new VisuManager(this.scope);
		/* Vue/Controler : gère la frise défilente, récupere les clics, et les passe à SliderApp.changeSelectedFriseItem(id) */
		this.friseManager	= new FriseManager(this.scope);
		/* Vue/Controler : gère l'accordéon sous la frise, récupere les clics, et les passe à SliderApp.changeSelectedEventItem(id) */
		this.eventManager	= new EventManager(this.scope);
	},
	
	/* lien direct depuis la page HTML */
	directLinkByItemId: function(item_id){
		this.friseManager.onFriseItemClic(item_id);
	},
	
	/*  Invoqué par un controler "friseItem", au clic sur une date. Demande la mise à jour de l'application vers une nouvelle rubrique. Num est l'index du bouton cliqué, pour savoir si on slide (le visu) vers la gauche ou la droite */
	changeSelectedFriseItem: function(frise_item_id, num) {
		if(num==null){num=0;}
		//alert("changeSelectedFriseItem:"+frise_item_id);
		//trace("app.changeSelectedFriseItem('"+frise_item_id+"','"+num+"')");
		
		// indique au visu manager l'index déclanché, pour qu'il choisisse ensuite un fade ou un slide
		this.visuManager.friseItemNum = num;
		
		// mask la liste en cours, puis génération de l'event liste, pour le friseItem sélectionné
		this.eventManager.clearEventList(frise_item_id);
		
		// déclanche le premier EventItem
		this.eventManager.onEventItemClic(frise_item_id, "0", num);
	},
	
	/*  Invoqué par un controler "eventItem", au clic sur un élément de l'accordéon. Demande la mise à jour de l'application vers un nouvel Evenement */
	changeSelectedEventItem: function(event_item_index, num) {
		//trace("===>"+this.friseManager.getCurrentActiveFriseItem().id.split("frise_item_")[1]+"|"+event_item_index+ " & "+this.visuManager.friseItemNum+"|"+num);
		
		if(num==null||num==undefined){num = this.visuManager.friseItemNum}
				
		// chargement du nouveau visuel
		this.visuManager.updateVisu(this.friseManager.getCurrentActiveFriseItem().id.split("frise_item_")[1], event_item_index, num);
		
		//alert("changeSelectedEventItem:"+frise_item_id+"|"+event_item_index);
		//trace("app.changeSelectedEventItem('"+event_item_index+"')");
	}
	
	
}; 





/*
*
	Model : Accesseurs de données
*/

var DataManager = Class.create();
DataManager.prototype = {
	
	/* point d'entrée de l'application */
	initialize: function(sourceData) {
		this.sourceData				= sourceData;
		this.friseItemLength 		= "";
		this.friseItemEventLength 	= "";
	},   
	
	/* ****Accesseurs de données à mettre**** */
	
	/* renvoi la liste d'élements à mettre dans la frise */
	getFriseItemList:function(){
		return $$('div.friseItemData');
	},
	
	/* nombre d'élément dans la frise */
	getFriseItemListLength:function(){
		this.friseItemLength = $$('div.friseItemData').length;
		return this.friseItemLength;
	},
	
	/* renvoi l'id d'un friseItem, par son index (position dans le noeud) */
	getFriseItemIdByIndex:function(index){
		var item_id = $$('div.friseItemData')[index].id;
		if(item_id==null || item_id=="") item_id = "FriseItem id not found:"+index;
		return item_id;
	},
	
	/* renvoi les données d'un élement de la frise, par son id */
	getFriseItemById:function(id){
		var item = $$('div.friseItemData#'+id)[0];
		if(item==null || item=="") item = "FriseItem not found:"+id;
		return item;
	},
	
	/* renvoi le titre d'un élément de la frise */
	getFriseItemTitleById:function(id){
		var item = $$('div.friseItemData#'+id+' h2')[0].innerHTML;
		if(item==null || item=="") item = "Title not found:"+id;
		return item;
	},
	
	/* renvoi la liste d'évenements d'un élément de la frise */
	getEventListById:function(friseItem_id){
		var item = $$('div.friseItemData#'+friseItem_id+' ul li');
		if(item==null || item=="") item = "List not found:"+friseItem_id;
		return item;
	},
	
	/* nombre d'élément dans la frise */
	getEventListLength:function(friseItem_id){
		this.friseItemEventLength = $$('div.friseItemData#'+friseItem_id+' ul li').length;
		return parseInt(this.friseItemEventLength);
	},
	
	/* renvoi un Event de la liste, par son index (position dans le noeud <ul>) */
	getEventByIndex:function(friseItem_id, index){
		return $$('div.friseItemData#'+friseItem_id+' ul li')[index];
	},
	
	/* renvoi le titre d'un Event, par son index (position dans le noeud <ul>) */
	getEventTitleByIndex:function(friseItem_id, index){
		return $$('div.friseItemData#'+friseItem_id+' ul li')[index].getElementsBySelector('h3')[0].innerHTML;
	},
	
	/* renvoi le texte d'un Event, par son index (position dans le noeud <ul>) */
	getEventTextByIndex:function(friseItem_id, index){
		return $$('div.friseItemData#'+friseItem_id+' ul li')[index].getElementsBySelector('p')[0].innerHTML;
	},
	
	/* renvoi l'url de l'image de fond d'un Event, par son index (position dans le noeud <ul>) */
	getEventBgUrlByIndex:function(friseItem_id, index){
		return $$('div.friseItemData#'+friseItem_id+' ul li')[index].getElementsBySelector('img')[0].src;
	},
	
	/* juste un test sur l'entrée des données */
	viewSourceData:function(){
		alert(this.sourceData.outerHTML);
	}
};








/*
*
	Vue
*/

// gere le chargement et l'affichage du gros visuel
var VisuManager = Class.create();
VisuManager.prototype = {
	
	/* initialise le conteneur de visuels */
	initialize: function(scope) {
		this.scope = scope;
		//// insertion par DOM impossible, à revoir
		var code  = '<div id="visuView" style="position:relative;width:857px;height:280px;overflow:hidden">';
			code += '</div>';
		this.scope.innerHTML = code;
		this.mainContainer = $("visuView");
		this.currentVisuContainer="";
		this.currentVisuIndex="";
		this.currentFriseItem="";
		
		//// debug
		//this.mainContainer.innerHTML += '<img src="/fr/fr/img/EC-marque-histoire-diapo-1995.jpg" id="xxx" border="0" alt="" style="position:absolute" />';
	},   
	
	/* index qui permetra de savoir si l'on lance un fade ou un slide */
	friseItemNum:"",
	
	getVisuContainerCode:function(id, url){
		var code  = '<div id="visu_'+id+'" style="width:857px;height:280px;background:#F9F8F8;position:absolute;left:857px">';
				code += '<img src="'+url+'" id="pict1" border="0" width="860" height="280" alt="" style="position:absolute;z-index:11;left:0px;" />';
				code += '<img src="/fr/fr/img/spinner.gif" border="0" width="50" height="50" alt="" style="position:absolute;z-index:10;margin:140px 0 0 428px;" />';
			code += '</div>';
		return code;
	},
	

	/* charge un nouveau visuel */
	loadVisu:function(friseItem, eventItem){
		
		var url = sApp.dataManager.getEventBgUrlByIndex(friseItem, eventItem);
		this.mainContainer.innerHTML += this.getVisuContainerCode(friseItem+"_"+eventItem, url);

	},
	
	/* invoqué à chaque changement de visuel */
	updateVisu:function(friseItem, eventItem, num){
		this.mainContainer = $("visuView");
		
		// vire l'ancien
		var v = $("visu_"+friseItem+"_"+eventItem);
		if((v!=null && v!=undefined && v!="")){
			v.remove();
		}
		
		// charge le nouveau
		this.loadVisu(friseItem, eventItem);
		
		// maj de la référence vers le nouveau visuel
		var old				= this.currentVisuContainer;
		var oldIndex		= this.currentVisuIndex;
		var oldFriseItem 	= this.currentFriseItem;
		var v 				= $("visu_"+friseItem+"_"+eventItem);
		this.currentVisuContainer	= v;
		this.currentVisuIndex		= num;
		this.currentFriseItem		= friseItem;
		var clone = this;
		
		setTimeout(function(){
			/**/
			//trace("===>"+oldFriseItem+" | "+clone.currentFriseItem+ " &&& "+oldIndex+" | " +clone.currentVisuIndex);
			
			
			// si c'est un changement d'Event
			if(oldFriseItem==clone.currentFriseItem && (oldIndex!=clone.currentVisuIndex)){
				clone.fadeVisu(old, clone.currentVisuContainer);
			}
			
			// si on clic sur une date supérieur
			else if(oldIndex<num){
				clone.slideVisuToLeft(old, clone.currentVisuContainer);
			}
			// sur une date inférieur
			else if(oldIndex>num){
				clone.slideVisuToRight(old, clone.currentVisuContainer);
			}
			// au premier clic
			else if(oldIndex=="" || oldIndex==null){
				clone.fadeVisu(old, clone.currentVisuContainer);
			}
			// en cas de stress mode !
			else{
				clone.fadeVisu(old, clone.currentVisuContainer);
			}
			
			//// la slide déconne pour l'instant
			//clone.fadeVisu(old, clone.currentVisuContainer);
		}, 100);
		
	},
	
	/* lance l'effet d'aparition en slide (fait au changement de date) */
	slideVisuToLeft:function(oldContainer, newContainer){
		// préparation
		newContainer.style.left = "857px";
		oldContainer.style.zIndex = 21;
		newContainer.style.zIndex = 20;
		newContainer.setOpacity(1);
	
		// action
		var fx_new = new Effect.Move(newContainer, { x: 0, mode: 'absolute', duration: 0.8, delay:0.1, transition: Effect.Transitions.sinoidal});
		var fx_old = new Effect.Move($(oldContainer.id), { x: -857, mode: 'absolute', duration: 0.8, delay:0.1, transition: Effect.Transitions.sinoidal});

	},
	
	/* lance l'effet d'aparition en slide (fait au changement de date) */
	slideVisuToRight:function(oldContainer, newContainer){
		// préparation
		newContainer.style.left = "-857px";
		oldContainer.style.zIndex = 21;
		newContainer.style.zIndex = 20;
		newContainer.setOpacity(1);
		
		// action
		var fx_new = new Effect.Move(newContainer, { x: 0, mode: 'absolute', duration: 0.8, delay:0.1, transition: Effect.Transitions.sinoidal });
		var fx_old = new Effect.Move($(oldContainer.id), { x: 857, mode: 'absolute', duration: 0.8, delay:0.1, transition: Effect.Transitions.sinoidal });
	},
	
	/* lance l'effet d'aparition en fade (fait au changement d'event, dans une même date) */
	fadeVisu:function(oldContainer, newContainer){
		// préparation
		var _oldContainer = oldContainer;
		var _newContainer = newContainer;
		newContainer.style.left = "857px";
		newContainer.setOpacity(0);
		newContainer.style.zIndex = 20;
		newContainer.style.left = "0px";
		
		// callback
		if(oldContainer==null || oldContainer=="" || oldContainer==newContainer)
			var onFinish = function(){}
		else{
			var onFinish = function(){
				// si l'on est pas dans le cas d'une ouverture/fermeture d'un memeEventItem
				if(_oldContainer.id != _newContainer.id)
					$(_oldContainer.id).style.display = "none";
			}
		}
		//var onFinish = function(){ _oldContainer.style.zIndex = 20;_oldContainer.innerHTML="";_oldContainer.outerHTML="";alert(_oldContainer.parentNode); }
		
		// action
		var fx_new = new Effect.Opacity(newContainer, {from: 0, to: 1, duration: 1, delay:0.2, transition: Effect.Transitions.linear, afterFinish:onFinish});
	}
	
}; 


// gere la génération de la frise (liste de date défillante). Liste d'objets "friseItem"
var FriseManager = Class.create();
FriseManager.prototype = {
	
	/* génération de la frise (slider) */
	initialize: function(scope) {
		this.scope = scope;
		//// insertion par DOM impossible, à revoir
		this.scope.innerHTML 			+= '<div id="friseView"></div>';
		this.mainContainer 				 = $("friseView");
		this.mainContainer.innerHTML 	+= '<div id="friseViewScrolled"></div>';
		this.mainContainer.innerHTML 	+= '<img src="/fr/fr/img/px.gif" id="clickMasker" alt="" border="0" />';
		this.populateControllers();
		this.populateList();
	}, 
	
	/* génrère les boutons gauche/droite */
	populateControllers:function(){
		this.mainContainer.innerHTML 	+= '<a href="javascript:sApp.friseManager.moveLeft();" id="friseLeftBtn"><img src="/fr/fr/img/EC-marque-histoire-frise-navG.gif" alt="" border="0" /></a>';
		this.mainContainer.innerHTML 	+= '<a href="javascript:sApp.friseManager.moveRight();" id="friseRightBtn"><img src="/fr/fr/img/EC-marque-histoire-frise-navD.gif" alt="" border="0" /></a>';
		
		this.left_btn	= $("friseLeftBtn");
		this.right_btn	= $("friseRightBtn");
	},
	

	/* génrère la bande de FriseItem */
	populateList:function(){
		var list	= sApp.dataManager.getFriseItemList();
		var ln		= sApp.dataManager.getFriseItemListLength();
		var item;
		
		for(var j=0; j<ln; j++){
			var item_id	= sApp.dataManager.getFriseItemIdByIndex(j);
			var txt		= sApp.dataManager.getFriseItemTitleById(item_id);
			item 		= new FriseItem($("friseViewScrolled"), item_id, txt, j);
		}
		$("friseViewScrolled").style.width = (ln * 80)+"px";
	},
	
	/* à la fin du mouvement de slide */
	onMoveFinished:function(){
		sApp.friseManager.enabledFrise();
	},
	
	/* fait bouger le slider vers la gauche */
	moveLeft:function(){
		this.disabledFrise();
		var curPoX	= Number($("friseViewScrolled").style.left.toString().split("px")[0]);
		var futurX	= (curPoX + 80);
		// limite droite
		if(futurX>0) futurX = 0;
		var m = new Effect.Move('friseViewScrolled', {duration:0.8,x: futurX, mode: 'absolute',transition:Effect.Transitions.sinoidal,
		afterFinish:this.onMoveFinished});
	},
	
	/* fait bouger le slider vers la droite */
	moveRight:function(){
		this.disabledFrise();
		var curPoX		= Number($("friseViewScrolled").style.left.toString().split("px")[0]);
		//taille de la bande à scroller
		var bandeWidth	= $("friseViewScrolled").getWidth();
		// taille du masque (- les marges)
		var maskWidth	= $("friseView").getWidth() - 60;
		// limite gauche (chépa pk 3)
		var limiteLeft	= ((maskWidth - bandeWidth) + 3);
		
		var futurX	= (curPoX - 80);
		if(futurX<limiteLeft) futurX = limiteLeft;
		
		var m = new Effect.Move('friseViewScrolled', {duration:0.8,x: futurX, mode: 'absolute',transition:Effect.Transitions.sinoidal,
		afterFinish:this.onMoveFinished});
	},
	
	enabledFrise:function(){
		$("clickMasker").style.display = "none";
	},
	
	disabledFrise:function(){
		$("clickMasker").style.display = "block";
	},
	
	/* au clic sur un Item. Num est l'index du bouton cliqué, pour savoir si on slide (le visu) vers la gauche ou la droite */
	onFriseItemClic:function(item_id, num){
		// met l'ancien Item à OFF
		var old = this.getCurrentActiveFriseItem();
		if(old!="" && old!=null && old!="vide"){
			old.getElementsByTagName("a")[0].className = "off";
		}
		
		// met a jour la référence vers l'item actif
		this.setCurrentActiveFriseItem(item_id);
		// met le nouveau bouton à ON
		this.getCurrentActiveFriseItem().getElementsByTagName("a")[0].className = "on";
		
		// informe l'application du changement d'etat
		sApp.changeSelectedFriseItem(item_id, num);
	},
	
	currentActiveFriseItem:"vide",
	/* renvoi une référence vers l'item sélectionné */
	getCurrentActiveFriseItem:function(){
		return this.currentActiveFriseItem;
	},
	
	/* update l'id de la friseItem sélectionnée.  */
	setCurrentActiveFriseItem:function(item_id){
		this.currentActiveFriseItem = $("frise_item_"+item_id);
	}
}; 

// Element du slider de Dates
var FriseItem = Class.create();
FriseItem.prototype = {
	
	/* crait un élément du slider */
	initialize: function(scope, id, txt, num) {
		var eventView = $('eventView');
		this.scope 	= scope;
		this.scope.innerHTML += "<div class='date' id='frise_item_"+id+"'><a href='javascript:sApp.friseManager.onFriseItemClic(\""+id+"\","+num+");'>"+txt+"</a></div>";
		this.view	= $("frise_item_"+id);
		// par default, les boutons sont à OFF
		this.view.getElementsByTagName("a")[0].className = "off";
		return this;
	}
}; 


// gere l'accordéon d'évements spécifiques à une date. Liste d'objets "eventItem"
var EventManager = Class.create();
EventManager.prototype = {
	
	/* crait le conteneur d'accordéon */
	initialize: function(scope) {
		this.scope			= scope;
		this.friseItem_id		= "";
		this.eventItem_index	= "";
		//// insertion par DOM impossible, à revoir
		//this.scope.innerHTML += '<div id="eventView" class="scroll box"></div>';
		var oDivEventViewOuter = document.createElement('div');
		oDivEventViewOuter.id = 'eventViewOuter';
		var oDivEventView = document.createElement('div');
		oDivEventView.id = 'eventView';
		//oDivEventView.className = 'scroll box'; Suppression du scroll sur les contenus
		$('histoireInnerScroll').appendChild(oDivEventViewOuter);	
		oDivEventViewOuter.appendChild(oDivEventView);	
		this.mainContainer = $("eventView");
		
	},   
	
	/* invoqué au clic sur un bouton HTML */
	onEventItemClic:function(friseItem_id, eventItem_id, num){
		// temps de sécurité, sinon le DOM n'est pas encore à jour

		var waitTimeToOpen = 500;
		
		var old_friseItem	= this.friseItem_id;
		var old_eventItem	= this.eventItem_index;
		var _num			= num;
		
		// ferme l'ancien EventItem
		if(old_eventItem!="" && old_eventItem!=null && old_eventItem!="vide"){
			this.closeEvent($("eventItem_"+this.eventItem_index));
			waitTimeToOpen = 800;
		}
		
		
		// met a jour la référence vers l'item actif
		this.eventItem_index = eventItem_id;
		
		// si c'est un clic sur le meme EventItem, du même friseItem, on referme, sans rien au callback
		if((old_friseItem == friseItem_id) && (old_eventItem == eventItem_id)){
			// et du coup plus d'item actif à stocker
			this.eventItem_index = "";
			return;
		}
		
		
		
		
		// met le nouveau bouton à ON, mais attends 
		setTimeout(function(){
			// montre son texte
			sApp.eventManager.openEvent($("eventItem_"+eventItem_id));
			// informe l'application du changement d'etat, pour charger le visuel par exemple
			sApp.changeSelectedEventItem(eventItem_id, _num);
			//addScrollToContainer($("eventViewOuter"),70)
		}, waitTimeToOpen);
		
	},
	
	/* génrère la liste de EventItem. Invoqué à chaque changement de friseItem */
	populateEventList:function(friseItem_id){
		this.friseItem_id	= friseItem_id;
		var list	= sApp.dataManager.getEventListById(this.friseItem_id);
		var ln		= sApp.dataManager.getEventListLength(this.friseItem_id);
		var item;
		$("eventView").innerHTML = "";
		for(var j=0; j<ln; j++){
			var item_index	= ""+j;//sApp.dataManager.getEventByIndex(this.friseItem_id, j).id;
			var lien		= sApp.dataManager.getEventTitleByIndex(this.friseItem_id, j);
			var txt			= sApp.dataManager.getEventTextByIndex(this.friseItem_id, j);
			var url_img		= sApp.dataManager.getEventBgUrlByIndex(this.friseItem_id, j);
			item 			= new EventItem($("eventView"), this.friseItem_id, item_index, lien, txt);
		}
		var fadeIn = new Effect.Opacity('eventView', {duration: 0.3, transition: Effect.Transitions.sinoidal, from: 0, to: 1});
		//addScrollToContainer($("eventViewOuter"),70) suppression scroll vertical
		
	},
	
	/* vide la liste en cours, puis lance la suivante au callback */
	clearEventList:function(friseItem_id){
		var fadeOut = new Effect.Opacity('eventView', {duration: 0.3, transition: Effect.Transitions.sinoidal, from: 1.0, to: 0,
			afterFinish:function(){
				sApp.eventManager.populateEventList(friseItem_id);
			}
		});

	},
	
	/* ouvre un évenement dans un accordéon, au clic sur son titre */
	openEvent:function(id_item){
		//trace("openEvent:"+ $("slidedown_"+id_item.id));
		
		
		// tourne la fleche
		var imgObj = $$("#"+id_item.id+" a .fleche")[0];
		imgObj.src = imgObj.src.replace(/-off/gi,"-on");
		
		var evenClassOff = $$("#"+id_item.id+" a. enventItemLink_off")[0];
		evenClassOff.toggleClassName('enventItemLink_on');
		evenClassOff.toggleClassName('enventItemLink_off');
		
		// ouvre le contenu
		/**/
		var fx = new Effect.SlideDown("slidedown_"+id_item.id, { 
		  duration: 0.4,
		  transition: Effect.Transitions.linear
		});
		//$("slidedown_"+id_item.id).style.display = "block";
	},
	
	/* ferme un évenement dans un accordéon, au re clic sur son titre, ou lorsqu'un autre est ouvert */
	closeEvent:function(id_item){
		//trace("closeEvent:"+id_item);
		var clone = this;
		
		
		// retourne la fleche
		var imgObj = $$("#"+id_item.id+" a .fleche")[0];
		imgObj.src = imgObj.src.replace(/-on/gi,"-off");
		var evenClassOn = $$("#"+id_item.id+" a. enventItemLink_on")[0];
		
		evenClassOn.toggleClassName('enventItemLink_off');
		evenClassOn.toggleClassName('enventItemLink_on');
		// ferme le contenu
		/**/
		var fx = new Effect.BlindUp("slidedown_"+id_item.id, { 
		  duration: 0.4,
		  transition: Effect.Transitions.sinoidal
		});
		//$("slidedown_"+id_item.id).style.display = "none";
	}
}; 

// Element de l'accordéon d'evenement
var EventItem = Class.create();
EventItem.prototype = {
	
	/* génère un élément de l'accordéon. le titre + texte + fleche */
	initialize: function(scope, friseItem_id, eventItem_index, lien, txt) {
		this.scope 	= scope;
		var str = "<div class='eventItem' id='eventItem_"+eventItem_index+"'>";
				//str += "<a href='javascript:sApp.eventManager.onEventItemClic(\""+friseItem_id+"\",\""+eventItem_index+"\");'></a>";
				str += "<a href='javascript:sApp.eventManager.onEventItemClic(\""+friseItem_id+"\",\""+eventItem_index+"\");' class='enventItemLink_off'><img src='/fr/fr/img/picto-fleche-lien-off.gif' alt='' border='0' class='fleche' />"+lien+"</a>";
				str += "<div class='enventItemText' id='slidedown_eventItem_"+eventItem_index+"' style='display:none'>";
					str += "<div>";
						str += ""+txt+"";
					str += "</div>";
				str += "</div>";
			str += "</div>";
		this.scope.innerHTML += str;

		return this;
	}
};













// Gestion des erreurs
var DebugManager = Class.create();
DebugManager.prototype = {
	
	/* crait un élément du slider */
	initialize: function(debugMode) {
	
		this.line = 0;
		this.debugMode = debugMode;
		this.dW = "";
		this.createWindow();
		if(this.debugMode){
			this.showConsole();
			this.dW.style.display = "block";
		}
		trace = function(txt){
			document.DBW._trace(txt);
		}
		
	},   
	
	createWindow:function(){
		//document.body.innerHTML += "<div id='_debugWindow_' style='width:500px;height:300px;position:absolute;z-index:2000;display:none'></div>";
		this.dW = $("_debugWindow_");
		this.dW.innerHTML += "<div id='debugWindowHeader' style='width:498px;height:15px;background:#c0c0c0;border:solid 1px #000000;text-align:center;position:relative'>.: DEBUG MODE :.";
		this.dW.innerHTML += "<a href='javascript:document.DBW.hideConsole();' style='position:absolute;right:5px;top:0px;text-decoration:none' id='debugWindowCloseBtn'>[-]</a>";
		this.dW.innerHTML += "<a href='javascript:document.DBW.showConsole();' style='position:absolute;right:5px;top:0px;display;none;text-decoration:none' id='debugWindowOpenBtn'>[+]</a>";
		this.dW.innerHTML += "  <a href='javascript:document.DBW.clearConsole();' style='position:absolute;top:0px;right:30px;display;block;text-decoration:none;' id='debugWindowClearBtn'>[clear]</a>";
		this.dW.innerHTML += "</div>";
		this.dW.innerHTML += "<div id='debugWindowBody' style='width:498px;height:280px;overflow:auto;border:solid 1px #000000;background:#FFFFFF;'>&nbsp;</div>";
		
		this.dH = $("debugWindowHeader");
		this.dB = $("debugWindowBody");
		this.dO = $("debugWindowOpenBtn");
		this.dC = $("debugWindowCloseBtn");
		
		//new Draggable('_debugWindow_');
		
	},
	
	showConsole:function(){
		/**/
		this.dB.style.display = "block";
		this.dC.style.display = "block";
		this.dO.style.display = "none";
		
	},
	
	hideConsole:function(){
	/**/
		this.dB.style.display = "none";
		this.dC.style.display = "none";
		this.dO.style.display = "block";
		
	},
	
	_trace:function(txt){
		//alert(txt)
		/**/
		if(txt==null || txt==undefined || txt=="")
			var _txt = "undefined || null || 0";
		else
			var _txt = (txt).toString().escapeHTML();
		
		this.dB.innerHTML += "<span style='color:#FF0000'><strong>"+(++this.line)+"):</strong></span>"+(_txt);
		this.dB.innerHTML += "<br>";
		
	},
	
	clearConsole:function(){
		this.dB.innerHTML = "";
	}
};


var cdc_sliderApp;
function renderSliderApp(){
	
	// masque le conteneur de données
	$("contentData").style.display = "none";
	// déploi l'application (@conteneur, @data, @directItemById, @debugMode)
	cdc_sliderApp = new SliderApp($("histoireInnerScroll"), $("contentData"), false);

	// lien direct
	cdc_sliderApp.directLinkByItemId("item_1995");
	//centerFrise();

}
document.observe("dom:loaded", renderSliderApp, false);
//Event.observe(window, 'resize', centerFrise, false);

/*
function centerFrise(){
	var hauteur = document.documentElement.clientHeight;
	var largeur = document.documentElement.clientWidth;
	var hauteurEcran = getViewPortDimensions().height;
	var largeurEcran = getViewPortDimensions().width;
	var hauteurMin=Math.round(Math.pow(100*1200*1200*2,0.33));
	var hauteurMax=Math.round(Math.pow(600*1200*1200*2,0.33));
	if(hauteurEcran>hauteurMin && hauteurEcran<hauteurMax){
		$('histoireInner').style.top=0.5*hauteurEcran*hauteurEcran*hauteurEcran/1200/1200+"px";
	}else if(hauteurEcran<=hauteurMin){
		$('histoireInner').style.top=100+"px";
	}else if(hauteurEcran>=hauteurMax){
		$('histoireInner').style.top=600+"px";
	}
	$('histoireInner').style.left="50px";
	var h=getViewPortDimensions().height;
	var w=getViewPortDimensions().width;
	if((h/w) > (850/1280)){
		$('backImage').style.height = h + 'px';
		$('backImage').style.width = Math.round(h*1280/850) + 'px';
		$('backImage').style.marginLeft = Math.round(w-Math.round(h*1280/850))/2+'px';
		$('backImage').style.marginTop = 0+'px'
	}else if((h/w) <= (850/1280)){
		$('backImage').style.height = Math.round(w*850/1280) + 'px';
		$('backImage').style.width = w + 'px';
		$('backImage').style.marginLeft = 0+'px';
		$('backImage').style.marginTop = 0+'px'
	}
}*/