(function($){
  
  var SocialSection = function(options, elem) {
    
    var $this = $(elem),
				$content = $this.find('.regular-content'),
				$socialFeedContainer = $this.find('#social-feed-container'),
				$feedSections = $socialFeedContainer.find('section'),
				pRibbonNav = null,
				_curFeedSectionIndex = -1;
    
    
    // ----------------------------------------------------------------
    
    function _init() {
     	// apply section title plugin to title
			$this.find('.section-title').sectionTitle();
			
			// add padding to the top of section
			$content.css('padding-top', '75px');
			
			pRibbonNav = $socialFeedContainer.ribbonNav({ribbonSections:$feedSections}).data("RibbonNav");
			
			$socialFeedContainer.bind(MomentumWW.events.RIBBON_NAV_CLICK+'.socialSection', _onFeaturesRibbonNavClick);
			
			$this.find('.rounded-link').roundedLink();
			
			$('#twitter-feed').socialFeed();
			$('#facebook-feed').socialFeed();
			
			_gotoFeedSection(0);
			
    }; // _init()
    
    // ----------------------------------------------------------------
    
		function _onFeaturesRibbonNavClick(e, index) {
			debug.log("_onFeaturesRibbonNavClick :: index: "+index);
			_gotoFeedSection(index);
		};
		
		function _gotoFeedSection(feedSectionIndex) {
			if (_curFeedSectionIndex != feedSectionIndex) {
				if (_curFeedSectionIndex != -1) {
					// we have a current feature - need to deactivate it first
					var $curFeedSection = $feedSections.eq(_curFeedSectionIndex);
					$curFeedSection.data("SocialFeed").deactivate();
				}
				
				// activate new feature
				var $destFeedSection = $feedSections.eq(feedSectionIndex);
				$destFeedSection.data("SocialFeed").activate();
				
				// update nav
				pRibbonNav.setSelectedBtn(feedSectionIndex);
			
				_curFeedSectionIndex = feedSectionIndex;
			}
		};
		

    _init();
    
    return {
      activate: function() {
				//_activate();
			},
			
			deactivate: function() {
				//_deactivate();
			}
    };
    
  };
  
  // ==================================================================
  
  $.fn.socialSection = function(options) {
    
    var pluginName = "SocialSection";
    
    options = $.extend({}, $.fn.socialSection.defaults, options);
    
    return this.each(function(){
      
      var $this = $(this);
      
      if($this.data(pluginName)) {
        return;
      }
      
      // No JavaScript plugin instance exists, so add it as data attribute.
      var pluginInstance = new SocialSection(options, this);
      $this.data(pluginName, pluginInstance);
      $this.data('sectionController', pluginInstance);
    });
    
  };
  
  // ==================================================================
  
  $.fn.socialSection.defaults = {
    
  };

  var SocialFeed = function(options, elem) {

    var $this = $(elem),
		$body = $('body'),
		$timelineContainer,
		_isSqueezed = false,
		_pScroll = null,
		_isActive = false;
		//$timelineBtn = null,
		//$favoritesBtn = null,
		//_curFeedContentId = null;


    // ----------------------------------------------------------------

    function _init() {
			// container for the feed info
			var feedInfoContainerHtml = '<div class="feed-info-container"></div>';
			var $feedInfoContainer = $.browser.msie ? $(innerShiv(feedInfoContainerHtml, false)) : $(feedInfoContainerHtml);
			$this.wrapInner($feedInfoContainer);
			var $feedInfoContainer = $this.find(".feed-info-container");
						
			var feedInfoMkup = '<div class="feed-info"></div>';
			var $feedInfo = $.browser.msie ? $(innerShiv(feedInfoMkup, false)) : $(feedInfoMkup);
			$feedInfoContainer.wrapInner($feedInfo);
			
			// wrap for the whole block on the left before the "diag"
			var feedIntroHtml = '<div class="feed-intro">';
			var $feedIntro = $.browser.msie ? $(innerShiv(feedIntroHtml, false)) : $(feedIntroHtml);
			$this.wrapInner($feedIntro);
			
			var feedInfoBackgroundHtml = '<div class="feed-info-bg"></div>';
			var $feedInfoBackground = $.browser.msie ? $(innerShiv(feedInfoBackgroundHtml, false)) : $(feedInfoBackgroundHtml);
			$feedInfoContainer.prepend($feedInfoBackground);
			
			// create the diagonal strip
			var diagMkup = '<div class="diag-container">'+
												'<div class="diag-top"></div>'+
												'<div class="diag-middle"></div>'+
												'<div class="diag-bottom"></div>'+
											'</div>';
			var $diagStrip = $.browser.msie ? $(innerShiv(diagMkup, false)) : $(diagMkup);
			$this.append($diagStrip);

			//create the main feed timeline area
			var feedTimelineMkup = '<div class="feed-container">'+											
																'<div class="feed-scroll"></div>'+
																'<div class="feed-display-container">'+
																  '<div class="feed-display timeline-container" data-id="timeline"></div>'+
																'</div>'+
															'</div>';
			var $feedTimeline = $.browser.msie ? $(innerShiv(feedTimelineMkup, false)) : $(feedTimelineMkup);
			$this.append($feedTimeline);
			
			// setup feed timeline
			$timelineContainer = $this.find('.timeline-container');
			
			// load the feeds via ajax 			
			$.ajax({
			  url: $this.data('feed-url'),
			  context: $timelineContainer,
			  success: function(data){
					var $data = $.browser.msie ? $(innerShiv(data, false)) : $(data);
			  	this.append($data);
					_pScroll = $this.find('.feed-container').socialFeedScroll().data('SocialFeedScroll');
			  }
			});
			
      $this.addClass('hidden');
    }; // _init()

    // ----------------------------------------------------------------

    function _activate() {
			debug.log("SocialFeed :: _activate :: ");
      if(!_isActive) {
        _isActive = true;
				$this.css('opacity','0');
				$this.removeClass('hidden');
				$this.stop().animate({opacity:1}, 750, 'easeOutQuart');
				
				if (_pScroll)
					_pScroll.update();
				
				// Watch for browser size changes.
	      $body.bind(MomentumWW.events.WINDOW_SQUEEZE+'.socialFeed', _onWindowSqueeze);
	      $body.bind(MomentumWW.events.WINDOW_FULL+'.socialFeed', _onWindowFull);

				if ($body.hasClass(MomentumWW.SQUEEZED) && !_isSqueezed) {
					_onWindowSqueeze();
				} else if (!$body.hasClass(MomentumWW.SQUEEZED) && _isSqueezed) {
					_onWindowFull();
				}
      }
    };

		// ----------------------------------------------------------------

    function _deactivate() {
			debug.log("SocialFeed :: _deactivate :: ");
      if(_isActive) {
        _isActive = false;
				$this.addClass('hidden');

				// Watch for browser size changes.
	      $body.unbind(MomentumWW.events.WINDOW_SQUEEZE+'.socialFeed', _onWindowSqueeze);
	      $body.unbind(MomentumWW.events.WINDOW_FULL+'.socialFeed', _onWindowFull);

      }
    };

		function _onWindowSqueeze() {
			_isSqueezed = true;
			debug.log("socialFeed :: _onWindowSqueeze");
			$this.find('.feed-container').addClass("_squeezed");
				$this.find('.feed-intro').addClass("hidden");
				$this.find('.diag-container').addClass("hidden");
    };

    function _onWindowFull() {
			_isSqueezed = false;
			debug.log("socialFeed :: _onWindowFull");

			$this.find('.feed-container').removeClass("_squeezed");
			$this.find('.feed-intro').removeClass("hidden");
			$this.find('.diag-container').removeClass("hidden");
    };

		// ----------------------------------------------------------------

    _init();

    return {
      activate: function () {
				_activate();
			},

			deactivate: function () {
				_deactivate();
			}
    };

  };

  // ==================================================================

  $.fn.socialFeed = function(options) {

    var pluginName = "SocialFeed";

    options = $.extend({}, $.fn.socialFeed.defaults, options);

    return this.each(function(){

      var $this = $(this);

      if($this.data(pluginName)) {
        return;
      }

      // No JavaScript plugin instance exists, so add it as data attribute.
      var pluginInstance = new SocialFeed(options, this);
      $this.data(pluginName, pluginInstance);
      $this.data("feature-plugin", pluginName);
    });

  };

  // ==================================================================

  $.fn.socialFeed.defaults = {

  };
  
})(jQuery);