CatalogChoice.ContentSwitcher = Class.create();
CatalogChoice.ContentSwitcher.prototype = {
	cs1IsAnimating: false,
	cs2IsAnimating: false,

	initialize: function(el) {
	  var defaults = {
      event: 'click',
      prefix: el + '_',
      selectorClass: 'selector',
      sectionClass: 'section'
    }
    this.options = Object.extend(defaults, arguments[1] || {});
		this.el = $(el);
		
		// Find all the selectors and map them based on the id
		this.selectorList = $H({});
		$A(this.el.getElementsByClassName(this.options.selectorClass)).each(function(selector) {
		  selector_id = $A(selector.id.split('_')).last();
		  this.selectorList[selector_id] = selector;
      selector.onclick = function(selector_id) {
        return this.swapContent(selector_id);
      }.bind(this, selector_id);
    }.bind(this));
		
		// Find all the sections and map them based on the id
		this.sectionList = $H({});
		$A(this.el.getElementsByClassName(this.options.sectionClass)).each(function(section) {
		  section_id = $A(section.id.split('_')).last();
		  this.sectionList[section_id] = section;
		}.bind(this));
		
		this.sectionList.each(function(section) {
			if (section.value.hasClassName('active')) {
			  $('content_switcher_content').setStyle({height: section.value.getDimensions().height + 'px'});
			  this.lastId = section.key;
			}	else {
			  section.value.hide();
			}
		}.bind(this));
		
		var location = $A(document.location.href.split('#'));
	  if (location.length > 1) {
	    this.swapContent(location.last());
	  }
	},

  fixDimensions: function() {
    if (!this.lastId) return false;
    var section = this.sectionList[this.lastId];
    $('content_switcher_content').morph({height: section.getDimensions().height + 'px'}, {duration: .25})
  },

	swapContent: function(id) {
	  // For backwards compatibility
	  switch (id) {
    case 'finder':
	    id = 'find-catalogs';
	    break;
	  case 'environmentalfacts':
	    id = 'environmental-facts';
	    break;
	  }
	  
	  // Break in case the new section is the same as current
	  if (id == this.lastId) return false;
	  
	  // Check if the user is activated
	  if (CatalogChoice.checkForActivation && !CatalogChoice.isActivated) {
	    CatalogChoice.updateActivationStatus();
	  }
	  
		if (!this.cs1IsAnimating && !this.cs2IsAnimating) {
		  document.title = 'Catalog Choice - ' + this.selectorList[id].down('a').innerHTML;
			this.cs1IsAnimating = true;
			this.cs2IsAnimating = true;
			
			var selector = this.selectorList[id];
			var section = this.sectionList[id];
		
		  // Remove active class name from all sections and selectors
			this.selectorList.each(function(s) { 
			  if (s.value.hasClassName('active')) s.value.removeClassName('active');
			});
			if (!selector.hasClassName('active')) selector.addClassName('active');
			if (section != null && !section.hasClassName('active')) section.addClassName('active');
			
			// Is this a dynamic section change?
		  // Full page load (like transition from welcome to signup) returns false.
			if (id != this.lastId && section != null) {
				var lastSection = this.sectionList[this.lastId];
	      new Effect.Fade(lastSection, {duration: .3, afterFinish: this.afterFade.bind(this, lastSection, section)});
				this.lastId = id;
				
				// Record the section change in Google Analytics
  			try { pageTracker._trackPageview('/' + id) } catch (e) {}
				
				// Support page refresh
				this.updateLocation(id);
    		return false;
			} else if (section == null) {
			  $('content_switcher_content').update('<span style="padding:1px 3px;background:#683;color:#fff">Loading...</span>');
			  return true;
			} else {
				this.resetFlag('cs1IsAnimating');
				this.resetFlag('cs2IsAnimating');
			}
		}
	},

  updateLocation: function(section) {
    var url = document.location.href.split('#')[0];
    document.location.href = url + '#' + (url.indexOf(section) > 0 ? '' : section);
  },

	afterFade: function(lastSection, section) {
		this.resetFlag('cs1IsAnimating');
		this.resetFlag('cs2IsAnimating');
		
		new Effect.Parallel([
      new Effect.Appear(section, {sync:true}),
      new Effect.Morph('content_switcher_content', {style: 'height:' + section.getDimensions().height + 'px', sync:true})
    ], {duration: .3, afterFinish:this.afterAppear.bind(this, section)});;
		
		//new Effect.Appear(section, {duration:.25, queue:{position:'end', scope:'cs2'},
		//	
		//});
	},

	afterAppear: function(section) {
		this.resetFlag('cs2IsAnimating');
	},

	resetFlag: function(flagName) {
		this[flagName] = false;
	}
}