/*************************************************************************
	Google Analytics	
*************************************************************************/
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-24322937-1']);
_gaq.push(['_trackPageview']);

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();





/*************************************************************************
	jQuery
*************************************************************************/
$(document).ready(function() {

    ///////////////////////////////////////////////////////////////////////////
    // Front Page: Expose .big
    ///////////////////////////////////////////////////////////////////////////
	$('#features .small').hover(
		//http://stackoverflow.com/questions/350639/
		function(){
			// For some reason (probably since .big is hidden and then being "shown" by jQuery), the height/width set in the css for .slideshow doesn't apply.
			// This fixes that
			$("#features div .big .pictures .slideshow").css({'height' : '210px', 'width' : '389px'});

			$(this).find(".big").show();
			$(this).find(".slideshow").cycle('resume');
			$("#features .small .image").cycle('pause');
			
			if ($.browser.msie && $.browser.version.substr(0,1)<10) {
				$(this).child(".tabnub").show();
			}
			$(this).find(".big").animate({ opacity: 0 }, 0);
			$(this).find(".big").stop(true,true).animate({ opacity: 1 }, 30);
			},
		function() {
			$(this).find(".big").stop(true,true).hide();
			$(this).find(".slideshow").cycle('pause');
			$("#features .small .image").cycle('resume');

			if ($.browser.msie && $.browser.version.substr(0,1)<10) {
				$(this).child(".tabnub").hide();
			}
			
			$(this).find(".big").animate({ opacity: 1 }, 'fast');
			}
	); //hover + end


	// IE Specific fix for z-index interleaving problem.
	$('#features .small').mouseover(function() {
		if($.browser.msie){
			// http://webdeveloper2.com/2010/01/how-to-fix-the-ie-z-index-bug-with-jquery/
			$(this) //selects the anchor tag over which the mouse has moved
			 //.parent('div') //traverse to the anchor's parent div element
			 .css('z-index', 2) //set the z-index to 2 on the div
			 .siblings('div') // selects the sibling div elements (not including the one we just changed)
			 .css('z-index', 1); //sets the z-index to 1 on all of the sibling div elements
			
			// debug: $(this).css('background-color', 'red');
		}else{
		} // end msie mouseover if/else
	});

	if($.browser.msie){
			$('#features .big .tabnub').after("<div></div>");
		}else{
	} // end msie mouseover if/else






    ///////////////////////////////////////////////////////////////////////////
    // Front Page: Expose .big: Instructions
    ///////////////////////////////////////////////////////////////////////////

	// SETUP: Opacity is set here and not in "styles.css" for the benefit of IE 6
	$("body.home #instructions span").css('opacity', '0');

	// SETUP: IE vs. Everyone Else specific top values
	if($.browser.msie && $.browser.version.substr(0,1)<8){
		var browsertopvalue = '4em' // All Browsers
			}else{
		var browsertopvalue = '4.2em' // IE6, 7
	} // end msie mouseover if/else


	// RUN: Show #instructions onLoad()
	setTimeout( function() {
		$("body.home #instructions").show().animate({top:browsertopvalue}, 500, 'easeOutQuint');
		$("body.home #instructions span").delay(200).animate({opacity:'1'}, 200);
	}, 3500 );

	// RUN: Hide #instructions when the mouse leaves the entire #features area
	$('#features').mouseleave(function() {
		
		setTimeout( function() {
			$("body.home #instructions").delay(70).animate({top:'0'}, 900, 'easeOutQuint').hide(100);
			$("body.home #instructions span").animate({opacity:'0'}, 300);
		}, 1000 );		
	});






    ///////////////////////////////////////////////////////////////////////////
    // Front Page: Slideshow cycle() code
    ///////////////////////////////////////////////////////////////////////////

	// <http://jquery.malsup.com/cycle/int2.html>
	// http://stackoverflow.com/q/2489319
	// http://stackoverflow.com/q/2851903 




	// Slideshow for .small

	// All cycle() parameters have to be set for *each* instance if any one perameter is going to
	// be different. In this case, the delay parameters are different to create the
	// "horizontal waterfall" effect when swtiching images.

	$('#featurePunchdeck.small .image').cycle({		fx:'fade', speed:2000, timeout:8000, delay:100});
	$('#featurePalletrack.small .image').cycle({	fx:'fade', speed:2000, timeout:8000, delay:300});
	$('#featureCantilever.small .image').cycle({	fx:'fade', speed:2000, timeout:8000, delay:500});
	$('#featureMezzanine.small .image').cycle({		fx:'fade', speed:2000, timeout:8000, delay:700});
	$('#featureShelving.small .image').cycle({		fx:'fade', speed:2000, timeout:8000, delay:900});

	// For testing:
	// $('div.small .image').cycle({fx: 'fade', speed: 150, timeout: 100});







	// Slideshow for .big

	// Writes the .slideshowcontroller html markup into the page
	// Needs to be up here or esle cycle() doesn't recocognize the .previous/.next buttons
	$('.pictures').append("\
	<div class=\"slideshowcontroller\">\
		<a href=\"#\" class=\"previous\">&lsaquo;</a>\
		\
		<a href=\"#\" class=\"play\">Play</a>\
		<a href=\"#\" class=\"pause\">Pause</a>\
		\
		<a href=\"#\" class=\"next\">&rsaquo;</a>\
	</div>");
	
	// Left + Right triangles: &#9664; &#9654;

	// Reference HTML, *without* forward slashes for jQuery
	// <div class="slideshowcontroller">
	//   <a href="#" class="previous">&lsaquo; Previous</a>
	//   <a href="#" class="next">Next &rsaquo;</a>
	//   
	//   <a href="#" class="play"><!-- &#9654; -->Play</a>
	//   <a href="#" class="pause"><!-- || -->Pause</a>
	// </div>



	$('.slideshow').each(function() {
	    var $nav = $('<div class="pager"></div>').insertAfter(this);
	
	    $(this).cycle({
	        fx: 	'fade',
			speed:    300,
		//	timeout:  300, // Testing Speed
			timeout:  5000, // Live Speed
	        next:   '.next',
	        prev:   '.previous',
	        pager:   $nav,
	
			pagerAnchorBuilder: function(idx, slide) { 
				return '<a href="#">&#149;</a>'; 
			}
	    });
	});



	// Slideshow for .big: .slideshowcontroller

	// Hide .slideshowcontroller onLoad
	$('.slideshowcontroller').hide();

	//Show/Hide .slideshowcontroller on a per/.big box basis
    $('.pictures').hover(
        function() { $(this).find(".slideshowcontroller").fadeIn(150); },
        function() { $(this).find(".slideshowcontroller").fadeOut(150); }
    );

	// Play/Pause
	// Hide .play onLoad
	$('.slideshowcontroller .play').hide();

    $('.slideshowcontroller .pause').click(function(e) {
		$('.slideshow').cycle('pause');
		$(this).hide();
		$('.play').show();
		e.preventDefault();
	});
    
	$('.slideshowcontroller .play').click(function(e) {
		$('.slideshow').cycle('resume');
		$(this).hide();
		$('.pause').show();
		e.preventDefault();
	});

	// Pause on "Next/Previous"
	$('.next, .previous').click(function() {
		$('.slideshow').cycle('pause');
		$('.slideshowcontroller .pause').hide();
		$('.slideshowcontroller .play').show();
	});


	// This is for the cases where the slideshow *has* been *paused* via the .slideshowcontroller buttons and then the current .big is left (mouseleave). This way, if the user returns, via hover() to that same .big, which the above code automatically fires off a "resume" to cycle(), the "Pause" button will shown instead of the "Play" button.
	// A variation of this, without "mouseleave()", used to exist in the "(b) Expose .big" hover() above.	
	$('#features .small .big').mouseleave(function() {
		$('.slideshowcontroller .pause').show();
		$('.slideshowcontroller .play').hide();
	});




	// Pause on page load
	$('.slideshow').cycle('pause');

	// $(".pager a, .slideshow img").click(function() {
	// 	$('.slideshow').cycle('pause');
	// });











    ///////////////////////////////////////////////////////////////////////////
    // Literature Download: Row Striping
    ///////////////////////////////////////////////////////////////////////////

	// - "Literature Download" PDF list <table>
	// - Not for "Load Tables" because I need to have manual control over those
	// - tbody is included in the path so the <tr> inside <thead> is not counted, since it messes up the stripe consistancy.
	// This is *only* for IE6,7,8 since they don't "get" the css :nth-child selectors used in "styles.css".

	if ($.browser.msie && $.browser.version.substr(0,1)<9) {
		$("body.literature-download table tbody tr:nth-child(odd)").addClass("striped");
	}







    ///////////////////////////////////////////////////////////////////////////
    // Request-A-Quote: Rack Type Selector (Faux Tabs)
    ///////////////////////////////////////////////////////////////////////////

	// Hide "Mezzanine" tab content (<table>)
	$("body.raq #mezzanines").hide();

	// Select "Pallet Rack & Shelving" since this is the *default* field group
	$("#selector-prs").addClass('selected');

	// Select the "Pallet Rack & Shelving" tab
	$("#selector-prs").click(function(e) {
	
		$("body.raq #mezzanines").hide();
		$("body.raq #pallet-rack-shelving").show();
		$("#rack-types .row-1 .column-2 select").focus();
	
		$("#rack-type-selector a").removeClass('selected');
		$(this).addClass('selected');
	
		e.preventDefault();
	});

	// Select the "Mezzanine" tab
	$("#selector-mezz").click(function(e) {
		$("body.raq #pallet-rack-shelving").hide();
		$("body.raq #mezzanines").show();
		$("#rack-types .row-1 .column-2 input").focus();

		$("#rack-type-selector a").removeClass('selected');
		$(this).addClass('selected');
	
		e.preventDefault();
	});



	// Add class "focused" to div#rack-type-selector when an input that lives inside #rack-types is focused
	$("#rack-types input, #rack-types select, #rack-types textarea").focus(function() {
		$("#rack-type-selector").addClass("focused");
	});;



	// Focuses #about-your-company and *removes* focus from #rack-types (Pallet or Mezzanine)
	$('body.raq #about-your-company input, body.raq #about-your-company textarea, body.raq #about-your-company select').focus(function() {
		$(this).parents(".inner").parent().addClass('focused');
		$(this).parents("tr").addClass('focused-field');
		// $(this).siblings("label").addClass('label-focus');
	
		$("#rack-type-selector").removeClass("focused");
	
		$("body.raq #rack-types").removeClass('focused');
		$("body.raq #rack-types tr").removeClass('focused-field');	
	});

	// Focuses #rack-types (Pallet or Mezzanine) and *removes* focus from #about-your-company
	$('body.raq #rack-types input, body.raq #rack-types textarea, body.raq #rack-types select').focus(function() {
		$(this).parents(".inner").parent().addClass('focused');
		$(this).parents("tr").addClass('focused-field');
		// $(this).siblings("label").addClass('label-focus');
	
		$("body.raq #about-your-company").removeClass('focused');
		$("body.raq #about-your-company tr").removeClass('focused-field');
	});

	// Removes the ".focued-field" class (for individual fields) on blur
	$('body.raq input, body.raq textarea, body.raq select').blur(function() {
		$(this).parents("tr").removeClass('focused-field');
	});





	// OnLoad: Place the cursor in the first input of #about-your-company. This also triggers the above code to "focus" #about-your-company
	$("#about-your-company .row-1 .column-2 input").select();





	// OnLoad: Checks the hash in the URL and if "#thankyou" is found that <div> is displayed and the form inputs are hidden.
	// This following url will serve as the "redirect" for the RAQ form: <http://rackdeck.com/request-a-quote.html#thankyou>

	if (location.hash == '#thankyou'){
		$("#buttons, #about-your-company, #rack-types, #rack-type-selector").hide();
		$("#thankyou").show();
	}








});//jQuery (document).ready() end