/*
FNDfilms.com jQuery source V1.0
written by Dave Kiss
http://www.davekiss.com

     _                                       _     ____                _       
  __| | ___   ___ _   _ _ __ ___   ___ _ __ | |_  |  _ \ ___  __ _  __| |_   _ 
 / _` |/ _ \ / __| | | | '_ ` _ \ / _ \ '_ \| __| | |_) / _ \/ _` |/ _` | | | |
| (_| | (_) | (__| |_| | | | | | |  __/ | | | |_ _|  _ <  __/ (_| | (_| | |_| |
 \__,_|\___/ \___|\__,_|_| |_| |_|\___|_| |_|\__(_)_| \_\___|\__,_|\__,_|\__, |
                                                                         |___/ 
*/


$(document).ready(function(){

	// Create the video selector, using the JQueryTools' "Scrollable" class
	$("#videoselector").scrollable({
		size: 4,
		items: '#items',
		hoverClass: 'hoveritem',
		activeClass: 'activeitem'
	});
	
	//grab the scrollable API for the movielist filter Callback function
	var api = $("#videoselector").scrollable();
	
	// Set Youtube ID for the initial video to display by grabbing the id attribute from the 
	//first video thumbnail image and append it to the container
	var initialVid = $(".thumbnailcontainer").children('img').attr("id");
	$("#mainVideoContent").append('<object id="youtube" type="application/x-shockwave-flash" style="width:640px; height:385px;" data="http://www.youtube.com/v/' + initialVid + '&hl=en_US&fs=1&hd=1"><param name="movie" value="http://www.youtube.com/v/' + initialVid + '&hl=en_US&fs=1&hd=1" /><param wmode="transparent"><\/param><\/object>');


	// Return comments for latest video on load	
	var initialVideo = $("#items").children('div:eq(0)').attr("id");
	var currentPage = $("#items").children('div:eq(0)').attr("id");
	$.ajax({
		url: 'php/paginate.php',
		type: 'POST',
		data: 'videoID=' + initialVideo + '&currentpage=1',
		success: function(html) {
				$('#commentsContainer').html(html);
				$("#videoid").attr("value", '' + initialVideo + '');
		}
	});
	
	// Add onclick function for each video item - load a new video when clicked and add style to "active" video
	// And send post data to switch to correct comments
	
	$(".thumbnailcontainer img").click(function() {
									
		var yt_vid = $(this).attr("id");
		
		$("#youtube").fadeOut(300, function() {
			//$("#mainContent").append('<img src="img/design/icons/loading.gif" alt="Currently Loading" id="loading" class="loading" />');
			$("#youtube").replaceWith('<object id="youtube" type="application/x-shockwave-flash" style="width:640px; height:385px; display:none;" data="http://www.youtube.com/v/' + yt_vid + '&hl=en_US&fs=1&hd=1"><param name="movie" value="http://www.youtube.com/v/' + yt_vid + '&hl=en_US&fs=1&hd=1" /><param wmode="transparent"><\/param><\/object>');
			/*$("#loading").fadeOut(500, function() {
				$(this).remove();
			});*/
			
			$('#youtube').fadeIn(1000);
		});
		
		
/*
  ____                                     _       
 / ___|___  _ __ ___  _ __ ___   ___ _ __ | |_ ___ 
| |   / _ \| '_ ` _ \| '_ ` _ \ / _ \ '_ \| __/ __|
| |__| (_) | | | | | | | | | | |  __/ | | | |_\__ \
 \____\___/|_| |_| |_|_| |_| |_|\___|_| |_|\__|___/
 
*/
                                                   		
		//Get #comments display attribute so we can apply the same attribute to the newly returned comments
		var showHideComments = $("#comments").attr("style");
		
		//Send POST data to PHP script to switch to correct comments
		
		//Select Thumbnail's second parent's ID attr on click
		var videoID = $(this).parents("div:eq(1)").attr("id");
			
		$.ajax({
			url: 'php/paginate.php',
			type: 'POST',
			data: 'videoID=' + videoID + '&currentpage=1',
			success: function(html) {
					$('#commentsContainer').html(html);
					$('#comments').attr("style", '' + showHideComments + '');
					$("#videoid").attr("value", '' + videoID + '');
			}
		});
		Recaptcha.reload();
	});
	
	//Show or Hide Comments
	$('#showHideComments').live('click', function() {
		if($("#addComment").is(':visible')){
			$(".commentsSwitch").animate({"marginLeft": "-=53px"}, 500);
			$("#comments, #addComment").fadeOut(300);
		} else {
			$(".commentsSwitch").animate({"marginLeft": "+=53px"}, 500);
			$("#comments, #addComment").fadeIn(300);
		};
	});

	
	
/*
  ____                                     _   
 / ___|___  _ __ ___  _ __ ___   ___ _ __ | |_ 
| |   / _ \| '_ ` _ \| '_ ` _ \ / _ \ '_ \| __|
| |__| (_) | | | | | | | | | | |  __/ | | | |_ 
 \____\___/|_| |_| |_|_| |_| |_|\___|_| |_|\__|
                                               
__     __    _ _     _       _             
\ \   / /_ _| (_) __| | __ _| |_ ___  _ __ 
 \ \ / / _` | | |/ _` |/ _` | __/ _ \| '__|
  \ V / (_| | | | (_| | (_| | || (_) | |    
   \_/ \__,_|_|_|\__,_|\__,_|\__\___/|_|   
   
*/
	
	// Charlimit
	$('#comment').limit('300','#charsLeft');
	// Validate the comments using the jQuery validate plugin
	
	$('#processComment').validate({
		debug: true,
		ignore: "#videoid",
		onkeyup: false,
		rules: {
     		name: {
     			required: true,
     			minlength: 2
     		},
     		email: {
       			required: true,
       			email: true
     		},
     		comment: "required",
     		recaptcha_response_field: "required"
   		},
   		errorLabelContainer: "#errorBox",
   		wrapper: "li",
   		highlight: function(element, errorClass) {
   			$(element).fadeOut(function() {
   				$(element).fadeIn()
   				$(element).css({ border:"1px dashed red"})
   			})
   		},
  		unhighlight: function(element, errorClass) {
   			$(element).css({ border:"1px dashed green"})
     	},
   		validClass: "success",
   		messages: {
   			name: {
   				required: "Hey, think you could enter your name?",
   				minlength: "Your name has gotta be longer than a letter!"
   			},
   			email: {
   				required: "We won't spam you, scout's honor.",
   				email: "Who are you trying to kid? Enter a real address!"
     		},
   			comment: {
   				required: "You mean to tell me you can't think of ANYTHING to say? :("
   			},
   			recaptcha_response_field: {
   				required: "Remember to prove you're human!"
   			}
   		},
   		
   		//If valid, Add Comment via AJAX
   		submitHandler: function(form) {
   			$('#addComment').append('<img src="img/design/icons/loading.gif" alt="Currently Loading" id="loadingComment" />');
		
			var name = $('#name').val();
			var email = $('#email').val();
			var comment = $('#comment').val();
			var recaptchaChallenge = $('#recaptcha_challenge_field').val();
			var recaptchaResponse = $('#recaptcha_response_field').val();
			var id = $('#videoid').attr("value");
			var userip = $('#userip').attr("value");
		
			$.ajax({
				url: 'processComment.php',
				type: 'POST',
				data: 'name=' + name + '&email=' + email + '&comment=' + comment + '&recaptchaChallenge=' + recaptchaChallenge + '&recaptchaResponse=' + recaptchaResponse + '&id=' + id + '&userip=' + userip,
				success: function(result) {
					$('#response').remove();
					if ((result == "The reCAPTCHA wasn't entered correctly. Go back and try it again.")){
						$('#errorBox').attr('style', '');
						Recaptcha.reload();
						$('#recaptcha_response_field').val("");
						$('#errorBox').append('<p id="response" style="color: red;">' + result + '<\/p>');
						$('#loadingComment').fadeOut(500, function(){
							$(this).remove();
						});
						return false;
					}
					else if ((result == "IP Flood")){
						$('#errorBox').attr('style', '');
						$('#errorBox').append('<p id="response" style="color: red;">You\'re not allowed to post so soon after your last comment.<\/p>');
						Recaptcha.reload();
						$('#recaptcha_response_field').val("");
						$('#loadingComment').fadeOut(500, function(){
							$(this).remove();
						});
						return false;
					}
					else if ((result == "Your comment is too long, please revise it!")){
						$('#errorBox').attr('style', '');
						$('#errorBox').append('<p id="response" style="color: red;">Your comment is too long, please revise it!<\/p>');
						Recaptcha.reload();
						$('#recaptcha_response_field').val("");
						$('#loadingComment').fadeOut(500, function(){
							$(this).remove();
						});
						return false;
					}					
					else {
						$('#errorBox').attr('style', '');
						$('#errorBox').append('<p id="response" style="color: red;">Comment Posted!<\/p>');
						setTimeout(function () {
							$('#response').fadeOut(function(){
								$(this).remove();
							});
						}, 1000);
						$('#loadingComment').fadeOut(500, function(){
							$(this).remove();
						});
				
						//Get #comments display attribute so we can apply the same attribute to the newly returned comments
						var showHideComments = $("#comments").attr("style");
		
						//Send POST data to PHP script to switch to last page of refreshed and correct comments
			
						$.ajax({
							url: 'php/paginate.php',
							type: 'POST',
							data: 'function=addComment&videoID=' + id,
							success: function(html) {
									$('#commentsContainer').html(html);
									Recaptcha.reload();
									$('#comments').attr("style", '' + showHideComments + '');
									$("#videoid").attr("value", '' + videoID + '');
							}
						});				

							
						$('.clear').val("");
						$('#recaptcha_response_field').val("");
					}
				}    
			});
				
			return false;
   		}
	});
	
/*
 _____ _           _           __  __            _      
|  ___(_)_ __   __| |   __ _  |  \/  | _____   _(_) ___ 
| |_  | | '_ \ / _` |  / _` | | |\/| |/ _ \ \ / / |/ _ \
|  _| | | | | | (_| | | (_| | | |  | | (_) \ V /| |  __/
|_|   |_|_| |_|\__,_|  \__,_| |_|  |_|\___/ \_/ |_|\___|

*/
                                                        

	// Define function to filter videos based on query
	function filter(item, query) {  
		query =   $.trim(query); //trim white space
		query = query.replace(/ /gi, '|'); //add OR for regex query
		
		$(".item").each(function() {
			($(this).text().search(new RegExp(query, "i")) < 0) ? $(this).hide().removeClass('visible') : $(this).show().addClass('visible');
		});  
	}
	
	// Attach Filter field to Video List
	
	//default each row to visible  
	$('.item').addClass('visible');
	
	$('#filter').keyup(function(event) {
	
		//if esc is pressed or nothing is entered
		//if esc is pressed we want to clear the value of search box  
		if (event.keyCode == 27 || $(this).val() == '') {
			$(this).val('');  
			//we want each video to be visible because if nothing is entered then all videos are matched.  
			$('.item').removeClass('visible').show().addClass('visible');  
		}  

		//if there is text, lets filter. but first, we'll move the scrollable div to the beginning of the list
		else {
			api.begin(200);
			filter('.item', $(this).val());
		} 
	});
	

/*
                   _             _   _             
 _ __   __ _  __ _(_)_ __   __ _| |_(_) ___  _ __  
| '_ \ / _` |/ _` | | '_ \ / _` | __| |/ _ \| '_ \ 
| |_) | (_| | (_| | | | | | (_| | |_| | (_) | | | |
| .__/ \__,_|\__, |_|_| |_|\__,_|\__|_|\___/|_| |_|
|_|          |___/                                 

*/
	// Send POST data to switch page using jquery's livequery 
	$('a.page').livequery('click', function() {
	
		//Get #comments display attribute so we can apply the same attribute to the newly returned comments
		var showHideComments = $("#comments").attr("style");
		
		var videoID = $("#items").children('div:eq(0)').attr("id");
		var currentPage = $(this).attr("id");
		
		$.ajax({
			url: 'php/paginate.php',
			type: 'POST',
			data: 'videoID=' + videoID + '&currentpage=' + currentPage,
			success: function(html) {
					$('#commentsContainer').html(html);
					$('#comments').attr("style", '' + showHideComments + '');
					$("#videoid").attr("value", '' + videoID + '');
			}
		});
		
		return false;
	});
});