ÿþ

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



	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



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



var MultiBox = new Class({

	

	getOptions: function(){

		return {

			initialWidth: 250,

			initialHeight: 250,

			container: document.body,

			useOverlay: false,

			contentColor: '#FFF',

			showNumbers: true,

			showControls: true,

			//showThumbnails: false,

			//autoPlay: false,

			waitDuration: 2000,

			descClassName: false,

			descMinWidth: 400,

			descMaxWidth: 600,

			movieWidth: 400,

			movieHeight: 300,

			offset: {x:0, y:0},

			fixedTop: false,

			path: 'files/',

			onOpen: Class.empty,

			onClose: Class.empty,

			openFromLink: true,

			relativeToWindow: true

		};

	},



	initialize: function(className, 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 Overlay({container: this.options.container, onClick:this.close.bind(this)});

		}

		

		this.content = $$('.'+className);

		if(this.options.descClassName){

			this.descriptions = $$('.'+this.options.descClassName);

			this.descriptions.each(function(el){

				el.setStyle('display', 'none');

			});

		}

		

		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': -20,

			'left': -20,

			'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.Styles(this.container, {duration: 400, transition: Fx.Transitions.sineInOut});

		this.controlEffects = new Fx.Styles(this.controlsContainer, {duration: 300, transition: Fx.Transitions.sineInOut});

		

		this.reset();

	},

	

	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();

		this.previousButton.removeClass('MultiBoxButtonDisabled');

		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.container.getStyle('border').toInt())+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.container.getStyle('border').toInt())+this.options.offset.x

			};

		}

		return this.openClosePos;

	},

	

	open: function(el){

	

		this.options.onOpen();

	

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

		

		this.openId = el.getProperty('id');

		

		$("OverlayContainer").setStyle("height", window.getScrollHeight() + "px");

		

		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'

			});

			

			if(this.options.fixedTop){

				var top = this.options.fixedTop;

			}else{

				var top = ((window.getHeight()/2)-(this.options.initialHeight/2)-this.container.getStyle('border').toInt())+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.container.getStyle('border').toInt())+this.options.offset.x,

				opacity: [0, 1]*/

			});

			

			this.load(this.index);

		

		}else{

			if (this.options.showControls) {

				this.hideControls();

			}

			this.getOpenClosePos(this.content[this.index]);

			this.timer = this.hideContent.bind(this).delay(500);

			this.timer = this.load.pass(this.index, this).delay(1100);

			

		}

		

	},

	

	getContent: function(index){

		this.setContentType(this.content[index]);

		var desc = {};

		if(this.options.descClassName){

		this.descriptions.each(function(el,i){

			if(el.hasClass(this.openId)){

				desc = el.clone();

			}

		},this);

		}

		//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.hide();

		}

		if (this.options.showControls) {

			this.hideControls();

		}

		this.hideContent();

		this.containerEffects.stop();

		this.zoomOut.bind(this).delay(500);

		this.options.onClose();

	},

	

	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(500);

	},

	

	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;

			/*this.contentObj = new Image();

			this.contentObj.onload = this.resize.bind(this);

			this.contentObj.src = this.content[index].href;*/

		}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.container.getStyle('border').toInt() + window.getScrollTop()) + this.options.offset.y;

		}

		var left = ((window.getWidth() / 2) - (this.contentObj.width / 2) - this.container.getStyle('border').toInt()) + this.options.offset.x;

		if (top < 0) {

			top = 0

		}

		if (left < 0) {

			left = 0

		}

		

		this.containerEffects.stop();

		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(500);

	},

	

	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').innerHTML = this.str;

			}

		}

		

		this.contentEffects = new Fx.Styles(this.contentContainer, {duration: 500, transition: Fx.Transitions.linear});

		this.contentEffects.start({

			opacity: 1

		});

		

		this.title.setHTML(this.contentToLoad.title);

		this.number.setHTML(this.contentToLoad.number+' of '+this.content.length);

		if (this.options.descClassName) {

			if (this.description.getFirst()) {

				this.description.getFirst().remove();

			}

			this.contentToLoad.desc.injectInside(this.description).setStyles({

				display: 'block'

			});

		}

		//this.removeContent.bind(this).delay(500);

		if (this.options.showControls) {

			this.timer = this.showControls.bind(this).delay(800);

		}

	},

	

	hideContent: function(){

		this.box.addClass('MultiBoxLoading');

		this.contentEffects.start({

			opacity: 0

		});

		this.removeContent.bind(this).delay(500);

	},

	

	removeContent: function(){

		if($('MultiBoxMediaObject')){

			$('MultiBoxMediaObject').empty();

			$('MultiBoxMediaObject').remove();

		}

		if($('MultiBoxContentContainer')){

			//$('MultiBoxContentContainer').empty();

			$('MultiBoxContentContainer').remove();	

		}

	},

	

	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));

	},

	

	showThumbnails: function(){

		

	},

	

	next: function(){

		if(this.index < this.content.length-1){

			this.index++;

			this.openId = this.content[this.index].getProperty('id');

			if (this.options.showControls) {

				this.hideControls();

			}

			this.getOpenClosePos(this.content[this.index]);

			//this.getContent(this.index);

			this.timer = this.hideContent.bind(this).delay(500);

			this.timer = this.load.pass(this.index, this).delay(1100);

		}

	},

	

	previous: function(){

		if(this.index > 0){

			this.index--;

			this.openId = this.content[this.index].getProperty('id');

			if (this.options.showControls) {

				this.hideControls();

			}

			this.getOpenClosePos(this.content[this.index]);

			//this.getContent(this.index);

			this.timer = this.hideContent.bind(this).delay(500);

			this.timer = this.load.pass(this.index, this).delay(1000);

		}

	},

	

	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;

	}

	

});

MultiBox.implement(new Options);

MultiBox.implement(new Events);





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