//twotes js

var Application = new Class({
		initialize: function()	{
			this.createQuoteEvents();
			this.createFilterEvents();
			this.createLoginEvents();
		},
		
		// Login Form
		createLoginEvents: function() {
			signinButton = $('signinSubmitButton');
			if(signinButton) {
				signinButton.addEvent('click', function(event) {
					event.stop();
					// Add loading indicator to the loginbox
					var loginForm = $('loginForm'); 
					loginForm.morph({opacity: 0});
					$('login').addClass('loading');
					loginDetails = loginForm.toQueryString();
					
					// Add my favorites link to views
					myFavoritesLink = new Element('a', {
							'class': 'userLink',
							'text': 'My Favorites',
							'href': '/utils/fav.php'+'?'+new Date().getTime()
					});
					
					myFavoritesLink.addEvent('click', function(event){
						event.stop();						
						$('twoteViewInner').set('html', '<span class=\"loadingIndicator\">Updating your favorites...</span>');
						var myFavoritesAjax = new Request({	
							method: 'get',  
							url:'/utils/fav.php',
							onSuccess: function(response) {
								$('twoteViewInner').set('html', response);
								this.createQuoteEvents();
							}.bind(this)
						}).send();
					}.bindWithEvent(this));
					
					// Add my favorites link to views
					signOutLink = new Element('a', {
							'class': 'userLink',
							'text': 'Sign out',
							'href': '/utils/logout.php'
					});
					
					// Logs the user in and populates the view with their favorites
					var loginAjax = new Request(
						{	
						method: 'get',  
						url:'utils/login.php?' + loginDetails,
						onComplete: function(response) {
							// Login Error
							if(response == "0") {
								loginForm.morph({opacity: 1});
								$('login').toggleClass('loading');
						
							// Invalid username or password
							} else if(response == "2") {
								loginForm.morph({opacity: 1});
								$('login').toggleClass('loading');
							
							// Successful login
							} else {										
								loginForm.set('html', 'Welcome, <strong>'+response+'</strong>');
								userName = response;
								loginForm.appendChild(myFavoritesLink);
								loginForm.appendChild(signOutLink);
								$('login').removeClass('loading');
								loginForm.morph({opacity: 1});
								$('twoteViewInner').set('html', '<span class=\"loadingIndicator\">Logged in. Reticulating splines...</span>');
								var getPage = new Request({	
									method: 'get',  
									url:'/utils/fav.php'+'?'+new Date().getTime(),
									onSuccess: function(response) {
										$('twoteViewInner').set('html', response);
										this.createQuoteEvents();
									}.bind(this)
								}).send();
							}
						}.bind(this)
					}).post(loginForm);
				}.bindWithEvent(this));
			}
		},
		
		// Quote Events
		createQuoteEvents: function() {
			quoteSelector = $$('.quote');
			
			
			// Quote Comment Events
			commentToggleSelector = $$('.quoteComments a');
			$each(commentToggleSelector, function(commentToggle) {
				commentToggle.addEvent('click', function(event){
					event.stop();
					quoteBox = commentToggle.parentNode.parentNode.parentNode;
					commentId = quoteBox.get('id');
					if($('comment'+commentId)) {
						commentBox = $('comment'+commentId);
						var commentSlider = new Fx.Slide(commentBox);
						commentSlider.toggle();
					} else {
						var quoteArea = commentToggle.parentNode.parentNode;
						var commentArea = new Element('div');
						var commentId = quoteBox.get('id');
						commentArea.set('id', 'comment'+ commentId);
						commentArea.set('class', 'commentArea');
						quoteArea.appendChild(commentArea);
						
						var commentBox = new Element('div');
						commentBox.addClass('commentBox');
						commentBox.set('id', 'commentBox'+commentId);
											
						var commentViewAjaxUrl = commentToggle.get('href').replace(/&h=1/, "");
						commentBox.set('html', 'loading...');
						commentBox.load(commentViewAjaxUrl);
					
						commentForm = new Element('div', {
							'class': 'commentForm', 
							'id': 'commentForm' + commentId
						});
					
						var commentFormTextBox = new Element('input', {
							'type': 'text',
							'class': 'commentFormTextBox',
							'id': 'commentFormTextBox'+ commentId
						});
						
						var commentSubmit = new Element('input', {
							'type': 'submit',
							'class': 'commentSubmit',
							'value': 'reply'
						});
					
						commentSubmit.addEvent('click', function(event){
							event.stop();
							var commentLoading = $('commentLoading' + commentId);
							commentLoading.setStyle('display', 'block');
							var commentValue = $('commentFormTextBox'+commentId).value;
								var addCommentsAjax = new Request({	
									method: 'post',
									url:'utils/addComment.php?id=' + commentId + '&u=' + userName + '&comment=' + commentValue,
									onComplete: function() {
										var refreshComments = new Request({	
										method: 'get',
										url: commentViewAjaxUrl,
										onComplete: function(response) {
											$('commentBox'+commentId).load(commentViewAjaxUrl);
										}.bind(this)
								}).send();	
							}.bind(this)
							}).send();
						});				
						
						// Create the loading indicator
						var commentLoading = new Element('div', {
							'class': 'commentLoading',
							'id': 'commentLoading'+commentId
						});
						
						// Add the comment form to the box if a user is logged in
						commentArea.appendChild(commentBox);
						if(userName == 'none') {
							} else {
								commentForm.appendChild(commentLoading);
								commentForm.appendChild(commentFormTextBox);
								commentForm.appendChild(commentSubmit);
								commentArea.appendChild(commentForm);
								commentArea.morph({opacity: 1});
						}
						
					}
				});
			});
			
			
			// Voting
			voteUp = $$('.voteUp');
			$each(voteUp, function(voteUpButton) {
				voteUpButton.addEvent('click', function(event){
					event.stop();
					voteAjaxUrl = voteUpButton.get('href').replace(/&h=1/, "");
					myHTMLRequest = new Request.HTML().get(voteAjaxUrl);
					voterBox = voteUpButton.parentNode;
					quoteBox = voteUpButton.parentNode.parentNode;
					var quoteBoxFx = new Fx.Morph(quoteBox, {duration: 1000, transition: Fx.Transitions.Sine.easeOut});
					var voterBoxFx = new Fx.Morph(voterBox, {duration: 1000, transition: Fx.Transitions.Sine.easeOut});
					quoteBoxFx.start({
						'background-color': '#e2ffe6'
					});
					voterBoxFx.start({
						'opacity': 0
					});
				});
			});
			
			voteDown = $$('.voteDown');
			$each(voteDown, function(voteDownButton) {
				voteDownButton.addEvent('click', function(event){
					event.stop();
					voteAjaxUrl = voteDownButton.get('href').replace(/&h=1/, "");
					myHTMLRequest = new Request.HTML().get(voteAjaxUrl);
					voterBox = voteDownButton.parentNode;
					quoteBox = voteDownButton.parentNode.parentNode;
					var quoteBoxFx = new Fx.Morph(quoteBox, {duration: 1000, transition: Fx.Transitions.Sine.easeOut});
					var voterBoxFx = new Fx.Morph(voterBox, {duration: 1000, transition: Fx.Transitions.Sine.easeOut});
					quoteBoxFx.start({
						'background-color': '#fff5f5',
						'height': '0',
						'opacity': 0
					});
					voterBoxFx.start({
						'display': 'none'
					});
				});
			});
			
		},
		
		createFilterEvents: function() {
			// Create the loading indicator
			filterBox = $('twoteFilters');
			filterLoading = new Element('div');
			filterLoading.set('id', 'filterLoading');
			filterLoading.addClass('filterLoading');
			filterBox.appendChild(filterLoading);
			
			// Latest Filter
			$('latestFilter').addEvent('click', function(event){
				event.stop();
				filterLoading.morph({opacity: 1});
				$('twoteViewInner').morph({opacity: 0});
				var getPage = new Request(
					{	
						method: 'get',  
						url:'utils/latest.php'+'?'+new Date().getTime(),
						onSuccess: function(response) {
							$('twoteViewInner').set('html', response);
							filterLoading.morph({opacity: 0});
							$('twoteViewInner').morph({opacity: 1});
							this.createQuoteEvents();
						}.bind(this)
				}).send();
			}.bindWithEvent(this));
			
			// Most Popular Filter
			$('mostPopularFilter').addEvent('click', function(event){
				event.stop();

				filterLoading.morph({opacity: 1});
				$('twoteViewInner').morph({opacity: 0});				
				var getPage = new Request(
					{	
						method: 'get',  
						url:'utils/twoteview.php'+'?'+new Date().getTime(),
						onSuccess: function(response) {
							$('twoteViewInner').set('html', response);
							filterLoading.morph({opacity: 0});
							$('twoteViewInner').morph({opacity: 1});
							this.createQuoteEvents();
						}.bind(this)
				}).send();
			}.bindWithEvent(this));
			
			// My Favorites Filter
			if($('myFavoritesLink')) {
				$('myFavoritesLink').addEvent('click', function(event){
					event.stop();
					filterLoading.morph({opacity: 1});
					$('twoteViewInner').morph({opacity: 0});

					var getPage = new Request(
					{	
						method: 'get',  
						url:'/utils/fav.php'+'?'+new Date().getTime(),
						onSuccess: function(response) {
							$('twoteViewInner').set('html', response);
							$('twoteViewInner').morph({opacity: 1});
							filterLoading.morph({opacity: 0});
							this.createQuoteEvents();
						}.bind(this)
				}).send();
				}.bindWithEvent(this));
			}
		}	
});