$(document).ready(function() {
	

  $('#companies').masonry({
    singleMode: true, 
    itemSelector: '.manufacturer' 
  });
  
  $('.manufacturer').hover(function() {
    $(this).addClass('hover');
  }, function() {
    $(this).removeClass('hover');
  });  
	
	//	===================
	//	HOME PAGE SLIDESHOW
	//	===================
	// Initialize some variables and DOM states
	currentHomePageSlide = 0;
	totalHomePageSlides = $('#slideshow .slideImage').length;
	$('#slideshow .slideImage').hide();
	$('#slideshow .slideCaption').hide();
	$('#slideshow .slideImage:eq(0)').show();
	$('#slideshow .slideCaption:eq(0)').show();
	
	// Generate and initialize the control buttons
	for (i=0; i< totalHomePageSlides; i++) {
		$('#slideshow .controls').append('<div class="controlDot" ref="' + i + '"><img src="http://www.poolsafely.gov/spacer.gif" alt="Slideshow Control" title="Slideshow Control" height="13" width="13"></div>');
	}
	$('#slideshow .controls .controlDot:eq(0)').addClass('on');
	
	// Respond to clicks on the control buttons. Only respond to buttons in an "off" state.
	$('#slideshow .controls .controlDot').click(function() {
		if (!$(this).hasClass('on')) {
			//$(document).stopTime('homeSlideshow');
			//_selectSlide($(this).attr('ref'));
			clearInterval(homeSlideShow);
			_selectSlideX($(this).attr('ref'));
		}
	});
	
	/*function _selectSlide(s) {
		// Passing an arg of -1 is for running the slideshow in an autoloop.
		if (s == -1) {
			if (currentHomePageSlide == totalHomePageSlides - 1) {
				slide = 0;
			} else {
				slide = currentHomePageSlide + 1;
			}
		} else {
			slide = s;
		}
		// Fade the images.
		$('#slideshow .slideImage:eq(' + currentHomePageSlide + ')').fadeOut(1000);
		$('#slideshow .slideImage:eq(' + slide + ')').fadeIn(1000, function () {
			// Cut to a new caption
        	$('#slideshow .slideCaption').hide();
			$('#slideshow .slideCaption:eq(' + slide + ')').show();
      	});
		// Change to a new button "on" state
		$('#slideshow .controls .controlDot').removeClass('on');
		$('#slideshow .controls .controlDot:eq(' + slide + ')').addClass('on');
		currentHomePageSlide = slide;
	}*/
	
	
						   
	$('.resources-carousel').jcarousel();
	$('.resources-carousel').css('width','1248px');
	
	
	// Set the autoloop for the slideshow. This is canceled once a button is clicked.
	// The jquery.timers plugin throws a non-supported method error, it doesn't appear to break the functionality.
	// But it will break any jQuery that follows, so this must be the last set of code.
	//$(document).everyTime(7000, 'homeSlideshow', function(i) {
		// Passing -1 invokes the loop.
 	//	_selectSlide(-1);
	//}, 0);
	
	// Start the slideshow loop.
	// The native setInterval function is able to call functions that live outside the .ready() method
	var homeSlideShow = setInterval("_selectSlideX(-1);", 7000);




	/***
		Trigger hover previews of Share Your Stories Content
								***/
	$('.story-preview-image').mouseover( function(e){
	
		var preview = $(this).siblings('.story-preview-text');
		var thisPic = $(this);
		var position = thisPic.position();
		
		preview.css('left', position.left );
		preview.css('top', Math.floor(position.top) +  thisPic.innerHeight() - 8 );
		preview.css('display', 'block');
	});
	$('.story-preview-image').mouseout( function(){
		$(this).siblings('.story-preview-text').css('display', 'none');
	});
	$('.story-preview-text').mouseover( function(){
		$(this).css('display', 'block');
	});
	$('.story-preview-text').mouseout( function(){
		$(this).css('display', 'none');
	});
	
	/***
		End Share Your Stories hover box
 								***/

});
// These variable are decared here to make them available globally
// But their values are set inside the jQuery .ready() code.
var currentHomePageSlide;
var totalHomePageSlides;
// This function works because it's called from inside the jQuery .ready() code.
// So all the DOM objects referenced are already available.

function _selectSlideX(s) {
// Passing an arg of -1 is for running the slideshow in an autoloop.
if (s == -1) {
if (currentHomePageSlide == totalHomePageSlides - 1) {
slide = 0;
} else {
slide = currentHomePageSlide + 1;
}
} else {
slide = s;
}
// Fade the images.
$('#slideshow .slideImage:eq(' + currentHomePageSlide + ')').fadeOut(1000);
$('#slideshow .slideImage:eq(' + slide + ')').fadeIn(1000);
//Fade the text
$('#slideshow .slideCaption').fadeOut(1000);
$('#slideshow .slideCaption:eq(' + slide + ')').fadeIn(1000);
// Change to a new button "on" state
$('#slideshow .controls .controlDot').removeClass('on');
$('#slideshow .controls .controlDot:eq(' + slide + ')').addClass('on');
currentHomePageSlide = slide;
}
