var ModalDialogue = new Class({
	Implements: [Options,Events, Chain], 						  
	// menu options. don't put a comma after the last option!
	options: {
			/* bg element ID */
			'bg':null,
			/* content pane element */
			'container':null,
			/* button to show dialogue */
			'trigger':null,
			/* which element to zoom */
			'zoomElement':false,
			/* whether to empty contents on close */
			'emptyOnClose':true

		},
	log: function(){
		return false;
		//if(window['console'] && window['console'].firebug) console.log.apply(null, arguments);
	}, 
	// this function runs whenever a new instance of this class is made.
	initialize: function(options){ 
		// use the options specified
		
		

		
		this.reloadOnClose = false;
		
		this.setOptions(options);
		
		this.container = document.id(this.options.container);
		
		if(!this.container){
			/* create */
			this.container = new Element('div',{'id':this.options.container});
			document.getElement('body').grab(this.container );
			
		}
		
		
		
		this.bg = document.id(this.options.bg);
		
		if(!this.bg){
			/* create DIV */
			this.bg = new Element('div',{'id':this.options.bg});
			document.getElement('body').grab(this.bg );
		}
		
		this.bg.setStyles({
			'opacity':'0',
			'left':'0',
			'top':'0',
			'width': window.getSize().x ,
			'height': window.getSize().y 
			
		});
		
		
		
		if(!this.container.getElement('div.lining')){
			this.container.grab(new Element('div',{'class':'lining'}).fade('hide') );
		}

		this.container.setStyles({
			'opacity':'0',
			'left': (document.getSize().x - this.container.getSize().x)/2 
		});
		
		
		/* store options for future use */
		document.store('mdOptions', this.options);

		/* when resizing window, resize bg */
		window.addEvent('resize', function(){
			var mdOptions = document.retrieve('mdOptions');
			document.id(mdOptions.bg).setStyles({
				'width': window.getSize().x  ,
				'height': window.getSize().y 
			});
			
			
			document.id(mdOptions.container).setStyles({
				'left': (document.getSize().x - document.id(mdOptions.container).getSize().x)/2 
			});
		
			
		});
		
		/* this causes the overlay panel to be centered */
		window.fireEvent('resize');
		
		/* create close button */
		if(!this.container.getElement('a.close')){
			this.closeButton = new Element('a',{'html':'Close','href':'javascript:;','class':'close','title':'Close this Pane'})
			this.container.grab(this.closeButton);
			
			/* add clicky event */
			this.closeButton.addEvent('click', function(){ this.fadeInOut({'fade': 'out'}) }.bind(this) );
			
		}
		
	},
	

	fadeInOut:function(paramArray){
		//fade in or out bg.
		
		// used by the close button
		
		this.log('paramArray=',paramArray);
		//return false;
		
		this.bgFx = new Fx.Tween(this.bg,{'property':'opacity'});
		this.containerFx = new Fx.Tween(this.container);
		if(paramArray['fade'] == 'in'){
			this.container.setStyles({'left': (document.getScrollSize().x - this.container.getScrollSize().x)/2});
			//var paramArray = {'fade':'in'};
			this.chain( function(){ this.fadeBg(paramArray) }.bind(this) );
			this.chain( function(){ this.fadeDialogue(paramArray) }.bind(this) );
			this.chain( function(){ this.fadeDialogueLining(paramArray) }.bind(this) );
			this.chain( function(){ this.fireEvent('fadeInComplete') }.bind(this) );
			//this.chain(function(){this.fadeDialogue(null,paramArray);this.callChain();});
			this.callChain();
			//bgFx.start('opacity',.8).chain(function(){containerFx.start('opacity',1)});
			
		}else if(paramArray['fade'] == 'out'){
			this.container.setStyles({'left':-10000});
			
			if(this.options.emptyOnClose){
				/* empty the container lining */
				this.container.getElement('div.lining').setProperty('html','');
				
			}else{
			}
			/* hide lining */
			this.container.getElement('div.lining').fade('hide');
			
			this.containerFx.set('opacity',0);
			
			
			// check if on Cart page, refresh
			var myURI = new URI(document.location);
			var fileName = myURI.get('file');
			//this.log(myURI.toString());
			var reloadPage = function(){};
			if(this.reloadOnClose && fileName=='cart.htm'){
				//this.log(fileName);
				reloadPage = function(){window.location.reload()}
			}
			
			//this.bgFx.start('opacity',0).chain(reloadPage);
			//var paramArray = {'fade':'out'};
			this.chain( function(){ this.fadeBg(paramArray) }.bind(this) );
			this.chain(reloadPage);
			this.callChain();
		}
		
		return this;
		
		//this.container.fade(paramArray['fade']);
		
	},
	
	fadeBg:function(paramArray){
		// Just fade in the Background Overlay
		this.log('paramArray=', paramArray);

		var myFx = new Fx.Tween(this.bg);
		
		if(paramArray['fade'] == 'in'){
			this.container.setStyles({'left': (document.getScrollSize().x - this.container.getScrollSize().x)/2});
			myFx.start('opacity',.8).chain(function(){this.callChain()}.bind(this));
			this.fireEvent('fadeBgIn');
			
			
			
		}else if(paramArray['fade'] == 'out'){
			myFx.start('opacity',0).chain(function(){this.callChain()}.bind(this));
			this.fireEvent('fadeBgOut');
		}
		
		//this.bg.fade(paramArray['fade']);
		//return this;
		
		
	},
	
	fadeDialogue:function(paramArray){
		// fade in the actual dialogue Element
		
		//this.log('op',this.options);
		
		//if(zoomEl = document.id(this.options.zoomElement)){
			//this.log('zoomEl',zoomEl);			
		//}
		this.container.addClass('spinner');
		var myFx = new Fx.Tween(this.container);
		if(paramArray['fade'] == 'in'){
			myFx.start('opacity',1).chain(function(){this.callChain()}.bind(this));			
		}else if(paramArray['fade'] == 'out'){
			this.container.setStyles({'left':-10000});
			myFx.set('opacity',0).chain(function(){this.callChain()}.bind(this));
		}
		
		//this.bg.fade(paramArray['fade']);
		return this;
	},
	
	fadeDialogueLining:function(paramArray){
		/* fade in the 'content' of the dialogue */
		
		/* remove spinner */
		
		this.container.removeClass('spinner');
		
		var myFx = new Fx.Tween(this.container.getElement('div.lining'));
		
		if(paramArray['fade'] == 'in'){
			
			myFx.start('opacity',1).chain(function(){this.callChain()}.bind(this));			
			
			this.fireEvent('fadeDialogueLiningIn');
			
		}else if(paramArray['fade'] == 'out'){
			myFx.start('opacity',0).chain(function(){this.callChain()}.bind(this));
		}
		

		return this;
		
		
	}


});