/*
 * Clorox2 Common Javascript
 *
 * October 11, 2009
 *
 */

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

$(document).ready(function() {
	$clxcommon.initExternal();
	$clxcommon.initWarning();
	$clxcommon.attachClickAnalytics('promo');
	
	$('#c2moneyback').mousedown(function() {
		$clxcommon.trackAnalyticsPageView('download','c2-money-back-guaranteePDF');
	});
		
	$('#cheatsheetPDF').mousedown(function() {
		$clxcommon.trackAnalyticsPageView('download','cheatsheetPDF');
	});

	// accordion effect for faq list
 	if ($('.faqBox').length > 0) {

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

/**
 * initAnythingSlider(): setup the 'anything' slider, which is used on the homepage
 *
 */
$clorox2.initAnythingSlider = function () {
	function formatText(index, panel) {
		  return index + "";
	}
	
	$(function () {
	
	    $('.anythingSlider').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: 10000,                    // 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: false,          // 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)
	    });
	    
	    $("#slide-jump").click(function(){
	        $('.anythingSlider').anythingSlider(6);
	    });
	    
	});
}

/**
 * initTabSlider(): setup the tab slider, which is used on some subpages
 *
 */
$clorox2.initTabSlider = function () {

	var $panels = $('#slider .scrollContainer > div');
	var $container = $('#slider .scrollContainer');
	// collect the scroll object, at the same time apply the hidden overflow
	// to remove the default scrollbars that will appear
	var $scroll = $('#slider .scroll').css('overflow', 'hidden');
	
	// if false, we'll float all the panels left and fix the width 
	// of the container
	var horizontal = true;
	
	// float the panels left if we're going horizontal
	if (horizontal) {
	  $panels.css({
	    'float' : 'left',
	    'position' : 'relative' // IE fix to ensure overflow is hidden
	  });
	  
	  // calculate a new width for the container (so it holds all panels)
	  $container.css('width', $panels[0].offsetWidth * $panels.length);
		
	  // set the height of the scroll container
	  $scroll.css('height', $panels[0].offsetHeight);
	}
	
	// apply our left + right buttons
	$scroll
	  .before('<img class="scrollButtons left" src="/img/tab_arrow_left.gif" />')
	  .after('<img class="scrollButtons right" src="/img/tab_slide_next.gif" />');
	
	// handle nav selection
	function selectNav() {
	  $(this)
	    .parents('ul:first')
	      .find('a')
	        .removeClass('selected')
	      .end()
	    .end()
	    .addClass('selected');
	}
	
	$('#slider .navigation').find('a').click(selectNav);
	
	// go find the navigation link that has this target and select the nav
	function trigger(data) {
	  var el = $('#slider .navigation').find('a[href$="' + data.id + '"]').get(0);
	  selectNav.call(el);

	}

	function beforeTrigger(event, object) {
	  // set the height of the scroll container to that of the panel. If we want to 
	  // make the div bigger before the scoll, we can't animate as it interferes with 
	  // the scroll effect
	  $scroll.css('height', object.offsetHeight);
	  
	  // stop a flowplayer if one exists
	  if ($('div#videoPlayer object').length > 0)
	  	$f().stop();

	  if ($('div#videoPlayerPS object').length > 0)
	  	$f().stop();
	  	
	  	if ($('div#videoPlayer3 object').length > 0)
	  	$f().stop();
	  	
	  	if ($('div#videoPlayer2 object').length > 0)
	  	$f().stop();
	  	
	  	if ($('div#videoPlayerS object').length > 0)
	  	$f().stop();
	  
	}
	
	if (window.location.hash) {
	  trigger({ id : window.location.hash.substr(1) });
	} else {
	  $('ul.navigation a:first').click();
	}
	
	// offset is used to move to *exactly* the right place, since I'm using
	// padding on my example, I need to subtract the amount of padding to
	// the offset.  Try removing this to get a good idea of the effect
	var offset = parseInt((horizontal ? 
	  $container.css('paddingTop') : 
	  $container.css('paddingLeft')) 
	  || 0) * -1;
		
	var scrollOptions = {
	  target: $scroll, // the element that has the overflow
	  
	  // can be a selector which will be relative to the target
	  items: $panels,
	  
	  navigation: '.navigation a',
	  
	  // selectors are NOT relative to document, i.e. make sure they're unique
	  prev: 'img.left', 
	  next: 'img.right',
	  
	  // allow the scroll effect to run both directions
	  axis: 'xy',
	  
	  onAfter: trigger, // our final callback
	  
	  onBefore: beforeTrigger,
	  
	  offset: offset,
	  
	  // duration of the sliding effect
	  duration: 500,
	  
	  // easing - can be used with the easing plugin: 
	  // http://gsgd.co.uk/sandbox/jquery/easing/
	  easing: 'swing'
	};
	
	// apply serialScroll to the slider - we chose this plugin because it 
	// supports// the indexed next and previous scroll along with hooking 
	// in to our navigation.
	$('#slider').serialScroll(scrollOptions);
	
	// now apply localScroll to hook any other arbitrary links to trigger 
	// the effect
	$.localScroll(scrollOptions);
	
	// finally, if the URL has a hash, move the slider in to position, 
	// setting the duration to 1 because I don't want it to scroll in the
	// very first page load.  We don't always need this, but it ensures
	// the positioning is absolutely spot on when the pages loads.
	scrollOptions.duration = 1;
	$.localScroll.hash(scrollOptions);

}

$(document).ready(function () {
	// only init the sliders if they are found in the page
	if ($('.anythingSlider').length > 0)
		$clorox2.initAnythingSlider();
		
	if ($('.scrollContainer').length > 0)
		$clorox2.initTabSlider();

});

$(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.
 $('.maskLeft, .maskRight, .hang, .homelink, .arrow, .anythingSlider h1, .soccer, .foodstain, .moving, .productShot').pngfix();
});


$(document).ready(function() {

	$clxcommon.createLink('#seasonLink', '/season-of-stains/');
	$clxcommon.createLink('#carsonLink', '/carson-kressley-suggestions/');
	$clxcommon.createLink('#drlaundryLink', 'http://www.drlaundryblog.com');
	$clxcommon.createLink('#mahjonggLink', 'http://zone.msn.com/en/clorox/clorox2mahjongg_default.htm');
	$clxcommon.createLink('#possibilityshopLink', '/possibility-shop/');
	$clxcommon.createLink('#possiblityshopWebsite', 'http://familyfun.com');
	$clxcommon.createLink('#askLink', '/ask-about-it/');
	
	
});