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

	Script		: MultiBox
	Version		: 1.1
	Authors		: Samuel Birch
	Desc		: Supports jpg, gif, png, html, iframe (ajax)
	Licence		: Open Source MIT Licence

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

var MultiBox = new Class({
	
	getOptions: function(){
		return {
			initialWidth: 300,
			initialHeight: 300,
			container: document.body,
			useOverlay: false,
			movieWidth: 600,
			movieHeight: 300,
			onOpen: Class.empty,
			onClose: Class.empty,
			enable: true,
			style: 'msg', //style: 'tip'
			mode: 'modal'
		};
	},

	initialize: function(className, options){
		this.setOptions(this.getOptions(), options);
		
		this.openClosePos = {};
		this.timer = 0;
		this.opened = false;
		this.contentObj = {};
		this.containerDefaults = {};
		
		(window.ie6)?this.ext='.gif':this.ext='.png';
		
		if(this.options.style == 'msg') { this.options.useOverlay = true; }
				
		if(this.options.useOverlay){
			this.overlay = new Overlay({container: this.options.container/*, onClick:this.close.bind(this)*/});
		}

		this.container = new Element('table').addClass('BoxContainer').injectBefore(this.options.container.getFirst());
		var containerBody = new Element('tbody').injectInside(this.container);

		var description = new Element('tr').addClass('BoxDescription').injectInside(containerBody);
		new Element('td').addClass('BoxDescriptionLeft').setStyle('background','url(/img/box/'+ this.options.style+this.ext+') top left').injectInside(description);
		var descTitle = new Element('td').addClass('BoxDescriptionCenter').setStyle('background','url(/img/box/'+ this.options.style+this.ext+') center top').injectInside(description);
		this.title = new Element('div').addClass('txt').setStyle('background','url(/img/box/desc_'+ this.options.style+'.gif) no-repeat').injectInside(descTitle);
		var topRight = new Element('td').addClass('BoxDescriptionRight').setStyle('background','url(/img/box/'+ this.options.style+this.ext+') top right').injectInside(description);
		new Element('div').addClass('BoxClose').injectInside(topRight).addEvent('click',this.close.bind(this));

		var mid = new Element('tr').addClass('BoxContent').injectInside(containerBody);
		new Element('td').addClass('BoxContentLeft').setStyle('background','url(/img/box/'+ this.options.style+this.ext+') center left').injectInside(mid);
		this.box = new Element('td').addClass('BoxContentCenter').setStyle('background','url(/img/box/'+ this.options.style+this.ext+') center').injectInside(mid);
		new Element('td').addClass('BoxContentRight').setStyle('background','url(/img/box/'+ this.options.style+this.ext+') center right').injectInside(mid);

		var bottom = new Element('tr').addClass('BoxBottom').injectInside(containerBody);
		new Element('td').addClass('BoxBottomLeft').setStyle('background','url(/img/box/'+ this.options.style+this.ext+') bottom left').injectInside(bottom);
		new Element('td').addClass('BoxBottomCenter').setStyle('background','url(/img/box/'+ this.options.style+this.ext+') center bottom').injectInside(bottom);
		new Element('td').addClass('BoxBottomRight').setStyle('background','url(/img/box/'+ this.options.style+this.ext+') bottom right').injectInside(bottom);

		if(this.options.mode=='tip'){//close box on document click, excepted on fields and box.container 
			$$('.'+className).each(function(el,i){
				el.addEvent('click', function(e){this.open(el,'htmlelement',el.getPrevious().getProperty('class'));new Event(e).stopPropagation();}.bind(this));
			}, this);
			this.container.addEvent('click', function(e){new Event(e).stopPropagation();}.bind(this));
			document.addEvent('click', this.close.bind(this));
		}
		else if(this.options.mode=='modal'){
			$$('a.'+className).each(function(el,i){
				el.addEvent('click', function(e){new Event(e).stop()});
			});
		}

		
		this.containerEffects = new Fx.Styles(this.container, {duration: 0, transition: Fx.Transitions.sineInOut});

		this.reset();
	},
	
	setContentType: function(){
		var contentOptions = {};
		if($chk(this.content.rel)){
			var optArr = this.content.rel.split(',');
			optArr.each(function(el){
				var ta = el.split(':');
				contentOptions[ta[0]] = ta[1];
			});
		}
		
		this.contentObj = {};
		this.contentObj.url = this.content.href;
		this.contentObj.xH = 0;

		if(contentOptions.width){
			this.contentObj.width = contentOptions.width;
		}else{
			this.contentObj.width = this.options.movieWidth;
		}
		if(contentOptions.height){
			this.contentObj.height = contentOptions.height;	
		}else{
			this.contentObj.height = this.options.movieHeight;
		}
		if(contentOptions.panel){
			this.panelPosition = contentOptions.panel;
		}else{
			this.panelPosition = this.options.panel;
		}
		
		switch(this.type){

			case 'htmlelement':
			    if (this.content.getTag == 'a'){
					this.elementContent = $(this.content.href.substr(this.content.href.lastIndexOf('/')+1));
				}else{this.elementContent = $(this.content.ref);}
				
				this.elementContent.setStyles({
					display: 'block',
					opacity: 0
				})
				if(this.elementContent.getStyle('width') != 'auto'){
					this.contentObj.width = this.elementContent.getStyle('width').toInt();
				}

				this.contentObj.height = this.elementContent.getSize().size.y;
				//this.contentObj.height = 'auto';
				
				this.elementContent.setStyles({
					display: 'none',
					opacity: 1
				})
				break;
				
			case 'image':
			case 'ajax':
			case 'iframe':
				break;
				
			default:
				this.type = 'iframe';
				break;
		}
	},
	
	reset: function(){
		/*if(this.opened){
			var myFx = new Fx.Style(this.container, 'opacity').start(1,0);
		}
		else {*/
			this.container.setStyles({
				'opacity': 0,
				'display': 'none'
			});
		//}
		this.removeContent();
		this.opened = false;
	},
	
	getOpenClosePos: function(el){
		if(el.getFirst()){
			var w = el.getFirst().getCoordinates().width-(this.container.getStyle('border').toInt()*2);
			if(w < 0){w = 0}
			var h = el.getFirst().getCoordinates().height-(this.container.getStyle('border').toInt()*2);
			if(h < 0){h = 0}
			this.openClosePos = {
				width: w,
				height: h,
				top: el.getFirst().getCoordinates().top,
				left: el.getFirst().getCoordinates().left
			};
		}else{
			var w = el.getCoordinates().width-(this.container.getStyle('border').toInt()*2);
			if(w < 0){w = 0}
			var h = el.getCoordinates().height-(this.container.getStyle('border').toInt()*2);
			if(h < 0){h = 0}
			this.openClosePos = {
				width: w,
				height: h,
				top: el.getCoordinates().top,
				left: el.getCoordinates().left
			};
		}
		return this.openClosePos;
	},
	
	open: function(el, type, ref){
		if (this.content === $(el) || !this.options.enable)return;
		this.content = $(el);
		this.type = type;
		this.content.ref = ref;
		if (this.fix) this.fix.hide();
		this.fix = new OverlayFix(this.content);
		
		if(!this.opened){
			this.opened = true;
			
			if(this.options.useOverlay){
				this.overlay.show();
			}
			
			this.container.setStyles(this.getOpenClosePos(el));
			this.container.setStyles({
				opacity: 0,
				display: 'block'
			});

			this.load();
		
		}else{
			this.getOpenClosePos(this.content);
			this.timer = this.hideContent.bind(this).delay(500);
			this.timer = this.load.bind(this).delay(500);
		}
		this.options.onOpen();
	},
	
	
	close: function(){
		if(this.options.useOverlay){
			this.overlay.hide();
		}
		if ($chk(this.fix)) this.fix.hide();
		this.options.onClose();
		this.hideContent();
		this.containerEffects.stop();
		this.reset.bind(this).delay(0);
		this.content=null;
	},

	load: function(){
		this.box.addClass('MultiBoxLoading');
		this.setContentType();
		if(this.type == 'image'){
			var xH = this.contentObj.xH;
			this.contentObj = new Asset.image(this.content.href, {onload: this.resize.bind(this)});
			this.contentObj.xH = xH;
		}else{
			this.resize();
		}
	},
	
	resize: function(){
		
		if(this.options.mode == "modal"){
			var top = (window.getHeight()/2)-((Number(this.contentObj.height)+this.contentObj.xH)/2)-this.container.getStyle('border').toInt()+window.getScrollTop();
			//var left = (window.getWidth()/2)-(this.contentObj.width/2)-this.container.getStyle('border').toInt();
		}
		else {
			var top = (this.content.getCoordinates().top-this.contentObj.height)-62; // ombre + pied + head
			//var left = this.parentElemCoord.left-10; /*ombre*/
		}
		var left = (window.getWidth()/2)-(this.contentObj.width/2)-this.container.getStyle('border').toInt();


		if(top < 0){top = 0}
		if(left < 0){left = 0}
		this.containerEffects.stop();
		this.containerEffects.start({
				width: this.contentObj.width+70, // 70px en plus des 600 indiqués dans le html pour la largeur totale.
				height: Number(this.contentObj.height)+this.contentObj.xH,
				top: top,
				left: left,
				opacity: 1
		});
		this.fix.show();
		if (this.fix.fix){
			this.fix.fix.setStyle('left', 215);
			this.fix.fix.setStyle('top', top);
			this.fix.fix.setStyle('width', this.contentObj.width+50);
			this.fix.fix.setStyle('height', Number(this.contentObj.height)+this.contentObj.xH+60);
		}
		this.timer = this.showContent.bind(this).delay(0);
	},
	
	showContent: function(){
		this.box.removeClass('MultiBoxLoading');
		this.removeContent();

		this.contentContainer = new Element('div').setProperties({id: 'BoxContentContainer'+this.options.mode}).setStyles({opacity: 0, width: this.contentObj.width+'px', height: (Number(this.contentObj.height)+this.contentObj.xH)+'px'}).injectInside(this.box);
		this.title.setHTML(this.content.getPrevious().getProperty('title'));
		
		if(this.type == 'image'){
			this.contentObj.injectInside(this.contentContainer);
			
		}else if(this.type == 'htmlelement'){
			if(window.ie7 && this.options.style == 'msg'){
				var br = new Element('br').injectInside(this.box);
			}
			var clone = this.elementContent.clone().setStyle('display','block').injectInside(this.contentContainer);
		}else if(this.type == 'ajax'){
			new Ajax(this.contentObj.url, {
				method: 'get',
				update: 'BoxContentContainer',
				evalScripts: true,
				autoCancel: true
			}).request();
			
		}else {//if(this.type == 'iframe'){
			new Element('iframe').setProperties({
				id: 'iFrame', 
				width: this.contentObj.width,
				height: this.contentObj.height,
				src: this.contentObj.url,
				frameborder: 0,
				scrolling: 'auto'
			}).injectInside(this.contentContainer);
		}
		
		this.contentEffects = new Fx.Styles(this.contentContainer, {duration: 500, transition: Fx.Transitions.linear});
		this.contentEffects.start({
			opacity: 1
		});

	},
	
	hideContent: function(){
		this.box.addClass('MultiBoxLoading');
		this.removeContent.bind(this).delay(0);
	},
	
	removeContent: function(){
		if($('BoxContentContainer'+this.options.mode)){
			$('BoxContentContainer'+this.options.mode).remove();	
		}
	},
	toogleEnable: function(){
		var isEnable = !this.options.enable;
		if($('tipsToggleEnable')){
			$('tipsToggleEnable').getFirst().setStyle('display',isEnable?'':'none');
			$('tipsToggleEnable').getLast().setStyle('display',isEnable?'none':'');	
		}
		this.options.enable = isEnable;
		return !isEnable;
	}	
});
MultiBox.implement(new Options);
MultiBox.implement(new Events);


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