// JavaScript Document
// Master script file for /blog/
// Variable 't' may be global (?) make sure it is only used for providing Ajax calls for post-previews, Task D

$(document).ready(function(){
	 var t = null; //used for setting/clearing timeout functions in Task D
	
	 //Task A: Comment Form Validation
     $('div#commentForm form').submit(function(){
		   $('span#wrongAnswer').remove();
		   $('div#commentForm p#errorMsg').remove();//Remove if present so it is not repeated for each call to the submit handler
		   $('p.cmMsg').remove();//For completeness on the rare times its present
		   var invalid = false;//Assume valid data each time
          $(':input[name=cmName],:input[name=cmEmail],:input[name=cmComment]').each(function(i){
			   var label = $(this).attr('name').substring(2) + " ";
			   $(this).prev().html(label);
		       var value = jQuery.trim($(this).val());
			   if(value == "")
			   {
				   if(label.indexOf("Email") != -1) $(this).prev().append('<span>* Required, never used</span>');
				   else $(this).prev().append('<span>* Required</span>');
				   invalid = true;
			   }
			   else if($(this).attr('name') == "cmEmail")
			   {
				   if(value.indexOf('@') == -1 || value.indexOf('.') == -1)
				   {
					   $(this).prev().append('<span>* Invalid email</span>');
					   invalid = true;
				   }
			   }
		  });//end each handler
		  if(invalid) 
		  {
			  $('div#commentForm form').before("<p id='errorMsg' class='errorMsg'>* Your comment had the following error(s)</p>");
			  return false;
		  }
		  else return true;
	});//end submit handler
	//END TASK A*************************************************
	
	//Task B: Toggle Code View
	$('pre.code').before("<p class='toggleCodeView'><a href='#'>Toggle Code View</a></p>"); //This makes p.toggleCodeView the previous sibling to pre.code
	$('p.toggleCodeView a').toggle(
		function()
		{
		  var pre = $(this).parent().next(); //next() grabs only the very next sibling, not all of them. This is key to making each code block have distinct behavior.
		  pre.css({overflow: "hidden", paddingLeft: "0"});
		  pre.children(':odd').toggleClass('striped'); //pre's children are <code> elements
		  pre.children().each(function(i){
			   $(this).prepend("<span class='rowNum'>" + (i + 1) + ".</span>");
		  });//end each() handler 
		  return false;
		},//end FIRST CLICK handler
		function()
		{   
		  var pre = $(this).parent().next();
		  pre.css({overflow: "auto", paddingLeft: "4%"});
		  pre.children().removeClass('striped');
		  pre.children().children('span.rowNum').remove(); //children().children() accesses the <span> elements within each <code> element. I've filtered the selection, however.
		  return false;
		}//end SECOND CLICK handler
	);//end toggle() handler
	$('p.toggleCodeView a').trigger('click');
	//END TASK B**************************************************
	
	//Task C:  Ajax call to query AWS for "Recommended Reading" books
	$('div#reading a').click(function(event){
        if($('div#bookDesc'))
		{
		  $('div#bookDesc').remove();
		}
		var offset = $(this).offset();
		var href = $(this).attr('href');
		var isbn = href.split('?')[1].split('=')[1];
		$('<div id="bookDesc"></div>')
		.html('<dl><div></div></dl>')//create this for the loading gif
		.appendTo('body')
		.css({
				left: offset.left - $('div#bookDesc').innerWidth(),
				top: offset.top - $('div#bookDesc').innerHeight()
			});
	     $.ajax({
				url: '/blog/Book-Details.php',
				type: 'GET',
				data: {book: isbn, ajax: true},
				dataType: 'html',
				cache: false, //Prevent IE aggressive caching
				success: function(data) {
					$('div#bookDesc')
					.html(data)
					.css({
						   left: offset.left - $('div#bookDesc').innerWidth(),
						   top: offset.top - $('div#bookDesc').innerHeight()
						 });
				    $('<span>x</span>')
					.click(function(event){
						  $(this).remove();
						  $('div#bookDesc').remove();
					})
					.hover(
						   function(event){$(this).css({color: '#000', border: '1px solid #690'})},
						   function(event){$(this).css({color: '#690', border: '1px solid #000'})}
						  )
					.appendTo('div#bookDesc div')
					.css({
						   position: 'absolute',
						   left: $('div#bookDesc div').innerWidth() - 25,
						   top: $('div#bookDesc div').innerHeight() - 40,
						   lineHeight: '10px',
						   color: '#690',
						   cursor: 'pointer',
						   fontWeight: 'bold',
						   fontSize: '14px',
						   padding: '2px',
						   border: 'solid 1px #000'
						 });
				}//end success
			});//end ajax
		 return false;
	 });//end click handler
	//End Task C*******************************************************
	
	//Task D: Ajax call to DB for providing a "Recent Posts" preview (var 't' is used for this functionality)
     $("div#rp li a").hover(
		   function(event) //mouse enter phase
		   {
			   $('div.postPreview').remove();
			   var href = $(this).attr('href');
			   var offset = $(this).offset();
			   $.ajax({
				   url: href,
				   type: 'GET',
				   data: {ajax: true}, //parameter string that processing php script uses. decides between displaying preview vs page.
				   cache: false, //prevent browser from caching page, hello IE
				   dataType: 'html',
				   success: function(data){
					   $("<div class='postPreview'></div>")
					   .html(data)
					   .appendTo("body")
					   .css({
							  left: offset.left - 320, /* true width 316px : 300 + padding */
							  top:  offset.top
						   });
				   },//end success handler
				   error: function(xhr){
					   $("<div class='postPreview'></div>")
					   .html('Error: ' + xhr.status + ' ; ' + xhr.statusText)
					   .appendTo("body")
					   .css({
							  left: offset.left - 320, /* true width 316px : 300 + padding */
							  top:  offset.top
						   });
				   }//end error handler
			   });//end ajax handler
			   if(t) {clearTimeout(t);} //used 'if' so an error isn't thrown on very first hover event, i.e. before mouse leave phase is triggered the first time
		   },
		   function(event) // mouse leave phase
		   {
			  t = setTimeout(function(){
			      $("div.postPreview").fadeOut(1000,function(){$(this).remove()});
			 },500);
		   }
	 );//end hover event handler
	 //End Task D**********************************************************
	 
});//end dom ready handler