/*
 *	Clorox CSR Javascript Functions 
 *	Created by: Clorox Interactive Design 2009
 *	Updated: 1/26/2010
*/


// init the local namespace. All functions should be part of this namespace
var $cloroxcsr = window.$cloroxcsr || {};


/**
 * loadBubbles(): Function to create bubble popups for ingredients in product detail page.
 *
 */
	
$cloroxcsr.loadBubbles = function () {
	var bubbles = $('.bubblePopup');
	numPopups = bubbles.length;
		
	for (i=0; i<numPopups; i++) {
	    $('body').bubble({
	       'trigger' : '#productTrigger' + i, // selector for the trigger element
	       'popup' : '#ingredientPopup' + i, // selector for the actual bubble (within 'body')
	       'distance' : 40, // distance in px it will travel
	       'hideDelay' : 50, // time before hiding
	       'effectTime' : 250, // total time for effect
	       'showDelay' : 250,
	       'popupPosition' : {left: 30, bottom: 20},
	       'directionFadeIn' : 'top',
	       'directionFadeOut' : 'top'
	    });		
		
	}

}

/**
 * initAnythingSlider(): setup the 'anything' slider, which is used on the homepage
 *
 */
$cloroxcsr.initAnythingSlider = function () {
	function formatText(index, panel) {
		  return index + "";
	}
	$(function () {	
	    $('.anythingSlider1').anythingSlider({
	        easing: "easeInOutExpo",        // Anything other than "linear" or "swing" requires the easing plugin
	        autoPlay: true,                 // This turns off the entire FUNCTIONALY, not just if it starts running or not.
	        delay: 15000,                    // How long between slide transitions in AutoPlay mode
	        startStopped: false,            // If autoPlay is on, this can force it to start stopped
	        animationTime: 600,             // How long the slide transition takes
	        hashTags: true,                 // Should links change the hashtag in the URL?
	        buildNavigation: true,          // If true, builds and list of anchor links to link to each slide
			pauseOnHover: true,             // If true, and autoPlay is enabled, the show will pause on hover
			startText: "Go",             	// Start text
	        stopText: "Stop",               // Stop text
	        navigationFormatter: formatText       // Details at the top of the file on this use (advanced use)
	    });
	});	
	$(function () {	
	    $('.anythingSlider2').anythingSlider({
	        easing: "easeInOutExpo",        // Anything other than "linear" or "swing" requires the easing plugin
	        autoPlay: true,                 // This turns off the entire FUNCTIONALY, not just if it starts running or not.
	        delay: 5000,                    // How long between slide transitions in AutoPlay mode
	        startStopped: true,            // If autoPlay is on, this can force it to start stopped
	        animationTime: 600,             // How long the slide transition takes
	        hashTags: true,                 // Should links change the hashtag in the URL?
	        buildNavigation: true,          // If true, builds and list of anchor links to link to each slide
			pauseOnHover: true,             // If true, and autoPlay is enabled, the show will pause on hover
			startText: "Go",             	// Start text
	        stopText: "Stop",               // Stop text
	        navigationFormatter: formatText       // Details at the top of the file on this use (advanced use)
	    });
	});	

}


/**
 *	initTabbedNav(): setup simple Tabbed navigation for use on Awards page
 */
 
$cloroxcsr.initTabbedNav = function () {
	$('ul.tabNav a').click(function() {
		var curChildIndex = $(this).parent().prevAll().length + 1;
		$(this).parent().parent().children('.current').removeClass('current');
		$(this).parent().addClass('current');
		$(this).parent().parent().next('.tabContainer').children('.current').slideUp('fast',function() {
			$(this).removeClass('current');
			$(this).parent().children('div:nth-child('+curChildIndex+')').slideDown('normal',function() {
				$(this).addClass('current');
			});
		});
		return false;
	}); 
}


/**
 * Brands Carousel on main page.
 */
 
$cloroxcsr.mycarousel_itemList = [
    {link: 'http://www.clorox.com/our_story/article.php?subsection=our_commitment&article_id=red_cross', url: '/images/brands/red-cross.gif', title: 'Clorox and the Red Cross: Dedicated to a Healthier World'},
    {link: 'http://www.powerfuldifference.com', url: '/images/brands/pine-sol.gif', title: 'Pine-Sol: Powerful Difference'},
    {link: 'http://www.greenworkscleaners.com/partners/detail.php?id=green-heroes', url: '/images/brands/green-heros.gif', title: 'Green Works - Green Heroes'},
    {link: 'http://www.loveyourveggies.com/', url: '/images/brands/veggies.gif', title: 'Hidden Valley: Love Your Veggies School Grant Program'},
    {link: 'http://www.glad.com/gladtogive/', url: '/images/brands/glad.gif', title: 'Glad: Glad to Give'},
    {link: 'http://www.freshstep.com/aspca', url: '/images/brands/aspca.gif', title: 'Fresh Step: Caring For Animals Together'},
    {link: 'http://www.filterforgood.com/', url: '/images/brands/brita.gif', title: 'Brita Filter for Good'},
    {link: 'http://www.burtsbees.com/c/committment/greater-good.html', url: '/images/brands/burts-bees.gif', title: 'Burt&rsquo;s Bees - Earth Friendly Natural Personal Care for The Greater Good'}
];

$cloroxcsr.mycarousel_itemVisibleInCallback = function(carousel, item, i, state, evt)
{
    // The index() method calculates the index from a
    // given index who is out of the actual item range.
    var idx = carousel.index(i, $cloroxcsr.mycarousel_itemList.length);
    carousel.add(i, $cloroxcsr.mycarousel_getItemHTML($cloroxcsr.mycarousel_itemList[idx - 1]));
    carousel.options.scroll = 1;
};

$cloroxcsr.mycarousel_itemVisibleOutCallback = function (carousel, item, i, state, evt)
{
    carousel.remove(i);
};

$cloroxcsr.mycarousel_getItemHTML = function(item)
{
    return '<a href="' + item.link + '" rel="external"><img src="' + item.url + '" width="150" height="75" alt="' + item.title + '" /></a>';
};


// initialize all functions on document ready
$(document).ready(function() {
	// initialize common.clorox.com library of functions
	$clxcommon.initWarning();
	$clxcommon.initExternal();
	$clxcommon.attachClickAnalytics('video');
	$clxcommon.attachClickAnalytics('download');
	
	// initialize CSR functions
	$cloroxcsr.loadBubbles();
	$cloroxcsr.initAnythingSlider();
	$cloroxcsr.initTabbedNav();

	// Initialize div blocks as links on document ready.
	$('li.headlink').hover(
			function() { $('ul', this).css('display', 'block'); },
			function() { $('ul', this).css('display', 'none'); });
			
	$clxcommon.createLink('#GWslide', 'http://www.greenworkscleaners.com/partners/detail.php?id=sierra_club');
	$clxcommon.createLink('#RCslide', 'http://american.redcross.org/site/PageServer?pagename=wkpl_Corp_Public&s_company=clorox-pub');
	$clxcommon.createLink('#Britaslide', 'http://www.filterforgood.com/');
	$clxcommon.createLink('#Gladslide', 'http://www.glad.com/gladtogive/');

	// carousel
	$('#brandsCarousel').jcarousel({
        wrap: 'circular',
        itemVisibleInCallback: {onBeforeAnimation: $cloroxcsr.mycarousel_itemVisibleInCallback},
        itemVisibleOutCallback: {onAfterAnimation: $cloroxcsr.mycarousel_itemVisibleOutCallback}
    });
	
 	if ($('#faqBox').length > 0) {

		var activeId = (document.location.hash != '') ? '#id-' + document.location.hash.replace(/#/, '') : false;
				
 		$('#faqBox').accordion({
			header: "h3",
			collapsible: true,
			active: activeId,
			alwaysOpen: false,
			autoHeight: false
		});
	}
	
});

$(window).load(function () {
 // fix PNG transparency. We have to do this on load(), not ready(), because
 // all of the pngs have to have loaded before we can apply the fix to them
 
 // NOTE: we have to apply the fix to the individual elements that we need to fix
 // not everything.
  $('.png., .slide1, .slide2, .slide3, .slide4, .motto').pngfix();
});