// JavaScript Document
$(document).ready(function(){
	
	$('.posts').mouseenter(function(){
		var this_div_ID = $(this).attr('id');
		var excerpt = '#excerpt-'+this_div_ID;
		
		class_color = $('#visited-'+ this_div_ID).css('background-color');
		
		// update the CSS for the containing div
		$(this).css ('cursor', 'pointer');
		$('#visited-'+this_div_ID).addClass ('posts_visited');
		$('#visited-'+this_div_ID).css('background', 'grey');
		
		// now lets display the excerpt
		if ($(excerpt).hasClass('hp_excerpt')){
			//$(excerpt).delay(100).show(300);
			$(excerpt).show();
		}

		
		$(document).bind('mousemove', function(e){
		$(excerpt).css({
		   left:  e.pageX,
		   top:   e.pageY
		});
	});
	});
	
	
	$('.posts').mouseleave(function(){
		var this_div_ID = $(this).attr('id');
		var excerpt = '#excerpt-'+this_div_ID;

		$('#visited-'+this_div_ID).css('background', class_color);	

	
		// now lets hide the excerpt
		if ($(excerpt).hasClass('hp_excerpt')){
			$(excerpt).hide(); 
		}
    });
	/*
	$('.posts').mouseover(function(){
		// update the CSS for the containing div
		$(this).css ('cursor', 'pointer');
		$(this).addClass ('dropshadow raised-right');
		
		// now lets display the excerpt
		var this_div_ID = $(this).attr('id');
		var excerpt = '#excerpt-'+this_div_ID;
		if ($(excerpt).hasClass('hp_excerpt')){
			$(excerpt).show(300);
		}
	});
	
	
	$('.posts').mouseleave(function(){
		$(this).removeClass ('dropshadow raised-right');
		
		// now lets hide the excerpt
		var this_div_ID = $(this).attr('id');
		var excerpt = '#excerpt-'+this_div_ID;
		if ($(excerpt).hasClass('hp_excerpt')){
			$(excerpt).hide(300); 
		}
    });
	*/
	
	// Things that need to happen when a user clicks on the containing div
	$('.posts').click (function(){
		//store the href's value for use later
		var href = $(this).find('a:first').attr('href');
		
		// Update the cookie set to mark this href as viewed. 
		// We need to do this for styling purposes as Chrome and Firefox done support :visited psuedo classes anymore
		//$.cookie("site", href, { expires: 365 }); // this is the basic jQuery plugin way. We want arrays so use the below code
		var list = new cookieList("visited_links");
		var list_links = list.items();
		var str_links = list_links.toString();
	
		visited_links = str_links.split(','); // make an array from the comma delimited list
		if (jQuery.inArray(href, visited_links)){ // if the link hasnt been added to the cookie already then lets add it
			list.add(href);
		}
		
		// Change the page the user is on to the location in the href contained in this div
		window.location = href;	
		
	});
	
	
	// Here we want to get the data from the cookie and update any links on the page that have been visited.
	var list = new cookieList("visited_links");
	var list_links = list.items(); // get the list of items from the cookie
	var str_links = list_links.toString(); // convert the object to a string that we can parse
	
	visited_links = str_links.split(','); // make an array from the comma delimited list
	
	// loop through the list of visited_links and update the containing divs
	for (var i = 0; i < visited_links.length; i++){
		
		// ok because this is so funky and specific I need to explain it for future step by step
		/*
		*	$("[href='#']") select all elements with an href value equal to "#".
		*	So here I am saying select any href with a value equal to the value pulled from the cookie AND under a .posts class
		*	The parent of the href found is really an <H2> in this case so we need the parent > parent
		*	so .parent().parent() refers to the posts div that holds all the data for the listed post
		*/
		//$(".posts h2 [href='" + visited_links[i] + "']").parent().parent().addClass ('posts_visited');
		var this_div_ID = $(".posts [href='" + visited_links[i] + "']").parent().attr('id');
		var this_div = '#'+this_div_ID;
		var excerpt = '#excerpt-'+this_div_ID;
		
		$(this_div).addClass ('posts_visited');
		$(excerpt).css('display', 'none');
		
	}

	
});