var dpsSecure = Class.create({
	initialize: function() {
		this.txn = {
			AmountInput: 0,
			CurrencyInput: 'AUD',
			EmailAddress: 'e7-webmaster@evolution7.com',
			MerchantReference: '',
			TxnType: 'Purchase',
			UrlFail: '',
			UrlSuccess: ''
		};
		
		this.AJAXTarget = '';
	},
	
	container: {
		displayMask: function() {
			if(this.mask().getStyle('display') != '') this.mask().appear({
				duration: 0.25,
				to: 0.75,
				queue: {
					scope: 'iFrame',
					position: 'front'
				}
			});
			if(this.box().getStyle('display') != '') this.box().appear({
				duration: 0.25,
				queue: {
					scope: 'iFrame',
					position: 'end'
				}
			});
		},
		
		displayWindow: function(src) {
			this.window().src = src;
			this.window().show();
		},
		
		hideAll: function() {
			// Hide the mask
			this.mask().hide();
			this.box().hide();
			// Kill the iFrame
			if(this.window()) this.window().parentNode.removeChild(this.window());
		},
		
		mask: function() {
			if($('iFrameMask')) return $('iFrameMask');
			
			var element = document.createElement('div');
				Element.extend(element);
				element.id = 'iFrameMask';
				element.setStyle({
					display: 'none',
					width: document.viewport.getWidth()+'px',
					height: document.viewport.getHeight()+'px',
					position: 'fixed',
					top: 0,
					left: 0,
					backgroundColor: '#000',
					zIndex: 998
				});
				
			// Set up event listeners
			element.observe('click', this.hideAll.bind(this));
			
			// Return element
			return document.getElementsByTagName('body')[0].appendChild(element);
		},
		
		box: function() {
			if($('iFrameBox')) return $('iFrameBox');
			
			var box = document.createElement('div');
				Element.extend(box);
				box.id = 'iFrameBox';
				box.setStyle({
					display: 'none',
					width: '470px',
					height: '400px',
					position: 'fixed',
					top: document.viewport.getHeight()/2 - 200 +'px',
					left: document.viewport.getWidth()/2 - 235 +'px',
					background: '#fff url(/images/payment-popup/h-secure-payment.gif) no-repeat 24px 20px',
					borderTop: '7px solid #b82329',
					zIndex: 999
				});
			// Construct masthead
			var masthead = document.createElement('div');
				Element.extend(masthead);
				masthead.setStyle({
					width: 'auto',
					textAlign: 'right',
					padding: '20px 23px 23px 0'
				});
				box.appendChild(masthead);
			var mastheadLogo = document.createElement('img');
				Element.extend(mastheadLogo);
				mastheadLogo.src = '/images/payment-popup/logo-client.gif';
				masthead.appendChild(mastheadLogo);
			// Construct subheader
			var subheader = document.createElement('div');
				Element.extend(subheader);
				subheader.update('Payment Details');
				subheader.setStyle({
					textAlign: 'left',
					backgroundColor: '#e8e7e9',
					padding: '10px 0 10px 12px',
					margin: '0 15px 0 15px',
					color: '#797a86', 
					font: '12px Arial',
					fontWeight: 'bold'
				});
				box.appendChild(subheader);
			// Construct iFrame container
			var content = document.createElement('div');
				Element.extend(content);
				content.setStyle({
					backgroundColor:'#f7f7f7',
					padding: '10px 0 15px 12px',
					margin: '0 15px 0 15px'
				});
				content.addClassName('content');
				box.appendChild(content);
			// Construct footer
			var footer = document.createElement('div');
				Element.extend(footer);
				footer.setStyle({
					height: '50px',
					textAlign: 'left',
					margin: '10px 15px 0 15px'
				});
				box.appendChild(footer);
			var span = document.createElement('span');
				Element.extend(span);
				span.setStyle({
					display: 'block',
					float: 'left',
					width: '95px',
					marginTop: '5px'
				});
				span.update('Accepted <br />Payment Types:');
				footer.appendChild(span);
			var mcLogo = document.createElement('img');
				Element.extend(mcLogo);
				mcLogo.src = '/images/payment-popup/logo-mastercard.gif';
				mcLogo.setStyle({marginTop:'5px'});
				footer.appendChild(mcLogo);
			var visaLogo = document.createElement('img');
				Element.extend(visaLogo);
				visaLogo.src = '/images/payment-popup/logo-visa.gif';
				visaLogo.setStyle({marginTop:'5px'});
				footer.appendChild(visaLogo);
			/*
			var amexLogo = document.createElement('img');
				Element.extend(amexLogo);
				amexLogo.src = '/images/payment-popup/logo-amex.gif';
				amexLogo.setStyle({marginTop:'5px;'});
				footer.appendChild(amexLogo);
			*/
			var dpsLogo = document.createElement('img');
				Element.extend(dpsLogo);
				dpsLogo.src = '/images/payment-popup/logo-payment-express.gif';
				dpsLogo.setStyle({
					float: 'right',
					margin: '5px 0px 0 0',
					cursor: 'pointer'
				});
				dpsLogo.observe('click', function() {
					window.open("http://www.paymentexpress.com/about/about_paymentexpress/privacy_policy.html", "Payment Express");
				});
				footer.appendChild(dpsLogo);
			return document.getElementsByTagName('body')[0].appendChild(box);
		},
		
		window: function() {
			if($('iFrameWindow')) return $('iFrameWindow');
			
			var iFrame = document.createElement('iFrame');
				Element.extend(iFrame);
				iFrame.id = 'iFrameWindow';
				iFrame.scrolling = 'no';
				iFrame.setStyle({
					width: '351px',
					height: '174px',
					border: 'none'
				});
			return this.box().select('.content')[0].appendChild(iFrame);
		}
	},
	
	process: function(socket, key) {
		// Display the page mask
		this.container.displayMask();
		
		// Get secure URI from provider
		this.getURI(socket, key);
	},
	
	getURI: function(socket, key) {
		// Init AJAX request
		new Ajax.Request(socket, {
			method: "post",
			parameters: {key: key},
			evalJSON: true,
			onSuccess: function(transport) {
				// Translate the JSON response
				var response = transport.responseJSON;
				
				if(response.valid == 1) {
					// Update window source
					this.container.displayWindow(response.URI);
				} else {
					alert('Script failure: '+response.message);
				}
			}.bind(this),
			onFailure: function() {
				alert('AJAX failure');
			}
		});
	}
});

var txn = new dpsSecure();