var CONFIG = {}, GLOBAL = {};
var headerSocial, clip, taf;

var ie = Browser.ie;

window.addEvent("load",function() {
	/*		
	setTimeout(function() {
		ZeroClipboard.setMoviePath('inc/swf/ZeroClipboard.swf');
		clip = new ZeroClipboard.Client();
		
		clip.addEventListener('click',function() {
			clip.setText(document.getElementById('copy').get('href'));
		});
		
		clip.addEventListener('complete',function(client,text) {
			alert('copied: ' + text);
		});
		
		clip.glue('copy');
	}, 2000);
	*/
});

window.addEvent('domready', function() {
	
	var inputs = $(document.body).getElements('input, textarea');
	inputs.each(function(el, i) {
		var value = el.get('value');
		el.addEvents({
			'focus': function(e) {
				if(el.get('value') === value) {
					el.set('value', '');	
				}
			}.bind(this),
			'blur': function(e) {
				if(el.get('value') === '') {
					el.set('value', value);	
				}
			}.bind(this)
		});
	}.bind(this));
	
	headerSocial = new SocialShare({
		toggler: 			$('header').getElement('a.share'),
		shareLinks: 		$('social-dropdown').getElements('a'),
		dropdown: 			$('social-dropdown'),
		tellafriend: 		$('tellafriend'),
		closeButton: 		$('tellafriend').getElement('a.btn-close'),
		form: 				$('tellafriend').getElement('form'),
		result: 			$('result'),
		output: 			$('output'),
		preview:			$('preview'),
		friendname:			$$('span.friendname')[0],
		message:			$$('span.message')[0],
		back:				$$('#tellafriend a.back')[0]
	});
	
	if($('ecards')) {
		ecard = new Ecard({
			container: 		$('ecards'),
			wrapper: 		$('ecards').getElement('.stepwrapper'),
			steps: 			$('ecards').getElements('.stepwrapper .step'),
			form: 			$('ecards').getElement('form'),
			ecards: 		$('ecards').getElements('.stepwrapper .step ul.ecards li'),
			backButton: 	$('ecards').getElement('a.back'),
			previewButton: 	$('ecards').getElement('a.preview'),
			resetButton: 	$('ecards').getElement('a.reset'),
			sendButton: 	$('ecards').getElement('a.submit')
		});
	}
	
	JShoverAnimations();
	new centerTextVertical('#ecards .stepwrapper .step ul.ecards li span.title p', 18, 72, 66, 66);
	new centerTextVertical('article.post header h3', 18, 8, 0, 0);

	new Form.Validator($('emailafriend'));
});

var	setThreeDots = new Class({
	p: null,
	
	initialize:function(p, maxChars){
		this.p = $$(p);
		this.p.each(function(el, i){
			var text = el.get('text');
			var newText = '';
			var nChars = el.get('text').length;
			
			if(nChars >= maxChars){
				newText = text.substr(0, maxChars) + '...';
				el.set('html', newText);
			}
		});	
	}
});

var	centerTextVertical = new Class({
	p: null,
	
	initialize:function(p, lineHeight, oneLine, twoLine, threeLine){
		this.p = $$(p);		
		this.p.each(function(el, i){
			var textHeight = el.getHeight();
			
			if(textHeight > lineHeight && textHeight <= lineHeight*2){
				el.setStyles({
					'height': lineHeight * 2,
					'padding-top': twoLine + 'px'					
				});
			}
			if(textHeight == lineHeight){
				el.setStyles({
					'height': lineHeight,
					'padding-top': oneLine + 'px'					
				});
			}else {
				if(textHeight >= 39){
					el.setStyles({
						'height': lineHeight * 3,
						'max-height': lineHeight * 3,
						'padding-top': threeLine + 'px'					
					});	
				}
			}
		});	
	}
});

var SocialShare = new Class({
	options: {
		toggler: 		null,
		shareLinks: 	null,
		dropdown: 		null,
		tellafriend: 	null,
		closeButton: 	null,
		form: 			null,
		result: 		null,
		output:			null,
		friendname: 	null,
		message: 		null,
		preview:		null,
		back:			null
	},
	Implements: Options,
	
	initialize: function(options) {
		this.setOptions(options);
		this.options.visible = false;
		this.options.hover = false;
		
		this.options.dropdown.fade('hide');
		this.options.tellafriend.fade('hide');
		this.options.resultFx = new Fx.Tween(this.options.result);
		
		this.options.output.setStyle('display', 'none');
		
		this.options.outputFx = new Fx.Morph(this.options.output, {'duration': 200});
		this.options.dropdownFx = new Fx.Morph(this.options.dropdown, {
			'duration': 200, 
			'link': 'cancel',
			onComplete: function() {
				if(this.options.dropdown.getStyle('opacity') == 0) {
					this.options.dropdown.setStyle('display', 'none');
				}
			}.bind(this)
		});
		
		this.options.tellafriendFx = new Fx.Morph(this.options.tellafriend, {
			'duration': 200, 
			'link': 'cancel',
			onComplete: function() {
				if(this.options.tellafriend.getStyle('opacity') == 0) {
					this.options.tellafriend.setStyle('display', 'none');
					this.options.form.setStyle('height', 'auto');
					this.options.result.setStyle('height', 0);
				}
			}.bind(this)
		});
		
		this.options.formFx = new Fx.Tween(this.options.form, {
			'duration': 200, 
			'link': 'cancel',
			onComplete: function() {
				this.options.resultFx.start('height', 100);
			}.bind(this)
		});
		
		this.addEvents();
	},
	
	addEvents: function() {
		this.options.toggler.addEvent('click', function(e) {
			e.stop();
			(this.options.visible) ? this.hide() : this.show();
		}.bind(this));
		
		this.options.shareLinks.each(function(el) {
			el.addEvent('click', function(e) {
				if(el.getParent('li').hasClass('copy')) {
					e.stop();
					// do copy
				} else if(el.getParent('li').hasClass('email')) {
					e.stop();
					this.hide();
					this.showOverlayer();
					this.hideOutput();
				} else {
					this.hide();
				}
			}.bind(this));
			
			this.options.dropdown.addEvent('mouseleave', function(e) {
				this.hide();
			}.bind(this));
			
			this.options.closeButton.addEvent('click', function(e) {
				e.stop();
				this.hideOverlayer();
				this.emptyFields();
				this.hideOutput();	
			}.bind(this));
			
		}.bind(this));
			
		this.options.form.set('send', {
			onComplete: function(response){
				this.options.formFx.start('height', 0);
				this.hideOutput();
			}.bind(this)
		});
		
		this.options.preview.addEvent('click', function(e){
			e.stop();
			this.checkFields();
		}.bind(this));
		
		this.options.back.addEvent('click', function(e){
			e.stop();
			this.hideOutput();
			this.showOverlayer();
		}.bind(this));
	},
	
	show: function() {
		this.options.visible = true;
		if(ie) {
			this.options.dropdown.setStyles({
				'display': 'block',
				'opacity': 1
			});
		} else {
			this.options.dropdownFx.start({
				'display': 'block',
				'opacity': 1
			});
		}
	},
	
	hide: function() {
		this.options.visible = false;
		if(ie) {
			this.options.dropdown.setStyles({
				'display': 'none',
				'opacity': 0
			});
		} else {
			this.options.dropdownFx.start({
				'opacity': 0
			});
		}
	},
	
	showOutput:function(){
		this.options.form.getElement('#form-wrap').setStyle('display', 'none');
		this.options.outputFx.start({'display': 'block','opacity': 1});	
		this.options.submit = new Element('button').inject(this.options.output, 'after');
			
		this.options.submit.addEvent('click', function(e){
			e.stop();
			this.options.form.send();
		}.bind(this));
		
		this.setEmailText();
	},
	
	hideOutput:function(){
		this.options.output.setStyle('display', 'none');
		if(this.options.submit){
			this.options.submit.dispose();
		}	
	},
	
	showOverlayer: function() {
		if(ie) {
			this.options.tellafriend.setStyles({
				'display': 'block',
				'margin-top': 0,
				'opacity': 1
			});
		} else {
			this.options.tellafriendFx.start({
				'display': 'block',
				'margin-top': 0,
				'opacity': 1
			});
		}
		this.options.form.getElement('#form-wrap').setStyle('display', 'block');
	},
	
	hideOverlayer: function() {
		if(ie) {
			this.options.tellafriend.setStyles({
				'display': 'none',
				'opacity': 0
			});
		} else {
			this.options.tellafriendFx.start({
				'margin-top': -20,
				'opacity': 0
			});		
		}
	},
	
	checkFields: function() {
		new Form.Validator($('emailafriend'));
		var blnValid = true;

		var formData = this.options.form.getElements('input[type=text], textarea');
		formData.each(function(el, i) {
			if(el.get('value') == '' || el.hasClass('validation-failed')) {
				blnValid = false;
				el.addClass('error');
				if(el.getNext('.errorMessage')){
					el.getNext('.errorMessage').setStyle('display', 'block');
				}
			} else {
				el.removeClass('error');
				if(el.getNext('.errorMessage')){
					el.getNext('.errorMessage').setStyle('display', 'none');
				}				
			}
		}.bind(this));
				
		if(blnValid) {
			this.showOutput();
		}
	},	
	
	setEmailText: function() {
		this.options.friendname.set('text', 'Beste ' + $$('input#name_friend')[0].get('value') + ',');
		this.options.message.set('text', $$('textarea')[0].get('value'));
				
		new setThreeDots('#tellafriend form #output span.message', 600);
	},
	
	emptyFields:function(){
		var formData = this.options.form.getElements('input[type=text], textarea');	
		formData.each(function(el, i) {
			el.set('value', '');
		});		
	}
});

var Ecard = new Class({
	options: {
		container: 			null,
		wrapper: 			null,
		steps: 				null,
		form: 				null,
		ecards: 			null,
		backButton: 		null,
		previewButton: 		null,
		resetbutton: 		null,
		sendButton: 		null
	},
	Implements: Options,
	
	initialize: function(options) {
		this.setOptions(options);
		
		this.options.active = 0;
		this.options.slideFx = new Fx.Scroll(this.options.container);
		
		this.addEvents();
	},
	
	addEvents: function() {
		this.options.ecards.each(function(el, i) {
			var titleFx = new Fx.Tween(el.getElement('.title'), {'duration': 200, 'link': 'cancel'});
			el.addEvents({
				'mouseenter': function(e) {
					titleFx.start('height', 168);
				}.bind(this),
				'mouseleave': function(e) {
					titleFx.start('height', 0);
				}.bind(this),
				'click': function(e) {
					e.stop();
					++this.options.active;
					this.slide();
					this.selectCard(el.get('data-card'), el.get('data-preview'));
				}.bind(this)
			});
			
			el.getElement('.title').addEvent('mouseleave', function(e) {
				titleFx.start('height', 0);
			}.bind(this));
		}.bind(this));
				
		this.options.backButton.addEvent('click', function(e) {
			e.stop();
			this.options.active = 0;
			this.slide();
		}.bind(this));
		
		this.options.previewButton.addEvent('click', function(e) {
			e.stop();
			this.checkFields();
		}.bind(this));
		
		this.options.resetButton.addEvent('click', function(e) {
			e.stop();
			this.options.active = 0;
			this.slide();
		}.bind(this));
		
		this.options.form.set('send', {
			onComplete: function(response){
				++this.options.active;
				this.slide();
			}.bind(this)
		});
		
		this.options.sendButton.addEvent('click', function(e) {
			e.stop();
			this.options.form.send();
		}.bind(this));
		
		var formData = this.options.steps.getElements('input[type=text], textarea');
		formData.each(function(el, i) {
			el.addEvent('click', function(e){
				e.stop();
				if(this.hasClass('error')){
					this.removeClass('error');
				}
			});
		});		
	},
	
	slide: function() {
		this.options.slideFx.toElement(this.options.steps[this.options.active]);	
	},
	
	selectCard: function(card, preview) {
		this.options.card = card;
		this.options.wrapper.getElement('input[name=card]').set('value', card);
		$('cardpreview').setStyle('background-image', 'url(inc/images/ecards/' + preview + ')');
	},
	
	checkFields: function() {
		var blnValid = true;
		var formData = this.options.steps[this.options.active].getElements('input[type=text], textarea');
		formData.each(function(el, i) {
			if(el.get('value') == '' || el.get('value') == 'Jouw bericht' || el.get('value') == 'Jouw naam' || el.get('value') == 'Jouw e-mailadres' || el.get('value') == 'Naam van je vriend(in)' || el.get('value') == 'E-mailadres van je vriend(in)') {
				blnValid = false;
				el.addClass('error');
			} else {
				el.removeClass('error');
			}
		}.bind(this));
		
		if(blnValid) {
			this.setCardText();
			++this.options.active;
			this.slide();
		}
	},
	
	setCardText: function() {
		$('cardText').set('html', this.options.wrapper.getElement('textarea[name=message]').get('value'));
		$('cardVisual').set('html', '<img src="inc/images/ecards/ecardpreviews/' + this.options.card + '.png " />');
		$('cardVisual').set('html', '<img src="inc/images/ecards/ecardpreviews/' + this.options.card + '.png " />');
		$('finalcard').set('src', 'inc/images/ecards/ecardpreviews/small/' + this.options.card + '.png');
	}
});

function JShoverAnimations(){
	if($$('a.animate')){
		$$('a.animate').each(function(el, i){
			el.addEvents({
				mouseenter: function(){
					if(this.getParent('.news')){
						this.getParent('.news').setStyle('background-position', '-50px 0px');
						this.getPrevious('p').getChildren('.quote')[0].setStyle('background-position', '-21px 0px');				
					}
					if(this.getParent('.view-magazine')){
						this.getParent('.view-magazine').setStyle('background-position', '-154px 0px');			
					}
					if(this.getNext('.visual-magazine')){
						this.getNext('.visual-magazine').setStyles({'background-position': 'right 0px', 'top':'-163px'});	
					}
				},
				mouseleave:function(){
					if(this.getParent('.news')){
						this.getParent('.news').setStyle('background-position', '0px 0px');	
						this.getPrevious('p').getChildren('.quote')[0].setStyle('background-position', '0px 0px');	
					}
					if(this.getParent('.view-magazine')){
						this.getParent('.view-magazine').setStyle('background-position', '0px 0px');
					}
					if(this.getNext('.visual-magazine')){
						this.getNext('.visual-magazine').setStyles({'background-position': '0px 0px', 'top': '-150px'});
					}
				}	
			});
		}.bind(this));
	}	
}


// Element Implements
Element.implement(
{
	hasEvent: function(eventType,fn)
	{
		var myEvents = this.retrieve('events');
		return myEvents && myEvents[eventType] && (fn == undefined || myEvents[eventType].keys.contains(fn));
	},
	show: function()
	{
		this.setStyle('display','block');
	},
	inline: function()
	{
		this.setStyle('display','inline');
	},
	hide: function()
	{
		this.setStyle('display','none');
	}
});