/**
 * MediaBox for mootools 1.2.1
 * @license MIT-style license
 * @author Anquetil Manuel <manuel.anquetil [at] baphira.com>
 * @copyright Baphira - http://www.baphira.com
 */
var MediaBox = new Class({
	
	Implements: [Options, Events],
	
	options: {
		type: 'html',
		content: '',
		href: null,
		swfHref: null,
		video_x: 640,
		video_y: 380,
		resizeDuration: 400,
		top: 0,
		width: 650,
		height: 650,
		zIndex: 10
	},

	initialize: function(link, options){
		this.link = link;
		this.setOptions(options);
		this.eventKeyDown = this.keyboardListener.bind(this);
		this.addHtmlElements.bind(this);
		
		/*
		if(this.options.type == 'video') {
			this.options.content = '<object type="video/quicktime" style="width: '+this.options.video_x+'px; height: '+this.options.video_y+'px;" data="'+this.options.href+'">';
			this.options.content += '<param name="src" value="'+this.options.href+'"/>';
			this.options.content += '<param name="autoplay" value="true" />';
			this.options.content += '<param name="controller" value="true" />';
			this.options.content += '</object>';
		}*/
		
		this.addHtmlElements();
		
		this.link.addEvent('click', function(e) {
			new Event(e).stop();
			this.show();
		}.bind(this));
		
		document.body.addEvent('click', function(e) {
			var event = new Event(e);
			var area = this.center.getCoordinates();
			if(area != null && !(
				area.left < event.client.x && area.right > event.client.x
				&& area.top < event.client.y && area.bottom > event.client.y)  ) {
				this.close();
			}
		}.bind(this));
	},

	addHtmlElements: function(){
		this.overlay = new Element('div', {
			'class': 'lbOverlay',
			styles: {
				zIndex:this.options.zIndex
			}
		});
		this.overlay.inject(document.body).setStyles(this.options.overlayStyles);
		
		this.center = new Element('div', {
			styles: {	
				width: this.options.width, 
				height: this.options.height, 
				marginLeft: (-(this.options.width/2)),
				display: 'none',
				zIndex:this.options.zIndex+1
			}
		}).inject(document.body).addClass('lbCenter');
		
		this.media = new Element('div', {
			'class': 'lbMedia'
		}).inject(this.center);
		
		this.bottomContainer = new Element('div', {
			'class': 'lbBottomContainer', 
			styles: {
				display: 'none', 
				zIndex:this.options.zIndex+1
		}}).inject(document.body);
		
		this.bottom = new Element('div', {'class': 'lbBottom'}).inject(this.bottomContainer);
		new Element('a', {
			'class': 'lbCloseLink', 
			href: 'javascript:void(0);'
		}).inject(this.bottom).addEvent('click', this.close.bind(this));
		
		this.overlay.addEvent('click', this.close.bind(this));
		
		var nextEffect = this.nextEffect.bind(this);
		this.fx = {
			overlay: new Fx.Tween(this.overlay, {property: 'opacity', duration: 500}).set(0),
			resize: new Fx.Morph(this.center, $extend({
				duration: this.options.resizeDuration, 
				onComplete: nextEffect}, 
				this.options.resizeTransition ? {transition: this.options.resizeTransition} : {})),
			image: new Fx.Tween(this.media, {property: 'opacity', duration: 500, onComplete: nextEffect}),
			bottom: new Fx.Tween(this.bottom, {property: 'margin-top', duration: 400, onComplete: nextEffect})
		};
		
	},

	show: function(){
		this.fireEvent('onDisplay');
		this.setup(true);
		//
		this.center.setStyles({
			top: this.options.top,
			display: ''
		});
		this.fx.overlay.start(0.8);
		
		this.fireEvent('onMediaShow');
		
		this.step = 1;

		this.center.setStyle('backgroundColor', '');
		this.bottomContainer.setStyle('display', 'none');
		
		if (this.options.type == 'image') {
			this.fx.image.set(0);
			this.center.addClass('lbLoading');
			this.preload = new Element('img', {
				events: {
					load: function(){
						this.nextEffect.delay(100, this)
					}.bind(this)
				}
			});
			this.preload.set('src', this.options.href);
		} else if (this.options.type == 'html') {
			this.media.set('html', this.options.content);
			this.media.setStyle('float', 'left');
			this.resizeMedia(this.media.getSize().x, this.media.getSize().y);
			this.showCloseBtn();
		} else if (this.options.type == 'video') {
			
			var so = new SWFObject(this.options.swfHref,'player',this.options.video_x,this.options.video_y,'7');
			so.addParam("allowScriptAccess","always");
			so.addParam("allowfullscreen","true");
			so.addParam("quality","best");
			so.addParam("transparent","wmode");
			so.addParam("bgcolor","#000000");
			so.addVariable("CustomerId",'70000304');
			so.addVariable("CustomerVideo",'All');
			so.addVariable("PlayerSkin",'Black');
			so.addVariable("PlayerPlays",'yes');
			so.addVariable("PlayerTitles",'yes');
			so.addVariable("PlayerWidth",this.options.video_x);
			so.addVariable("PlayerHeight",this.options.video_y);
			so.addVariable("CurrentVideo",'');
			so.addVariable("PlayerBack",'');
			so.addVariable("LogoBezoom",'');
			so.addVariable("Get3gp",'');
			so.addVariable("varresult",'');
			so.addVariable("PlayerLoop",'');
		
			this.media.set('html', so.getSWFHTML());
			this.resizeMedia(this.options.video_x, this.options.video_y);
			this.showCloseBtn();
		}
	},
	
	setup: function(open){
		var elements = $$('object, iframe');
		elements.extend($$(Browser.Engine.trident ? 'select' : 'embed'));
		elements.each(function(el){
			if (open) el.store('lbBackupStyle', el.getStyle('visibility'));
			var vis = (open ? 'hidden' : el.retrieve('lbBackupStyle'));
			el.setStyle('visibility', vis);
		});
		var fn = open ? 'addEvent' : 'removeEvent';
		window[fn]('scroll', this.eventPosition)[fn]('resize', this.eventPosition);
		document[fn]('keydown', this.eventKeyDown);
		this.step = 0;
	},

	keyboardListener: function(event){
		switch (event.code){
			case 27: case 88: case 67: this.close(); break;
		}
	},

	nextEffect: function() {
		if (this.options.type != 'image') {
			return;
		}
		switch (this.step++){
		case 1:
			this.media.setStyle('backgroundImage', 'url('+this.options.href+')');
			this.media.setStyle('width', this.preload.width);
			this.media.setStyle('height', this.preload.height);

			this.bottom.setStyle('width',this.preload.width);
			this.bottom.setStyle('width',70);

			this.resizeMedia(this.preload.width, this.preload.height);
			//
			
			if (this.center.clientHeight != this.media.offsetHeight){
				this.fx.resize.start({height: this.options.height});
				break;
			}
			this.step++;
		case 2:
			if (this.center.clientWidth != this.media.offsetWidth){
				this.fx.resize.start({width: this.options.width, marginLeft: -this.options.width/2});
				break;
			}
			this.step++;
		case 3:
			this.showCloseBtn();
			this.fx.image.start(1);
			break;
		case 4:
			this.center.removeClass('lbLoading');
			this.step = 0;
		}
	},
	
	showCloseBtn: function() {
		this.bottomContainer.setStyles({
			top: this.options.top,
			marginLeft: 385, 
			display: ''
		});
	},
	
	resizeMedia: function(width, height) {
		this.media.setStyle('position', 'relative');
		this.media.setStyle('left', (this.options.width / 2) - (width / 2));
		this.media.setStyle('top', (this.options.height / 2) - (height / 2));
	},

	close: function(){
		this.fireEvent('onHide');
		
		if (this.step < 0) return;
		this.step = -1;
		if (this.preload) this.preload.destroy();
		for (var f in this.fx) this.fx[f].cancel();
		this.center.setStyle('display', 'none');
		this.bottomContainer.setStyle('display', 'none');
		this.fx.overlay.chain(this.setup.pass(false, this)).start(0);
		return;
	}
});