var Flip =  new Class({
	initialize: function(element) {
		var obj = this;
		
		// Get divs
		this.flip1 = element.getElement('div.flip');
		this.flip2 = this.flip1.getNext('div');
		this.wrap = element;
		
		// Set direction
		if ($chk(this.wrap.getParent('div.footer'))) this.dir = 'y'; // Up & down
		else this.dir = 'x'; // Left & right
		
		// Webkit (Safari or Chrome)
		if (true==false) {
			// Set style to promo2
			if (this.dir=='x') this.flip2.setStyles({'-webkit-transform': 'rotateY(180deg)', 'display': 'none'});
			else this.flip2.setStyles({'-webkit-transform': 'rotateX(180deg)', 'display': 'none'});
			// Click event
			this.flip1.addEvent('click', function(e) {
				e.stop();
				// Perspective
				$(document.body).getElement('div.content').setStyle('-webkit-perspective', '1000');
				// Enable form
				if ($chk(obj.wrap.getElement('form'))) disableForm(obj.wrap.getElement('form'), true);
				// Flip
				obj.flip1.fireEvent('mouseleave');
				obj.wrap.addClass('flip');
				// Reset timer to flip back
				obj.sec = 0;
				(function() {
					obj.flip1.setStyle('display', 'none');
					obj.flip2.setStyle('display', 'block');
				}).delay(250);
			});
			
		// Other browsers
		} else {
			// Set proper styles
			this.wrap.setStyle('overflow', 'hidden');
			if (this.dir=='x') this.flip2.setStyles({'left': 222, 'z-index': 5});
			else {
				this.flip2.setStyles({'top': 115, 'z-index': 5});
				this.flip1.setStyle('top', 3);
			}
			// Click event
			this.flip1.addEvent('click', function(e) {
				e.stop();
				// Enable form
				disableForm(obj.flip2.getElement('form'), true);
				// Slide
				obj.sec = 0;
				obj.wrap.addClass('flip');
				if (obj.dir=='x') {
					obj.flip1.fireEvent('mouseleave').setStyle('left', -3);
					obj.wrap.setStyles({'width': 216, 'left': 730});
					new Fx.Tween(obj.flip1).start('left', -210);
					new Fx.Tween(obj.flip2).start('left', [210, 0]); 
				} else {
					new Fx.Tween(obj.flip1).start('top', -112);
					new Fx.Tween(obj.flip2).start('top', 3);
				}
			});
		}
		// Start timer to flip
		this.sec = 0;
		this.flip2.addEvent('mousedown', function() { this.sec = 0; });
		//this.reflip.periodical(1000, this);
		
		// Form
		if ($chk(this.wrap.getElement('form'))) this.form();
	},
	
	// Return to previous flip
	reflip: function() {
		var obj = this;
		// Add seconds if needed
		if (!$chk(this.flip2.getElement('input[name*=email]')) || this.flip2.getElement('input[name*=email]').retrieve('focus')!=true) this.sec++;
		else this.sec = 0;
		
		// Flip back after 01sec and if it's flipped
		if (this.sec>=8 && this.wrap.hasClass('flip')) {
			// Reset timer
			this.sec = 0;
			// Destroy error bubble if exist
			if ($chk($(document.body).getElement('ul.errorsubscribe'))) $(document.body).getElement('ul.errorsubscribe').destroy();
			// Webkit flip back
			if (true==false) {
				this.wrap.removeClass('flip');
				(function() {
					obj.flip1.setStyle('display', 'block');
					obj.flip2.setStyle('display', 'none');
				}).delay(250);
				
				(function() { $(document.body).getElement('div.content').setStyle('-webkit-perspective', ''); }).delay(500);
			// Other browser flip
			} else {
				this.wrap.removeClass('flip');
				if (obj.dir=='x') {
					new Fx.Tween(this.flip1, {onComplete: function() { obj.flip1.setStyle('left', 6); }}).start('left', -3);
					new Fx.Tween(this.flip2, {onComplete: function() {
						obj.wrap.setStyles({'width': 219, 'left': 724});
					}}).start('left', 222);
				} else {
					new Fx.Tween(this.flip1).start('top', 3);
					new Fx.Tween(this.flip2).start('top', 115);
				}
			}
			// Disable form
			if ($chk(this.wrap.getElement('form'))) disableForm(this.wrap.getElement('form'));
		}
	},
	
	// Subscribe form
	form: function() {
		var form = this.wrap.getElement('form');
		// Disable form
		disableForm(form);
		// Set submit position
		form.getElement('input[type=submit]').setStyle('left', '-10px');
		// Prepare send event
		form.set('send', {url: '/sync'+form.get('action')+'?lang='+language, onSuccess: function(response) {
			var response = JSON.decode(response);
			// Show error
			if ($defined(response.errors)) {
				if (!$chk($(document.body).getElement('ul.errorsubscribe'))) var ul = new Element('ul', {'class': 'errorsubscribe'}).inject(form.getParent('div.wrap'), 'after');
				else var ul = $(document.body).getElement('ul.errorsubscribe').empty();
				// IE6
				if (Browser.Engine.trident && Browser.Engine.version==4)
					ul.setStyle('background-image', 'url(\'/images/elements/promos/errors.gif\')');
				$each(response.errors.split(','), function(error) { if (error!='') new Element('li', {'html': error}).inject(ul); });
			// Show success
			} else {
				// Destroy error bubble if exist
				if ($chk($(document.body).getElement('ul.errorsubscribe'))) $(document.body).getElement('ul.errorsubscribe').destroy();
				
				// Create success banner
				var p = new Element('p', {'class': 'success', 'html': '&nbsp'}).inject(form.getParent('div'), 'top');
				// Change background if in IE6
				if (Browser.Engine.trident && Browser.Engine.version==4)
					p.setStyle('background-image', 'url(\'/images/elements/promos/thankyou.gif\')');
					
				// Show registered e-mail
				new Element('p', {'html': response.success, 'styles': { 'text-align': 'center', 'margin-top': 16 }}).replaces(form);
			}
		}});
	}
});

window.addEvent('domready', function() {
	$each($(document.body).getElements('div.wrap'), function(wrap, index) {
		new Flip(wrap);
	});
});