var PopUpGenerator = new Class({
	Implements: [Options, Events],
	
	
	getOptions: function(){
		return {
			container: document.body,
			percentatgeWindowHeight:0.9,
			percentatgeWindowWidth:0.7,
			percentatgeMapHeight:0.95,
			percentatgeMapWidth:0.95
		};
	},
	
	options: {
	},
	
	initialize: function(absPath,options){
		this.setOptions(this.getOptions(), options);
		
		this.absPath = absPath;
		this.img = false;
		this.element = false;
		
		//create the differents divs
		
		//create the layout div
		this.overlay = new Element('div').setProperty('id', 'pOverlay').setStyles({position:'absolute',width:'1px',height:'1px','background-color':'black',top:'0px'}).inject(this.options.container).setStyle("display","none").fade(0).setStyle("display","");
		this.loading = new Element('img',{'src':this.absPath+'img/loading.gif','styles':{'position':'absolute','top':'-100px','left':'-1000px'}}).inject(this.options.container).fade(0);
		
		//create the container
		this.container = new Element('div').setProperty('id', 'pContainer').setStyles({position:'absolute',width:'1px',height:'1px','background-color':'transparent',top:'0px','z-index':'2','display':'none'}).inject(this.options.container);
		
		this.header = new Element('div').setProperty('id', 'pHeader').addClass('MultiBoxHeader').inject(this.container);
		this.content = new Element('div').setProperty('id', 'pContent').addClass('MultiBoxContent').inject(this.container);
		
		
		//create the header content
		this.headerTitle = new Element('div',{"text":"FOTOGRAFIA"}).addClass('MultiBoxHeaderTitle').inject(this.header,'inside');
		this.headerMiddle = new Element('div').addClass("MultiBoxHeaderMiddle").inject(this.header);
		this.headerClose = new Element('div').addClass('MultiBoxHeaderClose').inject(this.header).addEvent('click', this.hide.bind(this));
		
		//create the content content
		this.contentCenter = new Element('center').inject(this.content,'inside');
		this.contentPicture = new Element('div').addClass("MultiBoxContentPicture").inject(this.contentCenter,'inside');
		this.contentButtons = new Element('div').addClass('MultiBoxContentButtons').inject(this.contentCenter,'inside');
		
		
		this.effectOverlay = new Fx.Morph(this.overlay, {duration: 500});
		this.effectContainer = new Fx.Morph(this.container, {duration: 1});
		this.effectHeader = new Fx.Morph(this.header, {duration: 500});
		this.effectContent = new Fx.Morph(this.content, {duration: 500});
		this.effectLoading = new Fx.Morph(this.loading, {duration: 1});
		
		this.popups = $$('.popup');
		/*
		window.addEvent('resize', function() {
			if (this.container.style.display != "none") {
				
				//resize the overlay
				this.overlay.style.width = window.getScrollWidth()+"px";
				this.overlay.style.height = window.getScrollHeight()+"px";
				
				//recenter the container
				this.recenterContainer();
			}
		}.bind(this));		
		*/
		this.popups.each(function(el,i){
			el.index = i;
			el.addEvent('click', function(e){
				new Event(e).stop();
				this.loadContent(el);
				
			}.bind(this));
			
		}, this);
	},
	
	createContainer: function() {
		
		
		if (this.type == "image") {
			this.createImageContainer();
		} else {
			this.createMapContainer();
		}
				
	},
	
	createMapContainer: function() {

		h = Math.round(window.getHeight()*this.options.percentatgeMapHeight);
		w = Math.round(window.getWidth()*this.options.percentatgeMapWidth);
		var path = this.absPath+'viewer.php?id='+this.mapId;
		this.iframe = new Element('iframe',{'src':path.replace("atles-nacional","atles-nacional"),'id':'eGV','name':'eGV','frameborder':'0','scrolling':'no','allowtransparency':'true','width':(w-2)+'px','height':(h)+'px','styles':{'position':'absolute','top':'25px','left':'1px'}});
		this.contentPicture.setStyle('height',h+'px');
		

		
	},
	
	createImageContainer: function() {
		this.contentPicture.grab(this.img);
		this.contentPicture.setStyle('height',Math.round(window.getHeight()*this.options.percentatgeWindowHeight-60)+'px');
		
		//create the buttons
		var buttonContainer = new Element('table',{'width':'50%','align':'center'});
		
		var buttonContainerTBody = new Element('tbody');
		var buttonContainerTr = new Element('tr');
		
		var id = this.element.id.substr(2);
		
		buttonContainerTr.grab(new Element('td').grab(new Element('a',{'href':this.absPath+'php/save.php?type=jpg&id='+id}).grab(new Element('img',{'src':this.absPath+'img/popup/save.gif','border':'0'}))));
		buttonContainerTr.grab(new Element('td').grab(new Element('a',{'href':this.absPath+'php/save.php?type=pdf&id='+id}).grab(new Element('img',{'src':this.absPath+'img/popup/print.gif','border':'0'}))));
		buttonContainerTr.grab(new Element('td').grab(new Element('img',{'src':this.absPath+'img/popup/close.gif','border':'0'}).addClass('MultiBoxImageClose').addEvent('click', this.hide.bind(this))));
		
		buttonContainer.grab(buttonContainerTBody.grab(buttonContainerTr));
		
		
		this.contentButtons.grab(buttonContainer);		
		
	},
	
	createErrorContainer: function() {
		
		this.headerTitle.setProperty('html',"ERROR");
		
		//create the buttons
		var buttonContainer = new Element('table',{'width':'80%','align':'center'});
		
		var buttonContainerTBody = new Element('tbody');
		
		var buttonContainerTr = new Element('tr',{'align':'center'});
		
		buttonContainerTr.grab(new Element('td',{'align':'center'}).grab(new Element('div',{'text':'Hi ha hagut un error carregant la imatge'}).addClass('MultiBoxErrorLoading')));
		buttonContainerTBody.grab(buttonContainerTr);
		
		buttonContainerTr = new Element('tr',{'align':'center'});
		buttonContainerTr.grab(new Element('td',{'align':'center'}).grab(new Element('img',{'src':this.absPath+'img/popup/close.gif','border':'0'}).addClass('MultiBoxImageClose').addEvent('click', this.hide.bind(this))));
		
		
		buttonContainerTBody.grab(buttonContainerTr);
		
		buttonContainer.grab(buttonContainerTBody);
		
		
		this.contentButtons.grab(buttonContainer);
				
	},	
	
	
	show: function() {
		
		$(document.documentElement).setStyle('overflow','hidden');
		
		this.createContainer();
		
		this.positionContainer(false);
		
		
		this.showContainer();
		
	},
	
	showError:function() {
		this.createErrorContainer();
		this.positionContainer(true);
		this.showContainer();
	},
	
	loadContent: function(el) {
		
		this.showOverlay();
		
		this.element = el;
		
		//empty the previous material
		this.contentPicture.empty();
		this.contentButtons.empty();
		
		var hrefA = el.href.split("/");
		
		if (hrefA[hrefA.length-1].indexOf(".") > 0) {
			this.type = "image";
		} else {
			this.type = "mapa";
		}
		
		if (el.type) {
			this.headerTitle.setProperty('html'," "+el.type.toUpperCase());
		}
		
		if (this.type == "mapa") {
			this.headerTitle.setProperty('html',"MAPA");
		}
		
		
		if (this.type == "image") {
			//load the image
			var imgUrl = this.absPath+"php/resize.php?url="+el.href+"&height="+Math.round(window.getHeight()*this.options.percentatgeWindowHeight-60);
			
			this.img = new Asset.image(imgUrl, {onload: this.show.bind(this),onerror:this.showError.bind(this)}); 
		} else {
			//check that the map exists on the database
			
			var resourceId = hrefA[hrefA.length-1];
			
			var current = this;

			var myRequest = new Request({
					method: 'post', 
					url: this.absPath+'php/ajax.php',
					onSuccess: function(res){
						//alert(res);
						current.mapId = res;
						if (eval(res)) current.show();
						else current.showError();
					}
			}).send('action=getMap&id='+resourceId);
			//this.show();
		}		
		

		
	},
	
	positionContainer : function(error) {
		
		pageY = $(window).getScroll().y;
		pageX = $(window).getScroll().x;
		
		//make the container be in the "center" of the page
		//height must be 0 for the effect
		if (!error) {
			if (this.type == "image") {
				var width = Math.round(window.getWidth()*this.options.percentatgeWindowWidth);
				var height = Math.round(window.getHeight()*this.options.percentatgeWindowHeight);
			} else {
				var width = Math.round(window.getWidth()*this.options.percentatgeMapWidth);
				var height = Math.round(window.getHeight()*this.options.percentatgeMapHeight);
			}
		} else {
			var width = 300;
			var height = 150;
		}
		
		var left = Math.round((window.getScrollWidth()-width)/2)+pageX;
		var top = Math.round((window.getHeight()-height-parseInt(this.headerTitle.getStyle('height')))/2)+pageY;
		
		this.container.setStyles({
			width:width+"px",
			height:height+"px",
			position:"absolute",
			top:top+"px",
			left:left+"px"
			
		});
		
		this.header.setStyles({
			height:this.headerTitle.getStyle('height'),
			width:"0px"
		});
		
		this.content.setStyles({
			height:"0px",
			width:(width-this.content.getStyle('border-bottom-width').toInt()*2)+"px"
		});
		
		if (this.type == "mapa") {
			this.headerClose.addClass("MultiBoxHeaderCloseMapa");
		} else {
			this.headerClose.addClass("MultiBoxHeaderClose");
		} 
		
		this.headerMiddle.setStyles({
			width:(width-this.headerTitle.getStyle('width').toInt()-this.headerClose.getStyle('width').toInt())+"px"
		});
		
		this.headerClose.setStyles({
			left:(width-this.headerClose.getStyle('width').toInt())+"px"
		});
		
	},
	
	recenterContainer: function() {
		
		pageY = $(window).getScroll().y;
		pageX = $(window).getScroll().x;
		
		if (this.type == "image") {
			var width = Math.round(window.getWidth()*this.options.percentatgeWindowWidth);
			var height = Math.round(window.getHeight()*this.options.percentatgeWindowHeight);
		} else {
			var width = Math.round(window.getWidth()*this.options.percentatgeMapWidth);
			var height = Math.round(window.getHeight()*this.options.percentatgeMapHeight);
		}
		
		var left = Math.round((window.getScrollWidth()-width)/2)+pageX;
		var top = Math.round((window.getHeight()-height)/2)+pageY;
		
		this.container.setStyles({
			width:width+"px",
			height:height+"px",
			position:"absolute",
			top:top+"px",
			left:left+"px"
			
		});
		
	},	
	
	showOverlay: function() {
		
		//make the overlay to fill all the background
		this.overlay.setStyles({
			width:window.getScrollWidth()+"px",
			height:window.getScrollHeight()+"px",
			position:"absolute",
			top:0+"px",
			left:0+"px"
		});
		
		var pageY = $(window).getScroll().y;
		var pageX = $(window).getScroll().x;
		
		var left = Math.round((window.getScrollWidth()-220)/2)+pageX;
		var top = Math.round((window.getHeight()-20)/2)+pageY;
		
		this.loading.setStyles({
			top:top+"px",
			left:left+"px"
		});
		
		
		this.effectOverlay.start({
				opacity: [0,0.7]
				
		}).chain(this.showLoading.bind(this))
	},
	
	showLoading: function() {
		this.effectLoading.start({
				opacity: [0,1]
		})
	},
	
	showContainer: function() {
		this.effectContainer.start({
				display:""
		}).chain(this.showHeader.bind(this))
	},
	
	showHeader:function() {
		this.effectHeader.start({
				width:this.container.getStyle('width')
		}).chain(this.showContent.bind(this))
	},
	
	
	showContent:function() {
		
		
		
		this.content.setStyles({
			display:"block"
		})
		this.effectContent.start({
				height:this.container.getStyle('height')
		}).chain(this.hideLoading.bind(this))
		//.chain(this.hide.bind(this))
	},
	

	hide: function() {
		this.hideContent();
		$(document.documentElement).setStyle('overflow','');
		
	},
	
	
	
	hideContent:function() {
		if (this.type == "mapa") {
			this.contentPicture.empty();
		}
		
		this.effectContent.start({
				height:"0px"
		}).chain(this.hideHeader.bind(this))
		
		
	},
	
	hideHeader:function() {
		
		this.content.setStyles({
			display:"none"
		});
		
		this.effectHeader.start({
				width:"0px"
		}).chain(this.hideContainer.bind(this))
	},
	
	hideContainer: function() {
		this.effectContainer.start({
				display:"none"
		}).chain(this.hideOverlay.bind(this))
	},	
	
	hideLoading: function() {
		this.effectLoading.start({
				opacity: [0]
				
		})
		if (this.type == "mapa") {
			this.contentPicture.grab(this.iframe);
		}
		//.chain(this.showContainer.bind(this))
	},
		
	
	hideOverlay: function() {
		this.effectOverlay.start({
				opacity: [0]
				
		})
		//.chain(this.showContainer.bind(this))
	}
	

	
	
	
});