// JavaScript Document

// Allows any dynamic styles to be added right away referencing the 
$('html').addClass('js');


jQuery(document).ready(function($){
	
	if($('.star-module').length > 0)
	{
		// -- if javascript is enabled replace change the size of the image
		
		// -- Loop through the images and change the width 
		$('.js .star-module img').each(function(){
		    $(this).attr('src', $(this).attr('src').replace('&w=200', '&w=95'));
		});
		
		// - add more info div to .star-module
		$('<div/>').attr('class', 'more-info').html('More Info').appendTo('.js .star-module');
		
		// *** ---- begin build speech bubble ---- ***
		
		var title = $('.js .star-module h2');
		
		$('.js .mod-bd').wrapInner('<div class="bub-body">').wrapInner('<blockquote>'); // wrap blockquote around content
		$('<span>').attr('class', 'arrowLeft').appendTo('.mod-bd blockquote'); // -- add arrow
		$('<h4>').prependTo('.js .bub-body'); // add h4 to the bubble
		$('<div>').attr('class', 'close').html('Close').appendTo('.bub-body');
		
		// -- more info hover function
		$('.js .more-info').hover(function(){
			$(this).css({'color' : '#7f4d4d'});
		}, function(){
			$(this).css({'color' : '#0066cc'});
		});
		
		// *** ---- end build speech buble ---- ***
		
		// -- open bubble
		$('.js .more-info').mousedown(function(){
			var btnPos = $(this).position(); // -- position variable;
			var contentWidth = $('#content').width();
			var bubbleWidth = $('.mod-bd').width();
			var bubbleLeft = 0;
			var bubblePos = btnPos.left + bubbleWidth + bubbleLeft;
			var getTitle = $(this).parent().find('h3').text();
			
			$('.js .bub-body h4').html("<span>" + getTitle + "</span>"); // -- add tile to the H4 tag
			
			if(bubblePos > contentWidth)
			{
				// -- subtract the current button position from the infoWidth * 3 plus the width of the bubble - the infoWidth *3 plus 2px margin
				bubbleLeft = btnPos.left - ( $(this).width() * 3 + bubbleWidth - $(this).width() * 3 + 1 );
			}else{
			
				bubbleLeft = btnPos.left + $(this).width() -2;
			}
			
			// -- if any bubbles are open close them before opening another one.
			$('.mod-bd').css({'display' : 'none', 'left' : 0});
		
			$(this).parent().find('.mod-bd').css({'opacity' : 0, 'display' : 'block', 'left' :  bubbleLeft, 'top' : btnPos.top -125});
			$(this).parent().find('.mod-bd').animate({'opacity' : 1});
			
		});
		
		$('.js .bub-body .close').mousedown(function(){
			closeBubble();
		});
		
		// -- close bubble function
		function closeBubble()
		{
			$('.mod-bd').css({'display' : 'none', 'left' : 0});
		}
		
		// -- img mouseover
		//var element = $('#content .star-module');
		//$('<div/>').attr('class', 'imgHover').appendTo(element);
		
		//$('#content .star-module').mousemove(function(e){
			//var img = $(this).find('img').attr('src', $(this).find('img').attr('src').replace('&w=200', '&w=450'));
		//	alert(e.pageY);
		//	$(this).find('.imgHover').css({'top' : e.pageY - 100 + 'px', 'left' : e.pageX - 10 + 'px'});
			
		//}).hover(function(img){
		//	var imgAttr = $(this).find('img').attr('src');
			
		//	$(this).find('.imgHover').html( '<img src=\"' + imgAttr.replace('&w=95', '') + '\" alt=\"test\">').find('img').css({'width' : '450px'});
		//}, function(){
		//	$(this).find('.imgHover').html('');
		//});
		
	}
});