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

	Script		: multiBox
	Version		: 2.0
	Authors		: Samuel Birch
	Desc			: Supports jpg, gif, png, flash, flv, mov, wmv, mp3, html, iframe
	Licence		: Open Source MIT Licence
	Modified		: Liam Smart (liam_smart@hotmail.com) - MooTools 1.2 upgrade
	Usage		: window.addEvent('domready', function(){
					  //call multiBox
					  var initMultiBox = new multiBox({						  
						  container: $(document.body),//where to inject multiBox						  
					  });
				  });

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

//start myNews class
var popUpNews = new Class({
	
	//implements
	Implements: [Options],
	
	//options
	options:{		
		initialWidth: 50,//initial width the box will open at before resizing
		initialHeight: 50,//initial height the box will open at before resizing
		offset: {x:0, y:0},//offset multiBox position				
		onOpen: new Class(),//make sure new class is loaded
		onClose: new Class()//make sure new class is loaded
	},

	//initialization
	initialize: function(options){		
		//set options
		this.setOptions(options);
		//set variables
		this.openClosePos = {};
		this.contentObj = {};		
		this.timer = 0;		
		this.start();
	},
	
	//start myNews
	start: function(){			
		this.container = new Element('div').addClass('PopupNewsContainer').inject(this.options.container,'inside');		
		this.box = new Element('div').addClass('PopupNewsContent').inject(this.container,'inside');
		this.closeButton = new Element('div').addClass('PopupNewsClose').inject(this.container,'inside').addEvent('click', this.close.bind(this));
		this.icon = new Element('div').addClass('PopupNewsIcon').inject(this.container,'inside');	
		this.icon.setStyles({
			top: -65,
			left: -30
		});
		this.title = new Element('div').addClass('PopupNewsTitle').inject(this.container,'inside');		
		this.title.setStyles({
			top: -38,
			left: 38
		});
		this.title.set('html',this.options.title);
		
		//check user options and call functions accordingly
		$(window.document).addEvent('keydown',function(e){
			if(e.key == 'esc'){
				this.close();
			};
		}.bind(this));
				
		//all page background
		this.overlay = new Overlay({
			colour: '#666666',
			opacity: 0.4,
			container:this.options.container,
			onClick:this.close.bind(this)
		});
		
		this.containerEffects = new Fx.Morph(this.container,{duration:400});
		this.reset();		
		this.open();
	},
	
	setContentType: function(){						
		this.contentObj = {};
		this.contentObj.url = this.options.url;
		this.contentObj.width = this.options.width;
		this.contentObj.height = this.options.height;						
	},
	
	reset: function(){
		this.container.setStyles({
			opacity: 0,
			display: 'none'
		});		
		this.removeContent();		
	},
	
	getOpenClosePos: function(){
		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(){		
		this.overlay.show();
		
		this.container.setStyles(this.getOpenClosePos());
		this.container.setStyles({
			opacity: 0,
			display: 'block'
		});
		
		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();
		
	},
	
	getContent: function(){
		this.setContentType();
		var desc = {};				
	},
	
	close: function(){		
		this.overlay.hide();
		this.hideContent();
		this.containerEffects.cancel();
		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(){		
		this.getContent();
		this.resize();
	},
	
	resize: function(){		
		var top = ((window.getHeight() / 2) - (Number(this.contentObj.height) / 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.cancel();
		this.containerEffects.start({
			width: this.contentObj.width,
			height: Number(this.contentObj.height),
			top: top,
			left: left,
			opacity: 1
		});
		this.timer = this.showContent.bind(this).delay(500);
	},
	
	showContent: function(){		
		this.removeContent();
		this.contentContainer = new Element('div', {
			'id': 'PopUpContentContainer',
			'styles': {
				opacity: 0,
				width: this.contentObj.width,
				height: Number(this.contentObj.height)
			}
		}).inject(this.box,'inside');

		new Element('iframe', {
			'id': 'iFrame'+new Date().getTime(),
			'width': this.contentObj.width,
			'height': this.contentObj.height,
			'src': this.contentObj.url,
			'frameborder': 0,
			'scrolling': 'auto'
		}).inject(this.contentContainer,'inside');		
		
		this.contentEffects = new Fx.Morph(this.contentContainer,{duration:500});
		this.contentEffects.start({
			opacity: 1
		});		
	},
	
	hideContent: function(){
		this.contentEffects.start({
			opacity: 0
		});
		this.removeContent.bind(this).delay(500);
	},
	
	removeContent: function(){		
		if($('PopUpContentContainer')){
			$('PopUpContentContainer').dispose();//dispose() instead of destroy() as IE 6&7 crashes
		};
	},		
		
	
});