// STUFF ON INITIAL PAGE LOAD
Event.observe(window, 'load', function() {
  //tell google analytics about the page view
  _gaq.push(['_trackPageview']);
  
  // set what navs & content to show in the tour
  $('tour-1').show();$('tour-2').hide();$('tour-3').hide();$('tour-4').hide();$('tour-5').hide();$('tour-6').hide();
  $('t1').addClassName('active');
  
  // set what navs & content to show in the FAQ
  $('faq-1').show();$('faq-2').hide();$('faq-3').hide();$('faq-4').hide();$('faq-5').hide();$('faq-6').hide();
  $('f1').addClassName('active');	 
  
  
  // Show and hide the "more" nav in the top
  Event.observe('more-nav-btn', 'mouseover', function(){
   ['more-nav'].each(Element.show);
  });
  
  Event.observe('more-nav-btn', 'mouseout', function(){
   ['more-nav'].each(Element.hide);
  });
  
  Event.observe('more-nav', 'mouseover', function(){
   ['more-nav'].each(Element.show);
  });
  
  Event.observe('more-nav a', 'mouseover', function(){
   ['more-nav'].each(Element.show);
  });
  
  Event.observe('more-nav', 'mouseout', function(){
   ['more-nav'].each(Element.hide);
  });
  
});

// FEATURE TOUR TABS CONTROL
Event.observe(window, 'load', function() {
  var tour1 = 0;
  var tour2 = 0;
  var tour3 = 0;
  var tour4 = 0;
  var tour5 = 0;
  var tour6 = 0;

  Event.observe('t1', 'click', function(){
   ['tour-2', 'tour-3', 'tour-4', 'tour-5', 'tour-6'].each(Element.hide);
   Effect.Appear('tour-1', { duration: 0.5, queue: 'end' });
   $('t1').addClassName('active');$('t2').removeClassName('active');$('t3').removeClassName('active');$('t4').removeClassName('active');$('t5').removeClassName('active');$('t6').removeClassName('active');
   if (tour1 != 1) {
     _gaq.push(['_trackPageview', '/home/tour-1']);
	 tour1 = 1;  // if we set this variable to 1 it shouldn't fire again
   }
  });
  
  Event.observe('t2', 'click', function(){	   
   ['tour-1', 'tour-3', 'tour-4', 'tour-5', 'tour-6'].each(Element.hide);
   Effect.Appear('tour-2', { duration: 0.5, queue: 'end' });
   $('t1').removeClassName('active');$('t2').addClassName('active');$('t3').removeClassName('active');$('t4').removeClassName('active');$('t5').removeClassName('active');$('t6').removeClassName('active');
   if (tour2 != 1) {
     _gaq.push(['_trackPageview', '/home/tour-2']);
	 tour2 = 1;  // if we set this variable to 1 it shouldn't fire again
   }
  });
  
  Event.observe('t3', 'click', function(){
   ['tour-1', 'tour-2', 'tour-4', 'tour-5', 'tour-6'].each(Element.hide);
   Effect.Appear('tour-3', { duration: 0.5, queue: 'end' });
   $('t1').removeClassName('active');$('t2').removeClassName('active');$('t3').addClassName('active');$('t4').removeClassName('active');$('t5').removeClassName('active');$('t6').removeClassName('active');
   if (tour3 != 1) {
     _gaq.push(['_trackPageview', '/home/tour-3']);
	 tour3 = 1;  // if we set this variable to 1 it shouldn't fire again
   }
  });
  
  Event.observe('t4', 'click', function(){
   ['tour-1', 'tour-2', 'tour-3', 'tour-5', 'tour-6'].each(Element.hide);
   Effect.Appear('tour-4', { duration: 0.5, queue: 'end' });
   $('t1').removeClassName('active');$('t2').removeClassName('active');$('t3').removeClassName('active');$('t4').addClassName('active');$('t5').removeClassName('active');$('t6').removeClassName('active');
   if (tour4 != 1) {
     _gaq.push(['_trackPageview', '/home/tour-4']);
	 tour4 = 1;  // if we set this variable to 1 it shouldn't fire again
   }
  });
  
  Event.observe('t5', 'click', function(){
   ['tour-1', 'tour-2', 'tour-3', 'tour-4', 'tour-6'].each(Element.hide);
   Effect.Appear('tour-5', { duration: 0.5, queue: 'end' });
   $('t1').removeClassName('active');$('t2').removeClassName('active');$('t3').removeClassName('active');$('t4').removeClassName('active');$('t5').addClassName('active');$('t6').removeClassName('active');
   if (tour5 != 1) {
     _gaq.push(['_trackPageview', '/home/tour-5']);
	 tour5 = 1;  // if we set this variable to 1 it shouldn't fire again
   }
  });
  
  Event.observe('t6', 'click', function(){
   ['tour-1', 'tour-2', 'tour-3', 'tour-4', 'tour-5'].each(Element.hide);
   Effect.Appear('tour-6', { duration: 0.5, queue: 'end' });
   $('t1').removeClassName('active');$('t2').removeClassName('active');$('t3').removeClassName('active');$('t4').removeClassName('active');$('t5').removeClassName('active');$('t6').addClassName('active');
   if (tour6 != 1) {
     _gaq.push(['_trackPageview', '/home/tour-6']);
	 tour6 = 1;  // if we set this variable to 1 it shouldn't fire again
   }   
  });
  
});
  
  
// FAQ TABS CONTROL
Event.observe(window, 'load', function() {
  var faq1 = 0;
  var faq2 = 0;
  var faq3 = 0;
  var faq4 = 0;
  var faq5 = 0;
  var faq6 = 0;	
	
  Event.observe('f1', 'click', function(){
   $('faq-1').show();
   ['faq-2', 'faq-3', 'faq-4', 'faq-5', 'faq-6'].each(Element.hide);
   $('f1').addClassName('active');$('f2').removeClassName('active');$('f3').removeClassName('active');$('f4').removeClassName('active');$('f5').removeClassName('active');$('f6').removeClassName('active');
   if (faq1 != 1) {
     _gaq.push(['_trackPageview', '/home/faq-1']);
	 faq1 = 1;  // if we set this variable to 1 it shouldn't fire again
   }
  });
  
  Event.observe('f2', 'click', function(){
   $('faq-2').show();
   ['faq-1', 'faq-3', 'faq-4', 'faq-5', 'faq-6'].each(Element.hide);       
   $('f1').removeClassName('active');$('f2').addClassName('active');$('f3').removeClassName('active');$('f4').removeClassName('active');$('f5').removeClassName('active');$('f6').removeClassName('active');
   if (faq2 != 1) {
     _gaq.push(['_trackPageview', '/home/faq-2']);
	 faq2 = 1;  // if we set this variable to 1 it shouldn't fire again
   }
  });
  
  Event.observe('f3', 'click', function(){
   $('faq-3').show();
   ['faq-1', 'faq-2', 'faq-4', 'faq-5', 'faq-6'].each(Element.hide); 
   $('f1').removeClassName('active');$('f2').removeClassName('active');$('f3').addClassName('active');$('f4').removeClassName('active');$('f5').removeClassName('active');$('f6').removeClassName('active');
   if (faq3 != 1) {
     _gaq.push(['_trackPageview', '/home/faq-3']);
	 faq3 = 1;  // if we set this variable to 1 it shouldn't fire again
   }
  });
  
  Event.observe('f4', 'click', function(){
   $('faq-4').show();
   ['faq-1', 'faq-2', 'faq-3', 'faq-5', 'faq-6'].each(Element.hide); 
   $('f1').removeClassName('active');$('f2').removeClassName('active');$('f3').removeClassName('active');$('f4').addClassName('active');$('f5').removeClassName('active');$('f6').removeClassName('active');
   if (faq4 != 1) {
     _gaq.push(['_trackPageview', '/home/faq-4']);
	 faq4 = 1;  // if we set this variable to 1 it shouldn't fire again
   }
  });
  
  Event.observe('f5', 'click', function(){
   $('faq-5').show();
   ['faq-1', 'faq-2', 'faq-3', 'faq-4', 'faq-6'].each(Element.hide); 
   $('f1').removeClassName('active');$('f2').removeClassName('active');$('f3').removeClassName('active');$('f4').removeClassName('active');$('f5').addClassName('active');$('f6').removeClassName('active');
   if (faq5 != 1) {
     _gaq.push(['_trackPageview', '/home/faq-5']);
	 faq5 = 1;  // if we set this variable to 1 it shouldn't fire again
   }
  });
  
  Event.observe('f6', 'click', function(){
   $('faq-6').show();
   ['faq-1', 'faq-2', 'faq-3', 'faq-4', 'faq-5'].each(Element.hide);
   $('f1').removeClassName('active');$('f2').removeClassName('active');$('f3').removeClassName('active');$('f4').removeClassName('active');$('f5').removeClassName('active');$('f6').addClassName('active');
   if (faq6 != 1) {
     _gaq.push(['_trackPageview', '/home/faq-6']);
	 faq6 = 1;  // if we set this variable to 1 it shouldn't fire again
   }
  });
  
});

// HIDE ALL OF THE FAQ ANSWERS ON LOAD

function getElementsByClassName( strClassName, obj ) {
    var ar = arguments[2] || new Array();
    var re = new RegExp("\\b" + strClassName + "\\b", "g");

    if ( re.test(obj.className) ) {
        ar.push( obj );
    }
    for ( var i = 0; i < obj.childNodes.length; i++ )
        getElementsByClassName( strClassName, obj.childNodes[i], ar );
    
    return ar;
}

Event.observe(window, 'load', function() {
   var aryClassElements = getElementsByClassName( 'faq-item', document.body );
    for ( var i = 0; i < aryClassElements.length; i++ ) {
        aryClassElements[i].style.display = "none";		
    }   
});
  
  
// SCROLL TO AREA ON BUTTON PRESS
Event.observe(window, 'load', function() {
  Event.observe('tour-nav-btn', 'click', function(){
	Effect.ScrollTo('spiffy-stores-feature-tour');
  });
  Event.observe('tour-banner-btn', 'click', function(){
	Effect.ScrollTo('spiffy-stores-feature-tour');
  });
  Event.observe('tour-footer-btn', 'click', function(){
	Effect.ScrollTo('spiffy-stores-feature-tour');
  });
  
  Event.observe('blog-nav-btn', 'click', function(){
	Effect.ScrollTo('spiffy-stores-blog');
  });
  Event.observe('blog-footer-btn', 'click', function(){
	Effect.ScrollTo('spiffy-stores-blog');
  });
  
  Event.observe('faq-nav-btn', 'click', function(){
	Effect.ScrollTo('frequently-asked-questions');
  });
  Event.observe('faq-footer-btn', 'click', function(){
	Effect.ScrollTo('frequently-asked-questions');
  });
  
  Event.observe('about-nav-btn', 'click', function(){
	Effect.ScrollTo('about-and-contact-us');
  });
  Event.observe('about-footer-btn', 'click', function(){
	Effect.ScrollTo('about-and-contact-us');
  });
  
  Event.observe('pricing-nav-btn', 'click', function(){
	Effect.ScrollTo('pricing-and-signup');
  });
  Event.observe('pricing-banner-btn', 'click', function(){
	Effect.ScrollTo('pricing-and-signup');
  });
  Event.observe('pricing-footer-btn', 'click', function(){
	Effect.ScrollTo('pricing-and-signup');
  });
  
  Event.observe('more-nav-btn-link', 'click', function(){
	Effect.ScrollTo('footer');
  });
  
  Event.observe('spiffy-stores-logo', 'click', function(){
	Effect.ScrollTo('header-wrapper', { duration:'0.9', offset:-70 });
  });
});



// SEE WHAT PART OF THE PAGE WE'RE VIEWING AND CHANGE THE NAV TO HIGLIGHT IT
// ALERT GOOGLE ANALYTICS THAT NEW PAGE HAS LOADED

Function.prototype.debounce = function (delay, atBegin) {
  var func = this;
  var timeout;

  return function() {
	var args = arguments;

	var delayed = function() {
		if (!atBegin) { func.apply(this, args); }
		timeout = null;
	}.bind(this);

	if (timeout) {
		clearTimeout(timeout);
	} else if (atBegin) {
		func.apply(this, args);
	}

	timeout = delayed.delay(delay);
  };
};

Event.observe(window, 'load', function() {
  var tourview = 0;
  var blogview = 0;
  var faqview = 0;
  var aboutview = 0;
  var pricingview = 0;
  var footerview = 0;
  
  var myScrollEventHandler = function(e){	  
	var top = $('header-wrapper');
	var tour = $('spiffy-stores-feature-tour');
	var blog = $('spiffy-stores-blog');
	var faq = $('frequently-asked-questions');
	var about = $('about-and-contact-us');
	var pricing = $('pricing-and-signup');
	var footer = $('thebottom');
		
	if ( top.viewportOffset().top == 0 ) {
	  // top elem is below the fold.
	  return false;
	} else {
	  // top elem is above the fold.
	  $('top-nav-arrow').setStyle({left: '98px'});
	  $('tour-nav-btn').removeClassName('active');
	  $('blog-nav-btn').removeClassName('active');
	  $('faq-nav-btn').removeClassName('active');
	  $('about-nav-btn').removeClassName('active');
	  $('pricing-nav-btn').removeClassName('active');
	  $('more-nav-btn').removeClassName('active');  
	}
	
	if ( tour.viewportOffset().top > 100 ) {
	  // tour elem is below the fold.
	  return false;
	} else {
	  // tour elem is above the fold.
	  $('top-nav-arrow').setStyle({left: '425px'});
	  $('tour-nav-btn').addClassName('active');
	  $('blog-nav-btn').removeClassName('active');
	  $('faq-nav-btn').removeClassName('active');
		$('about-nav-btn').removeClassName('active');
	  $('pricing-nav-btn').removeClassName('active');
	  $('more-nav-btn').removeClassName('active');
	  
	  // fire off a google analytics view here	
	  if (tourview != 1) {
		//_gaq.push(['_trackPageview', '/dev/home-tour']);
		tourview = 1;  // if we set this variable to 1 it shouldn't fire again
	  }
	}
	
	if ( blog.viewportOffset().top > 100 ) {
	  // blog elem is below the fold.
	  return false;
	} else {
	  // blog elem is above the fold.
	  $('top-nav-arrow').setStyle({left: '507px'});
	  $('tour-nav-btn').removeClassName('active');
	  $('blog-nav-btn').addClassName('active');
	  $('faq-nav-btn').removeClassName('active');
	  $('about-nav-btn').removeClassName('active');
	  $('pricing-nav-btn').removeClassName('active');
	  $('more-nav-btn').removeClassName('active');
		
	  // fire off a google analytics view here	
	  if (blogview != 1) {
		//_gaq.push(['_trackPageview', '/dev/home-blog']);
		blogview = 1;  // if we set this variable to 1 it shouldn't fire again
	  }
		
	}
	  
	if ( faq.viewportOffset().top > 100 ) {
	  // faq elem is below the fold.
	  return false;
	} else {
	  // faq elem is above the fold.
	  $('top-nav-arrow').setStyle({left: '567px'});
	  $('tour-nav-btn').removeClassName('active');
	  $('blog-nav-btn').removeClassName('active');
	  $('faq-nav-btn').addClassName('active');
	  $('about-nav-btn').removeClassName('active');
	  $('pricing-nav-btn').removeClassName('active');
	  $('more-nav-btn').removeClassName('active');
	  
	  // fire off a google analytics view here
	  if (faqview != 1) {
		  //_gaq.push(['_trackPageview', '/dev/home-faq']);
		  faqview = 1;  // if we set this variable to 1 it shouldn't fire again
	  }	
		
	}
	  
	if ( about.viewportOffset().top > 100 ) {
	  // about elem is below the fold.
	  return false;
	} else {
	  // about elem is above the fold.
	  $('top-nav-arrow').setStyle({left: '670px'});
	  $('tour-nav-btn').removeClassName('active');
	  $('blog-nav-btn').removeClassName('active');
	  $('faq-nav-btn').removeClassName('active');
	  $('about-nav-btn').addClassName('active');
	  $('pricing-nav-btn').removeClassName('active');
	  $('more-nav-btn').removeClassName('active');
	  
	  // fire off a google analytics view here	
	  if (aboutview != 1) {
		  //_gaq.push(['_trackPageview', '/dev/home-about']);
		  aboutview = 1;  // if we set this variable to 1 it shouldn't fire again
	  }
	  
	}
	  
	if ( pricing.viewportOffset().top > 100 ) {
	  // pricing elem is below the fold.
	  return false;
	} else {
	  // pricing elem is being viewed
	  $('top-nav-arrow').setStyle({left: '820px'});
	  $('tour-nav-btn').removeClassName('active');
	  $('blog-nav-btn').removeClassName('active');
	  $('faq-nav-btn').removeClassName('active');
	  $('about-nav-btn').removeClassName('active');
	  $('pricing-nav-btn').addClassName('active');
	  $('more-nav-btn').removeClassName('active');
	  
	  // fire off a google analytics view here
	  if (pricingview != 1) {
		  //_gaq.push(['_trackPageview', '/dev/home-pricing']);
		  pricingview = 1;  // if we set this variable to 1 it shouldn't fire again
	  }
	  
	}
	  
	if ( footer.viewportOffset().top > 900 ){
	// footer elem is below the fold.
	  return false;
	} else {
	  // footer elem is above the fold.
	  $('top-nav-arrow').setStyle({left: '920px'});
	  $('tour-nav-btn').removeClassName('active');
	  $('blog-nav-btn').removeClassName('active');
	  $('faq-nav-btn').removeClassName('active');
	  $('about-nav-btn').removeClassName('active');
	  $('pricing-nav-btn').removeClassName('active');
	  $('more-nav-btn').addClassName('active');
	  
	  // fire off a google analytics view here
	  if (footerview != 1) {
		  //_gaq.push(['_trackPageview', '/dev/home-footer']);
		  footerview = 1;  // if we set this variable to 1 it shouldn't fire again
	  }
	}
  }
  
  Event.observe(window, 'scroll', myScrollEventHandler.debounce(0.5));
  
});