/*
Original

	Script	: MultiBox
	Version	: 1.3.1
	Authors	: Samuel Birch
	Desc	: Supports jpg, gif, png, flash, flv, mov, wmv, mp3, html, iframe
	Licence	: Open Source MIT Licence

Modified
   Author   : Konstantin Konovalov
   Mail     : konovalovk@gmail.com

Needs Mootoools 1.2 and Assets plug
*/

var MultiBox = new Class({

	getOptions: function() {
		return {
			container: document.body,
			useOverlay: false,
			overlayOpacity: 0.70,
			initialWidth: 250,
			initialHeight: 250,
			border: 20,
//			contentColor: '#000',
			showNumbers: true,
			showControls: true,
			//showThumbnails: false,
			//autoPlay: false,
			baseDuration: 125,
			descMinWidth: 400,
			descMaxWidth: 600,
			movieWidth: 800,
			movieHeight: 600,
			offset: {x:0, y:0},
			fixedTop: false,
			path: 'players/',
			of: 'of',
			openFromLink: true,
			relativeToWindow: true
		};
	},

	initialize: function(selector, options) {
		this.setOptions(this.getOptions(), options);

		this.openClosePos = {};
		this.timer = 0;
		this.contentToLoad = {};
		this.index = 0;
		this.opened = false;
		this.contentObj = {};
		this.containerDefaults = {};

		if(this.options.useOverlay) {
			this.overlay = new Element('div', {events: {click: this.close.bind(this)}}).addClass('MultiBoxOverlay').injectInside(this.options.container);
			this.overlay.setStyle('display', 'none');
			this.overlay = new Fx.Morph(this.overlay, {duration: 1*this.options.baseDuration});
		}

		this.content = $$(selector);

		this.container = new Element('div').addClass('MultiBoxContainer').injectInside(this.options.container);
		this.iframe = new Element('iframe').setProperties({
			'id': 'multiBoxIframe',
			'name': 'mulitBoxIframe',
			'src': 'javascript:void(0);',
			'frameborder': 1,
			'scrolling': 'no'
		}).setStyles({
			'position': 'absolute',
			'top': -this.options.border,
			'left': -this.options.border,
			'width': '115%',
			'height': '115%',
			'filter': 'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)',
			'opacity': 0
		}).injectInside(this.container);
		this.box = new Element('div').addClass('MultiBoxContent').injectInside(this.container);

		this.closeButton = new Element('div').addClass('MultiBoxClose').injectInside(this.container).addEvent('click', this.close.bind(this));

		this.controlsContainer = new Element('div').addClass('MultiBoxControlsContainer').injectInside(this.container);
		this.controls = new Element('div').addClass('MultiBoxControls').injectInside(this.controlsContainer);

		this.previousButton = new Element('div').addClass('MultiBoxPrevious').injectInside(this.controls).addEvent('click', this.previous.bind(this));
		this.nextButton = new Element('div').addClass('MultiBoxNext').injectInside(this.controls).addEvent('click', this.next.bind(this));

		this.title = new Element('div').addClass('MultiBoxTitle').injectInside(this.controls);
		this.number = new Element('div').addClass('MultiBoxNumber').injectInside(this.controls);
		this.description = new Element('div').addClass('MultiBoxDescription').injectInside(this.controls);


		if(this.content.length == 1) {
			this.title.setStyles({
				'margin-left': 0
			});
			this.description.setStyles({
				'margin-left': 0
			});
			this.previousButton.setStyle('display', 'none');
			this.nextButton.setStyle('display', 'none');
			this.number.setStyle('display', 'none');
		}

		new Element('div').setStyle('clear', 'both').injectInside(this.controls);
		this.content.each(function(el, i) {
			el.index = i;
			el.addEvent('click', function(e) {
				new Event(e).stop();
				this.open(el);
			}.bind(this));
			if(el.href.indexOf('#') > -1) {
				el.content = $(el.href.substr(el.href.indexOf('#')+1));
				if(el.content) {
				   el.content.setStyle('display','none');
				}
			}
		}, this);

		this.containerEffects = new Fx.Morph(this.container, {duration: 4*this.options.baseDuration});
		this.controlEffects = new Fx.Morph(this.controlsContainer, {duration: 3*this.options.baseDuration});

		this.reset();

		this.keyboard = this.keyboardListener.bind(this);
	},

	setContentType: function(link) {
		var str = link.href.substr(link.href.lastIndexOf('.')+1).toLowerCase();
		var contentOptions = {};
		if($chk(link.rel)){
			var optArr = link.rel.split(',');
			optArr.each(function(el){
				var ta = el.split(':');
				contentOptions[ta[0]] = ta[1];
			});
		}

		if(contentOptions.type != undefined){
			str = contentOptions.type;
		}

		this.contentObj = {};
		this.contentObj.url = link.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(str) {
			case 'jpg': case 'gif': case 'png':
				this.type = 'image';
				break;
			case 'swf':
				this.type = 'flash';
				break;
			case 'flv':
				this.type = 'flashVideo';
				this.contentObj.xH = 70;
				break;
			case 'mov':
				this.type = 'quicktime';
				break;
			case 'wmv':
				this.type = 'windowsMedia';
				break;
			case 'rv': case 'rm': case 'rmvb':
				this.type = 'real';
				break;
			case 'mp3':
				this.type = 'flashMp3';
				this.contentObj.width = 320;
				this.contentObj.height = 70;
				break;
			case 'element':
				this.type = 'htmlelement';
				this.elementContent = link.content;
				this.elementContent.setStyles({
					display: 'block',
					opacity: 0
				})

				if(this.elementContent.getStyle('width') != 'auto') {
					this.contentObj.width = this.elementContent.getStyle('width');
				}

				this.contentObj.height = this.elementContent.getSize().size.y;
				this.elementContent.setStyles({
					display: 'none',
					opacity: 1
				})
				break;

			default:

				this.type = 'iframe';
				if(contentOptions.ajax){
					this.type = 'ajax';
				}
				break;
		}
	},

	reset: function() {
		this.container.setStyles({
			opacity: 0,
			display: 'none'
		});
		this.controlsContainer.setStyles({
			height: 0
		});
		this.removeContent();
		if (this.previousButton)
		{
			this.previousButton.removeClass('MultiBoxButtonDisabled');
		}
		if (this.nextButton)
		{
			this.nextButton.removeClass('MultiBoxButtonDisabled');
		}
		this.opened = false;
	},

	getOpenClosePos: function(el) {
		if (this.options.openFromLink) {
			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
				};
			}
		} else {
			if(this.options.fixedTop) {
				var top = this.options.fixedTop;
			} else {
				var top = ((window.getHeight()/2)-(this.options.initialHeight/2)-this.options.border)+this.options.offset.y;
			}
			this.openClosePos = {
				width: this.options.initialWidth,
				height: this.options.initialHeight,
				top: top,
				left: ((window.getWidth()/2)-(this.options.initialWidth/2)-this.options.border)+this.options.offset.x
			};
		}
		return this.openClosePos;
	},

	open: function(el) {

		this.index = this.content.indexOf(el);

		if(!this.opened) {
			this.opened = true;

			if(this.options.useOverlay) {
				var layer = $('bg');
				this.overlay.start({
//					height: layer.getSize().y + layer.offsetTop,
					height: window.getScrollHeight() + 'px',
//					width: window.getScrollWidth() + 'px',
					display: 'block',
					opacity: [0, this.options.overlayOpacity]
				});
//				alert(window.getScrollWidth());
			}

			this.container.setStyles(this.getOpenClosePos(el));
			this.container.setStyles({
				opacity: 0,
				display: 'block'
			});

			if(this.options.fixedTop){
				var top = this.options.fixedTop;
			} else {
				var top = ((window.getHeight()/2)-(this.options.initialHeight/2)-this.options.border)+this.options.offset.y;
			}

			this.containerEffects.start({
				width: this.options.initialWidth,
				height: this.options.initialHeight,
				top: top,
				left: ((window.getWidth()/2)-(this.options.initialWidth/2)-this.options.border)+this.options.offset.x,
				opacity: [0, 1]
			});

			this.load(this.index);

			document.addEvent('keydown', this.keyboard);
		} else {
			if(this.options.showControls) {
				this.hideControls();
			}
			this.getOpenClosePos(this.content[this.index]);
			this.timer = this.hideContent.bind(this).delay(5*this.options.baseDuration);
			this.timer = this.load.pass(this.index, this).delay(11*this.options.baseDuration);
		}
	},

	getContent: function(index) {
		this.setContentType(this.content[index]);
		var desc = {};
		//var title = this.content[index].title;
		this.contentToLoad = {
			title: this.content[index].title || '&nbsp;',
			//desc: $(this.options.descClassName+this.content[index].id).clone(),
			desc: desc,
			number: index+1
		};
	},

	close: function() {
		if(this.options.useOverlay) {
         this.overlay.start({
            opacity: 0
         });
		}
		if(this.options.showControls) {
			this.hideControls();
		}
		this.hideContent();
		this.containerEffects.cancel();
		this.zoomOut.bind(this).delay(5*this.options.baseDuration);

		document.removeEvent('keydown', this.keyboard);
	},

	zoomOut: function() {
		this.containerEffects.start({
			width: this.openClosePos.width,
			height: this.openClosePos.height,
			top: this.openClosePos.top,
			left: this.openClosePos.left,
			opacity: 0
		});
		this.reset.bind(this).delay(5*this.options.baseDuration);
	},

	load: function(index) {
		this.box.addClass('MultiBoxLoading');
		this.getContent(index);
		if(this.type == 'image') {
			var xH = this.contentObj.xH;
			this.contentObj = new Asset.image(this.content[index].href, {onload: this.resize.bind(this)});
			this.contentObj.xH = xH;
		} else {
			this.resize();
		}
	},

	resize: function() {
		if(this.options.fixedTop) {
			var top = this.options.fixedTop;
		} else {
			var top = ((window.getHeight()/2)-((Number(this.contentObj.height)+this.contentObj.xH)/2)-this.options.border+window.getScrollTop())+this.options.offset.y;
		}
		var left = ((window.getWidth()/2)-(this.contentObj.width/2)-this.options.border)+this.options.offset.x;
		if(top < 0) {
			top = 0
		}
		if(left < 0) {
			left = 0
		}

		this.containerEffects.cancel();
		this.containerEffects.start({
			width: this.contentObj.width,
			height: Number(this.contentObj.height) + this.contentObj.xH,
			top: top,
			left: left,
			opacity: 1
		});
		this.timer = this.showContent.bind(this).delay(5*this.options.baseDuration);
	},

	showContent: function() {
		this.box.removeClass('MultiBoxLoading');
		this.removeContent();

		this.contentContainer = new Element('div').setProperties({id: 'MultiBoxContentContainer'}).setStyles({opacity: 0, width: this.contentObj.width+'px', height: (Number(this.contentObj.height)+this.contentObj.xH)+'px'}).injectInside(this.box);

		if(this.type == 'image') {
			this.contentObj.injectInside(this.contentContainer);

		} else if(this.type == 'iframe') {
			new Element('iframe').setProperties({
				id: 'iFrame'+new Date().getTime(),
				width: this.contentObj.width,
				height: this.contentObj.height,
				src: this.contentObj.url,
				frameborder: 0,
				scrolling: 'auto'
			}).injectInside(this.contentContainer);

		} else if(this.type == 'htmlelement') {
			this.elementContent.clone().setStyle('display','block').injectInside(this.contentContainer);

		} else if(this.type == 'ajax'){
			new Ajax(this.contentObj.url, {
				method: 'get',
				update: 'MultiBoxContentContainer',
				evalScripts: true,
				autoCancel: true
			}).request();

		} else {
			var obj = this.createEmbedObject().injectInside(this.contentContainer);
			if(this.str != '') {
				$('MultiBoxMediaObject').set('html', this.str);
			}
		}

		this.contentEffects = new Fx.Morph(this.contentContainer, {duration: 3*this.options.baseDuration, transition: Fx.Transitions.Linear});
		this.contentEffects.start({
			opacity: 1
		});

		this.title.set('html', this.contentToLoad.title);
		this.number.set('html', this.contentToLoad.number+' '+this.options.of+' '+this.content.length);
		//this.removeContent.bind(this).delay(500);
		if (this.options.showControls) {
			this.timer = this.showControls.bind(this).delay(0*this.options.baseDuration);
		}
	},

	hideContent: function() {
		this.box.addClass('MultiBoxLoading');
		this.contentEffects.start({
			opacity: 0
		});
		this.removeContent.bind(this).delay(5*this.options.baseDuration);
	},

	removeContent: function() {
		if($('MultiBoxMediaObject')){
			$('MultiBoxMediaObject').destroy();
		}
		if($('MultiBoxContentContainer')){
			$('MultiBoxContentContainer').destroy();
		}
	},

	showControls: function(){
		this.clicked = false;

		if(this.container.getStyle('height') != 'auto') {
			this.containerDefaults.height = this.container.getStyle('height')
//			this.containerDefaults.backgroundColor = this.options.contentColor;
		}

		this.container.setStyles({
			//'backgroundColor': this.controls.getStyle('backgroundColor'),
			height: 'auto'
		});

		if(this.contentToLoad.number == 1) {
			this.previousButton.addClass('MultiBoxPreviousDisabled');
		} else {
			this.previousButton.removeClass('MultiBoxPreviousDisabled');
		}
		if(this.contentToLoad.number == this.content.length) {
			this.nextButton.addClass('MultiBoxNextDisabled');
		} else {
			this.nextButton.removeClass('MultiBoxNextDisabled');
		}

		this.controlEffects.start({'height': this.controls.getStyle('height')});

	},

	hideControls: function(num) {
		this.controlEffects.start({'height': 0}).chain(function() {
			this.container.setStyles(this.containerDefaults);
		}.bind(this));
	},

	next: function(){
		if(this.index < this.content.length-1) {
			this.index++;
			if (this.options.showControls) {
				this.hideControls();
			}
			this.getOpenClosePos(this.content[this.index]);
			//this.getContent(this.index);
			this.timer = this.hideContent.bind(this).delay(5*this.options.baseDuration);
			this.timer = this.load.pass(this.index, this).delay(10*this.options.baseDuration);
		}
	},

	previous: function(){
		if(this.index > 0){
			this.index--;
			if (this.options.showControls) {
				this.hideControls();
			}
			this.getOpenClosePos(this.content[this.index]);
			//this.getContent(this.index);
			this.timer = this.hideContent.bind(this).delay(5*this.options.baseDuration);
			this.timer = this.load.pass(this.index, this).delay(10*this.options.baseDuration);
		}
	},

	createEmbedObject: function() {
		if(this.type == 'flash') {
			var url = this.contentObj.url;

			var obj = new Element('div').setProperties({id: 'MultiBoxMediaObject'});
			this.str = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" '
			this.str += 'width="'+this.contentObj.width+'" ';
			this.str += 'height="'+this.contentObj.height+'" ';
			this.str += 'title="MultiBoxMedia">';
  			this.str += '<param name="movie" value="'+url+'" />'
  			this.str += '<param name="quality" value="high" />';
  			this.str += '<embed src="'+url+'" ';
  			this.str += 'quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" ';
  			this.str += 'width="'+this.contentObj.width+'" ';
  			this.str += 'height="'+this.contentObj.height+'"></embed>';
			this.str += '</object>';

		}

		if(this.type == 'flashVideo') {
			//var url = this.contentObj.url.substring(0, this.contentObj.url.lastIndexOf('.'));
			var url = this.contentObj.url;

			var obj = new Element('div').setProperties({id: 'MultiBoxMediaObject'});
			this.str = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" '
			this.str += 'width="'+this.contentObj.width+'" ';
			this.str += 'height="'+(Number(this.contentObj.height)+this.contentObj.xH)+'" ';
			this.str += 'title="MultiBoxMedia">';
  			this.str += '<param name="movie" value="'+this.options.path+'flvplayer.swf" />'
  			this.str += '<param name="quality" value="high" />';
  			this.str += '<param name="salign" value="TL" />';
  			this.str += '<param name="scale" value="noScale" />';
  			this.str += '<param name="FlashVars" value="path='+url+'" />';
  			this.str += '<embed src="'+this.options.path+'flvplayer.swf" ';
  			this.str += 'quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" ';
  			this.str += 'width="'+this.contentObj.width+'" ';
  			this.str += 'height="'+(Number(this.contentObj.height)+this.contentObj.xH)+'"';
  			this.str += 'salign="TL" ';
  			this.str += 'scale="noScale" ';
  			this.str += 'FlashVars="path='+url+'"';
  			this.str += '></embed>';
			this.str += '</object>';

		}

		if(this.type == 'flashMp3') {
			var url = this.contentObj.url;

			var obj = new Element('div').setProperties({id: 'MultiBoxMediaObject'});
			this.str = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" '
			this.str += 'width="'+this.contentObj.width+'" ';
			this.str += 'height="'+this.contentObj.height+'" ';
			this.str += 'title="MultiBoxMedia">';
  			this.str += '<param name="movie" value="'+this.options.path+'mp3player.swf" />'
  			this.str += '<param name="quality" value="high" />';
  			this.str += '<param name="salign" value="TL" />';
  			this.str += '<param name="scale" value="noScale" />';
  			this.str += '<param name="FlashVars" value="path='+url+'" />';
  			this.str += '<embed src="'+this.options.path+'mp3player.swf" ';
  			this.str += 'quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" ';
  			this.str += 'width="'+this.contentObj.width+'" ';
  			this.str += 'height="'+this.contentObj.height+'"';
  			this.str += 'salign="TL" ';
  			this.str += 'scale="noScale" ';
  			this.str += 'FlashVars="path='+url+'"';
  			this.str += '></embed>';
			this.str += '</object>';
		}

		if(this.type == 'quicktime') {
			var obj = new Element('div').setProperties({id: 'MultiBoxMediaObject'});
			this.str = '<object  type="video/quicktime" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab"';
			this.str += ' width="'+this.contentObj.width+'" height="'+this.contentObj.height+'">';
			this.str += '<param name="src" value="'+this.contentObj.url+'" />';
			this.str += '<param name="autoplay" value="true" />';
			this.str += '<param name="controller" value="true" />';
			this.str += '<param name="enablejavascript" value="true" />';
			this.str += '<embed src="'+this.contentObj.url+'" autoplay="true" pluginspage="http://www.apple.com/quicktime/download/" width="'+this.contentObj.width+'" height="'+this.contentObj.height+'"></embed>';
			this.str += '<object/>';

		}

		if(this.type == 'windowsMedia') {
			var obj = new Element('div').setProperties({id: 'MultiBoxMediaObject'});
			this.str = '<object  type="application/x-oleobject" classid="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112"';
			this.str += ' width="'+this.contentObj.width+'" height="'+this.contentObj.height+'">';
			this.str += '<param name="filename" value="'+this.contentObj.url+'" />';
			this.str += '<param name="Showcontrols" value="true" />';
			this.str += '<param name="autoStart" value="true" />';
			this.str += '<embed type="application/x-mplayer2" src="'+this.contentObj.url+'" Showcontrols="true" autoStart="true" width="'+this.contentObj.width+'" height="'+this.contentObj.height+'"></embed>';
			this.str += '<object/>';

		}

		if(this.type == 'real') {
			var obj = new Element('div').setProperties({id: 'MultiBoxMediaObject'});
			this.str = '<object classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"';
			this.str += ' width="'+this.contentObj.width+'" height="'+this.contentObj.height+'">';
			this.str += '<param name="src" value="'+this.contentObj.url+'" />';
			this.str += '<param name="controls" value="ImageWindow" />';
			this.str += '<param name="autostart" value="true" />';
			this.str += '<embed src="'+this.contentObj.url+'" controls="ImageWindow" autostart="true" width="'+this.contentObj.width+'" height="'+this.contentObj.height+'"></embed>';
			this.str += '<object/>';

		}

		return obj;
	},

   keyboardListener: function(event) {
      switch (event.code){
         case 27: case 88: case 67: this.close(); break;
         case 37: case 80: this.previous(); break;
         case 39: case 78: this.next();
      }
   }
});

MultiBox.implement(new Options);
MultiBox.implement(new Events);