var focusBlock = new Class({
	Implements: [Options, Events],
	options: {
		fxStyle : {
			duration: 300,
			fps:20,
			wait:true,
			transition: Fx.Transitions.Circ.easeInOut
			},
		imgsTarget: 'mainImg',
		blocsTextesTarget: 'div.blockFocus .focusText',
		unitsTarget: 'div.blockFocus .togglingFocus .vignetteFocus',
		vignettes:{},
		blocsTextes:{},
		imgs:{}
	},
	maxHeight: 0,
	initialize: function(options){		
		
		this.options.vignettes = document.getElements(this.options.unitsTarget);
	//	this.options.vignettes = this.sortSpec(this.options.vignettes);
		
		this.options.blocsTextes = document.getElement(this.options.blocsTextesTarget).getChildren();
		
		this.options.imgs = $(this.options.imgsTarget).getElements('img');
	//	console.log(this.options.imgs)
	//	this.options.imgs = this.sortSpec(this.options.imgs);
		
		this.options.imgsdefault = $(this.options.imgsTarget).getElements('.defaultelementImg img');
		
		// Mise en place du background pardéfaut.
		var defaultBackground = this.options.imgsdefault[0].getAttribute('src');
		this.options.imgs.getParent(".elementImg").getParent(".mainImg").setStyle('background','url('+defaultBackground+') no-repeat left top');
		
		this.options.vignettes.each(function(unit,i){
			this.imageActions(unit, i);
		}.bind(this));
		
		// Si on veut uniformiser les tailles des vignettes décommenter la ligne suivante
		// this.options.vignettes.setStyle('height', this.maxHeight);
	},
	sortSpec : function(arr){
		arr.sort(function(a,b){
		    if (arr[1]==b){
		        return 1;
		    }else{
		        return 0;
		    }
		});
		return arr;
	},
	imageActions: function(unit, index){
		var hauteurVignette = unit.offsetHeight;
		this.options.vignettes[index].setStyle("cursor","pointer");
		unit.addEvent("mouseover",function(e){
			this.options.vignettes.removeClass("hover");
			this.options.vignettes[index].addClass("hover");
		}.bind(this));
		unit.addEvent("mouseout",function(e){
			this.options.vignettes.removeClass("hover");
		}.bind(this));
		unit.addEvent("click", function(e){
			e = new Event(e).stop();
			this.changeTexts(index);
			this.changeImage(index);
		}.bind(this));
	},
	changeTexts:function(cible){
		//console.log("changeTexte ",cible);
		this.options.blocsTextes.addClass("hidden");
		this.options.blocsTextes[cible].removeClass("hidden");
	},
	changeImage: function(cible){
		//console.log("changeImage ",cible);
		this.options.imgs.getParent(".elementImg").addClass('hidden');
		//console.log(this.options.imgs.getParent(".elementImg"));
		// lancer opacity si fxStyle ^^
		var actualImageTOFade = $(this.options.imgs[cible]);
		var parentImageToFade = actualImageTOFade.getParent(".elementImg");
		parentImageToFade.setStyle('opacity',0);
		actualImageTOFade.removeClass('hidden');
		parentImageToFade.removeClass('hidden');
		parentImageToFade.effect('opacity', this.options.fxStyle).start(1).chain(function(){
			
			var newBackground = actualImageTOFade.getAttribute('src');
			parentImageToFade.getParent(".mainImg").setStyle('background','url('+newBackground+') no-repeat left top');
			
		});
	}
});

var focusHotspotBlock = new Class({
	Implements: [Options, Events],
	options: {
		fxStyle : {
			duration: 300,
			fps:20,
			wait:true,
			transition: Fx.Transitions.Circ.easeInOut
			},
		imgsTarget: 'mainImg',
		blocsTextesTarget: 'div.blockFocusHotspot .focusText',
		unitsTarget: 'div.blockFocusHotspot .togglingFocus .vignetteFocus',
		vignettes:{},
		blocsTextes:{},
		imgs:{}
	},
	maxHeight: 0,
	initialize: function(options){		
		
		this.playerActive = "null";
		this.tickerActive = "null";
		
		this.options.vignettes = document.getElements(this.options.unitsTarget);
	//	this.options.vignettes = this.sortSpec(this.options.vignettes);
		
		this.options.blocsTextes = document.getElement(this.options.blocsTextesTarget).getChildren();
		
		this.options.imgs = $(this.options.imgsTarget).getElements('img.visual');
		//console.log(this.options.imgs)
	//	this.options.imgs = this.sortSpec(this.options.imgs);
		
		this.options.imgsdefault = $(this.options.imgsTarget).getElements('.defaultelementImg img');
		
		// Mise en place du background pardéfaut.
		var defaultBackground = this.options.imgsdefault[0].getAttribute('src');
		this.options.imgs.getParent(".elementImg").getParent(".mainImg").setStyle('background','url('+defaultBackground+') no-repeat left top');
		
		this.options.vignettes.each(function(unit,i){
			this.imageActions(unit, i);
		}.bind(this));
		
		// Si on veut uniformiser les tailles des vignettes décommenter la ligne suivante
		// this.options.vignettes.setStyle('height', this.maxHeight);
		
		/* part Hotspot */
		this.view = $(this.options.imgsTarget);
		
		this.hotSpotFocus();
		
	},
	sortSpec : function(arr){
		arr.sort(function(a,b){
		    if (arr[1]==b){
		        return 1;
		    }else{
		        return 0;
		    }
		});
		return arr;
	},
	imageActions: function(unit, index){
		var hauteurVignette = unit.offsetHeight;
		this.options.vignettes[index].setStyle("cursor","pointer");
		unit.addEvent("mouseover",function(e){
			this.options.vignettes.removeClass("hover");
			this.options.vignettes[index].addClass("hover");
		}.bind(this));
		unit.addEvent("mouseout",function(e){
			this.options.vignettes.removeClass("hover");
		}.bind(this));
		unit.addEvent("click", function(e){
			e = new Event(e).stop();
			this.changeTexts(index);
			this.changeImage(index);
		}.bind(this));
	},
	changeTexts:function(cible){
		//console.log("changeTexte ",cible);
		this.options.blocsTextes.addClass("hidden");
		this.options.blocsTextes[cible].removeClass("hidden");
	},
	changeImage: function(cible){
		//console.log("changeImage ",cible);
		var _this = this;
		if(_this.playerActive != "null"){
      if(/MSIE/.test(navigator.userAgent)){
        try{
        _this.playerActive.sendEvent('STOP');
        }catch(err){
          //not possible to reach the flash object
        }
      }else{
        var playerSizes = $(_this.playerActive).getSize();
        if(playerSizes.size.x != 0 && playerSizes.size.y != 0 ){
          _this.playerActive.sendEvent('STOP');
        }
      }
      _this.playerActive = "null";
    }
		if(this.tickerActive != "null"){
			this.hideHostpot(this.tickerActive);
			this.tickerActive = "null";
		}
		
		this.options.imgs.getParent(".elementImg").addClass('hidden');
		
		// lancer opacity si fxStyle ^^
		var actualImageTOFade = $(this.options.imgs[cible]);
		var parentImageToFade = actualImageTOFade.getParent(".elementImg");
		parentImageToFade.setStyle('opacity',0);
		actualImageTOFade.removeClass('hidden');
		parentImageToFade.removeClass('hidden');
		parentImageToFade.effect('opacity', this.options.fxStyle).start(1).chain(function(){
		
			var newBackground = actualImageTOFade.getAttribute('src');
			parentImageToFade.getParent(".mainImg").setStyle('background','url('+newBackground+') no-repeat left top');
			
			if(parentImageToFade.getElements('a.ticker')) {
				parentImageToFade.getElements('a.ticker').each(function(item) {
				
					item.addClass("tickerCurrent");
					
					/* Set de la position du ticker */
					var maxTickerRight = parseInt((_this.view.offsetWidth) - 30) ;
					if(item.getElement('span') != null) {
						var itemActive = item.getElement('span.activeSpan');
						maxTickerRight = parseInt(maxTickerRight - itemActive.offsetWidth);
					}
					var posTicker = parseInt(item.style.left) < maxTickerRight ? 'leftTicker' : 'rightTicker';
					item.removeClass("leftTicker");
					item.removeClass("rightTicker");
					item.addClass(posTicker)
					
					if(item.getElement('span') != null) {
						setTimeout(function(){
							var itemActive = item.getElement('span.activeSpan');
							itemActive.setStyle("opacity",1)
							itemActive.effect('opacity', _this.options.fxStyle).start(0).chain(function(){
								itemActive.removeAttribute("style")
								itemActive.removeProperty("style")
								item.removeClass("tickerCurrent")
							});
						},2000);
					}
				});
			}
		});
		
		// on recupere la video en cours si elle existe
		setTimeout(function(){
			if($(parentImageToFade).getElement(".videoFocusBig object")){
				var id = $(parentImageToFade).getElement(".videoFocusBig object").id;
				var player = document.getElementById(id);
				_this.playerActive = player;
			}else{
        _this.playerActive = 'null';
      }
		},700);
	},
	hotSpotFocus: function(){
		var _this = this;
		var view = this.view;
		var listickers = view.getElements("a.ticker");
		
		listickers.each(function(item, index) {
			
			item.addClass('tickerCurrent');
			var itemVisible = true;
			
			var midSize = parseInt((_this.view.offsetWidth) / 2) ;
			var maxTickerRight = parseInt((_this.view.offsetWidth) - 30) ;
			
			if(item.getElement('span') != null) {
				var itemActive = item.getElement('span.activeSpan');
				if(itemActive.offsetWidth != 0){
					maxTickerRight = parseInt(maxTickerRight - itemActive.offsetWidth);
				}else{
					itemVisible = false;
				}
			}
			
			var posClass = parseInt(item.style.left) < midSize ? 'rightPosition' : 'leftPosition';
			var posTicker = parseInt(item.style.left) < maxTickerRight ? 'leftTicker' : 'rightTicker';
			
			$(item.rel).addClass(posClass);
			if(itemVisible){
				$(item).addClass(posTicker);
			}
			item.addEvent('click', function(e){
				new Event(e).stop();
				_this.clickHandlerHotspot(this.parentNode, index, this.rel);
				
			});
			item.addEvent('mouseenter', function(e){
				new Event(e).stop();
				this.addClass("tickerCurrent")
				
				
			});
			item.addEvent('mouseleave', function(e){
				new Event(e).stop();
				this.removeClass("tickerCurrent")
				
				
			});
			if(item.getElement('span') != null) {
				setTimeout(function(){
					var itemActive = item.getElement('span.activeSpan');
					itemActive.setStyle("opacity",1)
					itemActive.effect('opacity').start(0).chain(function(){
						itemActive.removeAttribute("style")
						itemActive.removeProperty("style")
						item.removeClass("tickerCurrent")
					});
				},2000);
			}
		});
		
	},
	clickHandlerHotspot: function(parent, index, target){
		var _this = this;
		
		$(target).removeClass("hidden");
		$(target).setStyles({
			"display": "block"
		});
		$(target).setOpacity(0);
		$(target).effect('opacity').start(1);
		$(target).getElements('a.close').addEvent("click", function(e){
			new Event(e).stop();
			_this.hideHostpot(this);
		}.bind($(target)));
		setTimeout(function(){
			_this.tickerActive = target;
			
			if(_this.playerActive != "null"){
				var playerSizes = $(_this.playerActive).getSize();
				if(playerSizes.size.x != 0 && playerSizes.size.y != 0 ){
					_this.playerActive.sendEvent('STOP');
				}
				_this.playerActive = "null";
			}
			
			if($(target).getElement(".videoFocus object")){
				var id = $(target).getElement(".videoFocus object").id;
				var player = document.getElementById(id);
				_this.playerActive = player;
				if(player.getConfig().state != "PLAYING")
					player.sendEvent('PLAY');
			}
			
			
		},500);
		
	},
	hideHostpot: function(target){
		var _this = this ;
		$(target).effect('opacity').start(0);
		setTimeout(function(){
			$(target).addClass("hidden");
			_this.stopVideo(target);
		},500)
	},
	stopVideo : function(target){
		var _this = this;
		if(this.playerActive != "null"){
			if($(target).getElement(".videoFocus object")){
				var id = $(target).getElement(".videoFocus object").id;
				var player = document.getElementById(id);
				player.sendEvent('STOP');
				_this.playerActive = "null";
			}
		}
	}
});

window.addEvent('domready',function(){
	
	if($$('div.blockFocus').length != 0 )
	new focusBlock();
});

window.addEvent('domready',function(){
	
	if($$('div.blockFocusHotspot').length != 0 )
	new focusHotspotBlock();
});